@economic/taco 2.23.0 → 2.24.0

package/dist/taco.cjs.development.js

@@ -4061,8 +4061,17 @@ function isElementInsideOrTriggeredFromContainer(element, container) {
   }
   return !!(container !== null && container !== void 0 && container.contains(element));
 }
-function isEventTriggeredOnInteractiveElement(eventTarget) {
-  const element = eventTarget;
+function isElementInsideOverlay(element) {
+  return !!(element !== null && element !== void 0 && element.closest('[role=dialog],[role=menu]'));
+}
+function isSiblingElementInsideSameParentOverlay(element, sibling) {
+  var _element$closest2;
+  return !!(element !== null && element !== void 0 && (_element$closest2 = element.closest('[role=dialog],[role=menu]')) !== null && _element$closest2 !== void 0 && _element$closest2.contains(sibling));
+}
+function isElementInteractive(element) {
+  if (!element) {
+    return false;
+  }
   return ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'].includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
 }
 
@@ -4085,7 +4094,7 @@ function shouldTriggerShortcut(event, key) {
 }
 function createShortcutKeyDownHandler(key, handler, stopPropagation = true) {
   return function (event) {
-    if (event.target !== event.currentTarget && isEventTriggeredOnInteractiveElement(event.target) && !isPressingMetaKey(event)) {
+    if (event.target !== event.currentTarget && isElementInteractive(event.target) && !isPressingMetaKey(event)) {
       return;
     }
     const condition = shouldTriggerShortcut(event, key);
@@ -4142,6 +4151,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   });
   const Tag = props.href ? 'a' : 'button';
   return /*#__PURE__*/React.createElement(Tag, Object.assign({}, otherProps, {
+    href: disabled ? undefined : props.href,
     "aria-disabled": disabled ? 'true' : undefined,
     disabled: disabled,
     target: Tag === 'a' ? target : undefined,
@@ -4184,29 +4194,29 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
 });
 
 const getButtonClasses = () => {
-  return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus disabled:cursor-not-allowed';
+  return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus aria-disabled:cursor-not-allowed';
 };
 const getAppearanceClasses = (value, icon = false) => {
   switch (value) {
     case 'primary':
-      return `wcag-blue-500 enabled:hover:wcag-blue-700 enabled:hover:active:wcag-blue-500 disabled:bg-blue-500/50`;
+      return `wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50`;
     case 'danger':
-      return `wcag-red-500 enabled:hover:wcag-red-700 enabled:hover:active:wcag-red-500 disabled:bg-red-500/50`;
+      return `wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50`;
     case 'ghost':
-      return `bg-white border border-blue-500 text-blue-500 enabled:hover:bg-blue-100 enabled:hover:text-blue-700 disabled:border-blue-500/50 disabled:text-blue-500/50`;
+      return `bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white`;
     case 'discrete':
       {
         if (icon) {
-          return `bg-transparent text-black enabled:hover:bg-[#000]/[0.08] disabled:text-black/30`;
+          return `bg-transparent text-black visited:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30`;
         }
-        return `bg-transparent text-blue-500 enabled:hover:text-blue-700 disabled:text-blue-500/50`;
+        return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 aria-disabled:text-blue-500/50`;
       }
     case 'transparent':
       {
-        return `bg-transparent text-black enabled:hover:text-black enabled:hover:bg-[#000]/[0.08] disabled:text-black/30`;
+        return `bg-transparent text-black visited:text-black hover:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent`;
       }
     default:
-      return `wcag-grey-200 enabled:hover:wcag-grey-300 disabled:bg-grey-200/50 disabled:text-black/30`;
+      return `wcag-grey-200 visited:wcag-grey-200 hover:wcag-grey-300 aria-disabled:bg-grey-200/50 aria-disabled:text-black/30`;
   }
 };
 const createButtonWithTooltip = (props, className, ref) => {
@@ -4592,7 +4602,11 @@ const defaultLocalisationTexts = {
     delete: 'Delete',
     save: 'Save',
     search: 'Search...',
-    searchOrCreate: 'Search or create...'
+    searchOrCreate: 'Search or create...',
+    selectAll: 'Select all',
+    selectAllResults: 'Select all results',
+    deselectAll: 'Deselect all',
+    deselectAllResults: 'Deselect all results'
   },
   toasts: {
     dismiss: 'Dismiss'
@@ -4872,6 +4886,7 @@ const Content$2 = /*#__PURE__*/React.forwardRef(function CardContent(externalPro
   }, props.className);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     className: className,
+    "data-taco": "card-content",
     ref: ref
   }));
 });
@@ -4881,7 +4896,7 @@ const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
     menu,
     children
   } = props;
-  const className = cn('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500 [&_[data-taco="table2"]]:!border-0', props.className);
+  const className = cn('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500', props.className);
   return /*#__PURE__*/React.createElement("div", {
     className: className,
     "data-taco": "card",
@@ -4906,12 +4921,52 @@ const useId = nativeId => {
   return React__default.useMemo(() => nativeId !== null && nativeId !== void 0 ? nativeId : uuid.v4(), []);
 };
 
+const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
+  const {
+    delay = 350,
+    label,
+    ...otherProps
+  } = props;
+  const [visible, setVisibility] = React__default.useState(!delay);
+  React__default.useEffect(() => {
+    let timeout;
+    if (delay) {
+      timeout = window.setTimeout(() => setVisibility(true), delay);
+    }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [delay]);
+  if (!visible) {
+    return null;
+  }
+  const className = cn('inline-flex flex-col relative items-center', otherProps.className);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "spinner",
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("svg", {
+    className: "h-10 w-10 animate-[spinnerRotation_2s_linear_infinite]",
+    viewBox: "0 0 100 100",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("circle", {
+    cx: "50",
+    cy: "50",
+    r: "45"
+  })), label && /*#__PURE__*/React__default.createElement("span", {
+    className: "mt-4"
+  }, label));
+});
+
 const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   const {
     checked,
     indeterminate,
     invalid,
     label,
+    loading,
     onChange,
     ...otherProps
   } = props;
@@ -4942,6 +4997,11 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
       event.currentTarget.click();
     }
   };
+  const spinnerClassname = cn(
+  //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side
+  "m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]", {
+    'text-blue-500': !checked && !indeterminate
+  });
   const element = /*#__PURE__*/React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, labelledByProps, {
     "aria-invalid": invalid ? 'true' : undefined,
     "data-taco": "checkbox",
@@ -4950,12 +5010,14 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
     onCheckedChange: handleChange,
     onKeyDown: handleKeyDown,
     ref: ref
-  }), /*#__PURE__*/React.createElement(CheckboxPrimitive.Indicator, {
+  }), loading ? ( /*#__PURE__*/React.createElement(Spinner, {
+    className: spinnerClassname
+  })) : ( /*#__PURE__*/React.createElement(CheckboxPrimitive.Indicator, {
     className: "flex h-full w-full"
   }, /*#__PURE__*/React.createElement(Icon, {
     name: indeterminate ? 'line' : 'tick',
     className: "!h-full !w-full"
-  })));
+  }))));
   if (label) {
     const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
       'cursor-not-allowed text-grey-300': props.disabled
@@ -5254,45 +5316,6 @@ const useListScrollTo = (internalRef, itemRefs) => {
   };
 };
 
-const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
-  const {
-    delay = 350,
-    label,
-    ...otherProps
-  } = props;
-  const [visible, setVisibility] = React__default.useState(!delay);
-  React__default.useEffect(() => {
-    let timeout;
-    if (delay) {
-      timeout = window.setTimeout(() => setVisibility(true), delay);
-    }
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [delay]);
-  if (!visible) {
-    return null;
-  }
-  const className = cn('inline-flex flex-col relative items-center', otherProps.className);
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "spinner",
-    ref: ref
-  }), /*#__PURE__*/React__default.createElement("svg", {
-    className: "h-10 w-10 animate-[spinnerRotation_2s_linear_infinite]",
-    viewBox: "0 0 100 100",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("circle", {
-    cx: "50",
-    cy: "50",
-    r: "45"
-  })), label && /*#__PURE__*/React__default.createElement("span", {
-    className: "mt-4"
-  }, label));
-});
-
 const getId = (id, value) => `${id}_${value}`;
 const getNextEnabledItem = (event, data, index) => {
   const nextIndex = getNextIndexFromKey(event.key, data.length, index);
@@ -9277,13 +9300,32 @@ function getCellValueAsString(value, dataType) {
   }
   return String(value);
 }
+function orderColumn(column, {
+  orderingDisabled,
+  orderingEnabled
+}) {
+  const groupedColumn = column;
+  if (Array.isArray(groupedColumn.columns) && groupedColumn.columns.length > 0) {
+    groupedColumn.columns.forEach(subcolumn => orderColumn(subcolumn, {
+      orderingDisabled,
+      orderingEnabled
+    }));
+  } else {
+    var _column$meta;
+    if ((_column$meta = column.meta) !== null && _column$meta !== void 0 && _column$meta.enableOrdering) {
+      orderingEnabled.push(column.id);
+    } else {
+      orderingDisabled.push(column.id);
+    }
+  }
+}
 // ordering
 function ensureOrdering(columns, settingsOrder, internalColumnsPinnedToTheRight = ['__actions']) {
   // internal columns come with a defined order
   const internalColumns = columns.filter(column => isInternalColumn(column.id) && !internalColumnsPinnedToTheRight.includes(String(column.id))).map(column => column.id);
   // columns with ordering disabled should be moved to the front
   const orderingDisabled = [];
-  const orderingEnabled = [];
+  let orderingEnabled = [];
   let orderedColumns = columns;
   // if settings is defined, make sure the columns that are actual children are sorted by it
   if (Array.isArray(settingsOrder)) {
@@ -9292,16 +9334,23 @@ function ensureOrdering(columns, settingsOrder, internalColumnsPinnedToTheRight
     (a, b) => (settingsOrder.indexOf(a.id) >>> 0) - (settingsOrder.indexOf(b.id) >>> 0));
   }
   orderedColumns.forEach(column => {
-    var _column$meta;
     if (isInternalColumn(column.id)) {
       return;
     }
-    if ((_column$meta = column.meta) !== null && _column$meta !== void 0 && _column$meta.enableOrdering) {
-      orderingEnabled.push(column.id);
-    } else {
-      orderingDisabled.push(column.id);
-    }
+    orderColumn(column, {
+      orderingDisabled,
+      orderingEnabled
+    });
   });
+  if (settingsOrder && settingsOrder.length > 0) {
+    orderingEnabled = orderingEnabled.reduce((acc, column) => {
+      const index = settingsOrder.indexOf(column);
+      if (index > -1) {
+        acc[index] = column;
+      }
+      return acc;
+    }, []).filter(column => !!column);
+  }
   const order = [...internalColumns, ...orderingDisabled, ...orderingEnabled];
   // actions should always be last, enforce that
   internalColumnsPinnedToTheRight.forEach(id => {
@@ -9896,17 +9945,79 @@ function useTableFontSize(isEnabled = false, defaultFontSize = 'medium') {
   };
 }
 
-function useTablePrinting(isEnabled = false, defaultIsWarningVisible = true) {
+function useTacoSettings() {
+  return React__default.useContext(TacoContext);
+}
+
+const useLocalStorage = (key, initialValue) => {
+  const [state, setState] = React__default.useState(() => {
+    if (!key) {
+      return initialValue;
+    }
+    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(() => {
+    if (!key) {
+      return;
+    }
+    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 = () => {
+    if (key) {
+      localStorage.removeItem(key);
+    }
+  };
+  return [state, setState, clear];
+};
+
+function useTablePrinting(isEnabled = false, tableId) {
   const [isPrinting, setIsPrinting] = React__default.useState(false);
-  const [isWarningVisibleForLargeDatasets, setIsWarningVisibleForLargeDatasets] = React__default.useState(defaultIsWarningVisible);
+  const [settings, setSetting] = useTablePrintingSettings(tableId);
   return {
     isEnabled,
     isPrinting,
     setIsPrinting,
-    isWarningVisibleForLargeDatasets,
-    setIsWarningVisibleForLargeDatasets: isEnabled ? setIsWarningVisibleForLargeDatasets : () => undefined
+    settings,
+    setSetting
   };
 }
+const DEFAULT_PRINT_SETTINGS = {
+  size: 'A4',
+  orientation: 'portrait',
+  allRows: true,
+  splitGroups: true
+};
+function useTablePrintingSettings(tableId) {
+  const tacoSettings = useTacoSettings();
+  const uniqueId = `taco.${tacoSettings.uniqueUserIdentifier}.table.${tableId}.print.settings`;
+  const [persistedSettings, setPersistedSettings] = useLocalStorage(uniqueId, DEFAULT_PRINT_SETTINGS);
+  function setSetting(key, value) {
+    setPersistedSettings(currentSettings => ({
+      ...currentSettings,
+      [key]: value
+    }));
+  }
+  return [persistedSettings, setSetting];
+}
 
 const DEFAULT_ROW_ACTIONS_LENGTH = 4;
 function useTableRowActions(isEnabled = false, rowActions, rowActionsLength = DEFAULT_ROW_ACTIONS_LENGTH) {
@@ -10336,50 +10447,6 @@ function useTableServerLoading(loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE)
   };
 }
 
-const useLocalStorage = (key, initialValue) => {
-  const [state, setState] = React__default.useState(() => {
-    if (!key) {
-      return initialValue;
-    }
-    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(() => {
-    if (!key) {
-      return;
-    }
-    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 = () => {
-    if (key) {
-      localStorage.removeItem(key);
-    }
-  };
-  return [state, setState, clear];
-};
-
-function useTacoSettings() {
-  return React__default.useContext(TacoContext);
-}
-
 const DEFAULT_ENABLED_OPTIONS = {
   columnOrder: true,
   columnPinning: true,
@@ -10389,7 +10456,6 @@ const DEFAULT_ENABLED_OPTIONS = {
   fontSize: true,
   grouping: true,
   rowHeight: true,
-  showWarningWhenPrintingLargeDataset: true,
   sorting: true
 };
 function useUniqueTableId(tableId) {
@@ -10618,7 +10684,6 @@ function getSettings(table) {
     fontSize: meta.fontSize.isEnabled ? meta.fontSize.size : undefined,
     grouping: table.options.enableGrouping ? state.grouping : undefined,
     rowHeight: meta.rowHeight.isEnabled ? meta.rowHeight.height : undefined,
-    showWarningWhenPrintingLargeDataset: meta.printing.isWarningVisibleForLargeDatasets,
     //searchQuery: table.options.enableGlobalFilter ? state.globalFilter : undefined,
     sorting: state.sorting
   };
@@ -10640,7 +10705,7 @@ function useTableSettingsListener(table, onChangeSettings) {
   //state.columnFilters,
   state.columnOrder, state.columnPinning, state.columnSizing, state.columnVisibility,
   // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
-  meta.search.excludeUnmatchedResults, meta.fontSize.size, state.grouping, meta.rowHeight.height, meta.printing.isWarningVisibleForLargeDatasets,
+  meta.search.excludeUnmatchedResults, meta.fontSize.size, state.grouping, meta.rowHeight.height,
   //state.globalFilter,
   state.sorting]);
 }
@@ -10730,7 +10795,7 @@ function useTableRef(table, ref) {
 }
 
 function useTable(props, ref, meta, internalColumns) {
-  var _props$length, _instance$options$met;
+  var _props$data, _props$length, _instance$options$met;
   // CSS.escape would be best here, but it doesn't seem to work very well
   const safeId = props.id.replace('.', '_');
   // configure table options, merging props with presets
@@ -10742,7 +10807,7 @@ function useTable(props, ref, meta, internalColumns) {
   const columnOrdering = useTableColumnOrdering(options.enableColumnOrdering);
   const fontSize = useTableFontSize(options.enableFontSize, settings.fontSize);
   const footer = useTableFooter(options.enableFooter);
-  const printing = useTablePrinting(options.enablePrinting, settings.showWarningWhenPrintingLargeDataset);
+  const printing = useTablePrinting(options.enablePrinting, safeId);
   const rowActive = useTableRowActive(options.enableRowActive, props.defaultRowActiveIndex);
   const rowActions = useTableRowActions(options.enableRowActions, props.rowActions, props.rowActionsLength);
   const rowClick = useTableRowClick(options.enableRowClick, props.onRowClick);
@@ -10761,10 +10826,13 @@ function useTable(props, ref, meta, internalColumns) {
   } = mapTableChildrenToColumns(props, settings, options, internalColumns);
   // configure initial table state
   const initialState = useReactTableInitialState(props, columns, settings, defaultState);
+  // ensure data is always valid
+  const data = (_props$data = props.data) !== null && _props$data !== void 0 ? _props$data : [];
+  const length = (_props$length = props.length) !== null && _props$length !== void 0 ? _props$length : data.length;
   // create a react-table instance
   // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
   const instance = reactTable.useReactTable({
-    data: props.data,
+    data,
     columns,
     // configure initial table state
     initialState,
@@ -10780,7 +10848,7 @@ function useTable(props, ref, meta, internalColumns) {
       columnOrdering,
       fontSize,
       footer,
-      //getSettings
+      length,
       printing,
       rowActions,
       rowActive,
@@ -10810,7 +10878,6 @@ function useTable(props, ref, meta, internalColumns) {
   return {
     id: safeId,
     instance,
-    length: (_props$length = props.length) !== null && _props$length !== void 0 ? _props$length : props.data.length,
     meta: (_instance$options$met = instance.options.meta) !== null && _instance$options$met !== void 0 ? _instance$options$met : {},
     state: instance.getState()
   };
@@ -10990,6 +11057,7 @@ function Header$3(context) {
       key: String(`${isAllRowsSelected}_${isSomeRowsSelected}`),
       checked: isAllRowsSelected,
       indeterminate: isSomeRowsSelected,
+      loading: tableMeta.server.loadAllStatus === TableServerLoadAllState.Loading,
       onChange: handleChange
     }));
   }
@@ -11009,6 +11077,9 @@ function Cell$2(context) {
     row,
     table
   } = context;
+  const {
+    rowIndex
+  } = React__default.useContext(RowContext);
   const tableMeta = table.options.meta;
   if (table.options.enableGrouping && (_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length && !row.getIsGrouped()) {
     return null;
@@ -11016,18 +11087,48 @@ function Cell$2(context) {
   const isSelected = row.getIsGrouped() ? row.getIsAllSubRowsSelected() : row.getIsSelected();
   const title = isSelected ? texts.table3.columns.select.deselect : texts.table3.columns.select.select;
   if (table.options.enableMultiRowSelection) {
-    const handleClick = event => {
-      event.stopPropagation();
-      if (row.getIsGrouped()) {
-        row.subRows.forEach(row => row.toggleSelected());
-      } else if (event.shiftKey) {
-        var _tableMeta$rowSelecti;
-        const [fromIndex, toIndex] = toggleBetween((_tableMeta$rowSelecti = tableMeta.rowSelection.lastSelectedRowIndex.current) !== null && _tableMeta$rowSelecti !== void 0 ? _tableMeta$rowSelecti : 0, row.index);
-        table.getRowModel().rows.slice(fromIndex, toIndex + 1).forEach(row => row.toggleSelected(true));
-      } else {
-        row.toggleSelected();
+    const handleClick = function (event) {
+      try {
+        function _temp7() {
+          tableMeta.rowSelection.lastSelectedRowIndex.current = row.index;
+        }
+        event.stopPropagation();
+        const _temp6 = function () {
+          if (row.getIsGrouped()) {
+            row.subRows.forEach(row => row.toggleSelected());
+          } else {
+            const _temp5 = function () {
+              if (event.shiftKey) {
+                var _tableMeta$rowSelecti;
+                function _temp4() {
+                  table.setRowSelection(currentRowSelection => ({
+                    ...currentRowSelection,
+                    ...selectedRows.reduce((state, row) => ({
+                      ...state,
+                      [row.id]: true
+                    }), {})
+                  }));
+                }
+                const [fromIndex, toIndex] = toggleBetween((_tableMeta$rowSelecti = tableMeta.rowSelection.lastSelectedRowIndex.current) !== null && _tableMeta$rowSelecti !== void 0 ? _tableMeta$rowSelecti : 0, rowIndex);
+                const selectedRows = table.getRowModel().rows.slice(fromIndex, toIndex + 1);
+                const _temp3 = function () {
+                  if (tableMeta.server.loadAllIfNeeded && selectedRows.some(row => row.original === undefined)) {
+                    // don't pass the search query because we need all data - not filtered data
+                    return Promise.resolve(tableMeta.server.loadAllIfNeeded(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
+                  }
+                }();
+                return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
+              } else {
+                row.toggleSelected();
+              }
+            }();
+            if (_temp5 && _temp5.then) return _temp5.then(function () {});
+          }
+        }();
+        return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(_temp7) : _temp7(_temp6));
+      } catch (e) {
+        return Promise.reject(e);
       }
-      tableMeta.rowSelection.lastSelectedRowIndex.current = row.index;
     };
     return /*#__PURE__*/React__default.createElement(Tooltip, {
       title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title, /*#__PURE__*/React__default.createElement(Shortcut, {
@@ -11070,7 +11171,7 @@ function useTableRowActiveListener(table, tableRef) {
       const activeRow = (_tableRef$current$que = (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.querySelector('tbody tr[data-row-active="true"]')) !== null && _tableRef$current$que !== void 0 ? _tableRef$current$que : null;
       // if the focused element, or it's parent if it's portalled, aren't in the row, then focus the row
       // this ensures the next tab press starts at the row
-      if (!isElementInsideOrTriggeredFromContainer(document.activeElement, activeRow) && !isEventTriggeredOnInteractiveElement(document.activeElement)) {
+      if (!isElementInsideOrTriggeredFromContainer(document.activeElement, activeRow) && !isElementInteractive(document.activeElement)) {
         var _activeRow$focus;
         activeRow === null || activeRow === void 0 ? void 0 : (_activeRow$focus = activeRow.focus) === null || _activeRow$focus === void 0 ? void 0 : _activeRow$focus.call(activeRow, {
           preventScroll: true
@@ -11652,7 +11753,6 @@ function useAugmentedFocusManager() {
 function Body(props) {
   const {
     enableArrowKeyFocusing = false,
-    length,
     table,
     ...attributes
   } = props;
@@ -11667,7 +11767,7 @@ function Body(props) {
     }
     if (tableMeta.rowActive.rowActiveIndex !== undefined) {
       const isFirstRow = tableMeta.rowActive.rowActiveIndex === 0;
-      const isLastRow = tableMeta.rowActive.rowActiveIndex === length - 1;
+      const isLastRow = tableMeta.rowActive.rowActiveIndex === tableMeta.length - 1;
       if (event.key === 'Tab' || enableArrowKeyFocusing && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
         tableMeta.rowActive.setHoverStatePaused(true);
         const focusedElement = event.shiftKey || event.key === 'ArrowLeft' ? focusManager.focusPrevious() : focusManager.focusNext();
@@ -11705,45 +11805,16 @@ function Body(props) {
   }));
 }
 
-function Footer$3(header) {
-  return /*#__PURE__*/React__default.createElement(MemoedFooter, {
-    key: header.id,
-    footer: header
-  });
-}
-const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(props) {
-  var _footer$subHeaders, _footer$subHeaders$fi;
-  const {
-    footer
-  } = props;
-  const columnMeta = footer.column.columnDef.meta;
-  // getIsPinned returns true for split header groups, even if the split group has no pinned sub headers
-  const isHeaderGroup = !!((_footer$subHeaders = footer.subHeaders) !== null && _footer$subHeaders !== void 0 && _footer$subHeaders.length);
-  const isPinned = isHeaderGroup ? (_footer$subHeaders$fi = footer.subHeaders.find(x => x.column.getIsPinned())) === null || _footer$subHeaders$fi === void 0 ? void 0 : _footer$subHeaders$fi.column.getIsPinned() : footer.column.getIsPinned();
-  const style = {};
-  if (isPinned) {
-    // pinned columns should be offset from either the left or right
-    style[isPinned] = `${footer.column.getStart(isPinned) - 1}px`;
-  }
-  return /*#__PURE__*/React__default.createElement("td", {
-    key: footer.id,
-    "data-cell-align": columnMeta.align,
-    "data-cell-id": footer.id,
-    "data-cell-pinned": isPinned ? isPinned : undefined,
-    style: style
-  }, footer.isPlaceholder ? null : reactTable.flexRender(footer.column.columnDef.footer, footer.getContext()));
-});
-
 function Summary(props) {
   var _table$getState$colum;
   const {
-    length,
     table
   } = props;
   const {
     locale,
     texts
   } = useLocalization();
+  const length = table.options.meta.length;
   const currentLength = table.getRowModel().rows.length;
   let label;
   let count;
@@ -11763,11 +11834,51 @@ function Summary(props) {
     count = /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length));
   }
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "border-grey-300 sticky z-20 -mt-[2.63rem] ml-px flex h-10 w-fit items-center whitespace-nowrap rounded-bl border-t-2 bg-white px-4 !pr-3",
+    className: "sticky left-0 z-20 flex h-full w-fit items-center whitespace-nowrap bg-white pr-1 shadow-[12px_0px_6px_white]",
     "data-taco": "table2-footer-summary"
   }, label, "\u00A0", count);
 }
 
+function Footer$3(header) {
+  return /*#__PURE__*/React__default.createElement(MemoedFooter, {
+    key: header.id,
+    footer: header
+  });
+}
+const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(props) {
+  var _footer$subHeaders, _footer$subHeaders$fi;
+  const {
+    footer
+  } = props;
+  const columnMeta = footer.column.columnDef.meta;
+  // getIsPinned returns true for split header groups, even if the split group has no pinned sub headers
+  const isHeaderGroup = !!((_footer$subHeaders = footer.subHeaders) !== null && _footer$subHeaders !== void 0 && _footer$subHeaders.length);
+  const isPinned = isHeaderGroup ? (_footer$subHeaders$fi = footer.subHeaders.find(x => x.column.getIsPinned())) === null || _footer$subHeaders$fi === void 0 ? void 0 : _footer$subHeaders$fi.column.getIsPinned() : footer.column.getIsPinned();
+  const style = {};
+  if (isPinned) {
+    // pinned columns should be offset from either the left or right
+    style[isPinned] = `${footer.column.getStart(isPinned) - 1}px`;
+  }
+  let content;
+  let align;
+  if (footer.index === 0) {
+    align = 'left';
+    content = /*#__PURE__*/React__default.createElement(Summary, {
+      table: footer.getContext().table
+    });
+  } else {
+    align = columnMeta.align;
+    content = footer.isPlaceholder ? null : reactTable.flexRender(footer.column.columnDef.footer, footer.getContext());
+  }
+  return /*#__PURE__*/React__default.createElement("td", {
+    key: footer.id,
+    "data-cell-align": align,
+    "data-cell-id": footer.id,
+    "data-cell-pinned": isPinned ? isPinned : undefined,
+    style: style
+  }, content);
+});
+
 const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput2(props, ref) {
   var _attributes$ariaLabe, _attributes$placehold;
   const {
@@ -11838,6 +11949,7 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     }
     if (event.key === 'Escape') {
       handleClear();
+      event.stopPropagation();
       return;
     }
   };
@@ -13731,7 +13843,39 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
     }
   };
-  const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());
+  const selectOptions = searchQuery === '' ? flattenedChildren.map(child => child.key) : filteredChildren.map(child => isGroup(child) ? Array.isArray(child.props.children) && child.props.children.map(subChild => subChild.key) : child.key).flatMap(c => c) || [];
+  const areAllSelected = Array.isArray(value) && selectOptions.every(option => value.includes(option));
+  const selectAllText = React__default.useMemo(() => {
+    if (searchQuery === '') {
+      if (areAllSelected) {
+        return texts.select2.deselectAll;
+      } else {
+        return texts.select2.selectAll;
+      }
+    } else if (areAllSelected) {
+      return texts.select2.deselectAllResults;
+    } else {
+      return texts.select2.selectAllResults;
+    }
+  }, [areAllSelected, searchQuery]);
+  const selectAll = () => {
+    if (!Array.isArray(value) || value.length === 0) {
+      setValue(selectOptions);
+    } else {
+      selectOptions.forEach(child => {
+        !value.includes(child) && setValue(child);
+      });
+    }
+  };
+  const deselectAll = () => {
+    if (searchQuery === '') {
+      setValue([]);
+    } else {
+      const nextValue = Array.isArray(value) && value.filter(subValue => !selectOptions.includes(subValue));
+      setValue(nextValue);
+    }
+  };
+  const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none"', createCollectionClassName());
   return /*#__PURE__*/React__default.createElement(Select2Context.Provider, {
     value: context
   }, /*#__PURE__*/React__default.createElement(PopoverPrimitive.Root, {
@@ -13771,11 +13915,17 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     style: {
       minWidth: dimensions !== null && dimensions !== void 0 && dimensions.width ? `${dimensions.width}px` : undefined
     }
-  }, flattenedChildren.length > 0 || onCreate ? ( /*#__PURE__*/React__default.createElement(Search$2, {
+  }, flattenedChildren.length > 0 || onCreate ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Search$2, {
     placeholder: onCreate ? texts.select2.searchOrCreate : texts.select2.search,
     ref: searchRef,
     onTabKeyPress: () => setTabTriggeredClose(true)
-  })) : null, flattenedChildren.length <= 0 ? ( /*#__PURE__*/React__default.createElement("div", {
+  }), multiple && selectOptions.length > 1 && ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button$1, {
+    className: "!justify-start",
+    appearance: "discrete",
+    onClick: areAllSelected ? deselectAll : selectAll
+  }, selectAllText), /*#__PURE__*/React__default.createElement("div", {
+    className: "border-grey-300 mx-3 rounded border-t"
+  }))))) : null, flattenedChildren.length <= 0 ? ( /*#__PURE__*/React__default.createElement("div", {
     className: "text-grey-700 -mt-0.5 flex h-8 items-center px-2",
     role: "presentation"
   }, "No results found...")) : ( /*#__PURE__*/React__default.createElement(Root$1, {
@@ -13922,6 +14072,12 @@ function Print$1(props) {
   const lastScrollTopRef = React__default.useRef();
   const toast = useToast();
   const tableMeta = table.options.meta;
+  const {
+    allRows,
+    orientation,
+    size,
+    splitGroups
+  } = tableMeta.printing.settings;
   const togglePrinting = React__default.useCallback(enabled => {
     tableMeta.printing.setIsPrinting(enabled);
     if (tableRef.current) {
@@ -13979,10 +14135,6 @@ function Print$1(props) {
       return Promise.reject(e);
     }
   };
-  const [orientation, setOrientation] = React__default.useState('portrait');
-  const [size, setSize] = React__default.useState('A4');
-  const [allRows, setAllRows] = React__default.useState(true);
-  const [splitGroups, setSplitGroups] = React__default.useState(true);
   const printStyle = [`@page { size: ${size} ${orientation}; }`];
   if (!allRows) {
     printStyle.push(`table[data-taco='report']#${tableId} tr:not([data-row-selected="true"]) { display: none; }`);
@@ -14008,13 +14160,13 @@ function Print$1(props) {
       table: table,
       onAccept: print,
       orientation: orientation,
-      setOrientation: setOrientation,
+      setOrientation: value => tableMeta.printing.setSetting('orientation', value),
       size: size,
-      setSize: setSize,
+      setSize: value => tableMeta.printing.setSetting('size', value),
       allRows: allRows,
-      setAllRows: setAllRows,
+      setAllRows: value => tableMeta.printing.setSetting('allRows', value),
       splitGroups: splitGroups,
-      setSplitGroups: setSplitGroups
+      setSplitGroups: value => tableMeta.printing.setSetting('splitGroups', value)
     }))),
     ref: ref,
     shortcut: shortcut,
@@ -14043,7 +14195,7 @@ function sortByHeader(a, b) {
   return (_a$columnDef$meta = a.columnDef.meta) === null || _a$columnDef$meta === void 0 ? void 0 : (_a$columnDef$meta$hea = _a$columnDef$meta.header) === null || _a$columnDef$meta$hea === void 0 ? void 0 : (_a$columnDef$meta$hea2 = _a$columnDef$meta$hea.localeCompare) === null || _a$columnDef$meta$hea2 === void 0 ? void 0 : _a$columnDef$meta$hea2.call(_a$columnDef$meta$hea, (_b$columnDef$meta = b.columnDef.meta) === null || _b$columnDef$meta === void 0 ? void 0 : _b$columnDef$meta.header);
 }
 
-function FilterColumn(props) {
+const FilterColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     allColumns,
     filters,
@@ -14063,7 +14215,8 @@ function FilterColumn(props) {
     warning: warning,
     className: "min-h-[theme(spacing.8)]"
   }, /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, attributes, {
-    className: "!w-32 flex-shrink-0",
+    ref: ref,
+    className: "focus:yt-focus !w-32 flex-shrink-0 ",
     emptyValue: null,
     onChange: handleChange,
     value: value
@@ -14081,7 +14234,7 @@ function FilterColumn(props) {
       disabled: column.id !== value && (!column.getCanFilter() || !!filters.find(f => f.id === column.id))
     }, ((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header) + (column.parent ? ` (${(_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : (_column$parent$column = _column$parent.columnDef.meta) === null || _column$parent$column === void 0 ? void 0 : _column$parent$column.header})` : ''));
   }))));
-}
+});
 
 function FilterComparator(props) {
   const {
@@ -14308,6 +14461,7 @@ function Filter$1(props) {
     texts
   } = useLocalization();
   const column = allColumns.find(c => c.id === filter.id);
+  const ref = React__default.useRef(null);
   const {
     id,
     value: {
@@ -14326,7 +14480,7 @@ function Filter$1(props) {
       comparator: TableFilterComparator.Contains,
       value: undefined
     };
-    handleChange(id, {
+    handleChange(position, {
       id: columnId,
       value
     });
@@ -14336,7 +14490,7 @@ function Filter$1(props) {
     if (comparator === TableFilterComparator.IsEmpty || comparator === TableFilterComparator.IsNotEmpty) {
       nextValue = undefined;
     }
-    handleChange(id, {
+    handleChange(position, {
       id,
       value: {
         comparator,
@@ -14345,7 +14499,7 @@ function Filter$1(props) {
     });
   };
   const handleChangeValue = value => {
-    handleChange(id, {
+    handleChange(position, {
       id,
       value: {
         ...filter.value,
@@ -14353,7 +14507,12 @@ function Filter$1(props) {
       }
     });
   };
-  const handleRemove = () => onRemove(id);
+  const handleRemove = () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(position);
+  React__default.useEffect(() => {
+    if (ref.current && !id) {
+      ref.current.focus(); // after adding a new filter placeholder, we want to focus it right way.
+    }
+  }, [id]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-start gap-2"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -14362,7 +14521,8 @@ function Filter$1(props) {
     allColumns: allColumns,
     filters: filters,
     onChange: handleChangeColumn,
-    value: id
+    value: id,
+    ref: ref
   }), /*#__PURE__*/React__default.createElement(FilterComparator, {
     column: column,
     onChange: handleChangeComparator,
@@ -14372,46 +14532,21 @@ function Filter$1(props) {
     comparator: comparator,
     onChange: handleChangeValue,
     value: value
-  }), /*#__PURE__*/React__default.createElement(IconButton, {
+  }), onRemove ? /*#__PURE__*/React__default.createElement(IconButton, {
     appearance: "discrete",
     className: "ml-auto",
     icon: "close",
     onClick: handleRemove
-  }));
-}
-
-function Placeholder(props) {
-  const {
-    allColumns,
-    filters,
-    onCreate: handleCreate,
-    onRemove: handleRemove,
-    position
-  } = props;
-  const {
-    texts
-  } = useLocalization();
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-start gap-2"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex min-h-[theme(spacing.8)] 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);
 }
 
+const placeholderFilter = {
+  id: '',
+  value: {
+    comparator: TableFilterComparator.Contains,
+    value: undefined
+  }
+};
 function ManageFiltersPopover(props) {
   const {
     length,
@@ -14425,52 +14560,40 @@ function ManageFiltersPopover(props) {
   const allColumns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id)).sort(sortByHeader);
   const appliedFilters = table.getState().columnFilters;
   // state, since we "apply" filters - our filter values have a special shape, so we force to our type
-  const [filters, setFilters] = React__default.useState(table.getState().columnFilters);
-  const [placeholderCount, setPlaceholderCount] = React__default.useState(1);
+  const [filters, setFilters] = React__default.useState(appliedFilters.length ? appliedFilters : [placeholderFilter]);
   // filters might reset from the outside
   React__default.useEffect(() => {
     if (appliedFilters.length === 0) {
-      setFilters([]);
-      setPlaceholderCount(1);
+      setFilters([placeholderFilter]);
     }
   }, [appliedFilters]);
   // filters
-  const handleChangeFilter = (currentId, filter) => {
+  const handleChangeFilter = (position, filter) => {
     setFilters(currentFilters => {
-      const nextFilters = [...currentFilters];
-      nextFilters[nextFilters.findIndex(f => f.id === currentId)] = filter;
-      return nextFilters;
+      return currentFilters.map((current, index) => {
+        if (index === position) {
+          return filter;
+        }
+        return current;
+      });
     });
   };
-  const handleRemoveFilter = columnId => {
-    if (filters.length === 1 && placeholderCount === 0) {
-      setPlaceholderCount(count => count + 1);
+  const handleRemoveFilter = position => {
+    if (filters.length === 1) {
+      setFilters([placeholderFilter]);
+      return;
     }
-    setFilters(currentFilters => currentFilters.filter(f => f.id !== columnId));
+    setFilters(currentFilters => currentFilters.filter((_, index) => index !== position));
   };
-  // placeholders
-  const handleCreateFilterFromPlaceholder = columnId => {
-    setFilters(currentFilters => [...currentFilters, {
-      id: columnId,
-      value: {
-        comparator: TableFilterComparator.Contains,
-        value: undefined
-      }
-    }]);
-    handleRemovePlaceholder();
-  };
-  const handleCreatePlaceholder = () => {
-    setPlaceholderCount(count => count + 1);
-  };
-  const handleRemovePlaceholder = () => {
-    setPlaceholderCount(count => count - 1);
+  const handleCreate = () => {
+    setFilters(filters.concat(placeholderFilter));
   };
   //
   const handleApply = () => {
     table.setColumnFilters(() => {
       const newFilters = filters.filter(f => {
         var _allColumns$find, _allColumns$find$colu;
-        if (f.id === null) {
+        if (f.id === null || f.id === '') {
           return false;
         }
         const controlRenderer = (_allColumns$find = allColumns.find(c => c.id === f.id)) === null || _allColumns$find === void 0 ? void 0 : (_allColumns$find$colu = _allColumns$find.columnDef.meta) === null || _allColumns$find$colu === void 0 ? void 0 : _allColumns$find$colu.control;
@@ -14484,12 +14607,10 @@ function ManageFiltersPopover(props) {
   };
   const handleClear = () => {
     table.resetColumnFilters();
-    setFilters([]);
-    setPlaceholderCount(1);
+    setFilters([placeholderFilter]);
   };
   const handleClose = () => {
-    setFilters(appliedFilters);
-    setPlaceholderCount(appliedFilters.length ? 0 : 1);
+    setFilters(appliedFilters.length === 0 ? [placeholderFilter] : appliedFilters);
   };
   return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
     onChange: handleClose
@@ -14512,19 +14633,12 @@ function ManageFiltersPopover(props) {
     filters: filters,
     position: index,
     onChange: handleChangeFilter,
-    onRemove: handleRemoveFilter
-  }))), [...Array(placeholderCount)].map((_, index) => ( /*#__PURE__*/React__default.createElement(Placeholder, {
-    key: `placeholder_${index}`,
-    allColumns: allColumns,
-    filters: filters,
-    position: filters.length + index,
-    onCreate: handleCreateFilterFromPlaceholder,
-    onRemove: placeholderCount > 1 || filters.length > 0 ? handleRemovePlaceholder : undefined
+    onRemove: filters.length > 0 && filters.some(f => f.id) || filters.length > 1 ? handleRemoveFilter : undefined
   }))), /*#__PURE__*/React__default.createElement("div", {
     className: "justify-start"
   }, /*#__PURE__*/React__default.createElement(Button$1, {
     appearance: "discrete",
-    onClick: handleCreatePlaceholder
+    onClick: handleCreate
   }, "+ ", texts.table3.filters.buttons.addFilter))), /*#__PURE__*/React__default.createElement(Group, {
     className: "ml-auto"
   }, /*#__PURE__*/React__default.createElement(Popover.Close, null, /*#__PURE__*/React__default.createElement(Button$1, null, "Cancel")), /*#__PURE__*/React__default.createElement(Button$1, {
@@ -14652,12 +14766,15 @@ function useCssGridStylesheet(tableId, table, fontSize) {
         size = `minmax(${minWidth}px, auto)`;
       } else if (width !== undefined) {
         const isLastColumn = index === allVisibleColumns.length - 1;
-        if (isLastColumn) {
-          size = `minmax(${minSize}px, auto)`;
-        } else if (width === 'grow' || Number.isNaN(width)) {
+        if (width === 'grow' || Number.isNaN(width) && !isLastColumn) {
           size = `minmax(${minSize}px, 1fr)`;
         } else {
-          size = `${width < minSize ? minSize : width}px`;
+          const minWidth = width < minSize ? minSize : width;
+          if (isLastColumn) {
+            size = `minmax(${minWidth}px, auto)`;
+          } else {
+            size = `${minWidth}px`;
+          }
         }
       } else {
         size = `minmax(${minSize}px, auto)`;
@@ -15284,16 +15401,8 @@ function useTableGlobalShortcuts(table, tableRef, scrollToIndex) {
   const rows = table.getRowModel().rows;
   React__default.useEffect(() => {
     const handleKeyDown = event => {
-      const target = event.target;
-      const dialog = target.closest('[role="dialog"]');
-      //const eventOriginatedFromCombobox = !!target.closest('[role="combobox"]');
-      // Don't trigger global shortcuts on the table if event originated from a combobox or if table is
-      // outside the dialog
-      if (
-      //eventOriginatedFromCombobox ||
-      dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(tableRef.current))
-      // || tableMeta.shortcutsState.isPaused
-      ) {
+      const trigger = event.target;
+      if (isElementInsideOverlay(trigger) && !isSiblingElementInsideSameParentOverlay(trigger, tableRef.current) || isElementInteractive(trigger) && !isElementInsideOrTriggeredFromContainer(trigger, tableRef.current)) {
         return;
       }
       tableMeta.rowActive.handleKeyDown(event, rows.length, scrollToIndex, tableRef);
@@ -15342,12 +15451,12 @@ const Report$1 = /*#__PURE__*/fixedForwardRef(function Report(props, ref) {
   const stylesheet = useStylesheet(report.id, report.instance);
   useTableGlobalShortcuts(report.instance, tableRef, renderer.scrollToIndex);
   const handleFocus = report.meta.rowActive.rowActiveIndex === undefined ? event => {
-    report.meta.rowActive.handleFocus(event, report.length, renderer.scrollToIndex);
+    report.meta.rowActive.handleFocus(event, report.meta.length, renderer.scrollToIndex);
   } : undefined;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, stylesheet, /*#__PURE__*/React__default.createElement(Toolbar, {
     customSettings: props.customSettings,
     left: props.toolbarLeft,
-    length: report.length,
+    length: report.meta.length,
     right: props.toolbarRight,
     scrollToIndex: renderer.scrollToIndex,
     table: report.instance,
@@ -15371,15 +15480,11 @@ const Report$1 = /*#__PURE__*/fixedForwardRef(function Report(props, ref) {
   }, /*#__PURE__*/React__default.createElement("thead", null, report.instance.getHeaderGroups().map(headerGroup => ( /*#__PURE__*/React__default.createElement("tr", {
     key: headerGroup.id
   }, headerGroup.headers.map(Header$4))))), (_renderer$rows = renderer.rows) !== null && _renderer$rows !== void 0 && _renderer$rows.length ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Body, {
-    length: report.length,
     table: report.instance,
     style: renderer.style
   }, renderer.rows), report.meta.footer.isEnabled ? ( /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, report.instance.getFooterGroups()[0].headers.map(Footer$3)))) : null)) : ( /*#__PURE__*/React__default.createElement(EmptyStateBody, {
     emptyState: props.emptyState
-  }))), report.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Summary, {
-    length: report.length,
-    table: report.instance
-  }) : null));
+  })))));
 });
 Report$1.Column = Column$1;
 Report$1.Group = Group$3;
@@ -17990,7 +18095,9 @@ function useSettingsStateListener(table, onChangeSettings) {
   // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
   meta.columnFreezing.frozenColumnIndex, state.columnOrder, state.columnSizing, state.columnVisibility,
   // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
-  meta.search.excludeUnmatchedResults, meta.fontSize.size, meta.rowHeight.height, meta.printing.isWarningVisibleForLargeDatasets, state.sorting]);
+  meta.search.excludeUnmatchedResults, meta.fontSize.size, meta.rowHeight.height,
+  // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
+  meta.printing.isWarningVisibleForLargeDatasets, state.sorting]);
 }
 
 var Table3FilterComparator;
@@ -19669,6 +19776,25 @@ function Header$6(context) {
     const isAllRowsSelected = context.table.getIsAllRowsSelected();
     const isSomeRowsSelected = context.table.getIsSomeRowsSelected();
     const title = isAllRowsSelected ? texts.table3.columns.select.deselectAll : texts.table3.columns.select.selectAll;
+    const tableMeta = context.table.options.meta;
+    const isServerloading = tableMeta.server.loadAllStatus === TableServerLoadAllState.Loading;
+    const isLoadingAll = isAllRowsSelected && isServerloading;
+    const isLoadingPreviousRows = tableMeta.rowSelection.lastSelectedRowIndex !== undefined && isServerloading;
+    const toggleSelectAll = function () {
+      try {
+        const _temp = function () {
+          if (!isServerloading) {
+            var _tableMeta$server, _tableMeta$server$loa;
+            return Promise.resolve((_tableMeta$server = tableMeta.server) === null || _tableMeta$server === void 0 ? void 0 : (_tableMeta$server$loa = _tableMeta$server.loadAllIfNeeded) === null || _tableMeta$server$loa === void 0 ? void 0 : _tableMeta$server$loa.call(_tableMeta$server, context.table.getState().sorting, context.table.getState().columnFilters, undefined)).then(function () {
+              context.table.toggleAllRowsSelected(!isAllRowsSelected);
+            });
+          }
+        }();
+        return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
     return /*#__PURE__*/React__default.createElement(Header$5, Object.assign({}, context), /*#__PURE__*/React__default.createElement(Tooltip, {
       title: title
     }, /*#__PURE__*/React__default.createElement(Checkbox, {
@@ -19677,8 +19803,9 @@ function Header$6(context) {
       key: String(`${isAllRowsSelected}_${isSomeRowsSelected}`),
       checked: isAllRowsSelected,
       indeterminate: isSomeRowsSelected,
-      onChange: context.table.toggleAllRowsSelected,
-      tabIndex: -1
+      onChange: toggleSelectAll,
+      tabIndex: -1,
+      loading: isLoadingAll || isLoadingPreviousRows
     })));
   } else {
     return /*#__PURE__*/React__default.createElement(Header$5, Object.assign({}, context));
@@ -19700,18 +19827,49 @@ const Cell$7 = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
   const isSelected = context.row.getIsSelected();
   const title = isSelected ? texts.table3.columns.select.deselect : texts.table3.columns.select.select;
-  if (context.table.options.enableMultiRowSelection) {
-    const handleClick = event => {
-      event.stopPropagation();
-      if (event.shiftKey) {
-        var _tableMeta$rowSelecti;
-        const [fromIndex, toIndex] = toggleBetween$2((_tableMeta$rowSelecti = tableMeta.rowSelection.lastSelectedRowIndex.current) !== null && _tableMeta$rowSelecti !== void 0 ? _tableMeta$rowSelecti : 0, rowIndex);
-        context.table.getRowModel().rows.slice(fromIndex, toIndex + 1).forEach(row => row.toggleSelected(true));
-      } else {
-        context.row.toggleSelected();
+  const handleCheckboxClick = function (event) {
+    try {
+      function _temp5() {
+        tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;
       }
-      tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;
-    };
+      event.stopPropagation();
+      const _temp4 = function () {
+        if (event.shiftKey) {
+          var _tableMeta$rowSelecti;
+          function _temp3() {
+            const currentlySelected = context.table.getSelectedRowModel().rows;
+            // concat currently selected with selection range and get rid of duplicates using "Set".
+            // converting allSelected array into updater object: {[row.id]: true}
+            const allSelected = [...new Set(currentlySelected.concat(selectionRangeRows))];
+            const updater = allSelected.reduce((obj, row) => Object.assign(obj, {
+              [row.id]: true
+            }), {});
+            context.table.setRowSelection(updater);
+          }
+          const [fromIndex, toIndex] = toggleBetween$2((_tableMeta$rowSelecti = tableMeta.rowSelection.lastSelectedRowIndex.current) !== null && _tableMeta$rowSelecti !== void 0 ? _tableMeta$rowSelecti : 0, rowIndex);
+          const selectionRangeRows = context.table.getRowModel().rows.slice(fromIndex, toIndex + 1);
+          // Table data loader filling-in all the rest of unloaded items with the undefined values,
+          // so we can easily check if at least one of the rows in the selection range is undefined,
+          // then it means that we need to call load all.
+          const hasUndefinedRows = selectionRangeRows.some(row => row.original === undefined);
+          const _temp2 = function () {
+            if (hasUndefinedRows) {
+              var _tableMeta$server2, _tableMeta$server2$lo;
+              // We don't need to await and freeze UI
+              return Promise.resolve((_tableMeta$server2 = tableMeta.server) === null || _tableMeta$server2 === void 0 ? void 0 : (_tableMeta$server2$lo = _tableMeta$server2.loadAllIfNeeded) === null || _tableMeta$server2$lo === void 0 ? void 0 : _tableMeta$server2$lo.call(_tableMeta$server2, context.table.getState().sorting, context.table.getState().columnFilters, undefined)).then(function () {});
+            }
+          }();
+          return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
+        } else {
+          context.row.toggleSelected();
+        }
+      }();
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  if (context.table.options.enableMultiRowSelection) {
     return /*#__PURE__*/React__default.createElement(DisplayCell$1, 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",
@@ -19721,7 +19879,7 @@ const Cell$7 = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
       "aria-label": title,
       className: "!mt-0",
       checked: isSelected,
-      onClick: handleClick,
+      onClick: handleCheckboxClick,
       // this is necessary to remove console spam from eslint
       onChange: () => false,
       tabIndex: isActiveRow ? 0 : -1
@@ -20413,7 +20571,7 @@ function usePauseShortcuts() {
 }
 
 function useTable$2(props, ref) {
-  var _settings$columnFreez, _props$length;
+  var _settings$columnFreez, _props$data, _ref, _props$length, _props$data2;
   // load any persisted table settings and merge them with any defaults
   const [settings, setSettings] = useSettings(props.id, props.defaultSettings, props.onChangeSettings);
   // configure table3 options
@@ -20437,6 +20595,12 @@ function useTable$2(props, ref) {
   // haven't migrated load all/server loading yet
   const search = useSearch(options.enableSearch, settings.excludeUnmatchedRecordsInSearch);
   const shortcutsState = usePauseShortcuts();
+  React__default.useEffect(() => {
+    // Needed for DataDog
+    if (!Array.isArray(props.data)) {
+      console.error('Table3 data value is not an array');
+    }
+  }, []);
   // custom features - shared/migrated
   const columnOrdering = useTableColumnOrdering(options.enableColumnOrdering);
   const fontSize = useTableFontSize(options.enableFontSize, settings.fontSize);
@@ -20489,7 +20653,8 @@ function useTable$2(props, ref) {
     };
   };
   const table = reactTable.useReactTable({
-    data: props.data,
+    // We need to fallback to an empty array, to avoid table crash in the client
+    data: (_props$data = props.data) !== null && _props$data !== void 0 ? _props$data : [],
     columns,
     getCoreRowModel: reactTable.getCoreRowModel(),
     initialState,
@@ -20533,7 +20698,7 @@ function useTable$2(props, ref) {
   useTableSortingListener(table, props.onSort);
   return {
     table,
-    length: (_props$length = props.length) !== null && _props$length !== void 0 ? _props$length : props.data.length
+    length: (_ref = (_props$length = props.length) !== null && _props$length !== void 0 ? _props$length : (_props$data2 = props.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.length) !== null && _ref !== void 0 ? _ref : 0
   };
 }
 function configureReactTableOptions$1(props, options) {
@@ -21017,7 +21182,7 @@ function resetHighlightedColumnIndexes$1(enabled, value, table) {
   return firstRowIndex;
 }
 
-function FilterColumn$1(props) {
+const FilterColumn$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     allColumns,
     filters,
@@ -21037,7 +21202,8 @@ function FilterColumn$1(props) {
     warning: warning,
     className: "min-h-[theme(spacing.8)]"
   }, /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, attributes, {
-    className: "!w-32 flex-shrink-0",
+    ref: ref,
+    className: "focus:yt-focus !w-32 flex-shrink-0",
     emptyValue: null,
     onChange: handleChange,
     value: value
@@ -21055,7 +21221,7 @@ function FilterColumn$1(props) {
       disabled: column.id !== value && (!column.getCanFilter() || !!filters.find(f => f.id === column.id))
     }, ((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header) + (column.parent ? ` (${(_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : (_column$parent$column = _column$parent.columnDef.meta) === null || _column$parent$column === void 0 ? void 0 : _column$parent$column.header})` : ''));
   }))));
-}
+});
 
 function FilterComparator$1(props) {
   const {
@@ -21074,7 +21240,7 @@ function FilterComparator$1(props) {
     }
   }, [validComparators]);
   return /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, attributes, {
-    className: "!w-32 flex-shrink-0",
+    className: "focus:yt-focus !w-32 flex-shrink-0",
     disabled: !column,
     onChange: handleChange,
     value: value
@@ -21161,38 +21327,6 @@ function getComparatorText$1(comparator, texts, column) {
   }
 }
 
-function Placeholder$1(props) {
-  const {
-    allColumns,
-    filters,
-    onCreate: handleCreate,
-    onRemove: handleRemove,
-    position
-  } = props;
-  const {
-    texts
-  } = useLocalization();
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-start gap-2"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex min-h-[theme(spacing.8)] 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$1, {
-    allColumns: allColumns,
-    filters: filters,
-    onChange: handleCreate,
-    value: null
-  }), /*#__PURE__*/React__default.createElement(FilterComparator$1, 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$1(props) {
   const {
     column,
@@ -21313,6 +21447,7 @@ function Filter$2(props) {
     texts
   } = useLocalization();
   const column = allColumns.find(c => c.id === filter.id);
+  const ref = React__default.useRef(null);
   const {
     id,
     value: {
@@ -21331,7 +21466,7 @@ function Filter$2(props) {
       comparator: null,
       value: null
     };
-    handleChange(id, {
+    handleChange(position, {
       id: columnId,
       value
     });
@@ -21341,7 +21476,7 @@ function Filter$2(props) {
     if (comparator === Table3FilterComparator.IsEmpty || comparator === Table3FilterComparator.IsNotEmpty) {
       nextValue = undefined;
     }
-    handleChange(id, {
+    handleChange(position, {
       id,
       value: {
         comparator,
@@ -21350,7 +21485,7 @@ function Filter$2(props) {
     });
   };
   const handleChangeValue = value => {
-    handleChange(id, {
+    handleChange(position, {
       id,
       value: {
         ...filter.value,
@@ -21358,7 +21493,12 @@ function Filter$2(props) {
       }
     });
   };
-  const handleRemove = () => onRemove(id);
+  const handleRemove = () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(position);
+  React__default.useEffect(() => {
+    if (ref.current && !id) {
+      ref.current.focus(); // after adding a new filter placeholder, we want to focus it right way.
+    }
+  }, [id]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "flex items-start gap-2"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -21367,7 +21507,8 @@ function Filter$2(props) {
     allColumns: allColumns,
     filters: filters,
     onChange: handleChangeColumn,
-    value: id
+    value: id,
+    ref: ref
   }), /*#__PURE__*/React__default.createElement(FilterComparator$1, {
     column: column,
     onChange: handleChangeComparator,
@@ -21377,18 +21518,25 @@ function Filter$2(props) {
     comparator: comparator,
     onChange: handleChangeValue,
     value: value
-  }), /*#__PURE__*/React__default.createElement(IconButton, {
+  }), onRemove ? /*#__PURE__*/React__default.createElement(IconButton, {
     appearance: "discrete",
     className: "ml-auto",
     icon: "close",
     onClick: handleRemove
-  }));
+  }) : null);
 }
 
 function sortByHeader$1(a, b) {
   var _a$columnDef$meta, _a$columnDef$meta$hea, _a$columnDef$meta$hea2, _b$columnDef$meta;
   return (_a$columnDef$meta = a.columnDef.meta) === null || _a$columnDef$meta === void 0 ? void 0 : (_a$columnDef$meta$hea = _a$columnDef$meta.header) === null || _a$columnDef$meta$hea === void 0 ? void 0 : (_a$columnDef$meta$hea2 = _a$columnDef$meta$hea.localeCompare) === null || _a$columnDef$meta$hea2 === void 0 ? void 0 : _a$columnDef$meta$hea2.call(_a$columnDef$meta$hea, (_b$columnDef$meta = b.columnDef.meta) === null || _b$columnDef$meta === void 0 ? void 0 : _b$columnDef$meta.header);
 }
+const placeholderFilter$1 = {
+  id: null,
+  value: {
+    comparator: Table3FilterComparator.Contains,
+    value: undefined
+  }
+};
 function FiltersButton(props) {
   const {
     total,
@@ -21408,41 +21556,28 @@ function FiltersButton(props) {
     shift: true
   };
   // state, since we "apply" filters
-  const [filters, setFilters] = React__default.useState(appliedFilters);
-  const [placeholderCount, setPlaceholderCount] = React__default.useState(1);
+  const [filters, setFilters] = React__default.useState(appliedFilters.length ? appliedFilters : [placeholderFilter$1]);
   // filters
-  const handleChangeFilter = (currentId, filter) => {
+  const handleChangeFilter = (position, filter) => {
     setFilters(currentFilters => {
-      const nextFilters = [...currentFilters];
-      const index = nextFilters.findIndex(f => f.id === currentId);
-      nextFilters[index] = filter;
-      return nextFilters;
+      return currentFilters.map((current, index) => {
+        if (index === position) {
+          return filter;
+        }
+        return current;
+      });
     });
   };
-  const handleRemoveFilter = columnId => {
-    if (filters.length === 1 && placeholderCount === 0) {
-      setPlaceholderCount(count => count + 1);
+  const handleRemoveFilter = position => {
+    if (filters.length === 1) {
+      setFilters([placeholderFilter$1]);
+      return;
     }
-    setFilters(currentFilters => currentFilters.filter(f => f.id !== columnId));
-  };
-  // placeholders
-  const handleCreateFilterFromPlaceholder = columnId => {
-    setFilters(currentFilters => [...currentFilters, {
-      id: columnId,
-      value: {
-        comparator: Table3FilterComparator.Contains,
-        value: undefined
-      }
-    }]);
-    handleRemovePlaceholder();
-  };
-  const handleCreatePlaceholder = () => {
-    setPlaceholderCount(count => count + 1);
+    setFilters(currentFilters => currentFilters.filter((_, index) => index !== position));
   };
-  const handleRemovePlaceholder = () => {
-    setPlaceholderCount(count => count - 1);
+  const handleCreateNew = () => {
+    setFilters(filters.concat(placeholderFilter$1));
   };
-  //
   const handleApply = () => {
     table.setColumnFilters(() => {
       const newFilters = filters.filter(f => {
@@ -21462,20 +21597,17 @@ function FiltersButton(props) {
   };
   const handleClear = () => {
     table.resetColumnFilters();
-    setFilters([]);
-    setPlaceholderCount(1);
+    setFilters([placeholderFilter$1]);
   };
   const handleClose = React__default.useCallback(open => {
     if (!open) {
-      setFilters(appliedFilters);
-      setPlaceholderCount(appliedFilters.length === 0 ? 1 : 0);
+      setFilters(appliedFilters.length === 0 ? [placeholderFilter$1] : appliedFilters);
     }
   }, [appliedFilters]);
   // Because filters can be reset from outside
   React__default.useEffect(() => {
     if (appliedFilters.length === 0) {
-      setFilters([]);
-      setPlaceholderCount(1);
+      setFilters([placeholderFilter$1]);
     }
   }, [appliedFilters]);
   const buttonProps = {
@@ -21505,19 +21637,12 @@ function FiltersButton(props) {
       filters: filters,
       position: index,
       onChange: handleChangeFilter,
-      onRemove: handleRemoveFilter
-    }))), [...Array(placeholderCount)].map((_, index) => ( /*#__PURE__*/React__default.createElement(Placeholder$1, {
-      key: `placeholder_${index}`,
-      allColumns: allColumns,
-      filters: filters,
-      position: filters.length + index,
-      onCreate: handleCreateFilterFromPlaceholder,
-      onRemove: placeholderCount > 1 || filters.length > 0 ? handleRemovePlaceholder : undefined
+      onRemove: filters.length > 0 && filters.some(f => f.id) || filters.length > 1 ? handleRemoveFilter : undefined
     }))), /*#__PURE__*/React__default.createElement("div", {
       className: "justify-start"
     }, /*#__PURE__*/React__default.createElement(Button$1, {
       appearance: "discrete",
-      onClick: handleCreatePlaceholder
+      onClick: handleCreateNew
     }, "+ ", texts.table3.filters.buttons.addFilter))), /*#__PURE__*/React__default.createElement(Group, {
       className: "ml-auto"
     }, /*#__PURE__*/React__default.createElement(Popover.Close, null, /*#__PURE__*/React__default.createElement(Button$1, null, "Cancel")), /*#__PURE__*/React__default.createElement(Button$1, {
@@ -21867,6 +21992,7 @@ function PrintButton(props) {
   const buttonRef = React__default.useRef(null);
   const tableMeta = table.options.meta;
   const state = table.getState();
+  // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
   const {
     isWarningVisibleForLargeDatasets
   } = tableMeta.printing;
@@ -22045,6 +22171,7 @@ function PrintButton(props) {
     onAccept: handleWarningDialogAccept,
     onClose: handleWarningDialogClose,
     onCancel: handleWarningDialogCancel,
+    // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
     onVisibilityChange: tableMeta.printing.setIsWarningVisibleForLargeDatasets
   }));
 }
@@ -22754,13 +22881,10 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   }, []);
   React__default.useEffect(() => {
     const handleKeyDown = event => {
-      const target = event.target;
-      const dialog = target.closest('[role="dialog"]');
+      const trigger = event.target;
       // Select2 also have combobox role to align with W3C guidelines
-      const eventOriginatedFromCombobox = !!target.closest('[role="combobox"]:not([data-taco="Select2"])');
-      // Don't trigger global shortcuts on the table if event originated from a combobox or if table is
-      // outside the dialog
-      if (eventOriginatedFromCombobox || dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(internalRef.current)) || tableMeta.shortcutsState.isPaused) {
+      const eventOriginatedFromCombobox = !!trigger.closest('[role="combobox"]:not([data-taco="Select2"])');
+      if (tableMeta.shortcutsState.isPaused || isElementInsideOverlay(trigger) && !isSiblingElementInsideSameParentOverlay(trigger, internalRef.current) || isElementInteractive(trigger) && !isElementInsideOrTriggeredFromContainer(trigger, internalRef.current) || eventOriginatedFromCombobox) {
         return;
       }
       const rows = table.getRowModel().rows;