@economic/taco 2.27.1 → 2.27.2

package/dist/taco.cjs.development.js

@@ -4572,12 +4572,12 @@ const defaultLocalisationTexts = {
       },
       validation: {
         alert: {
-          titleOne: '[COUNT] unsaved entry: ',
-          titlePlural: '[COUNT] unsaved entries: ',
+          titleOne: '[COUNT] unsaved entry:',
+          titlePlural: '[COUNT] unsaved entries:',
           messageOne: "[COLUMN] [ROW] is incomplete and hasn't been saved.",
           messagePlural: "[COLUMN] [ROW] are incomplete and haven't been saved.",
           messageRow: 'Row',
-          messageAnd: ' and '
+          messageAnd: 'and'
         },
         resetFiltersDialog: {
           title: 'Row is hidden',
@@ -9523,6 +9523,36 @@ function globalFilterFn(row, columnId, searchQuery) {
   return false;
 }
 
+function getSettings(table) {
+  const meta = table.options.meta;
+  const state = table.getState();
+  return {
+    // commented out properties are here to highlight things we explicitly don't want them saved
+    //columnFilters: table.options.enableColumnFilters ? state.columnFilters : undefined,
+    columnOrder: meta.columnOrdering.isEnabled ? state.columnOrder : undefined,
+    columnPinning: state.columnPinning,
+    columnSizing: ignoreInternalColumns(state.columnSizing),
+    columnVisibility: table.options.enableHiding ? state.columnVisibility : undefined,
+    excludeUnmatchedRecordsInSearch: table.options.enableGlobalFilter,
+    fontSize: meta.fontSize.isEnabled ? meta.fontSize.size : undefined,
+    //grouping: table.options.enableGrouping ? state.grouping : undefined,
+    rowHeight: meta.rowHeight.isEnabled ? meta.rowHeight.height : undefined,
+    //searchQuery: table.options.enableGlobalFilter ? state.globalFilter : undefined,
+    sorting: state.sorting
+  };
+}
+function ignoreInternalColumns(data) {
+  return Object.keys(data).reduce((accum, key) => {
+    if (isInternalColumn(key)) {
+      return accum;
+    }
+    return {
+      ...accum,
+      [key]: data[key]
+    };
+  }, {});
+}
+
 // mapping children to react-table columns
 function processChildren(child, columns, defaultSizing, defaultSorting, defaultVisibility, settings, defaultRowGroupColumnId) {
   const columnHelper = reactTable.createColumnHelper();
@@ -9608,7 +9638,10 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
       column.cell = info => renderer(info.getValue(), info.row.original);
     }
     if (typeof footer === 'function') {
-      column.footer = info => footer(info.table.getRowModel().rows.map(row => row.original[id]));
+      column.footer = info => footer(info.table.getRowModel().rows.flatMap(row => {
+        var _row$original;
+        return ((_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original[id]) !== undefined ? [row.original[id]] : [];
+      }));
     }
     // config - filtering
     if (enableColumnFilter) {
@@ -9775,7 +9808,7 @@ function useReactTableInitialState(props, columns, persistedSettings, defaults)
       columnFilters: (_ref2 = (_persistedSettings$co3 = persistedSettings.columnFilters) !== null && _persistedSettings$co3 !== void 0 ? _persistedSettings$co3 : (_props$defaultSetting3 = props.defaultSettings) === null || _props$defaultSetting3 === void 0 ? void 0 : _props$defaultSetting3.columnFilters) !== null && _ref2 !== void 0 ? _ref2 : [],
       columnOrder,
       columnPinning,
-      columnSizing: (_ref3 = (_ref4 = (_persistedSettings$co4 = persistedSettings.columnSizing) !== null && _persistedSettings$co4 !== void 0 ? _persistedSettings$co4 : (_props$defaultSetting4 = props.defaultSettings) === null || _props$defaultSetting4 === void 0 ? void 0 : _props$defaultSetting4.columnSizing) !== null && _ref4 !== void 0 ? _ref4 : defaults.defaultSizing) !== null && _ref3 !== void 0 ? _ref3 : {},
+      columnSizing: ignoreInternalColumns((_ref3 = (_ref4 = (_persistedSettings$co4 = persistedSettings.columnSizing) !== null && _persistedSettings$co4 !== void 0 ? _persistedSettings$co4 : (_props$defaultSetting4 = props.defaultSettings) === null || _props$defaultSetting4 === void 0 ? void 0 : _props$defaultSetting4.columnSizing) !== null && _ref4 !== void 0 ? _ref4 : defaults.defaultSizing) !== null && _ref3 !== void 0 ? _ref3 : {}),
       columnVisibility: (_ref5 = (_ref6 = (_persistedSettings$co5 = persistedSettings.columnVisibility) !== null && _persistedSettings$co5 !== void 0 ? _persistedSettings$co5 : (_props$defaultSetting5 = props.defaultSettings) === null || _props$defaultSetting5 === void 0 ? void 0 : _props$defaultSetting5.columnVisibility) !== null && _ref6 !== void 0 ? _ref6 : defaults.defaultVisibility) !== null && _ref5 !== void 0 ? _ref5 : {},
       globalFilter: (_persistedSettings$se = persistedSettings.searchQuery) !== null && _persistedSettings$se !== void 0 ? _persistedSettings$se : (_props$defaultSetting6 = props.defaultSettings) === null || _props$defaultSetting6 === void 0 ? void 0 : _props$defaultSetting6.searchQuery,
       sorting: persistedSettings.sorting ? persistedSettings.sorting.filter(ignoreNotDefinedColumns) : (_props$defaultSetting7 = (_props$defaultSetting8 = props.defaultSettings) === null || _props$defaultSetting8 === void 0 ? void 0 : _props$defaultSetting8.sorting) !== null && _props$defaultSetting7 !== void 0 ? _props$defaultSetting7 : defaults.defaultSorting
@@ -10292,7 +10325,7 @@ function _finallyRethrows(body, finalizer) {
 }
 
 const DEFAULT_PAGE_SIZE = 100;
-function useTableDataLoader(fetch, fetchAll, options = {
+function useTableDataLoader(fetchPage, fetchAll, options = {
   pageSize: DEFAULT_PAGE_SIZE
 }) {
   const {
@@ -10308,11 +10341,11 @@ function useTableDataLoader(fetch, fetchAll, options = {
   const _lastUsedFilters = React__default.useRef([]);
   const _lastUsedSearch = React__default.useRef();
   const _forceReset = React__default.useRef(false);
-  const loadPage = function (pageIndex, sorting, filters, search) {
+  const loadPage = function (pageIndex, sorting, filters) {
     try {
       let reset = false;
       // sorting or filters changed, reset everything
-      if (_forceReset.current || search !== _lastUsedSearch.current || JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current)) {
+      if (_forceReset.current || JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current)) {
         _pendingPageRequests.current = {};
         // nuke the dataset so that we "start again" after sorting
         reset = true;
@@ -10328,11 +10361,9 @@ function useTableDataLoader(fetch, fetchAll, options = {
       _lastUsedSorting.current = sorting;
       // set the filters so we can track if it changed between loads
       _lastUsedFilters.current = filters;
-      // set the search so we can track if it changed between loads
-      _lastUsedSearch.current = search;
       const _temp = _finallyRethrows(function () {
         return _catch(function () {
-          return Promise.resolve(fetch(pageIndex, pageSize, sorting, filters, search)).then(function (response) {
+          return Promise.resolve(fetchPage(pageIndex, pageSize, sorting, filters)).then(function (response) {
             // update state, here we do some "magic" to support "load in place"
             setData(currentData => {
               let nextData;
@@ -10361,10 +10392,14 @@ function useTableDataLoader(fetch, fetchAll, options = {
       return Promise.reject(e);
     }
   };
-  const loadAll = function (sorting, filters, search) {
+  const loadAll = function (sorting, filters) {
     try {
+      // set the sorting so we can track if it changed between loads
+      _lastUsedSorting.current = sorting;
+      // set the filters so we can track if it changed between loads
+      _lastUsedFilters.current = filters;
       const _temp2 = _catch(function () {
-        return Promise.resolve(fetchAll(sorting, filters, search)).then(function (response) {
+        return Promise.resolve(fetchAll(sorting, filters)).then(function (response) {
           length.current = response.length;
           setData(() => {
             let nextData;
@@ -10386,22 +10421,52 @@ function useTableDataLoader(fetch, fetchAll, options = {
   const invalidate = function () {
     try {
       _forceReset.current = true;
-      return loadPage(0, _lastUsedSorting.current, _lastUsedFilters.current, _lastUsedSearch.current);
+      return loadPage(0, _lastUsedSorting.current, _lastUsedFilters.current);
     } catch (e) {
       return Promise.reject(e);
     }
   };
-  // we reset the page to 0 whenever sorting, filtering or search changes
+  // search works client side - it fetches all then works client side - so these handlers are a little "weird"
+  // if a search is currently "active", we need to re load all because
   const handleSort = function (sorting) {
     try {
-      return loadPage(0, sorting, _lastUsedFilters.current, _lastUsedSearch.current);
+      // set the sorting so we can track if it changed between loads
+      _lastUsedSorting.current = sorting;
+      if (_lastUsedSearch.current) {
+        // we're searching, which means we need to refetch all with the correct sorting applied
+        loadAll(sorting, _lastUsedFilters.current);
+      } else {
+        // reset the page to 0 whenever sorting
+        loadPage(0, sorting, _lastUsedFilters.current);
+      }
+      return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
   };
   const handleFilter = function (filters) {
     try {
-      return loadPage(0, _lastUsedSorting.current, filters, _lastUsedSearch.current);
+      // set the filters so we can track if it changed between loads
+      _lastUsedFilters.current = filters;
+      if (_lastUsedSearch.current) {
+        // we're searching, which means we need to refetch all with the correct sorting applied
+        loadAll(_lastUsedSorting.current, filters);
+      } else {
+        // reset the page to 0 whenever sorting
+        loadPage(0, _lastUsedSorting.current, filters);
+      }
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const handleSearch = function (search) {
+    try {
+      // set the search so we can track if it changed between loads
+      _lastUsedSearch.current = search || undefined;
+      // search works client side, and focusing the search field triggers a load of all so we don't actually
+      // want to load anything when search gets changed, we just store the value for other handlers
+      return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
@@ -10412,6 +10477,7 @@ function useTableDataLoader(fetch, fetchAll, options = {
     loadAll,
     loadPage,
     onChangeFilter: handleFilter,
+    onChangeSearch: handleSearch,
     onChangeSort: handleSort,
     pageSize
   }, invalidate];
@@ -10588,10 +10654,17 @@ function useTableFontSizeListener(table) {
   const previousFontSizeRef = React__default.useRef(meta.fontSize.size);
   useLazyEffect(() => {
     const cellWidthDifference = getCellWidthDifference(`${previousFontSizeRef.current}-${meta.fontSize.size}`);
+    const globalMinSize = getCellMinWidth(meta.fontSize.size);
     table.setColumnSizing(sizes => {
-      const minColumnSize = getCellMinWidth(meta.fontSize.size);
       return Object.fromEntries(Object.entries(sizes).map(([columnName, prevColumnSize]) => {
+        var _column$columnDef$min;
+        const column = table.getColumn(columnName);
+        if (isInternalColumn(columnName)) {
+          var _column$getSize;
+          return [columnName, (_column$getSize = column === null || column === void 0 ? void 0 : column.getSize()) !== null && _column$getSize !== void 0 ? _column$getSize : prevColumnSize];
+        }
         // Prevents width value in the setting to go below the minColumnSize
+        const minColumnSize = (_column$columnDef$min = column === null || column === void 0 ? void 0 : column.columnDef.minSize) !== null && _column$columnDef$min !== void 0 ? _column$columnDef$min : globalMinSize;
         const newSize = Math.max(minColumnSize, prevColumnSize + cellWidthDifference);
         return [columnName, newSize];
       }));
@@ -10695,33 +10768,18 @@ function resetHighlightedColumnIndexes(value, table) {
   return firstRowIndex;
 }
 
-function useTableSearchListener(table) {
+function useTableSearchListener(table, onChangeSearch) {
   const meta = table.options.meta;
   // recalculates highlighted indexes whenever something important changes
   React__default.useEffect(() => {
     if (meta.search.isEnabled) {
-      resetHighlightedColumnIndexes(table.getState().globalFilter, table);
+      const query = table.getState().globalFilter;
+      resetHighlightedColumnIndexes(query, table);
+      if (typeof onChangeSearch === 'function') {
+        onChangeSearch(query);
+      }
     }
-  }, [meta.server.loadAllStatus, meta.search.isEnabled, meta.search.enableGlobalFilter, table.getRowModel().rows.length, table.getState().globalFilter, JSON.stringify(table.getState().sorting), JSON.stringify(table.getState().columnVisibility)]);
-}
-
-function getSettings(table) {
-  const meta = table.options.meta;
-  const state = table.getState();
-  return {
-    // commented out properties are here to highlight things we explicitly don't want them saved
-    //columnFilters: table.options.enableColumnFilters ? state.columnFilters : undefined,
-    columnOrder: meta.columnOrdering.isEnabled ? state.columnOrder : undefined,
-    columnPinning: state.columnPinning,
-    columnSizing: state.columnSizing,
-    columnVisibility: table.options.enableHiding ? state.columnVisibility : undefined,
-    excludeUnmatchedRecordsInSearch: table.options.enableGlobalFilter,
-    fontSize: meta.fontSize.isEnabled ? meta.fontSize.size : undefined,
-    //grouping: table.options.enableGrouping ? state.grouping : undefined,
-    rowHeight: meta.rowHeight.isEnabled ? meta.rowHeight.height : undefined,
-    //searchQuery: table.options.enableGlobalFilter ? state.globalFilter : undefined,
-    sorting: state.sorting
-  };
+  }, [meta.server.loadAllStatus, meta.search.isEnabled, meta.search.enableGlobalFilter, table.getRowModel().rows.length, table.getState().globalFilter, JSON.stringify(table.getState().sorting), JSON.stringify(table.getState().columnVisibility), onChangeSearch]);
 }
 
 function useTableSettingsListener(table, onChangeSettings) {
@@ -10807,11 +10865,10 @@ function useTableSortingListener(table, onSort) {
 function useTableServerLoadingListener(table, loadPage) {
   const sorting = table.getState().sorting;
   const columnFilters = table.getState().columnFilters;
-  const search = table.getState().globalFilter;
   // trigger load of the first page on mount
   React__default.useEffect(() => {
     if (loadPage) {
-      loadPage(0, sorting, columnFilters, search);
+      loadPage(0, sorting, columnFilters);
     }
   }, []);
 }
@@ -10912,7 +10969,7 @@ function useTableManager(props, meta, internalColumns) {
   useTableFontSizeListener(instance);
   useTableRowHeightListener(instance);
   useTableRowSelectionListener(instance, props.onRowSelect);
-  useTableSearchListener(instance);
+  useTableSearchListener(instance, props.onChangeSearch);
   useTableServerLoadingListener(instance, server.loadPage);
   useTableSettingsListener(instance, setSettings);
   useTableShortcutsListener(instance, props.shortcuts);
@@ -10992,16 +11049,23 @@ function useTableStyleGrid(tableId, table, fontSize) {
 
 function useTableStyleColumnFreezing(tableId, table) {
   const {
-    columnPinning
+    columnPinning,
+    columnSizing
   } = table.getState();
   const stylesheet = React__default.useMemo(() => {
     const styles = [];
     // might be a better way to get this information, but it wasn't obvious
     const all = table.getFlatHeaders().filter(column => !column.subHeaders.length).map(x => x.id);
-    const left = table.getLeftFlatHeaders().filter(column => !column.subHeaders.length).map(x => x.id);
-    const right = table.getRightFlatHeaders().filter(column => !column.subHeaders.length).map(x => x.id);
+    const left = table.getLeftFlatHeaders().filter(column => !column.subHeaders.length);
+    const right = table.getRightFlatHeaders().filter(column => !column.subHeaders.length);
     if (left.length) {
-      const index = all.indexOf(left[left.length - 1]);
+      left.forEach(cell => {
+        styles.push(`table[data-taco^='table']#${tableId} [data-cell-id="${cell.column.id}"] {
+                    left: ${cell.column.getStart(cell.column.getIsPinned())}px;
+                }`);
+      });
+      const leftIds = left.map(x => x.id);
+      const index = all.indexOf(leftIds[leftIds.length - 1]);
       // add right border, hide the header seperator and add shadow when scrolled
       // we have to be specific so that nested tables don't inherit the same css
       styles.push(`table[data-taco^='table']#${tableId} > thead > tr > th:nth-child(${index + 1}),
@@ -11019,14 +11083,20 @@ function useTableStyleColumnFreezing(tableId, table) {
                 }`);
     }
     if (right.length) {
-      const index = all.indexOf(right[right.length - 1]);
+      right.forEach(cell => {
+        styles.push(`table[data-taco^='table']#${tableId} [data-cell-id="${cell.column.id}"] {
+                    right: ${cell.column.getStart(cell.column.getIsPinned())}px;
+                }`);
+      });
+      const rightIds = right.map(x => x.id);
+      const index = all.indexOf(rightIds[rightIds.length - 1]);
       styles.push(`table[data-taco^='table']#${tableId} > thead > tr > th:nth-child(${index + 1}):not([data-cell-id^="__"]),
                 table[data-taco^='table']#${tableId} > tbody > tr > td:nth-child(${index + 1}):not([data-cell-id^="__"]) {
                     border-left-width: 1px;
                 }`);
     }
     return styles.join('\n');
-  }, [columnPinning]);
+  }, [columnPinning, columnSizing]);
   return {
     stylesheet
   };
@@ -11195,7 +11265,7 @@ function RowWithServerLoading(props) {
   React__default.useEffect(() => {
     if (inView) {
       var _tableMeta$server$loa, _tableMeta$server;
-      (_tableMeta$server$loa = (_tableMeta$server = tableMeta.server).loadPage) === null || _tableMeta$server$loa === void 0 ? void 0 : _tableMeta$server$loa.call(_tableMeta$server, pageIndex, table.getState().sorting, table.getState().columnFilters, table.getState().globalFilter);
+      (_tableMeta$server$loa = (_tableMeta$server = tableMeta.server).loadPage) === null || _tableMeta$server$loa === void 0 ? void 0 : _tableMeta$server$loa.call(_tableMeta$server, pageIndex, table.getState().sorting, table.getState().columnFilters);
     }
   }, [inView]);
   return /*#__PURE__*/React__default.createElement(Skeleton, {
@@ -11669,7 +11739,7 @@ function Header$4(context) {
         const _temp = function () {
           if (tableMeta.server.loadAllIfNeeded) {
             // don't pass the search query because we need all data - not filtered data
-            return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
+            return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
           }
         }();
         // load all data if that is possible
@@ -11743,7 +11813,7 @@ function Cell$3(context) {
                 const _temp3 = function () {
                   if (tableMeta.server.loadAllIfNeeded && selectedRows.some(row => row.original === undefined)) {
                     // don't pass the search query because we need all data - not filtered data
-                    return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
+                    return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
                   }
                 }();
                 return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
@@ -11847,20 +11917,16 @@ function useTable(props, externalRef, renderers, meta) {
 function getCellAttributes(cell, index, isHighlighted) {
   const columnMeta = cell.column.columnDef.meta;
   const isPinned = cell.column.getIsPinned();
-  const attributes = {
+  // be careful adding new properties here, any objects will break cell memoisation (e.g. the style attribute)
+  return {
     'data-cell-align': columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.align,
     'data-cell-highlighted': isHighlighted,
     'data-cell-id': cell.column.id,
     'data-cell-index': index,
     'data-cell-pinned': isPinned ? true : undefined,
     'data-cell-truncate': columnMeta.enableTruncate ? true : undefined,
-    className: typeof columnMeta.className === 'function' ? columnMeta.className(cell.row.original) : columnMeta.className,
-    style: {}
+    className: typeof columnMeta.className === 'function' ? columnMeta.className(cell.row.original) : columnMeta.className
   };
-  if (isPinned) {
-    attributes.style[isPinned] = `${cell.column.getStart(isPinned)}px`;
-  }
-  return attributes;
 }
 function useSearchHighlighting(cell, cellIndex, ref) {
   const {
@@ -13135,7 +13201,7 @@ function Search$1(props) {
       const _temp = function () {
         if (tableMeta.server.loadAllIfNeeded) {
           // don't pass the search query because we need all data - not filtered data
-          return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
+          return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
         }
       }();
       // load all data if that is possible
@@ -15183,7 +15249,7 @@ function Print$1(props) {
       const _temp2 = function () {
         if (tableMeta.server.isEnabled && tableMeta.server.loadAllIfNeeded) {
           const _temp = _catch(function () {
-            return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
+            return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters)).then(function () {});
           }, function (error) {
             const errorMessage = `${texts.table.print.error}: ${error}`;
             console.error(errorMessage);
@@ -17968,6 +18034,7 @@ const TextareaWithAutosizing = /*#__PURE__*/React__default.forwardRef(function T
   };
   const handleFocus = event => {
     var _props$onFocus;
+    toggleHeight();
     (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 ? void 0 : _props$onFocus.call(props, event);
   };
   const handleBlur = event => {
@@ -18453,9 +18520,13 @@ function Alert$1(props) {
   const tableMeta = table.options.meta;
   const [showFilterResetDialog, setShowFilterResetDialog] = React__default.useState(false);
   const pendingChangesWithErrors = tableMeta.editing.getErrors();
+  const activeRow = React__default.useMemo(() => tableMeta.rowActive.rowActiveIndex ? table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex] : undefined, [tableMeta.rowActive.rowActiveIndex]);
   // mark errors being rendered as seen
   React__default.useEffect(() => {
     pendingChangesWithErrors.forEach(error => {
+      if (activeRow && error.rowId === activeRow.id) {
+        return;
+      }
       tableMeta.editing.setRowErrorsSeen(error.rowId);
     });
   }, [pendingChangesWithErrors]);
@@ -18481,7 +18552,8 @@ function Alert$1(props) {
   pendingChangesWithErrors.forEach((error, index) => {
     // if appropriate, concatenate the item with the text "and"
     if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {
-      links.push(validationTexts.alert.messageAnd);
+      // Add space before and after `messageAnd` text
+      links.push(` ${validationTexts.alert.messageAnd} `);
     }
     const rowIndex = table.getRowModel().rows.findIndex(row => row.id === error.rowId);
     const handleClick = () => {
@@ -18539,7 +18611,7 @@ function Alert$1(props) {
     state: "error"
   }), /*#__PURE__*/React__default.createElement("span", {
     className: "font-bold"
-  }, title), message), /*#__PURE__*/React__default.createElement(FilterResetDialog, {
+  }, title), "\u00A0", message), /*#__PURE__*/React__default.createElement(FilterResetDialog, {
     open: showFilterResetDialog !== false,
     onChange: () => setShowFilterResetDialog(false),
     onSubmit: handleResetFilters