@bundle-stats/ui 4.1.1-alpha.1 → 4.1.1

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

@@ -9,11 +9,12 @@ export const addRowSourceFlag = row => {
   const {
     key,
     runs
-  } = row; // @NOTE Assign instead destructuring for perf reasons
-  // eslint-disable-next-line no-param-reassign
-
-  row.thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES)); // eslint-disable-next-line no-param-reassign
+  } = row;
 
+  // @NOTE Assign instead destructuring for perf reasons
+  // eslint-disable-next-line no-param-reassign
+  row.thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES));
+  // eslint-disable-next-line no-param-reassign
   row.duplicated = Boolean(runs.find(run => (run == null ? void 0 : run.duplicated) === true));
   return row;
 };
@@ -21,40 +22,35 @@ export const getCustomSort = sortBy => item => {
   if (sortBy === SORT_BY_NAME) {
     return item.key;
   }
-
   if (sortBy === SORT_BY_SIZE) {
     return _get(item, 'runs[0].value', 0);
   }
-
   if (sortBy === SORT_BY_DELTA) {
     return _get(item, 'runs[0].deltaPercentage', 0);
   }
-
   return [!item.changed, item.key];
 };
 export const getRowFilter = filters => row => {
   // Skip not changed rows
   if (filters[MODULE_FILTERS.CHANGED] && !row.changed) {
     return false;
-  } // Skip not duplicated rows
-
+  }
 
+  // Skip not duplicated rows
   if (filters[MODULE_FILTERS.DUPLICATED] && !row.duplicated) {
     return false;
-  } // Skip not matching source type
-
+  }
 
+  // Skip not matching source type
   if (!(filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`] && row.thirdParty === false || filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`] && row.thirdParty === true)) {
     return false;
-  } // Skip not matching source file types
-
+  }
 
+  // Skip not matching source file types
   const fileType = getModuleSourceFileType(row.key);
-
   if (!filters[`${MODULE_FILE_TYPE}.${fileType}`]) {
     return false;
   }
-
   return true;
 };
 export const useModuleFilterByChunk = _ref => {
@@ -69,37 +65,31 @@ export const useModuleFilterByChunk = _ref => {
       if (_get(filters, `${MODULE_CHUNK}.${chunkId}`)) {
         return [...agg, chunkId];
       }
-
       return agg;
-    }, []); // If all the filters are included, return jobs as they are
+    }, []);
 
+    // If all the filters are included, return jobs as they are
     if (includedChunkIds.length === chunkIds.length) {
       return jobs;
     }
-
     const jobsWithFilteredData = jobs.map(job => {
       var _job$metrics, _job$metrics$webpack;
-
       const modules = job == null ? void 0 : (_job$metrics = job.metrics) == null ? void 0 : (_job$metrics$webpack = _job$metrics.webpack) == null ? void 0 : _job$metrics$webpack.modules;
-
       if (!modules) {
         return job;
       }
-
       const filteredModules = Object.entries(modules).reduce((agg, _ref2) => {
         let [moduleId, moduleEntry] = _ref2;
-
         const match = _intersection(moduleEntry.chunkIds, includedChunkIds);
-
         if (match.length > 0) {
           agg[moduleId] = moduleEntry; // eslint-disable-line no-param-reassign
         }
 
         return agg;
-      }, {}); // Copy job data into a new object to prevent mutations of the original data
+      }, {});
 
+      // Copy job data into a new object to prevent mutations of the original data
       const newJob = _merge({}, job);
-
       newJob.metrics.webpack.modules = filteredModules;
       return newJob;
     });

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

@@ -1,8 +1,6 @@
 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';
@@ -23,10 +21,8 @@ export const BundleModules = props => {
     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 {
@@ -34,9 +30,7 @@ export const BundleModules = props => {
     } = _ref;
     return id;
   });
-
   const chunkIds = _map(chunks, 'id');
-
   const {
     defaultFilters,
     allEntriesFilters

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

@@ -1,5 +1,4 @@
 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';
@@ -21,7 +20,6 @@ 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,
@@ -39,7 +37,6 @@ const getDropdownFilters = _ref => {
     }
   };
 };
-
 const PackagePopoverContent = _ref2 => {
   let {
     name,
@@ -84,7 +81,6 @@ const PackagePopoverContent = _ref2 => {
     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")));
 };
-
 PackagePopoverContent.propTypes = {
   name: PropTypes.string.isRequired,
   path: PropTypes.string,
@@ -95,7 +91,6 @@ PackagePopoverContent.propTypes = {
 PackagePopoverContent.defaultProps = {
   path: ''
 };
-
 const PackageName = _ref3 => {
   let {
     packageName,
@@ -114,14 +109,12 @@ const PackageName = _ref3 => {
   }), /*#__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", {
@@ -135,7 +128,6 @@ const PackageName = _ref3 => {
     CustomComponentLink: CustomComponentLink
   }));
 };
-
 PackageName.propTypes = {
   packageName: PropTypes.string.isRequired,
   path: PropTypes.string.isRequired,
@@ -149,7 +141,6 @@ PackageName.propTypes = {
   }).isRequired,
   CustomComponentLink: PropTypes.elementType.isRequired
 };
-
 const RowHeader = _ref4 => {
   let {
     row,
@@ -163,14 +154,14 @@ const RowHeader = _ref4 => {
     className: css.packageNames
   }, packageNames.map((packageName, index) => /*#__PURE__*/React.createElement(PackageName, {
     packageName: packageName,
-    path: path // Render duplicate flag only for the last entry
+    path: path
+    // Render duplicate flag only for the last entry
     ,
     showDuplicateFlag: index === packageNames.length - 1,
     row: row,
     CustomComponentLink: CustomComponentLink
   })));
 };
-
 RowHeader.propTypes = {
   row: PropTypes.shape({
     label: PropTypes.string,

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

@@ -2,12 +2,12 @@ import _uniq from "lodash/uniq";
 import _flatten from "lodash/flatten";
 import _get from "lodash/get";
 import { PACKAGE_FILTERS } from '@bundle-stats/utils';
-import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-packages.constants'; // Get a list of duplicate packages across jobs
+import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-packages.constants';
 
+// Get a list of duplicate packages across jobs
 export const getDuplicatePackages = jobs => {
   const jobsDuplicatePackages = jobs.map(job => {
     var _job$insights, _job$insights$webpack, _job$insights$webpack2;
-
     const insightsData = (job == null ? void 0 : (_job$insights = job.insights) == null ? void 0 : (_job$insights$webpack = _job$insights.webpack) == null ? void 0 : (_job$insights$webpack2 = _job$insights$webpack.duplicatePackages) == null ? void 0 : _job$insights$webpack2.data) || {};
     return Object.values(insightsData).flat();
   });
@@ -17,28 +17,24 @@ export const getRowFilter = filters => item => {
   if (filters[PACKAGE_FILTERS.CHANGED] && !item.changed) {
     return false;
   }
-
   if (filters[PACKAGE_FILTERS.DUPLICATE] && !item.duplicate) {
     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.changed, item.key];
 };
-export const getAddRowDuplicateFlag = duplicateJobs => row => ({ ...row,
+export const getAddRowDuplicateFlag = duplicateJobs => row => ({
+  ...row,
   duplicate: duplicateJobs.includes(row.key)
 });

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

@@ -1,5 +1,4 @@
 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 { PACKAGE_FILTERS } from '@bundle-stats/utils';

package/lib-esm/components/component-link.js

@@ -1,5 +1,4 @@
 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 from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
@@ -26,8 +25,8 @@ ComponentLink.propTypes = {
   section: PropTypes.string.isRequired,
   title: PropTypes.string,
   params: PropTypes.object // eslint-disable-line react/forbid-prop-types
-
 };
+
 ComponentLink.defaultProps = {
   title: '',
   params: {}

package/lib-esm/components/duplicate-packages-warning/duplicate-packages-warning.module.css

@@ -18,4 +18,5 @@
   padding: 1px 2px;
   vertical-align: super;
   font-size: 9px;
+  line-height: 1;
 }

package/lib-esm/components/job-header/job-header.js

@@ -16,12 +16,10 @@ export const JobHeader = props => {
     job,
     children
   } = props;
-
   const {
     builtAt,
     hash
   } = _get(job, `meta.${SOURCE_PATH_WEBPACK_STATS}`, {});
-
   const rootClassName = cx(css.root, className);
   return /*#__PURE__*/React.createElement(Stack, {
     className: rootClassName,
@@ -64,8 +62,8 @@ JobHeader.propTypes = {
       builtAt: PropTypes.string
     }),
     summary: PropTypes.object // eslint-disable-line react/forbid-prop-types
-
   }),
+
   children: PropTypes.element
 };
 JobHeader.defaultProps = {

package/lib-esm/components/job-meta/job-meta.js

@@ -1,5 +1,4 @@
 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 from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -31,13 +30,11 @@ export const JobMeta = props => {
 JobMeta.propTypes = {
   /** Adopted child class name */
   className: PropTypes.string,
-
   /** Contrnt */
   meta: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     content: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.element]))
   })).isRequired,
-
   /** Render component */
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
 };

package/lib-esm/components/job-name/job-name.js

@@ -1,5 +1,4 @@
 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 from 'react';
 import PropTypes from 'prop-types';
 import { Tooltip } from '../../ui/tooltip';
@@ -27,13 +26,10 @@ JobName.defaultProps = {
 JobName.propTypes = {
   /** Rendered component */
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-
   /** Tooltip title */
   title: PropTypes.string,
-
   /** Job internal build number */
   internalBuildNumber: PropTypes.number,
-
   /** Render function */
   children: PropTypes.node
 };

package/lib-esm/components/jobs-header/jobs-header.js

@@ -24,7 +24,6 @@ export const JobsHeader = props => {
 JobsHeader.propTypes = {
   /** Adopted child classname */
   className: PropTypes.string,
-
   /** Jobs data */
   jobs: PropTypes.arrayOf(PropTypes.shape({
     internalBuildNumber: PropTypes.number

package/lib-esm/components/lighthouse-table/lighthouse-table.js

@@ -21,5 +21,4 @@ LighthouseTable.defaultProps = {
 LighthouseTable.propTypes = {
   className: PropTypes.string,
   jobs: PropTypes.array // eslint-disable-line react/forbid-prop-types
-
 };

package/lib-esm/components/metric/metric.js

@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import css from './metric.module.css'; // Separate value and unit
+import css from './metric.module.css';
 
+// Separate value and unit
 const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
 export const Metric = _ref => {
   let {
@@ -18,27 +19,22 @@ export const Metric = _ref => {
     displayUnit
   } = useMemo(() => {
     const formattedValue = formatter == null ? void 0 : formatter(value);
-
     if (!formattedValue) {
       return {
         displayValue: value
       };
     }
-
     if (!enhanced) {
       return {
         displayValue: formattedValue
       };
     }
-
     const matches = formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN);
-
     if (!matches) {
       return {
         displayValue: value
       };
     }
-
     return {
       displayUnit: matches[2],
       displayValue: matches[1]

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

@@ -1,9 +1,7 @@
 import _sum from "lodash/sum";
 import _isEmpty from "lodash/isEmpty";
 import _get from "lodash/get";
-
 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 cx from 'classnames';
@@ -14,13 +12,10 @@ import { Delta } from '../delta';
 import { JobName } from '../job-name';
 import styles from './metrics-table.module.css';
 const METRIC_TYPE_DATA = getGlobalMetricType(null, METRIC_TYPE_FILE_SIZE);
-
 const getRowsRunTotal = (rows, runIndex) => _sum(rows.map(row => _get(row, `runs[${runIndex}].value`, 0)));
-
 const getHeaderLabelCells = rows => (run, runIndex, runs) => {
   const isBaseline = runIndex === runs.length - 1;
   const className = cx(styles.value, isBaseline ? styles.baseline : styles.current);
-
   if (!run) {
     return [{
       children: '-',
@@ -30,7 +25,6 @@ const getHeaderLabelCells = rows => (run, runIndex, runs) => {
       className: styles.delta
     }] : [])];
   }
-
   const {
     label,
     internalBuildNumber
@@ -40,31 +34,34 @@ const getHeaderLabelCells = rows => (run, runIndex, runs) => {
     internalBuildNumber: internalBuildNumber,
     className: styles.jobName
   }, label);
-  return [// Value column
+  return [
+  // Value column
   {
     children: jobName,
     className
-  }, // Delta column
+  },
+  // Delta column
   ...(!isBaseline ? [{
     children: ' ',
     className: cx(styles.delta)
   }] : [])];
 };
-
 const getHeaderTotalCells = rows => (run, runIndex, runs) => {
   const isBaseline = runIndex === runs.length - 1;
   const className = cx(styles.value, isBaseline ? styles.baseline : styles.current);
   const currentRunTotal = getRowsRunTotal(rows, runIndex);
   const baselineRunTotal = !isBaseline && getRowsRunTotal(rows, runIndex + 1);
   const infoTotal = getMetricRunInfo(METRIC_TYPE_DATA, currentRunTotal, baselineRunTotal);
-  return [// Value column
+  return [
+  // Value column
   {
     children: /*#__PURE__*/React.createElement(Metric, {
       className: styles.tableHeaderRunMetric,
       value: infoTotal.displayValue
     }),
     className
-  }, // Delta column
+  },
+  // Delta column
   ...(!isBaseline ? [{
     children: /*#__PURE__*/React.createElement(Delta, {
       displayValue: infoTotal.displayDeltaPercentage,
@@ -73,21 +70,21 @@ const getHeaderTotalCells = rows => (run, runIndex, runs) => {
     className: styles.delta
   }] : [])];
 };
-
 const getHeaderRows = (runs, items, showHeaderSum, title) => [{
   className: styles.headerRowColumns,
-  cells: [// Metric name column - one empty strying to render the column
+  cells: [
+  // Metric name column - one empty strying to render the column
   {
     children: title || ' ',
     className: styles.metricName,
     rowSpan: showHeaderSum ? 2 : 1
-  }, // Runs
+  },
+  // Runs
   ...runs.map(getHeaderLabelCells(items)).flat()]
 }, ...(showHeaderSum ? [{
   className: styles.headerRowTotals,
   cells: runs.map(getHeaderTotalCells(items)).flat()
 }] : [])];
-
 const MetricsTableRow = _ref => {
   let {
     item,
@@ -99,8 +96,9 @@ const MetricsTableRow = _ref => {
     className: styles.metricName
   }, renderRowHeader(item)), item.runs.map((run, index) => {
     const isBaseline = index === item.runs.length - 1;
-    const valueClassName = cx(styles.value, !isBaseline && styles.current); // Empty cells if no value
+    const valueClassName = cx(styles.value, !isBaseline && styles.current);
 
+    // Empty cells if no value
     if (!run || typeof run.value === 'undefined') {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Table.Td, {
         className: valueClassName
@@ -108,7 +106,6 @@ const MetricsTableRow = _ref => {
         className: styles.delta
       }));
     }
-
     const {
       displayValue,
       deltaPercentage,
@@ -127,7 +124,6 @@ const MetricsTableRow = _ref => {
     })));
   }));
 };
-
 MetricsTableRow.propTypes = {
   item: PropTypes.shape({
     changed: PropTypes.bool,

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

@@ -1,5 +1,4 @@
 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 from 'react';
 import PropTypes from 'prop-types';
 import I18N from '../../i18n';
@@ -20,12 +19,10 @@ export const MetricsTableOptions = props => {
       menu,
       menuItemClassName
     } = _ref;
-
     const getButtonOnClick = handler => () => {
       handler();
       menu.toggle();
     };
-
     return /*#__PURE__*/React.createElement(React.Fragment, null, handleResetFilters && /*#__PURE__*/React.createElement(MenuItem, _extends({}, menu, {
       className: menuItemClassName,
       onClick: getButtonOnClick(handleResetFilters)

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

@@ -13,16 +13,18 @@ export const MetricsTableSearch = props => {
     updateSearch
   } = props;
   const rootClassname = cx(css.root, className);
-  const [value, setValue] = useState(search); // Update local state when initial value has changed
+  const [value, setValue] = useState(search);
 
+  // Update local state when initial value has changed
   useEffect(() => {
     setValue(search);
   }, [search]);
   const debouncedUpdateSearch = useCallback(_debounce(updateSearch, 500), []);
   const handleChangeValue = useCallback(event => {
     const newValue = event.target.value;
-    setValue(newValue); // Update parent state when the local value has changed
+    setValue(newValue);
 
+    // Update parent state when the local value has changed
     if (newValue !== search) {
       debouncedUpdateSearch(newValue);
     }

package/lib-esm/components/metrics-table-search/metrics-table-search.stories.js

@@ -4,7 +4,6 @@ import { getWrapperDecorator } from '../../stories';
 import { MetricsTableSearch } from '.';
 const stories = storiesOf('Components/MetricsTableSearch', module);
 stories.addDecorator(getWrapperDecorator());
-
 const MetricsTableWithState = () => {
   const [search, updateSearch] = useState('');
   return /*#__PURE__*/React.createElement(MetricsTableSearch, {
@@ -13,5 +12,4 @@ const MetricsTableWithState = () => {
     updateSearch: updateSearch
   });
 };
-
 stories.add('default', () => /*#__PURE__*/React.createElement(MetricsTableWithState, null));

package/lib-esm/components/module-info/module-info.js

@@ -1,9 +1,7 @@
 import _noop from "lodash/noop";
 import _find from "lodash/find";
 import _isEmpty from "lodash/isEmpty";
-
 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 from 'react';
 import PropTypes from 'prop-types';
 import { getBundleModulesByChunk } from '@bundle-stats/utils';
@@ -38,11 +36,9 @@ export const ModuleInfo = props => {
       const chunk = _find(chunks, {
         id: chunkId
       });
-
       if (!chunk) {
         return null;
       }
-
       return /*#__PURE__*/React.createElement(CustomComponentLink, _extends({}, getBundleModulesByChunk(chunkIds, chunkId), {
         onClick: onClick,
         className: css.chunksItem

package/lib-esm/components/summary/summary.js

@@ -1,7 +1,5 @@
 import _get from "lodash/get";
-
 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 from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';

package/lib-esm/components/summary/summary.module.css

@@ -9,6 +9,9 @@
   text-decoration: none;
 }
 
-.item:hover {
+.item:hover,
+.item:active,
+.item:focus {
   border-color: var(--color-outline-dark);
+  outline: none;
 }

package/lib-esm/components/summary/summary.stories.js

@@ -1,5 +1,4 @@
 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 from 'react';
 import { storiesOf } from '@storybook/react';
 import { createJobs } from '@bundle-stats/utils';