@bundle-stats/ui 4.1.5-alpha.0 → 4.1.5-alpha.1

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

@@ -1,110 +1,77 @@
-import _map from "lodash/map";
-import _uniqBy from "lodash/uniqBy";
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { MODULE_FILTERS, getModuleChunkFilters, getModuleSourceTypeFilters, getModuleFileTypeFilters } from '@bundle-stats/utils';
+import uniqBy from 'lodash/uniqBy';
+import { MODULE_FILTERS, getModuleChunkFilters, getModuleSourceTypeFilters, getModuleFileTypeFilters, } from '@bundle-stats/utils';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 import { useRowsFilter } from '../../hooks/rows-filter';
 import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
 import { BundleModules as BundleModulesComponent } from './bundle-modules';
-import { addRowSourceFlag, getRowFilter, getCustomSort, useModuleFilterByChunk } from './bundle-modules.utils';
+import { addRowSourceFlag, getRowFilter, getCustomSort, useModuleFilterByChunk, } from './bundle-modules.utils';
 import { SORT_BY } from './bundle-modules.constants';
-export const BundleModules = props => {
-  const {
-    jobs,
-    filters,
-    search,
-    setState,
-    sortBy,
-    direction,
-    ...restProps
-  } = props;
-  const chunks = _uniqBy(jobs.map(job => {
-    var _job$meta, _job$meta$webpack;
-    return (job == null ? void 0 : (_job$meta = job.meta) == null ? void 0 : (_job$meta$webpack = _job$meta.webpack) == null ? void 0 : _job$meta$webpack.chunks) || [];
-  }).flat(), _ref => {
-    let {
-      id
-    } = _ref;
-    return id;
-  });
-  const chunkIds = _map(chunks, 'id');
-  const {
-    defaultFilters,
-    allEntriesFilters
-  } = useMemo(() => ({
-    defaultFilters: {
-      changed: (jobs == null ? void 0 : jobs.length) > 1,
-      ...getModuleSourceTypeFilters(true),
-      ...getModuleChunkFilters(chunkIds, true),
-      ...getModuleFileTypeFilters(true),
-      [MODULE_FILTERS.DUPLICATED]: false
-    },
-    allEntriesFilters: {
-      changed: false,
-      ...getModuleSourceTypeFilters(true),
-      ...getModuleChunkFilters(chunkIds, true),
-      ...getModuleFileTypeFilters(true),
-      [MODULE_FILTERS.DUPLICATED]: false
-    }
-  }), [jobs]);
-  const searchParams = useSearchParams({
-    search,
-    filters,
-    defaultFilters,
-    allEntriesFilters,
-    setState
-  });
-  const filteredJobsByChunkIds = useModuleFilterByChunk({
-    jobs,
-    filters: searchParams.filters,
-    chunkIds
-  });
-  const {
-    rows,
-    totalRowCount
-  } = useMemo(() => {
-    const result = webpack.compareBySection.modules(filteredJobsByChunkIds, [addRowSourceFlag]);
-    return {
-      rows: result,
-      totalRowCount: result.length
-    };
-  }, [filteredJobsByChunkIds]);
-  const filteredRows = useRowsFilter({
-    rows,
-    searchPattern: searchParams.searchPattern,
-    filters: searchParams.filters,
-    getRowFilter
-  });
-  const sortParams = useRowsSort({
-    rows: filteredRows,
-    sortFields: SORT_BY,
-    sortBy,
-    sortDirection: direction,
-    getCustomSort
-  });
-  return /*#__PURE__*/React.createElement(BundleModulesComponent, _extends({
-    jobs: jobs,
-    chunks: chunks
-  }, restProps, searchParams, sortParams, {
-    totalRowCount: totalRowCount
-  }));
+export const BundleModules = (props) => {
+    const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
+    const chunks = uniqBy(jobs.map((job) => { var _a, _b; return ((_b = (_a = job === null || job === void 0 ? void 0 : job.meta) === null || _a === void 0 ? void 0 : _a.webpack) === null || _b === void 0 ? void 0 : _b.chunks) || []; }).flat(), ({ id }) => id);
+    const chunkIds = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ id }) => id);
+    const { defaultFilters, allEntriesFilters } = useMemo(() => ({
+        defaultFilters: {
+            changed: (jobs === null || jobs === void 0 ? void 0 : jobs.length) > 1,
+            ...getModuleSourceTypeFilters(true),
+            ...getModuleChunkFilters(chunkIds, true),
+            ...getModuleFileTypeFilters(true),
+            [MODULE_FILTERS.DUPLICATED]: false,
+        },
+        allEntriesFilters: {
+            changed: false,
+            ...getModuleSourceTypeFilters(true),
+            ...getModuleChunkFilters(chunkIds, true),
+            ...getModuleFileTypeFilters(true),
+            [MODULE_FILTERS.DUPLICATED]: false,
+        },
+    }), [jobs]);
+    const searchParams = useSearchParams({
+        search,
+        filters,
+        defaultFilters,
+        allEntriesFilters,
+        setState,
+    });
+    const filteredJobsByChunkIds = useModuleFilterByChunk({
+        jobs,
+        filters: searchParams.filters,
+        chunkIds,
+    });
+    const { rows, totalRowCount } = useMemo(() => {
+        const result = webpack.compareBySection.modules(filteredJobsByChunkIds, [addRowSourceFlag]);
+        return { rows: result, totalRowCount: result.length };
+    }, [filteredJobsByChunkIds]);
+    const filteredRows = useRowsFilter({
+        rows,
+        searchPattern: searchParams.searchPattern,
+        filters: searchParams.filters,
+        getRowFilter,
+    });
+    const sortParams = useRowsSort({
+        rows: filteredRows,
+        sortFields: SORT_BY,
+        sortBy,
+        sortDirection: direction,
+        getCustomSort,
+    });
+    return (React.createElement(BundleModulesComponent, { jobs: jobs, chunks: chunks, ...restProps, ...searchParams, ...sortParams, totalRowCount: totalRowCount }));
 };
 BundleModules.propTypes = {
-  jobs: PropTypes.arrayOf(PropTypes.object).isRequired,
-  // eslint-disable-line react/forbid-prop-types
-  filters: PropTypes.object,
-  // eslint-disable-line react/forbid-prop-types
-  search: PropTypes.string,
-  sortBy: PropTypes.string,
-  direction: PropTypes.string,
-  setState: PropTypes.func.isRequired
+    jobs: PropTypes.arrayOf(PropTypes.object).isRequired,
+    filters: PropTypes.object,
+    search: PropTypes.string,
+    sortBy: PropTypes.string,
+    direction: PropTypes.string,
+    setState: PropTypes.func.isRequired,
 };
 BundleModules.defaultProps = {
-  filters: undefined,
-  search: undefined,
-  sortBy: undefined,
-  direction: undefined
-};
+    filters: undefined,
+    search: undefined,
+    sortBy: undefined,
+    direction: undefined,
+};
+//# sourceMappingURL=index.js.map

package/lib-esm/components/bundle-modules/index.js.map

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

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

@@ -2,16 +2,17 @@ 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'
-  }
-};
+    [SORT_BY_NAME]: {
+        label: 'Name',
+        defaultDirection: 'asc',
+    },
+    [SORT_BY_DELTA]: {
+        label: 'Delta',
+        defaultDirection: 'desc',
+    },
+    [SORT_BY_SIZE]: {
+        label: 'Size',
+        defaultDirection: 'desc',
+    },
+};
+//# sourceMappingURL=bundle-packages.constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bundle-packages.constants.js","sourceRoot":"","sources":["../../../src/components/bundle-packages/bundle-packages.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-packages/bundle-packages.js

@@ -1,8 +1,7 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { PACKAGE_FILTERS, PACKAGES_SEPARATOR, PACKAGE_ID_SEPARATOR, getBundleModulesBySearch, getBundlePackagesByNameComponentLink } from '@bundle-stats/utils';
+import { PACKAGE_FILTERS, PACKAGES_SEPARATOR, PACKAGE_ID_SEPARATOR, getBundleModulesBySearch, getBundlePackagesByNameComponentLink, } from '@bundle-stats/utils';
 import config from '../../config.json';
 import I18N from '../../i18n';
 import { Stack } from '../../layout/stack';
@@ -20,276 +19,144 @@ import { MetricsTableSearch } from '../metrics-table-search';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import css from './bundle-packages.module.css';
-const getDropdownFilters = _ref => {
-  let {
-    compareMode,
-    filters
-  } = _ref;
-  return {
+const getDropdownFilters = ({ compareMode, filters }) => ({
     [PACKAGE_FILTERS.CHANGED]: {
-      label: 'Changed',
-      defaultValue: filters[PACKAGE_FILTERS.CHANGED],
-      disabled: !compareMode
+        label: 'Changed',
+        defaultValue: filters[PACKAGE_FILTERS.CHANGED],
+        disabled: !compareMode,
     },
     [PACKAGE_FILTERS.DUPLICATE]: {
-      label: 'Duplicate',
-      defaultValue: filters[PACKAGE_FILTERS.DUPLICATE]
-    }
-  };
-};
-const PackagePopoverContent = _ref2 => {
-  let {
-    name,
-    fullName,
-    path,
-    duplicate,
-    CustomComponentLink
-  } = _ref2;
-  const fallbackPackagePath = `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}`;
-  const normalizedPackagePath = `${path || fallbackPackagePath}/`;
-  const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
-  return /*#__PURE__*/React.createElement(Stack, {
-    space: "xsmall",
-    className: css.packageHoverCard
-  }, /*#__PURE__*/React.createElement(Stack, {
-    space: "xxxsmall"
-  }, /*#__PURE__*/React.createElement("h3", {
-    className: css.packageHoverCardTitle
-  }, normalizedName, packageId && /*#__PURE__*/React.createElement("span", {
-    className: css.packageHoverCardTitleIndex
-  }, `${PACKAGE_ID_SEPARATOR}${packageId}`)), /*#__PURE__*/React.createElement("p", {
-    className: css.packageHoverCardPath
-  }, /*#__PURE__*/React.createElement(FileName, {
-    className: css.packageHoverCardPathValue,
-    name: normalizedPackagePath
-  }))), /*#__PURE__*/React.createElement("ul", {
-    className: css.packageHoverCardList
-  }, /*#__PURE__*/React.createElement("li", {
-    className: css.packageHoverCardItem
-  }, /*#__PURE__*/React.createElement("a", {
-    href: `https://www.npmjs.com/package/${normalizedName}`,
-    target: "_blank",
-    rel: "noreferrer"
-  }, "npmjs.com")), /*#__PURE__*/React.createElement("li", {
-    className: css.packageHoverCardItem
-  }, /*#__PURE__*/React.createElement("a", {
-    href: `https://bundlephobia.com/result?p=${normalizedName}`,
-    target: "_blank",
-    rel: "noreferrer"
-  }, "bundlephobia.com"))), /*#__PURE__*/React.createElement(Stack, {
-    space: "xxxsmall",
-    className: css.packageHoverCardActions
-  }, duplicate && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CustomComponentLink, getBundlePackagesByNameComponentLink(normalizedName), "View all duplicate instances")), /*#__PURE__*/React.createElement(CustomComponentLink, getBundleModulesBySearch(normalizedPackagePath), "Search modules by package path")));
+        label: 'Duplicate',
+        defaultValue: filters[PACKAGE_FILTERS.DUPLICATE],
+    },
+});
+const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponentLink }) => {
+    const fallbackPackagePath = `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}`;
+    const normalizedPackagePath = `${path || fallbackPackagePath}/`;
+    const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
+    return (React.createElement(Stack, { space: "xsmall", className: css.packageHoverCard },
+        React.createElement(Stack, { space: "xxxsmall" },
+            React.createElement("h3", { className: css.packageHoverCardTitle },
+                normalizedName,
+                packageId && (React.createElement("span", { className: css.packageHoverCardTitleIndex }, `${PACKAGE_ID_SEPARATOR}${packageId}`))),
+            React.createElement("p", { className: css.packageHoverCardPath },
+                React.createElement(FileName, { className: css.packageHoverCardPathValue, name: normalizedPackagePath }))),
+        React.createElement("ul", { className: css.packageHoverCardList },
+            React.createElement("li", { className: css.packageHoverCardItem },
+                React.createElement("a", { href: `https://www.npmjs.com/package/${normalizedName}`, target: "_blank", rel: "noreferrer" }, "npmjs.com")),
+            React.createElement("li", { className: css.packageHoverCardItem },
+                React.createElement("a", { href: `https://bundlephobia.com/result?p=${normalizedName}`, target: "_blank", rel: "noreferrer" }, "bundlephobia.com"))),
+        React.createElement(Stack, { space: "xxxsmall", className: css.packageHoverCardActions },
+            duplicate && (React.createElement("div", null,
+                React.createElement(CustomComponentLink, { ...getBundlePackagesByNameComponentLink(normalizedName) }, "View all duplicate instances"))),
+            React.createElement(CustomComponentLink, { ...getBundleModulesBySearch(normalizedPackagePath) }, "Search modules by package path"))));
 };
 PackagePopoverContent.propTypes = {
-  name: PropTypes.string.isRequired,
-  path: PropTypes.string,
-  fullName: PropTypes.string.isRequired,
-  duplicate: PropTypes.bool.isRequired,
-  CustomComponentLink: PropTypes.elementType.isRequired
+    name: PropTypes.string.isRequired,
+    path: PropTypes.string,
+    fullName: PropTypes.string.isRequired,
+    duplicate: PropTypes.bool.isRequired,
+    CustomComponentLink: PropTypes.elementType.isRequired,
 };
 PackagePopoverContent.defaultProps = {
-  path: ''
+    path: '',
 };
-const PackageName = _ref3 => {
-  let {
-    packageName,
-    path,
-    showDuplicateFlag,
-    row,
-    CustomComponentLink
-  } = _ref3;
-  const [showHoverCard, setHoverCard] = useState(false);
-  const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
-  const label = useMemo(() => /*#__PURE__*/React.createElement(React.Fragment, null, showDuplicateFlag && row.duplicate && /*#__PURE__*/React.createElement(Tag, {
-    className: css.packageNameTagDuplicate,
-    title: "Duplicate package",
-    kind: Tag.KINDS.DANGER,
-    size: Tag.SIZES.SMALL
-  }), /*#__PURE__*/React.createElement("span", {
-    className: css.packageNameLabel
-  }, packageName)), [packageName, showDuplicateFlag, row]);
-  if (!showHoverCard) {
-    return /*#__PURE__*/React.createElement("span", {
-      className: css.packageName,
-      onMouseEnter: handleOnMouseEnter
-    }, label);
-  }
-  return /*#__PURE__*/React.createElement(HoverCard, {
-    className: css.packageName,
-    label: /*#__PURE__*/React.createElement("span", {
-      className: css.packageName
-    }, label)
-  }, /*#__PURE__*/React.createElement(PackagePopoverContent, {
-    name: packageName,
-    path: path,
-    fullName: row.label,
-    duplicate: row.duplicate,
-    CustomComponentLink: CustomComponentLink
-  }));
+const PackageName = ({ packageName, path, showDuplicateFlag, row, CustomComponentLink }) => {
+    const [showHoverCard, setHoverCard] = useState(false);
+    const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
+    const label = useMemo(() => (React.createElement(React.Fragment, null,
+        showDuplicateFlag && row.duplicate && (React.createElement(Tag, { className: css.packageNameTagDuplicate, title: "Duplicate package", kind: Tag.KINDS.DANGER, size: Tag.SIZES.SMALL })),
+        React.createElement("span", { className: css.packageNameLabel }, packageName))), [packageName, showDuplicateFlag, row]);
+    if (!showHoverCard) {
+        return (React.createElement("span", { className: css.packageName, onMouseEnter: handleOnMouseEnter }, label));
+    }
+    return (React.createElement(HoverCard, { className: css.packageName, label: React.createElement("span", { className: css.packageName }, label) },
+        React.createElement(PackagePopoverContent, { name: packageName, path: path, fullName: row.label, duplicate: row.duplicate, CustomComponentLink: CustomComponentLink })));
 };
 PackageName.propTypes = {
-  packageName: PropTypes.string.isRequired,
-  path: PropTypes.string.isRequired,
-  showDuplicateFlag: PropTypes.bool.isRequired,
-  row: PropTypes.shape({
-    label: PropTypes.string,
-    duplicate: PropTypes.bool,
-    runs: PropTypes.arrayOf(PropTypes.shape({
-      path: PropTypes.string
-    })).isRequired
-  }).isRequired,
-  CustomComponentLink: PropTypes.elementType.isRequired
+    packageName: PropTypes.string.isRequired,
+    path: PropTypes.string.isRequired,
+    showDuplicateFlag: PropTypes.bool.isRequired,
+    row: PropTypes.shape({
+        label: PropTypes.string,
+        duplicate: PropTypes.bool,
+        runs: PropTypes.arrayOf(PropTypes.shape({
+            path: PropTypes.string,
+        })).isRequired,
+    }).isRequired,
+    CustomComponentLink: PropTypes.elementType.isRequired,
 };
-const RowHeader = _ref4 => {
-  let {
-    row,
-    CustomComponentLink
-  } = _ref4;
-  const packageNames = row.label.split(PACKAGES_SEPARATOR);
-  const {
-    path
-  } = row.runs[0] || {};
-  return /*#__PURE__*/React.createElement("span", {
-    className: css.packageNames
-  }, packageNames.map((packageName, index) => /*#__PURE__*/React.createElement(PackageName, {
-    packageName: packageName,
-    path: path
-    // Render duplicate flag only for the last entry
-    ,
-    showDuplicateFlag: index === packageNames.length - 1,
-    row: row,
-    CustomComponentLink: CustomComponentLink
-  })));
+const RowHeader = ({ row, CustomComponentLink }) => {
+    const packageNames = row.label.split(PACKAGES_SEPARATOR);
+    const { path } = row.runs[0] || {};
+    return (React.createElement("span", { className: css.packageNames }, packageNames.map((packageName, index) => (React.createElement(PackageName, { packageName: packageName, path: path, showDuplicateFlag: index === packageNames.length - 1, row: row, CustomComponentLink: CustomComponentLink })))));
 };
 RowHeader.propTypes = {
-  row: PropTypes.shape({
-    label: PropTypes.string,
-    duplicate: PropTypes.bool,
-    runs: PropTypes.arrayOf(PropTypes.shape({
-      path: PropTypes.string
-    })).isRequired
-  }).isRequired,
-  CustomComponentLink: PropTypes.elementType.isRequired
+    row: PropTypes.shape({
+        label: PropTypes.string,
+        duplicate: PropTypes.bool,
+        runs: PropTypes.arrayOf(PropTypes.shape({
+            path: PropTypes.string,
+        })).isRequired,
+    }).isRequired,
+    CustomComponentLink: PropTypes.elementType.isRequired,
 };
-export const BundlePackages = props => {
-  const {
-    className,
-    jobs,
-    items,
-    updateFilters,
-    resetFilters,
-    resetAllFilters,
-    totalRowCount,
-    filters,
-    sortFields,
-    sort,
-    updateSort,
-    search,
-    updateSearch,
-    hasActiveFilters,
-    customComponentLink: CustomComponentLink
-  } = props;
-  const dropdownFilters = useMemo(() => getDropdownFilters({
-    compareMode: (jobs == null ? void 0 : jobs.length) > 1,
-    filters
-  }), [jobs, filters]);
-  const metricsTableTitle = useMemo(() => /*#__PURE__*/React.createElement(MetricsTableTitle, {
-    title: I18N.PACKAGES,
-    info: `${items.length}/${totalRowCount}`,
-    popoverInfo: I18N.PACKAGES_INFO,
-    popoverHref: config.documentation.packages
-  }), [items, totalRowCount]);
-  const renderRowHeader = useCallback(row => /*#__PURE__*/React.createElement(RowHeader, {
-    row: row,
-    CustomComponentLink: CustomComponentLink
-  }), [CustomComponentLink]);
-  const emptyMessage = useMemo(() => /*#__PURE__*/React.createElement(EmptySet, {
-    resources: "packages",
-    filtered: totalRowCount !== 0,
-    handleResetFilters: resetFilters,
-    handleViewAll: resetAllFilters
-  }), [totalRowCount, resetFilters, resetAllFilters]);
-  return /*#__PURE__*/React.createElement("section", {
-    className: cx(css.root, className)
-  }, /*#__PURE__*/React.createElement(Toolbar, {
-    className: css.toolbar,
-    renderActions: _ref5 => {
-      let {
-        actionClassName
-      } = _ref5;
-      return /*#__PURE__*/React.createElement(FlexStack, {
-        space: "xxsmall",
-        className: cx(css.dropdown, actionClassName)
-      }, /*#__PURE__*/React.createElement(SortDropdown, _extends({
-        fields: sortFields
-      }, sort, {
-        onChange: updateSort
-      })), /*#__PURE__*/React.createElement(MetricsTableOptions, {
-        handleViewAll: resetAllFilters,
-        handleResetFilters: resetFilters
-      }));
-    }
-  }, /*#__PURE__*/React.createElement(FlexStack, {
-    space: "xxsmall"
-  }, /*#__PURE__*/React.createElement(MetricsTableSearch, {
-    className: css.toolbarSearch,
-    placeholder: "Search by name",
-    search: search,
-    updateSearch: updateSearch
-  }), /*#__PURE__*/React.createElement(Filters, {
-    filters: dropdownFilters,
-    label: `Filters (${items.length}/${totalRowCount})`,
-    onChange: updateFilters,
-    hasActiveFilters: hasActiveFilters
-  }))), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(MetricsTable, {
-    runs: jobs,
-    items: items,
-    emptyMessage: emptyMessage,
-    renderRowHeader: renderRowHeader,
-    showHeaderSum: true,
-    title: metricsTableTitle
-  })));
+export const BundlePackages = (props) => {
+    const { className, jobs, items, updateFilters, resetFilters, resetAllFilters, totalRowCount, filters, sortFields, sort, updateSort, search, updateSearch, hasActiveFilters, customComponentLink: CustomComponentLink, } = props;
+    const dropdownFilters = useMemo(() => getDropdownFilters({ compareMode: (jobs === null || jobs === void 0 ? void 0 : jobs.length) > 1, filters }), [jobs, filters]);
+    const metricsTableTitle = useMemo(() => (React.createElement(MetricsTableTitle, { title: I18N.PACKAGES, info: `${items.length}/${totalRowCount}`, popoverInfo: I18N.PACKAGES_INFO, popoverHref: config.documentation.packages })), [items, totalRowCount]);
+    const renderRowHeader = useCallback((row) => React.createElement(RowHeader, { row: row, CustomComponentLink: CustomComponentLink }), [CustomComponentLink]);
+    const emptyMessage = useMemo(() => (React.createElement(EmptySet, { resources: "packages", filtered: totalRowCount !== 0, handleResetFilters: resetFilters, handleViewAll: resetAllFilters })), [totalRowCount, resetFilters, resetAllFilters]);
+    return (React.createElement("section", { className: cx(css.root, className) },
+        React.createElement(Toolbar, { className: css.toolbar, renderActions: ({ actionClassName }) => (React.createElement(FlexStack, { space: "xxsmall", className: cx(css.dropdown, actionClassName) },
+                React.createElement(SortDropdown, { fields: sortFields, ...sort, onChange: updateSort }),
+                React.createElement(MetricsTableOptions, { handleViewAll: resetAllFilters, handleResetFilters: resetFilters }))) },
+            React.createElement(FlexStack, { space: "xxsmall" },
+                React.createElement(MetricsTableSearch, { className: css.toolbarSearch, placeholder: "Search by name", search: search, updateSearch: updateSearch }),
+                React.createElement(Filters, { filters: dropdownFilters, label: `Filters (${items.length}/${totalRowCount})`, onChange: updateFilters, hasActiveFilters: hasActiveFilters }))),
+        React.createElement("main", null,
+            React.createElement(MetricsTable, { runs: jobs, items: items, emptyMessage: emptyMessage, renderRowHeader: renderRowHeader, showHeaderSum: true, title: metricsTableTitle }))));
 };
 BundlePackages.defaultProps = {
-  className: '',
-  totalRowCount: 0,
-  hasActiveFilters: false,
-  customComponentLink: ComponentLink
+    className: '',
+    totalRowCount: 0,
+    hasActiveFilters: false,
+    customComponentLink: ComponentLink,
 };
 BundlePackages.propTypes = {
-  className: PropTypes.string,
-  jobs: PropTypes.arrayOf(PropTypes.shape({
-    internalBuildNumber: PropTypes.number
-  })).isRequired,
-  items: PropTypes.arrayOf(PropTypes.shape({
-    key: PropTypes.string,
-    label: PropTypes.string,
-    runs: PropTypes.arrayOf(PropTypes.shape({
-      displayValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-      displayDelta: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-    }))
-  })).isRequired,
-  updateFilters: PropTypes.func.isRequired,
-  resetFilters: PropTypes.func.isRequired,
-  resetAllFilters: PropTypes.func.isRequired,
-  totalRowCount: PropTypes.number,
-  filters: PropTypes.shape({
-    changed: PropTypes.bool
-  }).isRequired,
-  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
-  }).isRequired,
-  updateSort: PropTypes.func.isRequired,
-  search: PropTypes.string.isRequired,
-  updateSearch: PropTypes.func.isRequired,
-  customComponentLink: PropTypes.elementType
-};
+    className: PropTypes.string,
+    jobs: PropTypes.arrayOf(PropTypes.shape({
+        internalBuildNumber: PropTypes.number,
+    })).isRequired,
+    items: PropTypes.arrayOf(PropTypes.shape({
+        key: PropTypes.string,
+        label: PropTypes.string,
+        runs: PropTypes.arrayOf(PropTypes.shape({
+            displayValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+            displayDelta: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        })),
+    })).isRequired,
+    updateFilters: PropTypes.func.isRequired,
+    resetFilters: PropTypes.func.isRequired,
+    resetAllFilters: PropTypes.func.isRequired,
+    totalRowCount: PropTypes.number,
+    filters: PropTypes.shape({
+        changed: PropTypes.bool,
+    }).isRequired,
+    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,
+    }).isRequired,
+    updateSort: PropTypes.func.isRequired,
+    search: PropTypes.string.isRequired,
+    updateSearch: PropTypes.func.isRequired,
+    customComponentLink: PropTypes.elementType,
+};
+//# sourceMappingURL=bundle-packages.js.map