@bundle-stats/ui 4.0.0-rc.7 → 4.0.3

package/lib/components/bundle-assets/bundle-assets.js

@@ -122,9 +122,9 @@ var getFilters = function getFilters(_ref4) {
   }), _defineProperty(_ASSET_ENTRY_TYPE, _utils.ASSET_FILTERS.CHUNK, {
     label: 'Chunk',
     defaultValue: (0, _get2["default"])(filters, "".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.CHUNK), true)
-  }), _defineProperty(_ASSET_ENTRY_TYPE, _utils.ASSET_FILTERS.ASSET, {
-    label: 'Asset',
-    defaultValue: (0, _get2["default"])(filters, "".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.ASSET), true)
+  }), _defineProperty(_ASSET_ENTRY_TYPE, _utils.ASSET_FILTERS.OTHER, {
+    label: 'Other',
+    defaultValue: (0, _get2["default"])(filters, "".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.OTHER), true)
   }), _ASSET_ENTRY_TYPE)), _defineProperty(_ref5, _utils.ASSET_FILE_TYPE, _objectSpread({
     label: 'File type'
   }, getFileTypeFilters(filters))), _ref5;

package/lib/components/bundle-assets/bundle-assets.utils.js

@@ -75,7 +75,7 @@ var getRowFilter = function getRowFilter(filters) {
       return false;
     }
 
-    if (!(filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.ENTRY)] && item.isEntry || filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.INITIAL)] && item.isInitial || filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.CHUNK)] && item.isChunk || filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.ASSET)] && item.isAsset)) {
+    if (!(filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.ENTRY)] && item.isEntry || filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.INITIAL)] && item.isInitial || filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.CHUNK)] && item.isChunk || filters["".concat(_utils.ASSET_ENTRY_TYPE, ".").concat(_utils.ASSET_FILTERS.OTHER)] && item.isAsset)) {
       return false;
     }
 

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

@@ -41,7 +41,7 @@ var MetricsTableTitle = function MetricsTableTitle(props) {
     label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
       glyph: "help"
     }),
-    className: _metricsTableTitleModule["default"].hoverCard
+    anchorClassName: _metricsTableTitleModule["default"].anchor
   }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
   }, popoverInfo && /*#__PURE__*/_react["default"].createElement("p", null, popoverInfo), popoverHref && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("button", {

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

@@ -2,14 +2,14 @@
 }
 
 .title {
-  color: var(--color-text-light);
   align-items: center;
+  color: var(--color-text-light);
   font-weight: bold;
   text-transform: uppercase;
 }
 
-.hoverCard {
-  line-height: 1;
+.anchor {
+  display: block;
 }
 
 .info {

package/lib/components/total-size-type-title/total-size-type-title.js

@@ -31,11 +31,14 @@ var TotalSizeTypeTitle = function TotalSizeTypeTitle(_ref) {
   var className = _ref.className;
   return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxxsmall",
-    className: (0, _classnames["default"])(_totalSizeTypeTitleModule["default"].title, className)
-  }, /*#__PURE__*/_react["default"].createElement("span", null, _i18n["default"].ASSET_TOTALS), /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+    className: (0, _classnames["default"])(_totalSizeTypeTitleModule["default"].root, className)
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: _totalSizeTypeTitleModule["default"].text
+  }, _i18n["default"].ASSET_TOTALS), /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
     label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
       glyph: "help"
-    })
+    }),
+    anchorClassName: _totalSizeTypeTitleModule["default"].anchor
   }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement("p", null, _i18n["default"].ASSET_TOTALS_INFO), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("button", {

package/lib/components/total-size-type-title/total-size-type-title.module.css

@@ -1,11 +1,19 @@
-.title {
+.root {
   color: var(--color-text-light);
+  align-items: center;
+}
+
+.text {
   font-weight: bold;
   font-size: var(--size-medium);
   line-height: var(--space-medium);
   text-transform: uppercase;
 }
 
+.anchor {
+  display: block;
+}
+
 .readMoreLink {
   appearance: none;
   background: none;

package/lib/i18n.js

@@ -16,8 +16,8 @@ var _default = {
   READ_MORE: 'Read more',
   ASSETS_INFO: 'Asset size - the size of the file produced by webpack',
   ASSET_TOTALS_INFO: 'The total size of the assets produced by webpack by type',
-  MODULES_INFO: 'Module size - module file size before any transformation(ex: babel, typescript) or before any production optimization(ex: terser minification)',
-  PACKAGES_INFO: "Package size - the total package's module size before any transformation(ex: babel, typescript) or before any production optimization(ex: terser minification)",
+  MODULES_INFO: 'Module size - module source size before any production optimization(ex: terser minification)',
+  PACKAGES_INFO: "Package size - the total package's module size before any production optimization(ex: terser minification)",
   RESET_FILTERS: 'Reset filters',
   VIEW_ALL: 'View all entries'
 };

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

@@ -39,6 +39,7 @@ var resolveComponent = function resolveComponent(as, href) {
 
 var HoverCard = function HoverCard(props) {
   var className = props.className,
+      anchorClassName = props.anchorClassName,
       hoverCardClassName = props.hoverCardClassName,
       href = props.href,
       as = props.as,
@@ -63,7 +64,7 @@ var HoverCard = function HoverCard(props) {
   }, /*#__PURE__*/_react["default"].createElement(_hovercard.HovercardAnchor, {
     state: state,
     href: href,
-    className: _hoverCardModule["default"].anchor,
+    className: (0, _classnames["default"])(_hoverCardModule["default"].anchor, anchorClassName),
     as: Component
   }, label), /*#__PURE__*/_react["default"].createElement(_hovercard.Hovercard, _extends({}, hoverCardProps, {
     state: state,
@@ -87,6 +88,9 @@ HoverCard.propTypes = {
   /** Adopted child class name for hover card */
   hoverCardClassName: _propTypes["default"].string,
 
+  /** Adopted child class name for anchor */
+  anchorClassName: _propTypes["default"].string,
+
   /** Anchor label */
   label: _propTypes["default"].node,
 
@@ -102,6 +106,7 @@ HoverCard.propTypes = {
 HoverCard.defaultProps = {
   className: '',
   hoverCardClassName: '',
+  anchorClassName: '',
   label: '',
   as: '',
   href: ''

package/lib/ui/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "HorizontalBarChart", {
     return _horizontalBarChart.HorizontalBarChart;
   }
 });
+Object.defineProperty(exports, "HoverCard", {
+  enumerable: true,
+  get: function get() {
+    return _hoverCard.HoverCard;
+  }
+});
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
   get: function get() {
@@ -126,6 +132,8 @@ var _filters = require("./filters");
 
 var _horizontalBarChart = require("./horizontal-bar-chart");
 
+var _hoverCard = require("./hover-card");
+
 var _icon = require("./icon");
 
 var _input = require("./input");

package/lib-esm/components/bundle-assets/bundle-assets.js

@@ -67,9 +67,9 @@ const getFilters = _ref2 => {
         label: 'Chunk',
         defaultValue: _get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`, true)
       },
-      [ASSET_FILTERS.ASSET]: {
-        label: 'Asset',
-        defaultValue: _get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ASSET}`, true)
+      [ASSET_FILTERS.OTHER]: {
+        label: 'Other',
+        defaultValue: _get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`, true)
       }
     },
     [ASSET_FILE_TYPE]: {

package/lib-esm/components/bundle-assets/bundle-assets.utils.js

@@ -40,7 +40,7 @@ export const getRowFilter = filters => item => {
     return false;
   }
 
-  if (!(filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`] && item.isEntry || filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`] && item.isInitial || filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`] && item.isChunk || filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ASSET}`] && item.isAsset)) {
+  if (!(filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`] && item.isEntry || filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`] && item.isInitial || filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`] && item.isChunk || filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`] && item.isAsset)) {
     return false;
   }
 

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

@@ -25,7 +25,7 @@ export const MetricsTableTitle = props => {
     label: /*#__PURE__*/React.createElement(Icon, {
       glyph: "help"
     }),
-    className: css.hoverCard
+    anchorClassName: css.anchor
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
   }, popoverInfo && /*#__PURE__*/React.createElement("p", null, popoverInfo), popoverHref && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("button", {

package/lib-esm/components/metrics-table-title/metrics-table-title.module.css

@@ -2,14 +2,14 @@
 }
 
 .title {
-  color: var(--color-text-light);
   align-items: center;
+  color: var(--color-text-light);
   font-weight: bold;
   text-transform: uppercase;
 }
 
-.hoverCard {
-  line-height: 1;
+.anchor {
+  display: block;
 }
 
 .info {

package/lib-esm/components/total-size-type-title/total-size-type-title.js

@@ -14,11 +14,14 @@ export const TotalSizeTypeTitle = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxxsmall",
-    className: cx(css.title, className)
-  }, /*#__PURE__*/React.createElement("span", null, I18N.ASSET_TOTALS), /*#__PURE__*/React.createElement(HoverCard, {
+    className: cx(css.root, className)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: css.text
+  }, I18N.ASSET_TOTALS), /*#__PURE__*/React.createElement(HoverCard, {
     label: /*#__PURE__*/React.createElement(Icon, {
       glyph: "help"
-    })
+    }),
+    anchorClassName: css.anchor
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
   }, /*#__PURE__*/React.createElement("p", null, I18N.ASSET_TOTALS_INFO), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("button", {

package/lib-esm/components/total-size-type-title/total-size-type-title.module.css

@@ -1,11 +1,19 @@
-.title {
+.root {
   color: var(--color-text-light);
+  align-items: center;
+}
+
+.text {
   font-weight: bold;
   font-size: var(--size-medium);
   line-height: var(--space-medium);
   text-transform: uppercase;
 }
 
+.anchor {
+  display: block;
+}
+
 .readMoreLink {
   appearance: none;
   background: none;

package/lib-esm/i18n.js

@@ -10,8 +10,8 @@ export default {
   READ_MORE: 'Read more',
   ASSETS_INFO: 'Asset size - the size of the file produced by webpack',
   ASSET_TOTALS_INFO: 'The total size of the assets produced by webpack by type',
-  MODULES_INFO: 'Module size - module file size before any transformation(ex: babel, typescript) or before any production optimization(ex: terser minification)',
-  PACKAGES_INFO: "Package size - the total package's module size before any transformation(ex: babel, typescript) or before any production optimization(ex: terser minification)",
+  MODULES_INFO: 'Module size - module source size before any production optimization(ex: terser minification)',
+  PACKAGES_INFO: "Package size - the total package's module size before any production optimization(ex: terser minification)",
   RESET_FILTERS: 'Reset filters',
   VIEW_ALL: 'View all entries'
 };

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

@@ -21,6 +21,7 @@ const resolveComponent = (as, href) => {
 export const HoverCard = props => {
   const {
     className,
+    anchorClassName,
     hoverCardClassName,
     href,
     as,
@@ -46,7 +47,7 @@ export const HoverCard = props => {
   }, /*#__PURE__*/React.createElement(HovercardAnchor, {
     state: state,
     href: href,
-    className: css.anchor,
+    className: cx(css.anchor, anchorClassName),
     as: Component
   }, label), /*#__PURE__*/React.createElement(Hovercard, _extends({}, hoverCardProps, {
     state: state,
@@ -68,6 +69,9 @@ HoverCard.propTypes = {
   /** Adopted child class name for hover card */
   hoverCardClassName: PropTypes.string,
 
+  /** Adopted child class name for anchor */
+  anchorClassName: PropTypes.string,
+
   /** Anchor label */
   label: PropTypes.node,
 
@@ -83,6 +87,7 @@ HoverCard.propTypes = {
 HoverCard.defaultProps = {
   className: '',
   hoverCardClassName: '',
+  anchorClassName: '',
   label: '',
   as: '',
   href: ''

package/lib-esm/ui/index.js

@@ -5,6 +5,7 @@ export { EmptySet } from './empty-set';
 export { FileName } from './file-name';
 export { Filters } from './filters';
 export { HorizontalBarChart } from './horizontal-bar-chart';
+export { HoverCard } from './hover-card';
 export { Icon } from './icon';
 export { Input } from './input';
 export { Loader } from './loader';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.0.0-rc.7",
+  "version": "4.0.3",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -36,10 +36,10 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/cli": "7.18.6",
-    "@babel/core": "7.18.6",
+    "@babel/cli": "7.18.9",
+    "@babel/core": "7.18.9",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/preset-env": "7.18.6",
+    "@babel/preset-env": "7.18.9",
     "@babel/preset-react": "7.18.6",
     "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
     "@storybook/addon-essentials": "6.5.9",
@@ -54,10 +54,10 @@
     "babel-jest": "28.1.3",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
-    "chromatic": "6.7.0",
+    "chromatic": "6.7.1",
     "classnames": "2.3.1",
     "colormap": "2.3.2",
-    "core-js": "3.23.4",
+    "core-js": "3.24.0",
     "cross-env": "7.0.3",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
@@ -85,12 +85,12 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.0.0-rc.7",
+    "@bundle-stats/utils": "^4.0.3",
     "ariakit": "^2.0.0-next.33",
     "date-fns": "^2.28.0",
     "modern-css-reset": "^1.4.0",
     "query-string": "^7.1.0",
     "use-query-params": "^1.2.3"
   },
-  "gitHead": "90c1cf0f7dd95326140e4184ac72b4baeeab8df1"
+  "gitHead": "6129f97b9277d81fb45839ab14425a240afc002d"
 }

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

@@ -69,9 +69,9 @@ const getFilters = ({ compareMode, filters }) => ({
       label: 'Chunk',
       defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`, true),
     },
-    [ASSET_FILTERS.ASSET]: {
-      label: 'Asset',
-      defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ASSET}`, true),
+    [ASSET_FILTERS.OTHER]: {
+      label: 'Other',
+      defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`, true),
     },
   },
   [ASSET_FILE_TYPE]: {

package/src/components/bundle-assets/bundle-assets.utils.js

@@ -59,7 +59,7 @@ export const getRowFilter = (filters) => (item) => {
       (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`] && item.isEntry) ||
       (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`] && item.isInitial) ||
       (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`] && item.isChunk) ||
-      (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ASSET}`] && item.isAsset)
+      (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`] && item.isAsset)
     )
   ) {
     return false;

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

@@ -18,7 +18,7 @@ export const MetricsTableTitle = (props) => {
       <FlexStack space="xxxsmall" className={css.title}>
         <span>{title}</span>
         {(popoverInfo || popoverHref) && (
-          <HoverCard label={<Icon glyph="help" />} className={css.hoverCard}>
+          <HoverCard label={<Icon glyph="help" />} anchorClassName={css.anchor}>
             <Stack space="xxxsmall">
               {popoverInfo && <p>{popoverInfo}</p>}
               {popoverHref && (

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

@@ -2,14 +2,14 @@
 }
 
 .title {
-  color: var(--color-text-light);
   align-items: center;
+  color: var(--color-text-light);
   font-weight: bold;
   text-transform: uppercase;
 }
 
-.hoverCard {
-  line-height: 1;
+.anchor {
+  display: block;
 }
 
 .info {

package/src/components/total-size-type-title/total-size-type-title.jsx

@@ -11,9 +11,9 @@ import { HoverCard } from '../../ui/hover-card';
 import css from './total-size-type-title.module.css';
 
 export const TotalSizeTypeTitle = ({ className }) => (
-  <FlexStack space="xxxsmall" className={cx(css.title, className)}>
-    <span>{I18N.ASSET_TOTALS}</span>
-    <HoverCard label={<Icon glyph="help" />}>
+  <FlexStack space="xxxsmall" className={cx(css.root, className)}>
+    <span className={css.text}>{I18N.ASSET_TOTALS}</span>
+    <HoverCard label={<Icon glyph="help" />} anchorClassName={css.anchor}>
       <Stack space="xxxsmall">
         <p>{I18N.ASSET_TOTALS_INFO}</p>
         <p>

package/src/components/total-size-type-title/total-size-type-title.module.css

@@ -1,11 +1,19 @@
-.title {
+.root {
   color: var(--color-text-light);
+  align-items: center;
+}
+
+.text {
   font-weight: bold;
   font-size: var(--size-medium);
   line-height: var(--space-medium);
   text-transform: uppercase;
 }
 
+.anchor {
+  display: block;
+}
+
 .readMoreLink {
   appearance: none;
   background: none;

package/src/i18n.js

@@ -15,9 +15,9 @@ export default {
   ASSETS_INFO: 'Asset size - the size of the file produced by webpack',
   ASSET_TOTALS_INFO: 'The total size of the assets produced by webpack by type',
   MODULES_INFO:
-    'Module size - module file size before any transformation(ex: babel, typescript) or before any production optimization(ex: terser minification)',
+    'Module size - module source size before any production optimization(ex: terser minification)',
   PACKAGES_INFO:
-    "Package size - the total package's module size before any transformation(ex: babel, typescript) or before any production optimization(ex: terser minification)",
+    "Package size - the total package's module size before any production optimization(ex: terser minification)",
 
   RESET_FILTERS: 'Reset filters',
   VIEW_ALL: 'View all entries',

package/src/ui/hover-card/hover-card.jsx

@@ -24,7 +24,7 @@ const resolveComponent = (as, href) => {
 };
 
 export const HoverCard = (props) => {
-  const { className, hoverCardClassName, href, as, label, children } = props;
+  const { className, anchorClassName, hoverCardClassName, href, as, label, children } = props;
   const state = useHovercardState({ gutter: 8 });
   const hoverCardProps = useHovercard({ state, portal: true });
 
@@ -37,7 +37,12 @@ export const HoverCard = (props) => {
 
   return (
     <div className={cx(css.root, className)}>
-      <HovercardAnchor state={state} href={href} className={css.anchor} as={Component}>
+      <HovercardAnchor
+        state={state}
+        href={href}
+        className={cx(css.anchor, anchorClassName)}
+        as={Component}
+      >
         {label}
       </HovercardAnchor>
       <Hovercard
@@ -59,6 +64,8 @@ HoverCard.propTypes = {
   className: PropTypes.string,
   /** Adopted child class name for hover card */
   hoverCardClassName: PropTypes.string,
+  /** Adopted child class name for anchor */
+  anchorClassName: PropTypes.string,
   /** Anchor label */
   label: PropTypes.node,
   /** Anchor href */
@@ -72,6 +79,7 @@ HoverCard.propTypes = {
 HoverCard.defaultProps = {
   className: '',
   hoverCardClassName: '',
+  anchorClassName: '',
   label: '',
   as: '',
   href: '',

package/src/ui/index.js

@@ -5,6 +5,7 @@ export { EmptySet } from './empty-set';
 export { FileName } from './file-name';
 export { Filters } from './filters';
 export { HorizontalBarChart } from './horizontal-bar-chart';
+export { HoverCard } from './hover-card';
 export { Icon } from './icon';
 export { Input } from './input';
 export { Loader } from './loader';