@bundle-stats/ui 3.3.0-alpha.1 → 3.4.0-alpha.3

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.js

@@ -38,7 +38,7 @@ var ModuleInfo = function ModuleInfo(props) {
       CustomComponentLink = props.customComponentLink,
       onClick = props.onClick;
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-    space: "small",
+    space: "xsmall",
     className: className
   }, item.runs.map(function (run, index) {
     var TitleComponent = index !== 0 ? 'h4' : 'h3';
@@ -48,7 +48,7 @@ var ModuleInfo = function ModuleInfo(props) {
       key: key
     }, /*#__PURE__*/_react["default"].createElement(TitleComponent, null, labels[index]), index === 0 && !(0, _isEmpty2["default"])(run === null || run === void 0 ? void 0 : run.chunkIds) && /*#__PURE__*/_react["default"].createElement("div", {
       className: _moduleInfoModule["default"].chunks
-    }, /*#__PURE__*/_react["default"].createElement("strong", {
+    }, /*#__PURE__*/_react["default"].createElement("span", {
       className: _moduleInfoModule["default"].chunksTitle
     }, "Chunks:"), run.chunkIds.map(function (chunkId) {
       var chunk = (0, _find2["default"])(chunks, {

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/summary.js

@@ -80,7 +80,7 @@ var Summary = function Summary(_ref) {
       size: size,
       id: metricId,
       data: (0, _get2["default"])(data, metricId),
-      budget: (0, _get2["default"])(budgets, metricId),
+      budget: (0, _get2["default"])(budgets, getSourceMetricId(metricId)),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false

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");
 
@@ -39,29 +41,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: ''
 };
 
@@ -89,7 +84,7 @@ var SummaryItem = function SummaryItem(_ref2) {
   var showMetricDescriptionTooltip = showMetricDescription && (metric === null || metric === void 0 ? void 0 : metric.description);
   var rootClassName = (0, _classnames["default"])(_summaryItemModule["default"].root, className, _summaryItemModule["default"][size], showDelta && _summaryItemModule["default"].showDelta);
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, _extends({
-    space: "xxsmall",
+    space: "xxxsmall",
     as: Component,
     className: rootClassName
   }, props), /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
@@ -98,10 +93,12 @@ var SummaryItem = function SummaryItem(_ref2) {
     className: _summaryItemModule["default"].title
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: _summaryItemModule["default"].titleLabel
-  }, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
+  }, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
     className: _summaryItemModule["default"].icon,
-    icon: "help"
-  }, /*#__PURE__*/_react["default"].createElement(MetricInfoPopover, metric)), budget && /*#__PURE__*/_react["default"].createElement(_budgetInfo.BudgetInfo, {
+    label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      glyph: "help"
+    })
+  }, /*#__PURE__*/_react["default"].createElement(MetricInfo, metric)), budget && /*#__PURE__*/_react["default"].createElement(_budgetInfo.BudgetInfo, {
     className: _summaryItemModule["default"].budgetInfo,
     metricId: id,
     budgetInsight: budget

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

@@ -4,6 +4,7 @@
 }
 
 .title {
+  align-items: center;
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
@@ -12,29 +13,6 @@
   white-space: nowrap;
 }
 
-.titleLabel {
-  flex: 0 0 auto;
-}
-
-.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;
-}
-
 .budgetInfo {
   position: absolute;
   right: 0;

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/constants.js

@@ -56,7 +56,7 @@ var METRICS_WEBPACK_GENERAL = ['totalSizeByTypeALL', 'totalInitialSizeJS', 'tota
 exports.METRICS_WEBPACK_GENERAL = METRICS_WEBPACK_GENERAL;
 var METRICS_WEBPACK_ASSETS = ['assetCount', 'chunkCount'];
 exports.METRICS_WEBPACK_ASSETS = METRICS_WEBPACK_ASSETS;
-var METRICS_WEBPACK_MODULES = ['moduleCount'];
+var METRICS_WEBPACK_MODULES = ['moduleCount', 'duplicateModulesCount', 'duplicateCode'];
 exports.METRICS_WEBPACK_MODULES = METRICS_WEBPACK_MODULES;
 var METRICS_WEBPACK_PACKAGES = ['packageCount', 'duplicatePackagesCount'];
 exports.METRICS_WEBPACK_PACKAGES = METRICS_WEBPACK_PACKAGES;

package/lib/css/default.css

@@ -1,18 +1,29 @@
+@import url("~modern-css-reset/dist/reset.css");
+
 :root {
   --chart-height: 180px;
 }
 
+/** modern-css-reset updates */
+pre,
+ul,
+ol,
+button {
+  margin: 0;
+}
+
 html {
+  font-family: var(--font-family);
   font-size: 81.25%;
-  line-height: 1.8461;
+  line-height: 1.6;
 }
 
 body {
+  background: var(--color-background);
   color: var(--color-text);
 }
 
-h1, h2, h3, h4, h5 {
-  margin-bottom: var(--space-small);
+h1, h2, h3, h4, h5, h6 {
   color: var(--color-heading);
   font-weight: 500;
 }

package/lib/css/variables.css

@@ -23,30 +23,30 @@
   --size-xxlarge: 1.424rem;
   --size-xxxlarge: 1.602rem;
 
-  --line-height: var(--space-medium);
+  --line-height: 1.6em;
 
   /*
    * Color scheme:
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23636568&mcgpalette4=%233385d6&themename=mcgtheme
    * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
+   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%235b5d60&mcgpalette4=%233385d6&themename=mcgtheme
    */
   --color-gray-25: #fafafa;
-  --color-gray-50: #eceded;
-  --color-gray-100: #d0d1d2;
-  --color-gray-200: #b1b2b4;
-  --color-gray-300: #929395;
-  --color-gray-400: #7a7c7f;
-  --color-gray-500: #636568;
-  --color-gray-600: #5b5d60;
-  --color-gray-700: #515355;
-  --color-gray-800: #47494b;
-  --color-gray-900: #35373a;
+  --color-gray-50: #e4e4e5;
+  --color-gray-100: #cececf;
+  --color-gray-200: #adaeb0;
+  --color-gray-300: #8c8e90;
+  --color-gray-400: #747578;
+  --color-gray-500: #5b5d60;
+  --color-gray-600: #535558;
+  --color-gray-700: #494b4e;
+  --color-gray-800: #404144;
+  --color-gray-900: #2f3033;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
   --color-gray: var(--color-gray-500);
-  --color-gray-dark: var(--color-gray-700);
-  --color-gray-ultra-dark: var(--color-gray-900);
+  --color-gray-dark: var(--color-gray-600);
+  --color-gray-ultra-dark: var(--color-gray-700);
 
   --color-red-25: #fdf5f6;
   --color-red-50: #fbebec;
@@ -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: 3px;
+  --radius-medium: var(--space-xxxsmall);
+  --radius-large: var(--space-xxsmall);
 
   /** Layout */
   --max-width: 80rem;

package/lib/hooks/search-params.js

@@ -36,9 +36,11 @@ var ACTION_SET_SEARCH = 'SET_SEARCH';
 var ACTION_RESET_DEFAULT = 'RESET_DEFAULT';
 var ACTION_RESET_ALL = 'RESET_ALL';
 var ACTION_SET = 'SET';
+var SEARCH_DEFAULT = '';
+var SEARCH_DEFAULT_PATTERN = /.*/;
 
 var getSearchPattern = function getSearchPattern(search) {
-  var searchPattern = /.*/;
+  var searchPattern = SEARCH_DEFAULT_PATTERN;
 
   if (!search || !search.trim()) {
     return searchPattern;
@@ -65,51 +67,48 @@ var getSearchReducer = function getSearchReducer(_ref) {
     switch (type) {
       case ACTION_SET_FILTERS:
         {
-          setParentState({
+          var newState = {
             filters: payload,
             search: state.search
-          });
-          return _objectSpread(_objectSpread({}, state), {}, {
-            filters: payload
-          });
+          };
+          setParentState(newState);
+          return newState;
         }
 
       case ACTION_SET_SEARCH:
         {
-          setParentState({
+          var _newState = {
             filters: state.filters,
             search: payload
-          });
-          return _objectSpread(_objectSpread({}, state), {}, {
-            search: payload,
+          };
+          setParentState(_newState);
+          return _objectSpread(_objectSpread({}, _newState), {}, {
             searchPattern: getSearchPattern(payload)
           });
         }
 
       case ACTION_RESET_DEFAULT:
         {
-          setParentState({
-            filters: defaultFilters,
-            search: ''
-          });
-          return {
+          var _newState2 = {
             filters: defaultFilters,
-            search: '',
-            searchPattern: getSearchPattern()
+            search: SEARCH_DEFAULT
           };
+          setParentState(_newState2);
+          return _objectSpread(_objectSpread({}, _newState2), {}, {
+            searchPattern: getSearchPattern()
+          });
         }
 
       case ACTION_RESET_ALL:
         {
-          setParentState({
-            filters: allEntriesFilters,
-            search: ''
-          });
-          return {
+          var _newState3 = {
             filters: allEntriesFilters,
-            search: '',
-            searchPattern: getSearchPattern()
+            search: SEARCH_DEFAULT
           };
+          setParentState(_newState3);
+          return _objectSpread(_objectSpread({}, _newState3), {}, {
+            searchPattern: getSearchPattern()
+          });
         }
 
       case ACTION_SET:
@@ -134,7 +133,8 @@ var generateState = function generateState(filters, search) {
 exports.generateState = generateState;
 
 var useSearchParams = function useSearchParams(_ref2) {
-  var parentSearch = _ref2.search,
+  var _ref2$search = _ref2.search,
+      parentSearch = _ref2$search === void 0 ? SEARCH_DEFAULT : _ref2$search,
       parentFilters = _ref2.filters,
       defaultFilters = _ref2.defaultFilters,
       allEntriesFilters = _ref2.allEntriesFilters,
@@ -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/layout/footer/footer.module.css

@@ -3,7 +3,7 @@
 }
 
 .inner {
-  border-top: 2px solid var(--color-outline);
+  border-top: 1px solid var(--color-outline);
 }
 
 .navItem {

package/lib/layout/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "Header", {
     return _header.Header;
   }
 });
+Object.defineProperty(exports, "Separator", {
+  enumerable: true,
+  get: function get() {
+    return _separator.Separator;
+  }
+});
 Object.defineProperty(exports, "Stack", {
   enumerable: true,
   get: function get() {
@@ -46,6 +52,8 @@ var _footer = require("./footer");
 
 var _header = require("./header");
 
+var _separator = require("./separator");
+
 var _subHeader = require("./sub-header");
 
 var _stack = require("./stack");

package/lib/layout/separator.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Separator = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _separatorModule = _interopRequireDefault(require("./separator.module.css"));
+
+var _excluded = ["className"];
+
+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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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 propTypes = {
+  className: _propTypes["default"].string
+};
+var defaultProps = {
+  className: ''
+};
+/**
+ * @param {PropTypes.InferProps<typeof propTypes>} props
+ * @return {React.FunctionComponentElement}
+ */
+
+var Separator = function Separator(props) {
+  var className = props.className,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({
+    className: (0, _classnames["default"])(_separatorModule["default"].root, className)
+  }, restProps));
+};
+
+exports.Separator = Separator;
+Separator.propTypes = propTypes;
+Separator.defaultProps = defaultProps;

package/lib/layout/separator.module.css

@@ -0,0 +1,5 @@
+.root {
+  background: var(--color-outline);
+  width: 100%;
+  height: 1px;
+}

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,33 @@ 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,
+      buttonClassName = props.buttonClassName,
       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: (0, _classnames["default"])(_dropdownModule["default"].button, buttonClassName),
     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));
@@ -58,15 +56,18 @@ var Dropdown = function Dropdown(props) {
 exports.Dropdown = Dropdown;
 Dropdown.defaultProps = {
   className: '',
+  buttonClassName: '',
   label: null,
   ariaLabel: '',
-  glyph: null,
-  activeLabel: false
+  glyph: null
 };
 Dropdown.propTypes = {
   /** Adopted child class name */
   className: _propTypes["default"].string,
 
+  /** Button adopted child class name */
+  buttonClassName: _propTypes["default"].string,
+
   /** Button label */
   label: _propTypes["default"].node,
 
@@ -76,12 +77,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
 };