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

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

@@ -3,7 +3,8 @@ 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';
@@ -11,32 +12,25 @@ import { Metric } from '../metric';
 import { Delta } from '../delta';
 import css from './summary-item.module.css';
 
-const MetricInfoPopover = ({ description, url }) => {
-  // Workaround cases where the parent is a link
-  const readMoreOnClick = () => {
-    window.open(url);
-  };
-
-  return (
-    <Stack space="xxxsmall">
-      <p>{description}</p>
-      {url && (
-        <p>
-          <button type="button" className={css.readMoreBtn} onClick={readMoreOnClick}>
-            Read more
-          </button>
-        </p>
-      )}
-    </Stack>
-  );
-};
-
-MetricInfoPopover.propTypes = {
+const MetricInfo = ({ description, url }) => (
+  <Stack space="xxxsmall">
+    <p>{description}</p>
+    {url && (
+      <p>
+        <a href={url} className={css.readMoreLink}>
+          Read more
+        </a>
+      </p>
+    )}
+  </Stack>
+);
+
+MetricInfo.propTypes = {
   description: PropTypes.string.isRequired,
   url: PropTypes.string,
 };
 
-MetricInfoPopover.defaultProps = {
+MetricInfo.defaultProps = {
   url: '',
 };
 
@@ -65,9 +59,9 @@ export const SummaryItem = ({
         <span>{metric.label}</span>
 
         {showMetricDescriptionTooltip && (
-          <Popover className={css.icon} icon="help">
-            <MetricInfoPopover {...metric} />
-          </Popover>
+          <HoverCard className={css.icon} label={<Icon glyph="help" />}>
+            <MetricInfo {...metric} />
+          </HoverCard>
         )}
       </FlexStack>
 

package/src/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/src/components/total-size-type-title/total-size-type-title.jsx

@@ -1,31 +1,28 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames'
+import cx from 'classnames';
 
 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 = ({ className }) => (
   <FlexStack space="xxxsmall" className={cx(css.title, className)}>
     <span>{I18N.ASSET_TOTALS}</span>
-    <Popover icon="help">
+    <HoverCard label={<Icon glyph="help" />}>
       <Stack space="xxxsmall">
         <p>{I18N.ASSET_TOTALS_INFO}</p>
         <p>
-          <a
-            href={config.documentation.assets}
-            target="_blank"
-            rel="noreferrer"
-          >
+          <a href={config.documentation.assets} target="_blank" rel="noreferrer">
             {I18N.READ_MORE}
           </a>
         </p>
       </Stack>
-    </Popover>
+    </HoverCard>
   </FlexStack>
 );
 

package/src/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/src/hooks/search-params.js

@@ -25,7 +25,8 @@ const getSearchPattern = (search) => {
 };
 
 const getSearchReducer =
-  ({ defaultFilters, allEntriesFilters, setParentState }) => (state, action) => {
+  ({ defaultFilters, allEntriesFilters, setParentState }) =>
+  (state, action) => {
     const { type, payload } = action;
 
     switch (type) {
@@ -116,29 +117,35 @@ export const useSearchParams = ({
   // Update state when the custom filters/search are changing - initial load or route updates
   useLayoutEffect(() => {
     // Run a deep comparison to prevent circular setState triggering
-    if (parentSearch === search || isEqual(parentFilters, filters)) {
+    if (parentSearch === search && isEqual(initialFilters, filters)) {
       return;
     }
 
     dispatch({ type: ACTION_SET, payload: generateState(initialFilters, parentSearch) });
-  }, [search, filters, parentFilters, parentSearch]);
+  }, [dispatch, search, filters, parentSearch, initialFilters]);
 
   /** Callbacks */
-  const handleUpdateSearch = useCallback((newValue) => {
-    dispatch({ type: ACTION_SET_SEARCH, payload: newValue });
-  }, []);
+  const handleUpdateSearch = useCallback(
+    (newValue) => {
+      dispatch({ type: ACTION_SET_SEARCH, payload: newValue });
+    },
+    [dispatch],
+  );
 
-  const handleUpdateFilters = useCallback((newFilters) => {
-    dispatch({ type: ACTION_SET_FILTERS, payload: newFilters });
-  }, []);
+  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,

package/src/ui/dropdown/dropdown.jsx

@@ -1,37 +1,36 @@
 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';
 
 export const Dropdown = (props) => {
-  const { className, 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 });
+  const { className, label, ariaLabel, glyph, children } = props;
+  const rootClassName = cx(css.root, className);
+  const menuState = useMenuState();
 
   return (
-    <>
-      <MenuButton {...menu} className={rootClassName} tabIndex={null}>
+    <div className={rootClassName}>
+      <MenuButton state={menuState} className={css.button} tabIndex={null}>
         <FlexStack space="xxxsmall">
           {glyph && <Icon className={css.labelIcon} glyph={glyph} />}
           {label}
         </FlexStack>
       </MenuButton>
-      <Menu {...menu} aria-label={ariaLabel || label} className={css.dropdown}>
+      <Menu state={menuState} aria-label={ariaLabel || label} className={css.dropdown}>
         {typeof children === 'function'
           ? children({
               MenuItem,
-              menu,
+              menu: menuState,
               menuItemClassName: css.menuItem,
               menuItemActiveClassName: css.menuItemActive,
             })
           : children}
       </Menu>
-    </>
+    </div>
   );
 };
 
@@ -40,7 +39,6 @@ Dropdown.defaultProps = {
   label: null,
   ariaLabel: '',
   glyph: null,
-  activeLabel: false,
 };
 
 Dropdown.propTypes = {
@@ -56,12 +54,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,
 };

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

@@ -1,4 +1,8 @@
 .root {
+  display: inline-block;
+}
+
+.button {
   background: none;
   border: none;
   padding: 0;
@@ -18,9 +22,9 @@
   color: var(--color-text-light);
 }
 
-.root:hover,
-.root:focus,
-.root:active {
+.button:hover,
+.button:focus,
+.button:active {
   outline: none;
   box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
   border-color: var(--color-outline-dark);
@@ -44,10 +48,6 @@
   box-shadow: 0 2px var(--space-xsmall) var(--color-shadow);
 }
 
-.activeLabel .label {
-  color: var(--color-text);
-}
-
 .menuItem {
   display: block;
   appearance: none;

package/src/ui/hover-card/hover-card.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import {
+  Hovercard,
+  HovercardAnchor,
+  HovercardArrow,
+  useHovercard,
+  useHovercardState,
+} from 'ariakit/hovercard';
+
+import { Icon } from '../icon';
+import css from './hover-card.module.css';
+
+const resolveComponent = (as, href) => {
+  if (as) {
+    return as;
+  }
+
+  if (href) {
+    return 'a';
+  }
+
+  return 'span';
+};
+
+export const HoverCard = (props) => {
+  const { className, href, as, label, children } = props;
+  const state = useHovercardState({ gutter: 8 });
+  const hoverCardProps = useHovercard({ state, portal: true });
+
+  // Fallback to span if no href
+  const Component = resolveComponent(as, href);
+
+  return (
+    <div className={cx(css.root, className)}>
+      <HovercardAnchor state={state} href={href} className={css.anchor} as={Component}>
+        {label}
+      </HovercardAnchor>
+      <Hovercard
+        {...hoverCardProps}
+        state={state}
+        className={css.hoverCard}
+        style={{ zIndex: 10000 }}
+      >
+        <HovercardArrow size={24} />
+        {typeof children === 'function' ? children({ close: state.hide }) : children}
+        <Icon
+          glyph="close"
+          size="small"
+          as="button"
+          type="button"
+          className={css.closeBtn}
+          onClick={state.hide}
+        />
+      </Hovercard>
+    </div>
+  );
+};
+
+HoverCard.propTypes = {
+  /** Adopted child class name */
+  className: PropTypes.string,
+  /** Anchor label */
+  label: PropTypes.node,
+  /** Anchor href */
+  href: PropTypes.string,
+  /** Anchor component */
+  as: PropTypes.elementType,
+  /** Hover card component */
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+};
+
+HoverCard.defaultProps = {
+  className: '',
+  label: '',
+  as: '',
+  href: '',
+};

package/src/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/src/ui/hover-card/index.js

@@ -0,0 +1 @@
+export * from './hover-card';

package/src/ui/icon/icon.jsx

@@ -18,13 +18,17 @@ const ICONS = {
   WARNING: 'warning',
 };
 
-export const Icon = ({ className, glyph, as: Component, size, ...restProps }) => (
-  <Component className={cx(css.root, className, css[size])} {...restProps}>
-    <svg className={css.icon}>
-      <use xlinkHref={`#${glyph}`} />
-    </svg>
-  </Component>
-);
+export const Icon = (props) => {
+  const { className, glyph, as: Component, size, ...restProps } = props;
+
+  return (
+    <Component className={cx(css.root, className, css[size])} {...restProps}>
+      <svg className={css.icon}>
+        <use xlinkHref={`#${glyph}`} />
+      </svg>
+    </Component>
+  );
+};
 
 Icon.ICONS = ICONS;
 

package/src/ui/index.js

@@ -10,7 +10,6 @@ export { Input } from './input';
 export { Loader } from './loader';
 export { Logo } from './logo';
 export { Panels } from './panels';
-export { Popover } from './popover';
 export { Skeleton } from './skeleton';
 export { SortDropdown } from './sort-dropdown';
 export { Table } from './table';

package/src/ui/tooltip/tooltip.jsx

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import {
   Tooltip as UITooltip,
+  TooltipAnchor as UITooltipAnchor,
   TooltipArrow as UITooltipArrow,
-  TooltipReference as UITooltipReference,
   useTooltipState,
-} from 'reakit/Tooltip';
+} from 'ariakit/tooltip';
 
 import css from './tooltip.module.css';
 
@@ -21,26 +21,22 @@ export const Tooltip = (props) => {
     ...restProps
   } = props;
 
-  const rootClassName = cx(css.root, className);
-  const tooltipProps = useTooltipState({
-    baseId: process.env.NODE_ENV === 'test' && 'id-test',
-    placement: 'top',
-  });
+  const tooltip = useTooltipState({ placement: 'top' });
 
   return (
     <>
-      <UITooltipReference
+      <UITooltipAnchor
         as={Component}
-        className={rootClassName}
-        {...ref ? { ref } : {}}
+        className={cx(css.root, className)}
+        state={tooltip}
+        {...(ref ? { ref } : {})}
         {...restProps}
-        {...tooltipProps}
       >
         {children}
-      </UITooltipReference>
+      </UITooltipAnchor>
       {title && (
-        <UITooltip {...tooltipProps} className={cx(css.tooltip, darkMode && css.tooltipDarkMode)}>
-          <UITooltipArrow {...tooltipProps} className={css.arrow} size={12} />
+        <UITooltip state={tooltip} className={cx(css.tooltip, darkMode && css.tooltipDarkMode)}>
+          <UITooltipArrow state={tooltip} className={css.arrow} size={12} />
           {title}
         </UITooltip>
       )}

package/lib/ui/popover/popover.js

@@ -1,92 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Popover = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _Popover = require("reakit/Popover");
-
-var _icon = require("../icon");
-
-var _popoverModule = _interopRequireDefault(require("./popover.module.css"));
-
-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; }
-
-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 Popover = function Popover(_ref) {
-  var className = _ref.className,
-      icon = _ref.icon,
-      label = _ref.label,
-      ariaLabel = _ref.ariaLabel,
-      children = _ref.children;
-  var popover = (0, _Popover.usePopoverState)({
-    baseId: process.env.NODE_ENV === 'test' && 'id-test',
-    gutter: 12,
-    modal: true,
-    placement: 'top'
-  });
-  var onCloseButtonClick = (0, _react.useCallback)(function (event) {
-    event.preventDefault();
-    popover.toggle();
-  }, [popover]);
-  var onButtonClick = (0, _react.useCallback)(function (event) {
-    event.preventDefault();
-    popover.toggle();
-  }, [popover]);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Popover.PopoverDisclosure, _extends({
-    className: (0, _classnames["default"])(_popoverModule["default"].button, className)
-  }, popover, {
-    onClick: onButtonClick,
-    "aria-label": ariaLabel
-  }), icon && (typeof icon === 'string' ? /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-    className: _popoverModule["default"].icon,
-    glyph: icon
-  }) : icon), label && /*#__PURE__*/_react["default"].createElement("span", {
-    className: _popoverModule["default"].label
-  }, label)), /*#__PURE__*/_react["default"].createElement(_Popover.Popover, _extends({
-    className: _popoverModule["default"].popover
-  }, popover, {
-    tabIndex: 0
-  }), /*#__PURE__*/_react["default"].createElement(_Popover.PopoverArrow, _extends({
-    className: _popoverModule["default"].arrow
-  }, popover, {
-    size: 16
-  })), typeof children === 'function' ? children({
-    popoverToggle: popover.toggle
-  }) : children, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-    glyph: "close",
-    as: "button",
-    type: "button",
-    className: _popoverModule["default"].closeBtn,
-    onClick: onCloseButtonClick
-  })));
-};
-
-exports.Popover = Popover;
-Popover.propTypes = {
-  className: _propTypes["default"].string,
-  label: _propTypes["default"].element,
-  icon: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]),
-  children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element, _propTypes["default"].func]).isRequired,
-  ariaLabel: _propTypes["default"].string
-};
-Popover.defaultProps = {
-  className: '',
-  icon: '',
-  label: '',
-  ariaLabel: 'View more info'
-};