@economic/taco 2.2.5 → 2.4.0

package/dist/taco.cjs.development.js

@@ -4182,7 +4182,16 @@ const defaultLocalisationTexts = {
         isNoneOf: 'Is none of',
         isAllOf: 'Is all of',
         isEmpty: 'Is empty',
-        isNotEmpty: 'Is not empty'
+        isNotEmpty: 'Is not empty',
+        isBefore: 'Is before',
+        isAfter: 'Is after',
+        isOnOrBefore: 'Is on or before',
+        isOnOrAfter: 'Is on or after',
+        isLessThanOrEqualTo: 'Is less than or equal to',
+        isGreaterThanOrEqualTo: 'Is greater than or equal to',
+        hasAnyOf: 'Has any of',
+        hasAllOf: 'Has all of',
+        hasNoneOf: 'Has none of'
       },
       conditions: {
         and: 'And',
@@ -4249,6 +4258,9 @@ const defaultLocalisationTexts = {
       selectAllRows: 'Select all rows',
       expandRow: 'Expand current row',
       collapseRow: 'Collapse current row'
+    },
+    otherOptions: {
+      tooltip: 'Other options'
     }
   },
   searchInput: {
@@ -7228,6 +7240,35 @@ const Content$8 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref)
     ...otherProps
   } = props;
   const className = cn('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);
+  // attach refs to each child
+  const childrenRefs = React.useRef([]);
+  const childrenWithRefs = React.Children.toArray(props.children).filter(child => !!child) // remove falsey children
+  .map((child, index) => {
+    childrenRefs.current[index] = /*#__PURE__*/React.createRef();
+    return /*#__PURE__*/React.cloneElement(child, {
+      ref: childrenRefs.current[index]
+    });
+  });
+  // register any shortcuts attached to children
+  React.useEffect(() => {
+    const shortcuts = [];
+    childrenWithRefs.forEach((child, index) => {
+      if (child.props.shortcut) {
+        shortcuts.push(createShortcutKeyDownHandler(child.props.shortcut, event => {
+          event.preventDefault();
+          menu === null || menu === void 0 ? void 0 : menu.open();
+          setTimeout(() => {
+            var _childrenRefs$current, _childrenRefs$current2;
+            return (_childrenRefs$current = childrenRefs.current[index]) === null || _childrenRefs$current === void 0 ? void 0 : (_childrenRefs$current2 = _childrenRefs$current.current) === null || _childrenRefs$current2 === void 0 ? void 0 : _childrenRefs$current2.click();
+          }, 1);
+        }));
+      }
+    });
+    shortcuts.forEach(handler => document.addEventListener('keydown', handler));
+    return () => {
+      shortcuts.forEach(handler => document.removeEventListener('keydown', handler));
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Portal, null, /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Content, Object.assign({}, otherProps, {
     align: align,
     className: className,
@@ -7238,7 +7279,7 @@ const Content$8 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref)
       minWidth: menu === null || menu === void 0 ? void 0 : menu.minWidth
     },
     ref: internalRef
-  }), children));
+  }), childrenWithRefs));
 });
 
 const replaceWithShortform = key => {
@@ -7249,7 +7290,7 @@ const replaceWithShortform = key => {
       return 'Del';
     case 'Space':
     case ' ':
-      return '␣';
+      return 'Space';
     case 'ArrowLeft':
       return '◄';
     case 'ArrowRight':
@@ -7663,6 +7704,7 @@ const Menu$1 = /*#__PURE__*/React.forwardRef(function Menu(externalProps, ref) {
     registerIndentation: () => setIndented(true),
     minWidth,
     setMinWidth: width => setMinWidth(width),
+    open: () => setOpen(true),
     close: () => setOpen(false)
   }), [indented, minWidth]);
   return /*#__PURE__*/React.createElement(MenuContext.Provider, {
@@ -8724,14 +8766,21 @@ const ToastProvider = ({
 };
 const useToast = () => React.useContext(ToastContext);
 
+const TacoContext = /*#__PURE__*/React.createContext({
+  uniqueUserIdentifier: ''
+});
 const Provider = props => {
   const {
     children,
-    localization
+    localization,
+    settings
   } = props;
+  const context = React.useMemo(() => settings, [JSON.stringify(settings)]);
   return /*#__PURE__*/React.createElement(LocalizationProvider, {
     localization: localization
-  }, /*#__PURE__*/React.createElement(TooltipPrimitive.Provider, null, /*#__PURE__*/React.createElement(ToastProvider, null, children)));
+  }, /*#__PURE__*/React.createElement(TacoContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement(TooltipPrimitive.Provider, null, /*#__PURE__*/React.createElement(ToastProvider, null, children))));
 };
 
 const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
@@ -9468,16 +9517,25 @@ const EditPopover = props => {
     setColor(initialColor);
   };
   const preventKeyDownPropagation = event => {
-    if (event.key !== 'Escape') {
+    // Need to allow 'Escape', 'Tab', 'Shift + Tab' to support default focus and close behaviour of Radix Popover.
+    if (event.key === 'Escape' || event.key === 'Tab' || event.key === 'Tab' && event.shiftKey) {
+      return;
+    } else {
       event.stopPropagation();
     }
   };
-  return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
-    modal: true
-  }), /*#__PURE__*/React__default.createElement(Popover.Content, {
+  const popoverContentKeyDown = event => {
+    // Need to stop propagation of 'Tab', 'Shift + Tab' keys out of Popover content,
+    // to avoid 'Tab' key execution on Option component and closing the dropdown.
+    if (event.key === 'Tab' || event.key === 'Tab' && event.shiftKey) {
+      event.stopPropagation();
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, {
     onCloseAutoFocus: handleCloseAutoFocus,
     onInteractOutside: handleInteractOutside,
     onClick: event => event.stopPropagation(),
+    onKeyDown: popoverContentKeyDown,
     placement: "right",
     tabIndex: -1,
     className: "focus:!shadow-none"
@@ -9984,7 +10042,8 @@ const Search$1 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
     searchQuery,
     setSearchQuery,
     setValidationError,
-    validationError
+    validationError,
+    setOpen
   } = useSelect2Context();
   const handleChange = event => {
     if (validationError) {
@@ -9997,6 +10056,11 @@ const Search$1 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
     if (event.key === ' ') {
       return;
     }
+    // Select2 should close dropdown and receive focus, when user press Tab while searching (UX requirement to support better keyboard navigation)
+    if (event.key === 'Tab') {
+      setOpen(false);
+      return;
+    }
     if (isAriaSelectionKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       var _listboxRef$current;
       event.preventDefault();
@@ -10287,7 +10351,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     var _listboxRef$current;
     if (open) {
       event.preventDefault();
-    } else if (event.key === 'ArrowDown') {
+    } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {
       setOpen(true);
     }
     // the focus should always remain on the input, so we forward events on to the listbox
@@ -15695,20 +15759,6 @@ function isMenuAvailable(table, header) {
   const tableMeta = table.options.meta;
   return !!((_header$column$column = header.column.columnDef.meta) !== null && _header$column$column !== void 0 && _header$column$column.menu) || !!tableMeta.columnFreezing.isEnabled || !!table.options.enableHiding && !!header.column.getCanHide() || isGotoAvailable(table, header);
 }
-function getInitialFrozenIndex(table) {
-  const tableMeta = table.options.meta;
-  let index = 0;
-  if (tableMeta.rowDrag.isEnabled) {
-    index++;
-  }
-  if (table.options.enableRowSelection) {
-    index++;
-  }
-  if (table.options.enableExpanding) {
-    index++;
-  }
-  return index;
-}
 function Menu$3(props) {
   const {
     canFreeze,
@@ -15770,7 +15820,8 @@ function Menu$3(props) {
     if (handleGoto) {
       menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
         icon: "move",
-        onClick: () => setPopover('goto')
+        onClick: () => setPopover('goto'),
+        shortcut: "g"
       }, texts.table3.columns.menu.gotoRow, "..."));
     }
     if (canHide) {
@@ -15782,10 +15833,8 @@ function Menu$3(props) {
       }, texts.table3.columns.menu.hideColumn));
     }
     if (canFreeze) {
-      const handleClick = () => {
-        tableMeta.columnFreezing.setFrozenColumnIndex(index);
-      };
-      const frozenIndex = index - getInitialFrozenIndex(table);
+      const frozenIndex = index - tableMeta.columnFreezing.frozenInternalColumnCount;
+      const handleClick = () => tableMeta.columnFreezing.setFrozenColumnIndex(frozenIndex);
       menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
         icon: "column-freeze",
         onClick: handleClick
@@ -16069,10 +16118,10 @@ function DisplayCell(props) {
   }, [row.original, props.children, value]);
   const memoedHighlight = React__default.useMemo(() => {
     var _tableMeta$search$que;
-    if (!tableMeta.search.isHighlightingEnabled) {
+    if (!tableMeta.search.isHighlightingEnabled || !columnMeta.enableSearch) {
       return false;
     }
-    if ((_tableMeta$search$que = tableMeta.search.query) !== null && _tableMeta$search$que !== void 0 && _tableMeta$search$que.length && columnMeta.enableSearch) {
+    if ((_tableMeta$search$que = tableMeta.search.query) !== null && _tableMeta$search$que !== void 0 && _tableMeta$search$que.length) {
       return isCellHighlighted(tableMeta.search.query, value, memoedProps.children);
     }
     return false;
@@ -16603,11 +16652,13 @@ var Table3FilterComparator;
   Table3FilterComparator[Table3FilterComparator["IsGreaterThan"] = 4] = "IsGreaterThan";
   Table3FilterComparator[Table3FilterComparator["IsLessThan"] = 5] = "IsLessThan";
   Table3FilterComparator[Table3FilterComparator["IsBetween"] = 6] = "IsBetween";
-  Table3FilterComparator[Table3FilterComparator["IsOneOf"] = 7] = "IsOneOf";
-  Table3FilterComparator[Table3FilterComparator["IsNoneOf"] = 8] = "IsNoneOf";
-  Table3FilterComparator[Table3FilterComparator["IsAllOf"] = 9] = "IsAllOf";
-  Table3FilterComparator[Table3FilterComparator["IsEmpty"] = 10] = "IsEmpty";
-  Table3FilterComparator[Table3FilterComparator["IsNotEmpty"] = 11] = "IsNotEmpty";
+  Table3FilterComparator[Table3FilterComparator["IsEmpty"] = 7] = "IsEmpty";
+  Table3FilterComparator[Table3FilterComparator["IsNotEmpty"] = 8] = "IsNotEmpty";
+  Table3FilterComparator[Table3FilterComparator["IsLessThanOrEqualTo"] = 9] = "IsLessThanOrEqualTo";
+  Table3FilterComparator[Table3FilterComparator["IsGreaterThanOrEqualTo"] = 10] = "IsGreaterThanOrEqualTo";
+  Table3FilterComparator[Table3FilterComparator["HasAnyOf"] = 11] = "HasAnyOf";
+  Table3FilterComparator[Table3FilterComparator["HasAllOf"] = 12] = "HasAllOf";
+  Table3FilterComparator[Table3FilterComparator["HasNoneOf"] = 13] = "HasNoneOf";
 })(Table3FilterComparator || (Table3FilterComparator = {}));
 
 const toLowerCase$1 = value => String(value !== null && value !== void 0 ? value : '').toLocaleLowerCase();
@@ -16669,6 +16720,24 @@ function columnFilterFn$1(value, filter) {
             return !isNaN(valueAsNumber) && filter.value !== undefined && valueAsNumber < filter.value;
           }
         }
+      case Table3FilterComparator.IsLessThanOrEqualTo:
+        {
+          if (dateFns.isDate(value)) {
+            return dateFns.isDate(filter.value) && (dateFns.isBefore(value, filter.value) || dateFns.isEqual(value, filter.value));
+          } else {
+            const valueAsNumber = parseInt(value);
+            return !isNaN(valueAsNumber) && filter.value !== undefined && valueAsNumber <= filter.value;
+          }
+        }
+      case Table3FilterComparator.IsGreaterThanOrEqualTo:
+        {
+          if (dateFns.isDate(value)) {
+            return dateFns.isDate(filter.value) && (dateFns.isAfter(value, filter.value) || dateFns.isEqual(value, filter.value));
+          } else {
+            const valueAsNumber = parseInt(value);
+            return !isNaN(valueAsNumber) && filter.value !== undefined && valueAsNumber >= filter.value;
+          }
+        }
       case Table3FilterComparator.IsBetween:
         {
           const [fromValue, toValue] = filter.value;
@@ -16692,11 +16761,11 @@ function columnFilterFn$1(value, filter) {
             return true;
           }
         }
-      case Table3FilterComparator.IsOneOf:
-        return Array.isArray(filter.value) ? filter.value.includes(value) : false;
-      case Table3FilterComparator.IsNoneOf:
-        return Array.isArray(filter.value) ? filter.value.includes(value) === false : false;
-      case Table3FilterComparator.IsAllOf:
+      case Table3FilterComparator.HasAnyOf:
+        return Array.isArray(filter.value) && Array.isArray(value) ? filter.value.some(item => value.includes(item)) : false;
+      case Table3FilterComparator.HasNoneOf:
+        return Array.isArray(filter.value) && Array.isArray(value) ? filter.value.every(item => value.includes(item) === false) : false;
+      case Table3FilterComparator.HasAllOf:
         return Array.isArray(filter.value) && Array.isArray(value) ? filter.value.filter(v => value.includes(v)).length === filter.value.length : false;
     }
     return false;
@@ -16744,8 +16813,8 @@ function useCurrentRowListener(table) {
   }, [rows.length]);
 }
 
-function getDefaultFrozenIndex(options, defaultFrozenIndex = -1) {
-  let index = defaultFrozenIndex;
+function getFrozenInternalColumnCount(options) {
+  let index = 0;
   if (options.enableRowDrag) {
     index++;
   }
@@ -16755,7 +16824,7 @@ function getDefaultFrozenIndex(options, defaultFrozenIndex = -1) {
   if (options.enableRowExpansion) {
     index++;
   }
-  return index >= 0 ? index : undefined;
+  return index;
 }
 /*
 Because of the desired behaviour of column freezing we use custom state and just an index.
@@ -16763,7 +16832,7 @@ If a frozen column is, for example, hidden, then the desired behaviour is that t
 If this behaviour were different we would just use the native column pinning functionality
 */
 function useColumnFreezing(defaultFrozenIndex, options) {
-  const [frozenColumnIndex, _setFrozenColumnIndex] = React__default.useState(getDefaultFrozenIndex(options, defaultFrozenIndex));
+  const [frozenColumnIndex, _setFrozenColumnIndex] = React__default.useState(() => defaultFrozenIndex);
   const [horizontallyScrolled, setHorizontallyScrolled] = React__default.useState(false);
   const onScroll = event => {
     if (event.currentTarget.scrollLeft > 0 && !horizontallyScrolled) {
@@ -16772,11 +16841,13 @@ function useColumnFreezing(defaultFrozenIndex, options) {
       setHorizontallyScrolled(false);
     }
   };
-  const setFrozenColumnIndex = index => {
-    _setFrozenColumnIndex(index !== null && index !== void 0 ? index : getDefaultFrozenIndex(options));
-  };
+  const frozenInternalColumnCount = React__default.useMemo(() => getFrozenInternalColumnCount(options), []);
+  // we must set a value when undefined is explicitly set, otherwise nothing is saved to settings
+  // and the next time the table loads it will fall back to the initial value even though the user changed it
+  const setFrozenColumnIndex = index => _setFrozenColumnIndex(index !== null && index !== void 0 ? index : -1);
   return {
     isEnabled: options.enableColumnFreezing,
+    frozenInternalColumnCount,
     frozenColumnIndex,
     setFrozenColumnIndex,
     horizontallyScrolled,
@@ -16784,6 +16855,7 @@ function useColumnFreezing(defaultFrozenIndex, options) {
   };
 }
 function useColumnFreezingStyle(tableId, table) {
+  var _tableMeta$columnFree;
   const {
     columnOrder,
     columnSizing,
@@ -16791,9 +16863,10 @@ function useColumnFreezingStyle(tableId, table) {
     columnVisibility
   } = table.getState();
   const tableMeta = table.options.meta;
+  const frozenColumnIndex = ((_tableMeta$columnFree = tableMeta.columnFreezing.frozenColumnIndex) !== null && _tableMeta$columnFree !== void 0 ? _tableMeta$columnFree : -1) + tableMeta.columnFreezing.frozenInternalColumnCount;
   const style = React__default.useMemo(() => {
-    if (tableMeta.columnFreezing.isEnabled && tableMeta.columnFreezing.frozenColumnIndex !== undefined) {
-      const visibleFrozenColumns = table.getVisibleLeafColumns().slice(0, tableMeta.columnFreezing.frozenColumnIndex + 1).map(column => column.id);
+    if (tableMeta.columnFreezing.isEnabled && frozenColumnIndex !== undefined) {
+      const visibleFrozenColumns = table.getVisibleLeafColumns().slice(0, frozenColumnIndex + 1).map(column => column.id);
       // if all frozen columns haven't had their size set yet, then abort
       if (visibleFrozenColumns.every(id => columnSizing[id] === undefined)) {
         return undefined;
@@ -16803,26 +16876,26 @@ function useColumnFreezingStyle(tableId, table) {
         offsets[columnId] = offset;
         return offset + columnSizing[columnId];
       }, 0);
-      const styles = [Object.values(offsets).map((offset, index) => `#${tableId} [role="row"] > :nth-child(${index + 1}) { left: ${offset}px }`).join('\n'), `#${tableId} [role="row"] > :not(:nth-child(n+${tableMeta.columnFreezing.frozenColumnIndex + 2})) {
+      const styles = [Object.values(offsets).map((offset, index) => `#${tableId} [role="row"] > :nth-child(${index + 1}) { left: ${offset}px }`).join('\n'), `#${tableId} [role="row"] > :not(:nth-child(n+${frozenColumnIndex + 2})) {
                     position: sticky;
-                    z-index: 20; 
-                }`, `#${tableId}[data-horizontally-scrolled="true"] [role="row"] > :nth-child(${tableMeta.columnFreezing.frozenColumnIndex + 1}) {
+                    z-index: 20;
+                }`, `#${tableId}[data-horizontally-scrolled="true"] [role="row"] > :nth-child(${frozenColumnIndex + 1}) {
                     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 6px 0px 6px rgb(0 0 0/8%), 1px 0px 0px #DDDDDD;
                 }`];
-      const columnId = visibleFrozenColumns[tableMeta.columnFreezing.frozenColumnIndex];
+      const columnId = visibleFrozenColumns[frozenColumnIndex];
       // frozenColumnIndex could not be in the visible frozen column so it is important to check if columnId
       // exists before checking if it is internal.
       //
       // only add a border to the edge column if it isn't an internal column
       if (columnId && !isInternalColumn$1(columnId)) {
-        styles.push(`#${tableId}[data-horizontally-scrolled="false"] [role="row"] > :nth-child(${tableMeta.columnFreezing.frozenColumnIndex + 1}) {
+        styles.push(`#${tableId}[data-horizontally-scrolled="false"] [role="row"] > :nth-child(${frozenColumnIndex + 1}) {
                     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 1px 0px 0px #DDDDDD;
                 }`);
       }
       return styles.join('\n');
     }
     return undefined;
-  }, [columnOrder, columnSizing, columnSizingInfo, columnVisibility, tableMeta.columnFreezing.isEnabled, tableMeta.columnFreezing.frozenColumnIndex]);
+  }, [columnOrder, columnSizing, columnSizingInfo, columnVisibility, tableMeta.columnFreezing.isEnabled, frozenColumnIndex]);
   return style;
 }
 
@@ -17662,7 +17735,12 @@ const Cell$4 = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
       }
       tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;
     };
-    return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, context), /*#__PURE__*/React__default.createElement(Checkbox, {
+    return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, context), /*#__PURE__*/React__default.createElement(Tooltip, {
+      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,
@@ -17670,7 +17748,7 @@ const Cell$4 = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
       // this is necessary to remove console spam from eslint
       onChange: () => false,
       tabIndex: isCurrentRow ? 0 : -1
-    }));
+    })));
   } else {
     const className = cn('!mt-0', getRadioClassnames());
     const handleClick = event => {
@@ -17897,7 +17975,7 @@ function getSortingFn$1(dataType, customFnOrBuiltIn) {
     return customFnOrBuiltIn;
   }
   // some times we alias based on the type
-  if (dataType && dataType !== 'boolean') {
+  if (dataType && dataType !== 'boolean' && dataType !== 'number') {
     return dataType;
   }
   // otherwise fall back to auto
@@ -17952,11 +18030,9 @@ function useConvertChildrenToColumns(props, options, editing) {
           control: child.props.control,
           dataType: child.props.dataType,
           enableOrdering: (_child$props$enableOr = child.props.enableOrdering) !== null && _child$props$enableOr !== void 0 ? _child$props$enableOr : true,
-          // react-table global filtering only samples from row 0 in a dataset for filtering and this
-          // leads to some columns being disabled if, e.g., a column in row 0 has an undefined value
-          // so we do not use the native enableGlobalFilter property and instead use our own enableSearch
           enableSearch: (_child$props$enableSe = child.props.enableSearch) !== null && _child$props$enableSe !== void 0 ? _child$props$enableSe : true,
           enableTruncate: (_child$props$enableTr = child.props.enableTruncate) !== null && _child$props$enableTr !== void 0 ? _child$props$enableTr : false,
+          filters: child.props.filters,
           footer: child.props.footer,
           header: child.props.header,
           headerClassName: child.props.headerClassName,
@@ -18114,8 +18190,54 @@ function useRowActions$1(actionsForRow, actionsForRowLength = ACTIONS_ON_ROW_LEN
   };
 }
 
+const useLocalStorage = (key, initialValue) => {
+  const [state, setState] = React__default.useState(() => {
+    try {
+      const localStorageValue = localStorage.getItem(key);
+      if (typeof localStorageValue !== 'string') {
+        localStorage.setItem(key, JSON.stringify(initialValue));
+        return initialValue;
+      } else {
+        return JSON.parse(localStorageValue || 'null');
+      }
+    } catch {
+      // If user is in private mode or has storage restriction
+      // localStorage can throw. JSON.parse and JSON.stringify
+      // can throw, too.
+      return initialValue;
+    }
+  });
+  React__default.useEffect(() => {
+    try {
+      const serializedState = JSON.stringify(state);
+      localStorage.setItem(key, serializedState);
+    } catch {
+      // If user is in private mode or has storage restriction
+      // localStorage can throw. Also JSON.stringify can throw.
+    }
+  }, [key, state]);
+  const clear = () => localStorage.removeItem(key);
+  return [state, setState, clear];
+};
+
+function useTacoSettings() {
+  return React__default.useContext(TacoContext);
+}
+
+function useSettings(id, defaultSettings = {}, onChangeSettings) {
+  const tacoSettings = useTacoSettings();
+  const uniqueId = `taco.${tacoSettings.uniqueUserIdentifier}.table3.${id}.settings`;
+  const [persistedSettings, setPersistedSettings] = useLocalStorage(uniqueId, defaultSettings);
+  return React__default.useMemo(() => {
+    if (onChangeSettings) {
+      return [defaultSettings, onChangeSettings];
+    }
+    return [persistedSettings, setPersistedSettings];
+  }, []);
+}
+
 function useTable$2(props) {
-  var _ref, _props$defaultSetting, _props$defaultSetting2, _props$defaultSetting3, _props$defaultSetting4, _props$defaultSetting5, _props$defaultSetting6, _props$defaultSetting7, _props$defaultSetting8, _props$defaultSetting9, _props$length;
+  var _ref, _defaultSettings$colu, _defaultSettings$rowH, _props$length;
   // options
   const options = useTablePreset(props);
   const tableOptions = {
@@ -18153,6 +18275,10 @@ function useTable$2(props) {
       return false;
     };
     tableOptions.getFilteredRowModel = reactTable$1.getFilteredRowModel();
+    tableOptions.getColumnCanGlobalFilter = column => {
+      var _column$columnDef$met;
+      return (_column$columnDef$met = column.columnDef.meta.enableSearch) !== null && _column$columnDef$met !== void 0 ? _column$columnDef$met : true;
+    };
   }
   // sorting
   if (options.enableSorting) {
@@ -18163,24 +18289,25 @@ function useTable$2(props) {
       tableOptions.getSortedRowModel = reactTable$1.getSortedRowModel();
     }
   }
+  const [defaultSettings, setSettings] = useSettings(props.id, props.defaultSettings, props.onChangeSettings);
   // custom features
   const columnFreezing = useColumnFreezing( // temporarily see if deprecated frozenColumnCount is there
-  (_ref = (_props$defaultSetting = (_props$defaultSetting2 = props.defaultSettings) === null || _props$defaultSetting2 === void 0 ? void 0 : _props$defaultSetting2.columnFreezingIndex) !== null && _props$defaultSetting !== void 0 ? _props$defaultSetting : (_props$defaultSetting3 = props.defaultSettings) === null || _props$defaultSetting3 === void 0 ? void 0 : _props$defaultSetting3.frozenColumnCount) !== null && _ref !== void 0 ? _ref : props.defaultColumnFreezingIndex, options);
+  (_ref = (_defaultSettings$colu = defaultSettings.columnFreezingIndex) !== null && _defaultSettings$colu !== void 0 ? _defaultSettings$colu : defaultSettings === null || defaultSettings === void 0 ? void 0 : defaultSettings.frozenColumnCount) !== null && _ref !== void 0 ? _ref : props.defaultColumnFreezingIndex, options);
   const columnOrdering = useColumnOrdering(options);
   const currentRow = useCurrentRow(props.defaultCurrentRowIndex);
   const editing = useEditing(options.enableEditing, props.onSave);
-  const fontSize = useFontSize(options.enableFontSize, (_props$defaultSetting4 = props.defaultSettings) === null || _props$defaultSetting4 === void 0 ? void 0 : _props$defaultSetting4.fontSize);
+  const fontSize = useFontSize(options.enableFontSize, defaultSettings.fontSize);
   const hoverState = usePauseHoverState();
-  const printing = usePrinting(options.enablePrinting, props.loadAll, (_props$defaultSetting5 = props.defaultSettings) === null || _props$defaultSetting5 === void 0 ? void 0 : _props$defaultSetting5.showWarningWhenPrintingLargeDataset);
+  const printing = usePrinting(options.enablePrinting, props.loadAll, defaultSettings.showWarningWhenPrintingLargeDataset);
   const rowActions = useRowActions$1(props.actionsForRow, props.actionsForRowLength);
   const rowClick = useRowClick(props.onRowClick);
   const rowDrag = useRowDrag(options.enableRowDrag);
   const rowDrop = useRowDrop(options.enableRowDrop, props.onRowDrop);
   const rowGoto = useRowGoto(options.enableRowGoto, props.onRowGoto);
   const rowHeight = useRowHeight(options.enableRowHeight, // temporarily see if deprecated rowDensity is there
-  (_props$defaultSetting6 = (_props$defaultSetting7 = props.defaultSettings) === null || _props$defaultSetting7 === void 0 ? void 0 : _props$defaultSetting7.rowHeight) !== null && _props$defaultSetting6 !== void 0 ? _props$defaultSetting6 : (_props$defaultSetting8 = props.defaultSettings) === null || _props$defaultSetting8 === void 0 ? void 0 : _props$defaultSetting8.rowDensity);
+  (_defaultSettings$rowH = defaultSettings.rowHeight) !== null && _defaultSettings$rowH !== void 0 ? _defaultSettings$rowH : defaultSettings === null || defaultSettings === void 0 ? void 0 : defaultSettings.rowDensity);
   const rowSelection = useRowSelection();
-  const search = useSearch(options.enableSearch, (_props$defaultSetting9 = props.defaultSettings) === null || _props$defaultSetting9 === void 0 ? void 0 : _props$defaultSetting9.excludeUnmatchedRecordsInSearch, props.loadAll);
+  const search = useSearch(options.enableSearch, defaultSettings.excludeUnmatchedRecordsInSearch, props.loadAll);
   // columns
   const {
     columns,
@@ -18190,13 +18317,13 @@ function useTable$2(props) {
   } = useConvertChildrenToColumns(props, options, editing);
   // built-in features
   const initialState = React__default.useMemo(() => {
-    var _props$defaultSetting10, _props$defaultSetting11, _props$defaultSetting12, _props$defaultSetting13, _props$defaultSetting14, _props$defaultSetting15, _props$defaultSetting16;
+    var _defaultSettings$colu2, _defaultSettings$colu3;
     const sanitizeSortedColumns = column => columns.find(definedColumn => definedColumn.id === column.id);
     return {
-      columnOrder: ensureOrdering$1(columns, (_props$defaultSetting10 = props.defaultSettings) === null || _props$defaultSetting10 === void 0 ? void 0 : _props$defaultSetting10.columnOrder),
-      columnSizing: (_props$defaultSetting11 = (_props$defaultSetting12 = props.defaultSettings) === null || _props$defaultSetting12 === void 0 ? void 0 : _props$defaultSetting12.columnSizing) !== null && _props$defaultSetting11 !== void 0 ? _props$defaultSetting11 : defaultColumnSizing,
-      columnVisibility: (_props$defaultSetting13 = (_props$defaultSetting14 = props.defaultSettings) === null || _props$defaultSetting14 === void 0 ? void 0 : _props$defaultSetting14.columnVisibility) !== null && _props$defaultSetting13 !== void 0 ? _props$defaultSetting13 : defaultColumnVisibility,
-      sorting: (_props$defaultSetting15 = props.defaultSettings) !== null && _props$defaultSetting15 !== void 0 && _props$defaultSetting15.sorting ? (_props$defaultSetting16 = props.defaultSettings) === null || _props$defaultSetting16 === void 0 ? void 0 : _props$defaultSetting16.sorting.filter(sanitizeSortedColumns) : defaultSorting
+      columnOrder: ensureOrdering$1(columns, defaultSettings.columnOrder),
+      columnSizing: (_defaultSettings$colu2 = defaultSettings.columnSizing) !== null && _defaultSettings$colu2 !== void 0 ? _defaultSettings$colu2 : defaultColumnSizing,
+      columnVisibility: (_defaultSettings$colu3 = defaultSettings.columnVisibility) !== null && _defaultSettings$colu3 !== void 0 ? _defaultSettings$colu3 : defaultColumnVisibility,
+      sorting: defaultSettings.sorting ? defaultSettings.sorting.filter(sanitizeSortedColumns) : defaultSorting
     };
   }, []);
   const table = reactTable$1.useReactTable({
@@ -18230,7 +18357,7 @@ function useTable$2(props) {
   useEditingStateListener(table);
   useFilteringStateListener(table, props.onFilter);
   useRowSelectionListener$1(table, props.onRowSelect);
-  useSettingsStateListener$1(table, props.onChangeSettings);
+  useSettingsStateListener$1(table, setSettings);
   useShortcutsListener(table, props.shortcuts);
   useServerLoadingListener(table, props.loadPage);
   useSortingStateListener(table, props.onSort);
@@ -18808,12 +18935,12 @@ function resetHighlightedColumnIndexes(enabled, value, table) {
     table.getRowModel().rows.forEach((row, rowIndex) => {
       columns.forEach((column, columnIndex) => {
         try {
-          var _column$columnDef$met, _format, _format2;
-          if ((_column$columnDef$met = column.columnDef.meta) !== null && _column$columnDef$met !== void 0 && _column$columnDef$met.enableSearch && row.original && globalFilterFn$1(
+          var _format, _column$columnDef$met, _format2;
+          if (row.original && globalFilterFn$1(
           // if it's a date, format it first
           dateFns.isDate(row.original[column.id]) ? (_format = format(row.original[column.id])) !== null && _format !== void 0 ? _format : '' :
           // if its marked as a date but isn't a date, try to format it
-          column.columnDef.meta.dataType === 'datetime' ? (_format2 = format(parseFromISOString(row.original[column.id]))) !== null && _format2 !== void 0 ? _format2 : '' :
+          ((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.dataType) === 'datetime' ? (_format2 = format(parseFromISOString(row.original[column.id]))) !== null && _format2 !== void 0 ? _format2 : '' :
           // otherwise just string compare
           String(row.original[column.id]), value)) {
             indexes.push([rowIndex, columnIndex]);
@@ -18865,29 +18992,74 @@ function FilterColumn(props) {
 
 function FilterComparator(props) {
   const {
+    column,
     onChange: handleChange,
     value,
-    validComparators,
     ...attributes
   } = props;
   const {
     texts
   } = useLocalization();
+  const validComparators = guessComparatorsBasedOnControl$1(column);
   React__default.useEffect(() => {
-    if (value === undefined) {
+    if (value === undefined || !validComparators.includes(value)) {
       handleChange === null || handleChange === void 0 ? void 0 : handleChange(validComparators[0]);
     }
-  }, []);
+  }, [validComparators]);
   return /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, attributes, {
     className: "!w-32 flex-shrink-0",
+    disabled: !column,
     onChange: handleChange,
     value: value
-  }), validComparators.map(comp => /*#__PURE__*/React__default.createElement(Select2.Option, {
-    key: comp,
-    value: comp
-  }, getComparatorText$1(comp, texts))));
+  }), validComparators.map(comparator => /*#__PURE__*/React__default.createElement(Select2.Option, {
+    key: comparator,
+    value: comparator
+  }, getComparatorText$1(comparator, texts, column))));
 }
-const getComparatorText$1 = (comparator, texts) => {
+function guessComparatorsBasedOnControl$1(column) {
+  var _column$columnDef$met;
+  const columnMeta = (_column$columnDef$met = column === null || column === void 0 ? void 0 : column.columnDef.meta) !== null && _column$columnDef$met !== void 0 ? _column$columnDef$met : {};
+  if (Array.isArray(columnMeta.filters)) {
+    return columnMeta.filters;
+  }
+  if (typeof columnMeta.control === 'function') {
+    const renderedControl = columnMeta.control({
+      onBlur: () => undefined,
+      onFocus: () => undefined,
+      setValue: () => undefined,
+      value: undefined,
+      disabled: false,
+      readOnly: false,
+      ref: undefined
+    });
+    if ( /*#__PURE__*/React__default.isValidElement(renderedControl)) {
+      const {
+        props,
+        type
+      } = renderedControl;
+      if (type.displayName === 'Select2') {
+        if (props.multiple) {
+          return [Table3FilterComparator.HasAnyOf, Table3FilterComparator.HasAllOf, Table3FilterComparator.IsEqualTo, Table3FilterComparator.HasNoneOf, Table3FilterComparator.IsEmpty, Table3FilterComparator.IsNotEmpty];
+        }
+        return [Table3FilterComparator.IsEqualTo, Table3FilterComparator.IsNotEqualTo, Table3FilterComparator.IsEmpty, Table3FilterComparator.IsNotEmpty];
+      }
+    }
+  }
+  // @ts-expect-error -- we ignore it because it conflicts with Table2 also overridding ColumnMeta
+  if (columnMeta.dataType === 'number') {
+    return [Table3FilterComparator.IsEqualTo, Table3FilterComparator.IsNotEqualTo, Table3FilterComparator.IsGreaterThan, Table3FilterComparator.IsLessThan, Table3FilterComparator.IsBetween, Table3FilterComparator.IsEmpty, Table3FilterComparator.IsNotEmpty];
+  }
+  if (columnMeta.control === 'datepicker' || columnMeta.dataType === 'datetime') {
+    return [Table3FilterComparator.IsEqualTo, Table3FilterComparator.IsNotEqualTo, Table3FilterComparator.IsBetween, Table3FilterComparator.IsLessThan, Table3FilterComparator.IsGreaterThan, Table3FilterComparator.IsEmpty, Table3FilterComparator.IsNotEmpty, Table3FilterComparator.IsLessThanOrEqualTo, Table3FilterComparator.IsGreaterThanOrEqualTo];
+  }
+  if (columnMeta.control === 'switch') {
+    return [Table3FilterComparator.IsEqualTo];
+  }
+  return [Table3FilterComparator.Contains, Table3FilterComparator.DoesNotContain, Table3FilterComparator.IsEqualTo, Table3FilterComparator.IsNotEqualTo, Table3FilterComparator.IsEmpty, Table3FilterComparator.IsNotEmpty];
+}
+function getComparatorText$1(comparator, texts, column) {
+  var _column$columnDef, _column$columnDef$met2;
+  const isDate = (column === null || column === void 0 ? void 0 : (_column$columnDef = column.columnDef) === null || _column$columnDef === void 0 ? void 0 : (_column$columnDef$met2 = _column$columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.control) === 'datepicker';
   switch (comparator) {
     case Table3FilterComparator.Contains:
       return texts.table3.filters.comparators.contains;
@@ -18898,23 +19070,61 @@ const getComparatorText$1 = (comparator, texts) => {
     case Table3FilterComparator.IsNotEqualTo:
       return texts.table3.filters.comparators.isNotEqualTo;
     case Table3FilterComparator.IsGreaterThan:
-      return texts.table3.filters.comparators.isGreaterThan;
+      return isDate ? texts.table3.filters.comparators.isAfter : texts.table3.filters.comparators.isGreaterThan;
     case Table3FilterComparator.IsLessThan:
-      return texts.table3.filters.comparators.isLessThan;
+      return isDate ? texts.table3.filters.comparators.isBefore : texts.table3.filters.comparators.isLessThan;
     case Table3FilterComparator.IsBetween:
       return texts.table3.filters.comparators.isBetween;
-    case Table3FilterComparator.IsOneOf:
-      return texts.table3.filters.comparators.isOneOf;
-    case Table3FilterComparator.IsNoneOf:
-      return texts.table3.filters.comparators.isNoneOf;
-    case Table3FilterComparator.IsAllOf:
-      return texts.table3.filters.comparators.isAllOf;
     case Table3FilterComparator.IsEmpty:
       return texts.table3.filters.comparators.isEmpty;
     case Table3FilterComparator.IsNotEmpty:
       return texts.table3.filters.comparators.isNotEmpty;
+    case Table3FilterComparator.IsLessThanOrEqualTo:
+      return isDate ? texts.table3.filters.comparators.isOnOrBefore : texts.table3.filters.comparators.isLessThanOrEqualTo;
+    case Table3FilterComparator.IsGreaterThanOrEqualTo:
+      return isDate ? texts.table3.filters.comparators.isOnOrAfter : texts.table3.filters.comparators.isGreaterThanOrEqualTo;
+    case Table3FilterComparator.HasAnyOf:
+      return texts.table3.filters.comparators.hasAnyOf;
+    case Table3FilterComparator.HasAllOf:
+      return texts.table3.filters.comparators.hasAllOf;
+    case Table3FilterComparator.HasNoneOf:
+      return texts.table3.filters.comparators.hasNoneOf;
+    default:
+      return '';
   }
-};
+}
+
+function Placeholder(props) {
+  const {
+    allColumns,
+    filters,
+    onCreate: handleCreate,
+    onRemove: handleRemove,
+    position
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-14 flex-shrink-0 items-center justify-end pr-2 text-right"
+  }, position > 0 ? texts.table3.filters.conditions.and : texts.table3.filters.conditions.where), /*#__PURE__*/React__default.createElement(FilterColumn, {
+    allColumns: allColumns,
+    filters: filters,
+    onChange: handleCreate,
+    value: null
+  }), /*#__PURE__*/React__default.createElement(FilterComparator, null), /*#__PURE__*/React__default.createElement(Input, {
+    "aria-label": texts.table3.filters.emptyFilter.value,
+    className: "flex-grow",
+    disabled: true,
+    value: texts.table3.filters.emptyFilter.value
+  }), handleRemove ? /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "discrete",
+    icon: "close",
+    onClick: handleRemove
+  }) : null);
+}
 
 function FilterValue(props) {
   const {
@@ -18923,6 +19133,9 @@ function FilterValue(props) {
     onChange: handleChange,
     value
   } = props;
+  const {
+    texts
+  } = useLocalization();
   if (comparator === Table3FilterComparator.IsEmpty || comparator === Table3FilterComparator.IsNotEmpty) {
     return null;
   }
@@ -18930,6 +19143,14 @@ function FilterValue(props) {
     var _column$columnDef$met;
     const fromValue = Array.isArray(value) ? value[0] : undefined;
     const toValue = Array.isArray(value) ? value[1] : undefined;
+    if (column === undefined) {
+      return /*#__PURE__*/React__default.createElement(Input, {
+        "aria-label": texts.table3.filters.emptyFilter.value,
+        className: "flex-grow",
+        disabled: true,
+        value: texts.table3.filters.emptyFilter.value
+      });
+    }
     if (((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.dataType) === 'datetime') {
       return /*#__PURE__*/React__default.createElement("div", {
         className: "flex flex-grow items-center gap-2"
@@ -18958,6 +19179,7 @@ function FilterValue(props) {
     }));
   }
   return /*#__PURE__*/React__default.createElement(Control$1, {
+    comparator: comparator,
     column: column,
     onChange: handleChange,
     value: value
@@ -18967,12 +19189,18 @@ function Control$1(props) {
   var _column$columnDef$met2, _column$columnDef$met3;
   const {
     column,
+    comparator,
     onChange,
     value,
     ...attributes
   } = props;
   const controlRenderer = (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.control;
   const dataType = (_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.dataType;
+  React.useEffect(() => {
+    if (controlRenderer === 'switch') {
+      onChange(false);
+    }
+  }, []);
   if (typeof controlRenderer === 'function') {
     return controlRenderer({
       ...attributes,
@@ -18984,11 +19212,19 @@ function Control$1(props) {
       onChange: event => onChange(event.detail),
       value: value
     }));
-  } else if (controlRenderer === 'switch' || dataType === 'boolean') {
+  } else if (controlRenderer === 'switch') {
     return /*#__PURE__*/React__default.createElement(Switch, Object.assign({}, attributes, {
+      className: "m-1.5",
       checked: Boolean(value),
       onChange: onChange
     }));
+  } else if ((controlRenderer === 'input' || controlRenderer === undefined) && dataType === 'number') {
+    return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
+      className: cn(getInputAppearanceClassnames(), 'flex-grow'),
+      type: "number",
+      onChange: event => onChange(event.target.valueAsNumber),
+      value: String(value !== null && value !== void 0 ? value : '')
+    }));
   }
   return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
     className: "flex-grow",
@@ -19056,8 +19292,8 @@ function Filter$1(props) {
     onChange: handleChangeColumn,
     value: id
   }), /*#__PURE__*/React__default.createElement(FilterComparator, {
+    column: column,
     onChange: handleChangeComparator,
-    validComparators: guessComparatorsBasedOnControl$1(),
     value: comparator
   }), /*#__PURE__*/React__default.createElement(FilterValue, {
     column: column,
@@ -19071,63 +19307,6 @@ function Filter$1(props) {
     onClick: handleRemove
   }));
 }
-function guessComparatorsBasedOnControl$1(instance, control) {
-  if ( /*#__PURE__*/React__default.isValidElement(instance)) {
-    const {
-      props,
-      type
-    } = instance;
-    if (type.displayName === 'Select2') {
-      if (props.multiple) {
-        return [Table3FilterComparator.IsOneOf, Table3FilterComparator.IsNoneOf, Table3FilterComparator.IsAllOf];
-      }
-      return [Table3FilterComparator.IsEqualTo, Table3FilterComparator.IsNotEqualTo];
-    }
-  }
-  switch (control) {
-    case 'datepicker':
-      return [Table3FilterComparator.IsEqualTo, Table3FilterComparator.IsNotEqualTo, Table3FilterComparator.IsGreaterThan, Table3FilterComparator.IsLessThan, Table3FilterComparator.IsBetween];
-    case 'switch':
-      return [Table3FilterComparator.IsEqualTo];
-    default:
-      return [Table3FilterComparator.Contains, Table3FilterComparator.DoesNotContain, Table3FilterComparator.IsEqualTo, Table3FilterComparator.IsNotEqualTo, Table3FilterComparator.IsEmpty, Table3FilterComparator.IsNotEmpty, Table3FilterComparator.IsGreaterThan, Table3FilterComparator.IsLessThan, Table3FilterComparator.IsBetween];
-  }
-}
-
-function Placeholder(props) {
-  const {
-    allColumns,
-    filters,
-    onCreate: handleCreate,
-    onRemove: handleRemove,
-    position
-  } = props;
-  const {
-    texts
-  } = useLocalization();
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-2"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex w-14 flex-shrink-0 items-center justify-end pr-2 text-right"
-  }, position > 0 ? texts.table3.filters.conditions.and : texts.table3.filters.conditions.where), /*#__PURE__*/React__default.createElement(FilterColumn, {
-    allColumns: allColumns,
-    filters: filters,
-    onChange: handleCreate,
-    value: null
-  }), /*#__PURE__*/React__default.createElement(FilterComparator, {
-    disabled: true,
-    validComparators: guessComparatorsBasedOnControl$1()
-  }), /*#__PURE__*/React__default.createElement(Input, {
-    "aria-label": texts.table3.filters.emptyFilter.value,
-    className: "flex-grow",
-    disabled: true,
-    value: texts.table3.filters.emptyFilter.value
-  }), handleRemove ? /*#__PURE__*/React__default.createElement(IconButton, {
-    appearance: "discrete",
-    icon: "close",
-    onClick: handleRemove
-  }) : null);
-}
 
 function sortByHeader(a, b) {
   var _a$columnDef$meta, _a$columnDef$meta$hea, _a$columnDef$meta$hea2, _b$columnDef$meta;
@@ -19191,7 +19370,9 @@ function Filters(props) {
   //
   const handleApply = () => {
     table.setColumnFilters(filters.filter(f => {
-      if (f.value.comparator === Table3FilterComparator.IsEmpty || f.value.comparator === Table3FilterComparator.IsNotEmpty) {
+      var _allColumns$find$colu;
+      const controlRenderer = (_allColumns$find$colu = allColumns.find(c => c.id === f.id).columnDef.meta) === null || _allColumns$find$colu === void 0 ? void 0 : _allColumns$find$colu.control;
+      if (f.value.comparator === Table3FilterComparator.IsEmpty || f.value.comparator === Table3FilterComparator.IsNotEmpty || controlRenderer === 'switch') {
         return true;
       }
       return !!f.value.value;
@@ -19396,6 +19577,11 @@ const PRINT_STYLES = `
         width: auto !important;
     }
 
+    #root {
+        /* chrome sometimes crops the bottom content of page and this padding will make sure that we see the whole content*/
+        padding-bottom: 20px;
+    }
+
     [role="table"] {
         border-width: 0 !important;
         overflow-y: hidden !important;
@@ -19476,30 +19662,9 @@ function PrintIFrame({
 }) {
   const [contentRef, setContentRef] = React__default.useState(null);
   const [mountNode, setMountNode] = React__default.useState(null);
+  const isFirefoxBrowser = React__default.useMemo(() => navigator.userAgent.toLowerCase().includes('firefox'), []);
   const iframeWindow = contentRef === null || contentRef === void 0 ? void 0 : contentRef.contentWindow;
   const stylesReady = useParentStylesheets(iframeWindow);
-  // Adds print events to the iframe window.
-  React__default.useEffect(() => {
-    if (iframeWindow === null || iframeWindow === undefined) {
-      return;
-    }
-    // Add print events to the window
-    if (onAfterPrint) {
-      iframeWindow.addEventListener('afterprint', onAfterPrint);
-    }
-    if (onBeforePrint) {
-      iframeWindow.addEventListener('beforeprint', onBeforePrint);
-    }
-    return () => {
-      // Remove print events from the window
-      if (onAfterPrint) {
-        iframeWindow.removeEventListener('afterprint', onAfterPrint);
-      }
-      if (onBeforePrint) {
-        iframeWindow.removeEventListener('beforeprint', onBeforePrint);
-      }
-    };
-  }, [iframeWindow]);
   // Calls print method when table has loaded in the iframe.
   React__default.useEffect(() => {
     let intervalId;
@@ -19510,7 +19675,8 @@ function PrintIFrame({
       intervalId = setInterval(function () {
         try {
           const tableWrapper = mountNode;
-          const hasTableRendered = !!tableWrapper.querySelector('[role="table"]');
+          const table = tableWrapper.querySelector('[role="table"]');
+          const hasTableRendered = !!table;
           if (hasTableRendered && intervalId) {
             var _contentRef$contentWi;
             clearInterval(intervalId);
@@ -19519,6 +19685,12 @@ function PrintIFrame({
             // Bug - Even though onBeforePrint is called before printing, the execution doesn't finish before
             // the print dialog shows up, which results into having a visible loading toast.
             onBeforePrint === null || onBeforePrint === void 0 ? void 0 : onBeforePrint();
+            // By adding height to the tableWrapper, we make sure the content below absolutely positioned table
+            // doesn't hide
+            if (isFirefoxBrowser) {
+              const tableHeight = `${table.offsetHeight}px`;
+              tableWrapper.style.height = tableHeight;
+            }
             contentRef === null || contentRef === void 0 ? void 0 : (_contentRef$contentWi = contentRef.contentWindow) === null || _contentRef$contentWi === void 0 ? void 0 : _contentRef$contentWi.print();
             // Calling the onAfterPrint method here as a fallback to do the cleanup, as certain browsers,
             // like Safari, do not trigger the beforeprint or afterprint events when a confirmation dialog
@@ -19557,6 +19729,11 @@ function PrintIFrame({
     tableWrapper.setAttribute('data-role', 'table-wrapper');
     // Adding h-fit class makes sure that table is rendered with the whole content.
     tableWrapper.classList.add('h-fit');
+    tableWrapper.classList.add('[&>[role="table"]]:!h-fit');
+    if (isFirefoxBrowser) {
+      // Fix for firefox bug which adds page-long whitespace between page's top content and table
+      tableWrapper.classList.add('[&>[role="table"]]:!absolute');
+    }
     // Safari print preview assigns no width to the table when w-screen class is used.
     // By assigning table a big static width and hiding the horizontal scrollbar, the table on chrome
     // and safari will always take full page width.
@@ -19603,10 +19780,12 @@ function PrintIFrame({
   };
   // -top-60 -left-60 styles make sure that iframe is added outside of the viewport
   return /*#__PURE__*/React__default.createElement("iframe", {
-    ref: setContentRef,
     className: "fixed -left-60 -top-60 !h-0 !w-0",
     frameBorder: "0",
-    scrolling: "no"
+    ref: setContentRef,
+    scrolling: "no",
+    // Temporary fix to support printing in firefox: Find another solution while upgrading React
+    src: "javascript:void(0);"
   }, mountNode && stylesReady ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Table3, Object.assign({}, printTableProps)), mountNode) : null);
 }
 
@@ -19836,7 +20015,10 @@ function Toolbar(props) {
   }) : null, tableMeta.printing.isEnabled ? /*#__PURE__*/React__default.createElement(PrintButton, {
     table: table,
     tableProps: tableProps
-  }) : null, right, isMoreVisible(props) ? /*#__PURE__*/React__default.createElement(IconButton, {
+  }) : null, right, isMoreVisible(props) ? /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: texts.table3.otherOptions.tooltip
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": texts.table3.otherOptions.tooltip,
     icon: "more",
     menu: menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, {
       align: "end"
@@ -19851,7 +20033,7 @@ function Toolbar(props) {
         table: table
       })
     }, texts.table3.fontSize.tooltip) : null))
-  }) : null, tableMeta.search.isEnabled ? /*#__PURE__*/React__default.createElement(Search$3, {
+  })) : null, tableMeta.search.isEnabled ? /*#__PURE__*/React__default.createElement(Search$3, {
     scrollToIndex: scrollToIndex,
     table: table
   }) : null));
@@ -20222,9 +20404,10 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   }, EmptyState ? /*#__PURE__*/React__default.createElement(EmptyState, null) : null)));
 });
 const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
+  const stringifiedChildren = String(props.children);
   // we force a remount (using key) when the child columns change because there are too many places to add children as an effect
   // this is cheaper from a complexity perspective, and probably performance wise as well
-  const key = React__default.useMemo(() => String('tableKey_' + String(props.children)), [props.children]);
+  const key = React__default.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);
   return /*#__PURE__*/React__default.createElement(Table$1, Object.assign({}, props, {
     key: key,
     ref: ref
@@ -21269,6 +21452,7 @@ exports.Table = Table;
 exports.Table2 = Table2;
 exports.Table3 = Table3;
 exports.Tabs = Tabs;
+exports.TacoContext = TacoContext;
 exports.Tag = Tag$1;
 exports.Textarea = Textarea;
 exports.Title = Title$3;