@bundle-stats/ui 3.2.0-beta.1 → 3.2.1-beta.3

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

@@ -1,16 +1,8 @@
 import _map from "lodash/map";
 import _get from "lodash/get";
 
-var _PropTypes$shape;
-
 function _extends() { _extends = Object.assign || 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); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -33,37 +25,38 @@ import { MetricsTableSearch } from '../metrics-table-search';
 import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import css from './bundle-assets.module.css';
-var RUN_TITLE_CURRENT = 'Current';
-var RUN_TITLE_BASELINE = 'Baseline';
-var RUNS_LABELS = [RUN_TITLE_CURRENT, RUN_TITLE_BASELINE];
-
-var getFileTypeFilters = function getFileTypeFilters(filters) {
-  return Object.entries(FILE_TYPE_LABELS).map(function (_ref) {
-    var _ref2;
+const RUN_TITLE_CURRENT = 'Current';
+const RUN_TITLE_BASELINE = 'Baseline';
+const RUNS_LABELS = [RUN_TITLE_CURRENT, RUN_TITLE_BASELINE];
 
-    var id = _ref[0],
-        label = _ref[1];
-    return _ref2 = {}, _ref2[id] = {
-      label: label,
-      defaultValue: _get(filters, ASSET_FILE_TYPE + "." + id, true)
-    }, _ref2;
-  }).reduce(function (agg, current) {
-    return _objectSpread(_objectSpread({}, agg), current);
-  }, {});
-};
+const getFileTypeFilters = filters => Object.entries(FILE_TYPE_LABELS).map(_ref => {
+  let [id, label] = _ref;
+  return {
+    [id]: {
+      label,
+      defaultValue: _get(filters, `${ASSET_FILE_TYPE}.${id}`, true)
+    }
+  };
+}).reduce((agg, current) => ({ ...agg,
+  ...current
+}), {});
 
-var TooltipNotPredictive = function TooltipNotPredictive(_ref3) {
-  var runs = _ref3.runs;
+const TooltipNotPredictive = _ref2 => {
+  let {
+    runs
+  } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
     className: css.tooltipNotPredictive
   }, /*#__PURE__*/React.createElement("p", {
     className: css.tooltipNotPredictiveText
   }, "File name is the same, but the size has changed:"), /*#__PURE__*/React.createElement("table", {
     className: css.tooltipTable
-  }, /*#__PURE__*/React.createElement("tr", null, runs.map(function (_ref4, index) {
-    var name = _ref4.name,
-        value = _ref4.value;
-    var key = index;
+  }, /*#__PURE__*/React.createElement("tr", null, runs.map((_ref3, index) => {
+    let {
+      name,
+      value
+    } = _ref3;
+    const key = index;
     return /*#__PURE__*/React.createElement("tr", {
       key: key
     }, /*#__PURE__*/React.createElement("th", null, RUNS_LABELS[index]), /*#__PURE__*/React.createElement("td", null, name), /*#__PURE__*/React.createElement("td", null, value));
@@ -78,17 +71,21 @@ TooltipNotPredictive.propTypes = {
 
 };
 
-var getRenderRowHeader = function getRenderRowHeader(_ref5) {
-  var labels = _ref5.labels,
-      CustomComponentLink = _ref5.CustomComponentLink,
-      chunks = _ref5.chunks;
-  return function (item) {
-    var label = item.label,
-        isNotPredictive = item.isNotPredictive,
-        runs = item.runs,
-        isChunk = item.isChunk,
-        isEntry = item.isEntry,
-        isInitial = item.isInitial;
+const getRenderRowHeader = _ref4 => {
+  let {
+    labels,
+    CustomComponentLink,
+    chunks
+  } = _ref4;
+  return item => {
+    const {
+      label,
+      isNotPredictive,
+      runs,
+      isChunk,
+      isEntry,
+      isInitial
+    } = item;
     return /*#__PURE__*/React.createElement(Popover, {
       label: /*#__PURE__*/React.createElement(FileName, {
         name: label
@@ -123,49 +120,51 @@ var getRenderRowHeader = function getRenderRowHeader(_ref5) {
   };
 };
 
-export var BundleAssets = function BundleAssets(props) {
-  var _jobs$, _jobs$$meta, _jobs$$meta$webpack, _ASSET_ENTRY_TYPE, _ref7;
+export const BundleAssets = props => {
+  var _jobs$, _jobs$$meta, _jobs$$meta$webpack;
 
-  var className = props.className,
-      jobs = props.jobs,
-      items = props.items,
-      updateFilters = props.updateFilters,
-      resetFilters = props.resetFilters,
-      resetAllFilters = props.resetAllFilters,
-      totalRowCount = props.totalRowCount,
-      filters = props.filters,
-      hasActiveFilters = props.hasActiveFilters,
-      sortItems = props.sortItems,
-      sort = props.sort,
-      updateSort = props.updateSort,
-      search = props.search,
-      updateSearch = props.updateSearch,
-      CustomComponentLink = props.customComponentLink;
-  var emptyMessage = /*#__PURE__*/React.createElement(EmptySet, {
+  const {
+    className,
+    jobs,
+    items,
+    updateFilters,
+    resetFilters,
+    resetAllFilters,
+    totalRowCount,
+    filters,
+    hasActiveFilters,
+    sortFields,
+    sort,
+    updateSort,
+    search,
+    updateSearch,
+    customComponentLink: CustomComponentLink
+  } = props;
+  const emptyMessage = /*#__PURE__*/React.createElement(EmptySet, {
     resources: "assets",
     filtered: totalRowCount !== 0,
     handleResetFilters: resetFilters,
     handleViewAll: resetAllFilters
   });
-  var chunks = ((_jobs$ = jobs[0]) == null ? void 0 : (_jobs$$meta = _jobs$.meta) == null ? void 0 : (_jobs$$meta$webpack = _jobs$$meta.webpack) == null ? void 0 : _jobs$$meta$webpack.chunks) || [];
-  var renderRowHeader = useMemo(function () {
-    return getRenderRowHeader({
-      labels: _map(jobs, 'label'),
-      CustomComponentLink: CustomComponentLink,
-      chunks: chunks
-    });
-  }, [jobs, chunks]);
+  const chunks = ((_jobs$ = jobs[0]) == null ? void 0 : (_jobs$$meta = _jobs$.meta) == null ? void 0 : (_jobs$$meta$webpack = _jobs$$meta.webpack) == null ? void 0 : _jobs$$meta$webpack.chunks) || [];
+  const renderRowHeader = useMemo(() => getRenderRowHeader({
+    labels: _map(jobs, 'label'),
+    CustomComponentLink,
+    chunks
+  }), [jobs, chunks]);
   return /*#__PURE__*/React.createElement("section", {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: css.toolbar,
-    renderActions: function renderActions(_ref6) {
-      var actionClassName = _ref6.actionClassName;
+    renderActions: _ref5 => {
+      let {
+        actionClassName
+      } = _ref5;
       return /*#__PURE__*/React.createElement(FlexStack, {
         space: "xsmall",
         className: cx(css.dropdown, actionClassName)
       }, /*#__PURE__*/React.createElement(SortDropdown, _extends({
-        items: sortItems
+        fields: sortFields
       }, sort, {
         onChange: updateSort
       })), /*#__PURE__*/React.createElement(MetricsTableOptions, {
@@ -180,27 +179,36 @@ export var BundleAssets = function BundleAssets(props) {
     updateSearch: updateSearch
   }), /*#__PURE__*/React.createElement(Filters, {
     className: css.toolbarFilters,
-    filters: (_ref7 = {}, _ref7[ASSET_FILTERS.CHANGED] = {
-      label: 'Changed',
-      defaultValue: filters[ASSET_FILTERS.CHANGED],
-      disabled: jobs.length <= 1
-    }, _ref7[ASSET_ENTRY_TYPE] = (_ASSET_ENTRY_TYPE = {
-      label: 'Entry type'
-    }, _ASSET_ENTRY_TYPE[ASSET_FILTERS.ENTRY] = {
-      label: 'Entry',
-      defaultValue: _get(filters, ASSET_ENTRY_TYPE + "." + ASSET_FILTERS.ENTRY, true)
-    }, _ASSET_ENTRY_TYPE[ASSET_FILTERS.INITIAL] = {
-      label: 'Initial',
-      defaultValue: _get(filters, ASSET_ENTRY_TYPE + "." + ASSET_FILTERS.INITIAL, true)
-    }, _ASSET_ENTRY_TYPE[ASSET_FILTERS.CHUNK] = {
-      label: 'Chunk',
-      defaultValue: _get(filters, ASSET_ENTRY_TYPE + "." + ASSET_FILTERS.CHUNK, true)
-    }, _ASSET_ENTRY_TYPE[ASSET_FILTERS.ASSET] = {
-      label: 'Asset',
-      defaultValue: _get(filters, ASSET_ENTRY_TYPE + "." + ASSET_FILTERS.ASSET, true)
-    }, _ASSET_ENTRY_TYPE), _ref7[ASSET_FILE_TYPE] = _objectSpread({
-      label: 'File type'
-    }, getFileTypeFilters(filters)), _ref7),
+    filters: {
+      [ASSET_FILTERS.CHANGED]: {
+        label: 'Changed',
+        defaultValue: filters[ASSET_FILTERS.CHANGED],
+        disabled: jobs.length <= 1
+      },
+      [ASSET_ENTRY_TYPE]: {
+        label: 'Entry type',
+        [ASSET_FILTERS.ENTRY]: {
+          label: 'Entry',
+          defaultValue: _get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`, true)
+        },
+        [ASSET_FILTERS.INITIAL]: {
+          label: 'Initial',
+          defaultValue: _get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`, true)
+        },
+        [ASSET_FILTERS.CHUNK]: {
+          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_FILE_TYPE]: {
+        label: 'File type',
+        ...getFileTypeFilters(filters)
+      }
+    },
     hasActiveFilters: hasActiveFilters,
     onChange: updateFilters
   }))), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(MetricsTable, {
@@ -211,7 +219,7 @@ export var BundleAssets = function BundleAssets(props) {
     showHeaderSum: true,
     title: /*#__PURE__*/React.createElement(MetricsTableTitle, {
       title: I18N.ASSETS,
-      info: "(" + items.length + "/" + totalRowCount + ")",
+      info: `(${items.length}/${totalRowCount})`,
       popoverInfo: I18N.ASSETS_INFO,
       popoverHref: config.documentation.assets
     })
@@ -251,10 +259,12 @@ BundleAssets.propTypes = {
     changed: PropTypes.bool
   }).isRequired,
   hasActiveFilters: PropTypes.bool,
-  sortItems: PropTypes.shape((_PropTypes$shape = {}, _PropTypes$shape[PropTypes.string] = PropTypes.shape({
-    label: PropTypes.string,
-    defaultDirection: PropTypes.bool
-  }), _PropTypes$shape)).isRequired,
+  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/lib-esm/components/bundle-assets/bundle-assets.stories.js

@@ -7,73 +7,68 @@ import baselineStats from '../../../__mocks__/webpack-stats.baseline.json';
 import currentStats from '../../../__mocks__/webpack-stats.current.json';
 import { getWrapperDecorator } from '../../stories';
 import { BundleAssets } from '.';
-var JOBS = createJobs([{
+const JOBS = createJobs([{
   webpack: currentStats
 }, {
   webpack: baselineStats
 }]);
-var currentJob = JOBS[0],
-    baselineJob = JOBS[1];
-var stories = storiesOf('Components/BundleAssets', module);
-stories.addDecorator(getWrapperDecorator());
-stories.add('default', function () {
-  return /*#__PURE__*/React.createElement(BundleAssets, {
-    jobs: [baselineJob]
-  });
-});
-stories.add('multiple jobs', function () {
-  return /*#__PURE__*/React.createElement(BundleAssets, {
-    jobs: JOBS
-  });
-});
-stories.add('custom filters', function () {
-  var _ref;
+const [currentJob, baselineJob] = JOBS;
+
+const setState = params => console.info(params);
 
-  return /*#__PURE__*/React.createElement(BundleAssets, {
-    jobs: JOBS,
-    filters: (_ref = {}, _ref[ASSET_ENTRY_TYPE + "." + ASSET_FILTERS.ENTRY] = true, _ref[ASSET_FILE_TYPE + "." + FILE_TYPE_JS] = true, _ref)
-  });
-});
-var JOBS_EMPTY_BASELINE = createJobs([{
+const stories = storiesOf('Components/BundleAssets', module);
+stories.addDecorator(getWrapperDecorator());
+stories.add('default', () => /*#__PURE__*/React.createElement(BundleAssets, {
+  jobs: [baselineJob],
+  setState: setState
+}));
+stories.add('multiple jobs', () => /*#__PURE__*/React.createElement(BundleAssets, {
+  jobs: JOBS,
+  setState: setState
+}));
+stories.add('custom filters', () => /*#__PURE__*/React.createElement(BundleAssets, {
+  jobs: JOBS,
+  filters: {
+    [`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`]: true,
+    [`${ASSET_FILE_TYPE}.${FILE_TYPE_JS}`]: true
+  },
+  setState: setState
+}));
+const JOBS_EMPTY_BASELINE = createJobs([{
   webpack: currentStats
 }, null]);
-stories.add('empty baseline', function () {
-  return /*#__PURE__*/React.createElement(BundleAssets, {
-    jobs: JOBS_EMPTY_BASELINE
-  });
-});
-stories.add('no assets', function () {
-  return /*#__PURE__*/React.createElement(BundleAssets, {
-    jobs: JOBS.map(function (job) {
-      return _set(_merge({}, job), 'metrics.webpack.assets', {});
-    })
-  });
-});
-stories.add('empty filtered data', function () {
-  return /*#__PURE__*/React.createElement(BundleAssets, {
-    jobs: [_set(_merge({}, currentJob), 'metrics.webpack.assets', {
-      'main.js': {
-        value: 100
-      }
-    }), _set(_merge({}, baselineJob), 'metrics.webpack.assets', {
-      'main.js': {
-        value: 100
-      }
-    })]
-  });
-});
-stories.add('not predictive', function () {
-  return /*#__PURE__*/React.createElement(BundleAssets, {
-    jobs: [_set(_merge({}, currentJob), 'metrics.webpack.assets', {
-      'static/js/not-predictive.js': {
-        name: 'static/js/not-predictive.93191a1.js',
-        value: 2989
-      }
-    }), _set(_merge({}, baselineJob), 'metrics.webpack.assets', {
-      'static/js/not-predictive.js': {
-        name: 'static/js/not-predictive.93191a1.js',
-        value: 2988
-      }
-    })]
-  });
-});
+stories.add('empty baseline', () => /*#__PURE__*/React.createElement(BundleAssets, {
+  jobs: JOBS_EMPTY_BASELINE,
+  setState: setState
+}));
+stories.add('no assets', () => /*#__PURE__*/React.createElement(BundleAssets, {
+  jobs: JOBS.map(job => _set(_merge({}, job), 'metrics.webpack.assets', {})),
+  setState: setState
+}));
+stories.add('empty filtered data', () => /*#__PURE__*/React.createElement(BundleAssets, {
+  jobs: [_set(_merge({}, currentJob), 'metrics.webpack.assets', {
+    'main.js': {
+      value: 100
+    }
+  }), _set(_merge({}, baselineJob), 'metrics.webpack.assets', {
+    'main.js': {
+      value: 100
+    }
+  })],
+  search: "vendors",
+  setState: setState
+}));
+stories.add('not predictive', () => /*#__PURE__*/React.createElement(BundleAssets, {
+  jobs: [_set(_merge({}, currentJob), 'metrics.webpack.assets', {
+    'static/js/not-predictive.js': {
+      name: 'static/js/not-predictive.93191a1.js',
+      value: 2989
+    }
+  }), _set(_merge({}, baselineJob), 'metrics.webpack.assets', {
+    'static/js/not-predictive.js': {
+      name: 'static/js/not-predictive.93191a1.js',
+      value: 2988
+    }
+  })],
+  setState: setState
+}));

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

@@ -1,22 +1,66 @@
-/**
- * Get a list of all chunkIds across assets and runs
- *
- * @param {Array<Object>} items
- * @return {Array<string|number>}
- */
-export var getAllChunkIds = function getAllChunkIds(items) {
-  return items.reduce(function (agg, item) {
-    var itemChunkIds = item.runs.map(function (run) {
-      return run == null ? void 0 : run.chunkId;
-    }).filter(function (chunkId) {
-      return typeof chunkId !== 'undefined';
-    });
-    return itemChunkIds.reduce(function (itemAgg, chunkId) {
-      if (itemAgg.includes(chunkId)) {
-        return itemAgg;
-      }
-
-      return [].concat(itemAgg, [chunkId]);
-    }, agg);
-  }, []);
+import _get from "lodash/get";
+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;
+  const isEntry = runs.map(run => run == null ? void 0 : run.isEntry).includes(true);
+  const isInitial = runs.map(run => run == null ? void 0 : run.isInitial).includes(true);
+  const isChunk = runs.map(run => run == null ? void 0 : run.isChunk).includes(true);
+  const isAsset = !(isEntry || isInitial || isChunk);
+  return { ...row,
+    isEntry,
+    isInitial,
+    isChunk,
+    isAsset
+  };
+};
+export const getIsNotPredictive = (key, runs) => runs.reduce((agg, current, index) => {
+  if (agg) {
+    return agg;
+  }
+
+  if (index + 1 === runs.length) {
+    return agg;
+  }
+
+  if (current && runs[index + 1] && current.delta !== 0 && key !== current.name && current.name === runs[index + 1].name) {
+    return true;
+  }
+
+  return agg;
+}, false);
+export const addRowIsNotPredictive = row => ({ ...row,
+  isNotPredictive: getIsNotPredictive(row.key, row.runs)
+});
+export const getRowFilter = filters => item => {
+  if (filters[ASSET_FILTERS.CHANGED] && !item.changed) {
+    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)) {
+    return false;
+  }
+
+  if (!filters[`${ASSET_FILE_TYPE}.${getFileType(item.key)}`]) {
+    return false;
+  }
+
+  return true;
+};
+export const getCustomSort = sortId => item => {
+  if (sortId === SORT_BY_NAME) {
+    return item.key;
+  }
+
+  if (sortId === SORT_BY_DELTA) {
+    return _get(item, 'runs[0].deltaPercentage', 0);
+  }
+
+  if (sortId === SORT_BY_SIZE) {
+    return _get(item, 'runs[0].value', 0);
+  }
+
+  return [!item.isNotPredictive, !item.changed, !item.isInitial, !item.isEntry, !item.isChunk, item.key];
 };

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

@@ -1,3 +1,90 @@
-import { enhance } from './bundle-assets.container';
+function _extends() { _extends = Object.assign || 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 * as webpack from '@bundle-stats/utils/lib-esm/webpack';
+import { ASSET_FILTERS } from '@bundle-stats/utils';
+import { getAssetEntryTypeFilters, getAssetFileTypeFilters } from '@bundle-stats/utils/lib-esm/utils/component-links';
+import { useRowsFilter } from '../../hooks/rows-filter';
+import { useRowsSort } from '../../hooks/rows-sort';
+import { useSearchParams } from '../../hooks/search-params';
 import { BundleAssets as BundleAssetsComponent } from './bundle-assets';
-export var BundleAssets = enhance(BundleAssetsComponent);
+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;
+  const {
+    defaultFilters,
+    allEntriesFilters
+  } = useMemo(() => ({
+    defaultFilters: {
+      [ASSET_FILTERS.CHANGED]: (jobs == null ? void 0 : jobs.length) > 1,
+      ...getAssetEntryTypeFilters(true),
+      ...getAssetFileTypeFilters(true)
+    },
+    allEntriesFilters: {
+      [ASSET_FILTERS.CHANGED]: false,
+      ...getAssetEntryTypeFilters(true),
+      ...getAssetFileTypeFilters(true)
+    }
+  }), [jobs]);
+  const searchParams = useSearchParams({
+    search,
+    filters,
+    defaultFilters,
+    allEntriesFilters,
+    setState
+  });
+  const {
+    rows,
+    totalRowCount
+  } = useMemo(() => {
+    const result = webpack.compareBySection.assets(jobs, [addRowAssetFlags, addRowIsNotPredictive]);
+    return {
+      rows: result,
+      totalRowCount: result.length
+    };
+  }, [jobs]);
+  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(BundleAssetsComponent, _extends({
+    jobs: jobs
+  }, restProps, searchParams, sortParams, {
+    totalRowCount: totalRowCount
+  }));
+};
+BundleAssets.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
+};
+BundleAssets.defaultProps = {
+  filters: undefined,
+  search: undefined,
+  sortBy: undefined,
+  direction: undefined
+};