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

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

@@ -12,20 +12,8 @@
   margin-right: -1px; /** collapse border */
 }
 
-.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);
+.packageNames {
+  align-items: center;
 }
 
 .packageName {
@@ -38,27 +26,56 @@
 
 .packageName + .packageName::before {
   display: inline-block;
-  margin: 0 var(--space-xxxsmall);
+  margin: 0 var(--space-xxxsmall) 0 0;
   content: '/';
   color: var(--color-text-ultra-light);
 }
 
-.packagePopover {
-  min-width: 320px;
+.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;
 }
 
-.packagePopoverTitleIndex {
+.packageCardTitleIndex {
   color: var(--color-text-light);
   font-weight: normal;
 }
 
-.packagePopoverPathValue {
+.packageCardPathValue {
   padding: var(--space-xxxsmall);
   background: var(--color-highlight-warning);
   font-family: var(--font-family-monospace);
 }
 
-.packagePopoverList {
+.packageCardList {
   padding: 0;
   list-style: inside;
 }

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

@@ -4,7 +4,8 @@ import cx from 'classnames';
 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 './metrics-table-title.module.css';
 export const MetricsTableTitle = props => {
   const {
@@ -22,8 +23,10 @@ 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(Popover, {
-    icon: "help"
+  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/React.createElement(HoverCard, {
+    label: /*#__PURE__*/React.createElement(Icon, {
+      glyph: "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,7 +4,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
-import { Popover } from '../../ui/popover';
+import { Icon } from '../../ui/icon';
+import { HoverCard } from '../../ui/hover-card';
 import { Skeleton } from '../../ui/skeleton';
 import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
@@ -12,31 +13,25 @@ import { Metric } from '../metric';
 import { Delta } from '../delta';
 import css from './summary-item.module.css';
 
-const MetricInfoPopover = _ref => {
+const MetricDescriptionCard = _ref => {
   let {
     description,
     url
   } = _ref;
-
-  // Workaround cases where the parent is a link
-  const readMoreOnClick = () => {
-    window.open(url);
-  };
-
   return /*#__PURE__*/React.createElement(Stack, {
-    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
+    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"
   }, "Read more")));
 };
 
-MetricInfoPopover.propTypes = {
+MetricDescriptionCard.propTypes = {
   description: PropTypes.string.isRequired,
   url: PropTypes.string
 };
-MetricInfoPopover.defaultProps = {
+MetricDescriptionCard.defaultProps = {
   url: ''
 };
 export const SummaryItem = _ref2 => {
@@ -70,10 +65,12 @@ export const SummaryItem = _ref2 => {
     as: "h3",
     space: "xxxsmall",
     className: css.title
-  }, /*#__PURE__*/React.createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(Popover, {
+  }, /*#__PURE__*/React.createElement("span", null, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/React.createElement(HoverCard, {
     className: css.icon,
-    icon: "help"
-  }, /*#__PURE__*/React.createElement(MetricInfoPopover, metric))), !loading ? /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Metric, {
+    label: /*#__PURE__*/React.createElement(Icon, {
+      glyph: "help"
+    })
+  }, /*#__PURE__*/React.createElement(MetricDescriptionCard, 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,7 +5,8 @@ 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 = _ref => {
   let {
@@ -14,8 +15,10 @@ 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(Popover, {
-    icon: "help"
+  }, /*#__PURE__*/React.createElement("span", null, I18N.ASSET_TOTALS), /*#__PURE__*/React.createElement(HoverCard, {
+    label: /*#__PURE__*/React.createElement(Icon, {
+      glyph: "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,9 +1,7 @@
-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 { Menu, MenuItem, MenuButton, useMenuState } from 'reakit/Menu';
+import * as BaseDropdownMenu from '@radix-ui/react-dropdown-menu';
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../icon';
 import css from './dropdown.module.css';
@@ -17,25 +15,20 @@ export const Dropdown = props => {
     children
   } = props;
   const rootClassName = cx(css.root, activeLabel && css.activeLabel, className);
-  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, {
+  return /*#__PURE__*/React.createElement(BaseDropdownMenu.Root, null, /*#__PURE__*/React.createElement(BaseDropdownMenu.Trigger, {
+    className: rootClassName
+  }, /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall",
     className: css.label
   }, glyph && /*#__PURE__*/React.createElement(Icon, {
     className: css.labelIcon,
     glyph: glyph
-  }), label)), /*#__PURE__*/React.createElement(Menu, _extends({}, menu, {
+  }), label)), /*#__PURE__*/React.createElement(BaseDropdownMenu.Content, {
+    className: css.dropdown,
     "aria-label": ariaLabel || label,
-    className: css.dropdown
-  }), typeof children === 'function' ? children({
-    MenuItem,
-    menu,
+    align: "start"
+  }, typeof children === 'function' ? children({
+    MenuItem: BaseDropdownMenu.Item,
     menuItemClassName: css.menuItem,
     menuItemActiveClassName: css.menuItemActive
   }) : children));
@@ -60,9 +53,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,
 

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

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

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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,29 @@
+.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

@@ -0,0 +1,9 @@
+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

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

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

@@ -1,5 +1,6 @@
 .root {
   display: inline-block;
+  vertical-align: middle; /** center align when parent display is inline/inline-block **/
 }
 
 .icon {

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/sort-dropdown/sort-dropdown.js

@@ -20,12 +20,10 @@ export const SortDropdown = props => {
   return /*#__PURE__*/React.createElement(Dropdown, {
     className: rootClassName,
     label: customLabel,
-    glyph: "sort",
-    align: "right"
+    glyph: "sort"
   }, _ref => {
     let {
       MenuItem,
-      menu,
       menuItemClassName,
       menuItemActiveClassName
     } = _ref;
@@ -35,7 +33,6 @@ export const SortDropdown = props => {
         field: newField,
         direction: newDirection
       });
-      menu.toggle();
     };
 
     return /*#__PURE__*/React.createElement("div", {
@@ -53,7 +50,7 @@ export const SortDropdown = props => {
       const isActive = field === key;
       return /*#__PURE__*/React.createElement(MenuItem, _extends({
         key: key
-      }, menu, buttonProps, {
+      }, 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,8 +3,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Tooltip as UITooltip, TooltipArrow as UITooltipArrow, TooltipReference as UITooltipReference, useTooltipState } from 'reakit/Tooltip';
+import * as BaseTooltip from '@radix-ui/react-tooltip';
 import css from './tooltip.module.css';
+const OFFSET = 9;
+const DELAY = 200;
 export const Tooltip = props => {
   const {
     className,
@@ -16,21 +18,20 @@ 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'
-  });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UITooltipReference, _extends({
-    as: Component,
+  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({
     className: rootClassName
-  }, 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, {
+  }, restProps), children)), title && /*#__PURE__*/React.createElement(BaseTooltip.Content, {
+    className: tooltipClassName
+  }, /*#__PURE__*/React.createElement(BaseTooltip.Arrow, {
     className: css.arrow,
-    size: 12
-  })), title));
+    startOffset: OFFSET,
+    offset: OFFSET
+  }), title)));
 };
 Tooltip.defaultProps = {
   className: '',

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.2.3",
+  "version": "3.2.4-alpha.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -36,38 +36,38 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/cli": "7.16.0",
-    "@babel/core": "7.16.5",
-    "@babel/plugin-proposal-class-properties": "7.16.5",
-    "@babel/preset-env": "7.16.5",
-    "@babel/preset-react": "7.16.5",
+    "@babel/cli": "7.16.8",
+    "@babel/core": "7.16.7",
+    "@babel/plugin-proposal-class-properties": "7.16.7",
+    "@babel/preset-env": "7.16.8",
+    "@babel/preset-react": "7.16.7",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storyshots": "6.4.9",
-    "@storybook/addons": "6.4.9",
-    "@storybook/builder-webpack5": "6.4.9",
-    "@storybook/manager-webpack5": "6.4.9",
-    "@storybook/react": "6.4.9",
+    "@storybook/addon-storyshots": "6.4.12",
+    "@storybook/addons": "6.4.12",
+    "@storybook/builder-webpack5": "6.4.12",
+    "@storybook/manager-webpack5": "6.4.12",
+    "@storybook/react": "6.4.12",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "27.4.5",
+    "babel-jest": "27.4.6",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.2.3",
+    "chromatic": "6.3.4",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
-    "core-js": "3.20.0",
+    "core-js": "3.20.2",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
     "hex-rgb": "5.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "27.4.5",
+    "jest": "27.4.7",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
     "postcss": "8.4.5",
-    "prop-types": "15.7.2",
+    "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-router-dom": "5.3.0",
@@ -84,11 +84,14 @@
     "react-router-dom": "5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.2.3",
-    "date-fns": "2.6.0",
-    "query-string": "7.0.0",
-    "reakit": "1.3.6",
-    "use-query-params": "1.2.2"
+    "@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",
+    "date-fns": "2.28.0",
+    "query-string": "7.1.0",
+    "reakit": "1.3.11",
+    "use-query-params": "1.2.3"
   },
-  "gitHead": "cc3f39324ba9def9fe0814c45983234c7beb941e"
+  "gitHead": "4387528449c1ea441c018705c2d08437b2352797"
 }