@bundle-stats/ui 3.2.4-alpha.0 → 3.2.4

package/src/ui/filters/filters.jsx

@@ -18,15 +18,25 @@ const Filter = (props) => {
     <div className={rootClassName}>
       {/* eslint-disable */}
       <FlexStack space="xxxsmall" as="label" className={css.filterCheckbox}>
-        {/* eslint-enabled */}
-        <input className={css.filterInput} type="checkbox" id={id} name={name} {...inputProps} />
+      {/* eslint-enabled */}
+        <input
+          className={css.filterInput}
+          type="checkbox"
+          id={id}
+          name={name}
+          {...inputProps}
+        />
         <span className={css.filterLabel} title={label}>
           {label}
         </span>
       </FlexStack>
 
       {getOnOnlyClick && (
-        <button className={css.filterOnlyButton} type="button" onClick={getOnOnlyClick(name)}>
+        <button
+          className={css.filterOnlyButton}
+          type="button"
+          onClick={getOnOnlyClick(name)}
+        >
           only
         </button>
       )}
@@ -52,12 +62,8 @@ const FilterGroup = (props) => {
   const { label: groupLabel, ...groupData } = data;
 
   const groupItems = Object.entries(groupData);
-  const groupCheckboxes = groupItems.filter(
-    ([itemKey, item]) => typeof item?.defaultValue !== 'undefined',
-  );
-  const isGroupChecked = groupCheckboxes
-    .map(([itemKey]) => get(values, `${groupKey}.${itemKey}`))
-    .reduce((agg, val) => agg && val, true);
+  const groupCheckboxes = groupItems.filter(([itemKey, item]) => typeof item?.defaultValue !== 'undefined');
+  const isGroupChecked = groupCheckboxes.map(([itemKey]) => get(values, `${groupKey}.${itemKey}`)).reduce((agg, val) => agg && val, true);
 
   const filterSuffix = getGroupFiltersLabelSuffix(groupItems);
   const hasCustomFilterSuffix = !Object.values(LABELS).includes(filterSuffix);
@@ -65,30 +71,27 @@ const FilterGroup = (props) => {
     <>
       {`${groupLabel}:`}
       &nbsp;
-      <span className={cx(hasCustomFilterSuffix && css.labelSuffixCustom)}>{filterSuffix}</span>
+      <span className={cx(hasCustomFilterSuffix && css.labelSuffixCustom)}>
+        {filterSuffix}
+      </span>
     </>
   );
 
-  const getOnGroupCheck =
-    (value, overrides = {}) =>
-    () => {
-      const newFilters = groupCheckboxes.reduce(
-        (agg, [itemKey]) => ({
-          ...agg,
-          [`${groupKey}.${itemKey}`]: value,
-        }),
-        {},
-      );
-
-      toggleFilters({
-        ...newFilters,
-        ...overrides,
-      });
-    };
+  const getOnGroupCheck = (value, overrides = {}) => () => {
+    const newFilters = groupCheckboxes.reduce((agg, [itemKey]) => ({
+      ...agg,
+      [`${groupKey}.${itemKey}`]: value,
+    }), {});
+
+    toggleFilters({
+      ...newFilters,
+      ...overrides,
+    });
+  };
 
   return (
     <Dropdown label={dropdownLabel} ariaLabel={`${groupLabel}: ${filterSuffix}`}>
-      {({ MenuItem, menuItemClassName }) => {
+      {({ MenuItem, menu, menuItemClassName }) => {
         return (
           <>
             <div className={css.filterGroupItems}>
@@ -97,7 +100,7 @@ const FilterGroup = (props) => {
                 const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
 
                 return (
-                  <MenuItem key={id} className={cx(menuItemClassName, css.filterGroupItem)}>
+                  <MenuItem key={id} {...menu} className={cx(menuItemClassName, css.filterGroupItem)}>
                     <Filter
                       name={id}
                       label={itemData.label}
@@ -135,7 +138,7 @@ const FilterGroup = (props) => {
             </div>
           </>
         );
-      }}
+    }}
     </Dropdown>
   );
 };
@@ -149,7 +152,13 @@ FilterGroup.propTypes = {
 };
 
 export const Filters = (props) => {
-  const { className, values, filters, toggleFilter, toggleFilters } = props;
+  const {
+    className,
+    values,
+    filters,
+    toggleFilter,
+    toggleFilters,
+  } = props;
 
   const onCheckboxChange = ({ target }) => toggleFilter(target.name, target.checked);
   const rootClassName = cx(css.root, className);

package/src/ui/index.js

@@ -7,10 +7,10 @@ export { Filters } from './filters';
 export { HorizontalBarChart } from './horizontal-bar-chart';
 export { Icon } from './icon';
 export { Input } from './input';
-export { HoverCard } from './hover-card';
 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/popover/index.js

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

package/src/ui/popover/popover.jsx

@@ -0,0 +1,79 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import {
+  usePopoverState,
+  Popover as UIPopover,
+  PopoverDisclosure as UIPopoverDisclosure,
+  PopoverArrow as UIPopoverArrow,
+} from 'reakit/Popover';
+
+import { Icon } from '../icon';
+import css from './popover.module.css';
+
+export const Popover = ({ className, icon, label, ariaLabel, children }) => {
+  const popover = usePopoverState({
+    baseId: process.env.NODE_ENV === 'test' && 'id-test',
+    gutter: 12,
+    modal: true,
+    placement: 'top',
+  });
+
+  const onCloseButtonClick = useCallback(
+    (event) => {
+      event.preventDefault();
+      popover.toggle();
+    },
+    [popover],
+  );
+
+  const onButtonClick = useCallback(
+    (event) => {
+      event.preventDefault();
+      popover.toggle();
+    },
+    [popover],
+  );
+
+  return (
+    <>
+      <UIPopoverDisclosure
+        className={cx(css.button, className)}
+        {...popover}
+        onClick={onButtonClick}
+        aria-label={ariaLabel}
+      >
+        {icon && (typeof icon === 'string' ? <Icon className={css.icon} glyph={icon} /> : icon)}
+        {label && <span className={css.label}>{label}</span>}
+      </UIPopoverDisclosure>
+      <UIPopover className={css.popover} {...popover} tabIndex={0}>
+        <UIPopoverArrow className={css.arrow} {...popover} size={16} />
+
+        {typeof children === 'function' ? children({ popoverToggle: popover.toggle }) : children}
+
+        <Icon
+          glyph="close"
+          as="button"
+          type="button"
+          className={css.closeBtn}
+          onClick={onCloseButtonClick}
+        />
+      </UIPopover>
+    </>
+  );
+};
+
+Popover.propTypes = {
+  className: PropTypes.string,
+  label: PropTypes.element,
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired,
+  ariaLabel: PropTypes.string,
+};
+
+Popover.defaultProps = {
+  className: '',
+  icon: '',
+  label: '',
+  ariaLabel: 'View more info',
+};

package/src/ui/popover/popover.module.css

@@ -0,0 +1,66 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  border: none;
+  outline: none;
+  padding: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  line-height: inherit;
+  text-align: inherit;
+}
+
+.button:hover,
+.button:active,
+.button:focus {
+  color: var(--color-primary);
+}
+
+.button:hover .label {
+  text-decoration: underline;
+}
+
+.popover {
+  padding: var(--space-small) var(--space-large) var(--space-small) var(--space-small);
+  border-radius: var(--radius-small);
+  max-width: 360px;
+  outline: none;
+  filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
+  background: var(--color-light);
+  font-size: var(--size-small);
+}
+
+.arrow svg {
+  display: block;
+}
+
+.arrow :global .fill {
+  fill: var(--color-light);
+}
+
+.arrow :global .stroke {
+  fill: var(--color-light);
+}
+
+.closeBtn {
+  position: absolute;
+  right: 0;
+  top: 0;
+  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/sort-dropdown/sort-dropdown.jsx

@@ -13,10 +13,11 @@ export const SortDropdown = (props) => {
   const customLabel = fields[field] ? `Ordered by ${fields[field].label}` : label;
 
   return (
-    <Dropdown className={rootClassName} label={customLabel} glyph="sort">
-      {({ MenuItem, menuItemClassName, menuItemActiveClassName }) => {
+    <Dropdown className={rootClassName} label={customLabel} glyph="sort" align="right">
+      {({ MenuItem, menu, menuItemClassName, menuItemActiveClassName }) => {
         const getButtonOnClick = (newField, newDirection) => () => {
           onChange({ field: newField, direction: newDirection });
+          menu.toggle();
         };
 
         return (
@@ -25,20 +26,21 @@ export const SortDropdown = (props) => {
               const buttonProps =
                 direction === 'asc'
                   ? {
-                      className: css.itemAsc,
-                      onClick: getButtonOnClick(key, 'desc'),
-                      title: `Order data by ${item.label} descending`,
-                    }
+                    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`,
-                    };
+                    onClick: getButtonOnClick(key, 'asc'),
+                    title: `Order data by ${item.label} ascending`,
+                  };
 
               const isActive = field === key;
 
               return (
                 <MenuItem
                   key={key}
+                  {...menu}
                   {...buttonProps}
                   className={cx(
                     buttonProps.className,

package/src/ui/tooltip/tooltip.jsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import * as BaseTooltip from '@radix-ui/react-tooltip';
+import {
+  Tooltip as UITooltip,
+  TooltipArrow as UITooltipArrow,
+  TooltipReference as UITooltipReference,
+  useTooltipState,
+} from 'reakit/Tooltip';
 
 import css from './tooltip.module.css';
 
-const OFFSET = 9;
-const DELAY = 200;
-
 export const Tooltip = (props) => {
   const {
     className,
@@ -20,24 +22,29 @@ export const Tooltip = (props) => {
   } = props;
 
   const rootClassName = cx(css.root, className);
-  const tooltipClassName = cx(css.tooltip, darkMode && css.tooltipDarkMode);
+  const tooltipProps = useTooltipState({
+    baseId: process.env.NODE_ENV === 'test' && 'id-test',
+    placement: 'top',
+  });
 
   return (
-    <BaseTooltip.Provider>
-      <BaseTooltip.Root delayDuration={DELAY}>
-        <BaseTooltip.Trigger asChild>
-          <Component className={rootClassName} {...restProps}>
-            {children}
-          </Component>
-        </BaseTooltip.Trigger>
-        {title && (
-          <BaseTooltip.Content className={tooltipClassName}>
-            <BaseTooltip.Arrow className={css.arrow} startOffset={OFFSET} offset={OFFSET} />
-            {title}
-          </BaseTooltip.Content>
-        )}
-      </BaseTooltip.Root>
-    </BaseTooltip.Provider>
+    <>
+      <UITooltipReference
+        as={Component}
+        className={rootClassName}
+        {...ref ? { ref } : {}}
+        {...restProps}
+        {...tooltipProps}
+      >
+        {children}
+      </UITooltipReference>
+      {title && (
+        <UITooltip {...tooltipProps} className={cx(css.tooltip, darkMode && css.tooltipDarkMode)}>
+          <UITooltipArrow {...tooltipProps} className={css.arrow} size={12} />
+          {title}
+        </UITooltip>
+      )}
+    </>
   );
 };
 

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

@@ -1,7 +1,4 @@
 .root {
-  appearance: none;
-  border: none;
-  background: none;
   position: relative;
   color: inherit;
   line-height: inherit;
@@ -23,7 +20,8 @@
   line-height: var(--space-small);
 }
 
-.arrow {
+.arrow svg {
+  display: block;
   fill: var(--color-light);
 }
 
@@ -32,6 +30,6 @@
   color: var(--color-light);
 }
 
-.tooltipDarkMode .arrow {
+.tooltipDarkMode .arrow svg {
   fill: var(--color-text);
 }

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

@@ -1,65 +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.HoverCard = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var BaseHoverCard = _interopRequireWildcard(require("@radix-ui/react-hover-card"));
-
-var _hoverCardModule = _interopRequireDefault(require("./hover-card.module.css"));
-
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var OFFSET = 8;
-var DELAY = 300;
-var propTypes = {
-  className: _propTypes["default"].string,
-  label: _propTypes["default"].element.isRequired,
-  side: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left']),
-  children: _propTypes["default"].element.isRequired
-};
-var defaultProps = {
-  className: '',
-  side: 'top'
-};
-/**
- * @param {PropTypes.InferProps<typeof propTypes>} props
- * @return {React.FunctionComponentElement}
- */
-
-var HoverCard = function HoverCard(props) {
-  var className = props.className,
-      label = props.label,
-      side = props.side,
-      children = props.children;
-  return /*#__PURE__*/_react["default"].createElement(BaseHoverCard.Root, {
-    openDelay: DELAY,
-    closeDelay: DELAY
-  }, /*#__PURE__*/_react["default"].createElement(BaseHoverCard.Trigger, {
-    className: (0, _classnames["default"])(_hoverCardModule["default"].label, className)
-  }, label), /*#__PURE__*/_react["default"].createElement(BaseHoverCard.Content, {
-    className: _hoverCardModule["default"].card,
-    sideOffset: OFFSET,
-    side: side
-  }, /*#__PURE__*/_react["default"].createElement(BaseHoverCard.Arrow, {
-    className: _hoverCardModule["default"].arrow,
-    offset: OFFSET
-  }), children));
-};
-
-exports.HoverCard = HoverCard;
-HoverCard.propTypes = propTypes;
-HoverCard.defaultProps = defaultProps;

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

@@ -1,29 +0,0 @@
-.label {
-  color: inherit;
-  cursor: pointer;
-}
-
-.label:hover,
-.label:focus,
-.label:active {
-  color: var(--color-primary);
-}
-
-.label:hover {
-  text-decoration: underline;
-}
-
-.card {
-  padding: var(--space-small);
-  border-radius: var(--radius-small);
-  width: 320px;
-  outline: none;
-  filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
-  background: var(--color-light);
-  font-size: var(--size-small);
-  line-height: 1.6;
-}
-
-.arrow {
-  fill: var(--color-light);
-}

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

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require(".");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var _default = {
-  name: 'UI/HoverCard',
-  component: _.HoverCard
-};
-exports["default"] = _default;
-
-var Default = function Default() {
-  return /*#__PURE__*/_react["default"].createElement(_.HoverCard, {
-    label: "Open popover"
-  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua");
-};
-
-exports.Default = Default;

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import * as BaseHoverCard from '@radix-ui/react-hover-card';
-import css from './hover-card.module.css';
-const OFFSET = 8;
-const DELAY = 300;
-const propTypes = {
-  className: PropTypes.string,
-  label: PropTypes.element.isRequired,
-  side: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  children: PropTypes.element.isRequired
-};
-const defaultProps = {
-  className: '',
-  side: 'top'
-};
-/**
- * @param {PropTypes.InferProps<typeof propTypes>} props
- * @return {React.FunctionComponentElement}
- */
-
-export const HoverCard = props => {
-  const {
-    className,
-    label,
-    side,
-    children
-  } = props;
-  return /*#__PURE__*/React.createElement(BaseHoverCard.Root, {
-    openDelay: DELAY,
-    closeDelay: DELAY
-  }, /*#__PURE__*/React.createElement(BaseHoverCard.Trigger, {
-    className: cx(css.label, className)
-  }, label), /*#__PURE__*/React.createElement(BaseHoverCard.Content, {
-    className: css.card,
-    sideOffset: OFFSET,
-    side: side
-  }, /*#__PURE__*/React.createElement(BaseHoverCard.Arrow, {
-    className: css.arrow,
-    offset: OFFSET
-  }), children));
-};
-HoverCard.propTypes = propTypes;
-HoverCard.defaultProps = defaultProps;

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

@@ -1,29 +0,0 @@
-.label {
-  color: inherit;
-  cursor: pointer;
-}
-
-.label:hover,
-.label:focus,
-.label:active {
-  color: var(--color-primary);
-}
-
-.label:hover {
-  text-decoration: underline;
-}
-
-.card {
-  padding: var(--space-small);
-  border-radius: var(--radius-small);
-  width: 320px;
-  outline: none;
-  filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));
-  background: var(--color-light);
-  font-size: var(--size-small);
-  line-height: 1.6;
-}
-
-.arrow {
-  fill: var(--color-light);
-}

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

@@ -1,9 +0,0 @@
-import React from 'react';
-import { HoverCard } from '.';
-export default {
-  name: 'UI/HoverCard',
-  component: HoverCard
-};
-export const Default = () => /*#__PURE__*/React.createElement(HoverCard, {
-  label: "Open popover"
-}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua");

package/lib-esm/ui/hover-card/index.js

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

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

@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import * as BaseHoverCard from '@radix-ui/react-hover-card';
-
-import css from './hover-card.module.css';
-
-const OFFSET = 8;
-const DELAY = 300;
-
-const propTypes = {
-  className: PropTypes.string,
-  label: PropTypes.element.isRequired,
-  side: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  children: PropTypes.element.isRequired,
-};
-
-const defaultProps = {
-  className: '',
-  side: 'top',
-};
-
-/**
- * @param {PropTypes.InferProps<typeof propTypes>} props
- * @return {React.FunctionComponentElement}
- */
-export const HoverCard = (props) => {
-  const { className, label, side, children } = props;
-
-  return (
-    <BaseHoverCard.Root openDelay={DELAY} closeDelay={DELAY}>
-      <BaseHoverCard.Trigger className={cx(css.label, className)}>{label}</BaseHoverCard.Trigger>
-      <BaseHoverCard.Content className={css.card} sideOffset={OFFSET} side={side}>
-        <BaseHoverCard.Arrow className={css.arrow} offset={OFFSET} />
-        {children}
-      </BaseHoverCard.Content>
-    </BaseHoverCard.Root>
-  );
-};
-
-HoverCard.propTypes = propTypes;
-HoverCard.defaultProps = defaultProps;