@economic/taco 2.4.0 → 2.4.2

package/dist/taco.cjs.development.js

@@ -3707,9 +3707,9 @@ const useMergedRef = ref => {
   return internalRef;
 };
 
-const WHITELISTED_ELEMENTS = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT'];
 function isEventTriggeredOnInteractiveElement(eventTarget) {
-  return WHITELISTED_ELEMENTS.includes(eventTarget.tagName);
+  const element = eventTarget;
+  return ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT'].includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
 }
 function createShortcutKeyDownHandler(key, handler) {
   return function (event) {
@@ -4866,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;
@@ -8847,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,
@@ -8857,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) {
@@ -8872,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;
@@ -8914,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;
     }
@@ -8931,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",
@@ -8947,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",
@@ -8970,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: () => {
@@ -8980,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);
@@ -9025,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);
@@ -15676,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,
@@ -15740,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}...`
   })));
 }
@@ -15977,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,
@@ -16029,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 => ({
@@ -16122,10 +16059,10 @@ function DisplayCell(props) {
       return false;
     }
     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 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;
@@ -16216,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
   };
@@ -16337,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,
@@ -16349,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;
@@ -16406,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') {
@@ -16447,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);
     }
@@ -16627,20 +16632,20 @@ function useSettingsStateListener$1(table, onChangeSettings) {
     let handler;
     if (typeof onChangeSettings === 'function') {
       handler = setTimeout(() => onChangeSettings({
+        // adding a new setting? you need to add it to the print settings in PrintButton.tsx!
         columnFreezingIndex: meta.columnFreezing.frozenColumnIndex,
         columnOrder: state.columnOrder,
-        columnPinning: state.columnPinning,
         columnSizing: state.columnSizing,
         columnVisibility: state.columnVisibility,
         excludeUnmatchedRecordsInSearch: meta.search.excludeUnmatchedResults,
         fontSize: meta.fontSize.size,
-        showWarningWhenPrintingLargeDataset: meta.printing.printWarningDialogVisibility,
         rowHeight: meta.rowHeight.height,
+        showWarningWhenPrintingLargeDataset: meta.printing.printWarningDialogVisibility,
         sorting: state.sorting
       }), 250);
     }
     return () => clearTimeout(handler);
-  }, [meta.columnFreezing.frozenColumnIndex, state.columnOrder, state.columnPinning, state.columnSizing, state.columnVisibility, meta.search.excludeUnmatchedResults, meta.fontSize.size, meta.rowHeight.height, meta.printing.printWarningDialogVisibility, state.sorting]);
+  }, [meta.columnFreezing.frozenColumnIndex, state.columnOrder, state.columnSizing, state.columnVisibility, meta.search.excludeUnmatchedResults, meta.fontSize.size, meta.rowHeight.height, meta.printing.printWarningDialogVisibility, state.sorting]);
 }
 
 var Table3FilterComparator;
@@ -16865,7 +16870,7 @@ function useColumnFreezingStyle(tableId, table) {
   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 && frozenColumnIndex !== undefined) {
+    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)) {
@@ -16902,7 +16907,7 @@ function useColumnFreezingStyle(tableId, table) {
 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;
@@ -16926,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;
@@ -16996,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 || {});
@@ -17553,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;
     }
@@ -17775,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,
@@ -17783,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
   };
 }
 
@@ -18015,7 +18022,7 @@ function useConvertChildrenToColumns(props, options, editing) {
         enableResizing: (_child$props$enableRe = child.props.enableResizing) !== null && _child$props$enableRe !== void 0 ? _child$props$enableRe : true,
         // filtering
         enableColumnFilter: (_child$props$enableFi = child.props.enableFiltering) !== null && _child$props$enableFi !== void 0 ? _child$props$enableFi : true,
-        filterFn: options.enableFiltering ? 'tacoFilter' : undefined,
+        filterFn: 'tacoFilter',
         // sorting
         enableSorting: (_child$props$enableSo = child.props.enableSorting) !== null && _child$props$enableSo !== void 0 ? _child$props$enableSo : true,
         sortingFn: getSortingFn$1(child.props.dataType, child.props.sortFn),
@@ -18047,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)));
@@ -18256,21 +18263,27 @@ function useTable$2(props) {
   }
   // filtering
   if (tableOptions.enableColumnFilters) {
-    if (props.onFilter) {
-      tableOptions.manualFiltering = true;
-      // onFilter is called as a listener to let the consumer update their data, so we don't use onColumnFiltersChange
-    } else {
+    if (!props.onFilter) {
       tableOptions.filterFns = {
         tacoFilter: (row, columnId, filter) => columnFilterFn$1(row.getValue(columnId), filter)
       };
       tableOptions.getFilteredRowModel = reactTable$1.getFilteredRowModel();
     }
+    // we don't tableOptions.manualFiltering = true; because it breaks global filtering, server filtering still works :shrug:
   }
   // search
   if (tableOptions.enableGlobalFilter) {
+    // search is always client side, since we call loadAll when searching
     tableOptions.globalFilterFn = (row, columnId, searchQuery) => {
-      if (row.original) {
-        return globalFilterFn$1(row.getValue(columnId), searchQuery);
+      try {
+        if (row.original) {
+          var _row$_getAllCellsByCo, _row$_getAllCellsByCo2;
+          const dataType = (_row$_getAllCellsByCo = row._getAllCellsByColumnId()[columnId]) === null || _row$_getAllCellsByCo === void 0 ? void 0 : (_row$_getAllCellsByCo2 = _row$_getAllCellsByCo.column.columnDef.meta) === null || _row$_getAllCellsByCo2 === void 0 ? void 0 : _row$_getAllCellsByCo2.dataType;
+          const cellValue = getCellValueAsString(row.original[columnId], dataType);
+          return globalFilterFn$1(cellValue, searchQuery);
+        }
+      } catch {
+        //
       }
       return false;
     };
@@ -18317,14 +18330,24 @@ function useTable$2(props) {
   } = useConvertChildrenToColumns(props, options, editing);
   // built-in features
   const initialState = React__default.useMemo(() => {
-    var _defaultSettings$colu2, _defaultSettings$colu3;
+    var _defaultSettings$colu2, _defaultSettings$colu3, _props$defaultSetting, _props$defaultSetting3;
     const sanitizeSortedColumns = column => columns.find(definedColumn => definedColumn.id === column.id);
-    return {
+    const state = {
       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
     };
+    // we don't save these outside the table, but they need to be here for print to inherit them - see PrintButton.tsx
+    if ((_props$defaultSetting = props.defaultSettings) !== null && _props$defaultSetting !== void 0 && _props$defaultSetting.columnFilters) {
+      var _props$defaultSetting2;
+      state.columnFilters = (_props$defaultSetting2 = props.defaultSettings) === null || _props$defaultSetting2 === void 0 ? void 0 : _props$defaultSetting2.columnFilters;
+    }
+    if ((_props$defaultSetting3 = props.defaultSettings) !== null && _props$defaultSetting3 !== void 0 && _props$defaultSetting3.globalFilter) {
+      var _props$defaultSetting4;
+      state.globalFilter = (_props$defaultSetting4 = props.defaultSettings) === null || _props$defaultSetting4 === void 0 ? void 0 : _props$defaultSetting4.globalFilter;
+    }
+    return state;
   }, []);
   const table = reactTable$1.useReactTable({
     data: props.data,
@@ -18822,6 +18845,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,
@@ -18832,6 +18872,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'
   });
@@ -18842,32 +18884,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) {
@@ -18912,9 +18960,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,
@@ -18923,7 +18973,7 @@ function Search$3(props) {
       meta: true,
       shift: false
     },
-    value: tableMeta.search.query
+    value: query
   }));
 }
 function resetHighlightedColumnIndexes(enabled, value, table) {
@@ -18935,14 +18985,9 @@ function resetHighlightedColumnIndexes(enabled, value, table) {
     table.getRowModel().rows.forEach((row, rowIndex) => {
       columns.forEach((column, columnIndex) => {
         try {
-          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$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)) {
+          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) {
@@ -19781,9 +19826,7 @@ function PrintIFrame({
   // -top-60 -left-60 styles make sure that iframe is added outside of the viewport
   return /*#__PURE__*/React__default.createElement("iframe", {
     className: "fixed -left-60 -top-60 !h-0 !w-0",
-    frameBorder: "0",
     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);
@@ -19854,19 +19897,23 @@ function PrintButton(props) {
   const {
     printWarningDialogVisibility
   } = tableMeta.printing;
-  const settings = React__default.useMemo(() => ({
-    columnFilters: state.columnFilters,
+  const defaultSettings = React__default.useMemo(() => ({
+    columnFreezingIndex: tableMeta.columnFreezing.frozenColumnIndex,
     columnOrder: state.columnOrder,
-    columnPinning: state.columnPinning,
     columnSizing: state.columnSizing,
     columnVisibility: state.columnVisibility,
-    sorting: state.sorting,
+    excludeUnmatchedRecordsInSearch: tableMeta.search.excludeUnmatchedResults,
+    fontSize: tableMeta.fontSize.size,
     rowHeight: tableMeta.rowHeight.height,
-    columnFreezingIndex: tableMeta.columnFreezing.frozenColumnIndex
-  }), [state.columnFilters, state.columnOrder, state.columnPinning, state.columnSizing, state.columnVisibility, state.sorting, tableMeta.rowHeight.height, tableMeta.columnFreezing.frozenColumnIndex]);
+    sorting: state.sorting,
+    // we don't save these, but we must pass them to print
+    columnFilters: state.columnFilters,
+    globalFilter: state.globalFilter
+  }), [tableMeta.columnFreezing.frozenColumnIndex, state.columnOrder, state.columnSizing, state.columnVisibility, tableMeta.search.excludeUnmatchedResults, tableMeta.fontSize.size, tableMeta.rowHeight.height, state.sorting, state.columnFilters, state.globalFilter]);
   const iframeTableProps = {
     ...tableProps,
-    defaultSettings: settings
+    defaultSettings,
+    id: `${tableProps.id}_print`
   };
   useGlobalKeyDown({
     key: 'p',
@@ -20171,11 +20218,12 @@ function useTable3DataLoader(fetch, fetchAll, options = {
   const _lastUsedSorting = React__default.useRef([]);
   const _lastUsedFilters = React__default.useRef([]);
   const _lastUsedSearch = React__default.useRef();
+  const _forceReset = React__default.useRef(false);
   const loadPage = function (pageIndex, sorting, filters, search) {
     try {
       let reset = false;
       // sorting or filters changed, reset everything
-      if (search !== _lastUsedSearch.current || JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current)) {
+      if (_forceReset.current || search !== _lastUsedSearch.current || JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current)) {
         _pendingPageRequests.current = {};
         // nuke the dataset so that we "start again" after sorting
         reset = true;
@@ -20186,6 +20234,7 @@ function useTable3DataLoader(fetch, fetchAll, options = {
       } else {
         _pendingPageRequests.current[pageIndex] = true;
       }
+      _forceReset.current = false;
       // set the sorting so we can track if it changed between loads
       _lastUsedSorting.current = sorting;
       // set the filters so we can track if it changed between loads
@@ -20245,7 +20294,14 @@ function useTable3DataLoader(fetch, fetchAll, options = {
       return Promise.reject(e);
     }
   };
-  const invalidate = () => setData(Array(length.current).fill(undefined));
+  const invalidate = function () {
+    try {
+      _forceReset.current = true;
+      return loadPage(0, _lastUsedSorting.current, _lastUsedFilters.current, _lastUsedSearch.current);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   // we reset the page to 0 whenever sorting, filtering or search changes
   const handleSort = function (sorting) {
     try {
@@ -20301,16 +20357,23 @@ 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 => {
+      // prevent global shortcuts activating while active in other elements, like inputs or buttons
+      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);
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
   const handleBlur = event => {
     tableMeta.editing.handleBlur(event);
   };
@@ -20322,7 +20385,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'
@@ -20361,12 +20424,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",
@@ -20384,9 +20445,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     className: "group/body contents",
     "data-taco": "table2-body",
     role: "rowgroup"
-  }, renderBody(), /*#__PURE__*/React__default.createElement("span", {
-    className: "col-span-full h-16 print:hidden"
-  }))), /*#__PURE__*/React__default.createElement("div", {
+  }, renderBody())), /*#__PURE__*/React__default.createElement("div", {
     className: "group/footer contents",
     "data-taco": "table2-footer",
     role: "rowgroup"