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

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/ui/tooltip/tooltip.module.css

@@ -12,7 +12,7 @@
 
 .tooltip {
   padding: var(--space-xxxsmall) var(--space-xxsmall);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-medium);
   background: var(--color-light);
   color: var(--color-text);
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));

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

@@ -12,8 +12,9 @@ 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';
 import { SortDropdown } from '../../ui/sort-dropdown';
 import { EmptySet } from '../../ui/empty-set';
@@ -86,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,
@@ -100,16 +101,24 @@ const getRenderRowHeader = _ref4 => {
       }, /*#__PURE__*/React.createElement(Icon, {
         className: css.notPredictiveIcon,
         glyph: "warning"
-      })), isChunk && /*#__PURE__*/React.createElement("span", {
+      })), isChunk && /*#__PURE__*/React.createElement(Tag, {
         title: "Chunk",
-        className: css.flagChunk
-      }, "c"), isEntry && /*#__PURE__*/React.createElement("span", {
+        size: Tag.SIZES.SMALL,
+        kind: Tag.KINDS.INFO,
+        className: cx(css.tag, css.tagChunk)
+      }), isEntry && /*#__PURE__*/React.createElement(Tag, {
         title: "Entrypoint",
-        className: css.flagEntry
-      }, "e"), isInitial && /*#__PURE__*/React.createElement("span", {
+        size: Tag.SIZES.SMALL,
+        kind: Tag.KINDS.INFO,
+        className: cx(css.tag, css.tagEntry)
+      }), isInitial && /*#__PURE__*/React.createElement(Tag, {
         title: "Initial",
-        className: css.flagInitial
-      }, "i"))
+        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,
       item: item,

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;
@@ -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-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,8 +10,9 @@ 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';
 import { FileName } from '../../ui/file-name';
 import { ComponentLink } from '../component-link';
@@ -89,14 +90,18 @@ const PackageRowHeader = _ref2 => {
     className: css.packageNames
   }, packageNames.map((packageName, index) => {
     // Render duplicate flag only for the last entry
-    const duplicateFlag = index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/React.createElement("span", {
-      className: css.duplicate,
-      title: "Duplicate package"
-    }, "D");
-    return /*#__PURE__*/React.createElement(Popover, {
+    const duplicateFlag = index === packageNames.length - 1 && item.duplicate && /*#__PURE__*/React.createElement(Tag, {
+      title: "Duplicate package",
+      kind: Tag.KINDS.DANGER,
+      size: Tag.SIZES.SMALL,
+      className: css.tagDuplicate
+    });
+    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

@@ -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-esm/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-esm/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-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

@@ -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-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/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-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,29 +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, {
-    space: "xxxsmall",
-    className: css.label
+  }, /*#__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));
@@ -44,8 +41,7 @@ Dropdown.defaultProps = {
   className: '',
   label: null,
   ariaLabel: '',
-  glyph: null,
-  activeLabel: false
+  glyph: null
 };
 Dropdown.propTypes = {
   /** Adopted child class name */
@@ -60,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
 };