@economic/taco 2.23.0 → 2.25.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) => {
@@ -4383,6 +4393,8 @@ const defaultLocalisationTexts = {
         expandAll: 'Expand all rows'
       },
       menu: {
+        editFilter: 'Edit filter',
+        filter: 'Filter',
         freezeFirstColumn: 'Freeze the first column',
         freezeUptoColumn: `Freeze first [TOTAL] columns`,
         freezeColumns: (count = 1) => count === 1 ? 'Freeze the first column' : `Freeze first ${count} columns`,
@@ -4592,7 +4604,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 +4888,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 +4898,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 +4923,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 +4999,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 +5012,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 +5318,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);
@@ -7873,6 +7898,15 @@ const Link = /*#__PURE__*/React.forwardRef(function MenuLink(props, ref) {
 const Trigger$6 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref) {
   const menu = useCurrentMenu();
   const internalRef = useMergedRef(ref);
+  const preventArrowDownShortcut = event => {
+    var _internalRef$current, _internalRef$current2;
+    const isRenderedInTable = !!((_internalRef$current = internalRef.current) !== null && _internalRef$current !== void 0 && _internalRef$current.closest('[data-taco="table2-body"]'));
+    const isRenderedInReport = !!((_internalRef$current2 = internalRef.current) !== null && _internalRef$current2 !== void 0 && _internalRef$current2.closest('[data-taco="report-body"]'));
+    if ((isRenderedInTable || isRenderedInReport) && event.key === 'ArrowDown') {
+      var _internalRef$current3, _internalRef$current4;
+      internalRef === null || internalRef === void 0 ? void 0 : (_internalRef$current3 = internalRef.current) === null || _internalRef$current3 === void 0 ? void 0 : (_internalRef$current4 = _internalRef$current3.parentNode) === null || _internalRef$current4 === void 0 ? void 0 : _internalRef$current4.dispatchEvent(createCustomKeyboardEvent(event));
+    }
+  };
   React.useEffect(() => {
     if (internalRef.current) {
       menu === null || menu === void 0 ? void 0 : menu.setMinWidth(internalRef.current.getBoundingClientRect().width);
@@ -7880,7 +7914,8 @@ const Trigger$6 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref)
   }, [internalRef]);
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Trigger, Object.assign({}, props, {
     asChild: true,
-    ref: internalRef
+    ref: internalRef,
+    onKeyDown: preventArrowDownShortcut
   }));
 });
 
@@ -9277,13 +9312,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 +9346,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 +9957,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 +10459,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 +10468,6 @@ const DEFAULT_ENABLED_OPTIONS = {
   fontSize: true,
   grouping: true,
   rowHeight: true,
-  showWarningWhenPrintingLargeDataset: true,
   sorting: true
 };
 function useUniqueTableId(tableId) {
@@ -10618,7 +10696,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 +10717,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]);
 }
@@ -10729,8 +10806,8 @@ function useTableRef(table, ref) {
   }, [table, ref.current]);
 }
 
-function useTable(props, ref, meta, internalColumns) {
-  var _props$length, _instance$options$met;
+function useTableManager(props, ref, meta, internalColumns) {
+  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 +10819,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 +10838,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 +10860,7 @@ function useTable(props, ref, meta, internalColumns) {
       columnOrdering,
       fontSize,
       footer,
-      //getSettings
+      length,
       printing,
       rowActions,
       rowActive,
@@ -10810,7 +10890,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 +11069,7 @@ function Header$3(context) {
       key: String(`${isAllRowsSelected}_${isSomeRowsSelected}`),
       checked: isAllRowsSelected,
       indeterminate: isSomeRowsSelected,
+      loading: tableMeta.server.loadAllStatus === TableServerLoadAllState.Loading,
       onChange: handleChange
     }));
   }
@@ -11009,6 +11089,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 +11099,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 +11183,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
@@ -11082,7 +11195,6 @@ function useTableRowActiveListener(table, tableRef) {
 
 function useReport(props, ref) {
   const meta = {};
-  // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
   const INTERNAL_COLUMNS = React__default.useMemo(() => ({
     rowActions: {
       header: Header$1,
@@ -11115,7 +11227,8 @@ function useReport(props, ref) {
       }
     }
   }), []);
-  const report = useTable(props, ref, meta, INTERNAL_COLUMNS);
+  // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
+  const report = useTableManager(props, ref, meta, INTERNAL_COLUMNS);
   // listeners
   useTableRowActiveListener(report.instance, ref);
   return report;
@@ -11292,12 +11405,15 @@ function GotoPopover(props) {
 
 function HeaderMenu(props) {
   const {
+    canFilter,
     canGoto,
     canHide,
     canPin,
     canSort,
     customMenu,
     index,
+    isFiltered,
+    onFilter: handleFilter,
     onGoto: handleGoto,
     onHide: handleHide,
     onPin: handlePin,
@@ -11391,6 +11507,12 @@ function HeaderMenu(props) {
         onClick: () => handlePin(undefined)
       }, texts.table3.columns.menu.unfreezeColumns));
     }
+    if (canFilter && handleFilter) {
+      menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+        icon: isFiltered ? 'filter-solid' : 'filter',
+        onClick: () => handleFilter()
+      }, isFiltered ? texts.table3.columns.menu.editFilter : texts.table3.columns.menu.filter));
+    }
     if (customMenu) {
       const menu = customMenu({
         trigger: undefined
@@ -11406,7 +11528,7 @@ function HeaderMenu(props) {
     return menuItems.map((item, key) => /*#__PURE__*/React__default.cloneElement(item, {
       key
     }));
-  }, [canGoto, canHide, canPin, canSort, customMenu, handleGoto, handleSortToggle, index, sortDirection]);
+  }, [canFilter, canGoto, canHide, canPin, canSort, customMenu, handleGoto, handleSortToggle, index, isFiltered, sortDirection]);
   // can't use display: none because the button needs to be focusable
   const className = cn(
   // positioning
@@ -11461,6 +11583,7 @@ function Header$4(header) {
   const columnMeta = (_header$column$column = header.column.columnDef.meta) !== null && _header$column$column !== void 0 ? _header$column$column : {};
   const isGroup = !!header.subHeaders.length;
   const isPinned = getIsPinned(header);
+  const canFilter = !header.isPlaceholder && header.column.getCanFilter() && !!table.options.enableColumnFilters;
   const canHide = !header.isPlaceholder && !isGroup && header.column.getCanHide();
   const canMeasureSize = !!table.getRowModel().rows.length;
   const canPin = !header.isPlaceholder && !isGroup && header.column.getCanPin();
@@ -11474,6 +11597,7 @@ function Header$4(header) {
   // passing header or column results in re-renders on scroll, so anything from those objects as memoed props
   const memoedProps = {
     align: columnMeta.align,
+    canFilter,
     canHide,
     canGoto,
     canMeasureSize,
@@ -11487,6 +11611,7 @@ function Header$4(header) {
     defaultWidth: columnMeta.defaultWidth,
     hasMenu,
     id: header.id,
+    isFiltered: header.column.getIsFiltered(),
     index: header.index,
     isGroup,
     isPinned,
@@ -11503,6 +11628,13 @@ function Header$4(header) {
       'after:!content-none': nextHeader === null || nextHeader === void 0 ? void 0 : nextHeader.isPlaceholder
     });
   }
+  if (canFilter) {
+    memoedProps.onFilter = () => {
+      header.column.setFilterValue({
+        comparator: TableFilterComparator.Contains
+      });
+    };
+  }
   if (canGoto) {
     memoedProps.onGoto = query => {
       var _tableMeta$rowGoto$ha, _tableMeta$rowGoto;
@@ -11546,6 +11678,7 @@ function Header$4(header) {
 const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(props) {
   const {
     align,
+    canFilter,
     canGoto,
     canHide,
     canMeasureSize,
@@ -11560,11 +11693,13 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     hasMenu,
     id,
     index,
+    isFiltered,
     isGroup,
     isPinned,
     isPlaceholder,
     isResizing,
     offset,
+    onFilter: handleFilter,
     onGoto: handleGoto,
     onHide: handleHide,
     onPin: handlePin,
@@ -11605,6 +11740,7 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
   }, children))), sortDirection ? /*#__PURE__*/React__default.createElement(SortIndicator, {
     direction: sortDirection
   }) : null, hasMenu ? ( /*#__PURE__*/React__default.createElement(HeaderMenu, {
+    canFilter: canFilter,
     canGoto: canGoto,
     canHide: canHide,
     canPin: canPin,
@@ -11615,6 +11751,8 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     }),
     customMenu: customMenu,
     index: index,
+    isFiltered: isFiltered,
+    onFilter: handleFilter,
     onGoto: handleGoto,
     onHide: handleHide,
     onPin: handlePin,
@@ -11652,7 +11790,6 @@ function useAugmentedFocusManager() {
 function Body(props) {
   const {
     enableArrowKeyFocusing = false,
-    length,
     table,
     ...attributes
   } = props;
@@ -11667,7 +11804,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();
@@ -11699,56 +11836,29 @@ function Body(props) {
       }
     }
   };
-  return /*#__PURE__*/React__default.createElement("tbody", Object.assign({}, attributes, {
+  return /*#__PURE__*/React__default.createElement("tbody", Object.assign({
+    "data-taco": "report-body"
+  }, attributes, {
     onKeyDown: handleKeyDown,
     ref: ref
   }));
 }
 
-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;
   // row selection
-  const rowsSelectedLength = table.getIsAllRowsSelected() ? length : table.getSelectedRowModel().rows.length;
+  const rowsSelectedLength = table.getSelectedRowModel().rows.length;
   if (rowsSelectedLength > 0) {
     label = texts.table3.footer.summary.selected;
     count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(rowsSelectedLength)), "\u00A0", texts.table3.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length)));
@@ -11763,11 +11873,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 +11988,7 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     }
     if (event.key === 'Escape') {
       handleClear();
+      event.stopPropagation();
       return;
     }
   };
@@ -13731,7 +13882,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 {
+      // array of all available options which are not selected
+      const preselectedValues = selectOptions.filter(option => !value.includes(option));
+      setValue([...value, ...preselectedValues]);
+    }
+  };
+  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 +13954,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 +14111,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 +14174,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 +14199,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,
@@ -14042,8 +14233,11 @@ function sortByHeader(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);
 }
+function isEmptyFilter(filter) {
+  return !filter.value.hasOwnProperty('value'); // eslint-disable-line no-prototype-builtins
+}
 
-function FilterColumn(props) {
+const FilterColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     allColumns,
     filters,
@@ -14063,7 +14257,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 +14276,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 {
@@ -14186,6 +14381,7 @@ function getComparatorText(comparator, texts, column) {
   }
 }
 
+const querySelector = 'filter-value';
 function FilterValue(props) {
   const {
     column,
@@ -14207,6 +14403,7 @@ function FilterValue(props) {
       return /*#__PURE__*/React__default.createElement(Input, {
         "aria-label": texts.table3.filters.emptyFilter.value,
         className: "flex-grow",
+        "data-query-selector": querySelector,
         disabled: true,
         value: texts.table3.filters.emptyFilter.value
       });
@@ -14216,10 +14413,12 @@ function FilterValue(props) {
         className: "flex flex-grow items-center gap-2"
       }, /*#__PURE__*/React__default.createElement(Control, {
         column: column,
+        "data-query-selector": querySelector,
         onChange: value => handleChange([value, toValue]),
         value: fromValue
       }), /*#__PURE__*/React__default.createElement(Control, {
         column: column,
+        "data-query-selector": querySelector,
         onChange: value => handleChange([fromValue, value]),
         value: toValue
       }));
@@ -14228,11 +14427,13 @@ function FilterValue(props) {
       className: "flex flex-grow items-center gap-2"
     }, /*#__PURE__*/React__default.createElement(Control, {
       column: column,
+      "data-query-selector": querySelector,
       onChange: value => handleChange([isNaN(value) ? undefined : value, toValue]),
       placeholder: "from",
       value: fromValue !== null && fromValue !== void 0 ? fromValue : ''
     }), /*#__PURE__*/React__default.createElement(Control, {
       column: column,
+      "data-query-selector": querySelector,
       onChange: value => handleChange([fromValue, isNaN(value) ? undefined : value]),
       placeholder: "to",
       value: toValue !== null && toValue !== void 0 ? toValue : ''
@@ -14241,6 +14442,7 @@ function FilterValue(props) {
   return /*#__PURE__*/React__default.createElement(Control, {
     comparator: comparator,
     column: column,
+    "data-query-selector": querySelector,
     onChange: handleChange,
     value: value
   });
@@ -14262,10 +14464,13 @@ function Control(props) {
     }
   }, []);
   if (typeof controlRenderer === 'function') {
-    return controlRenderer({
+    return /*#__PURE__*/React__default.cloneElement(controlRenderer({
       ...attributes,
       setValue: value => onChange(value),
       value
+    }), {
+      ['data-query-selector']: querySelector,
+      className: 'focus:yt-focus'
     });
   } else if (controlRenderer === 'datepicker' || dataType === 'datetime') {
     return /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, attributes, {
@@ -14308,6 +14513,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 +14532,7 @@ function Filter$1(props) {
       comparator: TableFilterComparator.Contains,
       value: undefined
     };
-    handleChange(id, {
+    handleChange(position, {
       id: columnId,
       value
     });
@@ -14336,7 +14542,7 @@ function Filter$1(props) {
     if (comparator === TableFilterComparator.IsEmpty || comparator === TableFilterComparator.IsNotEmpty) {
       nextValue = undefined;
     }
-    handleChange(id, {
+    handleChange(position, {
       id,
       value: {
         comparator,
@@ -14345,7 +14551,7 @@ function Filter$1(props) {
     });
   };
   const handleChangeValue = value => {
-    handleChange(id, {
+    handleChange(position, {
       id,
       value: {
         ...filter.value,
@@ -14353,7 +14559,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 +14573,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 +14584,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,
@@ -14423,54 +14610,46 @@ function ManageFiltersPopover(props) {
     texts
   } = useLocalization();
   const allColumns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id)).sort(sortByHeader);
-  const appliedFilters = table.getState().columnFilters;
+  const columnFilters = 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);
-  // filters might reset from the outside
+  const [filters, setFilters] = React__default.useState(columnFilters.length ? columnFilters : [placeholderFilter]);
+  // this runs if filters are set outside (e.g. through column header)
   React__default.useEffect(() => {
-    if (appliedFilters.length === 0) {
-      setFilters([]);
-      setPlaceholderCount(1);
-    }
-  }, [appliedFilters]);
+    setFilters(columnFilters.length === 0 ? [placeholderFilter] : columnFilters);
+    // focus the filter value, as we preset the column/comparator.
+    requestAnimationFrame(() => {
+      const filterValues = document.querySelectorAll('[data-query-selector="filter-value"]');
+      const lastFilter = filterValues.length ? filterValues[filterValues.length - 1] : undefined;
+      lastFilter === null || lastFilter === void 0 ? void 0 : lastFilter.focus();
+    });
+  }, [columnFilters]);
   // 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 +14663,14 @@ function ManageFiltersPopover(props) {
   };
   const handleClear = () => {
     table.resetColumnFilters();
-    setFilters([]);
-    setPlaceholderCount(1);
+    setFilters([placeholderFilter]);
   };
-  const handleClose = () => {
-    setFilters(appliedFilters);
-    setPlaceholderCount(appliedFilters.length ? 0 : 1);
+  const handleClose = open => {
+    if (!open) {
+      const nonEmptyFilters = columnFilters.filter(f => !isEmptyFilter(f));
+      table.setColumnFilters(nonEmptyFilters);
+      setFilters(nonEmptyFilters.length === 0 ? [placeholderFilter] : nonEmptyFilters);
+    }
   };
   return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
     onChange: handleClose
@@ -14512,19 +14693,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, {
@@ -14544,7 +14718,9 @@ function Filters(props) {
     texts
   } = useLocalization();
   const isLargeScreen = useIsLargeScreen();
-  const appliedFilters = table.getState().columnFilters;
+  const columnFilters = table.getState().columnFilters;
+  const appliedFilters = columnFilters.filter(f => !isEmptyFilter(f));
+  const ref = React__default.useRef(null);
   const shortcut = {
     key: 'f',
     meta: true,
@@ -14558,11 +14734,20 @@ function Filters(props) {
       table: table
     })),
     shortcut,
+    ref,
     tooltip: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table3.filters.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
       className: "ml-2",
       keys: shortcut
     })))
   };
+  React__default.useEffect(() => {
+    const emptyFilter = columnFilters.find(isEmptyFilter);
+    // we set an empty filter when adding a filter through a column header.
+    if (emptyFilter) {
+      var _ref$current;
+      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
+    }
+  }, [columnFilters]);
   if (!isLargeScreen && !appliedFilters.length) {
     return /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, buttonProps, {
       icon: "filter"
@@ -14652,12 +14837,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 +15472,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 +15522,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 +15551,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;
@@ -16200,7 +16376,7 @@ const useTableSortingListener$1 = (data, sortedRows, onSort, manualSorting, stat
   }, [onSort && JSON.stringify(state.sortBy), manualSorting]);
 };
 const DEFAULT_PAGE_SIZE$1 = 10;
-const useTable$1 = (props, ref) => {
+const useTable = (props, ref) => {
   var _otherProps$tabIndex;
   const {
     children,
@@ -16523,7 +16699,7 @@ const Table = /*#__PURE__*/React__default.forwardRef(function Table(props, ref)
     prepareRow,
     pagination,
     instance
-  } = useTable$1(otherProps, tableRef);
+  } = useTable(otherProps, tableRef);
   let paginationElement;
   if (pagination) {
     paginationElement = /*#__PURE__*/React__default.createElement(Pagination, {
@@ -16631,7 +16807,7 @@ const WindowedTable = /*#__PURE__*/React__default.forwardRef(function WindowedTa
     prepareRow,
     instance,
     state
-  } = useTable$1({
+  } = useTable({
     ...otherProps,
     windowed: true
   }, tableRef);
@@ -17990,7 +18166,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 +19847,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 +19874,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 +19898,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 +19950,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
@@ -20412,8 +20641,8 @@ function usePauseShortcuts() {
   };
 }
 
-function useTable$2(props, ref) {
-  var _settings$columnFreez, _props$length;
+function useTable$1(props, ref) {
+  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 +20666,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 +20724,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 +20769,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 +21253,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 +21273,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 +21292,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 +21311,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 +21398,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 +21518,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 +21537,7 @@ function Filter$2(props) {
       comparator: null,
       value: null
     };
-    handleChange(id, {
+    handleChange(position, {
       id: columnId,
       value
     });
@@ -21341,7 +21547,7 @@ function Filter$2(props) {
     if (comparator === Table3FilterComparator.IsEmpty || comparator === Table3FilterComparator.IsNotEmpty) {
       nextValue = undefined;
     }
-    handleChange(id, {
+    handleChange(position, {
       id,
       value: {
         comparator,
@@ -21350,7 +21556,7 @@ function Filter$2(props) {
     });
   };
   const handleChangeValue = value => {
-    handleChange(id, {
+    handleChange(position, {
       id,
       value: {
         ...filter.value,
@@ -21358,7 +21564,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 +21578,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 +21589,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 +21627,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();
+    setFilters(currentFilters => currentFilters.filter((_, index) => index !== position));
   };
-  const handleCreatePlaceholder = () => {
-    setPlaceholderCount(count => count + 1);
+  const handleCreateNew = () => {
+    setFilters(filters.concat(placeholderFilter$1));
   };
-  const handleRemovePlaceholder = () => {
-    setPlaceholderCount(count => count - 1);
-  };
-  //
   const handleApply = () => {
     table.setColumnFilters(() => {
       const newFilters = filters.filter(f => {
@@ -21462,20 +21668,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 +21708,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 +22063,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 +22242,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
   }));
 }
@@ -22324,7 +22522,7 @@ function Summary$1(props) {
   let label;
   let count;
   // row selection
-  const rowsSelectedLength = table.getIsAllRowsSelected() ? length : table.getSelectedRowModel().rows.length;
+  const rowsSelectedLength = table.getSelectedRowModel().rows.length;
   if (rowsSelectedLength > 0) {
     label = texts.table3.footer.summary.selected;
     count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(rowsSelectedLength)), "\u00A0", texts.table3.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length)));
@@ -22723,7 +22921,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const {
     table,
     length
-  } = useTable$2(props, internalRef);
+  } = useTable$1(props, internalRef);
   useTableRefInstanceSetup(table, internalRef);
   React__default.useEffect(() => {
     if (props.autoFocus) {
@@ -22754,13 +22952,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;