@bundle-stats/ui 3.2.6-beta.1 → 3.2.6-beta.4

package/lib/ui/hover-card/hover-card.module.css

@@ -0,0 +1,52 @@
+.root {
+  display: inline-block;
+}
+
+.anchor {
+  display: inline-block;
+  color: inherit;
+  text-decoration: none;
+}
+
+a.anchor,
+buton.anchor {
+  cursor: pointer;
+}
+
+a.anchor:hover,
+button.anchor:hover {
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+
+.hoverCard {
+  padding: var(--space-xsmall) var(--space-large) var(--space-xsmall) var(--space-small);
+  border-radius: var(--radius-medium);
+  max-width: 320px;
+  outline: none;
+  filter: drop-shadow(0 0 var(--space-xxsmall) var(--color-shadow));
+  will-change: filter;
+  background: var(--color-light);
+  font-size: var(--size-small);
+}
+
+.closeBtn {
+  position: absolute;
+  right: 0;
+  top: var(--space-xxxsmall);
+  width: var(--space-large);
+  height: var(--space-large);
+  padding: var(--space-xxsmall);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-ultra-light);
+  transition: var(--transition-out);
+}
+
+.closeBtn:hover,
+.closeBtn:active,
+.closeBtn:focus {
+  color: var(--color-text-light);
+  transition: var(--transition-in);
+}

package/lib/ui/hover-card/hover-card.stories.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithRenderFn = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require(".");
+
+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 _default = {
+  title: 'UI/HoverCard',
+  component: _.HoverCard
+};
+exports["default"] = _default;
+
+var Template = function Template(props) {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.HoverCard, _extends({}, props, {
+    style: {
+      zIndex: 2
+    }
+  })), /*#__PURE__*/_react["default"].createElement("p", {
+    style: {
+      position: 'relative',
+      zIndex: 1,
+      maxWidth: 360
+    }
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in neque ante. Curabitur vehicula, lorem sit amet fringilla dapibus, justo mauris varius elit, ut fermentum leo velit eget risus"));
+};
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(Template, {
+    label: "main.js"
+  }, /*#__PURE__*/_react["default"].createElement("h1", null, "main.js"), /*#__PURE__*/_react["default"].createElement("p", null, "info"));
+};
+
+exports.Default = Default;
+
+var WithRenderFn = function WithRenderFn() {
+  return /*#__PURE__*/_react["default"].createElement(Template, {
+    label: "main.js"
+  }, function (_ref) {
+    var close = _ref.close;
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h1", null, "main.js"), /*#__PURE__*/_react["default"].createElement("p", null, "info"), /*#__PURE__*/_react["default"].createElement("button", {
+      type: "button",
+      onClick: close
+    }, "close"));
+  });
+};
+
+exports.WithRenderFn = WithRenderFn;

package/lib/ui/{popover → hover-card}/index.js

@@ -4,15 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _popover = require("./popover");
+var _hoverCard = require("./hover-card");
 
-Object.keys(_popover).forEach(function (key) {
+Object.keys(_hoverCard).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _popover[key]) return;
+  if (key in exports && exports[key] === _hoverCard[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _popover[key];
+      return _hoverCard[key];
     }
   });
 });

package/lib/ui/icon/icon.js

@@ -37,12 +37,12 @@ var ICONS = {
   WARNING: 'warning'
 };
 
-var Icon = function Icon(_ref) {
-  var className = _ref.className,
-      glyph = _ref.glyph,
-      Component = _ref.as,
-      size = _ref.size,
-      restProps = _objectWithoutProperties(_ref, _excluded);
+var Icon = function Icon(props) {
+  var className = props.className,
+      glyph = props.glyph,
+      Component = props.as,
+      size = props.size,
+      restProps = _objectWithoutProperties(props, _excluded);
 
   return /*#__PURE__*/_react["default"].createElement(Component, _extends({
     className: (0, _classnames["default"])(_iconModule["default"].root, className, _iconModule["default"][size])

package/lib/ui/index.js

@@ -75,12 +75,6 @@ Object.defineProperty(exports, "Panels", {
     return _panels.Panels;
   }
 });
-Object.defineProperty(exports, "Popover", {
-  enumerable: true,
-  get: function get() {
-    return _popover.Popover;
-  }
-});
 Object.defineProperty(exports, "Skeleton", {
   enumerable: true,
   get: function get() {
@@ -142,8 +136,6 @@ var _logo = require("./logo");
 
 var _panels = require("./panels");
 
-var _popover = require("./popover");
-
 var _skeleton = require("./skeleton");
 
 var _sortDropdown = require("./sort-dropdown");

package/lib/ui/tooltip/tooltip.js

@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _Tooltip = require("reakit/Tooltip");
+var _tooltip = require("ariakit/tooltip");
 
 var _tooltipModule = _interopRequireDefault(require("./tooltip.module.css"));
 
@@ -34,22 +34,23 @@ var Tooltip = function Tooltip(props) {
       darkMode = props.darkMode,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  var rootClassName = (0, _classnames["default"])(_tooltipModule["default"].root, className);
-  var tooltipProps = (0, _Tooltip.useTooltipState)({
-    baseId: process.env.NODE_ENV === 'test' && 'id-test',
+  var tooltip = (0, _tooltip.useTooltipState)({
     placement: 'top'
   });
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Tooltip.TooltipReference, _extends({
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_tooltip.TooltipAnchor, _extends({
     as: Component,
-    className: rootClassName
+    className: (0, _classnames["default"])(_tooltipModule["default"].root, className),
+    state: tooltip
   }, ref ? {
     ref: ref
-  } : {}, restProps, tooltipProps), children), title && /*#__PURE__*/_react["default"].createElement(_Tooltip.Tooltip, _extends({}, tooltipProps, {
+  } : {}, restProps), children), title && /*#__PURE__*/_react["default"].createElement(_tooltip.Tooltip, {
+    state: tooltip,
     className: (0, _classnames["default"])(_tooltipModule["default"].tooltip, darkMode && _tooltipModule["default"].tooltipDarkMode)
-  }), /*#__PURE__*/_react["default"].createElement(_Tooltip.TooltipArrow, _extends({}, tooltipProps, {
+  }, /*#__PURE__*/_react["default"].createElement(_tooltip.TooltipArrow, {
+    state: tooltip,
     className: _tooltipModule["default"].arrow,
     size: 12
-  })), title));
+  }), title));
 };
 
 exports.Tooltip = Tooltip;

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

@@ -12,7 +12,7 @@ import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../../ui/icon';
 import { FileName } from '../../ui/file-name';
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
 import { Tooltip } from '../../ui/tooltip';
 import { Tag } from '../../ui/tag';
 import { Filters } from '../../ui/filters';
@@ -87,11 +87,11 @@ const getRenderRowHeader = _ref4 => {
       isEntry,
       isInitial
     } = item;
-    return /*#__PURE__*/React.createElement(Popover, {
-      label: /*#__PURE__*/React.createElement(FileName, {
-        name: label
-      }),
-      icon: /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(HoverCard, {
+      label: /*#__PURE__*/React.createElement(FlexStack, {
+        space: "xxxsmall",
+        className: css.assetName
+      }, /*#__PURE__*/React.createElement("div", {
         className: css.assetInfoFlags
       }, isNotPredictive && /*#__PURE__*/React.createElement(Tooltip, {
         className: css.notPredictive,
@@ -116,6 +116,8 @@ const getRenderRowHeader = _ref4 => {
         size: Tag.SIZES.SMALL,
         kind: Tag.KINDS.INFO,
         className: cx(css.tag, css.tagInitial)
+      })), /*#__PURE__*/React.createElement(FileName, {
+        name: label
       }))
     }, /*#__PURE__*/React.createElement(AssetInfo, {
       className: css.assetInfo,

package/lib-esm/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;

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

@@ -15,7 +15,7 @@ import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
 import { SortDropdown } from '../../ui/sort-dropdown';
 import { Toolbar } from '../../ui/toolbar';
 import { MetricsTable } from '../metrics-table';
@@ -42,12 +42,11 @@ const RowHeader = _ref => {
   });
   return /*#__PURE__*/React.createElement("div", {
     onMouseEnter: handleOnMouseEnter
-  }, !showPopopver ? content : /*#__PURE__*/React.createElement(Popover, {
-    ariaLabel: "View module info",
+  }, !showPopopver ? content : /*#__PURE__*/React.createElement(HoverCard, {
     label: content
   }, _ref2 => {
     let {
-      popoverToggle
+      close
     } = _ref2;
     return /*#__PURE__*/React.createElement(ModuleInfo, {
       className: css.namePopover,
@@ -56,7 +55,7 @@ const RowHeader = _ref => {
       chunkIds: chunkIds,
       labels: labels,
       customComponentLink: CustomComponentLink,
-      onClick: popoverToggle
+      onClick: close
     });
   }));
 };

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

@@ -10,7 +10,7 @@ import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
 import { SortDropdown } from '../../ui/sort-dropdown';
 import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
@@ -96,10 +96,12 @@ const PackageRowHeader = _ref2 => {
       size: Tag.SIZES.SMALL,
       className: css.tagDuplicate
     });
-    return /*#__PURE__*/React.createElement(Popover, {
+    return /*#__PURE__*/React.createElement(HoverCard, {
       className: css.packageName,
-      icon: duplicateFlag,
-      label: packageName
+      label: /*#__PURE__*/React.createElement(FlexStack, {
+        space: "xxxsmall",
+        className: css.packageNameLabel
+      }, duplicateFlag, /*#__PURE__*/React.createElement("span", null, packageName))
     }, /*#__PURE__*/React.createElement(PackagePopoverContent, {
       name: packageName,
       path: path,

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

@@ -35,6 +35,10 @@
   color: var(--color-text-ultra-light);
 }
 
+.packageNameLabel {
+  align-items: center;
+}
+
 .packagePopover {
   min-width: 320px;
 }

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

@@ -4,7 +4,8 @@ import cx from 'classnames';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
-import { Popover } from '../../ui/popover';
+import { Icon } from '../../ui/icon';
+import { HoverCard } from '../../ui/hover-card';
 import css from './metrics-table-title.module.css';
 export const MetricsTableTitle = props => {
   const {
@@ -15,22 +16,22 @@ export const MetricsTableTitle = props => {
     popoverHref
   } = props;
   const rootClassName = cx(css.root, className);
-  return /*#__PURE__*/React.createElement(Stack, {
+  return /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall",
     className: rootClassName
-  }, /*#__PURE__*/React.createElement(FlexStack, {
-    space: "xxxsmall"
   }, /*#__PURE__*/React.createElement("span", null, title), info && /*#__PURE__*/React.createElement("span", {
     className: css.info
-  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/React.createElement(Popover, {
-    icon: "help"
+  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/React.createElement(HoverCard, {
+    label: /*#__PURE__*/React.createElement(Icon, {
+      glyph: "help"
+    })
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
   }, popoverInfo && /*#__PURE__*/React.createElement("p", null, popoverInfo), popoverHref && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {
     href: popoverHref,
     target: "_blank",
     rel: "noreferrer"
-  }, I18N.READ_MORE))))));
+  }, I18N.READ_MORE)))));
 };
 MetricsTableTitle.propTypes = {
   className: PropTypes.string,

package/lib-esm/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-esm/components/module-info/module-info.module.css

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

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

@@ -4,7 +4,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
+import { Icon } from '../../ui/icon';
 import { Skeleton } from '../../ui/skeleton';
 import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
@@ -12,31 +13,24 @@ import { Metric } from '../metric';
 import { Delta } from '../delta';
 import css from './summary-item.module.css';
 
-const MetricInfoPopover = _ref => {
+const MetricInfo = _ref => {
   let {
     description,
     url
   } = _ref;
-
-  // Workaround cases where the parent is a link
-  const readMoreOnClick = () => {
-    window.open(url);
-  };
-
   return /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
-  }, /*#__PURE__*/React.createElement("p", null, description), url && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: css.readMoreBtn,
-    onClick: readMoreOnClick
+  }, /*#__PURE__*/React.createElement("p", null, description), url && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {
+    href: url,
+    className: css.readMoreLink
   }, "Read more")));
 };
 
-MetricInfoPopover.propTypes = {
+MetricInfo.propTypes = {
   description: PropTypes.string.isRequired,
   url: PropTypes.string
 };
-MetricInfoPopover.defaultProps = {
+MetricInfo.defaultProps = {
   url: ''
 };
 export const SummaryItem = _ref2 => {
@@ -70,10 +64,12 @@ export const SummaryItem = _ref2 => {
     as: "h3",
     space: "xxxsmall",
     className: css.title
-  }, /*#__PURE__*/React.createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(Popover, {
+  }, /*#__PURE__*/React.createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(HoverCard, {
     className: css.icon,
-    icon: "help"
-  }, /*#__PURE__*/React.createElement(MetricInfoPopover, metric))), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
+    label: /*#__PURE__*/React.createElement(Icon, {
+      glyph: "help"
+    })
+  }, /*#__PURE__*/React.createElement(MetricInfo, metric))), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
     className: css.currentMetric,
     value: current,
     formatter: metric.formatter,

package/lib-esm/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-esm/components/total-size-type-title/total-size-type-title.js

@@ -5,7 +5,8 @@ import config from '../../config.json';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
-import { Popover } from '../../ui/popover';
+import { Icon } from '../../ui/icon';
+import { HoverCard } from '../../ui/hover-card';
 import css from './total-size-type-title.module.css';
 export const TotalSizeTypeTitle = _ref => {
   let {
@@ -14,8 +15,10 @@ export const TotalSizeTypeTitle = _ref => {
   return /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall",
     className: cx(css.title, className)
-  }, /*#__PURE__*/React.createElement("span", null, I18N.ASSET_TOTALS), /*#__PURE__*/React.createElement(Popover, {
-    icon: "help"
+  }, /*#__PURE__*/React.createElement("span", null, I18N.ASSET_TOTALS), /*#__PURE__*/React.createElement(HoverCard, {
+    label: /*#__PURE__*/React.createElement(Icon, {
+      glyph: "help"
+    })
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/React.createElement("p", null, I18N.ASSET_TOTALS_INFO), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {

package/lib-esm/css/variables.css

@@ -170,7 +170,7 @@
   --color-outline-warning: var(--color-yellow-200);
   --color-outline-danger: var(--color-red-100);
 
-  --color-shadow: rgba(0, 0, 0, 0.1);
+  --color-shadow: rgba(0, 0, 0, 0.2);
 
   --transition-in: all 0.2s ease-in;
   --transition-out: all 0.17s ease-out;

package/lib-esm/hooks/search-params.js

@@ -124,7 +124,7 @@ export const useSearchParams = _ref2 => {
 
   useLayoutEffect(() => {
     // Run a deep comparison to prevent circular setState triggering
-    if (parentSearch === search || _isEqual(parentFilters, filters)) {
+    if (parentSearch === search && _isEqual(initialFilters, filters)) {
       return;
     }
 
@@ -132,7 +132,7 @@ export const useSearchParams = _ref2 => {
       type: ACTION_SET,
       payload: generateState(initialFilters, parentSearch)
     });
-  }, [search, filters, parentFilters, parentSearch]);
+  }, [dispatch, search, filters, parentSearch, initialFilters]);
   /** Callbacks */
 
   const handleUpdateSearch = useCallback(newValue => {
@@ -140,23 +140,23 @@ export const useSearchParams = _ref2 => {
       type: ACTION_SET_SEARCH,
       payload: newValue
     });
-  }, []);
+  }, [dispatch]);
   const handleUpdateFilters = useCallback(newFilters => {
     dispatch({
       type: ACTION_SET_FILTERS,
       payload: newFilters
     });
-  }, []);
+  }, [dispatch]);
   const handleResetFilters = useCallback(() => {
     dispatch({
       type: ACTION_RESET_DEFAULT
     });
-  }, []);
+  }, [dispatch]);
   const handleResetAllFilters = useCallback(() => {
     dispatch({
       type: ACTION_RESET_ALL
     });
-  }, []);
+  }, [dispatch]);
   return {
     search,
     searchPattern,

package/lib-esm/ui/dropdown/dropdown.js

@@ -1,9 +1,7 @@
-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); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Menu, MenuItem, MenuButton, useMenuState } from 'reakit/Menu';
+import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../icon';
 import css from './dropdown.module.css';
@@ -13,28 +11,28 @@ export const Dropdown = props => {
     label,
     ariaLabel,
     glyph,
-    activeLabel,
     children
   } = props;
-  const rootClassName = cx(css.root, activeLabel && css.activeLabel, className);
-  const menu = useMenuState({
-    baseId: process.env.NODE_ENV === 'test' && 'id-test',
-    modal: true
-  });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuButton, _extends({}, menu, {
-    className: rootClassName,
+  const rootClassName = cx(css.root, className);
+  const menuState = useMenuState();
+  return /*#__PURE__*/React.createElement("div", {
+    className: rootClassName
+  }, /*#__PURE__*/React.createElement(MenuButton, {
+    state: menuState,
+    className: css.button,
     tabIndex: null
-  }), /*#__PURE__*/React.createElement(FlexStack, {
+  }, /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall"
   }, glyph && /*#__PURE__*/React.createElement(Icon, {
     className: css.labelIcon,
     glyph: glyph
-  }), label)), /*#__PURE__*/React.createElement(Menu, _extends({}, menu, {
+  }), label)), /*#__PURE__*/React.createElement(Menu, {
+    state: menuState,
     "aria-label": ariaLabel || label,
     className: css.dropdown
-  }), typeof children === 'function' ? children({
+  }, typeof children === 'function' ? children({
     MenuItem,
-    menu,
+    menu: menuState,
     menuItemClassName: css.menuItem,
     menuItemActiveClassName: css.menuItemActive
   }) : children));
@@ -43,8 +41,7 @@ Dropdown.defaultProps = {
   className: '',
   label: null,
   ariaLabel: '',
-  glyph: null,
-  activeLabel: false
+  glyph: null
 };
 Dropdown.propTypes = {
   /** Adopted child class name */
@@ -59,12 +56,6 @@ Dropdown.propTypes = {
   /** Icon glyph */
   glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** Dropdown open state */
-  open: PropTypes.bool.isRequired,
-
-  /** Active label flag */
-  activeLabel: PropTypes.bool,
-
   /** Content */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired
 };