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

package/src/components/sort-button/sort-button.tsx

@@ -0,0 +1,108 @@
+import React, { useCallback } from 'react';
+import cx from 'classnames';
+
+import { SORT } from '../../constants';
+import type { SortAction } from '../../types';
+import { Icon } from '../../ui/icon';
+import { Tooltip } from '../../ui/tooltip';
+import css from './sort-button.module.css';
+
+interface SortInfo {
+  direction: string;
+  title: string;
+}
+
+const getToggleAction = (sort: SortAction, field: string, label: string): SortInfo => {
+  // Sort the column desc if not currently sorted
+  if (sort?.field !== field) {
+    return { direction: SORT.DESC, title: `Order ${label} descending` };
+  }
+
+  // Resort asc if the column is already sorted descending
+  if (sort?.direction === SORT.DESC) {
+    return { direction: SORT.ASC, title: `Order ${label} ascending` };
+  }
+
+  // Reset
+  return { direction: '', title: 'Reset order' };
+};
+
+const getAscAction = (label: string): SortInfo => {
+  return { direction: SORT.ASC, title: `Order ${label} ascending` };
+};
+
+const getDescAction = (label: string): SortInfo => {
+  return { direction: SORT.DESC, title: `Order ${label} descending` };
+};
+
+interface SortButtonProps {
+  fieldPath: string;
+  fieldName: string;
+  label: string;
+  sort: SortAction;
+  updateSort: (params: SortAction) => void;
+}
+
+export const SortButton = (props: SortButtonProps & React.ComponentProps<'div'>) => {
+  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: SortInfo) => () => {
+      if (action.direction) {
+        updateSort({ field, direction: action.direction as SortAction['direction'] });
+        return;
+      }
+
+      updateSort({ field: '', direction: '' });
+    },
+    [field, updateSort, toggleAction],
+  );
+
+  return (
+    <div className={cx(css.root, className, isSorted && css.active)}>
+      <Tooltip
+        title={toggleAction.title}
+        as="button"
+        type="button"
+        onClick={getOrderOnClick(toggleAction)}
+        className={cx(css.button, css.toggle)}
+      >
+        {children}
+      </Tooltip>
+      <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,
+        )}
+      >
+        <Icon glyph={Icon.ICONS.CHEVRON_UP} size="small" className={css.directionIcon} />
+      </Tooltip>
+      <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,
+        )}
+      >
+        <Icon glyph={Icon.ICONS.CHEVRON_DOWN} size="small" className={css.directionIcon} />
+      </Tooltip>
+    </div>
+  );
+};

package/src/constants.js

@@ -35,3 +35,8 @@ export const METRICS_WEBPACK_MODULES = [
   'webpack.duplicateCode',
 ];
 export const METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];
+
+export const SORT = {
+  ASC: 'asc',
+  DESC: 'desc',
+};

package/src/hooks/rows-sort.ts

@@ -0,0 +1,48 @@
+import { useState, useMemo } from 'react';
+import get from 'lodash/get';
+import orderBy from 'lodash/orderBy';
+
+import type { SortAction } from '../types';
+import { SORT } from '../constants';
+
+interface UseRowsSortParams {
+  rows: Array<unknown>;
+  fieldPath: string;
+  direction: SortAction['direction'];
+  getCustomSort: (item: unknown) => Array<string | number | boolean>;
+}
+
+export const getSortFn =
+  (fieldPath: string, getCustomSort: UseRowsSortParams['getCustomSort']) => (item: unknown) => {
+    if (!fieldPath) {
+      return getCustomSort(item);
+    }
+
+    return Math.abs(get(item, fieldPath) || 0);
+  };
+
+export const useRowsSort = ({
+  rows,
+  fieldPath = 'runs[0].delta',
+  direction = 'desc',
+  getCustomSort,
+}: UseRowsSortParams) => {
+  const [sort, updateSort] = useState({ field: fieldPath, direction });
+
+  const orderedRows = useMemo(
+    () =>
+      orderBy(
+        rows,
+        getSortFn(sort.field, getCustomSort),
+        // if direction is empty (reset), sort asc
+        direction !== '' ? direction : (SORT.ASC as any),
+      ),
+    [rows, sort],
+  );
+
+  return {
+    sort,
+    updateSort,
+    items: orderedRows,
+  };
+};

package/src/types.d.ts

@@ -0,0 +1,4 @@
+export interface SortAction {
+  field: string;
+  direction: 'asc' | 'desc' | '';
+}

package/src/ui/icon/icon.tsx

@@ -7,6 +7,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/src/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/types/components/bundle-assets/bundle-assets.d.ts

@@ -40,7 +40,6 @@ export namespace BundleAssets {
         export { entryId_1 as entryId };
         let hasActiveFilters_1: PropTypes.Requireable<boolean>;
         export { hasActiveFilters_1 as hasActiveFilters };
-        export let sortFields: PropTypes.Validator<NonNullable<PropTypes.InferProps<{}>>>;
         export let search: PropTypes.Validator<string>;
         export let updateSearch: PropTypes.Validator<(...args: any[]) => any>;
         export let sort: PropTypes.Validator<NonNullable<PropTypes.InferProps<{

package/types/components/bundle-assets/bundle-assets.utils.d.ts

@@ -2,4 +2,4 @@ export function addRowAssetFlags(row: any): any;
 export function getIsNotPredictive(key: any, runs: any): any;
 export function addRowIsNotPredictive(row: any): any;
 export function getRowFilter(filters: any): (item: any) => boolean;
-export function getCustomSort(sortId: any): (item: any) => any;
+export function getCustomSort(item: any): any[];

package/types/components/bundle-modules/bundle-modules.d.ts

@@ -1,4 +1,4 @@
-export function BundleModules({ className, jobs, items, chunks, totalRowCount, updateFilters, resetFilters, resetAllFilters, filters, entryId, sortFields, sort, updateSort, search, updateSearch, hasActiveFilters, customComponentLink: CustomComponentLink, allItems, hideEntryInfo, }: {
+export function BundleModules({ className, jobs, items, chunks, totalRowCount, updateFilters, resetFilters, resetAllFilters, filters, entryId, sort, updateSort, search, updateSearch, hasActiveFilters, customComponentLink: CustomComponentLink, allItems, hideEntryInfo, }: {
     className: any;
     jobs: any;
     items: any;
@@ -9,7 +9,6 @@ export function BundleModules({ className, jobs, items, chunks, totalRowCount, u
     resetAllFilters: any;
     filters: any;
     entryId: any;
-    sortFields: any;
     sort: any;
     updateSort: any;
     search: any;
@@ -49,7 +48,6 @@ export namespace BundleModules {
         }>>>;
         let hasActiveFilters_1: PropTypes.Requireable<boolean>;
         export { hasActiveFilters_1 as hasActiveFilters };
-        export let sortFields: PropTypes.Validator<NonNullable<PropTypes.InferProps<{}>>>;
         export let sort: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
             sortBy: PropTypes.Requireable<string>;
             direction: PropTypes.Requireable<string>;

package/types/components/bundle-modules/bundle-modules.utils.d.ts

@@ -1,5 +1,5 @@
 export function addRowFlags(row: any): any;
-export function getCustomSort(sortBy: any): (item: any) => any;
+export function getCustomSort(item: any): any[];
 export function getRowFilter(filters: any): (row: any) => boolean;
 export function useModuleFilterByChunk({ jobs, filters, chunkIds }: {
     jobs: any;

package/types/components/bundle-packages/bundle-packages.d.ts

@@ -30,7 +30,6 @@ export namespace BundlePackages {
         }>>>;
         let hasActiveFilters_1: PropTypes.Requireable<boolean>;
         export { hasActiveFilters_1 as hasActiveFilters };
-        export let sortFields: PropTypes.Validator<NonNullable<PropTypes.InferProps<{}>>>;
         export let sort: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
             sortBy: PropTypes.Requireable<string>;
             direction: PropTypes.Requireable<string>;

package/types/components/bundle-packages/bundle-packages.utils.d.ts

@@ -1,4 +1,4 @@
 export function getDuplicatePackages(jobs: any): any[];
 export function getRowFilter(filters: any): (item: any) => boolean;
-export function getCustomSort(sortId: any): (item: any) => any;
+export function getCustomSort(item: any): any[];
 export function getAddRowDuplicateFlag(duplicateJobs: any): (row: any) => any;

package/types/components/metrics-table/metrics-table.d.ts

@@ -1,4 +1,4 @@
-export function MetricsTable({ className, renderRowHeader, runs, items, emptyMessage, showHeaderSum, headerRows, title, showAllItems, setShowAllItems, ...restProps }: {
+export function MetricsTable({ className, renderRowHeader, runs, items, emptyMessage, showHeaderSum, title, showAllItems, setShowAllItems, sort, updateSort, ...restProps }: {
     [x: string]: any;
     className: any;
     renderRowHeader: any;
@@ -6,10 +6,11 @@ export function MetricsTable({ className, renderRowHeader, runs, items, emptyMes
     items: any;
     emptyMessage: any;
     showHeaderSum: any;
-    headerRows: any;
     title: any;
     showAllItems: any;
     setShowAllItems: any;
+    sort: any;
+    updateSort: any;
 }): JSX.Element;
 export namespace MetricsTable {
     namespace defaultProps {
@@ -17,7 +18,6 @@ export namespace MetricsTable {
         function renderRowHeader(item: any): any;
         let emptyMessage: string;
         let showHeaderSum: boolean;
-        let headerRows: never[];
         let title: string;
     }
     namespace propTypes {
@@ -40,10 +40,6 @@ export namespace MetricsTable {
         export { emptyMessage_1 as emptyMessage };
         let showHeaderSum_1: PropTypes.Requireable<boolean>;
         export { showHeaderSum_1 as showHeaderSum };
-        let headerRows_1: PropTypes.Requireable<((NonNullable<PropTypes.ReactElementLike | PropTypes.InferProps<{
-            children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        }> | null | undefined> | null | undefined)[] | null | undefined)[]>;
-        export { headerRows_1 as headerRows };
         let title_1: PropTypes.Requireable<PropTypes.ReactElementLike>;
         export { title_1 as title };
     }

package/types/components/run-info/run-info.d.ts

@@ -6,6 +6,7 @@ export interface RunInfoProps {
     current?: React.ReactNode;
     baseline?: string;
     delta?: string;
+    deltaPercentage?: string;
     deltaType?: string;
     as?: React.ElementType;
     size?: 'small' | 'medium' | 'large';
@@ -13,4 +14,4 @@ export interface RunInfoProps {
     loading?: boolean;
     enhance?: boolean;
 }
-export declare const RunInfo: ({ className, title, titleHoverCard, titleTooltip, current, baseline, delta, deltaType, as: Component, size, showBaseline, loading, enhance, ...restProps }: RunInfoProps & React.ComponentProps<'div'>) => JSX.Element;
+export declare const RunInfo: ({ className, title, titleHoverCard, titleTooltip, current, baseline, delta, deltaPercentage, deltaType, as: Component, size, showBaseline, loading, enhance, ...restProps }: RunInfoProps & React.ComponentProps<'div'>) => JSX.Element;

package/types/components/sort-button/index.d.ts

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

package/types/components/sort-button/sort-button.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SortAction } from '../../types';
+interface SortButtonProps {
+    fieldPath: string;
+    fieldName: string;
+    label: string;
+    sort: SortAction;
+    updateSort: (params: SortAction) => void;
+}
+export declare const SortButton: (props: SortButtonProps & React.ComponentProps<'div'>) => JSX.Element;
+export {};

package/types/constants.d.ts

@@ -12,3 +12,7 @@ export const METRICS_WEBPACK_GENERAL: string[];
 export const METRICS_WEBPACK_ASSETS: string[];
 export const METRICS_WEBPACK_MODULES: string[];
 export const METRICS_WEBPACK_PACKAGES: string[];
+export namespace SORT {
+    let ASC: string;
+    let DESC: string;
+}

package/types/hooks/rows-sort.d.ts

@@ -1,18 +1,21 @@
-export function useRowsSort({ rows, sortFields, sortBy, sortDirection, getCustomSort, }: {
-    rows: any;
-    sortFields: any;
-    sortBy?: string | undefined;
-    sortDirection?: string | undefined;
-    getCustomSort: any;
-}): {
-    sortFields: any;
+/// <reference types="react" />
+import type { SortAction } from '../types';
+interface UseRowsSortParams {
+    rows: Array<unknown>;
+    fieldPath: string;
+    direction: SortAction['direction'];
+    getCustomSort: (item: unknown) => Array<string | number | boolean>;
+}
+export declare const getSortFn: (fieldPath: string, getCustomSort: UseRowsSortParams['getCustomSort']) => (item: unknown) => number | (string | number | boolean)[];
+export declare const useRowsSort: ({ rows, fieldPath, direction, getCustomSort, }: UseRowsSortParams) => {
     sort: {
         field: string;
-        direction: string;
+        direction: "" | "asc" | "desc";
     };
     updateSort: import("react").Dispatch<import("react").SetStateAction<{
         field: string;
-        direction: string;
+        direction: "" | "asc" | "desc";
     }>>;
-    items: any[];
+    items: unknown[];
 };
+export {};

package/types/ui/icon/icon.d.ts

@@ -3,6 +3,8 @@ declare const ICONS: {
     readonly ARROW: "arrow";
     readonly ARROW_RIGHT_CIRLCE: "arrow-right-circle";
     readonly CANCEL: "close";
+    readonly CHEVRON_DOWN: "chevron-down";
+    readonly CHEVRON_UP: "chevron-up";
     readonly CLOSE: "close";
     readonly CLOCK: "clock";
     readonly COMMIT: "commit";
@@ -34,6 +36,8 @@ export declare const Icon: {
         readonly ARROW: "arrow";
         readonly ARROW_RIGHT_CIRLCE: "arrow-right-circle";
         readonly CANCEL: "close";
+        readonly CHEVRON_DOWN: "chevron-down";
+        readonly CHEVRON_UP: "chevron-up";
         readonly CLOSE: "close";
         readonly CLOCK: "clock";
         readonly COMMIT: "commit";

package/types/ui/index.d.ts

@@ -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/components/bundle-assets/bundle-assets.constants.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SORT_BY = exports.SORT_BY_DELTA = exports.SORT_BY_SIZE = exports.SORT_BY_NAME = void 0;
-exports.SORT_BY_NAME = 'name';
-exports.SORT_BY_SIZE = 'size';
-exports.SORT_BY_DELTA = 'delta';
-exports.SORT_BY = {
-    [exports.SORT_BY_NAME]: {
-        label: 'Name',
-        defaultDirection: 'asc',
-    },
-    [exports.SORT_BY_DELTA]: {
-        label: 'Delta',
-        defaultDirection: 'desc',
-    },
-    [exports.SORT_BY_SIZE]: {
-        label: 'Size',
-        defaultDirection: 'desc',
-    },
-};
-//# sourceMappingURL=bundle-assets.constants.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"bundle-assets.constants.js","sourceRoot":"","sources":["../../../src/components/bundle-assets/bundle-assets.constants.js"],"names":[],"mappings":";;;AAAa,QAAA,YAAY,GAAG,MAAM,CAAC;AACtB,QAAA,YAAY,GAAG,MAAM,CAAC;AACtB,QAAA,aAAa,GAAG,OAAO,CAAC;AAExB,QAAA,OAAO,GAAG;IACrB,CAAC,oBAAY,CAAC,EAAE;QACd,KAAK,EAAE,MAAM;QACb,gBAAgB,EAAE,KAAK;KACxB;IACD,CAAC,qBAAa,CAAC,EAAE;QACf,KAAK,EAAE,OAAO;QACd,gBAAgB,EAAE,MAAM;KACzB;IACD,CAAC,oBAAY,CAAC,EAAE;QACd,KAAK,EAAE,MAAM;QACb,gBAAgB,EAAE,MAAM;KACzB;CACF,CAAC"}

package/lib/components/bundle-modules/bundle-modules.constants.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SORT_BY = exports.SORT_BY_DELTA = exports.SORT_BY_SIZE = exports.SORT_BY_NAME = void 0;
-exports.SORT_BY_NAME = 'name';
-exports.SORT_BY_SIZE = 'size';
-exports.SORT_BY_DELTA = 'delta';
-exports.SORT_BY = {
-    [exports.SORT_BY_NAME]: {
-        label: 'Name',
-        defaultDirection: 'asc',
-    },
-    [exports.SORT_BY_DELTA]: {
-        label: 'Delta',
-        defaultDirection: 'desc',
-    },
-    [exports.SORT_BY_SIZE]: {
-        label: 'Size',
-        defaultDirection: 'desc',
-    },
-};
-//# sourceMappingURL=bundle-modules.constants.js.map

package/lib/components/bundle-modules/bundle-modules.constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"bundle-modules.constants.js","sourceRoot":"","sources":["../../../src/components/bundle-modules/bundle-modules.constants.js"],"names":[],"mappings":";;;AAAa,QAAA,YAAY,GAAG,MAAM,CAAC;AACtB,QAAA,YAAY,GAAG,MAAM,CAAC;AACtB,QAAA,aAAa,GAAG,OAAO,CAAC;AAExB,QAAA,OAAO,GAAG;IACrB,CAAC,oBAAY,CAAC,EAAE;QACd,KAAK,EAAE,MAAM;QACb,gBAAgB,EAAE,KAAK;KACxB;IACD,CAAC,qBAAa,CAAC,EAAE;QACf,KAAK,EAAE,OAAO;QACd,gBAAgB,EAAE,MAAM;KACzB;IACD,CAAC,oBAAY,CAAC,EAAE;QACd,KAAK,EAAE,MAAM;QACb,gBAAgB,EAAE,MAAM;KACzB;CACF,CAAC"}

package/lib/components/bundle-packages/bundle-packages.constants.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SORT_BY = exports.SORT_BY_DELTA = exports.SORT_BY_SIZE = exports.SORT_BY_NAME = void 0;
-exports.SORT_BY_NAME = 'name';
-exports.SORT_BY_SIZE = 'size';
-exports.SORT_BY_DELTA = 'delta';
-exports.SORT_BY = {
-    [exports.SORT_BY_NAME]: {
-        label: 'Name',
-        defaultDirection: 'asc',
-    },
-    [exports.SORT_BY_DELTA]: {
-        label: 'Delta',
-        defaultDirection: 'desc',
-    },
-    [exports.SORT_BY_SIZE]: {
-        label: 'Size',
-        defaultDirection: 'desc',
-    },
-};
-//# sourceMappingURL=bundle-packages.constants.js.map

package/lib/components/bundle-packages/bundle-packages.constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"bundle-packages.constants.js","sourceRoot":"","sources":["../../../src/components/bundle-packages/bundle-packages.constants.js"],"names":[],"mappings":";;;AAAa,QAAA,YAAY,GAAG,MAAM,CAAC;AACtB,QAAA,YAAY,GAAG,MAAM,CAAC;AACtB,QAAA,aAAa,GAAG,OAAO,CAAC;AAExB,QAAA,OAAO,GAAG;IACrB,CAAC,oBAAY,CAAC,EAAE;QACd,KAAK,EAAE,MAAM;QACb,gBAAgB,EAAE,KAAK;KACxB;IACD,CAAC,qBAAa,CAAC,EAAE;QACf,KAAK,EAAE,OAAO;QACd,gBAAgB,EAAE,MAAM;KACzB;IACD,CAAC,oBAAY,CAAC,EAAE;QACd,KAAK,EAAE,MAAM;QACb,gBAAgB,EAAE,MAAM;KACzB;CACF,CAAC"}

package/lib/ui/sort-dropdown/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/sort-dropdown/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAAgC"}

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

@@ -1,101 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SortDropdown = void 0;
-const react_1 = __importStar(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
-const classnames_1 = __importDefault(require("classnames"));
-const dropdown_1 = require("../dropdown");
-const icon_1 = require("../icon");
-const sort_dropdown_module_css_1 = __importDefault(require("./sort-dropdown.module.css"));
-const Item = ({ as: Component, id, label, isActive, direction, defaultDirection, getButtonOnClick, ...restProps }) => {
-    const buttonProps = (0, react_1.useMemo)(() => {
-        let resolveNextDirection = defaultDirection;
-        if (isActive) {
-            resolveNextDirection = direction === 'asc' ? 'desc' : 'asc';
-        }
-        if (resolveNextDirection === 'desc') {
-            return {
-                className: sort_dropdown_module_css_1.default.itemAsc,
-                onClick: getButtonOnClick(id, 'desc'),
-                title: `Order data by ${label} descending`,
-            };
-        }
-        return {
-            onClick: getButtonOnClick(id, 'asc'),
-            title: `Order data by ${label} ascending`,
-        };
-    }, [isActive, direction, defaultDirection, id, label]);
-    return (react_1.default.createElement(Component, { ...restProps, ...buttonProps, isActive: isActive, className: (0, classnames_1.default)(sort_dropdown_module_css_1.default.item, isActive && sort_dropdown_module_css_1.default.itemActive, buttonProps.className) },
-        react_1.default.createElement(icon_1.Icon, { className: sort_dropdown_module_css_1.default.itemIcon, glyph: icon_1.Icon.ICONS.ARROW }),
-        react_1.default.createElement("span", { className: sort_dropdown_module_css_1.default.itemLabel }, label)));
-};
-Item.propTypes = {
-    className: prop_types_1.default.string,
-    as: prop_types_1.default.element.isRequired,
-    id: prop_types_1.default.string.isRequired,
-    label: prop_types_1.default.string.isRequired,
-    isActive: prop_types_1.default.bool.isRequired,
-    direction: prop_types_1.default.string.isRequired,
-    defaultDirection: prop_types_1.default.string.isRequired,
-    getButtonOnClick: prop_types_1.default.func.isRequired,
-};
-Item.defaultProps = {
-    className: '',
-};
-const SortDropdown = (props) => {
-    const { className, label, fields, field, direction, onChange } = props;
-    const rootClassName = (0, classnames_1.default)(sort_dropdown_module_css_1.default.root, className);
-    const customLabel = fields[field] ? `Ordered by ${fields[field].label}` : label;
-    return (react_1.default.createElement(dropdown_1.Dropdown, { className: rootClassName, label: customLabel, glyph: "sort", align: "right" }, ({ MenuItem, menu, menuItemClassName, menuItemActiveClassName }) => {
-        const getButtonOnClick = (newField, newDirection) => () => {
-            onChange({ field: newField, direction: newDirection });
-            menu.toggle();
-        };
-        return (react_1.default.createElement("div", { className: sort_dropdown_module_css_1.default.items }, Object.entries(fields).map(([key, item]) => (react_1.default.createElement(Item, { key: key, as: MenuItem, isActive: field === key, id: key, label: item.label, direction: direction, defaultDirection: item.defaultDirection, getButtonOnClick: getButtonOnClick })))));
-    }));
-};
-exports.SortDropdown = SortDropdown;
-exports.SortDropdown.defaultProps = {
-    className: '',
-    label: 'Order by',
-    onChange: () => { },
-    field: '',
-    direction: 'asc',
-};
-exports.SortDropdown.propTypes = {
-    className: prop_types_1.default.string,
-    label: prop_types_1.default.string,
-    fields: prop_types_1.default.shape({
-        [prop_types_1.default.string]: prop_types_1.default.string,
-    }).isRequired,
-    onChange: prop_types_1.default.func,
-    field: prop_types_1.default.string,
-    direction: prop_types_1.default.string,
-};
-//# sourceMappingURL=sort-dropdown.js.map

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

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

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

@@ -1,22 +0,0 @@
-.item {
-  display: flex;
-  align-items: center;
-}
-
-.itemIcon {
-  flex: 0 0 auto;
-  visibility: hidden;
-  margin-right: var(--space-xxxsmall);
-}
-
-.itemLabel {
-  flex: 1 1 100%;
-}
-
-.itemAsc .itemIcon {
-  transform: rotate(180deg);
-}
-
-.itemActive .itemIcon {
-  visibility: visible;
-}

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

@@ -1,18 +0,0 @@
-export const SORT_BY_NAME = 'name';
-export const SORT_BY_SIZE = 'size';
-export const SORT_BY_DELTA = 'delta';
-export const SORT_BY = {
-    [SORT_BY_NAME]: {
-        label: 'Name',
-        defaultDirection: 'asc',
-    },
-    [SORT_BY_DELTA]: {
-        label: 'Delta',
-        defaultDirection: 'desc',
-    },
-    [SORT_BY_SIZE]: {
-        label: 'Size',
-        defaultDirection: 'desc',
-    },
-};
-//# sourceMappingURL=bundle-assets.constants.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"bundle-assets.constants.js","sourceRoot":"","sources":["../../../src/components/bundle-assets/bundle-assets.constants.js"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC;AACnC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC;AACnC,MAAM,CAAC,MAAM,aAAa,GAAG,OAAO,CAAC;AAErC,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,CAAC,YAAY,CAAC,EAAE;QACd,KAAK,EAAE,MAAM;QACb,gBAAgB,EAAE,KAAK;KACxB;IACD,CAAC,aAAa,CAAC,EAAE;QACf,KAAK,EAAE,OAAO;QACd,gBAAgB,EAAE,MAAM;KACzB;IACD,CAAC,YAAY,CAAC,EAAE;QACd,KAAK,EAAE,MAAM;QACb,gBAAgB,EAAE,MAAM;KACzB;CACF,CAAC"}

package/lib-esm/components/bundle-modules/bundle-modules.constants.js

@@ -1,18 +0,0 @@
-export const SORT_BY_NAME = 'name';
-export const SORT_BY_SIZE = 'size';
-export const SORT_BY_DELTA = 'delta';
-export const SORT_BY = {
-    [SORT_BY_NAME]: {
-        label: 'Name',
-        defaultDirection: 'asc',
-    },
-    [SORT_BY_DELTA]: {
-        label: 'Delta',
-        defaultDirection: 'desc',
-    },
-    [SORT_BY_SIZE]: {
-        label: 'Size',
-        defaultDirection: 'desc',
-    },
-};
-//# sourceMappingURL=bundle-modules.constants.js.map