@economic/taco 2.3.0 → 2.4.1

package/dist/taco.cjs.development.js

@@ -3707,9 +3707,9 @@ const useMergedRef = ref => {
   return internalRef;
 };
 
-const WHITELISTED_ELEMENTS = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT'];
+const INTERACTIVE_ELEMENTS = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT'];
 function isEventTriggeredOnInteractiveElement(eventTarget) {
-  return WHITELISTED_ELEMENTS.includes(eventTarget.tagName);
+  return INTERACTIVE_ELEMENTS.includes(eventTarget.tagName);
 }
 function createShortcutKeyDownHandler(key, handler) {
   return function (event) {
@@ -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: {
@@ -4854,7 +4866,7 @@ const useListScrollTo = (internalRef, itemRefs) => {
 
 const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
   const {
-    delay = 500,
+    delay = 350,
     label,
     ...otherProps
   } = props;
@@ -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({
@@ -8798,9 +8847,10 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
   const {
     findCurrent,
     findTotal,
+    loading = false,
+    onChange: handleChange,
     onClickFindNext: handleClickFindNext,
     onClickFindPrevious: handleClickFindPrevious,
-    onSearch: handleSearch,
     settingsContent,
     shortcut,
     value,
@@ -8808,13 +8858,11 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
   } = props;
   const internalRef = useMergedRef(ref);
   const settingsRef = React__default.useRef(null);
-  const [internalValue, setInternalValue] = React__default.useState(value !== null && value !== void 0 ? value : '');
   const [focused, setFocused] = React__default.useState(false);
   const {
     texts
   } = useLocalization();
   const isActive = value === null || value === void 0 ? void 0 : value.length;
-  const isSynced = internalValue === value;
   const hasFind = handleClickFindNext && handleClickFindPrevious && findCurrent !== undefined && findTotal !== undefined;
   useGlobalKeyDown(shortcut, event => {
     if (document.activeElement !== internalRef.current) {
@@ -8823,39 +8871,25 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
       (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
     }
   });
-  const handleSubmit = () => {
-    handleSearch(internalValue);
-  };
   const handleBlur = event => {
     var _settingsRef$current, _attributes$onBlur;
-    // trigger searches when leaving the field
-    if (!isSynced) {
-      handleSubmit();
-    }
     if (settingsRef.current && (settingsRef.current === event.relatedTarget || (_settingsRef$current = settingsRef.current) !== null && _settingsRef$current !== void 0 && _settingsRef$current.contains(event.relatedTarget))) {
       return;
     }
     setFocused(false);
     (_attributes$onBlur = attributes.onBlur) === null || _attributes$onBlur === void 0 ? void 0 : _attributes$onBlur.call(attributes, event);
   };
-  const handleChange = event => {
-    setInternalValue(event.target.value);
-    if (!event.target.value) {
-      handleClear();
-    }
-  };
   const handleClear = () => {
     requestAnimationFrame(() => {
       var _internalRef$current2;
       return (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 ? void 0 : _internalRef$current2.focus();
     });
-    setInternalValue('');
-    handleSearch('');
+    handleChange('');
   };
   const handleFocus = event => {
     var _attributes$onFocus;
-    (_attributes$onFocus = attributes.onFocus) === null || _attributes$onFocus === void 0 ? void 0 : _attributes$onFocus.call(attributes, event);
     setFocused(true);
+    (_attributes$onFocus = attributes.onFocus) === null || _attributes$onFocus === void 0 ? void 0 : _attributes$onFocus.call(attributes, event);
   };
   const handleKeyDown = event => {
     var _props$onKeyDown;
@@ -8865,14 +8899,12 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     }
     if (event.key === 'Enter') {
       event.preventDefault();
-      if (hasFind && isActive && isSynced) {
+      if (hasFind && isActive) {
         if (event.shiftKey) {
           handleClickFindPrevious === null || handleClickFindPrevious === void 0 ? void 0 : handleClickFindPrevious();
         } else {
           handleClickFindNext === null || handleClickFindNext === void 0 ? void 0 : handleClickFindNext();
         }
-      } else {
-        handleSearch(internalValue);
       }
       return;
     }
@@ -8882,8 +8914,8 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     }
   };
   let postfix;
-  if (!attributes.disabled && !attributes.readOnly && (internalValue || focused)) {
-    if (internalValue) {
+  if (!attributes.disabled && !attributes.readOnly && (value || focused)) {
+    if (value) {
       postfix = /*#__PURE__*/React__default.createElement(IconButton, {
         "aria-label": texts.searchInput.clear,
         className: "scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125",
@@ -8898,7 +8930,9 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     if (hasFind && isActive) {
       postfix = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
         className: "text-grey-700 flex h-4 items-center border-r border-black/[0.25] pr-2"
-      }, findCurrent !== null && findCurrent !== void 0 ? findCurrent : 0, "/", findTotal !== null && findTotal !== void 0 ? findTotal : 0), findCurrent ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
+      }, loading ? /*#__PURE__*/React__default.createElement(Spinner, {
+        className: "h-4 w-4"
+      }) : `${findCurrent !== null && findCurrent !== void 0 ? findCurrent : 0}/${findTotal !== null && findTotal !== void 0 ? findTotal : 0}`), findCurrent ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
         "aria-label": texts.searchInput.findPrevious,
         className: "scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125",
         icon: "chevron-up",
@@ -8921,7 +8955,7 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
         })) : texts.searchInput.findNext
       })) : null, postfix);
     }
-  } else if (shortcut && !focused && !internalValue) {
+  } else if (shortcut && !focused && !value) {
     postfix = /*#__PURE__*/React__default.createElement(Shortcut, {
       keys: shortcut,
       onClickCapture: () => {
@@ -8931,38 +8965,37 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     });
   }
   const className = cn('peer !pl-7', hasFind ? {
-    '!w-48': !internalValue && !focused,
-    '!w-72': internalValue || focused
+    '!w-48': !value && !focused,
+    '!w-72': value || focused
   } : '!w-48', {
     '!wcag-blue-100': isActive
   }, props.className);
+  const icon = /*#__PURE__*/React__default.createElement(Icon, {
+    "aria-label": texts.searchInput.button,
+    className: "-ml-0.5 scale-95",
+    name: "search",
+    onClickCapture: () => {
+      var _internalRef$current4;
+      return (_internalRef$current4 = internalRef.current) === null || _internalRef$current4 === void 0 ? void 0 : _internalRef$current4.focus();
+    }
+  });
   const input = /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
     "aria-label": (_attributes$ariaLabe = attributes['aria-label']) !== null && _attributes$ariaLabe !== void 0 ? _attributes$ariaLabe : texts.searchInput.placeholder,
     className: className,
     "data-taco": "search-input2",
     onBlur: handleBlur,
-    onChange: handleChange,
+    onChange: event => handleChange(event.target.value),
     onFocus: handleFocus,
     onKeyDown: handleKeyDown,
     placeholder: (_attributes$placehold = attributes.placeholder) !== null && _attributes$placehold !== void 0 ? _attributes$placehold : texts.searchInput.placeholder,
-    prefix: /*#__PURE__*/React__default.createElement(IconButton, {
-      "aria-label": texts.searchInput.button,
-      className: "scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125",
-      disabled: attributes.disabled || attributes.readOnly,
-      icon: "search",
-      onMouseDown: handleSubmit,
-      tabIndex: -1,
-      tooltip: focused && !isSynced ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.searchInput.button, " ", /*#__PURE__*/React__default.createElement(Shortcut, {
-        keys: "Enter"
-      })) : texts.searchInput.button
-    }),
+    prefix: icon,
     postfix: postfix,
     ref: internalRef,
-    value: internalValue
+    value: value !== null && value !== void 0 ? value : ''
   }));
   if (settingsContent) {
     const handleSettingsBlur = event => {
-      if (event.currentTarget.contains(event.relatedTarget)) {
+      if (event.currentTarget.contains(event.relatedTarget) || event.currentTarget.contains(event.target)) {
         return;
       }
       setFocused(false);
@@ -8976,8 +9009,8 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     }, input, focused ? /*#__PURE__*/React__default.createElement("div", {
       className: "border-grey-300 absolute left-0 right-0 top-full z-10 flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow",
       onClickCapture: () => {
-        var _internalRef$current4;
-        return (_internalRef$current4 = internalRef.current) === null || _internalRef$current4 === void 0 ? void 0 : _internalRef$current4.focus();
+        var _internalRef$current5;
+        return (_internalRef$current5 = internalRef.current) === null || _internalRef$current5 === void 0 ? void 0 : _internalRef$current5.focus();
       },
       tabIndex: -1
     }, settingsContent) : null);
@@ -9468,7 +9501,17 @@ 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();
+    }
+  };
+  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();
     }
   };
@@ -9476,6 +9519,7 @@ const EditPopover = props => {
     onCloseAutoFocus: handleCloseAutoFocus,
     onInteractOutside: handleInteractOutside,
     onClick: event => event.stopPropagation(),
+    onKeyDown: popoverContentKeyDown,
     placement: "right",
     tabIndex: -1,
     className: "focus:!shadow-none"
@@ -15616,54 +15660,6 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
 });
 Table2.Column = Column$3;
 
-const isInternalColumn$1 = id => id.startsWith('__');
-const isFrozenColumn = (index, table) => {
-  const tableMeta = table.options.meta;
-  if (!tableMeta.columnFreezing.isEnabled || tableMeta.columnFreezing.frozenColumnIndex === undefined) {
-    return false;
-  }
-  return tableMeta.columnFreezing.frozenColumnIndex >= index;
-};
-const getCurrentRowCellElement = (index, table) => {
-  const cellSelector = `[data-current="true"] [data-column-index="${index}"`;
-  return table.querySelector(cellSelector);
-};
-function scrollColumnIntoView(columnIndex, frozenColumnIndex, column, table) {
-  if (frozenColumnIndex !== undefined && columnIndex > frozenColumnIndex) {
-    const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, table);
-    const highlightRef = column === null || column === void 0 ? void 0 : column.getBoundingClientRect();
-    const lastFrozenRect = lastFrozenColumnElement === null || lastFrozenColumnElement === void 0 ? void 0 : lastFrozenColumnElement.getBoundingClientRect();
-    // offset the width of frozen columns so that the column being scrolled to is not hidden behind them
-    if (highlightRef && lastFrozenRect && highlightRef.left < lastFrozenRect.left + lastFrozenRect.width) {
-      const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;
-      table === null || table === void 0 ? void 0 : table.scrollTo(highlightRef.left - pinnedColumnsWidth, table.scrollTop);
-    }
-  } else {
-    column.scrollIntoView({
-      block: 'nearest',
-      inline: 'nearest'
-    });
-  }
-}
-function isCellHighlighted(query, value, children) {
-  // if we just stringify date, we get the full object with "Greenwich Meantime" etc in
-  const highlightValue = dateFns.isDate(value) ? children : value;
-  return String(highlightValue).toLocaleLowerCase().includes(query.toLocaleLowerCase());
-}
-
-const MIN_COLUMN_SIZE$1 = 80; // accounts for padding and sort controls
-const getCellAlignmentClasses$1 = (alignment = 'left') => {
-  return cn({
-    'justify-start text-left': alignment === 'left',
-    'justify-end text-right': alignment === 'right',
-    'justify-center text-center': alignment === 'center'
-  });
-};
-// Hiding input number spin buttons
-const getInputAppearanceClassnames = () => {
-  return cn('[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none');
-};
-
 function GotoPopover(props) {
   const {
     onGoto: handleGoto,
@@ -15680,6 +15676,7 @@ function GotoPopover(props) {
     "aria-label": texts.table3.columns.menu.gotoRow,
     name: "query",
     onSearch: handleSearch,
+    onKeyDown: event => event.stopPropagation(),
     placeholder: `${texts.table3.columns.menu.gotoRow}...`
   })));
 }
@@ -15699,20 +15696,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,
@@ -15774,7 +15757,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) {
@@ -15786,10 +15770,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
@@ -15932,7 +15914,7 @@ function Header$2(props) {
     hasMenu: isMenuAvailable(table, header),
     id: header.id,
     index: header.index,
-    isFrozen: isFrozenColumn(header.index, table),
+    isFrozen: isFrozenColumn(header, table),
     isResizing: column.getIsResizing(),
     length: table.getRowModel().rows.length,
     meta: columnMeta,
@@ -15984,7 +15966,7 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
   React__default.useLayoutEffect(() => {
     if (internalRef && length) {
       // the actions column size gets set by the column itself
-      if (id === COLUMN_ID) {
+      if (isInternalColumn$1(id)) {
         return;
       }
       table.setColumnSizing(sizes => ({
@@ -16073,14 +16055,14 @@ 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) {
-      return isCellHighlighted(tableMeta.search.query, value, memoedProps.children);
+    if ((_tableMeta$search$que = tableMeta.search.query) !== null && _tableMeta$search$que !== void 0 && _tableMeta$search$que.length) {
+      return isCellHighlighted(tableMeta.search.query, value, columnMeta.dataType);
     }
     return false;
-  }, [memoedProps.children, tableMeta.search.isHighlightingEnabled, tableMeta.search.excludeUnmatchedResults, tableMeta.search.query]);
+  }, [value, tableMeta.search.isHighlightingEnabled, tableMeta.search.excludeUnmatchedResults, tableMeta.search.query]);
   const memoedHighlightCurrent = React__default.useMemo(() => {
     if (!tableMeta.search.isHighlightingEnabled || !memoedHighlight || tableMeta.search.currentHighlightColumnIndex === undefined) {
       return false;
@@ -16171,7 +16153,7 @@ function Footer$4(props) {
     align: meta.align,
     id: header.id,
     index: header.index,
-    isFrozen: isFrozenColumn(header.index, table),
+    isFrozen: isFrozenColumn(header, table),
     meta,
     table
   };
@@ -16292,7 +16274,7 @@ function createRowActionsColumn$1() {
     footer: Footer$4,
     meta: {
       align: 'right',
-      className: cn('!pt-[var(--table3-row-padding)] print:opacity-0 [[role="table"][data-editing="false"]_&]:group-[[data-current="true"]]/row:sticky [[role="table"][data-pause-hover="false"][data-editing="false"]_&]:group-hover/row:sticky right-0 !pl-1 !pr-1', '[[role="table"][data-editing="false"]_&]:group-[[data-current="true"]]/row:shadow-[-6px_0px_6px] [[role="table"][data-pause-hover="false"][data-editing="false"]_&]:group-hover/row:shadow-[-6px_0px_6px]', 'group-[[data-current="true"][data-selected="false"]]/row:text-grey-200', 'group-[[data-selected="true"]]/row:text-blue-100', 'group-[[data-selected="false"]:hover]/row:text-grey-100'),
+      className: cn('!pt-[var(--table3-row-padding)] print:opacity-0 [[role="table"][data-editing="false"]_&]:group-[[data-current="true"]]/row:sticky [[role="table"][data-pause-hover="false"][data-editing="false"]_&]:group-hover/row:sticky right-0 !pl-1 !pr-1', '[[role="table"][data-editing="false"]_&]:group-[[data-current="true"]]/row:shadow-[-6px_0px_6px_theme(colors.grey.200)] [[role="table"][data-pause-hover="false"][data-editing="false"]_&]:group-hover/row:shadow-[-6px_0px_6px_theme(colors.grey.100)]', 'group-[[data-current="true"][data-selected="false"]]/row:text-grey-200', 'group-[[data-selected="true"]]/row:text-blue-100', 'group-[[data-selected="false"]:hover]/row:text-grey-100'),
       enableOrdering: false,
       enableSearch: false,
       enableTruncate: false,
@@ -16304,6 +16286,71 @@ function createRowActionsColumn$1() {
   };
 }
 
+const isInternalColumn$1 = id => id.startsWith('__');
+const isFrozenColumn = (header, table) => {
+  var _tableMeta$columnFree;
+  const tableMeta = table.options.meta;
+  if (header.column.id !== COLUMN_ID && isInternalColumn$1(header.column.id)) {
+    return true;
+  }
+  if (!tableMeta.columnFreezing.isEnabled || tableMeta.columnFreezing.frozenColumnIndex === undefined) {
+    return false;
+  }
+  return tableMeta.columnFreezing.frozenColumnIndex + ((_tableMeta$columnFree = tableMeta.columnFreezing.frozenInternalColumnCount) !== null && _tableMeta$columnFree !== void 0 ? _tableMeta$columnFree : 0) >= header.index;
+};
+const getCurrentRowCellElement = (index, table) => {
+  const cellSelector = `[data-current="true"] [data-column-index="${index}"`;
+  return table.querySelector(cellSelector);
+};
+function scrollColumnIntoView(columnIndex, frozenColumnIndex, column, table) {
+  if (frozenColumnIndex !== undefined && columnIndex > frozenColumnIndex) {
+    const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, table);
+    const highlightRef = column === null || column === void 0 ? void 0 : column.getBoundingClientRect();
+    const lastFrozenRect = lastFrozenColumnElement === null || lastFrozenColumnElement === void 0 ? void 0 : lastFrozenColumnElement.getBoundingClientRect();
+    // offset the width of frozen columns so that the column being scrolled to is not hidden behind them
+    if (highlightRef && lastFrozenRect && highlightRef.left < lastFrozenRect.left + lastFrozenRect.width) {
+      const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;
+      table === null || table === void 0 ? void 0 : table.scrollTo(highlightRef.left - pinnedColumnsWidth, table.scrollTop);
+    }
+  } else {
+    column.scrollIntoView({
+      block: 'nearest',
+      inline: 'nearest'
+    });
+  }
+}
+function isCellHighlighted(query, value, dataType) {
+  if (value === undefined || value === null) {
+    return false;
+  }
+  return String(getCellValueAsString(value, dataType)).toLocaleLowerCase().includes(query.toLocaleLowerCase());
+}
+function getCellValueAsString(value, dataType) {
+  if (value === undefined || value === null) {
+    return '';
+  } else if (dateFns.isDate(value)) {
+    var _format;
+    return (_format = format(value)) !== null && _format !== void 0 ? _format : '';
+  } else if (dataType === 'datetime' && typeof value === 'string') {
+    var _format2;
+    return (_format2 = format(parseFromISOString(value))) !== null && _format2 !== void 0 ? _format2 : '';
+  }
+  return String(value);
+}
+
+const MIN_COLUMN_SIZE$1 = 80; // accounts for padding and sort controls
+const getCellAlignmentClasses$1 = (alignment = 'left') => {
+  return cn({
+    'justify-start text-left': alignment === 'left',
+    'justify-end text-right': alignment === 'right',
+    'justify-center text-center': alignment === 'center'
+  });
+};
+// Hiding input number spin buttons
+const getInputAppearanceClassnames = () => {
+  return cn('[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none');
+};
+
 const useCssGrid = table => {
   const allVisibleColumns = table.getVisibleLeafColumns();
   const columnSizing = table.getState().columnSizing;
@@ -16361,7 +16408,7 @@ function useCurrentRow(defaultCurrentRowIndex = 0) {
   const moveUp = (length, callback) => move(-1, length, callback);
   const moveDown = (length, callback) => move(1, length, callback);
   const onKeyDown = React__default.useCallback((event, length, scrollToIndex) => {
-    if (event.isDefaultPrevented() || event.isPropagationStopped()) {
+    if (event.defaultPrevented) {
       return;
     }
     if (event.key === 'ArrowUp') {
@@ -16402,6 +16449,9 @@ const getNextIndex$2 = (direction, currentIndex, length) => {
 function usePauseHoverState() {
   const [isHoverStatePaused, setHoverStatePaused] = useIsHoverStatePaused();
   const onKeyDown = React__default.useCallback(event => {
+    if (event.defaultPrevented) {
+      return;
+    }
     if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
       setHoverStatePaused(true);
     }
@@ -16607,11 +16657,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();
@@ -16673,6 +16725,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;
@@ -16696,11 +16766,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;
@@ -16748,8 +16818,8 @@ function useCurrentRowListener(table) {
   }, [rows.length]);
 }
 
-function getDefaultFrozenIndex(options, defaultFrozenIndex = -1) {
-  let index = defaultFrozenIndex;
+function getFrozenInternalColumnCount(options) {
+  let index = 0;
   if (options.enableRowDrag) {
     index++;
   }
@@ -16759,7 +16829,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.
@@ -16767,7 +16837,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) {
@@ -16776,11 +16846,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,
@@ -16788,6 +16860,7 @@ function useColumnFreezing(defaultFrozenIndex, options) {
   };
 }
 function useColumnFreezingStyle(tableId, table) {
+  var _tableMeta$columnFree;
   const {
     columnOrder,
     columnSizing,
@@ -16795,9 +16868,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.frozenInternalColumnCount > 0 || 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;
@@ -16807,33 +16881,33 @@ 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;
 }
 
 function useRowSelection() {
   const lastSelectedRowIndex = React__default.useRef();
   const onKeyDown = React__default.useCallback((event, table) => {
-    if (!table.options.enableRowSelection || event.isDefaultPrevented() || event.isPropagationStopped()) {
+    if (!table.options.enableRowSelection || event.defaultPrevented) {
       return;
     }
     const rows = table.getRowModel().rows;
@@ -16857,7 +16931,7 @@ function useRowSelection() {
 
 function useRowClick(onRowClick) {
   const onKeyDown = React__default.useCallback((event, table) => {
-    if (typeof onRowClick !== 'function' || event.isDefaultPrevented() || event.isPropagationStopped()) {
+    if (typeof onRowClick !== 'function' || event.defaultPrevented) {
       return;
     }
     const rows = table.getRowModel().rows;
@@ -16927,29 +17001,25 @@ function useEditing(isEnabled, onSave) {
     }
     setChanges(currentChanges);
   }
-  const handleKeyDown = (event, tableRef) => {
+  const handleKeyDown = React__default.useCallback(event => {
+    if (event.defaultPrevented) {
+      return;
+    }
     if (event.ctrlKey || event.metaKey) {
       if (event.key === 'e') {
-        if (isEditing) {
-          var _tableRef$current;
-          setIsEditing(false);
-          (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.focus();
-        } else {
-          setIsEditing(true);
-        }
-      }
-      if (event.key === 's') {
+        setIsEditing(editing => !editing);
+      } else if (event.key === 's') {
         // Prevent default browser save
         event.preventDefault();
         saveChangesIfNeeded();
       }
     }
-  };
-  const handleBlur = event => {
+  }, [isEditing]);
+  const handleBlur = React__default.useCallback(event => {
     if (event.target === event.currentTarget) {
       saveChangesIfNeeded();
     }
-  };
+  }, []);
   // Creates initial saving states from changes object
   const addSavingStates = () => {
     const changeset = Object.keys(changes || {});
@@ -17484,9 +17554,7 @@ const Control = /*#__PURE__*/React__default.forwardRef(function Control(props, r
           }
         }
       } else {
-        var _tableRef$current;
         tableMeta.editing.toggleEditing(false);
-        (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.focus();
       }
       return;
     }
@@ -17666,7 +17734,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,
@@ -17674,7 +17747,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 => {
@@ -17701,7 +17774,8 @@ const Cell$4 = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
   // and we don't really care about re-rendering in any other scenario
   return newTableMeta.currentRow.currentRowIndex === oldTableMeta.currentRow.currentRowIndex && newProps.row.getIsSelected() !== oldProps.row.getIsSelected();
 });
-function createRowSelectionColumn$1(onRowDrag) {
+function createRowSelectionColumn$1(hasDrag, hasExpansion) {
+  const size = hasDrag ? 22 : 40;
   return {
     id: COLUMN_ID$2,
     header: Header$3,
@@ -17709,16 +17783,23 @@ function createRowSelectionColumn$1(onRowDrag) {
     footer: Footer$4,
     meta: {
       align: 'center',
-      className: '!pt-[var(--table3-row-padding)] !justify-end !p-0 !pr-0.5',
+      className: cn('!pt-[var(--table3-row-padding)] !justify-end !p-0', {
+        '!pr-0.5': hasExpansion,
+        '!pr-2.5': !hasExpansion
+      }),
       enableOrdering: false,
       enableSearch: false,
       enableTruncate: false,
       header: '',
-      headerClassName: 'items-center !justify-end !p-0 !pr-0.5'
+      headerClassName: cn('items-center !justify-end !p-0', {
+        '!pr-0.5': hasExpansion,
+        '!pr-2.5': !hasExpansion
+      })
     },
     // options
     enableResizing: false,
-    size: onRowDrag ? 22 : 32
+    size,
+    minSize: size
   };
 }
 
@@ -17901,7 +17982,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
@@ -17956,11 +18037,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,
@@ -17975,7 +18054,7 @@ function useConvertChildrenToColumns(props, options, editing) {
     columns.unshift(columnHelper.display(createRowExpansionColumn$1(props.expandedRowRenderer)));
   }
   if (options.enableRowSelection) {
-    columns.unshift(columnHelper.display(createRowSelectionColumn$1(options.enableRowDrag ? props.onRowDrag : undefined)));
+    columns.unshift(columnHelper.display(createRowSelectionColumn$1(!!(options.enableRowDrag && props.onRowDrag), !!props.expandedRowRenderer)));
   }
   if (options.enableRowDrag && props.onRowDrag) {
     columns.unshift(columnHelper.display(createRowDragColumn(props.onRowDrag)));
@@ -18118,8 +18197,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 = {
@@ -18157,6 +18282,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) {
@@ -18167,24 +18296,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,
@@ -18194,13 +18324,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({
@@ -18234,7 +18364,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);
@@ -18699,6 +18829,23 @@ function RowHeight(props) {
   }, texts.table3.rowHeight.sizes.extraTall)));
 }
 
+// augments useEffect to not run debounced
+function useDebouncedEffect(effect, deps, ms = 200) {
+  const timeoutRef = React__default.useRef();
+  React__default.useEffect(() => {
+    timeoutRef.current = setTimeout(effect, ms);
+    return () => {
+      clearTimeout(timeoutRef.current);
+    };
+  }, deps);
+}
+
+var LoadingState;
+(function (LoadingState) {
+  LoadingState[LoadingState["Incomplete"] = 0] = "Incomplete";
+  LoadingState[LoadingState["Loading"] = 1] = "Loading";
+  LoadingState[LoadingState["Completed"] = 2] = "Completed";
+})(LoadingState || (LoadingState = {}));
 function Search$3(props) {
   const {
     scrollToIndex,
@@ -18709,6 +18856,8 @@ function Search$3(props) {
   } = useLocalization();
   const ref = React__default.useRef(null);
   const tableMeta = table.options.meta;
+  const [query, setQuery] = React__default.useState(tableMeta.search.query);
+  const [loading, setLoading] = React__default.useState(LoadingState.Incomplete);
   const scrollTo = rowIndex => scrollToIndex(rowIndex, {
     align: 'center'
   });
@@ -18719,32 +18868,38 @@ function Search$3(props) {
     if (firstRowIndex) {
       scrollTo(firstRowIndex);
     }
-  }, [tableMeta.search.query, tableMeta.search.excludeUnmatchedResults, table.getRowModel().rows.length, JSON.stringify(table.getState().sorting), JSON.stringify(table.getState().columnVisibility)]);
-  const handleSearch = function (query) {
-    try {
-      function _temp2() {
-        if (tableMeta.search.excludeUnmatchedResults) {
-          if (value !== null && value !== void 0 && value.length) {
-            table.setGlobalFilter(value);
-          } else {
-            table.resetGlobalFilter();
-          }
-        }
-        tableMeta.search.setQuery(value);
+  }, [tableMeta.search.query, tableMeta.search.excludeUnmatchedResults, table.getRowModel().rows.length, JSON.stringify(table.getState().sorting), JSON.stringify(table.getState().columnVisibility), loading]);
+  // update the table search and filtering on a debounce
+  useDebouncedEffect(() => {
+    tableMeta.search.setQuery(query);
+    if (tableMeta.search.excludeUnmatchedResults) {
+      if (query !== null && query !== void 0 && query.length) {
+        table.setGlobalFilter(query);
+      } else {
+        table.resetGlobalFilter();
       }
-      const value = String(query !== null && query !== void 0 ? query : '');
-      // load all data if that is possible
+    }
+  }, [query]);
+  const handleFocus = function () {
+    try {
       const _temp = function () {
-        if (tableMeta.search.loadAll) {
+        if (tableMeta.search.loadAll && loading === LoadingState.Incomplete) {
+          setLoading(LoadingState.Loading);
           // don't pass the search query because we need all data - not filtered data
-          return Promise.resolve(tableMeta.search.loadAll(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
+          return Promise.resolve(tableMeta.search.loadAll(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {
+            setLoading(LoadingState.Completed);
+          });
         }
       }();
-      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+      // load all data if that is possible
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
   };
+  const handleChange = query => {
+    setQuery(String(query !== null && query !== void 0 ? query : ''));
+  };
   const handleToggleExcludeUnmatchedResults = enabled => {
     tableMeta.search.toggleExcludeUnmatchedResults(enabled);
     if (enabled) {
@@ -18789,9 +18944,11 @@ function Search$3(props) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SearchInput2, {
     findCurrent: tableMeta.search.currentHighlightColumnIndex !== undefined ? tableMeta.search.currentHighlightColumnIndex + 1 : null,
     findTotal: tableMeta.search.highlightedColumnIndexes ? tableMeta.search.highlightedColumnIndexes.length : null,
+    loading: loading === LoadingState.Loading,
     onClickFindPrevious: handlePreviousResult,
     onClickFindNext: handleNextResult,
-    onSearch: handleSearch,
+    onChange: handleChange,
+    onFocus: handleFocus,
     placeholder: texts.table3.search.placeholder,
     settingsContent: settings,
     ref: ref,
@@ -18800,7 +18957,7 @@ function Search$3(props) {
       meta: true,
       shift: false
     },
-    value: tableMeta.search.query
+    value: query
   }));
 }
 function resetHighlightedColumnIndexes(enabled, value, table) {
@@ -18812,14 +18969,9 @@ 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(
-          // 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 : '' :
-          // otherwise just string compare
-          String(row.original[column.id]), value)) {
+          var _row$original, _column$columnDef$met;
+          const cellValue = getCellValueAsString((_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original[column.id], (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.dataType);
+          if (cellValue && globalFilterFn$1(cellValue, value)) {
             indexes.push([rowIndex, columnIndex]);
           }
         } catch (e) {
@@ -18869,29 +19021,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;
@@ -18902,23 +19099,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 {
@@ -18927,6 +19162,9 @@ function FilterValue(props) {
     onChange: handleChange,
     value
   } = props;
+  const {
+    texts
+  } = useLocalization();
   if (comparator === Table3FilterComparator.IsEmpty || comparator === Table3FilterComparator.IsNotEmpty) {
     return null;
   }
@@ -18934,6 +19172,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"
@@ -18962,6 +19208,7 @@ function FilterValue(props) {
     }));
   }
   return /*#__PURE__*/React__default.createElement(Control$1, {
+    comparator: comparator,
     column: column,
     onChange: handleChange,
     value: value
@@ -18971,12 +19218,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,
@@ -18988,11 +19241,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",
@@ -19060,8 +19321,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,
@@ -19075,63 +19336,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;
@@ -19195,7 +19399,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;
@@ -19400,6 +19606,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;
@@ -19480,30 +19691,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;
@@ -19514,7 +19704,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);
@@ -19523,6 +19714,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
@@ -19561,6 +19758,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.
@@ -19607,10 +19809,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);
 }
 
@@ -19840,7 +20044,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"
@@ -19855,7 +20062,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));
@@ -20123,16 +20330,19 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   } = useTableRenderStrategy$1(props, table, internalRef);
   const tableMeta = table.options.meta;
   const state = table.getState();
-  const handleKeyDown = event => {
-    if (isEventTriggeredOnInteractiveElement(event.target)) {
-      return;
-    }
-    tableMeta.hoverState.handleKeyDown(event);
-    tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex);
-    tableMeta.rowClick.handleKeyDown(event, table);
-    tableMeta.rowSelection.handleKeyDown(event, table);
-    tableMeta.editing.handleKeyDown(event, internalRef);
-  };
+  React__default.useEffect(() => {
+    const handleKeyDown = event => {
+      tableMeta.hoverState.handleKeyDown(event);
+      tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex);
+      tableMeta.rowClick.handleKeyDown(event, table);
+      tableMeta.rowSelection.handleKeyDown(event, table);
+      tableMeta.editing.handleKeyDown(event);
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
   const handleBlur = event => {
     tableMeta.editing.handleBlur(event);
   };
@@ -20144,7 +20354,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
       return Promise.reject(e);
     }
   };
-  const className = cn('border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px]', 'focus:yt-focus focus-within:yt-focus', '[&[data-resizing="true"]]:select-none', {
+  const className = cn('border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px]', '[&[data-resizing="true"]]:select-none', {
     'text-xs': tableMeta.fontSize.size === 'small',
     'text-sm': tableMeta.fontSize.size === 'medium',
     'text-base': tableMeta.fontSize.size === 'large'
@@ -20183,12 +20393,10 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     "data-resizing": !!state.columnSizingInfo.isResizingColumn,
     "data-taco": "table2",
     onBlur: handleBlur,
-    onKeyDown: handleKeyDown,
     onScroll: handleScroll,
     ref: internalRef,
     role: "table",
-    style: style,
-    tabIndex: 0
+    style: style
   }, isServerLoadingAndNotReady ? null : /*#__PURE__*/React__default.createElement("div", {
     className: "group/header contents",
     "data-taco": "table2-header",
@@ -20226,9 +20434,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
@@ -21273,6 +21482,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;