@bundle-stats/ui 3.2.5 → 3.2.6-beta.3

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

@@ -1,16 +1,14 @@
 .root {
+  display: inline-block;
+}
+
+.button {
   background: none;
   border: none;
   padding: 0;
-}
-
-.root:focus {
-  outline: none;
-  box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
-}
 
-.label {
   border: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
   padding: calc(var(--space-xxsmall) - 1px);
   display: flex;
   align-items: center;
@@ -24,7 +22,11 @@
   color: var(--color-text-light);
 }
 
-.label:hover {
+.button:hover,
+.button:focus,
+.button:active {
+  outline: none;
+  box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
   border-color: var(--color-outline-dark);
   color: var(--color-text);
 }
@@ -33,6 +35,7 @@
   position: absolute;
   left: 0;
   top: 100%;
+  border-radius: var(--radius-medium);
   box-shadow: 0 2px var(--space-xxsmall) var(--color-shadow);
   background: var(--color-background);
   min-width: 180px;
@@ -45,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/filters/filters.js

@@ -54,6 +54,7 @@ Filter.defaultProps = {
 
 const FilterGroup = props => {
   const {
+    className,
     groupKey,
     data,
     values,
@@ -98,6 +99,7 @@ const FilterGroup = props => {
   };
 
   return /*#__PURE__*/React.createElement(Dropdown, {
+    className: className,
     label: dropdownLabel,
     ariaLabel: `${groupLabel}: ${filterSuffix}`
   }, _ref4 => {
@@ -147,6 +149,7 @@ const FilterGroup = props => {
 };
 
 FilterGroup.propTypes = {
+  className: PropTypes.string,
   groupKey: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
   // eslint-disable-line react/forbid-prop-types
@@ -155,6 +158,9 @@ FilterGroup.propTypes = {
   onCheckboxChange: PropTypes.func.isRequired,
   toggleFilters: PropTypes.func.isRequired
 };
+FilterGroup.defaultProps = {
+  className: ''
+};
 export const Filters = props => {
   const {
     className,
@@ -191,16 +197,15 @@ export const Filters = props => {
       });
     }
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: css.item
-    }, /*#__PURE__*/React.createElement(FilterGroup, {
+    return /*#__PURE__*/React.createElement(FilterGroup, {
+      className: css.item,
       key: name,
       groupKey: name,
       data: data,
       values: values,
       onCheckboxChange: onCheckboxChange,
       toggleFilters: toggleFilters
-    }));
+    });
   })));
 };
 Filters.defaultProps = {

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

@@ -11,6 +11,7 @@
 }
 
 .filterInput {
+  border-radius: var(--radius-small) 0 0 var(--radius-small);
   flex: 0 0 auto;
   height: 1em;
   cursor: pointer;
@@ -129,11 +130,20 @@
 }
 
 .item {
+  border-radius: 0;
   position: relative;
   flex: 0 0 auto;
   margin-right: -1px;
 }
 
+.item:first-child {
+  border-radius: var(--radius-small) 0 0 var(--radius-small);
+}
+
+.item:last-child {
+  border-radius: 0 var(--radius-small) var(--radius-small) 0;
+}
+
 .item:hover {
   z-index: var(--layer-low); /* show collapsed border */
 }

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,9 +10,9 @@ 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';
 export { Tabs } from './tabs';
+export { Tag } from './tag';
 export { Tooltip } from './tooltip';

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

@@ -13,10 +13,6 @@
   text-align: left;
 }
 
-tr:last-child .cell {
-  border-bottom-width: 1px;
-}
-
 .root thead .cell {
   border-width: 0 0 2px;
   text-transform: uppercase;

package/lib-esm/ui/tag/index.js

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

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

@@ -0,0 +1,45 @@
+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 css from './tag.module.css';
+export const KINDS = {
+  DEFAULT: 'default',
+  SUCCESS: 'success',
+  INFO: 'info',
+  WARNING: 'warning',
+  DANGER: 'danger'
+};
+export const SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+};
+export const Tag = props => {
+  const {
+    className = '',
+    as: Component = 'span',
+    kind = KINDS.DEFAULT,
+    size = SIZES.MEDIUM,
+    ...restProps
+  } = props;
+  const rootClassName = cx(css.root, className, css[kind], css[size]);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: rootClassName
+  }, restProps));
+};
+Tag.propTypes = {
+  className: PropTypes.string,
+  as: PropTypes.elementType,
+  kind: PropTypes.oneOf(Object.values(KINDS)),
+  size: PropTypes.oneOf(Object.values(SIZES))
+};
+Tag.defaultProps = {
+  className: '',
+  as: 'span',
+  kind: KINDS.DEFAULT,
+  size: SIZES.MEDIUM
+};
+Tag.KINDS = KINDS;
+Tag.SIZES = SIZES;

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

@@ -0,0 +1,55 @@
+.root {
+  display: inline-block;
+  font-family: var(--font-family);
+  font-weight: bold;
+  background: var(--color-text-light);
+  color: var(--color-light);
+  text-align: center;
+  text-transform: uppercase;
+}
+
+/** Kind variation */
+.success {
+  background: var(--color-success);
+}
+
+.info {
+  background: var(--color-info);
+}
+
+.warning {
+  background: var(--color-warning-dark);
+}
+
+.danger {
+  background: var(--color-danger);
+}
+
+/** Size variation */
+/** default: medium */
+.root {
+  border-radius: var(--radius-medium);
+  padding: var(--space-xxxsmall);
+  min-width: var(--space-small);
+  height: var(--space-small);
+  font-size: 9px;
+  line-height: 1;
+}
+
+.small {
+  border-radius: var(--radius-small);
+  padding: calc(var(--space-xxxsmall) / 2);
+  height: var(--space-xsmall);
+  min-width: var(--space-xsmall);
+  font-size: 8px;
+  line-height: 1;
+}
+
+.large {
+  border-radius: var(--radius-large);
+  padding: var(--space-xxxsmall) var(--space-xxsmall);
+  min-width: var(--space-medium);
+  height: var(--space-medium);
+  font-size: 12px;
+  line-height: var(--space-small);
+}

package/lib-esm/ui/tag/tag.stories.js

@@ -0,0 +1,23 @@
+import { Tag } from '.';
+export default {
+  title: 'UI/Tag',
+  component: Tag,
+  argTypes: {
+    kind: {
+      control: 'select',
+      options: Object.values(Tag.KINDS)
+    },
+    size: {
+      control: 'select',
+      options: Object.values(Tag.SIZES)
+    }
+  },
+  args: {
+    children: 'tag'
+  }
+};
+export const Default = Tag.bind();
+export const OneLetter = Tag.bind();
+OneLetter.args = {
+  children: 'd'
+};

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/lib-esm/ui/tooltip/tooltip.module.css

@@ -12,7 +12,7 @@
 
 .tooltip {
   padding: var(--space-xxxsmall) var(--space-xxsmall);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-medium);
   background: var(--color-light);
   color: var(--color-text);
   filter: drop-shadow(0 0 var(--space-xxxsmall) var(--color-shadow));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.2.5",
+  "version": "3.2.6-beta.3",
   "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"
@@ -36,8 +36,8 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/cli": "7.17.3",
-    "@babel/core": "7.17.3",
+    "@babel/cli": "7.17.6",
+    "@babel/core": "7.17.5",
     "@babel/plugin-proposal-class-properties": "7.16.7",
     "@babel/preset-env": "7.16.11",
     "@babel/preset-react": "7.16.7",
@@ -54,7 +54,7 @@
     "babel-jest": "27.5.1",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.4.3",
+    "chromatic": "6.5.1",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
     "core-js": "3.20.2",
@@ -67,7 +67,7 @@
     "jest": "27.5.1",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
-    "postcss": "8.4.6",
+    "postcss": "8.4.7",
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -85,12 +85,12 @@
     "react-router-dom": "5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.2.5",
+    "@bundle-stats/utils": "^3.2.6-beta.3",
+    "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": "0347f5be371851764895fe6527b9ff3aad6d4cea"
+  "gitHead": "5506d2cdd38520c254fb10b9f92f6f27b8b1f251"
 }