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

package/lib/components/total-size-type-title/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _totalSizeTypeTitle = require("./total-size-type-title");
-
 Object.keys(_totalSizeTypeTitle).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _totalSizeTypeTitle[key]) return;

package/lib/components/total-size-type-title/total-size-type-title.js

@@ -4,29 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TotalSizeTypeTitle = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _config = _interopRequireDefault(require("../../config.json"));
-
 var _i18n = _interopRequireDefault(require("../../i18n"));
-
 var _flexStack = require("../../layout/flex-stack");
-
 var _stack = require("../../layout/stack");
-
 var _icon = require("../../ui/icon");
-
 var _hoverCard = require("../../ui/hover-card");
-
 var _totalSizeTypeTitleModule = _interopRequireDefault(require("./total-size-type-title.module.css"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var TotalSizeTypeTitle = function TotalSizeTypeTitle(_ref) {
   var className = _ref.className;
   return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
@@ -49,7 +37,6 @@ var TotalSizeTypeTitle = function TotalSizeTypeTitle(_ref) {
     className: _totalSizeTypeTitleModule["default"].readMoreLink
   }, _i18n["default"].READ_MORE)))));
 };
-
 exports.TotalSizeTypeTitle = TotalSizeTypeTitle;
 TotalSizeTypeTitle.propTypes = {
   className: _propTypes["default"].string

package/lib/constants.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.URLS = exports.SPACE_XXXSMALL = exports.SPACE_XXXLARGE = exports.SPACE_XXSMALL = exports.SPACE_XXLARGE = exports.SPACE_XSMALL = exports.SPACE_XLARGE = exports.SPACE_SMALL = exports.SPACE_MEDIUM = exports.SPACE_LARGE = exports.SPACES = exports.SECTION_URLS = exports.NO_SPACE = exports.METRICS_WEBPACK_PACKAGES = exports.METRICS_WEBPACK_MODULES = exports.METRICS_WEBPACK_GENERAL = exports.METRICS_WEBPACK_ASSETS = exports.ASSETS_SIZES_FILE_TYPE_MAP = void 0;
-
 var _utils = require("@bundle-stats/utils");
-
 var _SECTION_URLS;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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; }
-
 var NO_SPACE = 'no-space';
 exports.NO_SPACE = NO_SPACE;
 var SPACE_XXXSMALL = 'xxxsmall';
@@ -46,11 +40,9 @@ var URLS = {
 exports.URLS = URLS;
 var SECTION_URLS = (_SECTION_URLS = {}, _defineProperty(_SECTION_URLS, _utils.SECTIONS.TOTALS, URLS.OVERVIEW), _defineProperty(_SECTION_URLS, _utils.SECTIONS.ASSETS, URLS.ASSETS), _defineProperty(_SECTION_URLS, _utils.SECTIONS.MODULES, URLS.MODULES), _defineProperty(_SECTION_URLS, _utils.SECTIONS.PACKAGES, URLS.PACKAGES), _SECTION_URLS);
 exports.SECTION_URLS = SECTION_URLS;
-
 var ASSETS_SIZES_FILE_TYPE_MAP = _utils.FILE_TYPES.reduce(function (agg, fileType) {
   return _objectSpread(_objectSpread({}, agg), {}, _defineProperty({}, "webpack.sizes.totalSizeByType".concat(fileType), fileType));
 }, {});
-
 exports.ASSETS_SIZES_FILE_TYPE_MAP = ASSETS_SIZES_FILE_TYPE_MAP;
 var METRICS_WEBPACK_GENERAL = ['webpack.totalSizeByTypeALL', 'webpack.totalInitialSizeJS', 'webpack.totalInitialSizeCSS', 'webpack.cacheInvalidation'];
 exports.METRICS_WEBPACK_GENERAL = METRICS_WEBPACK_GENERAL;

package/lib/css/default.css

@@ -63,8 +63,10 @@ a {
 }
 
 a:hover,
-a:active {
+a:active,
+a:focus {
   color: var(--color-primary-dark);
+  outline: none;
 }
 
 .ui-button--primary {

package/lib/css/variables.css

@@ -23,42 +23,42 @@
   --size-xxlarge: 1.424rem;
   --size-xxxlarge: 1.602rem;
 
-  --line-height: 1.6em;
+  --line-height: 1.66em;
 
   /*
    * Color scheme:
-   * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23585d63&mcgpalette4=%233385d6&themename=mcgtheme
+   * https://coolors.co/287acc-da444e-55b950-f6e179-192339
+   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f6e179&mcgpalette3=%23505861&mcgpalette4=%23287acc&themename=mcgtheme
    */
-  --color-gray-25: #fafbfb;
-  --color-gray-50: #ebeced;
-  --color-gray-100: #cdced0;
-  --color-gray-200: #acaeb1;
-  --color-gray-300: #8a8e92;
-  --color-gray-400: #71757a;
-  --color-gray-500: #585d63;
-  --color-gray-600: #50555b;
-  --color-gray-700: #474b51;
-  --color-gray-800: #3d4147;
-  --color-gray-900: #2d3035;
+  --color-gray-25: #F7F7F7;
+  --color-gray-50 : #eaebec;
+  --color-gray-100: #cbcdd0;
+  --color-gray-200: #a8acb0;
+  --color-gray-300: #858a90;
+  --color-gray-400: #6a7179;
+  --color-gray-500: #505861;
+  --color-gray-600: #495059;
+  --color-gray-700: #40474f;
+  --color-gray-800: #373d45;
+  --color-gray-900: #272d33;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
   --color-gray: var(--color-gray-500);
-  --color-gray-dark: var(--color-gray-600);
-  --color-gray-ultra-dark: var(--color-gray-700);
+  --color-gray-dark: var(--color-gray-700);
+  --color-gray-ultra-dark: var(--color-gray-900);
 
   --color-red-25: #fdf5f6;
-  --color-red-50: #fbebec;
-  --color-red-100: #f5cccf;
-  --color-red-200: #eeaaaf;
-  --color-red-300: #e7888e;
-  --color-red-400: #e26f76;
-  --color-red-500: #dd555e;
-  --color-red-600: #d94e56;
-  --color-red-700: #d4444c;
-  --color-red-800: #cf3b42;
-  --color-red-900: #c72a31;
+  --color-red-50: #fbe9ea;
+  --color-red-100: #f4c7ca;
+  --color-red-200: #eda2a7;
+  --color-red-300: #e57c83;
+  --color-red-400: #e06069;
+  --color-red-500: #da444e;
+  --color-red-600: #d63e47;
+  --color-red-700: #d0353d;
+  --color-red-800: #cb2d35;
+  --color-red-900: #c21f25;
   --color-red-ultra-light: var(--color-red-100);
   --color-red-light: var(--color-red-300);
   --color-red: var(--color-red-500);
@@ -66,16 +66,16 @@
   --color-red-ultra-dark: var(--color-red-900);
 
   --color-blue-25: #f3f8fd;
-  --color-blue-50: #e7f0fa;
-  --color-blue-100: #c2daf3;
-  --color-blue-200: #99c2eb;
-  --color-blue-300: #70aae2;
-  --color-blue-400: #5297dc;
-  --color-blue-500: #3385d6;
-  --color-blue-600: #2e7dd1;
-  --color-blue-700: #2772cc;
-  --color-blue-800: #2068c6;
-  --color-blue-900: #1455bc;
+  --color-blue-50: #e5eff9;
+  --color-blue-100: #bfd7f0;
+  --color-blue-200: #94bde6;
+  --color-blue-300: #69a2db;
+  --color-blue-400: #488ed4;
+  --color-blue-500: #287acc;
+  --color-blue-600: #2472c7;
+  --color-blue-700: #1e67c0;
+  --color-blue-800: #185db9;
+  --color-blue-900: #0f4aad;
 
   --color-blue-ultra-light: var(--color-blue-100);
   --color-blue-light: var(--color-blue-300);
@@ -84,16 +84,16 @@
   --color-blue-ultra-dark: var(--color-blue-900);
 
   --color-green-25: #f6fbf6;
-  --color-green-50: #ecf7ec;
-  --color-green-100: #d0eccf;
-  --color-green-200: #b1dfaf;
-  --color-green-300: #92d28e;
-  --color-green-400: #7ac976;
-  --color-green-500: #63bf5e;
-  --color-green-600: #5bb956;
-  --color-green-700: #51b14c;
-  --color-green-800: #47a942;
-  --color-green-900: #359b31;
+  --color-green-50: #ebf7ea;
+  --color-green-100: #cceacb;
+  --color-green-200: #aadca8;
+  --color-green-300: #88ce85;
+  --color-green-400: #6fc46a;
+  --color-green-500: #55b950;
+  --color-green-600: #4eb249;
+  --color-green-700: #44aa40;
+  --color-green-800: #3ba237;
+  --color-green-900: #2a9327;
 
   --color-green-ultra-light: var(--color-green-100);
   --color-green-light: var(--color-green-300);
@@ -102,16 +102,16 @@
   --color-green-ultra-dark: var(--color-green-900);
 
   --color-yellow-25: #FFFDF2;
-  --color-yellow-50: #fefcef;
-  --color-yellow-100: #fdf7d8;
-  --color-yellow-200: #fbf1be;
-  --color-yellow-300: #f9eba4;
-  --color-yellow-400: #f8e791;
-  --color-yellow-500: #f7e37d;
-  --color-yellow-600: #f6e075;
-  --color-yellow-700: #f5dc6a;
-  --color-yellow-800: #f3d860;
-  --color-yellow-900: #f1d04d;
+  --color-yellow-50: #fefbef;
+  --color-yellow-100: #fcf6d7;
+  --color-yellow-200: #fbf0bc;
+  --color-yellow-300: #f9eaa1;
+  --color-yellow-400: #f7e68d;
+  --color-yellow-500: #f6e179;
+  --color-yellow-600: #f5dd71;
+  --color-yellow-700: #f3d966;
+  --color-yellow-800: #f2d55c;
+  --color-yellow-900: #efcd49;
 
   --color-yellow-light-background: var(--color-yellow-25);
   --color-yellow-ultra-light: var(--color-yellow-100);

package/lib/hooks/rows-filter.js

@@ -4,25 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useRowsFilter = void 0;
-
 var _react = require("react");
-
 var useRowsFilter = function useRowsFilter(_ref) {
   var rows = _ref.rows,
-      searchPattern = _ref.searchPattern,
-      filters = _ref.filters,
-      getRowFilter = _ref.getRowFilter;
+    searchPattern = _ref.searchPattern,
+    filters = _ref.filters,
+    getRowFilter = _ref.getRowFilter;
   var filteredRows = (0, _react.useMemo)(function () {
     var filterRow = getRowFilter(filters);
     return rows.filter(function (row) {
       if (searchPattern && !searchPattern.test(row === null || row === void 0 ? void 0 : row.key)) {
         return false;
       }
-
       return filterRow(row);
     });
   }, [rows, searchPattern, filters, getRowFilter]);
   return filteredRows;
 };
-
 exports.useRowsFilter = useRowsFilter;

package/lib/hooks/rows-sort.js

@@ -4,42 +4,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useRowsSort = void 0;
-
 var _orderBy2 = _interopRequireDefault(require("lodash/orderBy"));
-
 var _react = require("react");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 var useRowsSort = function useRowsSort(_ref) {
   var rows = _ref.rows,
-      sortFields = _ref.sortFields,
-      _ref$sortBy = _ref.sortBy,
-      sortBy = _ref$sortBy === void 0 ? 'size' : _ref$sortBy,
-      _ref$sortDirection = _ref.sortDirection,
-      sortDirection = _ref$sortDirection === void 0 ? 'desc' : _ref$sortDirection,
-      getCustomSort = _ref.getCustomSort;
-
+    sortFields = _ref.sortFields,
+    _ref$sortBy = _ref.sortBy,
+    sortBy = _ref$sortBy === void 0 ? 'size' : _ref$sortBy,
+    _ref$sortDirection = _ref.sortDirection,
+    sortDirection = _ref$sortDirection === void 0 ? 'desc' : _ref$sortDirection,
+    getCustomSort = _ref.getCustomSort;
   var _useState = (0, _react.useState)({
-    field: sortBy,
-    direction: sortDirection
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      sort = _useState2[0],
-      updateSort = _useState2[1];
-
+      field: sortBy,
+      direction: sortDirection
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    sort = _useState2[0],
+    updateSort = _useState2[1];
   var orderedRows = (0, _react.useMemo)(function () {
     return (0, _orderBy2["default"])(rows, getCustomSort(sort.field), sort.direction);
   }, [rows, sort]);
@@ -50,5 +38,4 @@ var useRowsSort = function useRowsSort(_ref) {
     items: orderedRows
   };
 };
-
 exports.useRowsSort = useRowsSort;

package/lib/hooks/search-params.js

@@ -4,33 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSearchParams = exports.generateState = void 0;
-
 var _merge2 = _interopRequireDefault(require("lodash/merge"));
-
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
-
 var _react = require("react");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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; }
-
 var ACTION_SET_FILTERS = 'SET_FILTERS';
 var ACTION_SET_SEARCH = 'SET_SEARCH';
 var ACTION_RESET_DEFAULT = 'RESET_DEFAULT';
@@ -38,14 +24,11 @@ var ACTION_RESET_ALL = 'RESET_ALL';
 var ACTION_SET = 'SET';
 var SEARCH_DEFAULT = '';
 var SEARCH_DEFAULT_PATTERN = /.*/;
-
 var getSearchPattern = function getSearchPattern(search) {
   var searchPattern = SEARCH_DEFAULT_PATTERN;
-
   if (!search || !search.trim()) {
     return searchPattern;
   }
-
   try {
     searchPattern = new RegExp(search, 'i');
   } catch (err) {
@@ -55,15 +38,13 @@ var getSearchPattern = function getSearchPattern(search) {
 
   return searchPattern;
 };
-
 var getSearchReducer = function getSearchReducer(_ref) {
   var defaultFilters = _ref.defaultFilters,
-      allEntriesFilters = _ref.allEntriesFilters,
-      setParentState = _ref.setParentState;
+    allEntriesFilters = _ref.allEntriesFilters,
+    setParentState = _ref.setParentState;
   return function (state, action) {
     var type = action.type,
-        payload = action.payload;
-
+      payload = action.payload;
     switch (type) {
       case ACTION_SET_FILTERS:
         {
@@ -74,7 +55,6 @@ var getSearchReducer = function getSearchReducer(_ref) {
           setParentState(newState);
           return newState;
         }
-
       case ACTION_SET_SEARCH:
         {
           var _newState = {
@@ -86,7 +66,6 @@ var getSearchReducer = function getSearchReducer(_ref) {
             searchPattern: getSearchPattern(payload)
           });
         }
-
       case ACTION_RESET_DEFAULT:
         {
           var _newState2 = {
@@ -98,7 +77,6 @@ var getSearchReducer = function getSearchReducer(_ref) {
             searchPattern: getSearchPattern()
           });
         }
-
       case ACTION_RESET_ALL:
         {
           var _newState3 = {
@@ -110,18 +88,15 @@ var getSearchReducer = function getSearchReducer(_ref) {
             searchPattern: getSearchPattern()
           });
         }
-
       case ACTION_SET:
         {
           return payload;
         }
-
       default:
         return state;
     }
   };
 };
-
 var generateState = function generateState(filters, search) {
   return {
     filters: filters,
@@ -129,45 +104,41 @@ var generateState = function generateState(filters, search) {
     searchPattern: getSearchPattern(search)
   };
 };
-
 exports.generateState = generateState;
-
 var useSearchParams = function useSearchParams(_ref2) {
   var _ref2$search = _ref2.search,
-      parentSearch = _ref2$search === void 0 ? SEARCH_DEFAULT : _ref2$search,
-      parentFilters = _ref2.filters,
-      defaultFilters = _ref2.defaultFilters,
-      allEntriesFilters = _ref2.allEntriesFilters,
-      setParentState = _ref2.setState;
+    parentSearch = _ref2$search === void 0 ? SEARCH_DEFAULT : _ref2$search,
+    parentFilters = _ref2.filters,
+    defaultFilters = _ref2.defaultFilters,
+    allEntriesFilters = _ref2.allEntriesFilters,
+    setParentState = _ref2.setState;
   // When we pass custom filters, set the other flags to true (allEntries)
   var initialFilters = parentFilters ? (0, _merge2["default"])({}, allEntriesFilters, parentFilters) : defaultFilters;
-
   var _useReducer = (0, _react.useReducer)(getSearchReducer({
-    defaultFilters: defaultFilters,
-    allEntriesFilters: allEntriesFilters,
-    setParentState: setParentState
-  }), generateState(initialFilters, parentSearch)),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      _useReducer2$ = _useReducer2[0],
-      search = _useReducer2$.search,
-      searchPattern = _useReducer2$.searchPattern,
-      filters = _useReducer2$.filters,
-      dispatch = _useReducer2[1]; // Update state when the custom filters/search are changing - initial load or route updates
-
-
+      defaultFilters: defaultFilters,
+      allEntriesFilters: allEntriesFilters,
+      setParentState: setParentState
+    }), generateState(initialFilters, parentSearch)),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    _useReducer2$ = _useReducer2[0],
+    search = _useReducer2$.search,
+    searchPattern = _useReducer2$.searchPattern,
+    filters = _useReducer2$.filters,
+    dispatch = _useReducer2[1];
+
+  // Update state when the custom filters/search are changing - initial load or route updates
   (0, _react.useLayoutEffect)(function () {
     // Run a deep comparison to prevent circular setState triggering
     if (parentSearch === search && (0, _isEqual2["default"])(initialFilters, filters)) {
       return;
     }
-
     dispatch({
       type: ACTION_SET,
       payload: generateState(initialFilters, parentSearch)
     });
   }, [dispatch, search, filters, parentSearch, initialFilters]);
-  /** Callbacks */
 
+  /** Callbacks */
   var handleUpdateSearch = (0, _react.useCallback)(function (newValue) {
     dispatch({
       type: ACTION_SET_SEARCH,
@@ -201,5 +172,4 @@ var useSearchParams = function useSearchParams(_ref2) {
     resetAllFilters: handleResetAllFilters
   };
 };
-
 exports.useSearchParams = useSearchParams;

package/lib/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _ui = require("./ui");
-
 Object.keys(_ui).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _ui[key]) return;
@@ -16,9 +14,7 @@ Object.keys(_ui).forEach(function (key) {
     }
   });
 });
-
 var _layout = require("./layout");
-
 Object.keys(_layout).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _layout[key]) return;
@@ -29,9 +25,7 @@ Object.keys(_layout).forEach(function (key) {
     }
   });
 });
-
 var _components = require("./components");
-
 Object.keys(_components).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _components[key]) return;
@@ -42,9 +36,7 @@ Object.keys(_components).forEach(function (key) {
     }
   });
 });
-
 var _utils = require("./utils");
-
 Object.keys(_utils).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _utils[key]) return;
@@ -55,9 +47,7 @@ Object.keys(_utils).forEach(function (key) {
     }
   });
 });
-
 var _app = require("./app");
-
 Object.keys(_app).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _app[key]) return;

package/lib/layout/box/box.js

@@ -4,68 +4,44 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Box = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _constants = require("../../constants");
-
 var _boxModule = _interopRequireDefault(require("./box.module.css"));
-
 var _excluded = ["className", "as", "padding", "horizontalPadding", "verticalPadding", "outline"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 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); }
-
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var Box = function Box(props) {
   var className = props.className,
-      Component = props.as,
-      padding = props.padding,
-      horizontalPadding = props.horizontalPadding,
-      verticalPadding = props.verticalPadding,
-      outline = props.outline,
-      restProps = _objectWithoutProperties(props, _excluded);
-
+    Component = props.as,
+    padding = props.padding,
+    horizontalPadding = props.horizontalPadding,
+    verticalPadding = props.verticalPadding,
+    outline = props.outline,
+    restProps = _objectWithoutProperties(props, _excluded);
   var _ref = Array.isArray(padding) ? [null].concat(_toConsumableArray(padding)) : [padding, verticalPadding, horizontalPadding],
-      _ref2 = _slicedToArray(_ref, 3),
-      resolvedPadding = _ref2[0],
-      resolvedVerticalPadding = _ref2[1],
-      resolvedHorizontalPadding = _ref2[2];
-
+    _ref2 = _slicedToArray(_ref, 3),
+    resolvedPadding = _ref2[0],
+    resolvedVerticalPadding = _ref2[1],
+    resolvedHorizontalPadding = _ref2[2];
   var rootClassName = (0, _classnames["default"])(_boxModule["default"].root, className, resolvedPadding && _boxModule["default"]["padding-".concat(resolvedPadding)], resolvedVerticalPadding && _boxModule["default"]["vertical-padding-".concat(resolvedVerticalPadding)], resolvedHorizontalPadding && _boxModule["default"]["horizontal-padding-".concat(resolvedHorizontalPadding)], outline && _boxModule["default"].outline);
   return /*#__PURE__*/_react["default"].createElement(Component, _extends({}, restProps, {
     className: rootClassName
   }));
 };
-
 exports.Box = Box;
 Box.defaultProps = {
   className: '',
@@ -78,19 +54,14 @@ Box.defaultProps = {
 Box.propTypes = {
   /** Adopted child class name */
   className: _propTypes["default"].string,
-
   /** Rendered component */
   as: _propTypes["default"].elementType,
-
   /** Padding space size */
   padding: _propTypes["default"].oneOfType([_propTypes["default"].oneOf(_constants.SPACES), _propTypes["default"].arrayOf(_propTypes["default"].oneOf(_constants.SPACES))]),
-
   /** Horizonatl padding space size */
   horizontalPadding: _propTypes["default"].oneOf(_constants.SPACES),
-
   /** Vertical padding space size */
   verticalPadding: _propTypes["default"].oneOf(_constants.SPACES),
-
   /** Outline flag */
   outline: _propTypes["default"].bool
 };