@bundle-stats/ui 4.1.4 → 4.1.5-alpha.0

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

@@ -21,24 +21,11 @@ var MetricsTableOptions = function MetricsTableOptions(props) {
   return /*#__PURE__*/_react["default"].createElement(_dropdown.Dropdown, _extends({
     className: className,
     glyph: "menu"
-  }, restProps), function (_ref) {
-    var MenuItem = _ref.MenuItem,
-      menu = _ref.menu,
-      menuItemClassName = _ref.menuItemClassName;
-    var getButtonOnClick = function getButtonOnClick(handler) {
-      return function () {
-        handler();
-        menu.toggle();
-      };
-    };
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, handleResetFilters && /*#__PURE__*/_react["default"].createElement(MenuItem, _extends({}, menu, {
-      className: menuItemClassName,
-      onClick: getButtonOnClick(handleResetFilters)
-    }), _i18n["default"].RESET_FILTERS), handleViewAll && /*#__PURE__*/_react["default"].createElement(MenuItem, _extends({}, menu, {
-      className: menuItemClassName,
-      onClick: getButtonOnClick(handleViewAll)
-    }), _i18n["default"].VIEW_ALL));
-  });
+  }, restProps), handleResetFilters && /*#__PURE__*/_react["default"].createElement(_dropdown.Dropdown.Item, {
+    onClick: handleResetFilters
+  }, _i18n["default"].RESET_FILTERS), handleViewAll && /*#__PURE__*/_react["default"].createElement(_dropdown.Dropdown.Item, {
+    onClick: handleViewAll
+  }, _i18n["default"].VIEW_ALL));
 };
 exports.MetricsTableOptions = MetricsTableOptions;
 MetricsTableOptions.propTypes = {

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

@@ -70,7 +70,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, {

package/lib/css/default.css

@@ -1,9 +1,5 @@
 @import url("~modern-css-reset/dist/reset.css");
 
-:root {
-  --chart-height: 180px;
-}
-
 /** modern-css-reset updates */
 pre,
 ul,
@@ -31,7 +27,6 @@ h1, h2, h3, h4, h5, h6 {
 
 h1 {
   font-size: var(--size-xxxlarge);
-  line-height: var(--space-xlarge)
 }
 
 h2 {

package/lib/css/variables.css

@@ -183,6 +183,9 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
+  --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
+  --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
+
   --radius-small: 3px;
   --radius-medium: 5px;
   --radius-large: 9px;

package/lib/ui/dropdown/dropdown.js

@@ -11,7 +11,29 @@ var _menu = require("ariakit/menu");
 var _flexStack = require("../../layout/flex-stack");
 var _icon = require("../icon");
 var _dropdownModule = _interopRequireDefault(require("./dropdown.module.css"));
+var _excluded = ["className", "isActive"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 Item = function Item(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$isActive = _ref.isActive,
+    isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_menu.MenuItem, _extends({
+    className: (0, _classnames["default"])(_dropdownModule["default"].item, className, isActive && _dropdownModule["default"].itemActive)
+  }, restProps));
+};
+Item.propTypes = {
+  className: _propTypes["default"].string,
+  isActive: _propTypes["default"].bool
+};
+Item.defaultProps = {
+  className: '',
+  isActive: false
+};
 var Dropdown = function Dropdown(props) {
   var className = props.className,
     buttonClassName = props.buttonClassName,
@@ -41,10 +63,10 @@ var Dropdown = function Dropdown(props) {
     "aria-label": ariaLabel || label,
     className: _dropdownModule["default"].dropdown
   }, typeof children === 'function' ? children({
-    MenuItem: _menu.MenuItem,
+    MenuItem: Item,
     menu: menuState,
-    menuItemClassName: _dropdownModule["default"].menuItem,
-    menuItemActiveClassName: _dropdownModule["default"].menuItemActive
+    menuItemClassName: _dropdownModule["default"].item,
+    menuItemActiveClassName: _dropdownModule["default"].itemActive
   }) : children));
 };
 exports.Dropdown = Dropdown;
@@ -68,4 +90,5 @@ Dropdown.propTypes = {
   glyph: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
   /** Content */
   children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element, _propTypes["default"].func]).isRequired
-};
+};
+Dropdown.Item = Item;

package/lib/ui/dropdown/dropdown.module.css

@@ -20,11 +20,12 @@
   color: var(--color-text-light);
 }
 
+.button[aria-expanded=true],
 .button:hover,
 .button:focus,
 .button:active {
   outline: none;
-  box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
+  box-shadow: var(--shadow-layer);
   border-color: var(--color-outline-dark);
   color: var(--color-text);
 }
@@ -34,26 +35,26 @@
   left: 0;
   top: 100%;
   border-radius: var(--radius-medium);
-  box-shadow: 0 2px var(--space-xxsmall) var(--color-shadow);
+  box-shadow: var(--shadow-layer-high);
   background: var(--color-background);
-  min-width: 180px;
+  min-width: 12em;
   z-index: var(--layer-high);
-  padding: var(--space-xxsmall) 0;
+  padding: var(--space-xxxsmall);
 }
 
 .dropdown:focus {
   outline: none;
-  box-shadow: 0 2px var(--space-xsmall) var(--color-shadow);
 }
 
-.menuItem {
+.item {
   display: block;
   appearance: none;
   cursor: pointer;
   width: 100%;
   outline: none;
   border: 0;
-  padding: var(--space-xxxsmall) var(--space-xsmall);
+  border-radius: var(--radius-small);
+  padding: calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall);
   background: none;
   text-align: left;
   color: var(--color-text-light);
@@ -62,14 +63,22 @@
   text-decoration: none;
 }
 
-.menuItem:hover {
+.item[data-active-item],
+.item:hover,
+.item:focus,
+.item:active {
+  background: var(--color-highlight);
   color: var(--color-text);
 }
 
-.menuItemActive {
+.itemActive {
+  background: var(--color-highlight-info);
   color: var(--color-primary);
 }
 
-.menuItemActive:hover {
+.itemActive:hover,
+.itemActive:focus,
+.itemActive:active {
+  background: var(--color-highlight-info);
   color: var(--color-primary-dark);
 }

package/lib/ui/dropdown/dropdown.stories.js

@@ -1,27 +1,44 @@
 "use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithRenderFn = exports.Defualt = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@storybook/react");
 var _stories = require("../../stories");
 var _ = require(".");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var stories = (0, _react2.storiesOf)('UI/Dropdown', module);
-stories.addDecorator((0, _stories.getWrapperDecorator)());
-stories.add('default', function () {
+var _default = {
+  title: 'UI/Dropdown',
+  component: _.Dropdown,
+  decorators: [(0, _stories.getWrapperDecorator)()]
+};
+exports["default"] = _default;
+var Defualt = function Defualt() {
   return /*#__PURE__*/_react["default"].createElement(_.Dropdown, {
     glyph: "filter",
     label: "Toggle"
-  }, /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, "Option 1"), /*#__PURE__*/_react["default"].createElement("li", null, "Option 2")));
-});
-stories.add('with render function', function () {
+  }, /*#__PURE__*/_react["default"].createElement(_.Dropdown.Item, null, "Option 1"), /*#__PURE__*/_react["default"].createElement(_.Dropdown.Item, null, "Option 2"));
+};
+exports.Defualt = Defualt;
+var WithRenderFn = function WithRenderFn() {
   return /*#__PURE__*/_react["default"].createElement(_.Dropdown, {
     glyph: "filter",
     label: "Toggle"
   }, function (_ref) {
-    var menu = _ref.menu;
-    return /*#__PURE__*/_react["default"].createElement("button", {
+    var MenuItem = _ref.MenuItem,
+      menuItemClassName = _ref.menuItemClassName,
+      menu = _ref.menu;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(MenuItem, {
+      className: menuItemClassName
+    }, "Option 1"), /*#__PURE__*/_react["default"].createElement(MenuItem, {
+      className: menuItemClassName
+    }, "Option 2"), /*#__PURE__*/_react["default"].createElement(MenuItem, {
+      className: menuItemClassName
+    }, "Option 3"), /*#__PURE__*/_react["default"].createElement("button", {
       type: "button",
       onClick: menu.toggle
-    }, "Toggle dropdown");
+    }, "Toggle dropdown"));
   });
-});
+};
+exports.WithRenderFn = WithRenderFn;

package/lib/ui/empty-set/empty-set.js

@@ -32,7 +32,7 @@ var EmptySet = function EmptySet(props) {
     onClick: handleViewAll
   }, _i18n["default"].VIEW_ALL)] : []));
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-    space: "xxsmall",
+    space: "xxxsmall",
     className: _emptySetModule["default"].root
   }, /*#__PURE__*/_react["default"].createElement("p", null, message), filtered && actions.map(function (action, index) {
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, index > 0 && ' or ', action);

package/lib/ui/filters/filters.module.css

@@ -28,16 +28,17 @@
 }
 
 .filterOnlyButton {
-  padding: var(--space-xxxsmall) var(--space-xsmall);
+  padding: var(--space-xxxsmall);
   display: none;
   appearance: none;
   border: none;
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255) 30%);
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-highlight) 30%);
   cursor: pointer;
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
+  font-size: var(--size-small);
   line-height: var(--space-xsmall);
 }
 
@@ -78,8 +79,11 @@
   border: 1px solid var(--color-outline);
 }
 
-.filterStandalone:hover {
+.filterStandalone:hover .filterCheckbox,
+.filterStandalone:active .filterCheckbox,
+.filterStandalone:focus .filterCheckbox {
   z-index: var(--layout-xlow); /* show collapsed border */
+  box-shadow: var(--shadow-layer);
 }
 
 .filterStandalone:hover .filterCheckbox {
@@ -102,7 +106,7 @@
   margin-top: var(--space-xxxsmall);
   padding-top: var(--space-xxxsmall);
   padding-bottom: var(--space-xxxsmall);
-  margin-bottom: calc(0px - var(--space-xxsmall));
+  margin-bottom: calc(0px - var(--space-xxxsmall));
   border-top: 1px solid var(--color-outline);
 }
 

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

@@ -22,7 +22,7 @@
   width: calc(100vw - 2 * var(--space-small));
   max-width: 340px;
   outline: none;
-  filter: drop-shadow(0 0 var(--space-xxsmall) var(--color-shadow));
+  filter: drop-shadow(var(--shadow-layer-high));
   will-change: filter;
   background: var(--color-light);
   font-size: var(--size-small);

package/lib/ui/input/input.module.css

@@ -26,6 +26,7 @@
 
 .root:focus {
   border-color: var(--color-outline-dark);
+  box-shadow: var(--shadow-layer);
   color: inherit;
   transition: var(--transition-out);
 }

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

@@ -11,7 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _dropdown = require("../dropdown");
 var _icon = require("../icon");
 var _sortDropdownModule = _interopRequireDefault(require("./sort-dropdown.module.css"));
-var _excluded = ["className", "as", "id", "label", "active", "direction", "defaultDirection", "getButtonOnClick"];
+var _excluded = ["as", "id", "label", "isActive", "direction", "defaultDirection", "getButtonOnClick"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -26,18 +26,17 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 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 Item = function Item(_ref) {
-  var className = _ref.className,
-    Component = _ref.as,
+  var Component = _ref.as,
     id = _ref.id,
     label = _ref.label,
-    active = _ref.active,
+    isActive = _ref.isActive,
     direction = _ref.direction,
     defaultDirection = _ref.defaultDirection,
     getButtonOnClick = _ref.getButtonOnClick,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var buttonProps = (0, _react.useMemo)(function () {
     var resolveNextDirection = defaultDirection;
-    if (active) {
+    if (isActive) {
       resolveNextDirection = direction === 'asc' ? 'desc' : 'asc';
     }
     if (resolveNextDirection === 'desc') {
@@ -51,9 +50,10 @@ var Item = function Item(_ref) {
       onClick: getButtonOnClick(id, 'asc'),
       title: "Order data by ".concat(label, " ascending")
     };
-  }, [active, direction, defaultDirection, id, label]);
+  }, [isActive, direction, defaultDirection, id, label]);
   return /*#__PURE__*/_react["default"].createElement(Component, _extends({}, restProps, buttonProps, {
-    className: (0, _classnames["default"])(className, _sortDropdownModule["default"].item, active && _sortDropdownModule["default"].itemActive, buttonProps.className)
+    isActive: isActive,
+    className: (0, _classnames["default"])(_sortDropdownModule["default"].item, isActive && _sortDropdownModule["default"].itemActive, buttonProps.className)
   }), /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
     className: _sortDropdownModule["default"].itemIcon,
     glyph: "arrow"
@@ -66,7 +66,7 @@ Item.propTypes = {
   as: _propTypes["default"].element.isRequired,
   id: _propTypes["default"].string.isRequired,
   label: _propTypes["default"].string.isRequired,
-  active: _propTypes["default"].bool.isRequired,
+  isActive: _propTypes["default"].bool.isRequired,
   direction: _propTypes["default"].string.isRequired,
   defaultDirection: _propTypes["default"].string.isRequired,
   getButtonOnClick: _propTypes["default"].func.isRequired
@@ -108,16 +108,14 @@ var SortDropdown = function SortDropdown(props) {
       var _ref4 = _slicedToArray(_ref3, 2),
         key = _ref4[0],
         item = _ref4[1];
-      var isActive = field === key;
       return /*#__PURE__*/_react["default"].createElement(Item, {
         key: key,
         as: MenuItem,
-        className: (0, _classnames["default"])(menuItemClassName, isActive && menuItemActiveClassName),
+        isActive: field === key,
         id: key,
         label: item.label,
         direction: direction,
         defaultDirection: item.defaultDirection,
-        active: isActive,
         getButtonOnClick: getButtonOnClick
       });
     }));

package/lib/ui/tooltip/tooltip.module.css

@@ -16,7 +16,7 @@
   background: var(--color-light);
   max-width: 24em;
   color: var(--color-text);
-  filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
+  filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
   font-size: var(--size-xsmall);
   line-height: var(--space-small);

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

@@ -13,24 +13,11 @@ export const MetricsTableOptions = props => {
   return /*#__PURE__*/React.createElement(Dropdown, _extends({
     className: className,
     glyph: "menu"
-  }, restProps), _ref => {
-    let {
-      MenuItem,
-      menu,
-      menuItemClassName
-    } = _ref;
-    const getButtonOnClick = handler => () => {
-      handler();
-      menu.toggle();
-    };
-    return /*#__PURE__*/React.createElement(React.Fragment, null, handleResetFilters && /*#__PURE__*/React.createElement(MenuItem, _extends({}, menu, {
-      className: menuItemClassName,
-      onClick: getButtonOnClick(handleResetFilters)
-    }), I18N.RESET_FILTERS), handleViewAll && /*#__PURE__*/React.createElement(MenuItem, _extends({}, menu, {
-      className: menuItemClassName,
-      onClick: getButtonOnClick(handleViewAll)
-    }), I18N.VIEW_ALL));
-  });
+  }, restProps), handleResetFilters && /*#__PURE__*/React.createElement(Dropdown.Item, {
+    onClick: handleResetFilters
+  }, I18N.RESET_FILTERS), handleViewAll && /*#__PURE__*/React.createElement(Dropdown.Item, {
+    onClick: handleViewAll
+  }, I18N.VIEW_ALL));
 };
 MetricsTableOptions.propTypes = {
   className: PropTypes.string,

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

@@ -62,7 +62,7 @@ export const SummaryItem = _ref2 => {
   const showMetricDescriptionTooltip = showMetricDescription && (metric == null ? void 0 : metric.description);
   const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
   return /*#__PURE__*/React.createElement(Stack, _extends({
-    space: "xxsmall",
+    space: "xxxsmall",
     as: Component,
     className: rootClassName
   }, props), /*#__PURE__*/React.createElement(FlexStack, {

package/lib-esm/css/default.css

@@ -1,9 +1,5 @@
 @import url("~modern-css-reset/dist/reset.css");
 
-:root {
-  --chart-height: 180px;
-}
-
 /** modern-css-reset updates */
 pre,
 ul,
@@ -31,7 +27,6 @@ h1, h2, h3, h4, h5, h6 {
 
 h1 {
   font-size: var(--size-xxxlarge);
-  line-height: var(--space-xlarge)
 }
 
 h2 {

package/lib-esm/css/variables.css

@@ -183,6 +183,9 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
+  --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
+  --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
+
   --radius-small: 3px;
   --radius-medium: 5px;
   --radius-large: 9px;

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

@@ -1,3 +1,4 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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';
@@ -5,6 +6,24 @@ import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../icon';
 import css from './dropdown.module.css';
+const Item = _ref => {
+  let {
+    className = '',
+    isActive = false,
+    ...restProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement(MenuItem, _extends({
+    className: cx(css.item, className, isActive && css.itemActive)
+  }, restProps));
+};
+Item.propTypes = {
+  className: PropTypes.string,
+  isActive: PropTypes.bool
+};
+Item.defaultProps = {
+  className: '',
+  isActive: false
+};
 export const Dropdown = props => {
   const {
     className,
@@ -36,10 +55,10 @@ export const Dropdown = props => {
     "aria-label": ariaLabel || label,
     className: css.dropdown
   }, typeof children === 'function' ? children({
-    MenuItem,
+    MenuItem: Item,
     menu: menuState,
-    menuItemClassName: css.menuItem,
-    menuItemActiveClassName: css.menuItemActive
+    menuItemClassName: css.item,
+    menuItemActiveClassName: css.itemActive
   }) : children));
 };
 Dropdown.defaultProps = {
@@ -62,4 +81,5 @@ Dropdown.propTypes = {
   glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /** Content */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired
-};
+};
+Dropdown.Item = Item;

package/lib-esm/ui/dropdown/dropdown.module.css

@@ -20,11 +20,12 @@
   color: var(--color-text-light);
 }
 
+.button[aria-expanded=true],
 .button:hover,
 .button:focus,
 .button:active {
   outline: none;
-  box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
+  box-shadow: var(--shadow-layer);
   border-color: var(--color-outline-dark);
   color: var(--color-text);
 }
@@ -34,26 +35,26 @@
   left: 0;
   top: 100%;
   border-radius: var(--radius-medium);
-  box-shadow: 0 2px var(--space-xxsmall) var(--color-shadow);
+  box-shadow: var(--shadow-layer-high);
   background: var(--color-background);
-  min-width: 180px;
+  min-width: 12em;
   z-index: var(--layer-high);
-  padding: var(--space-xxsmall) 0;
+  padding: var(--space-xxxsmall);
 }
 
 .dropdown:focus {
   outline: none;
-  box-shadow: 0 2px var(--space-xsmall) var(--color-shadow);
 }
 
-.menuItem {
+.item {
   display: block;
   appearance: none;
   cursor: pointer;
   width: 100%;
   outline: none;
   border: 0;
-  padding: var(--space-xxxsmall) var(--space-xsmall);
+  border-radius: var(--radius-small);
+  padding: calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall);
   background: none;
   text-align: left;
   color: var(--color-text-light);
@@ -62,14 +63,22 @@
   text-decoration: none;
 }
 
-.menuItem:hover {
+.item[data-active-item],
+.item:hover,
+.item:focus,
+.item:active {
+  background: var(--color-highlight);
   color: var(--color-text);
 }
 
-.menuItemActive {
+.itemActive {
+  background: var(--color-highlight-info);
   color: var(--color-primary);
 }
 
-.menuItemActive:hover {
+.itemActive:hover,
+.itemActive:focus,
+.itemActive:active {
+  background: var(--color-highlight-info);
   color: var(--color-primary-dark);
 }

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

@@ -1,22 +1,32 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { getWrapperDecorator } from '../../stories';
 import { Dropdown } from '.';
-const stories = storiesOf('UI/Dropdown', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', () => /*#__PURE__*/React.createElement(Dropdown, {
+export default {
+  title: 'UI/Dropdown',
+  component: Dropdown,
+  decorators: [getWrapperDecorator()]
+};
+export const Defualt = () => /*#__PURE__*/React.createElement(Dropdown, {
   glyph: "filter",
   label: "Toggle"
-}, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Option 1"), /*#__PURE__*/React.createElement("li", null, "Option 2"))));
-stories.add('with render function', () => /*#__PURE__*/React.createElement(Dropdown, {
+}, /*#__PURE__*/React.createElement(Dropdown.Item, null, "Option 1"), /*#__PURE__*/React.createElement(Dropdown.Item, null, "Option 2"));
+export const WithRenderFn = () => /*#__PURE__*/React.createElement(Dropdown, {
   glyph: "filter",
   label: "Toggle"
 }, _ref => {
   let {
+    MenuItem,
+    menuItemClassName,
     menu
   } = _ref;
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuItem, {
+    className: menuItemClassName
+  }, "Option 1"), /*#__PURE__*/React.createElement(MenuItem, {
+    className: menuItemClassName
+  }, "Option 2"), /*#__PURE__*/React.createElement(MenuItem, {
+    className: menuItemClassName
+  }, "Option 3"), /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: menu.toggle
-  }, "Toggle dropdown");
-}));
+  }, "Toggle dropdown"));
+});

package/lib-esm/ui/empty-set/empty-set.js

@@ -21,7 +21,7 @@ export const EmptySet = props => {
     onClick: handleViewAll
   }, I18N.VIEW_ALL)] : [])];
   return /*#__PURE__*/React.createElement(Stack, {
-    space: "xxsmall",
+    space: "xxxsmall",
     className: css.root
   }, /*#__PURE__*/React.createElement("p", null, message), filtered && actions.map((action, index) => /*#__PURE__*/React.createElement(React.Fragment, null, index > 0 && ' or ', action)));
 };

package/lib-esm/ui/filters/filters.module.css

@@ -28,16 +28,17 @@
 }
 
 .filterOnlyButton {
-  padding: var(--space-xxxsmall) var(--space-xsmall);
+  padding: var(--space-xxxsmall);
   display: none;
   appearance: none;
   border: none;
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255) 30%);
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-highlight) 30%);
   cursor: pointer;
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
+  font-size: var(--size-small);
   line-height: var(--space-xsmall);
 }
 
@@ -78,8 +79,11 @@
   border: 1px solid var(--color-outline);
 }
 
-.filterStandalone:hover {
+.filterStandalone:hover .filterCheckbox,
+.filterStandalone:active .filterCheckbox,
+.filterStandalone:focus .filterCheckbox {
   z-index: var(--layout-xlow); /* show collapsed border */
+  box-shadow: var(--shadow-layer);
 }
 
 .filterStandalone:hover .filterCheckbox {
@@ -102,7 +106,7 @@
   margin-top: var(--space-xxxsmall);
   padding-top: var(--space-xxxsmall);
   padding-bottom: var(--space-xxxsmall);
-  margin-bottom: calc(0px - var(--space-xxsmall));
+  margin-bottom: calc(0px - var(--space-xxxsmall));
   border-top: 1px solid var(--color-outline);
 }
 

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

@@ -22,7 +22,7 @@
   width: calc(100vw - 2 * var(--space-small));
   max-width: 340px;
   outline: none;
-  filter: drop-shadow(0 0 var(--space-xxsmall) var(--color-shadow));
+  filter: drop-shadow(var(--shadow-layer-high));
   will-change: filter;
   background: var(--color-light);
   font-size: var(--size-small);

package/lib-esm/ui/input/input.module.css

@@ -26,6 +26,7 @@
 
 .root:focus {
   border-color: var(--color-outline-dark);
+  box-shadow: var(--shadow-layer);
   color: inherit;
   transition: var(--transition-out);
 }

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

@@ -7,11 +7,10 @@ import { Icon } from '../icon';
 import css from './sort-dropdown.module.css';
 const Item = _ref => {
   let {
-    className,
     as: Component,
     id,
     label,
-    active,
+    isActive,
     direction,
     defaultDirection,
     getButtonOnClick,
@@ -19,7 +18,7 @@ const Item = _ref => {
   } = _ref;
   const buttonProps = useMemo(() => {
     let resolveNextDirection = defaultDirection;
-    if (active) {
+    if (isActive) {
       resolveNextDirection = direction === 'asc' ? 'desc' : 'asc';
     }
     if (resolveNextDirection === 'desc') {
@@ -33,9 +32,10 @@ const Item = _ref => {
       onClick: getButtonOnClick(id, 'asc'),
       title: `Order data by ${label} ascending`
     };
-  }, [active, direction, defaultDirection, id, label]);
+  }, [isActive, direction, defaultDirection, id, label]);
   return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, buttonProps, {
-    className: cx(className, css.item, active && css.itemActive, buttonProps.className)
+    isActive: isActive,
+    className: cx(css.item, isActive && css.itemActive, buttonProps.className)
   }), /*#__PURE__*/React.createElement(Icon, {
     className: css.itemIcon,
     glyph: "arrow"
@@ -48,7 +48,7 @@ Item.propTypes = {
   as: PropTypes.element.isRequired,
   id: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
-  active: PropTypes.bool.isRequired,
+  isActive: PropTypes.bool.isRequired,
   direction: PropTypes.string.isRequired,
   defaultDirection: PropTypes.string.isRequired,
   getButtonOnClick: PropTypes.func.isRequired
@@ -90,16 +90,14 @@ export const SortDropdown = props => {
       className: css.items
     }, Object.entries(fields).map(_ref3 => {
       let [key, item] = _ref3;
-      const isActive = field === key;
       return /*#__PURE__*/React.createElement(Item, {
         key: key,
         as: MenuItem,
-        className: cx(menuItemClassName, isActive && menuItemActiveClassName),
+        isActive: field === key,
         id: key,
         label: item.label,
         direction: direction,
         defaultDirection: item.defaultDirection,
-        active: isActive,
         getButtonOnClick: getButtonOnClick
       });
     }));

package/lib-esm/ui/tooltip/tooltip.module.css

@@ -16,7 +16,7 @@
   background: var(--color-light);
   max-width: 24em;
   color: var(--color-text);
-  filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
+  filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
   font-size: var(--size-xsmall);
   line-height: var(--space-small);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.1.4",
+  "version": "4.1.5-alpha.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -86,12 +86,12 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.1.4",
+    "@bundle-stats/utils": "^4.1.5-alpha.0",
     "ariakit": "^2.0.0-next.41",
     "date-fns": "^2.28.0",
     "modern-css-reset": "^1.4.0",
     "query-string": "^7.1.0",
     "use-query-params": "^2.0.0"
   },
-  "gitHead": "47461f88560b103a16ed6d9b587869614a0a4572"
+  "gitHead": "3f5b443f86d7b29c35dd8d7a894018b8e1b82014"
 }

package/src/components/metrics-table-options/metrics-table-options.jsx

@@ -9,35 +9,16 @@ export const MetricsTableOptions = (props) => {
 
   return (
     <Dropdown className={className} glyph="menu" {...restProps}>
-      {({ MenuItem, menu, menuItemClassName }) => {
-        const getButtonOnClick = (handler) => () => {
-          handler();
-          menu.toggle();
-        };
-
-        return (
-          <>
-            {handleResetFilters && (
-              <MenuItem
-                {...menu}
-                className={menuItemClassName}
-                onClick={getButtonOnClick(handleResetFilters)}
-              >
-                {I18N.RESET_FILTERS}
-              </MenuItem>
-            )}
-            {handleViewAll && (
-              <MenuItem
-                {...menu}
-                className={menuItemClassName}
-                onClick={getButtonOnClick(handleViewAll)}
-              >
-                {I18N.VIEW_ALL}
-              </MenuItem>
-            )}
-          </>
-        );
-      }}
+      {handleResetFilters && (
+        <Dropdown.Item onClick={handleResetFilters}>
+          {I18N.RESET_FILTERS}
+        </Dropdown.Item>
+      )}
+      {handleViewAll && (
+        <Dropdown.Item onClick={handleViewAll}>
+          {I18N.VIEW_ALL}
+        </Dropdown.Item>
+      )}
     </Dropdown>
   );
 };

package/src/components/summary-item/summary-item.jsx

@@ -64,7 +64,7 @@ export const SummaryItem = ({
   const rootClassName = cx(css.root, className, css[size], showDelta && css.showDelta);
 
   return (
-    <Stack space="xxsmall" as={Component} className={rootClassName} {...props}>
+    <Stack space="xxxsmall" as={Component} className={rootClassName} {...props}>
       <FlexStack space="xxxsmall" alignItems="center" as="h3" className={css.title}>
         <span>
           {metric.label}

package/src/css/default.css

@@ -1,9 +1,5 @@
 @import url("~modern-css-reset/dist/reset.css");
 
-:root {
-  --chart-height: 180px;
-}
-
 /** modern-css-reset updates */
 pre,
 ul,
@@ -31,7 +27,6 @@ h1, h2, h3, h4, h5, h6 {
 
 h1 {
   font-size: var(--size-xxxlarge);
-  line-height: var(--space-xlarge)
 }
 
 h2 {

package/src/css/variables.css

@@ -183,6 +183,9 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
+  --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
+  --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
+
   --radius-small: 3px;
   --radius-medium: 5px;
   --radius-large: 9px;

package/src/ui/dropdown/dropdown.jsx

@@ -7,6 +7,20 @@ import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../icon';
 import css from './dropdown.module.css';
 
+const Item = ({ className = '', isActive = false, ...restProps }) => (
+  <MenuItem className={cx(css.item, className, isActive && css.itemActive)} {...restProps} />
+);
+
+Item.propTypes = {
+  className: PropTypes.string,
+  isActive: PropTypes.bool,
+};
+
+Item.defaultProps = {
+  className: '',
+  isActive: false,
+};
+
 export const Dropdown = (props) => {
   const { className, buttonClassName, label, ariaLabel, glyph, children } = props;
   const rootClassName = cx(css.root, className);
@@ -23,10 +37,10 @@ export const Dropdown = (props) => {
       <Menu state={menuState} aria-label={ariaLabel || label} className={css.dropdown}>
         {typeof children === 'function'
           ? children({
-              MenuItem,
+              MenuItem: Item,
               menu: menuState,
-              menuItemClassName: css.menuItem,
-              menuItemActiveClassName: css.menuItemActive,
+              menuItemClassName: css.item,
+              menuItemActiveClassName: css.itemActive,
             })
           : children}
       </Menu>
@@ -61,3 +75,5 @@ Dropdown.propTypes = {
   /** Content */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired,
 };
+
+Dropdown.Item = Item;

package/src/ui/dropdown/dropdown.module.css

@@ -20,11 +20,12 @@
   color: var(--color-text-light);
 }
 
+.button[aria-expanded=true],
 .button:hover,
 .button:focus,
 .button:active {
   outline: none;
-  box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
+  box-shadow: var(--shadow-layer);
   border-color: var(--color-outline-dark);
   color: var(--color-text);
 }
@@ -34,26 +35,26 @@
   left: 0;
   top: 100%;
   border-radius: var(--radius-medium);
-  box-shadow: 0 2px var(--space-xxsmall) var(--color-shadow);
+  box-shadow: var(--shadow-layer-high);
   background: var(--color-background);
-  min-width: 180px;
+  min-width: 12em;
   z-index: var(--layer-high);
-  padding: var(--space-xxsmall) 0;
+  padding: var(--space-xxxsmall);
 }
 
 .dropdown:focus {
   outline: none;
-  box-shadow: 0 2px var(--space-xsmall) var(--color-shadow);
 }
 
-.menuItem {
+.item {
   display: block;
   appearance: none;
   cursor: pointer;
   width: 100%;
   outline: none;
   border: 0;
-  padding: var(--space-xxxsmall) var(--space-xsmall);
+  border-radius: var(--radius-small);
+  padding: calc(var(--space-xxxsmall) / 2) var(--space-xxxsmall);
   background: none;
   text-align: left;
   color: var(--color-text-light);
@@ -62,14 +63,22 @@
   text-decoration: none;
 }
 
-.menuItem:hover {
+.item[data-active-item],
+.item:hover,
+.item:focus,
+.item:active {
+  background: var(--color-highlight);
   color: var(--color-text);
 }
 
-.menuItemActive {
+.itemActive {
+  background: var(--color-highlight-info);
   color: var(--color-primary);
 }
 
-.menuItemActive:hover {
+.itemActive:hover,
+.itemActive:focus,
+.itemActive:active {
+  background: var(--color-highlight-info);
   color: var(--color-primary-dark);
 }

package/src/ui/empty-set/empty-set.jsx

@@ -27,7 +27,7 @@ export const EmptySet = (props) => {
   ];
 
   return (
-    <Stack space="xxsmall" className={css.root}>
+    <Stack space="xxxsmall" className={css.root}>
       <p>{message}</p>
       {filtered &&
         actions.map((action, index) => (

package/src/ui/filters/filters.module.css

@@ -28,16 +28,17 @@
 }
 
 .filterOnlyButton {
-  padding: var(--space-xxxsmall) var(--space-xsmall);
+  padding: var(--space-xxxsmall);
   display: none;
   appearance: none;
   border: none;
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255) 30%);
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-highlight) 30%);
   cursor: pointer;
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
+  font-size: var(--size-small);
   line-height: var(--space-xsmall);
 }
 
@@ -78,8 +79,11 @@
   border: 1px solid var(--color-outline);
 }
 
-.filterStandalone:hover {
+.filterStandalone:hover .filterCheckbox,
+.filterStandalone:active .filterCheckbox,
+.filterStandalone:focus .filterCheckbox {
   z-index: var(--layout-xlow); /* show collapsed border */
+  box-shadow: var(--shadow-layer);
 }
 
 .filterStandalone:hover .filterCheckbox {
@@ -102,7 +106,7 @@
   margin-top: var(--space-xxxsmall);
   padding-top: var(--space-xxxsmall);
   padding-bottom: var(--space-xxxsmall);
-  margin-bottom: calc(0px - var(--space-xxsmall));
+  margin-bottom: calc(0px - var(--space-xxxsmall));
   border-top: 1px solid var(--color-outline);
 }
 

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

@@ -22,7 +22,7 @@
   width: calc(100vw - 2 * var(--space-small));
   max-width: 340px;
   outline: none;
-  filter: drop-shadow(0 0 var(--space-xxsmall) var(--color-shadow));
+  filter: drop-shadow(var(--shadow-layer-high));
   will-change: filter;
   background: var(--color-light);
   font-size: var(--size-small);

package/src/ui/input/input.module.css

@@ -26,6 +26,7 @@
 
 .root:focus {
   border-color: var(--color-outline-dark);
+  box-shadow: var(--shadow-layer);
   color: inherit;
   transition: var(--transition-out);
 }

package/src/ui/sort-dropdown/sort-dropdown.jsx

@@ -7,20 +7,20 @@ import { Icon } from '../icon';
 import css from './sort-dropdown.module.css';
 
 const Item = ({
-  className,
   as: Component,
   id,
   label,
-  active,
+  isActive,
   direction,
   defaultDirection,
   getButtonOnClick,
-  ...restProps }) => {
+  ...restProps
+}) => {
 
   const buttonProps = useMemo(() => {
     let resolveNextDirection = defaultDirection;
 
-    if (active) {
+    if (isActive) {
       resolveNextDirection = direction === 'asc' ? 'desc' : 'asc';
     }
 
@@ -36,13 +36,14 @@ const Item = ({
       onClick: getButtonOnClick(id, 'asc'),
       title: `Order data by ${label} ascending`,
     };
-  }, [active, direction, defaultDirection, id, label]);
+  }, [isActive, direction, defaultDirection, id, label]);
 
   return (
     <Component
       {...restProps}
       {...buttonProps}
-      className={cx(className, css.item, active && css.itemActive, buttonProps.className)}
+      isActive={isActive}
+      className={cx(css.item, isActive && css.itemActive, buttonProps.className)}
     >
       <Icon className={css.itemIcon} glyph="arrow" />
       <span className={css.itemLabel}>{label}</span>
@@ -55,7 +56,7 @@ Item.propTypes = {
   as: PropTypes.element.isRequired,
   id: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
-  active: PropTypes.bool.isRequired,
+  isActive: PropTypes.bool.isRequired,
   direction: PropTypes.string.isRequired,
   defaultDirection: PropTypes.string.isRequired,
   getButtonOnClick: PropTypes.func.isRequired,
@@ -81,23 +82,18 @@ export const SortDropdown = (props) => {
 
         return (
           <div className={css.items}>
-            {Object.entries(fields).map(([key, item]) => {
-              const isActive = field === key;
-
-              return (
-                <Item
-                  key={key}
-                  as={MenuItem}
-                  className={cx(menuItemClassName, isActive && menuItemActiveClassName)}
-                  id={key}
-                  label={item.label}
-                  direction={direction}
-                  defaultDirection={item.defaultDirection}
-                  active={isActive}
-                  getButtonOnClick={getButtonOnClick}
-                />
-              );
-            })}
+            {Object.entries(fields).map(([key, item]) => (
+              <Item
+                key={key}
+                as={MenuItem}
+                isActive={field === key}
+                id={key}
+                label={item.label}
+                direction={direction}
+                defaultDirection={item.defaultDirection}
+                getButtonOnClick={getButtonOnClick}
+              />
+            ))}
           </div>
         );
       }}

package/src/ui/tooltip/tooltip.module.css

@@ -16,7 +16,7 @@
   background: var(--color-light);
   max-width: 24em;
   color: var(--color-text);
-  filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
+  filter: drop-shadow(var(--shadow-layer));
   will-change: filter;
   font-size: var(--size-xsmall);
   line-height: var(--space-small);