@bundle-stats/ui 4.4.2 → 4.5.0-beta.0

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

@@ -18,8 +18,10 @@
 }
 
 .info {
+  color: var(--color-text-light);
+  font-family: var(--font-family-fixed);
   font-size: var(--size-xsmall);
-  font-weight: normal;
+  font-weight: bold;
 }
 
 .readMoreLink {

package/lib-esm/components/sort-button/index.js

@@ -0,0 +1,2 @@
+export * from './sort-button';
+//# sourceMappingURL=index.js.map

package/lib-esm/components/sort-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/sort-button/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/lib-esm/components/sort-button/sort-button.js

@@ -0,0 +1,43 @@
+import React, { useCallback } from 'react';
+import cx from 'classnames';
+import { SORT } from '../../constants';
+import { Icon } from '../../ui/icon';
+import { Tooltip } from '../../ui/tooltip';
+import css from './sort-button.module.css';
+const getToggleAction = (sort, field, label) => {
+    if ((sort === null || sort === void 0 ? void 0 : sort.field) !== field) {
+        return { direction: SORT.DESC, title: `Order ${label} descending` };
+    }
+    if ((sort === null || sort === void 0 ? void 0 : sort.direction) === SORT.DESC) {
+        return { direction: SORT.ASC, title: `Order ${label} ascending` };
+    }
+    return { direction: '', title: 'Reset order' };
+};
+const getAscAction = (label) => {
+    return { direction: SORT.ASC, title: `Order ${label} ascending` };
+};
+const getDescAction = (label) => {
+    return { direction: SORT.DESC, title: `Order ${label} descending` };
+};
+export const SortButton = (props) => {
+    const { className = '', children, fieldPath, fieldName, label, sort, updateSort } = props;
+    const field = `${fieldPath}.${fieldName}`;
+    const toggleAction = getToggleAction(sort, field, label);
+    const ascAction = getAscAction(label);
+    const descAction = getDescAction(label);
+    const isSorted = sort.field === field;
+    const getOrderOnClick = useCallback((action) => () => {
+        if (action.direction) {
+            updateSort({ field, direction: action.direction });
+            return;
+        }
+        updateSort({ field: '', direction: '' });
+    }, [field, updateSort, toggleAction]);
+    return (React.createElement("div", { className: cx(css.root, className, isSorted && css.active) },
+        React.createElement(Tooltip, { title: toggleAction.title, as: "button", type: "button", onClick: getOrderOnClick(toggleAction), className: cx(css.button, css.toggle) }, children),
+        React.createElement(Tooltip, { title: ascAction.title, as: "button", type: "button", onClick: getOrderOnClick(ascAction), className: cx(css.button, css.direction, css.directionAsc, isSorted && sort.direction === SORT.ASC && css.directionActive) },
+            React.createElement(Icon, { glyph: Icon.ICONS.CHEVRON_UP, size: "small", className: css.directionIcon })),
+        React.createElement(Tooltip, { title: descAction.title, as: "button", type: "button", onClick: getOrderOnClick(descAction), className: cx(css.button, css.direction, css.directionDesc, isSorted && sort.direction === SORT.DESC && css.directionActive) },
+            React.createElement(Icon, { glyph: Icon.ICONS.CHEVRON_DOWN, size: "small", className: css.directionIcon }))));
+};
+//# sourceMappingURL=sort-button.js.map

package/lib-esm/components/sort-button/sort-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-button.js","sourceRoot":"","sources":["../../../src/components/sort-button/sort-button.tsx"],"names":[],"mappings":"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"}

package/lib-esm/components/sort-button/sort-button.module.css

@@ -0,0 +1,89 @@
+.root {
+  --icon-dimension: 15px;
+  display: inline-block;
+  margin: calc(0px - var(--space-xxxsmall));
+  margin-right: calc(0px - 1px - var(--icon-dimension));
+  border-radius: var(--radius-small);
+  position: relative;
+}
+
+.button {
+  appearance: none;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  transition: var(--transition-out);
+}
+
+.toggle {
+  padding: var(--space-xxxsmall);
+  padding-right: calc(1px + var(--icon-dimension));
+}
+
+.direction {
+  position: absolute;
+  padding: 2px;
+  display: block;
+  overflow: hidden;
+  right: -2px; /* compensate for the button padding */
+  color: var(--color-text-ultra-light);
+  transition: var(--transition-out);
+}
+
+.directionIcon {
+  display: block;
+  width: var(--icon-dimension);
+  height: var(--icon-dimension);
+}
+
+.directionActive {
+  color: var(--color-text);
+  transition: var(--transition-in);
+}
+
+.direction:hover,
+.direction:active,
+.direction:focus {
+  color: var(--color-text-dark);
+  transition: var(--transition-in);
+}
+
+.directionAsc {
+  padding-bottom: 0;
+  bottom: 50%;
+}
+
+.directionAsc .directionIcon {
+  transform: translateY(3px);
+}
+
+.directionDesc {
+  padding-top: 0;
+  top: 50%;
+}
+
+.directionDesc .directionIcon {
+  transform: translateY(-5px);
+}
+
+.root:hover,
+.root:active,
+.root:focus {
+  background: var(--color-outline);
+}
+
+.direction {
+  pointer-events: none;
+  opacity: 0;
+}
+
+.active .direction,
+.root:hover .direction,
+.root:active .direction,
+.root:focus .direction {
+  pointer-events: auto;
+  opacity: 1;
+  transition: var(--transition-in);
+}

package/lib-esm/constants.js

@@ -28,4 +28,8 @@ export const METRICS_WEBPACK_MODULES = [
     'webpack.duplicateCode',
 ];
 export const METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];
+export const SORT = {
+    ASC: 'asc',
+    DESC: 'desc',
+};
 //# sourceMappingURL=constants.js.map

package/lib-esm/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE3D,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,WAAW;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,QAAQ;IAChC,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM;IAC9B,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,OAAO;IAChC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,UAAU,CAAC,MAAM,CACzD,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC;IAClB,GAAG,GAAG;IACN,CAAC,gCAAgC,QAAQ,EAAE,CAAC,EAAE,QAAQ;CACvD,CAAC,EACF,EAAE,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,4BAA4B;IAC5B,4BAA4B;IAC5B,6BAA6B;IAC7B,2BAA2B;CAC5B,CAAC;AACF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,oBAAoB,EAAE,oBAAoB,CAAC,CAAC;AACnF,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,qBAAqB;IACrB,+BAA+B;IAC/B,uBAAuB;CACxB,CAAC;AACF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,sBAAsB,EAAE,gCAAgC,CAAC,CAAC"}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE3D,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,WAAW;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,QAAQ;IAChC,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM;IAC9B,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,OAAO;IAChC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,UAAU,CAAC,MAAM,CACzD,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC;IAClB,GAAG,GAAG;IACN,CAAC,gCAAgC,QAAQ,EAAE,CAAC,EAAE,QAAQ;CACvD,CAAC,EACF,EAAE,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,4BAA4B;IAC5B,4BAA4B;IAC5B,6BAA6B;IAC7B,2BAA2B;CAC5B,CAAC;AACF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,oBAAoB,EAAE,oBAAoB,CAAC,CAAC;AACnF,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,qBAAqB;IACrB,+BAA+B;IAC/B,uBAAuB;CACxB,CAAC;AACF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,sBAAsB,EAAE,gCAAgC,CAAC,CAAC;AAEnG,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;CACb,CAAC"}

package/lib-esm/hooks/rows-sort.js

@@ -1,10 +1,17 @@
 import { useState, useMemo } from 'react';
+import get from 'lodash/get';
 import orderBy from 'lodash/orderBy';
-export const useRowsSort = ({ rows, sortFields, sortBy = 'size', sortDirection = 'desc', getCustomSort, }) => {
-    const [sort, updateSort] = useState({ field: sortBy, direction: sortDirection });
-    const orderedRows = useMemo(() => orderBy(rows, getCustomSort(sort.field), sort.direction), [rows, sort]);
+import { SORT } from '../constants';
+export const getSortFn = (fieldPath, getCustomSort) => (item) => {
+    if (!fieldPath) {
+        return getCustomSort(item);
+    }
+    return Math.abs(get(item, fieldPath) || 0);
+};
+export const useRowsSort = ({ rows, fieldPath = 'runs[0].delta', direction = 'desc', getCustomSort, }) => {
+    const [sort, updateSort] = useState({ field: fieldPath, direction });
+    const orderedRows = useMemo(() => orderBy(rows, getSortFn(sort.field, getCustomSort), direction !== '' ? direction : SORT.ASC), [rows, sort]);
     return {
-        sortFields,
         sort,
         updateSort,
         items: orderedRows,

package/lib-esm/hooks/rows-sort.js.map

@@ -1 +1 @@
-{"version":3,"file":"rows-sort.js","sourceRoot":"","sources":["../../src/hooks/rows-sort.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,OAAO,MAAM,gBAAgB,CAAC;AAErC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,IAAI,EACJ,UAAU,EACV,MAAM,GAAG,MAAM,EACf,aAAa,GAAG,MAAM,EACtB,aAAa,GACd,EAAE,EAAE;IACH,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC,CAAC;IAEjF,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,EAC9D,CAAC,IAAI,EAAE,IAAI,CAAC,CACb,CAAC;IAEF,OAAO;QACL,UAAU;QACV,IAAI;QACJ,UAAU;QACV,KAAK,EAAE,WAAW;KACnB,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"rows-sort.js","sourceRoot":"","sources":["../../src/hooks/rows-sort.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,GAAG,MAAM,YAAY,CAAC;AAC7B,OAAO,OAAO,MAAM,gBAAgB,CAAC;AAGrC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AASpC,MAAM,CAAC,MAAM,SAAS,GACpB,CAAC,SAAiB,EAAE,aAAiD,EAAE,EAAE,CAAC,CAAC,IAAa,EAAE,EAAE;IAC1F,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC;KAC5B;IAED,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;AAC7C,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,IAAI,EACJ,SAAS,GAAG,eAAe,EAC3B,SAAS,GAAG,MAAM,EAClB,aAAa,GACK,EAAE,EAAE;IACtB,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC;IAErE,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CACH,OAAO,CACL,IAAI,EACJ,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,EAEpC,SAAS,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAE,IAAI,CAAC,GAAW,CACjD,EACH,CAAC,IAAI,EAAE,IAAI,CAAC,CACb,CAAC;IAEF,OAAO;QACL,IAAI;QACJ,UAAU;QACV,KAAK,EAAE,WAAW;KACnB,CAAC;AACJ,CAAC,CAAC"}

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

@@ -5,6 +5,8 @@ const ICONS = {
     ARROW: 'arrow',
     ARROW_RIGHT_CIRLCE: 'arrow-right-circle',
     CANCEL: 'close',
+    CHEVRON_DOWN: 'chevron-down',
+    CHEVRON_UP: 'chevron-up',
     CLOSE: 'close',
     CLOCK: 'clock',
     COMMIT: 'commit',

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

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/ui/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAEpC,MAAM,KAAK,GAAG;IACZ,KAAK,EAAE,OAAO;IACd,kBAAkB,EAAE,oBAAoB;IACxC,MAAM,EAAE,OAAO;IACf,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,aAAa,EAAE,eAAe;IAC9B,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,aAAa,EAAE,eAAe;IAC9B,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;CACV,CAAC;AAEX,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAUX,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAA+C,EAAE,EAAE;IACtE,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,GAAG,MAAM,EAAE,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAElG,OAAO,CACL,oBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,KAAM,SAAS;QACrE,6BAAK,SAAS,EAAE,GAAG,CAAC,IAAI;YACtB,6BAAK,SAAS,EAAE,IAAI,KAAK,EAAE,GAAI,CAC3B,CACI,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;AAEnB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;AAC7B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;AAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;AAC7B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC"}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/ui/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAEpC,MAAM,KAAK,GAAG;IACZ,KAAK,EAAE,OAAO;IACd,kBAAkB,EAAE,oBAAoB;IACxC,MAAM,EAAE,OAAO;IACf,YAAY,EAAE,cAAc;IAC5B,UAAU,EAAE,YAAY;IACxB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,aAAa,EAAE,eAAe;IAC9B,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,aAAa,EAAE,eAAe;IAC9B,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;CACV,CAAC;AAEX,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAUX,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAA+C,EAAE,EAAE;IACtE,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,GAAG,MAAM,EAAE,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAElG,OAAO,CACL,oBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,KAAM,SAAS;QACrE,6BAAK,SAAS,EAAE,GAAG,CAAC,IAAI;YACtB,6BAAK,SAAS,EAAE,IAAI,KAAK,EAAE,GAAI,CAC3B,CACI,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;AAEnB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;AAC7B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;AAC/B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;AAC7B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC"}

package/lib-esm/ui/index.js

@@ -10,7 +10,6 @@ export { Icon } from './icon';
 export { Input } from './input';
 export { Loader } from './loader';
 export { Skeleton } from './skeleton';
-export { SortDropdown } from './sort-dropdown';
 export { Table } from './table';
 export { Tabs } from './tabs';
 export { Tag } from './tag';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.4.2",
+  "version": "4.5.0-beta.0",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -76,11 +76,11 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.4.2",
+    "@bundle-stats/utils": "^4.5.0-beta.0",
     "ariakit": "2.0.0-next.44",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.3",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "0c227cc1fbf945e5e710f27ad77c70e7c3507bca"
+  "gitHead": "f39dbde3efbbb3457bb99536c94ad06830f8ee88"
 }

package/src/assets/icons/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>

package/src/assets/icons/chevron-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up"><path d="m18 15-6-6-6 6"/></svg>

package/src/assets/icons.svg

@@ -1,20 +1,26 @@
 <svg width="0" height="0" style="position:absolute">
-<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg">
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="arrow" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 5v14M19 12l-7 7-7-7"/>
 </symbol>
-<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right-circle" viewBox="0 0 24 24" id="arrow-right-circle" xmlns="http://www.w3.org/2000/svg">
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="arrow-right-circle" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="10"/>
 <path d="M12 16l4-4-4-4M8 12h8"/>
 </symbol>
-<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock" id="clock" xmlns="http://www.w3.org/2000/svg">
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="chevron-down" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 9l6 6 6-6"/>
+</symbol>
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="chevron-up" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 15l-6-6-6 6"/>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="clock" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="10"/>
 <path d="M12 6v6l4 2"/>
 </symbol>
-<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle" viewBox="0 0 24 24" id="close" xmlns="http://www.w3.org/2000/svg">
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="close" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="10"/>
 <path d="M15 9l-6 6M9 9l6 6"/>
 </symbol>
-<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit" id="commit" xmlns="http://www.w3.org/2000/svg">
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="commit" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="4"/>
 <path d="M1.05 12H7M17.01 12h5.95"/>
 </symbol>
@@ -22,16 +28,16 @@
 <circle cx="12" cy="12" r="10"/>
 <path d="M12 8v4M12 16h.01"/>
 </symbol>
-<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link" viewBox="0 0 24 24" id="external-link" xmlns="http://www.w3.org/2000/svg">
+<symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="external-link" xmlns="http://www.w3.org/2000/svg">
 <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"/>
 </symbol>
-<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart" id="filter" xmlns="http://www.w3.org/2000/svg">
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="filter" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 20V10M18 20V4M6 20v-4"/>
 </symbol>
 <symbol viewBox="0 0 98 96" id="github" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0112.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/>
 </symbol>
-<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle" id="help" xmlns="http://www.w3.org/2000/svg">
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="help" xmlns="http://www.w3.org/2000/svg">
 <circle cx="12" cy="12" r="10"/>
 <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/>
 </symbol>
@@ -39,7 +45,7 @@
 <circle cx="12" cy="12" r="10"/>
 <path d="M12 16v-4M12 8h.01"/>
 </symbol>
-<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu" id="menu" xmlns="http://www.w3.org/2000/svg">
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="menu" xmlns="http://www.w3.org/2000/svg">
 <path d="M3 12h18M3 6h18M3 18h18"/>
 </symbol>
 <symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" id="more-vertical" xmlns="http://www.w3.org/2000/svg">
@@ -51,7 +57,7 @@
 <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"/>
 <path d="M0 0h24v24H0z" fill="none"/>
 </symbol>
-<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle" id="warning" xmlns="http://www.w3.org/2000/svg">
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="warning" xmlns="http://www.w3.org/2000/svg">
 <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01"/>
 </symbol>
 </svg>

package/src/assets/icons.svg.jsx

@@ -9,7 +9,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-arrow-down"
       id="arrow"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -21,7 +20,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-arrow-right-circle"
       viewBox="0 0 24 24"
       id="arrow-right-circle"
       xmlns="http://www.w3.org/2000/svg"
@@ -29,6 +27,30 @@ export const SvgIcons = (props) => (
       <circle cx="12" cy="12" r="10" />
       <path d="M12 16l4-4-4-4M8 12h8" />
     </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      viewBox="0 0 24 24"
+      id="chevron-down"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M6 9l6 6 6-6" />
+    </symbol>
+    <symbol
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      viewBox="0 0 24 24"
+      id="chevron-up"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M18 15l-6-6-6 6" />
+    </symbol>
     <symbol
       viewBox="0 0 24 24"
       fill="none"
@@ -36,7 +58,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-clock"
       id="clock"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -49,7 +70,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-x-circle"
       viewBox="0 0 24 24"
       id="close"
       xmlns="http://www.w3.org/2000/svg"
@@ -64,7 +84,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-git-commit"
       id="commit"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -90,7 +109,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-external-link"
       viewBox="0 0 24 24"
       id="external-link"
       xmlns="http://www.w3.org/2000/svg"
@@ -104,7 +122,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-bar-chart"
       id="filter"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -125,7 +142,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-help-circle"
       id="help"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -152,7 +168,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-menu"
       id="menu"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -183,7 +198,6 @@ export const SvgIcons = (props) => (
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      class="feather feather-alert-triangle"
       id="warning"
       xmlns="http://www.w3.org/2000/svg"
     >

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

@@ -19,7 +19,6 @@ import { FileName } from '../../ui/file-name';
 import { HoverCard } from '../../ui/hover-card';
 import { Tag } from '../../ui/tag';
 import { Filters } from '../../ui/filters';
-import { SortDropdown } from '../../ui/sort-dropdown';
 import { EmptySet } from '../../ui/empty-set';
 import { Toolbar } from '../../ui/toolbar';
 import { AssetInfo } from '../asset-info';
@@ -170,7 +169,6 @@ export const BundleAssets = (props) => {
     filters,
     entryId,
     hasActiveFilters,
-    sortFields,
     sort,
     updateSort,
     search,
@@ -221,7 +219,6 @@ export const BundleAssets = (props) => {
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-              <SortDropdown fields={sortFields} {...sort} onChange={updateSort} />
               <MetricsTableOptions
                 handleViewAll={resetAllFilters}
                 handleResetFilters={resetFilters}
@@ -252,6 +249,8 @@ export const BundleAssets = (props) => {
             emptyMessage={emptyMessage}
             showHeaderSum
             title={metricsTableTitle}
+            sort={sort}
+            updateSort={updateSort}
           />
         </main>
       </section>
@@ -313,12 +312,6 @@ BundleAssets.propTypes = {
   }).isRequired,
   entryId: PropTypes.string,
   hasActiveFilters: PropTypes.bool,
-  sortFields: PropTypes.shape({
-    [PropTypes.string]: PropTypes.shape({
-      label: PropTypes.string,
-      defaultDirection: PropTypes.bool,
-    }),
-  }).isRequired,
   search: PropTypes.string.isRequired,
   updateSearch: PropTypes.func.isRequired,
   sort: PropTypes.shape({

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

@@ -1,7 +1,5 @@
 import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, getFileType } from '@bundle-stats/utils';
 
-import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-assets.constants';
-
 export const addRowAssetFlags = (row) => {
   const { runs } = row;
 
@@ -72,25 +70,11 @@ export const getRowFilter = (filters) => (item) => {
   return true;
 };
 
-export const getCustomSort = (sortId) => (item) => {
-  if (sortId === SORT_BY_NAME) {
-    return item.key;
-  }
-
-  if (sortId === SORT_BY_DELTA) {
-    return item?.runs?.[0]?.delta ? Math.abs(item.runs[0].delta) : 0;
-  }
-
-  if (sortId === SORT_BY_SIZE) {
-    return item?.runs?.[0]?.value || 0;
-  }
-
-  return [
-    !item.isNotPredictive,
-    !item.changed,
-    !item.isInitial,
-    !item.isEntry,
-    !item.isChunk,
-    item.key,
-  ];
-};
+export const getCustomSort = (item) => [
+  !item.isNotPredictive,
+  !item.changed,
+  !item.isInitial,
+  !item.isEntry,
+  !item.isChunk,
+  item.key,
+];

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

@@ -12,7 +12,6 @@ import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
 import { BundleAssets as BundleAssetsComponent } from './bundle-assets';
 import { addRowAssetFlags, addRowIsNotPredictive, getRowFilter, getCustomSort } from './bundle-assets.utils';
-import { SORT_BY } from './bundle-assets.constants';
 
 export const BundleAssets = (props) => {
   const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
@@ -55,7 +54,6 @@ export const BundleAssets = (props) => {
 
   const sortParams = useRowsSort({
     rows: filteredRows,
-    sortFields: SORT_BY,
     sortBy,
     sortDirection: direction,
     getCustomSort,

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

@@ -21,7 +21,6 @@ import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
-import { SortDropdown } from '../../ui/sort-dropdown';
 import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
 import { MetricsTable } from '../metrics-table';
@@ -125,7 +124,6 @@ export const BundleModules = ({
   resetAllFilters,
   filters,
   entryId,
-  sortFields,
   sort,
   updateSort,
   search,
@@ -179,12 +177,6 @@ export const BundleModules = ({
           className={css.toolbar}
           renderActions={({ actionClassName }) => (
             <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-              <SortDropdown
-                className={css.tableDropdown}
-                fields={sortFields}
-                onChange={updateSort}
-                {...sort}
-              />
               <MetricsTableOptions
                 handleViewAll={resetAllFilters}
                 handleResetFilters={resetFilters}
@@ -216,6 +208,8 @@ export const BundleModules = ({
           emptyMessage={emptyMessage}
           showHeaderSum
           title={metricsTableTitle}
+          sort={sort}
+          updateSort={updateSort}
         />
       </div>
       {entryId && (
@@ -277,12 +271,6 @@ BundleModules.propTypes = {
 
   hasActiveFilters: PropTypes.bool,
 
-  sortFields: PropTypes.shape({
-    [PropTypes.string]: PropTypes.shape({
-      label: PropTypes.string,
-      defaultDirection: PropTypes.bool,
-    }),
-  }).isRequired,
   sort: PropTypes.shape({
     sortBy: PropTypes.string,
     direction: PropTypes.string,

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

@@ -11,8 +11,6 @@ import {
   getModuleSourceFileType,
 } from '@bundle-stats/utils';
 
-import { SORT_BY_NAME, SORT_BY_SIZE, SORT_BY_DELTA } from './bundle-modules.constants';
-
 export const addRowFlags = (row) => {
   const { key, runs } = row;
 
@@ -28,21 +26,7 @@ export const addRowFlags = (row) => {
   return row;
 };
 
-export const getCustomSort = (sortBy) => (item) => {
-  if (sortBy === SORT_BY_NAME) {
-    return item.key;
-  }
-
-  if (sortBy === SORT_BY_SIZE) {
-    return item?.runs?.[0]?.value || 0;
-  }
-
-  if (sortBy === SORT_BY_DELTA) {
-    return item?.runs?.[0]?.delta ? Math.abs(item.runs[0].delta) : 0;
-  }
-
-  return [!item.changed, item.key];
-};
+export const getCustomSort = (item) => [!item.changed, item.key];
 
 export const getRowFilter = (filters) => (row) => {
   // Skip not changed rows