@bundle-stats/ui 3.2.5 → 3.2.6-beta.3

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.2.6-beta.3](https://github.com/relative-ci/bundle-stats/compare/v3.2.6-beta.2...v3.2.6-beta.3) (2022-02-28)
+
+**Note:** Version bump only for package @bundle-stats/ui
+
+
+
+
+
+## [3.2.6-beta.2](https://github.com/relative-ci/bundle-stats/compare/v3.2.5...v3.2.6-beta.2) (2022-02-27)
+
+
+### Bug Fixes
+
+* **ui:** Add border-radius to flags ([4f7663b](https://github.com/relative-ci/bundle-stats/commit/4f7663b29a954cf1ace9caa9739acd9f37aa3b95))
+* **ui:** Box - add border-radius to outline ([bd78d20](https://github.com/relative-ci/bundle-stats/commit/bd78d2052db4b781afc3a1d9e8dd583986d0093d))
+* **ui:** Normlize border-radius usage ([e8a6b30](https://github.com/relative-ci/bundle-stats/commit/e8a6b302729112d75a82c74ef1d952fc639d16ab))
+* **ui:** SearchParams - trigger filter change correctly ([0c331d2](https://github.com/relative-ci/bundle-stats/commit/0c331d2704382cd72d42363db539107fe22ed2ee))
+* **ui:** Table - remove last row bottom line ([9398a93](https://github.com/relative-ci/bundle-stats/commit/9398a936e1d937aed188f96ce56ebfa56f3af7d7))
+
+
+### Features
+
+* **ui:** Add HoverCard component ([6ee79d5](https://github.com/relative-ci/bundle-stats/commit/6ee79d52bf5d02445e3cfca9f41841e5c710355f))
+* **ui:** Add Tag component ([f796f9c](https://github.com/relative-ci/bundle-stats/commit/f796f9c909703dab3a513059215a2ce24bc12244))
+
+
+
+
+
 ## [3.2.5](https://github.com/relative-ci/bundle-stats/compare/v3.2.4...v3.2.5) (2022-02-15)
 
 

package/lib/components/bundle-assets/bundle-assets.js

@@ -29,10 +29,12 @@ var _icon = require("../../ui/icon");
 
 var _fileName = require("../../ui/file-name");
 
-var _popover = require("../../ui/popover");
+var _hoverCard = require("../../ui/hover-card");
 
 var _tooltip = require("../../ui/tooltip");
 
+var _tag = require("../../ui/tag");
+
 var _filters = require("../../ui/filters");
 
 var _sortDropdown = require("../../ui/sort-dropdown");
@@ -137,11 +139,11 @@ var getRenderRowHeader = function getRenderRowHeader(_ref6) {
         isChunk = item.isChunk,
         isEntry = item.isEntry,
         isInitial = item.isInitial;
-    return /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
-      label: /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
-        name: label
-      }),
-      icon: /*#__PURE__*/_react["default"].createElement("div", {
+    return /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+      label: /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+        space: "xxxsmall",
+        className: _bundleAssetsModule["default"].assetName
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: _bundleAssetsModule["default"].assetInfoFlags
       }, isNotPredictive && /*#__PURE__*/_react["default"].createElement(_tooltip.Tooltip, {
         className: _bundleAssetsModule["default"].notPredictive,
@@ -151,16 +153,24 @@ var getRenderRowHeader = function getRenderRowHeader(_ref6) {
       }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
         className: _bundleAssetsModule["default"].notPredictiveIcon,
         glyph: "warning"
-      })), isChunk && /*#__PURE__*/_react["default"].createElement("span", {
+      })), isChunk && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
         title: "Chunk",
-        className: _bundleAssetsModule["default"].flagChunk
-      }, "c"), isEntry && /*#__PURE__*/_react["default"].createElement("span", {
+        size: _tag.Tag.SIZES.SMALL,
+        kind: _tag.Tag.KINDS.INFO,
+        className: (0, _classnames["default"])(_bundleAssetsModule["default"].tag, _bundleAssetsModule["default"].tagChunk)
+      }), isEntry && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
         title: "Entrypoint",
-        className: _bundleAssetsModule["default"].flagEntry
-      }, "e"), isInitial && /*#__PURE__*/_react["default"].createElement("span", {
+        size: _tag.Tag.SIZES.SMALL,
+        kind: _tag.Tag.KINDS.INFO,
+        className: (0, _classnames["default"])(_bundleAssetsModule["default"].tag, _bundleAssetsModule["default"].tagEntry)
+      }), isInitial && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
         title: "Initial",
-        className: _bundleAssetsModule["default"].flagInitial
-      }, "i"))
+        size: _tag.Tag.SIZES.SMALL,
+        kind: _tag.Tag.KINDS.INFO,
+        className: (0, _classnames["default"])(_bundleAssetsModule["default"].tag, _bundleAssetsModule["default"].tagInitial)
+      })), /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
+        name: label
+      }))
     }, /*#__PURE__*/_react["default"].createElement(_assetInfo.AssetInfo, {
       className: _bundleAssetsModule["default"].assetInfo,
       item: item,

package/lib/components/bundle-assets/bundle-assets.module.css

@@ -8,6 +8,11 @@
   margin-right: -1px; /** collapse border */
 }
 
+.assetName {
+  display: inline-flex;
+  align-items: center;
+}
+
 .notPredictive {
   margin-right: var(--space-xxsmall);
   display: inline-block;
@@ -30,41 +35,28 @@
   display: none;
 }
 
-.flag {
-  display: inline-block;
-  width: var(--space-xsmall);
-  height: var(--space-xsmall);
-  font-family: var(--font-family);
-  font-size: 8px;
-  font-weight: bold;
-  background: var(--color-highlight);
-  color: var(--color-text-light);
-  line-height: var(--space-xsmall);
-  text-align: center;
-  text-transform: uppercase;
-  vertical-align: middle;
-}
-
-.flag + .flag {
+.tag + .tag {
   margin-left: 2px;
 }
 
-.flagEntry {
-  composes: flag;
+.tagEntry {
   background: var(--color-info-light);
-  color: var(--color-background);
 }
 
-.flagInitial {
-  composes: flag;
+.tagEntry::before {
+  content: 'e';
+}
+
+.tagInitial {
   background: var(--color-info-light);
-  color: var(--color-background);
 }
 
-.flagChunk {
-  composes: flag;
-  background: var(--color-info);
-  color: var(--color-background);
+.tagInitial::before {
+  content: 'i';
+}
+
+.tagChunk::before {
+  content: 'c';
 }
 
 /* Tooltip not predictive */

package/lib/components/bundle-modules/bundle-modules.js

@@ -35,7 +35,7 @@ var _fileName = require("../../ui/file-name");
 
 var _filters = require("../../ui/filters");
 
-var _popover = require("../../ui/popover");
+var _hoverCard = require("../../ui/hover-card");
 
 var _sortDropdown = require("../../ui/sort-dropdown");
 
@@ -101,11 +101,10 @@ var RowHeader = function RowHeader(_ref) {
 
   return /*#__PURE__*/_react["default"].createElement("div", {
     onMouseEnter: handleOnMouseEnter
-  }, !showPopopver ? content : /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
-    ariaLabel: "View module info",
+  }, !showPopopver ? content : /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
     label: content
   }, function (_ref2) {
-    var popoverToggle = _ref2.popoverToggle;
+    var close = _ref2.close;
     return /*#__PURE__*/_react["default"].createElement(_moduleInfo.ModuleInfo, {
       className: _bundleModulesModule["default"].namePopover,
       item: row,
@@ -113,7 +112,7 @@ var RowHeader = function RowHeader(_ref) {
       chunkIds: chunkIds,
       labels: labels,
       customComponentLink: CustomComponentLink,
-      onClick: popoverToggle
+      onClick: close
     });
   }));
 };

package/lib/components/bundle-packages/bundle-packages.js

@@ -27,10 +27,12 @@ var _emptySet = require("../../ui/empty-set");
 
 var _filters = require("../../ui/filters");
 
-var _popover = require("../../ui/popover");
+var _hoverCard = require("../../ui/hover-card");
 
 var _sortDropdown = require("../../ui/sort-dropdown");
 
+var _tag = require("../../ui/tag");
+
 var _toolbar = require("../../ui/toolbar");
 
 var _fileName = require("../../ui/file-name");
@@ -139,15 +141,19 @@ var PackageRowHeader = function PackageRowHeader(_ref2) {
     className: _bundlePackagesModule["default"].packageNames
   }, packageNames.map(function (packageName, index) {
     // Render duplicate flag only for the last entry
-    var duplicateFlag = index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/_react["default"].createElement("span", {
-      className: _bundlePackagesModule["default"].duplicate,
-      title: "Duplicate package"
-    }, "D");
+    var duplicateFlag = index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
+      title: "Duplicate package",
+      kind: _tag.Tag.KINDS.DANGER,
+      size: _tag.Tag.SIZES.SMALL,
+      className: _bundlePackagesModule["default"].tagDuplicate
+    });
 
-    return /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
+    return /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
       className: _bundlePackagesModule["default"].packageName,
-      icon: duplicateFlag,
-      label: packageName
+      label: /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+        space: "xxxsmall",
+        className: _bundlePackagesModule["default"].packageNameLabel
+      }, duplicateFlag, /*#__PURE__*/_react["default"].createElement("span", null, packageName))
     }, /*#__PURE__*/_react["default"].createElement(PackagePopoverContent, {
       name: packageName,
       path: path,

package/lib/components/bundle-packages/bundle-packages.module.css

@@ -12,20 +12,12 @@
   margin-right: -1px; /** collapse border */
 }
 
-.duplicate {
+.tagDuplicate {
   margin-right: var(--space-xxxsmall);
-  display: inline-block;
-  width: var(--space-small);
-  height: var(--space-small);
-  font-size: 10px;
-  font-weight: bold;
-  line-height: var(--space-small);
-  text-align: center;
-  text-transform: uppercase;
-  vertical-align: middle;
+}
 
-  background: var(--color-danger);
-  color: var(--color-light);
+.tagDuplicate::before {
+  content: 'd';
 }
 
 .packageName {
@@ -43,6 +35,10 @@
   color: var(--color-text-ultra-light);
 }
 
+.packageNameLabel {
+  align-items: center;
+}
+
 .packagePopover {
   min-width: 320px;
 }

package/lib/components/delta/delta.module.css

@@ -28,6 +28,7 @@
 }
 
 .inverted {
+  border-radius: var(--radius-small);
   background-color: var(--color-gray-ultra-light);
   color: var(--color-light);
 }

package/lib/components/metrics-table-search/metrics-table-search.module.css

@@ -5,6 +5,7 @@
 }
 
 .input {
+  border-radius: var(--radius-small) 0 0 var(--radius-small);
   height: var(--space-large);
   border-color: var(--color-outline);
 }
@@ -21,12 +22,12 @@
   cursor: pointer;
   border-radius: 50%;
   position: absolute;
-  right: 0;
+  right: 2px;
   top: 50%;
   transform: translateY(-50%);
-  padding: var(--space-xxsmall);
-  width: var(--space-large);
-  height: var(--space-large);
+  padding: var(--space-xxxsmall);
+  width: var(--space-medium);
+  height: var(--space-medium);
   background: radial-gradient(var(--color-background) 50%, transparent);
   color: var(--color-text-ultra-light);
   transition: var(--transition-in);

package/lib/components/metrics-table-title/metrics-table-title.js

@@ -17,7 +17,9 @@ var _flexStack = require("../../layout/flex-stack");
 
 var _stack = require("../../layout/stack");
 
-var _popover = require("../../ui/popover");
+var _icon = require("../../ui/icon");
+
+var _hoverCard = require("../../ui/hover-card");
 
 var _metricsTableTitleModule = _interopRequireDefault(require("./metrics-table-title.module.css"));
 
@@ -30,22 +32,22 @@ var MetricsTableTitle = function MetricsTableTitle(props) {
       popoverInfo = props.popoverInfo,
       popoverHref = props.popoverHref;
   var rootClassName = (0, _classnames["default"])(_metricsTableTitleModule["default"].root, className);
-  return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+  return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxxsmall",
     className: rootClassName
-  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-    space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement("span", null, title), info && /*#__PURE__*/_react["default"].createElement("span", {
     className: _metricsTableTitleModule["default"].info
-  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
-    icon: "help"
+  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+    label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      glyph: "help"
+    })
   }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
   }, popoverInfo && /*#__PURE__*/_react["default"].createElement("p", null, popoverInfo), popoverHref && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("a", {
     href: popoverHref,
     target: "_blank",
     rel: "noreferrer"
-  }, _i18n["default"].READ_MORE))))));
+  }, _i18n["default"].READ_MORE)))));
 };
 
 exports.MetricsTableTitle = MetricsTableTitle;

package/lib/components/metrics-table-title/metrics-table-title.module.css

@@ -1,5 +1,7 @@
 .root {
+  align-items: center;
   font-weight: bold;
+  line-height: var(--space-small);
   text-transform: uppercase;
   color: var(--color-text-light);
 }

package/lib/components/module-info/module-info.module.css

@@ -15,6 +15,7 @@
 }
 
 .fileName {
+  max-width: 100%;
   padding: 2px;
   background: var(--color-highlight-warning);
 }

package/lib/components/summary-item/summary-item.js

@@ -13,7 +13,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _utils = require("@bundle-stats/utils");
 
-var _popover = require("../../ui/popover");
+var _hoverCard = require("../../ui/hover-card");
+
+var _icon = require("../../ui/icon");
 
 var _skeleton = require("../../ui/skeleton");
 
@@ -37,29 +39,22 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var MetricInfoPopover = function MetricInfoPopover(_ref) {
+var MetricInfo = function MetricInfo(_ref) {
   var description = _ref.description,
       url = _ref.url;
-
-  // Workaround cases where the parent is a link
-  var readMoreOnClick = function readMoreOnClick() {
-    window.open(url);
-  };
-
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
-  }, /*#__PURE__*/_react["default"].createElement("p", null, description), url && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("button", {
-    type: "button",
-    className: _summaryItemModule["default"].readMoreBtn,
-    onClick: readMoreOnClick
+  }, /*#__PURE__*/_react["default"].createElement("p", null, description), url && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("a", {
+    href: url,
+    className: _summaryItemModule["default"].readMoreLink
   }, "Read more")));
 };
 
-MetricInfoPopover.propTypes = {
+MetricInfo.propTypes = {
   description: _propTypes["default"].string.isRequired,
   url: _propTypes["default"].string
 };
-MetricInfoPopover.defaultProps = {
+MetricInfo.defaultProps = {
   url: ''
 };
 
@@ -93,10 +88,12 @@ var SummaryItem = function SummaryItem(_ref2) {
     as: "h3",
     space: "xxxsmall",
     className: _summaryItemModule["default"].title
-  }, /*#__PURE__*/_react["default"].createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
+  }, /*#__PURE__*/_react["default"].createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
     className: _summaryItemModule["default"].icon,
-    icon: "help"
-  }, /*#__PURE__*/_react["default"].createElement(MetricInfoPopover, metric))), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
+    label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      glyph: "help"
+    })
+  }, /*#__PURE__*/_react["default"].createElement(MetricInfo, metric))), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
     className: _summaryItemModule["default"].currentMetric,
     value: current,
     formatter: metric.formatter,

package/lib/components/summary-item/summary-item.module.css

@@ -1,4 +1,5 @@
 .title {
+  align-items: center;
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
@@ -7,25 +8,6 @@
   white-space: nowrap;
 }
 
-.readMoreBtn {
-  appearance: none;
-  padding: 0;
-  border: 0;
-  background: none;
-  cursor: pointer;
-  /* simulate link */
-  color: var(--color-primary);
-  text-decoration: underline;
-  line-height: var(--space-small);
-}
-
-.readMoreBtn:hover,
-.readMoreBtn:active,
-.readMoreBtn:focus {
-  color: var(--color-primary-dark);
-  text-decoration: none;
-}
-
 .currentMetric {
   display: block;
   color: var(--color-heading);

package/lib/components/total-size-type-title/total-size-type-title.js

@@ -19,7 +19,9 @@ var _flexStack = require("../../layout/flex-stack");
 
 var _stack = require("../../layout/stack");
 
-var _popover = require("../../ui/popover");
+var _icon = require("../../ui/icon");
+
+var _hoverCard = require("../../ui/hover-card");
 
 var _totalSizeTypeTitleModule = _interopRequireDefault(require("./total-size-type-title.module.css"));
 
@@ -30,8 +32,10 @@ var TotalSizeTypeTitle = function TotalSizeTypeTitle(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxxsmall",
     className: (0, _classnames["default"])(_totalSizeTypeTitleModule["default"].title, className)
-  }, /*#__PURE__*/_react["default"].createElement("span", null, _i18n["default"].ASSET_TOTALS), /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
-    icon: "help"
+  }, /*#__PURE__*/_react["default"].createElement("span", null, _i18n["default"].ASSET_TOTALS), /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+    label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      glyph: "help"
+    })
   }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement("p", null, _i18n["default"].ASSET_TOTALS_INFO), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("a", {

package/lib/css/variables.css

@@ -181,9 +181,9 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
-  --radius-small: var(--space-xxxsmall);
-  --radius-medium: var(--space-xxsmall);
-  --radius-large: var(--space-small);
+  --radius-small: 2px;
+  --radius-medium: var(--space-xxxsmall);
+  --radius-large: var(--space-xxsmall);
 
   /** Layout */
   --max-width: 80rem;

package/lib/hooks/search-params.js

@@ -157,7 +157,7 @@ var useSearchParams = function useSearchParams(_ref2) {
 
   (0, _react.useLayoutEffect)(function () {
     // Run a deep comparison to prevent circular setState triggering
-    if (parentSearch === search || (0, _isEqual2["default"])(parentFilters, filters)) {
+    if (parentSearch === search && (0, _isEqual2["default"])(initialFilters, filters)) {
       return;
     }
 
@@ -165,7 +165,7 @@ var useSearchParams = function useSearchParams(_ref2) {
       type: ACTION_SET,
       payload: generateState(initialFilters, parentSearch)
     });
-  }, [search, filters, parentFilters, parentSearch]);
+  }, [dispatch, search, filters, parentSearch, initialFilters]);
   /** Callbacks */
 
   var handleUpdateSearch = (0, _react.useCallback)(function (newValue) {
@@ -173,23 +173,23 @@ var useSearchParams = function useSearchParams(_ref2) {
       type: ACTION_SET_SEARCH,
       payload: newValue
     });
-  }, []);
+  }, [dispatch]);
   var handleUpdateFilters = (0, _react.useCallback)(function (newFilters) {
     dispatch({
       type: ACTION_SET_FILTERS,
       payload: newFilters
     });
-  }, []);
+  }, [dispatch]);
   var handleResetFilters = (0, _react.useCallback)(function () {
     dispatch({
       type: ACTION_RESET_DEFAULT
     });
-  }, []);
+  }, [dispatch]);
   var handleResetAllFilters = (0, _react.useCallback)(function () {
     dispatch({
       type: ACTION_RESET_ALL
     });
-  }, []);
+  }, [dispatch]);
   return {
     search: search,
     searchPattern: searchPattern,

package/lib/layout/box/box.module.css

@@ -4,6 +4,15 @@
 
 .outline {
   border: 1px solid var(--color-outline);
+  border-radius: var(--radius-medium);
+}
+
+.outline > :first-child {
+  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
+}
+
+.outline > :last-child {
+  border-radius: 0 0 var(--radius-medium) var(--radius-medium);
 }
 
 .padding-xxxsmall {

package/lib/ui/dropdown/dropdown.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _Menu = require("reakit/Menu");
+var _menu = require("ariakit/menu");
 
 var _flexStack = require("../../layout/flex-stack");
 
@@ -21,35 +21,32 @@ var _dropdownModule = _interopRequireDefault(require("./dropdown.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var Dropdown = function Dropdown(props) {
   var className = props.className,
       label = props.label,
       ariaLabel = props.ariaLabel,
       glyph = props.glyph,
-      activeLabel = props.activeLabel,
       children = props.children;
-  var rootClassName = (0, _classnames["default"])(_dropdownModule["default"].root, activeLabel && _dropdownModule["default"].activeLabel, className);
-  var menu = (0, _Menu.useMenuState)({
-    baseId: process.env.NODE_ENV === 'test' && 'id-test',
-    modal: true
-  });
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Menu.MenuButton, _extends({}, menu, {
-    className: rootClassName,
+  var rootClassName = (0, _classnames["default"])(_dropdownModule["default"].root, className);
+  var menuState = (0, _menu.useMenuState)();
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: rootClassName
+  }, /*#__PURE__*/_react["default"].createElement(_menu.MenuButton, {
+    state: menuState,
+    className: _dropdownModule["default"].button,
     tabIndex: null
-  }), /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-    space: "xxxsmall",
-    className: _dropdownModule["default"].label
+  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxxsmall"
   }, glyph && /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
     className: _dropdownModule["default"].labelIcon,
     glyph: glyph
-  }), label)), /*#__PURE__*/_react["default"].createElement(_Menu.Menu, _extends({}, menu, {
+  }), label)), /*#__PURE__*/_react["default"].createElement(_menu.Menu, {
+    state: menuState,
     "aria-label": ariaLabel || label,
     className: _dropdownModule["default"].dropdown
-  }), typeof children === 'function' ? children({
-    MenuItem: _Menu.MenuItem,
-    menu: menu,
+  }, typeof children === 'function' ? children({
+    MenuItem: _menu.MenuItem,
+    menu: menuState,
     menuItemClassName: _dropdownModule["default"].menuItem,
     menuItemActiveClassName: _dropdownModule["default"].menuItemActive
   }) : children));
@@ -60,8 +57,7 @@ Dropdown.defaultProps = {
   className: '',
   label: null,
   ariaLabel: '',
-  glyph: null,
-  activeLabel: false
+  glyph: null
 };
 Dropdown.propTypes = {
   /** Adopted child class name */
@@ -76,12 +72,6 @@ Dropdown.propTypes = {
   /** Icon glyph */
   glyph: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
 
-  /** Dropdown open state */
-  open: _propTypes["default"].bool.isRequired,
-
-  /** Active label flag */
-  activeLabel: _propTypes["default"].bool,
-
   /** Content */
   children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element, _propTypes["default"].func]).isRequired
 };