@bundle-stats/ui 3.3.0-alpha.1 → 3.3.1-beta.8

package/lib-esm/hooks/search-params.js

@@ -6,9 +6,11 @@ const ACTION_SET_SEARCH = 'SET_SEARCH';
 const ACTION_RESET_DEFAULT = 'RESET_DEFAULT';
 const ACTION_RESET_ALL = 'RESET_ALL';
 const ACTION_SET = 'SET';
+const SEARCH_DEFAULT = '';
+const SEARCH_DEFAULT_PATTERN = /.*/;
 
 const getSearchPattern = search => {
-  let searchPattern = /.*/;
+  let searchPattern = SEARCH_DEFAULT_PATTERN;
 
   if (!search || !search.trim()) {
     return searchPattern;
@@ -39,49 +41,46 @@ const getSearchReducer = _ref => {
     switch (type) {
       case ACTION_SET_FILTERS:
         {
-          setParentState({
+          const newState = {
             filters: payload,
             search: state.search
-          });
-          return { ...state,
-            filters: payload
           };
+          setParentState(newState);
+          return newState;
         }
 
       case ACTION_SET_SEARCH:
         {
-          setParentState({
+          const newState = {
             filters: state.filters,
             search: payload
-          });
-          return { ...state,
-            search: payload,
+          };
+          setParentState(newState);
+          return { ...newState,
             searchPattern: getSearchPattern(payload)
           };
         }
 
       case ACTION_RESET_DEFAULT:
         {
-          setParentState({
-            filters: defaultFilters,
-            search: ''
-          });
-          return {
+          const newState = {
             filters: defaultFilters,
-            search: '',
+            search: SEARCH_DEFAULT
+          };
+          setParentState(newState);
+          return { ...newState,
             searchPattern: getSearchPattern()
           };
         }
 
       case ACTION_RESET_ALL:
         {
-          setParentState({
+          const newState = {
             filters: allEntriesFilters,
-            search: ''
-          });
-          return {
-            filters: allEntriesFilters,
-            search: '',
+            search: SEARCH_DEFAULT
+          };
+          setParentState(newState);
+          return { ...newState,
             searchPattern: getSearchPattern()
           };
         }
@@ -104,7 +103,7 @@ export const generateState = (filters, search) => ({
 });
 export const useSearchParams = _ref2 => {
   let {
-    search: parentSearch,
+    search: parentSearch = SEARCH_DEFAULT,
     filters: parentFilters,
     defaultFilters,
     allEntriesFilters,
@@ -124,7 +123,7 @@ export const useSearchParams = _ref2 => {
 
   useLayoutEffect(() => {
     // Run a deep comparison to prevent circular setState triggering
-    if (parentSearch === search || _isEqual(parentFilters, filters)) {
+    if (parentSearch === search && _isEqual(initialFilters, filters)) {
       return;
     }
 
@@ -132,7 +131,7 @@ export const useSearchParams = _ref2 => {
       type: ACTION_SET,
       payload: generateState(initialFilters, parentSearch)
     });
-  }, [search, filters, parentFilters, parentSearch]);
+  }, [dispatch, search, filters, parentSearch, initialFilters]);
   /** Callbacks */
 
   const handleUpdateSearch = useCallback(newValue => {
@@ -140,23 +139,23 @@ export const useSearchParams = _ref2 => {
       type: ACTION_SET_SEARCH,
       payload: newValue
     });
-  }, []);
+  }, [dispatch]);
   const handleUpdateFilters = useCallback(newFilters => {
     dispatch({
       type: ACTION_SET_FILTERS,
       payload: newFilters
     });
-  }, []);
+  }, [dispatch]);
   const handleResetFilters = useCallback(() => {
     dispatch({
       type: ACTION_RESET_DEFAULT
     });
-  }, []);
+  }, [dispatch]);
   const handleResetAllFilters = useCallback(() => {
     dispatch({
       type: ACTION_RESET_ALL
     });
-  }, []);
+  }, [dispatch]);
   return {
     search,
     searchPattern,

package/lib-esm/layout/box/box.module.css

@@ -4,6 +4,15 @@
 
 .outline {
   border: 1px solid var(--color-outline);
+  border-radius: var(--radius-medium);
+}
+
+.outline > :first-child {
+  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
+}
+
+.outline > :last-child {
+  border-radius: 0 0 var(--radius-medium) var(--radius-medium);
 }
 
 .padding-xxxsmall {

package/lib-esm/layout/footer/footer.module.css

@@ -3,7 +3,7 @@
 }
 
 .inner {
-  border-top: 2px solid var(--color-outline);
+  border-top: 1px solid var(--color-outline);
 }
 
 .navItem {

package/lib-esm/layout/index.js

@@ -1,6 +1,7 @@
 export { Box } from './box';
 export { Footer } from './footer';
 export { Header } from './header';
+export { Separator } from './separator';
 export { SubHeader } from './sub-header';
 export { Stack } from './stack';
 export { FlexStack } from './flex-stack';

package/lib-esm/layout/separator.js

@@ -0,0 +1,28 @@
+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 './separator.module.css';
+const propTypes = {
+  className: PropTypes.string
+};
+const defaultProps = {
+  className: ''
+};
+/**
+ * @param {PropTypes.InferProps<typeof propTypes>} props
+ * @return {React.FunctionComponentElement}
+ */
+
+export const Separator = props => {
+  const {
+    className,
+    ...restProps
+  } = props;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cx(css.root, className)
+  }, restProps));
+};
+Separator.propTypes = propTypes;
+Separator.defaultProps = defaultProps;

package/lib-esm/layout/separator.module.css

@@ -0,0 +1,5 @@
+.root {
+  background: var(--color-outline);
+  width: 100%;
+  height: 1px;
+}

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

@@ -1,56 +1,57 @@
-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 { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../icon';
 import css from './dropdown.module.css';
 export const Dropdown = props => {
   const {
     className,
+    buttonClassName,
     label,
     ariaLabel,
     glyph,
-    activeLabel,
     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,
+  const rootClassName = cx(css.root, className);
+  const menuState = useMenuState();
+  return /*#__PURE__*/React.createElement("div", {
+    className: rootClassName
+  }, /*#__PURE__*/React.createElement(MenuButton, {
+    state: menuState,
+    className: cx(css.button, buttonClassName),
     tabIndex: null
-  }), /*#__PURE__*/React.createElement(FlexStack, {
-    space: "xxxsmall",
-    className: css.label
+  }, /*#__PURE__*/React.createElement(FlexStack, {
+    space: "xxxsmall"
   }, glyph && /*#__PURE__*/React.createElement(Icon, {
     className: css.labelIcon,
     glyph: glyph
-  }), label)), /*#__PURE__*/React.createElement(Menu, _extends({}, menu, {
+  }), label)), /*#__PURE__*/React.createElement(Menu, {
+    state: menuState,
     "aria-label": ariaLabel || label,
     className: css.dropdown
-  }), typeof children === 'function' ? children({
+  }, typeof children === 'function' ? children({
     MenuItem,
-    menu,
+    menu: menuState,
     menuItemClassName: css.menuItem,
     menuItemActiveClassName: css.menuItemActive
   }) : children));
 };
 Dropdown.defaultProps = {
   className: '',
+  buttonClassName: '',
   label: null,
   ariaLabel: '',
-  glyph: null,
-  activeLabel: false
+  glyph: null
 };
 Dropdown.propTypes = {
   /** Adopted child class name */
   className: PropTypes.string,
 
+  /** Button adopted child class name */
+  buttonClassName: PropTypes.string,
+
   /** Button label */
   label: PropTypes.node,
 
@@ -60,12 +61,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,
-
   /** Content */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired
 };

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/empty-set/empty-set.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Stack } from '../../layout/stack';
 import I18N from '../../i18n';
 import css from './empty-set.module.css';
 export const EmptySet = props => {
@@ -19,11 +20,10 @@ export const EmptySet = props => {
     type: "button",
     onClick: handleViewAll
   }, I18N.VIEW_ALL)] : [])];
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Stack, {
+    space: "xxsmall",
     className: css.root
-  }, /*#__PURE__*/React.createElement("p", {
-    className: css.text
-  }, message), filtered && actions.map((action, index) => /*#__PURE__*/React.createElement(React.Fragment, null, index > 0 && ' or ', action)));
+  }, /*#__PURE__*/React.createElement("p", null, message), filtered && actions.map((action, index) => /*#__PURE__*/React.createElement(React.Fragment, null, index > 0 && ' or ', action)));
 };
 EmptySet.propTypes = {
   resources: PropTypes.string.isRequired,

package/lib-esm/ui/empty-set/empty-set.module.css

@@ -1,5 +1,5 @@
-.text {
-  margin-bottom: 0;
+.root {
+  color: var(--color-text-light);
 }
 
 .action {

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

@@ -13,6 +13,7 @@ import css from './filters.module.css';
 const Filter = props => {
   const {
     className,
+    buttonClassName,
     label,
     name,
     getOnOnlyClick,
@@ -25,7 +26,7 @@ const Filter = props => {
   }, /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall",
     as: "label",
-    className: css.filterCheckbox
+    className: cx(css.filterCheckbox, buttonClassName)
   }, /*#__PURE__*/React.createElement("input", _extends({
     className: css.filterInput,
     type: "checkbox",
@@ -43,17 +44,21 @@ const Filter = props => {
 
 Filter.propTypes = {
   className: PropTypes.string,
+  buttonClassName: PropTypes.string,
   name: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   getOnOnlyClick: PropTypes.func
 };
 Filter.defaultProps = {
   className: '',
+  buttonClassName: '',
   getOnOnlyClick: null
 };
 
 const FilterGroup = props => {
   const {
+    className,
+    buttonClassName,
     groupKey,
     data,
     values,
@@ -98,6 +103,8 @@ const FilterGroup = props => {
   };
 
   return /*#__PURE__*/React.createElement(Dropdown, {
+    className: className,
+    buttonClassName: buttonClassName,
     label: dropdownLabel,
     ariaLabel: `${groupLabel}: ${filterSuffix}`
   }, _ref4 => {
@@ -147,6 +154,8 @@ const FilterGroup = props => {
 };
 
 FilterGroup.propTypes = {
+  className: PropTypes.string,
+  buttonClassName: PropTypes.string,
   groupKey: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
   // eslint-disable-line react/forbid-prop-types
@@ -155,6 +164,10 @@ FilterGroup.propTypes = {
   onCheckboxChange: PropTypes.func.isRequired,
   toggleFilters: PropTypes.func.isRequired
 };
+FilterGroup.defaultProps = {
+  className: '',
+  buttonClassName: ''
+};
 export const Filters = props => {
   const {
     className,
@@ -175,6 +188,7 @@ export const Filters = props => {
   return /*#__PURE__*/React.createElement("form", {
     className: rootClassName
   }, /*#__PURE__*/React.createElement(FlexStack, {
+    space: "xxsmall",
     className: css.items
   }, Object.entries(filters).map(_ref7 => {
     let [name, data] = _ref7;
@@ -183,6 +197,7 @@ export const Filters = props => {
       return /*#__PURE__*/React.createElement(Filter, {
         key: name,
         className: cx(css.item, css.filterStandalone),
+        buttonClassName: css.itemButton,
         name: name,
         label: data.label,
         onChange: onCheckboxChange,
@@ -191,16 +206,16 @@ export const Filters = props => {
       });
     }
 
-    return /*#__PURE__*/React.createElement("div", {
-      className: css.item
-    }, /*#__PURE__*/React.createElement(FilterGroup, {
+    return /*#__PURE__*/React.createElement(FilterGroup, {
+      className: css.item,
+      buttonClassName: css.itemButton,
       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;
@@ -131,9 +132,8 @@
 .item {
   position: relative;
   flex: 0 0 auto;
-  margin-right: -1px;
 }
 
-.item:hover {
-  z-index: var(--layer-low); /* show collapsed border */
+.itemButton {
+  border-radius: var(--radius-small);
 }

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

@@ -0,0 +1,83 @@
+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 { Hovercard, HovercardAnchor, HovercardArrow, useHovercard, useHovercardState } from 'ariakit/hovercard';
+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,
+    hoverCardClassName,
+    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: cx(css.hoverCard, hoverCardClassName),
+    style: {
+      zIndex: 10000
+    }
+  }), /*#__PURE__*/React.createElement(HovercardArrow, {
+    size: 24
+  }), typeof children === 'function' ? children({
+    close: state.hide
+  }) : children));
+};
+HoverCard.propTypes = {
+  /** Adopted child class name */
+  className: PropTypes.string,
+
+  /** Adopted child class name for hover card */
+  hoverCardClassName: 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: '',
+  hoverCardClassName: '',
+  label: '',
+  as: '',
+  href: ''
+};

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

@@ -0,0 +1,29 @@
+.root {
+  display: inline-block;
+}
+
+.anchor {
+  display: inline-block;
+  color: inherit;
+  text-decoration: none;
+}
+
+.anchor:hover {
+  color: var(--color-primary);
+}
+
+.anchor:focus {
+  outline: 0;
+}
+
+.hoverCard {
+  padding: var(--space-xsmall) var(--space-small);
+  border-radius: var(--radius-medium);
+  width: calc(100vw - 2 * var(--space-small));
+  max-width: 360px;
+  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);
+}

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';