@bundle-stats/ui 4.0.3 → 4.0.5

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

@@ -1,11 +1,67 @@
 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 React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Dropdown } from '../dropdown';
 import { Icon } from '../icon';
 import css from './sort-dropdown.module.css';
+
+const Item = _ref => {
+  let {
+    className,
+    as: Component,
+    id,
+    label,
+    active,
+    direction,
+    defaultDirection,
+    getButtonOnClick,
+    ...restProps
+  } = _ref;
+  const buttonProps = useMemo(() => {
+    let resolveNextDirection = defaultDirection;
+
+    if (active) {
+      resolveNextDirection = direction === 'asc' ? 'desc' : 'asc';
+    }
+
+    if (resolveNextDirection === 'desc') {
+      return {
+        className: css.itemAsc,
+        onClick: getButtonOnClick(id, 'desc'),
+        title: `Order data by ${label} descending`
+      };
+    }
+
+    return {
+      onClick: getButtonOnClick(id, 'asc'),
+      title: `Order data by ${label} ascending`
+    };
+  }, [active, direction, defaultDirection, id, label]);
+  return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, buttonProps, {
+    className: cx(className, css.item, active && css.itemActive, buttonProps.className)
+  }), /*#__PURE__*/React.createElement(Icon, {
+    className: css.itemIcon,
+    glyph: "arrow"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: css.itemLabel
+  }, label));
+};
+
+Item.propTypes = {
+  className: PropTypes.string,
+  as: PropTypes.element.isRequired,
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  active: PropTypes.bool.isRequired,
+  direction: PropTypes.string.isRequired,
+  defaultDirection: PropTypes.string.isRequired,
+  getButtonOnClick: PropTypes.func.isRequired
+};
+Item.defaultProps = {
+  className: ''
+};
 export const SortDropdown = props => {
   const {
     className,
@@ -22,13 +78,13 @@ export const SortDropdown = props => {
     label: customLabel,
     glyph: "sort",
     align: "right"
-  }, _ref => {
+  }, _ref2 => {
     let {
       MenuItem,
       menu,
       menuItemClassName,
       menuItemActiveClassName
-    } = _ref;
+    } = _ref2;
 
     const getButtonOnClick = (newField, newDirection) => () => {
       onChange({
@@ -40,27 +96,20 @@ export const SortDropdown = props => {
 
     return /*#__PURE__*/React.createElement("div", {
       className: css.items
-    }, Object.entries(fields).map(_ref2 => {
-      let [key, item] = _ref2;
-      const buttonProps = direction === 'asc' ? {
-        className: css.itemAsc,
-        onClick: getButtonOnClick(key, 'desc'),
-        title: `Order data by ${item.label} descending`
-      } : {
-        onClick: getButtonOnClick(key, 'asc'),
-        title: `Order data by ${item.label} ascending`
-      };
+    }, Object.entries(fields).map(_ref3 => {
+      let [key, item] = _ref3;
       const isActive = field === key;
-      return /*#__PURE__*/React.createElement(MenuItem, _extends({
-        key: key
-      }, menu, buttonProps, {
-        className: cx(buttonProps.className, menuItemClassName, css.item, isActive && menuItemActiveClassName, isActive && css.active)
-      }), /*#__PURE__*/React.createElement("span", {
-        className: css.itemLabel
-      }, item.label), /*#__PURE__*/React.createElement(Icon, {
-        className: css.itemIcon,
-        glyph: "arrow"
-      }));
+      return /*#__PURE__*/React.createElement(Item, {
+        key: key,
+        as: MenuItem,
+        className: cx(menuItemClassName, isActive && menuItemActiveClassName),
+        id: key,
+        label: item.label,
+        direction: direction,
+        defaultDirection: item.defaultDirection,
+        active: isActive,
+        getButtonOnClick: getButtonOnClick
+      });
     }));
   });
 };

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

@@ -4,7 +4,9 @@
 }
 
 .itemIcon {
-  display: none;
+  flex: 0 0 auto;
+  visibility: hidden;
+  margin-right: var(--space-xxxsmall);
 }
 
 .itemLabel {
@@ -15,6 +17,6 @@
   transform: rotate(180deg);
 }
 
-.item.active .itemIcon {
-  display: block;
+.itemActive .itemIcon {
+  visibility: visible;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.0.3",
+  "version": "4.0.5",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -54,10 +54,10 @@
     "babel-jest": "28.1.3",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.7.1",
+    "chromatic": "6.7.2",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
-    "core-js": "3.24.0",
+    "core-js": "3.24.1",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
@@ -85,12 +85,12 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.0.3",
+    "@bundle-stats/utils": "^4.0.5",
     "ariakit": "^2.0.0-next.33",
     "date-fns": "^2.28.0",
     "modern-css-reset": "^1.4.0",
     "query-string": "^7.1.0",
     "use-query-params": "^1.2.3"
   },
-  "gitHead": "6129f97b9277d81fb45839ab14425a240afc002d"
+  "gitHead": "ead8c6d4de77aaa3eb9043054eba5429a1afc04a"
 }

package/src/components/metric/metric.jsx

@@ -1,42 +1,51 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
-import styles from './metric.module.css';
+import css from './metric.module.css';
 
 // Separate value and unit
 const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
 
-export const Metric = ({ className, value, formatter, inline, anchored, children, enhanced }) => {
-  const formattedValue = formatter(value);
+export const Metric = ({ className, value, formatter, inline, children, enhanced }) => {
+  const { displayValue, displayUnit } = useMemo(() => {
+    const formattedValue = formatter?.(value);
 
-  // eslint-disable-next-line no-unused-vars
-  const [matched, displayValue, displayUnit] =
-    enhanced && formattedValue
-      ? formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN)
-      : [null, formattedValue, null];
+    if (!formattedValue) {
+      return { displayValue: value };
+    }
 
-  const rootClassName = cx(
-    className,
-    styles.root,
-    inline && styles.inline,
-    anchored && styles.anchored,
-  );
+    if (!enhanced) {
+      return { displayValue: formattedValue };
+    }
+
+    const matches = formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN);
+
+    if (!matches) {
+      return { displayValue: value };
+    }
+
+    return {
+      displayUnit: matches[2],
+      displayValue: matches[1],
+    };
+  }, [formatter, value]);
+
+  const rootClassName = cx(className, css.root, inline && css.inline);
 
   return (
-    <span className={rootClassName}>
-      <span className={styles.display}>
-        <span className={styles.displayValue}>{displayValue}</span>
-        {displayUnit && <span className={styles.displayUnit}>{displayUnit}</span>}
-      </span>
-      <span className={styles.delta}>{children}</span>
-    </span>
+    <div className={rootClassName}>
+      <div className={css.display}>
+        <span className={css.displayValue}>{displayValue}</span>
+        {displayUnit && <span className={css.displayUnit}>{displayUnit}</span>}
+      </div>
+      <div className={css.delta}>{children}</div>
+    </div>
   );
 };
 
 Metric.defaultProps = {
   className: '',
-  anchored: false,
   enhanced: false,
   inline: false,
   value: 0,
@@ -48,7 +57,6 @@ Metric.propTypes = {
   className: PropTypes.string,
   enhanced: PropTypes.bool,
   inline: PropTypes.bool,
-  anchored: PropTypes.bool,
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   formatter: PropTypes.func,
   children: PropTypes.node,

package/src/components/metric/metric.module.css

@@ -1,27 +1,17 @@
 .root {
-  display: block;
   letter-spacing: 0.05em;
 }
 
 .displayUnit {
-  color: var(--color-text-ultra-light);
+  font-size: var(--size-small);
 }
 
 .delta {
-  display: block;
-  font-size: var(--size-xsmall);
+  font-size: var(--size-small);
 }
 
-.anchored {
-  position: relative;
-}
-
-.anchored .delta {
-  position: absolute;
-  right: 0;
-  top: 100%;
-  line-height: 1;
-  margin-top: -2px;
+.inline .display {
+  display: inline-block;
 }
 
 .inline .delta {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
@@ -10,18 +10,28 @@ import { Metric } from '../metric';
 import { Delta } from '../delta';
 import css from './summary-item.module.css';
 
-const MetricInfo = ({ description, url }) => (
-  <Stack space="xxxsmall">
-    <p>{description}</p>
-    {url && (
-      <p>
-        <button type="button" onClick={() => window.open(url)} className={css.readMoreLink}>
-          Read more
-        </button>
-      </p>
-    )}
-  </Stack>
-);
+const MetricInfo = ({ description, url }) => {
+  // The component parent can be rendered inside an anchor tag, using button
+  // to avoid using nesting links
+  const onClick = useCallback(() => {
+    if (url) {
+      window.open(url);
+    }
+  }, [url]);
+
+  return (
+    <Stack space="xxxsmall">
+      <p>{description}</p>
+      {url && (
+        <p>
+          <button type="button" onClick={onClick} className={css.readMoreLink}>
+            Read more
+          </button>
+        </p>
+      )}
+    </Stack>
+  );
+};
 
 MetricInfo.propTypes = {
   description: PropTypes.string.isRequired,
@@ -52,7 +62,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}>
       <h3 className={css.title}>
         {showMetricDescriptionTooltip ? (
           <HoverCard label={metric.label}>
@@ -84,8 +94,8 @@ export const SummaryItem = ({
         </Stack>
       ) : (
         <Stack>
-          <Skeleton className={cx(css.currentMetric, css.loading)} />
-          <Skeleton className={cx(css.baselineMetric, css.loading)} />
+          <Skeleton as="p" className={cx(css.currentMetric, css.loading)} />
+          <Skeleton as="p" className={cx(css.baselineMetric, css.loading)} />
         </Stack>
       )}
     </Stack>

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

@@ -8,23 +8,15 @@
 }
 
 .currentMetric {
-  display: block;
   color: var(--color-heading);
   font-size: var(--size-xlarge);
-  line-height: var(--space-medium);
   white-space: nowrap;
   font-weight: bold;
 }
 
-.delta {
-  font-size: var(--size-small);
-  line-height: var(--space-medium);
-}
-
 .baselineMetric {
   color: var(--color-text-light);
   font-size: var(--size-small);
-  line-height: var(--space-small);
 }
 
 .readMoreLink {
@@ -63,5 +55,4 @@
 /* Size large */
 .large .currentMetric {
   font-size: var(--size-xxxlarge);
-  line-height: var(--space-medium);
 }

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

@@ -40,7 +40,7 @@
   background: var(--color-background);
   min-width: 180px;
   z-index: var(--layer-high);
-  padding: var(--space-xsmall) 0;
+  padding: var(--space-xxsmall) 0;
 }
 
 .dropdown:focus {
@@ -55,12 +55,13 @@
   width: 100%;
   outline: none;
   border: 0;
-  padding: var(--space-xxxsmall) var(--space-small);
+  padding: var(--space-xxxsmall) var(--space-xsmall);
   background: none;
   text-align: left;
   color: var(--color-text-light);
   font-size: var(--size-small);
   line-height: inherit;
+  text-decoration: none;
 }
 
 .menuItem:hover {

package/src/ui/filters/filters.jsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { get } from 'lodash';
 
 import { FlexStack } from '../../layout/flex-stack';
 import { Dropdown } from '../dropdown';
@@ -9,13 +8,21 @@ import { getGroupFiltersLabelSuffix, LABELS } from './filters.utils';
 import css from './filters.module.css';
 
 const Filter = (props) => {
-  const { className, buttonClassName, label, name, getOnOnlyClick, ...inputProps } = props;
-  const id = `filter-${name}`;
+  const {
+    className,
+    as: Component = 'div',
+    buttonClassName,
+    label,
+    name,
+    getOnOnlyClick,
+    ...inputProps
+  } = props;
 
+  const id = `filter-${name}`;
   const rootClassName = cx(css.filter, className);
 
   return (
-    <div className={rootClassName}>
+    <Component className={rootClassName}>
       {/* eslint-disable */}
       <FlexStack space="xxxsmall" as="label" className={cx(css.filterCheckbox, buttonClassName)}>
         {/* eslint-enabled */}
@@ -30,12 +37,13 @@ const Filter = (props) => {
           only
         </button>
       )}
-    </div>
+    </Component>
   );
 };
 
 Filter.propTypes = {
   className: PropTypes.string,
+  as: PropTypes.elementType,
   buttonClassName: PropTypes.string,
   name: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
@@ -44,6 +52,7 @@ Filter.propTypes = {
 
 Filter.defaultProps = {
   className: '',
+  as: 'div',
   buttonClassName: '',
   getOnOnlyClick: null,
 };
@@ -105,20 +114,17 @@ const FilterGroup = (props) => {
                 const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
 
                 return (
-                  <MenuItem
+                  <Filter
                     key={id}
-                    {...menu}
-                    className={cx(menuItemClassName, css.filterGroupItem)}
-                  >
-                    <Filter
-                      name={id}
-                      label={itemData.label}
-                      onChange={onCheckboxChange}
-                      checked={values[id]}
-                      disabled={itemData.disabled}
-                      getOnOnlyClick={getOnOnlyClick}
-                    />
-                  </MenuItem>
+                    className={menuItemClassName}
+                    as={MenuItem}
+                    name={id}
+                    label={itemData.label}
+                    onChange={onCheckboxChange}
+                    checked={values[id]}
+                    disabled={itemData.disabled}
+                    getOnOnlyClick={getOnOnlyClick}
+                  />
                 );
               })}
             </div>

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

@@ -1,5 +1,9 @@
 /* Checkbox + label + button */
 .filter {
+  /* Update MenuItem padding */
+  padding-top: calc(var(--space-xxxsmall) / 2);
+  padding-bottom: calc(var(--space-xxxsmall) / 2);
+
   position: relative;
   width: 100%;
   max-width: 240px;
@@ -11,7 +15,6 @@
 }
 
 .filterInput {
-  border-radius: var(--radius-small) 0 0 var(--radius-small);
   flex: 0 0 auto;
   height: 1em;
   cursor: pointer;
@@ -26,17 +29,17 @@
 }
 
 .filterOnlyButton {
-  padding: var(--space-xxsmall);
+  padding: var(--space-xxxsmall) var(--space-xsmall);
   display: none;
   appearance: none;
   border: none;
   background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255) 30%);
   cursor: pointer;
-  line-height: 1;
   position: absolute;
   right: 0;
-  top: 50%;
-  transform: translateY(-50%);
+  top: 0;
+  bottom: 0;
+  line-height: var(--space-xsmall);
 }
 
 /** filter disabled state */
@@ -63,6 +66,7 @@
 
 /** Filter standard variation */
 .filterStandalone {
+  padding: 0;
   width: auto;
   color: var(--color-text-light);
   z-index: var(--layout-xlow); /* show collapsed border */
@@ -95,16 +99,11 @@
   overflow: auto;
 }
 
-.filterGroupItem {
-  padding-top: 2px;
-  padding-bottom: 2px;
-}
-
 .filterGroupActions {
-  margin-top: var(--space-xxsmall);
+  margin-top: var(--space-xxxsmall);
   padding-top: var(--space-xxxsmall);
   padding-bottom: var(--space-xxxsmall);
-  margin-bottom: calc(0px - var(--space-xsmall));
+  margin-bottom: calc(0px - var(--space-xxsmall));
   border-top: 1px solid var(--color-outline);
 }
 

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

@@ -25,16 +25,12 @@ const resolveComponent = (as, href) => {
 
 export const HoverCard = (props) => {
   const { className, anchorClassName, hoverCardClassName, href, as, label, children } = props;
-  const state = useHovercardState({ gutter: 8 });
+  const state = useHovercardState({ gutter: 8, timeout: 700 });
   const hoverCardProps = useHovercard({ state, portal: true });
 
   // Fallback to span if no href
   const Component = resolveComponent(as, href);
 
-  const handleOnClick = (event) => {
-    event.preventDefault();
-  };
-
   return (
     <div className={cx(css.root, className)}>
       <HovercardAnchor
@@ -50,7 +46,6 @@ export const HoverCard = (props) => {
         state={state}
         className={cx(css.hoverCard, hoverCardClassName)}
         style={{ zIndex: 10000 }}
-        onClick={handleOnClick}
       >
         <HovercardArrow size={24} />
         {typeof children === 'function' ? children({ close: state.hide }) : children}

package/src/ui/skeleton/skeleton.jsx

@@ -5,16 +5,20 @@ import cx from 'classnames';
 import css from './skeleton.module.css';
 
 export const Skeleton = (props) => {
-  const { className, ...restProps } = props;
-  const rootClassName = cx(css.root, className);
+  const { className, as: Component, block, ...restProps } = props;
+  const rootClassName = cx(css.root, className, block && css.block);
 
-  return <span className={rootClassName} {...restProps} />;
+  return <Component className={rootClassName} {...restProps} />;
 };
 
 Skeleton.propTypes = {
   className: PropTypes.string,
+  as: PropTypes.elementType,
+  block: PropTypes.bool,
 };
 
 Skeleton.defaultProps = {
   className: '',
+  as: 'p',
+  block: false,
 };

package/src/ui/skeleton/skeleton.module.css

@@ -1,8 +1,8 @@
 .root {
-  display: block;
-  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 90%, transparent 90.1%);
+  background: linear-gradient(transparent 12.5%, currentColor 12.6%, currentColor 86.4%, transparent 86.5%);
   opacity: 0.06;
   pointer-events: none;
+  min-width: 6em;
 }
 
 /** empty char to keep the text height */
@@ -11,3 +11,7 @@
   content: '\A0';
   color: transparent;
 }
+
+.block {
+  background: currentColor;
+}