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

package/lib-esm/components/bundle-packages/bundle-packages.module.css

@@ -12,8 +12,20 @@
   margin-right: -1px; /** collapse border */
 }
 
-.packageNames {
-  align-items: center;
+.duplicate {
+  margin-right: var(--space-xxxsmall);
+  display: inline-block;
+  width: var(--space-small);
+  height: var(--space-small);
+  font-size: 10px;
+  font-weight: bold;
+  line-height: var(--space-small);
+  text-align: center;
+  text-transform: uppercase;
+  vertical-align: middle;
+
+  background: var(--color-danger);
+  color: var(--color-light);
 }
 
 .packageName {
@@ -26,56 +38,27 @@
 
 .packageName + .packageName::before {
   display: inline-block;
-  margin: 0 var(--space-xxxsmall) 0 0;
+  margin: 0 var(--space-xxxsmall);
   content: '/';
   color: var(--color-text-ultra-light);
 }
 
-.packageNameLabel {
-  display: inline-flex;
-  align-items: center;
-}
-
-.packageNameDuplicate {
-  margin-right: var(--space-xxxsmall);
-  display: inline-block;
-  width: var(--space-xsmall);
-  height: var(--space-xsmall);
-  font-size: 8px;
-  font-weight: bold;
-  line-height: var(--space-xsmall);
-  text-align: center;
-  text-transform: uppercase;
-  vertical-align: middle;
-
-  background: var(--color-danger);
-  color: var(--color-light);
-}
-
-.packageName:hover,
-.packageName:active,
-.packageName:focus {
-  text-decoration: none !important;
-}
-
-.packageName:hover .packageNameText,
-.packageName:active .packageNameText,
-.packageName:focus .packageNameText {
-  text-decoration: underline !important;
+.packagePopover {
+  min-width: 320px;
 }
 
-.packageCardTitleIndex {
+.packagePopoverTitleIndex {
   color: var(--color-text-light);
   font-weight: normal;
 }
 
-.packageCardPathValue {
+.packagePopoverPathValue {
   padding: var(--space-xxxsmall);
   background: var(--color-highlight-warning);
   font-family: var(--font-family-monospace);
 }
 
-.packageCardList {
+.packagePopoverList {
   padding: 0;
   list-style: inside;
 }

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

@@ -4,8 +4,7 @@ import cx from 'classnames';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
-import { Icon } from '../../ui/icon';
-import { HoverCard } from '../../ui/hover-card';
+import { Popover } from '../../ui/popover';
 import css from './metrics-table-title.module.css';
 export const MetricsTableTitle = props => {
   const {
@@ -23,10 +22,8 @@ export const MetricsTableTitle = props => {
     space: "xxxsmall"
   }, /*#__PURE__*/React.createElement("span", null, title), info && /*#__PURE__*/React.createElement("span", {
     className: css.info
-  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/React.createElement(HoverCard, {
-    label: /*#__PURE__*/React.createElement(Icon, {
-      glyph: "help"
-    })
+  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/React.createElement(Popover, {
+    icon: "help"
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
   }, popoverInfo && /*#__PURE__*/React.createElement("p", null, popoverInfo), popoverHref && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {

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

@@ -4,8 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
-import { Icon } from '../../ui/icon';
-import { HoverCard } from '../../ui/hover-card';
+import { Popover } from '../../ui/popover';
 import { Skeleton } from '../../ui/skeleton';
 import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
@@ -13,25 +12,31 @@ import { Metric } from '../metric';
 import { Delta } from '../delta';
 import css from './summary-item.module.css';
 
-const MetricDescriptionCard = _ref => {
+const MetricInfoPopover = _ref => {
   let {
     description,
     url
   } = _ref;
+
+  // Workaround cases where the parent is a link
+  const readMoreOnClick = () => {
+    window.open(url);
+  };
+
   return /*#__PURE__*/React.createElement(Stack, {
-    space: "xxsmall"
-  }, /*#__PURE__*/React.createElement("p", null, description), url && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {
-    href: url,
-    target: "_blank",
-    rel: "noopener noreferrer"
+    space: "xxxsmall"
+  }, /*#__PURE__*/React.createElement("p", null, description), url && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: css.readMoreBtn,
+    onClick: readMoreOnClick
   }, "Read more")));
 };
 
-MetricDescriptionCard.propTypes = {
+MetricInfoPopover.propTypes = {
   description: PropTypes.string.isRequired,
   url: PropTypes.string
 };
-MetricDescriptionCard.defaultProps = {
+MetricInfoPopover.defaultProps = {
   url: ''
 };
 export const SummaryItem = _ref2 => {
@@ -65,12 +70,10 @@ export const SummaryItem = _ref2 => {
     as: "h3",
     space: "xxxsmall",
     className: css.title
-  }, /*#__PURE__*/React.createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(HoverCard, {
+  }, /*#__PURE__*/React.createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(Popover, {
     className: css.icon,
-    label: /*#__PURE__*/React.createElement(Icon, {
-      glyph: "help"
-    })
-  }, /*#__PURE__*/React.createElement(MetricDescriptionCard, metric))), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
+    icon: "help"
+  }, /*#__PURE__*/React.createElement(MetricInfoPopover, metric))), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
     className: css.currentMetric,
     value: current,
     formatter: metric.formatter,

package/lib-esm/components/total-size-type-title/total-size-type-title.js

@@ -5,8 +5,7 @@ import config from '../../config.json';
 import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
-import { Icon } from '../../ui/icon';
-import { HoverCard } from '../../ui/hover-card';
+import { Popover } from '../../ui/popover';
 import css from './total-size-type-title.module.css';
 export const TotalSizeTypeTitle = _ref => {
   let {
@@ -15,10 +14,8 @@ export const TotalSizeTypeTitle = _ref => {
   return /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall",
     className: cx(css.title, className)
-  }, /*#__PURE__*/React.createElement("span", null, I18N.ASSET_TOTALS), /*#__PURE__*/React.createElement(HoverCard, {
-    label: /*#__PURE__*/React.createElement(Icon, {
-      glyph: "help"
-    })
+  }, /*#__PURE__*/React.createElement("span", null, I18N.ASSET_TOTALS), /*#__PURE__*/React.createElement(Popover, {
+    icon: "help"
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/React.createElement("p", null, I18N.ASSET_TOTALS_INFO), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("a", {

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

@@ -1,7 +1,9 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import * as BaseDropdownMenu from '@radix-ui/react-dropdown-menu';
+import { Menu, MenuItem, MenuButton, useMenuState } from 'reakit/Menu';
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../icon';
 import css from './dropdown.module.css';
@@ -15,20 +17,25 @@ export const Dropdown = props => {
     children
   } = props;
   const rootClassName = cx(css.root, activeLabel && css.activeLabel, className);
-  return /*#__PURE__*/React.createElement(BaseDropdownMenu.Root, null, /*#__PURE__*/React.createElement(BaseDropdownMenu.Trigger, {
-    className: rootClassName
-  }, /*#__PURE__*/React.createElement(FlexStack, {
+  const menu = useMenuState({
+    baseId: process.env.NODE_ENV === 'test' && 'id-test',
+    modal: true
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuButton, _extends({}, menu, {
+    className: rootClassName,
+    tabIndex: null
+  }), /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall",
     className: css.label
   }, glyph && /*#__PURE__*/React.createElement(Icon, {
     className: css.labelIcon,
     glyph: glyph
-  }), label)), /*#__PURE__*/React.createElement(BaseDropdownMenu.Content, {
-    className: css.dropdown,
+  }), label)), /*#__PURE__*/React.createElement(Menu, _extends({}, menu, {
     "aria-label": ariaLabel || label,
-    align: "start"
-  }, typeof children === 'function' ? children({
-    MenuItem: BaseDropdownMenu.Item,
+    className: css.dropdown
+  }), typeof children === 'function' ? children({
+    MenuItem,
+    menu,
     menuItemClassName: css.menuItem,
     menuItemActiveClassName: css.menuItemActive
   }) : children));
@@ -53,6 +60,9 @@ Dropdown.propTypes = {
   /** Icon glyph */
   glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
+  /** Dropdown open state */
+  open: PropTypes.bool.isRequired,
+
   /** Active label flag */
   activeLabel: PropTypes.bool,
 

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

@@ -103,6 +103,7 @@ const FilterGroup = props => {
   }, _ref4 => {
     let {
       MenuItem,
+      menu,
       menuItemClassName
     } = _ref4;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -115,10 +116,11 @@ const FilterGroup = props => {
         [id]: true
       });
 
-      return /*#__PURE__*/React.createElement(MenuItem, {
-        key: id,
+      return /*#__PURE__*/React.createElement(MenuItem, _extends({
+        key: id
+      }, menu, {
         className: cx(menuItemClassName, css.filterGroupItem)
-      }, /*#__PURE__*/React.createElement(Filter, {
+      }), /*#__PURE__*/React.createElement(Filter, {
         name: id,
         label: itemData.label,
         onChange: onCheckboxChange,

package/lib-esm/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/lib-esm/ui/popover/index.js

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

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

@@ -0,0 +1,71 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { 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 = _ref => {
+  let {
+    className,
+    icon,
+    label,
+    ariaLabel,
+    children
+  } = _ref;
+  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 /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UIPopoverDisclosure, _extends({
+    className: cx(css.button, className)
+  }, popover, {
+    onClick: onButtonClick,
+    "aria-label": ariaLabel
+  }), icon && (typeof icon === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+    className: css.icon,
+    glyph: icon
+  }) : icon), label && /*#__PURE__*/React.createElement("span", {
+    className: css.label
+  }, label)), /*#__PURE__*/React.createElement(UIPopover, _extends({
+    className: css.popover
+  }, popover, {
+    tabIndex: 0
+  }), /*#__PURE__*/React.createElement(UIPopoverArrow, _extends({
+    className: css.arrow
+  }, popover, {
+    size: 16
+  })), typeof children === 'function' ? children({
+    popoverToggle: popover.toggle
+  }) : children, /*#__PURE__*/React.createElement(Icon, {
+    glyph: "close",
+    as: "button",
+    type: "button",
+    className: css.closeBtn,
+    onClick: onCloseButtonClick
+  })));
+};
+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/lib-esm/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/lib-esm/ui/popover/popover.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { getWrapperDecorator } from '../../stories';
+import { Popover } from '.';
+const stories = storiesOf('UI/Popover', module);
+stories.addDecorator(getWrapperDecorator({
+  padding: '64px'
+}));
+stories.add('default', () => /*#__PURE__*/React.createElement(Popover, {
+  label: "Job #100"
+}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."));
+stories.add('with icon', () => /*#__PURE__*/React.createElement(Popover, {
+  icon: "help"
+}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."));

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

@@ -20,10 +20,12 @@ export const SortDropdown = props => {
   return /*#__PURE__*/React.createElement(Dropdown, {
     className: rootClassName,
     label: customLabel,
-    glyph: "sort"
+    glyph: "sort",
+    align: "right"
   }, _ref => {
     let {
       MenuItem,
+      menu,
       menuItemClassName,
       menuItemActiveClassName
     } = _ref;
@@ -33,6 +35,7 @@ export const SortDropdown = props => {
         field: newField,
         direction: newDirection
       });
+      menu.toggle();
     };
 
     return /*#__PURE__*/React.createElement("div", {
@@ -50,7 +53,7 @@ export const SortDropdown = props => {
       const isActive = field === key;
       return /*#__PURE__*/React.createElement(MenuItem, _extends({
         key: key
-      }, buttonProps, {
+      }, menu, buttonProps, {
         className: cx(buttonProps.className, menuItemClassName, css.item, isActive && menuItemActiveClassName, isActive && css.active)
       }), /*#__PURE__*/React.createElement("span", {
         className: css.itemLabel

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

@@ -3,10 +3,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 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,
@@ -18,20 +16,21 @@ export const Tooltip = props => {
     ...restProps
   } = props;
   const rootClassName = cx(css.root, className);
-  const tooltipClassName = cx(css.tooltip, darkMode && css.tooltipDarkMode);
-  return /*#__PURE__*/React.createElement(BaseTooltip.Provider, null, /*#__PURE__*/React.createElement(BaseTooltip.Root, {
-    delayDuration: DELAY
-  }, /*#__PURE__*/React.createElement(BaseTooltip.Trigger, {
-    asChild: true
-  }, /*#__PURE__*/React.createElement(Component, _extends({
+  const tooltipProps = useTooltipState({
+    baseId: process.env.NODE_ENV === 'test' && 'id-test',
+    placement: 'top'
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UITooltipReference, _extends({
+    as: Component,
     className: rootClassName
-  }, restProps), children)), title && /*#__PURE__*/React.createElement(BaseTooltip.Content, {
-    className: tooltipClassName
-  }, /*#__PURE__*/React.createElement(BaseTooltip.Arrow, {
+  }, ref ? {
+    ref
+  } : {}, restProps, tooltipProps), children), title && /*#__PURE__*/React.createElement(UITooltip, _extends({}, tooltipProps, {
+    className: cx(css.tooltip, darkMode && css.tooltipDarkMode)
+  }), /*#__PURE__*/React.createElement(UITooltipArrow, _extends({}, tooltipProps, {
     className: css.arrow,
-    startOffset: OFFSET,
-    offset: OFFSET
-  }), title)));
+    size: 12
+  })), title));
 };
 Tooltip.defaultProps = {
   className: '',

package/lib-esm/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.2.4-alpha.0",
+  "version": "3.2.4",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -76,7 +76,7 @@
   },
   "peerDependencies": {
     "classnames": "2.2.6",
-    "core-js": "3.16.2",
+    "core-js": "3.20.2",
     "lodash": "4.17.21",
     "prop-types": "15.7.2",
     "react": "16.14.0",
@@ -84,14 +84,11 @@
     "react-router-dom": "5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.2.4-alpha.0",
-    "@radix-ui/react-dropdown-menu": "0.1.3",
-    "@radix-ui/react-hover-card": "0.1.3",
-    "@radix-ui/react-tooltip": "0.1.3",
+    "@bundle-stats/utils": "^3.2.4",
     "date-fns": "2.28.0",
     "query-string": "7.1.0",
     "reakit": "1.3.11",
     "use-query-params": "1.2.3"
   },
-  "gitHead": "4387528449c1ea441c018705c2d08437b2352797"
+  "gitHead": "1c72cc1819a7fbee11ff8ad48218f943f69cb704"
 }