@economic/taco 2.43.1 → 2.44.0

package/dist/taco.cjs.development.js

@@ -4339,7 +4339,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
     hide = false,
     ...otherProps
   } = props;
-  const className = cn(otherProps.className);
+  const className = cn('break-words', otherProps.className);
   if (hide) {
     return children;
   }
@@ -6464,6 +6464,11 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
     const currentDay = (_popoverContentRef$cu = popoverContentRef === null || popoverContentRef === void 0 ? void 0 : (_popoverContentRef$cu2 = popoverContentRef.current) === null || _popoverContentRef$cu2 === void 0 ? void 0 : _popoverContentRef$cu2.querySelector('table button[name="day"][aria-selected="true"]')) !== null && _popoverContentRef$cu !== void 0 ? _popoverContentRef$cu : null;
     currentDay === null || currentDay === void 0 ? void 0 : currentDay.focus();
   }, [popoverContentRef]);
+  const handleCloseAutoFocus = React.useCallback(e => {
+    var _input$ref$current;
+    e.preventDefault();
+    (_input$ref$current = input.ref.current) === null || _input$ref$current === void 0 ? void 0 : _input$ref$current.focus();
+  }, [input.ref]);
   return /*#__PURE__*/React.createElement("span", {
     className: className,
     "data-taco": "datepicker",
@@ -6475,7 +6480,8 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
       icon: "calendar",
       tabIndex: -1,
       popover: props => (/*#__PURE__*/React.createElement(Popover, Object.assign({}, props), /*#__PURE__*/React.createElement(Popover.Content, {
-        onOpenAutoFocus: handleOpenAutofocus
+        onOpenAutoFocus: handleOpenAutofocus,
+        onCloseAutoFocus: handleCloseAutoFocus
       }, ({
         close
       }) => (/*#__PURE__*/React.createElement("div", {
@@ -9978,18 +9984,25 @@ function columnFilterFn(value, filter) {
   }
 }
 
+const flattenCellValue = cellValue => {
+  return typeof cellValue === 'object' ? Object.values(cellValue).map(flattenCellValue) : cellValue;
+};
 function isMatched(searchQuery, cellValue, dataType, localization) {
-  const cellValueAsString = String(cellValue !== null && cellValue !== void 0 ? cellValue : '');
-  if (cellValueAsString !== undefined && isWeakContains(cellValueAsString, searchQuery)) {
-    return true;
+  if (typeof cellValue === 'object') {
+    return flattenCellValue(cellValue).flat(Infinity).find(y => isWeakContains(y, searchQuery));
   } else {
-    const dataTypeProperties = getDataTypeProperties(dataType);
-    if (dataTypeProperties.getDisplayValue) {
-      const cellDisplayValue = dataTypeProperties.getDisplayValue(cellValue, {
-        localization
-      });
-      if (cellDisplayValue !== undefined && isWeakContains(cellDisplayValue, searchQuery)) {
-        return true;
+    const cellValueAsString = String(cellValue !== null && cellValue !== void 0 ? cellValue : '');
+    if (cellValueAsString !== undefined && isWeakContains(cellValueAsString, searchQuery)) {
+      return true;
+    } else {
+      const dataTypeProperties = getDataTypeProperties(dataType);
+      if (dataTypeProperties.getDisplayValue) {
+        const cellDisplayValue = dataTypeProperties.getDisplayValue(cellValue, {
+          localization
+        });
+        if (cellDisplayValue !== undefined && isWeakContains(cellDisplayValue, searchQuery)) {
+          return true;
+        }
       }
     }
   }
@@ -10360,7 +10373,7 @@ function mapTableChildrenToColumns(props, settings, options, internalColumns, lo
       const column = createInternalColumn('__expansion', internalColumns.rowExpansion, defaultSizing);
       columns.unshift(column);
     }
-    if ((options.enableRowSelection || options.enableRowSelectionSingle) && internalColumns.rowSelection) {
+    if (options.enableRowSelection && internalColumns.rowSelection) {
       const column = createInternalColumn('__select', internalColumns.rowSelection, defaultSizing);
       columns.unshift(column);
     }
@@ -10382,10 +10395,9 @@ function mapTableChildrenToColumns(props, settings, options, internalColumns, lo
 }
 function configureReactTableOptions(options, props, localization) {
   var _options$enableFilter, _options$enableColumn, _options$enableRowExp, _options$enableColumn2, _options$enableColumn3, _options$enableSortin;
-  const enableRowSelection = options.enableRowSelection || options.enableRowSelectionSingle;
   // We don't want to expose internal Tanstack Table row, so we need to wrap enableRowSelection callback into additional function,
   // which receives the React Table Row object and passes row.original to a callback.
-  const reactTableEnableRowSelection = typeof enableRowSelection === 'function' ? row => enableRowSelection(row.original) : enableRowSelection;
+  const reactTableEnableRowSelection = typeof options.enableRowSelection === 'function' ? row => options.enableRowSelection(row.original) : options.enableRowSelection;
   const tableOptions = {
     defaultColumn: {
       enableColumnFilter: options.enableFiltering || true,
@@ -10405,7 +10417,6 @@ function configureReactTableOptions(options, props, localization) {
     enableHiding: (_options$enableColumn2 = options.enableColumnHiding) !== null && _options$enableColumn2 !== void 0 ? _options$enableColumn2 : false,
     enablePinning: (_options$enableColumn3 = options.enableColumnFreezing) !== null && _options$enableColumn3 !== void 0 ? _options$enableColumn3 : false,
     enableRowSelection: reactTableEnableRowSelection !== null && reactTableEnableRowSelection !== void 0 ? reactTableEnableRowSelection : false,
-    enableMultiRowSelection: !options.enableRowSelectionSingle && reactTableEnableRowSelection,
     enableSorting: (_options$enableSortin = options.enableSorting) !== null && _options$enableSortin !== void 0 ? _options$enableSortin : false,
     // models for default features
     getExpandedRowModel: reactTable.getExpandedRowModel(),
@@ -10429,8 +10440,8 @@ function configureReactTableOptions(options, props, localization) {
     tableOptions.getFilteredRowModel = reactTable.getFilteredRowModel();
     tableOptions.globalFilterFn = (row, columnId, searchQuery) => globalFilterFn(row, columnId, searchQuery, localization);
     tableOptions.getColumnCanGlobalFilter = column => {
-      var _column$columnDef$met, _column$columnDef$met2;
-      return (_column$columnDef$met = (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.enableSearch) !== null && _column$columnDef$met !== void 0 ? _column$columnDef$met : true;
+      var _column$columnDef$met;
+      return ((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.enableSearch) !== false && column.getIsVisible();
     };
   }
   if (tableOptions.enableSorting) {
@@ -10490,7 +10501,6 @@ const DEFAULT_PRESET = {
   enableColumnResizing: false,
   enableRowExpansion: false,
   enableRowSelection: false,
-  enableRowSelectionSingle: false,
   // custom -- common between all table types
   enableColumnOrdering: false,
   enableFontSize: false,
@@ -10517,7 +10527,6 @@ const presets = {
     enableColumnResizing: true,
     enableRowExpansion: true,
     enableRowSelection: true,
-    enableRowSelectionSingle: false,
     // custom -- common between all table types
     enableColumnOrdering: true,
     enableFontSize: true,
@@ -10543,7 +10552,6 @@ const presets = {
     enableColumnResizing: false,
     enableRowExpansion: true,
     enableRowSelection: true,
-    enableRowSelectionSingle: false,
     // custom -- common between all table types
     enableColumnOrdering: false,
     enableFontSize: false,
@@ -10569,7 +10577,6 @@ const presets = {
     enableColumnResizing: false,
     enableRowExpansion: true,
     enableRowSelection: false,
-    enableRowSelectionSingle: false,
     // custom -- common between all table types
     enableColumnOrdering: false,
     enableFontSize: false,
@@ -10586,7 +10593,7 @@ const presets = {
   }
 };
 function getTableFeaturePreset(props) {
-  var _props$enableRowActio, _props$enableRowClick, _props$enableRowDrag, _props$enableRowDrop, _props$enableRowGoto, _props$enableRowExpan, _props$enableRowSelec, _props$enableRowSelec2, _props$enableFilterin, _props$enableSearch, _props$enableSorting, _props$enableColumnFr, _props$enableColumnHi, _props$enableColumnRe, _props$enableColumnOr, _props$enableFontSize, _props$enableFooter, _props$enablePrinting, _props$enableRowActiv, _props$rowActions, _props$enableRowHeigh, _props$enableSaveSett;
+  var _props$enableRowActio, _props$enableRowClick, _props$enableRowDrag, _props$enableRowDrop, _props$enableRowGoto, _props$enableRowExpan, _props$enableRowSelec, _props$enableFilterin, _props$enableSearch, _props$enableSorting, _props$enableColumnFr, _props$enableColumnHi, _props$enableColumnRe, _props$enableColumnOr, _props$enableFontSize, _props$enableFooter, _props$enablePrinting, _props$enableRowActiv, _props$rowActions, _props$enableRowHeigh, _props$enableSaveSett;
   const presetOptions = props.preset ? presets[props.preset] : DEFAULT_PRESET;
   const enableRowActions = (_props$enableRowActio = props.enableRowActions) !== null && _props$enableRowActio !== void 0 ? _props$enableRowActio : presetOptions.enableRowActions;
   const enableRowClick = (_props$enableRowClick = props.enableRowClick) !== null && _props$enableRowClick !== void 0 ? _props$enableRowClick : presetOptions.enableRowClick;
@@ -10595,7 +10602,6 @@ function getTableFeaturePreset(props) {
   const enableRowGoto = (_props$enableRowGoto = props.enableRowGoto) !== null && _props$enableRowGoto !== void 0 ? _props$enableRowGoto : presetOptions.enableRowGoto;
   const enableRowExpansion = (_props$enableRowExpan = props.enableRowExpansion) !== null && _props$enableRowExpan !== void 0 ? _props$enableRowExpan : presetOptions.enableRowExpansion;
   const enableRowSelection = (_props$enableRowSelec = props.enableRowSelection) !== null && _props$enableRowSelec !== void 0 ? _props$enableRowSelec : presetOptions.enableRowSelection;
-  const enableRowSelectionSingle = (_props$enableRowSelec2 = props.enableRowSelectionSingle) !== null && _props$enableRowSelec2 !== void 0 ? _props$enableRowSelec2 : presetOptions.enableRowSelectionSingle;
   return {
     // react-table built-in
     enableFiltering: (_props$enableFilterin = props.enableFiltering) !== null && _props$enableFilterin !== void 0 ? _props$enableFilterin : presetOptions.enableFiltering,
@@ -10606,7 +10612,6 @@ function getTableFeaturePreset(props) {
     enableColumnResizing: (_props$enableColumnRe = props.enableColumnResizing) !== null && _props$enableColumnRe !== void 0 ? _props$enableColumnRe : presetOptions.enableColumnResizing,
     enableRowExpansion: enableRowExpansion && !!props.rowExpansionRenderer,
     enableRowSelection: !!props.onRowSelect && enableRowSelection,
-    enableRowSelectionSingle: !!props.onRowSelect && enableRowSelectionSingle,
     // custom -- common between all table types
     enableColumnOrdering: (_props$enableColumnOr = props.enableColumnOrdering) !== null && _props$enableColumnOr !== void 0 ? _props$enableColumnOr : presetOptions.enableColumnOrdering,
     enableFontSize: (_props$enableFontSize = props.enableFontSize) !== null && _props$enableFontSize !== void 0 ? _props$enableFontSize : presetOptions.enableFontSize,
@@ -11536,25 +11541,31 @@ function useTableRowSelectionListener(table, onRowSelect) {
   const rowSelection = React__default.useMemo(() => rows.map(row => row.original), [rows]);
   useLazyEffect(() => {
     if (table.options.enableRowSelection && typeof onRowSelect === 'function') {
-      if (table.options.enableMultiRowSelection) {
-        onRowSelect(rowSelection);
-      } else {
-        var _ref;
-        onRowSelect((_ref = [rowSelection[0]]) !== null && _ref !== void 0 ? _ref : []);
-      }
+      onRowSelect(rowSelection);
     }
     /**
-     * Casting to a boolean, since enableRowSelection and enableMultiRowSelection can be a functions,
+     * Casting to a boolean, since enableRowSelection can be a function,
      * and setting a function as depoendency will lead to infinity loop. And in case of row selection useEffect,
-     * we only need to know if selection was enabled or disabled, because enableRowSelection/enableMultiRowSelection functions
+     * we only need to know if selection was enabled or disabled, because enableRowSelection function
      * will be applied directly to particular rows.
      */
-  }, [!!table.options.enableRowSelection, !!table.options.enableMultiRowSelection, JSON.stringify(rowSelection)]);
+  }, [!!table.options.enableRowSelection, JSON.stringify(rowSelection)]);
 }
 
 function useTableSearchListener(table, onChangeSearch) {
   const meta = table.options.meta;
   const localization = useLocalization();
+  const visibleColumns = table.getVisibleFlatColumns();
+  // Need to re-run search when columns are getting shown/hidden.
+  React__default.useEffect(() => {
+    if (meta.search.isEnabled && visibleColumns.length > 0) {
+      const currentFilter = table.getState().globalFilter;
+      requestAnimationFrame(() => {
+        table.resetGlobalFilter();
+        table.setGlobalFilter(currentFilter);
+      });
+    }
+  }, [visibleColumns.length]);
   // recalculates highlighted indexes whenever something important changes
   React__default.useEffect(() => {
     if (meta.search.isEnabled) {
@@ -11564,7 +11575,7 @@ function useTableSearchListener(table, onChangeSearch) {
         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), onChangeSearch]);
+  }, [meta.server.loadAllStatus, meta.search.isEnabled, meta.search.enableGlobalFilter, table.getRowModel().rows.length, table.getState().globalFilter, JSON.stringify(table.getState().sorting), onChangeSearch]);
 }
 
 function useTableSettingsListener(table, onChangeSettings) {
@@ -12288,7 +12299,6 @@ function Actions$1(props) {
     actions,
     actionsLength,
     data,
-    fontSize,
     isActiveRow,
     rowId
   } = props;
@@ -12298,11 +12308,7 @@ function Actions$1(props) {
   const visibleActions = actions.map(action => action(data, rowId)).filter(action => !!action);
   const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
   const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
-  const className = cn('-mb-2 flex justify-end text-right bg-[inherit] shadow-[-6px_0px_6px_var(--table-row-actions-shadow)] print:hidden', {
-    // Adjust negative margin on row actions cell to ensure that the cell aligns vertically.
-    '-mt-2': fontSize === exports.FontSizes.small,
-    '-mt-1.5': fontSize !== exports.FontSizes.small
-  });
+  const className = cn('flex justify-end text-right bg-[inherit] shadow-[-6px_0px_6px_var(--table-row-actions-shadow)] print:hidden');
   return /*#__PURE__*/React__default.createElement("span", {
     className: className
   }, actionsOnRow.map((button, index) => {
@@ -12354,7 +12360,6 @@ const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
       actions: actions,
       actionsLength: actionsLength,
       data: row.original,
-      fontSize: tableMeta.fontSize.size,
       isActiveRow: isActiveRow,
       rowId: row.id
     });
@@ -12472,39 +12477,36 @@ function Header$4(context) {
     table
   } = context;
   const tableMeta = table.options.meta;
-  if (table.options.enableMultiRowSelection) {
-    const isAllRowsSelected = table.getIsAllRowsSelected();
-    const isSomeRowsSelected = table.getIsSomeRowsSelected();
-    const title = isAllRowsSelected ? texts.table.columns.select.deselectAll : texts.table.columns.select.selectAll;
-    const handleChange = function (checked) {
-      try {
-        function _temp2() {
-          table.toggleAllRowsSelected(checked);
-        }
-        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)).then(function () {});
-          }
-        }();
-        // load all data if that is possible
-        return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
-      } catch (e) {
-        return Promise.reject(e);
+  const isAllRowsSelected = table.getIsAllRowsSelected();
+  const isSomeRowsSelected = table.getIsSomeRowsSelected();
+  const title = isAllRowsSelected ? texts.table.columns.select.deselectAll : texts.table.columns.select.selectAll;
+  const handleChange = function (checked) {
+    try {
+      function _temp2() {
+        table.toggleAllRowsSelected(checked);
       }
-    };
-    return /*#__PURE__*/React__default.createElement(Tooltip, {
-      title: title
-    }, /*#__PURE__*/React__default.createElement(Checkbox, {
-      "aria-label": title,
-      className: "hover:border-blue !-mt-px",
-      checked: isAllRowsSelected,
-      indeterminate: isSomeRowsSelected && !isAllRowsSelected,
-      loading: tableMeta.server.loadAllStatus === exports.TableServerLoadAllState.Loading,
-      onChange: handleChange
-    }));
-  }
-  return null;
+      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)).then(function () {});
+        }
+      }();
+      // load all data if that is possible
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: title
+  }, /*#__PURE__*/React__default.createElement(Checkbox, {
+    "aria-label": title,
+    className: "hover:border-blue !-mt-px",
+    checked: isAllRowsSelected,
+    indeterminate: isSomeRowsSelected && !isAllRowsSelected,
+    loading: tableMeta.server.loadAllStatus === exports.TableServerLoadAllState.Loading,
+    onChange: handleChange
+  }));
 }
 const toggleBetween = (fromRowIndex, toRowIndex) => {
   const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;
@@ -12530,83 +12532,64 @@ function Cell$3(context) {
   const isSelected = row.getIsGrouped() ? row.getIsAllSubRowsSelected() : row.getIsSelected();
   const canSelect = row.getCanSelect();
   const title = isSelected ? texts.table.columns.select.deselect : texts.table.columns.select.select;
-  if (table.options.enableMultiRowSelection) {
-    const handleClick = function (event) {
-      try {
-        function _temp7() {
-          tableMeta.rowSelection.lastSelectedRowIndex.current = row.index;
-        }
-        event.stopPropagation();
-        const _temp6 = function () {
-          if (row.getIsGrouped()) {
-            row.subRows.forEach(row => row.toggleSelected());
-          } else {
-            const _temp5 = function () {
-              if (event.shiftKey) {
-                var _tableMeta$rowSelecti;
-                function _temp4() {
-                  table.setRowSelection(currentRowSelection => ({
-                    ...currentRowSelection,
-                    ...selectedRows.filter(row => row.getCanSelect()).reduce((state, row) => ({
-                      ...state,
-                      [row.id]: true
-                    }), {})
-                  }));
-                }
-                const [fromIndex, toIndex] = toggleBetween((_tableMeta$rowSelecti = tableMeta.rowSelection.lastSelectedRowIndex.current) !== null && _tableMeta$rowSelecti !== void 0 ? _tableMeta$rowSelecti : 0, rowIndex);
-                const selectedRows = table.getRowModel().rows.slice(fromIndex, toIndex + 1);
-                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)).then(function () {});
-                  }
-                }();
-                return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
-              } else {
-                row.toggleSelected();
-              }
-            }();
-            if (_temp5 && _temp5.then) return _temp5.then(function () {});
-          }
-        }();
-        return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(_temp7) : _temp7(_temp6));
-      } catch (e) {
-        return Promise.reject(e);
+  const handleClick = function (event) {
+    try {
+      function _temp7() {
+        tableMeta.rowSelection.lastSelectedRowIndex.current = row.index;
       }
-    };
-    return /*#__PURE__*/React__default.createElement(Tooltip, {
-      hidden: !canSelect,
-      title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title, /*#__PURE__*/React__default.createElement(Shortcut, {
-        className: "ml-2",
-        keys: "Space"
-      }))
-    }, /*#__PURE__*/React__default.createElement(Checkbox, {
-      "aria-label": title,
-      className: "!mt-0",
-      checked: isSelected,
-      onClick: handleClick,
-      disabled: !canSelect,
-      // this is necessary to remove console spam from eslint
-      onChange: () => false
-    }));
-  } else {
-    const className = cn('!mt-0', getRadioClassnames(!canSelect));
-    const handleClick = event => {
       event.stopPropagation();
-      row.toggleSelected();
-      tableMeta.rowSelection.lastSelectedRowIndex.current = row.index;
-    };
-    return /*#__PURE__*/React__default.createElement("button", {
-      className: className,
-      "aria-checked": canSelect && isSelected,
-      disabled: !canSelect,
-      onClick: handleClick,
-      role: "radio",
-      type: "button"
-    }, isSelected ? /*#__PURE__*/React__default.createElement("span", {
-      className: "h-2 w-2 rounded-full bg-white"
-    }) : null);
-  }
+      const _temp6 = function () {
+        if (row.getIsGrouped()) {
+          row.subRows.forEach(row => row.toggleSelected());
+        } else {
+          const _temp5 = function () {
+            if (event.shiftKey) {
+              var _tableMeta$rowSelecti;
+              function _temp4() {
+                table.setRowSelection(currentRowSelection => ({
+                  ...currentRowSelection,
+                  ...selectedRows.filter(row => row.getCanSelect()).reduce((state, row) => ({
+                    ...state,
+                    [row.id]: true
+                  }), {})
+                }));
+              }
+              const [fromIndex, toIndex] = toggleBetween((_tableMeta$rowSelecti = tableMeta.rowSelection.lastSelectedRowIndex.current) !== null && _tableMeta$rowSelecti !== void 0 ? _tableMeta$rowSelecti : 0, rowIndex);
+              const selectedRows = table.getRowModel().rows.slice(fromIndex, toIndex + 1);
+              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)).then(function () {});
+                }
+              }();
+              return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
+            } else {
+              row.toggleSelected();
+            }
+          }();
+          if (_temp5 && _temp5.then) return _temp5.then(function () {});
+        }
+      }();
+      return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(_temp7) : _temp7(_temp6));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(Tooltip, {
+    hidden: !canSelect,
+    title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title, /*#__PURE__*/React__default.createElement(Shortcut, {
+      className: "ml-2",
+      keys: "Space"
+    }))
+  }, /*#__PURE__*/React__default.createElement(Checkbox, {
+    "aria-label": title,
+    className: "!mt-0",
+    checked: isSelected,
+    onClick: handleClick,
+    disabled: !canSelect,
+    // this is necessary to remove console spam from eslint
+    onChange: () => false
+  }));
 }
 const renderer$3 = {
   header: Header$4,
@@ -12751,7 +12734,6 @@ function GroupedCell(props) {
     canShowActions: canShowActions,
     cellRef: cellRef,
     colSpan: colSpan,
-    fontSize: tableMeta.fontSize.size,
     rowActions: tableMeta.rowGroups.rowActionsForGroup,
     rowId: cell.row.id,
     subRows: subRows
@@ -12763,7 +12745,6 @@ const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupe
     cellRef,
     children,
     colSpan,
-    fontSize,
     rowActions,
     rowId,
     subRows,
@@ -12780,7 +12761,6 @@ const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupe
     actions: rowActions,
     actionsLength: 4,
     data: subRows,
-    fontSize: fontSize,
     isActiveRow: true,
     rowId: rowId
   })) : null);
@@ -15849,7 +15829,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     style: {
       minWidth: dimensions !== null && dimensions !== void 0 && dimensions.width ? `${dimensions.width}px` : undefined
     }
-  }, flattenedChildren.length > 0 || isInlineCreation ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Search$2, {
+  }, flattenedChildren.length > 5 || isInlineCreation ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Search$2, {
     placeholder: isInlineCreation ? texts.select2.searchOrCreate : texts.select2.search,
     ref: searchRef,
     onTabKeyPress: () => setTabTriggeredClose(true)
@@ -16756,6 +16736,8 @@ function TableGrid(props) {
     table.meta.rowActive.handleFocus(event, table.meta.length, table.renderer.scrollToIndex);
   } : undefined;
   const filterReason = getFilterReason(table);
+  const searchNotApplied = !table.state.globalFilter || table.state.globalFilter === '';
+  const filtersNotApplied = !table.state.columnFilters || table.state.columnFilters.length === 0;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("style", null, table.stylesheet), /*#__PURE__*/React__default.createElement(focus.FocusScope, null, /*#__PURE__*/React__default.createElement("table", Object.assign({}, attributes, {
     id: table.id,
     "data-table-font-size": table.meta.fontSize.size,
@@ -16788,7 +16770,7 @@ function TableGrid(props) {
       ...table.renderer.style,
       height: table.renderer.style.height + ROW_HEIGHT_ESTIMATES[table.meta.rowHeight.height]
     } : table.renderer.style
-  }, table.renderer.rows, props.children), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
+  }, table.renderer.rows, searchNotApplied && filtersNotApplied && props.children), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
     table: table.instance
   }) : null)))));
 }
@@ -18293,6 +18275,8 @@ const useTableRowCreation = (data, tableRef) => {
 
 function useTableEditingListener(table, tableRef) {
   const tableMeta = table.options.meta;
+  const completedRowsCount = tableMeta.editing.getCompletedRowsCount();
+  const localization = useLocalization();
   const saveChanges = () => {
     requestAnimationFrame(() => {
       tableMeta.editing.saveChanges();
@@ -18333,6 +18317,11 @@ function useTableEditingListener(table, tableRef) {
       window.removeEventListener('beforeunload', showUnsavedChangesWarning);
     };
   }, [tableMeta.editing.isEditing, hasChanges]);
+  React__default.useEffect(() => {
+    if (completedRowsCount > 0) {
+      resetHighlightedColumnIndexes(table.getState().globalFilter, table, localization);
+    }
+  }, [completedRowsCount]);
   React__default.useEffect(() => {
     const onClickOutside = event => {
       if (tableMeta.editing.isEditing) {
@@ -18545,14 +18534,13 @@ function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
               }
               if (rowError || cellErrors) {
                 setPendingChanges(currentChanges => {
-                  var _nextChanges$rowId$_m, _nextChanges$rowId$_m2;
                   const nextChanges = {
                     ...currentChanges
                   };
                   nextChanges[rowId]._meta.errors = {
                     row: rowError,
                     cells: cellErrors,
-                    hasShownErrorAlert: (_nextChanges$rowId$_m = (_nextChanges$rowId$_m2 = nextChanges[rowId]._meta.errors) === null || _nextChanges$rowId$_m2 === void 0 ? void 0 : _nextChanges$rowId$_m2.hasShownErrorAlert) !== null && _nextChanges$rowId$_m !== void 0 ? _nextChanges$rowId$_m : false
+                    shouldShowErrorAlert: true
                   };
                   return nextChanges;
                 });
@@ -18587,7 +18575,7 @@ function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
                 errors: {
                   ...nextChanges[cell.row.id]._meta.errors,
                   cells: errors,
-                  hasShownErrorAlert: Object.keys(errors).length && !nextChanges[cell.row.id]._meta.errors.hasShownErrorAlert ? false : nextChanges[cell.row.id]._meta.errors.hasShownErrorAlert
+                  shouldShowErrorAlert: !Object.keys(errors).length ? false : nextChanges[cell.row.id]._meta.errors.shouldShowErrorAlert
                 }
               };
               return nextChanges;
@@ -18675,22 +18663,18 @@ function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
     if (!isEnabled) {
       return false;
     }
-    return hasRowErrors(rowId) && !!((_pendingChanges$rowId6 = pendingChanges[rowId]._meta.errors) !== null && _pendingChanges$rowId6 !== void 0 && _pendingChanges$rowId6.hasShownErrorAlert);
+    return hasRowErrors(rowId) && !!((_pendingChanges$rowId6 = pendingChanges[rowId]._meta.errors) !== null && _pendingChanges$rowId6 !== void 0 && _pendingChanges$rowId6.shouldShowErrorAlert);
   }
-  function setRowErrorsSeen(rowId) {
-    var _pendingChanges$rowId7;
-    if (((_pendingChanges$rowId7 = pendingChanges[rowId]._meta.errors) === null || _pendingChanges$rowId7 === void 0 ? void 0 : _pendingChanges$rowId7.hasShownErrorAlert) === false) {
-      setPendingChanges(currentChanges => {
-        const nextChanges = {
-          ...currentChanges
-        };
-        nextChanges[rowId]._meta.errors = {
-          ...nextChanges[rowId]._meta.errors,
-          hasShownErrorAlert: true
-        };
-        return nextChanges;
-      });
+  function getRowPendingChange(rowId) {
+    const rowPendingChanges = pendingChanges[rowId];
+    if (rowPendingChanges) {
+      const {
+        _meta,
+        ...pendingChange
+      } = rowPendingChanges;
+      return pendingChange;
     }
+    return undefined;
   }
   function getRowSaveStatus(rowId) {
     if (!isEnabled) {
@@ -18712,8 +18696,8 @@ function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
     });
   }
   function getRowMoveReason(rowId) {
-    var _pendingChanges$rowId8;
-    return (_pendingChanges$rowId8 = pendingChanges[rowId]) !== null && _pendingChanges$rowId8 !== void 0 && _pendingChanges$rowId8._meta.moveReason ? Object.values(pendingChanges[rowId]._meta.moveReason)[0] : undefined;
+    var _pendingChanges$rowId7;
+    return (_pendingChanges$rowId7 = pendingChanges[rowId]) !== null && _pendingChanges$rowId7 !== void 0 && _pendingChanges$rowId7._meta.moveReason ? Object.values(pendingChanges[rowId]._meta.moveReason)[0] : undefined;
   }
   function hasChanges(rowId) {
     if (!isEnabled) {
@@ -18721,28 +18705,14 @@ function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
     }
     return rowId ? !!pendingChanges[rowId] : !!Object.keys(pendingChanges).length;
   }
-  function hasErrors(table, tableRef) {
-    var _tableRef$current;
+  function hasAlertErrors() {
     if (!isEnabled) {
       return false;
     }
-    const tableMeta = table.options.meta;
-    const focusIsInsideTable = (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.contains(document.activeElement);
-    let activeRow;
-    if (tableMeta.rowActive.rowActiveIndex !== undefined) {
-      activeRow = table.getRowModel().rows[tableMeta.rowActive.rowActiveIndex];
-    }
-    return Object.keys(getErrors().filter(error => {
-      var _activeRow;
-      if ((_activeRow = activeRow) !== null && _activeRow !== void 0 && _activeRow.id && focusIsInsideTable) {
-        var _activeRow2, _error$pendingChange$;
-        return error.rowId === ((_activeRow2 = activeRow) === null || _activeRow2 === void 0 ? void 0 : _activeRow2.id) ? (_error$pendingChange$ = error.pendingChange._meta.errors) === null || _error$pendingChange$ === void 0 ? void 0 : _error$pendingChange$.hasShownErrorAlert : true;
-      }
-      return true;
-    })).length;
+    return !!getAlertErrors().length;
   }
-  function getErrors() {
-    return Object.keys(pendingChanges).filter(hasRowErrors).map(rowId => ({
+  function getAlertErrors() {
+    return Object.keys(pendingChanges).filter(hasRowErrorsSeen).map(rowId => ({
       rowId,
       pendingChange: pendingChanges[rowId]
     }));
@@ -18756,6 +18726,9 @@ function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
       return nextChanges;
     });
   }
+  function getCompletedRowsCount() {
+    return Object.values(saveStates).filter(value => value === 'complete').length;
+  }
   return {
     getCellValue,
     getCellError,
@@ -18763,16 +18736,17 @@ function usePendingChanges(isEnabled, handleSave, handleChange, validator) {
     validateCell,
     addCreatedRowChangeset,
     hasChanges,
-    hasErrors,
-    getErrors,
+    hasAlertErrors,
+    getAlertErrors,
     saveChanges,
     resetChanges,
     hasRowErrors,
     hasRowErrorsSeen,
-    setRowErrorsSeen,
+    getRowPendingChange,
     getRowSaveStatus,
     setRowSaveStatus,
-    getRowMoveReason
+    getRowMoveReason,
+    getCompletedRowsCount
   };
 }
 function useLastFocusedCellIndex() {
@@ -18844,12 +18818,16 @@ function createPendingChangesSetter(currentChanges, row, rowIndex, changes, loca
     // otherwise remove any change - no point saving the same value
     if (change !== row.original[accessor]) {
       rowChanges[accessor] = change;
-      // determine if the row will move position based on this change, and save why it will move
-      const reason = willRowMove(cells[accessor], change, rowIndex, localization);
-      if (reason) {
-        rowChanges._meta.moveReason[accessor] = reason;
-      } else {
-        delete rowChanges._meta.moveReason[accessor];
+      // consumers sometimes include properties in onEditingChange that aren't rendered as columns, we need to guard against that.
+      // eslint-disable-next-line no-prototype-builtins
+      if (cells.hasOwnProperty(accessor)) {
+        // determine if the row will move position based on this change, and save why it will move
+        const reason = willRowMove(cells[accessor], change, rowIndex, localization);
+        if (reason) {
+          rowChanges._meta.moveReason[accessor] = reason;
+        } else {
+          delete rowChanges._meta.moveReason[accessor];
+        }
       }
     } else {
       delete rowChanges[accessor];
@@ -19078,7 +19056,7 @@ function useEditingCellAutofocus(props) {
         (_props$cellRef$curren2 = props.cellRef.current) === null || _props$cellRef$curren2 === void 0 ? void 0 : _props$cellRef$curren2.focus();
       }
     }
-  }, [autoFocus]);
+  }, [tableMeta.rowActive.rowActiveIndex]);
   // when the cell receives focus we actually want to focus the control inside it...
   const handleFocus = event => {
     var _props$cellRef$curren3;
@@ -19089,11 +19067,12 @@ function useEditingCellAutofocus(props) {
       const tableRect = tableElement.getBoundingClientRect();
       const leftOffsetFromScrollContainer = targetRect.left - tableRect.left;
       const scrollbarWidth = tableElement.offsetWidth - tableElement.clientWidth; // the width of table vertical scrollbar
+      const isFocusedElementMenu = event.currentTarget.getAttribute('data-cell-id') === '__actions';
       if (
       // When pinned column overlaps the focused cell
-      leftOffsetFromScrollContainer < columnFreezingOffset ||
+      (leftOffsetFromScrollContainer < columnFreezingOffset ||
       // When focused cell goes behidn the edge of the table
-      leftOffsetFromScrollContainer + targetRect.width > tableRect.width - scrollbarWidth) {
+      leftOffsetFromScrollContainer + targetRect.width > tableRect.width - scrollbarWidth) && !isFocusedElementMenu) {
         tableElement.scrollTo(props.cell.column.getStart() - columnFreezingOffset, tableElement.scrollTop);
       }
     }
@@ -19143,6 +19122,7 @@ function EditingControlCell(props) {
     onBlur: handleBlur,
     onChange: value => tableMeta.editing.setCellValue(cell, value, rowIndex),
     row: cell.row.original,
+    rowPendingChanges: tableMeta.editing.getRowPendingChange(cell.row.id),
     tabIndex: isActiveRow ? 0 : -1,
     toggleEditing: tableMeta.editing.toggleEditing,
     toggleDetailedMode: tableMeta.editing.toggleDetailedMode,
@@ -19177,6 +19157,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     onBlur,
     onChange,
     row,
+    rowPendingChanges,
     tabIndex = -1,
     toggleEditing,
     toggleDetailedMode,
@@ -19197,7 +19178,10 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
       setValue: onChange,
       value
     };
-    return type(controlFnProps, row);
+    return type(controlFnProps, {
+      ...row,
+      ...rowPendingChanges
+    });
   }
   if (type === 'switch') {
     return /*#__PURE__*/React__default.createElement(Switch, Object.assign({}, commonProps, {
@@ -19363,13 +19347,21 @@ function EditingActionMenu(props) {
       handleSave();
     }
   };
+  const handleMenuContentKeyDown = event => {
+    // Stops the keyboard event from propagating to the Table when EditActionsMenu is open
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      event.stopPropagation();
+    }
+  };
   return /*#__PURE__*/React__default.createElement(IconButton, {
     appearance: "transparent",
     "aria-label": texts.table3.editing.actions.tooltip,
     className: "group-[[data-row-editing-status]]/row:hidden",
     icon: "more",
     onKeyDown: handleKeyDown,
-    menu: menuProps => (/*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+    menu: menuProps => (/*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, {
+      onKeyDown: handleMenuContentKeyDown
+    }, /*#__PURE__*/React__default.createElement(Menu$1.Item, {
       icon: "tick",
       disabled: !hasChanges || hasErrors,
       onClick: handleSave
@@ -19393,14 +19385,20 @@ function ConfirmClearChangesDialog(props) {
   const {
     texts
   } = useLocalization();
+  const handleClickInsideDialogContent = event => {
+    // Prevents the click event from propagating to the table, ensuring the row isn't saved when a click occurs
+    // inside the dialog
+    event.stopPropagation();
+  };
   return /*#__PURE__*/React__default.createElement(Dialog, Object.assign({}, dialogProps), /*#__PURE__*/React__default.createElement(Dialog.Content, {
-    "aria-label": texts.table3.editing.clearChangesConfirmationDialog.title
+    "aria-label": texts.table3.editing.clearChangesConfirmationDialog.title,
+    onClick: handleClickInsideDialogContent
   }, /*#__PURE__*/React__default.createElement(Dialog.Title, null, texts.table3.editing.clearChangesConfirmationDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.editing.clearChangesConfirmationDialog.description), /*#__PURE__*/React__default.createElement(Dialog.Footer, null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button$1, {
     tabIndex: 0
   }, texts.table3.editing.clearChangesConfirmationDialog.cancel)), /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button$1, {
+    autoFocus: true,
     tabIndex: 0,
     appearance: "primary",
-    autoFocus: true,
     onClick: handleClear
   }, texts.table3.editing.clearChangesConfirmationDialog.confirm))))));
 }
@@ -19441,12 +19439,14 @@ function SaveStatus(props) {
     title: texts.table3.editing.saving.progress
   }, /*#__PURE__*/React__default.createElement(Spinner, {
     delay: 0,
-    className: "!text-grey-700 mr-1 !h-5 !w-5"
+    className: "mr-1 !h-5 !w-5"
   }))) : (/*#__PURE__*/React__default.createElement(Tooltip, {
     title: texts.table3.editing.saving.complete
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    name: "tick",
-    className: "!text-grey-700 mr-1 !h-5 !w-5"
+  }, /*#__PURE__*/React__default.createElement(BadgeIcon, {
+    icon: "tick",
+    color: "green",
+    subtle: true,
+    className: "mr-1"
   })))));
 }
 
@@ -19530,17 +19530,7 @@ function Alert$1(props) {
   const validationTexts = texts.table3.editing.validation;
   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]);
+  const pendingChangesWithErrors = tableMeta.editing.getAlertErrors();
   function scrollToRow(rowIndex) {
     tableMeta.rowActive.setRowActiveIndex(rowIndex);
     scrollToIndex(rowIndex, {
@@ -19662,7 +19652,7 @@ function CreateNewRowButton(props) {
   });
   const handleKeyDown = event => {
     if (!tableMeta.editing.hasChanges() && event.key === 'Tab') {
-      !tableMeta.editing.saveChanges();
+      tableMeta.editing.saveChanges();
     }
   };
   const handleCreate = function () {
@@ -19784,14 +19774,14 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
     'data-table-editing-mode': (_table3$meta$editing = table3.meta.editing) !== null && _table3$meta$editing !== void 0 && _table3$meta$editing.isEditing ? (_table3$meta$editing2 = table3.meta.editing) !== null && _table3$meta$editing2 !== void 0 && _table3$meta$editing2.isDetailedMode ? 'detailed' : 'normal' : undefined,
     enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing
   };
-  const hasValidationErrors = table3.meta.editing.hasErrors(table3.instance, table3.ref);
+  const hasAlertErrors = table3.meta.editing.hasAlertErrors();
   const showCreateRowButton = table3.meta.editing.isEnabled && props.onEditingCreate;
   return /*#__PURE__*/React__default.createElement(Table, null, /*#__PURE__*/React__default.createElement(Table.Toolbar, {
     table: table3
   }, table3.meta.editing.isEnabled ? (/*#__PURE__*/React__default.createElement(Editing, {
     scrollToIndex: table3.renderer.scrollToIndex,
     table: table3.instance
-  })) : null), hasValidationErrors ? (/*#__PURE__*/React__default.createElement(Alert$1, {
+  })) : null), hasAlertErrors ? (/*#__PURE__*/React__default.createElement(Alert$1, {
     className: "mb-4",
     scrollToIndex: table3.renderer.scrollToIndex,
     table: table3.instance,