@bundle-stats/ui 3.2.1-alpha.0 → 3.2.1-beta.3

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

@@ -65,34 +65,51 @@ const FilterGroup = props => {
     ...groupData
   } = data;
   const groupItems = Object.entries(groupData);
-  const groupCheckboxes = groupItems.filter(([itemKey, item]) => typeof (item == null ? void 0 : item.defaultValue) !== 'undefined');
-  const isGroupChecked = groupCheckboxes.map(([itemKey]) => _get(values, `${groupKey}.${itemKey}`)).reduce((agg, val) => agg && val, true);
+  const groupCheckboxes = groupItems.filter(_ref => {
+    let [itemKey, item] = _ref;
+    return typeof (item == null ? void 0 : item.defaultValue) !== 'undefined';
+  });
+  const isGroupChecked = groupCheckboxes.map(_ref2 => {
+    let [itemKey] = _ref2;
+    return _get(values, `${groupKey}.${itemKey}`);
+  }).reduce((agg, val) => agg && val, true);
   const filterSuffix = getGroupFiltersLabelSuffix(groupItems);
   const hasCustomFilterSuffix = !Object.values(LABELS).includes(filterSuffix);
   const dropdownLabel = /*#__PURE__*/React.createElement(React.Fragment, null, `${groupLabel}:`, "\xA0", /*#__PURE__*/React.createElement("span", {
     className: cx(hasCustomFilterSuffix && css.labelSuffixCustom)
   }, filterSuffix));
 
-  const getOnGroupCheck = (value, overrides = {}) => () => {
-    const newFilters = groupCheckboxes.reduce((agg, [itemKey]) => ({ ...agg,
-      [`${groupKey}.${itemKey}`]: value
-    }), {});
-    toggleFilters({ ...newFilters,
-      ...overrides
-    });
+  const getOnGroupCheck = function (value, overrides) {
+    if (overrides === void 0) {
+      overrides = {};
+    }
+
+    return () => {
+      const newFilters = groupCheckboxes.reduce((agg, _ref3) => {
+        let [itemKey] = _ref3;
+        return { ...agg,
+          [`${groupKey}.${itemKey}`]: value
+        };
+      }, {});
+      toggleFilters({ ...newFilters,
+        ...overrides
+      });
+    };
   };
 
   return /*#__PURE__*/React.createElement(Dropdown, {
     label: dropdownLabel,
     ariaLabel: `${groupLabel}: ${filterSuffix}`
-  }, ({
-    MenuItem,
-    menu,
-    menuItemClassName
-  }) => {
+  }, _ref4 => {
+    let {
+      MenuItem,
+      menu,
+      menuItemClassName
+    } = _ref4;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: css.filterGroupItems
-    }, groupItems.map(([itemKey, itemData]) => {
+    }, groupItems.map(_ref5 => {
+      let [itemKey, itemData] = _ref5;
       const id = [groupKey, itemKey].join('.');
 
       const getOnOnlyClick = () => getOnGroupCheck(false, {
@@ -147,16 +164,21 @@ export const Filters = props => {
     toggleFilters
   } = props;
 
-  const onCheckboxChange = ({
-    target
-  }) => toggleFilter(target.name, target.checked);
+  const onCheckboxChange = _ref6 => {
+    let {
+      target
+    } = _ref6;
+    return toggleFilter(target.name, target.checked);
+  };
 
   const rootClassName = cx(css.root, className);
   return /*#__PURE__*/React.createElement("form", {
     className: rootClassName
   }, /*#__PURE__*/React.createElement(FlexStack, {
     className: css.items
-  }, Object.entries(filters).map(([name, data]) => {
+  }, Object.entries(filters).map(_ref7 => {
+    let [name, data] = _ref7;
+
     if (typeof (data == null ? void 0 : data.defaultValue) !== 'undefined') {
       return /*#__PURE__*/React.createElement(Filter, {
         key: name,

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

@@ -8,9 +8,10 @@ stories.addDecorator(getWrapperDecorator({
   paddingLeft: '200px'
 }));
 
-const FiltersState = ({
-  children
-}) => {
+const FiltersState = _ref => {
+  let {
+    children
+  } = _ref;
   const [values, setValues] = useState({
     changed: true,
     'assetType.entrypoint': true

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

@@ -13,9 +13,12 @@ export const LABELS = {
 export const getGroupFiltersLabelSuffix = filters => {
   const filterCount = filters.length; // eslint-disable-next-line no-unused-vars
 
-  const checkedFilters = filters.filter(([_, {
-    defaultValue
-  }]) => defaultValue);
+  const checkedFilters = filters.filter(_ref => {
+    let [_, {
+      defaultValue
+    }] = _ref;
+    return defaultValue;
+  });
   const filterCheckedCount = checkedFilters.length;
 
   if (filterCheckedCount === 0) {
@@ -27,9 +30,12 @@ export const getGroupFiltersLabelSuffix = filters => {
   } // eslint-disable-next-line no-unused-vars
 
 
-  const checkedFilterLabels = checkedFilters.map(([_, {
-    label
-  }]) => label);
+  const checkedFilterLabels = checkedFilters.map(_ref2 => {
+    let [_, {
+      label
+    }] = _ref2;
+    return label;
+  });
   let suffix = '';
   let inlinedLabelCount = 0;
   let done = false;

package/lib-esm/ui/horizontal-bar-chart/horizontal-bar-chart.js

@@ -110,12 +110,13 @@ export const HorizontalBarChart = props => {
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     className: cx(css.root, className)
-  }, entries.map(({
-    color,
-    getItemTooltip,
-    label,
-    width
-  }, index) => {
+  }, entries.map((_ref, index) => {
+    let {
+      color,
+      getItemTooltip,
+      label,
+      width
+    } = _ref;
     const key = index;
     return /*#__PURE__*/React.createElement(HorizontalBarChartItem, {
       key: key,

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

@@ -16,19 +16,22 @@ const ICONS = {
   SORT: 'sort',
   WARNING: 'warning'
 };
-export const Icon = ({
-  className,
-  glyph,
-  as: Component,
-  size,
-  ...restProps
-}) => /*#__PURE__*/React.createElement(Component, _extends({
-  className: cx(css.root, className, css[size])
-}, restProps), /*#__PURE__*/React.createElement("svg", {
-  className: css.icon
-}, /*#__PURE__*/React.createElement("use", {
-  xlinkHref: `#${glyph}`
-})));
+export const Icon = _ref => {
+  let {
+    className,
+    glyph,
+    as: Component,
+    size,
+    ...restProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    className: cx(css.root, className, css[size])
+  }, restProps), /*#__PURE__*/React.createElement("svg", {
+    className: css.icon
+  }, /*#__PURE__*/React.createElement("use", {
+    xlinkHref: `#${glyph}`
+  })));
+};
 Icon.ICONS = ICONS;
 Icon.SIZE_SMALL = 'small';
 Icon.SIZE_MEDIUM = 'medium';

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

@@ -4,11 +4,12 @@ import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import css from './input.module.css';
-export const Input = ({
-  className,
-  size,
-  ...restProps
-}) => {
+export const Input = _ref => {
+  let {
+    className,
+    size,
+    ...restProps
+  } = _ref;
   const rootClassName = cx(css.root, className, css[size]);
   return /*#__PURE__*/React.createElement("input", _extends({
     className: rootClassName

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

@@ -4,13 +4,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './loader.module.css';
-export const Loader = ({
-  className,
-  size,
-  ...restProps
-}) => /*#__PURE__*/React.createElement("span", _extends({
-  className: cx(css.root, className, css[size])
-}, restProps));
+export const Loader = _ref => {
+  let {
+    className,
+    size,
+    ...restProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: cx(css.root, className, css[size])
+  }, restProps));
+};
 Loader.SIZE_SMALL = 'small';
 Loader.SIZE_MEDIUM = 'medium';
 Loader.SIZE_LARGE = 'large';

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

@@ -78,12 +78,13 @@ const ICONS = {
   [KIND_LOGO]: LogoSvg,
   [KIND_WEBPACK]: WebpackSvg
 };
-export const Logo = ({
-  className,
-  as: Component,
-  kind,
-  ...props
-}) => {
+export const Logo = _ref => {
+  let {
+    className,
+    as: Component,
+    kind,
+    ...props
+  } = _ref;
   const rootClassName = cx(css.root, css[kind], className);
   const Svg = ICONS[kind] || LogoSvg;
   return /*#__PURE__*/React.createElement(Component, _extends({

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

@@ -5,7 +5,13 @@ import { getWrapperDecorator } from '../../stories';
 import { KIND_DEFAULT, KIND_LOGOTYPE, KINDS } from './logo.constants';
 import { Logo } from '.';
 
-const selectKind = (value = KIND_DEFAULT) => select('Kind', KINDS, value);
+const selectKind = function (value) {
+  if (value === void 0) {
+    value = KIND_DEFAULT;
+  }
+
+  return select('Kind', KINDS, value);
+};
 
 const stories = storiesOf('UI/Logo', module);
 stories.addDecorator(getWrapperDecorator());

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

@@ -15,13 +15,16 @@ const cloneElement = element => {
   });
 };
 
-export const Panels = ({
-  className,
-  children,
-  ...restProps
-}) => /*#__PURE__*/React.createElement("div", _extends({
-  className: cx(css.root, className)
-}, restProps), React.Children.map(children, cloneElement));
+export const Panels = _ref => {
+  let {
+    className,
+    children,
+    ...restProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cx(css.root, className)
+  }, restProps), React.Children.map(children, cloneElement));
+};
 Panels.defaultProps = {
   className: '',
   children: null

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

@@ -6,13 +6,14 @@ 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 = ({
-  className,
-  icon,
-  label,
-  ariaLabel,
-  children
-}) => {
+export const Popover = _ref => {
+  let {
+    className,
+    icon,
+    label,
+    ariaLabel,
+    children
+  } = _ref;
   const popover = usePopoverState({
     baseId: process.env.NODE_ENV === 'test' && 'id-test',
     gutter: 24,

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

@@ -22,12 +22,14 @@ export const SortDropdown = props => {
     label: customLabel,
     glyph: "sort",
     align: "right"
-  }, ({
-    MenuItem,
-    menu,
-    menuItemClassName,
-    menuItemActiveClassName
-  }) => {
+  }, _ref => {
+    let {
+      MenuItem,
+      menu,
+      menuItemClassName,
+      menuItemActiveClassName
+    } = _ref;
+
     const getButtonOnClick = (newField, newDirection) => () => {
       onChange({
         field: newField,
@@ -38,7 +40,8 @@ export const SortDropdown = props => {
 
     return /*#__PURE__*/React.createElement("div", {
       className: css.items
-    }, Object.entries(fields).map(([key, item]) => {
+    }, Object.entries(fields).map(_ref2 => {
+      let [key, item] = _ref2;
       const buttonProps = direction === 'asc' ? {
         className: css.itemAsc,
         onClick: getButtonOnClick(key, 'desc'),

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

@@ -62,13 +62,14 @@ Td.propTypes = {
   /** Adopted child class name */
   className: PropTypes.string
 };
-export const Table = ({
-  className,
-  emptyMessage,
-  compact,
-  outline,
-  children
-}) => {
+export const Table = _ref => {
+  let {
+    className,
+    emptyMessage,
+    compact,
+    outline,
+    children
+  } = _ref;
   const rootClassName = cx(css.root, className, compact && css.compact, outline && css.outline);
 
   if (!children) {

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

@@ -14,12 +14,15 @@ const cloneElement = element => {
   });
 };
 
-export const Tabs = ({
-  className,
-  children
-}) => /*#__PURE__*/React.createElement("nav", {
-  className: cx(css.root, className)
-}, React.Children.map(children, cloneElement));
+export const Tabs = _ref => {
+  let {
+    className,
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement("nav", {
+    className: cx(css.root, className)
+  }, React.Children.map(children, cloneElement));
+};
 Tabs.defaultProps = {
   className: ''
 };

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

@@ -6,11 +6,14 @@ const stories = storiesOf('UI/Toolbar', module);
 stories.addDecorator(getWrapperDecorator());
 stories.add('default', () => /*#__PURE__*/React.createElement(Toolbar, null, /*#__PURE__*/React.createElement("div", null, "Content")));
 stories.add('with actions', () => /*#__PURE__*/React.createElement(Toolbar, {
-  renderActions: ({
-    actionClassName
-  }) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: actionClassName
-  }, "Action 1"), /*#__PURE__*/React.createElement("div", {
-    className: actionClassName
-  }, "Action 2"))
+  renderActions: _ref => {
+    let {
+      actionClassName
+    } = _ref;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: actionClassName
+    }, "Action 1"), /*#__PURE__*/React.createElement("div", {
+      className: actionClassName
+    }, "Action 2"));
+  }
 }, "Content"));

package/lib-esm/utils.js

@@ -2,7 +2,11 @@ import _chunk from "lodash/chunk";
 import React from 'react';
 import cx from 'classnames';
 import COLORS from './chart-colors.json';
-export const getColors = (count = 2) => {
+export const getColors = function (count) {
+  if (count === void 0) {
+    count = 2;
+  }
+
   const chunks = _chunk(COLORS, Math.round(COLORS.length / count));
 
   return chunks.map((chunkColors, index) => {
@@ -22,13 +26,18 @@ export const getRenderChildWithClassName = className => child => {
     return null;
   }
 
-  if (!(child != null && child.props)) {
+  const {
+    props
+  } = child;
+
+  if (!props) {
     return /*#__PURE__*/React.createElement("div", {
       className: className
     }, child);
   }
 
-  return /*#__PURE__*/React.cloneElement(child, { ...child.props,
-    className: cx(className, child.props.className)
+  return /*#__PURE__*/React.cloneElement(child, { ...props,
+    className: cx(className, props.className) // eslint-disable-line react/prop-types
+
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "3.2.1-alpha.0",
+  "version": "3.2.1-beta.3",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -36,30 +36,30 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/cli": "7.15.7",
-    "@babel/core": "7.15.8",
-    "@babel/preset-env": "7.15.8",
-    "@babel/preset-react": "7.14.5",
+    "@babel/cli": "7.16.0",
+    "@babel/core": "7.16.0",
+    "@babel/preset-env": "7.16.4",
+    "@babel/preset-react": "7.16.0",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
     "@storybook/addon-knobs": "6.3.1",
-    "@storybook/addon-storyshots": "6.2.9",
-    "@storybook/addons": "6.2.9",
-    "@storybook/react": "6.2.9",
+    "@storybook/addon-storyshots": "6.3.12",
+    "@storybook/addons": "6.3.12",
+    "@storybook/react": "6.3.12",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "26.6.3",
+    "babel-jest": "27.3.1",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.0.5",
+    "chromatic": "6.0.6",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
-    "core-js": "3.19.0",
+    "core-js": "3.19.1",
     "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": "26.6.3",
+    "jest": "27.3.1",
     "jest-date-mock": "1.0.8",
     "lodash": "4.17.21",
     "prop-types": "15.7.2",
@@ -79,11 +79,11 @@
     "react-router-dom": "^5.3.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^3.2.1-alpha.0",
+    "@bundle-stats/utils": "^3.2.1-beta.3",
     "date-fns": "^2.6.0",
     "query-string": "^7.0.0",
     "reakit": "^1.3.6",
     "use-query-params": "^1.2.2"
   },
-  "gitHead": "fdb4b6931ebbc35ad469608725603cde5ecab9b7"
+  "gitHead": "dc8af1ca0a607ef6443ceaa9311b2c0ae1e0037b"
 }

package/src/utils.jsx

@@ -25,12 +25,14 @@ export const getRenderChildWithClassName = (className) => (child) => {
     return null;
   }
 
-  if (!child?.props) {
+  const { props } = child;
+
+  if (!props) {
     return <div className={className}>{child}</div>;
   }
 
   return React.cloneElement(child, {
-    ...child.props,
-    className: cx(className, child.props.className),
+    ...props,
+    className: cx(className, props.className), // eslint-disable-line react/prop-types
   });
 };