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

package/lib-esm/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/lib-esm/ui/dropdown/dropdown.stories.js

@@ -8,20 +8,15 @@ stories.add('default', () => /*#__PURE__*/React.createElement(Dropdown, {
   glyph: "filter",
   label: "Toggle"
 }, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Option 1"), /*#__PURE__*/React.createElement("li", null, "Option 2"))));
-stories.add('with right alignement', () => /*#__PURE__*/React.createElement(Dropdown, {
-  glyph: "filter",
-  label: "Toggle",
-  align: "right"
-}, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Option 1"), /*#__PURE__*/React.createElement("li", null, "Option 2"))));
 stories.add('with render function', () => /*#__PURE__*/React.createElement(Dropdown, {
   glyph: "filter",
   label: "Toggle"
 }, _ref => {
   let {
-    dropdownToggle
+    menu
   } = _ref;
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
-    onClick: dropdownToggle
+    onClick: menu.toggle
   }, "Toggle dropdown");
 }));

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

@@ -0,0 +1,86 @@
+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 { 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 /*#__PURE__*/React.createElement("div", {
+    className: cx(css.root, className)
+  }, /*#__PURE__*/React.createElement(HovercardAnchor, {
+    state: state,
+    href: href,
+    className: css.anchor,
+    as: Component
+  }, label), /*#__PURE__*/React.createElement(Hovercard, _extends({}, hoverCardProps, {
+    state: state,
+    className: css.hoverCard,
+    style: {
+      zIndex: 10000
+    }
+  }), /*#__PURE__*/React.createElement(HovercardArrow, {
+    size: 24
+  }), typeof children === 'function' ? children({
+    close: state.hide
+  }) : children, /*#__PURE__*/React.createElement(Icon, {
+    glyph: "close",
+    size: "small",
+    as: "button",
+    type: "button",
+    className: css.closeBtn,
+    onClick: state.hide
+  })));
+};
+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/lib-esm/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/lib-esm/ui/hover-card/hover-card.stories.js

@@ -0,0 +1,35 @@
+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 { HoverCard } from '.';
+export default {
+  title: 'UI/HoverCard',
+  component: HoverCard
+};
+
+const Template = props => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HoverCard, _extends({}, props, {
+  style: {
+    zIndex: 2
+  }
+})), /*#__PURE__*/React.createElement("p", {
+  style: {
+    position: 'relative',
+    zIndex: 1,
+    maxWidth: 360
+  }
+}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in neque ante. Curabitur vehicula, lorem sit amet fringilla dapibus, justo mauris varius elit, ut fermentum leo velit eget risus"));
+
+export const Default = () => /*#__PURE__*/React.createElement(Template, {
+  label: "main.js"
+}, /*#__PURE__*/React.createElement("h1", null, "main.js"), /*#__PURE__*/React.createElement("p", null, "info"));
+export const WithRenderFn = () => /*#__PURE__*/React.createElement(Template, {
+  label: "main.js"
+}, _ref => {
+  let {
+    close
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "main.js"), /*#__PURE__*/React.createElement("p", null, "info"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: close
+  }, "close"));
+});

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

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

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

@@ -17,14 +17,14 @@ const ICONS = {
   SORT: 'sort',
   WARNING: 'warning'
 };
-export const Icon = _ref => {
-  let {
+export const Icon = props => {
+  const {
     className,
     glyph,
     as: Component,
     size,
     ...restProps
-  } = _ref;
+  } = props;
   return /*#__PURE__*/React.createElement(Component, _extends({
     className: cx(css.root, className, css[size])
   }, restProps), /*#__PURE__*/React.createElement("svg", {

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

@@ -3,7 +3,7 @@ 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 { Tooltip as UITooltip, TooltipAnchor as UITooltipAnchor, TooltipArrow as UITooltipArrow, useTooltipState } from 'ariakit/tooltip';
 import css from './tooltip.module.css';
 export const Tooltip = props => {
   const {
@@ -15,22 +15,23 @@ export const Tooltip = props => {
     darkMode,
     ...restProps
   } = props;
-  const rootClassName = cx(css.root, className);
-  const tooltipProps = useTooltipState({
-    baseId: process.env.NODE_ENV === 'test' && 'id-test',
+  const tooltip = useTooltipState({
     placement: 'top'
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UITooltipReference, _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UITooltipAnchor, _extends({
     as: Component,
-    className: rootClassName
+    className: cx(css.root, className),
+    state: tooltip
   }, ref ? {
     ref
-  } : {}, restProps, tooltipProps), children), title && /*#__PURE__*/React.createElement(UITooltip, _extends({}, tooltipProps, {
+  } : {}, restProps), children), title && /*#__PURE__*/React.createElement(UITooltip, {
+    state: tooltip,
     className: cx(css.tooltip, darkMode && css.tooltipDarkMode)
-  }), /*#__PURE__*/React.createElement(UITooltipArrow, _extends({}, tooltipProps, {
+  }, /*#__PURE__*/React.createElement(UITooltipArrow, {
+    state: tooltip,
     className: css.arrow,
     size: 12
-  })), title));
+  }), title));
 };
 Tooltip.defaultProps = {
   className: '',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.2.6-beta.1",
+  "version": "3.2.6-beta.2",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -15,7 +15,7 @@
     "generate-svg-sprite": "npx svg-sprite -s --si --no-svg-namespace-classnames src/assets/icons/*.svg && mv symbol/svg/sprite.symbol.svg src/assets/icons.svg",
     "lint": "../../node_modules/.bin/eslint . --ext .jsx,.js",
     "start": "cross-env NODE_ENV=development start-storybook -c ./build/storybook -p 8080",
-    "test": "npm run test:unit && npm run test:storyshots",
+    "test": "npm run test:unit",
     "test:unit": "jest src --passWithNoTests",
     "test:storyshots": "jest build/storybook ",
     "chromatic": "chromatic --exit-zero-on-changes"
@@ -85,12 +85,12 @@
     "react-router-dom": "5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.2.6-beta.1",
+    "@bundle-stats/utils": "^3.2.6-beta.2",
+    "ariakit": "2.0.0-alpha.18",
     "date-fns": "2.28.0",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.1",
-    "reakit": "1.3.11",
     "use-query-params": "1.2.3"
   },
-  "gitHead": "7131e3602cc523fb84d8dc712f88fb5b47773f70"
+  "gitHead": "5031b68ff5f696929c1466dc177c4e7b949829fd"
 }

package/src/components/bundle-assets/bundle-assets.jsx

@@ -14,7 +14,7 @@ import I18N from '../../i18n';
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../../ui/icon';
 import { FileName } from '../../ui/file-name';
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
 import { Tooltip } from '../../ui/tooltip';
 import { Tag } from '../../ui/tag';
 import { Filters } from '../../ui/filters';
@@ -83,40 +83,42 @@ const getRenderRowHeader =
     const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = item;
 
     return (
-      <Popover
-        label={<FileName name={label} />}
-        icon={
-          <div className={css.assetInfoFlags}>
-            {isNotPredictive && (
-              <Tooltip className={css.notPredictive} title={<TooltipNotPredictive runs={runs} />}>
-                <Icon className={css.notPredictiveIcon} glyph="warning" />
-              </Tooltip>
-            )}
-            {isChunk && (
-              <Tag
-                title="Chunk"
-                size={Tag.SIZES.SMALL}
-                kind={Tag.KINDS.INFO}
-                className={cx(css.tag, css.tagChunk)}
-              />
-            )}
-            {isEntry && (
-              <Tag
-                title="Entrypoint"
-                size={Tag.SIZES.SMALL}
-                kind={Tag.KINDS.INFO}
-                className={cx(css.tag, css.tagEntry)}
-              />
-            )}
-            {isInitial && (
-              <Tag
-                title="Initial"
-                size={Tag.SIZES.SMALL}
-                kind={Tag.KINDS.INFO}
-                className={cx(css.tag, css.tagInitial)}
-              />
-            )}
-          </div>
+      <HoverCard
+        label={
+          <FlexStack space="xxxsmall" className={css.assetName}>
+            <div className={css.assetInfoFlags}>
+              {isNotPredictive && (
+                <Tooltip className={css.notPredictive} title={<TooltipNotPredictive runs={runs} />}>
+                  <Icon className={css.notPredictiveIcon} glyph="warning" />
+                </Tooltip>
+              )}
+              {isChunk && (
+                <Tag
+                  title="Chunk"
+                  size={Tag.SIZES.SMALL}
+                  kind={Tag.KINDS.INFO}
+                  className={cx(css.tag, css.tagChunk)}
+                />
+              )}
+              {isEntry && (
+                <Tag
+                  title="Entrypoint"
+                  size={Tag.SIZES.SMALL}
+                  kind={Tag.KINDS.INFO}
+                  className={cx(css.tag, css.tagEntry)}
+                />
+              )}
+              {isInitial && (
+                <Tag
+                  title="Initial"
+                  size={Tag.SIZES.SMALL}
+                  kind={Tag.KINDS.INFO}
+                  className={cx(css.tag, css.tagInitial)}
+                />
+              )}
+            </div>
+            <FileName name={label} />
+          </FlexStack>
         }
       >
         <AssetInfo
@@ -126,7 +128,7 @@ const getRenderRowHeader =
           chunks={chunks}
           CustomComponentLink={CustomComponentLink}
         />
-      </Popover>
+      </HoverCard>
     );
   };
 

package/src/components/bundle-assets/bundle-assets.module.css

@@ -8,6 +8,11 @@
   margin-right: -1px; /** collapse border */
 }
 
+.assetName {
+  display: inline-flex;
+  align-items: center;
+}
+
 .notPredictive {
   margin-right: var(--space-xxsmall);
   display: inline-block;

package/src/components/bundle-modules/bundle-modules.jsx

@@ -18,7 +18,7 @@ import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
 import { SortDropdown } from '../../ui/sort-dropdown';
 import { Toolbar } from '../../ui/toolbar';
 import { MetricsTable } from '../metrics-table';
@@ -37,11 +37,11 @@ const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
 
   return (
     <div onMouseEnter={handleOnMouseEnter}>
-      {!showPopopver ?
+      {!showPopopver ? (
         content
-        : (
-        <Popover ariaLabel="View module info" label={content}>
-          {({ popoverToggle }) => (
+      ) : (
+        <HoverCard label={content}>
+          {({ close }) => (
             <ModuleInfo
               className={css.namePopover}
               item={row}
@@ -49,10 +49,10 @@ const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
               chunkIds={chunkIds}
               labels={labels}
               customComponentLink={CustomComponentLink}
-              onClick={popoverToggle}
+              onClick={close}
             />
           )}
-        </Popover>
+        </HoverCard>
       )}
     </div>
   );
@@ -76,9 +76,17 @@ RowHeader.defaultProps = {
   chunks: [],
 };
 
-const getRenderRowHeader = ({ labels, chunks, CustomComponentLink }) => (row) => (
-  <RowHeader row={row} chunks={chunks} labels={labels} CustomComponentLink={CustomComponentLink} />
-);
+const getRenderRowHeader =
+  ({ labels, chunks, CustomComponentLink }) =>
+  (row) =>
+    (
+      <RowHeader
+        row={row}
+        chunks={chunks}
+        labels={labels}
+        CustomComponentLink={CustomComponentLink}
+      />
+    );
 
 export const BundleModules = ({
   className,
@@ -240,10 +248,12 @@ BundleModules.propTypes = {
   jobs: PropTypes.array, // eslint-disable-line react/forbid-prop-types
 
   /** Chunks data */
-  chunks: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string,
-  })).isRequired,
+  chunks: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      name: PropTypes.string,
+    }),
+  ).isRequired,
 
   /** total row count */
   totalRowCount: PropTypes.number,

package/src/components/bundle-packages/bundle-packages.jsx

@@ -15,7 +15,7 @@ import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { Filters } from '../../ui/filters';
-import { Popover } from '../../ui/popover';
+import { HoverCard } from '../../ui/hover-card';
 import { SortDropdown } from '../../ui/sort-dropdown';
 import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
@@ -116,7 +116,15 @@ const PackageRowHeader = ({ item, CustomComponentLink }) => {
         );
 
         return (
-          <Popover className={css.packageName} icon={duplicateFlag} label={packageName}>
+          <HoverCard
+            className={css.packageName}
+            label={
+              <FlexStack space="xxxsmall" className={css.packageNameLabel}>
+                {duplicateFlag}
+                <span>{packageName}</span>
+              </FlexStack>
+            }
+          >
             <PackagePopoverContent
               name={packageName}
               path={path}
@@ -124,7 +132,7 @@ const PackageRowHeader = ({ item, CustomComponentLink }) => {
               duplicate={item.duplicate}
               CustomComponentLink={CustomComponentLink}
             />
-          </Popover>
+          </HoverCard>
         );
       })}
     </span>

package/src/components/bundle-packages/bundle-packages.module.css

@@ -35,6 +35,10 @@
   color: var(--color-text-ultra-light);
 }
 
+.packageNameLabel {
+  align-items: center;
+}
+
 .packagePopover {
   min-width: 320px;
 }

package/src/components/metrics-table-title/metrics-table-title.jsx

@@ -5,7 +5,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) => {
@@ -13,26 +14,24 @@ export const MetricsTableTitle = (props) => {
   const rootClassName = cx(css.root, className);
 
   return (
-    <Stack space="xxxsmall" className={rootClassName}>
-      <FlexStack space="xxxsmall">
-        <span>{title}</span>
-        {info && <span className={css.info}>{info}</span>}
-        {(popoverInfo || popoverHref) && (
-          <Popover icon="help">
-            <Stack space="xxxsmall">
-              {popoverInfo && <p>{popoverInfo}</p>}
-              {popoverHref && (
-                <p>
-                  <a href={popoverHref} target="_blank" rel="noreferrer">
-                    {I18N.READ_MORE}
-                  </a>
-                </p>
-              )}
-            </Stack>
-          </Popover>
-        )}
-      </FlexStack>
-    </Stack>
+    <FlexStack space="xxxsmall" className={rootClassName}>
+      <span>{title}</span>
+      {info && <span className={css.info}>{info}</span>}
+      {(popoverInfo || popoverHref) && (
+        <HoverCard label={<Icon glyph="help" />}>
+          <Stack space="xxxsmall">
+            {popoverInfo && <p>{popoverInfo}</p>}
+            {popoverHref && (
+              <p>
+                <a href={popoverHref} target="_blank" rel="noreferrer">
+                  {I18N.READ_MORE}
+                </a>
+              </p>
+            )}
+          </Stack>
+        </HoverCard>
+      )}
+    </FlexStack>
   );
 };
 

package/src/components/metrics-table-title/metrics-table-title.module.css

@@ -1,5 +1,7 @@
 .root {
+  align-items: center;
   font-weight: bold;
+  line-height: var(--space-small);
   text-transform: uppercase;
   color: var(--color-text-light);
 }

package/src/components/module-info/module-info.jsx

@@ -51,11 +51,7 @@ export const ModuleInfo = (props) => {
               </div>
             )}
 
-            <FileName
-              className={css.fileName}
-              as="code"
-              name={run?.name || '-'}
-            />
+            <FileName className={css.fileName} as="code" name={run?.name || '-'} />
           </Stack>
         );
       })}

package/src/components/module-info/module-info.module.css

@@ -15,6 +15,7 @@
 }
 
 .fileName {
+  max-width: 100%;
   padding: 2px;
   background: var(--color-highlight-warning);
 }