@economic/taco 2.22.2 → 2.24.0

package/dist/taco.cjs.development.js

@@ -26,6 +26,7 @@ var HoverCardPrimitive = require('@radix-ui/react-hover-card');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var PrimitiveSwitch = require('@radix-ui/react-switch');
+var reactPortal = require('@radix-ui/react-portal');
 var reactTable = require('@tanstack/react-table');
 var core = require('@dnd-kit/core');
 var SortablePrimitive = require('@dnd-kit/sortable');
@@ -4060,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;
 }
 
@@ -4084,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);
@@ -4141,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,
@@ -4183,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) => {
@@ -4591,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'
@@ -4818,6 +4833,49 @@ const Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
   })));
 });
 
+const isElementTruncated = targetElement => {
+  if (targetElement !== null) {
+    return targetElement.offsetWidth < targetElement.scrollWidth;
+  }
+  return false;
+};
+const useTruncated = (element, deps = []) => {
+  const [isTruncated, setIsTruncated] = React__default.useState(isElementTruncated(element));
+  React__default.useEffect(() => {
+    setIsTruncated(isElementTruncated(element));
+  }, [element, ...deps]);
+  return {
+    isTruncated
+  };
+};
+
+const Truncate = ({
+  children,
+  tooltip
+}) => {
+  const ref = React__default.useRef(null);
+  const [mounted, setMounted] = React__default.useState(false);
+  const {
+    isTruncated
+  } = useTruncated(ref.current, [mounted]);
+  React__default.useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+  const clonedChildrenWithRef = /*#__PURE__*/React__default.cloneElement(React__default.Children.only(children), {
+    ref,
+    className: cn(children.props.className, 'truncate', {
+      'hover:cursor-pointer': isTruncated
+    })
+  });
+  if (isTruncated) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: tooltip
+    }, clonedChildrenWithRef);
+  }
+  return clonedChildrenWithRef;
+};
+
 const Content$2 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps, ref) {
   const {
     noPadding,
@@ -4828,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
   }));
 });
@@ -4837,16 +4896,18 @@ 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",
     ref: ref
   }, /*#__PURE__*/React.createElement("div", {
     className: "mx-4 mb-2 mt-4 flex"
-  }, title && /*#__PURE__*/React.createElement("h4", {
-    className: "mb-0 flex-grow text-left"
-  }, title), menu ? /*#__PURE__*/React.createElement(IconButton, {
+  }, title && ( /*#__PURE__*/React.createElement(Truncate, {
+    tooltip: title
+  }, /*#__PURE__*/React.createElement("h4", {
+    className: "mb-0 flex-grow truncate text-left"
+  }, title))), menu ? /*#__PURE__*/React.createElement(IconButton, {
     icon: "ellipsis-horizontal",
     appearance: "discrete",
     menu: menu,
@@ -4860,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;
@@ -4896,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",
@@ -4904,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
@@ -5208,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);
@@ -7001,30 +7070,8 @@ Drawer.Close = Close$3;
 Drawer.Actions = Actions;
 Drawer.Outlet = Outlet;
 
-const isTruncated = targetElement => {
-  if (targetElement !== null) {
-    return targetElement.offsetWidth < targetElement.scrollWidth;
-  }
-  return false;
-};
-const useTruncated = (element, deps = []) => {
-  const [truncated, setTruncated] = React__default.useState(isTruncated(element));
-  React__default.useEffect(() => {
-    setTruncated(isTruncated(element));
-  }, [element, ...deps]);
-  return {
-    truncated
-  };
-};
-
 const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
-  const [showTooltip, setShowTooltip] = React.useState(false);
   const messageRef = React.useRef(null);
-  React.useEffect(() => {
-    // refs are null on the first render so setting showTooltip state forces the rerender to see if message is
-    // truncated or not
-    setShowTooltip(true);
-  }, []);
   const {
     disabled,
     children,
@@ -7042,16 +7089,12 @@ const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
     'text-yellow-700': warning && !invalid,
     'opacity-50': disabled
   });
-  const {
-    truncated: isMessageTrucated
-  } = useTruncated(messageRef.current, [message, showTooltip]);
   return /*#__PURE__*/React.createElement("label", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "label",
     ref: ref
-  }), children, message && ( /*#__PURE__*/React.createElement(Tooltip, {
-    title: message,
-    hide: !isMessageTrucated
+  }), children, message && ( /*#__PURE__*/React.createElement(Truncate, {
+    tooltip: message
   }, /*#__PURE__*/React.createElement("span", {
     className: messageClassName,
     ref: messageRef,
@@ -8421,8 +8464,9 @@ const sanitizeButtonPropsForMenuItem = (button, index) => {
 };
 const DEFAULT_OFFSET = 32 + 8;
 const OverflowGroup = /*#__PURE__*/React__default.forwardRef(function OverflowGroup(props, ref) {
+  var _moreButton;
   const {
-    moreButton: MoreButton,
+    moreButton,
     ...attributes
   } = props;
   const internalRef = useMergedRef(ref);
@@ -8432,12 +8476,17 @@ const OverflowGroup = /*#__PURE__*/React__default.forwardRef(function OverflowGr
     var _el$getBoundingClient;
     return setButtonWidth(el === null || el === void 0 ? void 0 : (_el$getBoundingClient = el.getBoundingClientRect()) === null || _el$getBoundingClient === void 0 ? void 0 : _el$getBoundingClient.width);
   }, []);
-  const button = MoreButton !== null && MoreButton !== void 0 ? MoreButton : /*#__PURE__*/React__default.createElement(IconButton, {
-    icon: "more"
-  });
+  const {
+    texts
+  } = useLocalization();
   const intersectedChildIndex = useIntersectionObserver(internalRef, buttonWidth);
   const children = React__default.Children.toArray(props.children);
   const hiddenChildren = intersectedChildIndex !== undefined ? children.slice(intersectedChildIndex) : [];
+  const hiddenChildrenCount = hiddenChildren.length;
+  const moreButtonText = hiddenChildrenCount ? `${hiddenChildrenCount} ${texts.header.more}` : '';
+  const MoreButton = (_moreButton = moreButton === null || moreButton === void 0 ? void 0 : moreButton(moreButtonText)) !== null && _moreButton !== void 0 ? _moreButton : /*#__PURE__*/React__default.createElement(IconButton, {
+    icon: "more"
+  });
   const className = cn('flex overflow-hidden', props.className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
     className: className,
@@ -8448,8 +8497,8 @@ const OverflowGroup = /*#__PURE__*/React__default.forwardRef(function OverflowGr
       visible: intersectedChildIndex === undefined || index < intersectedChildIndex,
       'invisible order-[100] pointer-events-none': intersectedChildIndex !== undefined && index >= intersectedChildIndex
     })
-  })), hiddenChildren.length ? /*#__PURE__*/React__default.cloneElement(button, {
-    className: cn('sticky right-0 order-[99]', button.props.className),
+  })), hiddenChildren.length ? /*#__PURE__*/React__default.cloneElement(MoreButton, {
+    className: cn('sticky right-0 order-[99]', MoreButton.props.className),
     'data-observer-ignore': true,
     menu: menuProps => ( /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, hiddenChildren.map(sanitizeButtonPropsForMenuItem)))),
     ref: buttonRefCallback
@@ -9141,9 +9190,9 @@ const ToastProvider = ({
   }, []);
   return /*#__PURE__*/React.createElement(ToastContext.Provider, Object.assign({}, props, {
     value: toaster
-  }), children, /*#__PURE__*/React.createElement("div", {
+  }), children, /*#__PURE__*/React.createElement(reactPortal.Portal, null, /*#__PURE__*/React.createElement("div", {
     id: "yt-toast__container",
-    className: "pointer-events-all absolute bottom-0 right-0 !left-auto z-[1000] mb-4 mr-4 flex max-w-md flex-col items-end justify-end",
+    className: "pointer-events-all absolute !left-auto bottom-0 right-0 z-[1000] mb-4 mr-4 flex max-w-md flex-col items-end justify-end",
     role: "log"
   }, /*#__PURE__*/React.createElement(framerMotion.AnimatePresence, {
     initial: false
@@ -9173,7 +9222,7 @@ const ToastProvider = ({
     }
   }, /*#__PURE__*/React.createElement(Toast, Object.assign({}, toast, {
     onClose: () => handleClose(toast.id)
-  }))))))));
+  })))))))));
 };
 const useToast = () => React.useContext(ToastContext);
 
@@ -9251,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)) {
@@ -9266,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 => {
@@ -9726,7 +9801,7 @@ const DEFAULT_PRESET = {
   enableRowClick: false,
   enableRowGoto: false,
   enableRowHeight: false,
-  enableSettings: false
+  enableSaveSettings: false
 };
 const presets = {
   lite: {
@@ -9750,7 +9825,7 @@ const presets = {
     enableRowClick: true,
     enableRowGoto: true,
     enableRowHeight: false,
-    enableSettings: true
+    enableSaveSettings: true
   },
   complex: {
     // react-table built-in
@@ -9773,11 +9848,11 @@ const presets = {
     enableRowClick: true,
     enableRowGoto: true,
     enableRowHeight: true,
-    enableSettings: true
+    enableSaveSettings: true
   }
 };
 function useTableFeaturePreset(props) {
-  var _props$enableRowActio, _props$enableRowClick, _props$enableRowGoto, _props$enableRowExpan, _props$enableRowSelec, _props$enableRowSelec2, _props$enableFilterin, _props$enableSearch, _props$enableSorting, _props$enableColumnFr, _props$enableColumnHi, _props$enableColumnRe, _props$enableColumnOr, _props$enableFontSize, _props$enableFooter, _props$enablePrinting, _props$enableRowActiv, _props$rowActions2, _props$enableRowHeigh, _props$enableSettings;
+  var _props$enableRowActio, _props$enableRowClick, _props$enableRowGoto, _props$enableRowExpan, _props$enableRowSelec, _props$enableRowSelec2, _props$enableFilterin, _props$enableSearch, _props$enableSorting, _props$enableColumnFr, _props$enableColumnHi, _props$enableColumnRe, _props$enableColumnOr, _props$enableFontSize, _props$enableFooter, _props$enablePrinting, _props$enableRowActiv, _props$rowActions2, _props$enableRowHeigh, _props$enableSaveSett;
   const presetOptions = props.preset ? presets[props.preset] : DEFAULT_PRESET;
   const enableRowActions = (_props$enableRowActio = props.enableRowActions) !== null && _props$enableRowActio !== void 0 ? _props$enableRowActio : presetOptions.enableRowActions;
   const enableRowClick = (_props$enableRowClick = props.enableRowClick) !== null && _props$enableRowClick !== void 0 ? _props$enableRowClick : presetOptions.enableRowClick;
@@ -9828,7 +9903,7 @@ function useTableFeaturePreset(props) {
     enableRowClick: enableRowClick && !!props.onRowClick,
     enableRowGoto: enableRowGoto && !!props.onRowGoto,
     enableRowHeight: (_props$enableRowHeigh = props.enableRowHeight) !== null && _props$enableRowHeigh !== void 0 ? _props$enableRowHeigh : presetOptions.enableRowHeight,
-    enableSettings: (_props$enableSettings = props.enableSettings) !== null && _props$enableSettings !== void 0 ? _props$enableSettings : presetOptions.enableSettings
+    enableSaveSettings: (_props$enableSaveSett = props.enableSaveSettings) !== null && _props$enableSaveSett !== void 0 ? _props$enableSaveSett : presetOptions.enableSaveSettings
   };
 }
 
@@ -9870,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) {
@@ -10140,6 +10277,130 @@ function _finallyRethrows(body, finalizer) {
 }
 
 const DEFAULT_PAGE_SIZE = 100;
+function useTableDataLoader(fetch, fetchAll, options = {
+  pageSize: DEFAULT_PAGE_SIZE
+}) {
+  const {
+    pageSize
+  } = options;
+  // track the data length, we don't know it until the first request
+  const length = React__default.useRef(undefined);
+  // data will be filled after the first request, then we'll update values in place
+  const [data, setData] = React__default.useState([]);
+  // track which pages have been loaded to dedupe requests
+  const _pendingPageRequests = React__default.useRef({});
+  const _lastUsedSorting = React__default.useRef([]);
+  const _lastUsedFilters = React__default.useRef([]);
+  const _lastUsedSearch = React__default.useRef();
+  const _forceReset = React__default.useRef(false);
+  const loadPage = function (pageIndex, sorting, filters, search) {
+    try {
+      let reset = false;
+      // sorting or filters changed, reset everything
+      if (_forceReset.current || search !== _lastUsedSearch.current || JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current)) {
+        _pendingPageRequests.current = {};
+        // nuke the dataset so that we "start again" after sorting
+        reset = true;
+      }
+      if (_pendingPageRequests.current[pageIndex]) {
+        // if page is already loaded/loading, abort, otherwise mark it as loading
+        return Promise.resolve();
+      } else {
+        _pendingPageRequests.current[pageIndex] = true;
+      }
+      _forceReset.current = false;
+      // set the sorting so we can track if it changed between loads
+      _lastUsedSorting.current = sorting;
+      // set the filters so we can track if it changed between loads
+      _lastUsedFilters.current = filters;
+      // set the search so we can track if it changed between loads
+      _lastUsedSearch.current = search;
+      const _temp = _finallyRethrows(function () {
+        return _catch(function () {
+          return Promise.resolve(fetch(pageIndex, pageSize, sorting, filters, search)).then(function (response) {
+            // update state, here we do some "magic" to support "load in place"
+            setData(currentData => {
+              let nextData;
+              // reset table state if:
+              // - the length isn't set at all (first load)
+              // - the client length and server length are different (the data changed)
+              if (reset || length.current !== response.length) {
+                length.current = response.length;
+                nextData = Array(length.current).fill(undefined);
+              } else {
+                nextData = [...currentData];
+              }
+              const startIndex = pageIndex * pageSize;
+              nextData.splice(startIndex, pageSize, ...response.data);
+              return nextData;
+            });
+          });
+        }, function () {});
+      }, function (_wasThrown, _result) {
+        _pendingPageRequests.current[pageIndex] = false;
+        if (_wasThrown) throw _result;
+        return _result;
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const loadAll = function (sorting, filters, search) {
+    try {
+      const _temp2 = _catch(function () {
+        return Promise.resolve(fetchAll(sorting, filters, search)).then(function (response) {
+          length.current = response.length;
+          setData(() => {
+            let nextData;
+            if (response.data.length !== response.length) {
+              nextData = Array(response.length).fill(undefined);
+              nextData.splice(0, response.data.length, ...response.data);
+            } else {
+              nextData = [...response.data];
+            }
+            return nextData;
+          });
+        });
+      }, function () {});
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const invalidate = function () {
+    try {
+      _forceReset.current = true;
+      return loadPage(0, _lastUsedSorting.current, _lastUsedFilters.current, _lastUsedSearch.current);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  // we reset the page to 0 whenever sorting, filtering or search changes
+  const handleSort = function (sorting) {
+    try {
+      return loadPage(0, sorting, _lastUsedFilters.current, _lastUsedSearch.current);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const handleFilter = function (filters) {
+    try {
+      return loadPage(0, _lastUsedSorting.current, filters, _lastUsedSearch.current);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return [{
+    data,
+    length: length.current,
+    loadAll,
+    loadPage,
+    onChangeFilter: handleFilter,
+    onChangeSort: handleSort,
+    pageSize
+  }, invalidate];
+}
 
 function useTableServerLoading(loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE) {
   const isEnabled = !!loadPage && !!loadAll;
@@ -10186,71 +10447,68 @@ 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];
+const DEFAULT_ENABLED_OPTIONS = {
+  columnOrder: true,
+  columnPinning: true,
+  columnSizing: true,
+  columnVisibility: true,
+  excludeUnmatchedRecordsInSearch: true,
+  fontSize: true,
+  grouping: true,
+  rowHeight: true,
+  sorting: true
 };
-
-function useTacoSettings() {
-  return React__default.useContext(TacoContext);
-}
-
 function useUniqueTableId(tableId) {
   const tacoSettings = useTacoSettings();
   return `taco.${tacoSettings.uniqueUserIdentifier}.table.${tableId}.settings`;
 }
+function useEnabledSettings(isEnabled) {
+  return React__default.useMemo(() => {
+    if (isEnabled === false) {
+      return [Object.keys(DEFAULT_ENABLED_OPTIONS).reduce((o, key) => ({
+        ...o,
+        [key]: false
+      }), {}), false];
+    } else if (isEnabled === true) {
+      return [DEFAULT_ENABLED_OPTIONS, true];
+    }
+    const options = {
+      ...DEFAULT_ENABLED_OPTIONS,
+      ...isEnabled
+    };
+    return [options, Object.values(options).some(o => o === true)];
+  }, [isEnabled]);
+}
 function useTableSettings(isEnabled = false, id, defaultSettings = {}, onChangeSettings) {
   const uniqueId = useUniqueTableId(id);
-  const [persistedSettings, _setPersistedSettings] = useLocalStorage(isEnabled ? uniqueId : undefined, defaultSettings);
+  const [enabledSettings, hasSomeEnabledSettings] = useEnabledSettings(isEnabled);
+  const [persistedSettings, _setPersistedSettings] = useLocalStorage(hasSomeEnabledSettings ? uniqueId : undefined, removeDisabledSettings(defaultSettings, enabledSettings));
   const setPersistedSettings = React__default.useCallback(value => {
-    if (!isEnabled) {
+    if (!hasSomeEnabledSettings) {
       return;
     }
-    _setPersistedSettings(value);
+    const sanitizedSettings = removeDisabledSettings(value, enabledSettings);
+    _setPersistedSettings(sanitizedSettings);
     if (typeof onChangeSettings === 'function') {
-      onChangeSettings(value);
+      onChangeSettings(sanitizedSettings);
     }
-  }, [isEnabled, onChangeSettings]);
-  if (!isEnabled) {
+  }, [hasSomeEnabledSettings, onChangeSettings, JSON.stringify(enabledSettings)]);
+  if (!hasSomeEnabledSettings) {
     return [defaultSettings, () => undefined];
   }
   return [persistedSettings, setPersistedSettings];
 }
+function removeDisabledSettings(settings, enabledSettings) {
+  const sanitizedSettings = {
+    ...settings
+  };
+  Object.keys(enabledSettings).forEach(setting => {
+    if (!enabledSettings[setting]) {
+      delete sanitizedSettings[setting];
+    }
+  });
+  return sanitizedSettings;
+}
 
 // augments useEffect to not run on the initial mount
 function useLazyEffect(effect, deps) {
@@ -10357,12 +10615,25 @@ function resetHighlightedColumnIndexes(value, table) {
   if (value) {
     const indexes = [];
     const columns = table.getVisibleLeafColumns();
+    const rowGrouping = table.getState().grouping;
     table.getRowModel().rows.forEach((row, rowIndex) => {
       columns.forEach((column, columnIndex) => {
         try {
-          if (column.getIsVisible() && column.columnDef.enableGlobalFilter) {
+          let allowSearch = true;
+          if (rowGrouping !== null && rowGrouping !== void 0 && rowGrouping.length) {
+            // if it's the grouped row, only allow search of the grouped column - because that's all that's visible
+            if (row.getIsGrouped()) {
+              allowSearch = column.getIsGrouped();
+            }
+            // otherwise for other rows, don't search the grouped column - because it isn't visible
+            else if (rowGrouping.includes(column.id)) {
+              allowSearch = false;
+            }
+          }
+          if (column.getIsVisible() && column.columnDef.enableGlobalFilter && allowSearch) {
             var _row$original, _column$columnDef$met;
             const cellValue = getCellValueAsString((_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original[column.id], (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.dataType);
+            // indexes don't map to sorted data
             if (cellValue !== undefined && isWeakContains(cellValue, value)) {
               indexes.push([rowIndex, columnIndex]);
             }
@@ -10413,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
   };
@@ -10435,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]);
 }
@@ -10525,17 +10795,19 @@ 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
   const options = useTableFeaturePreset(props);
   // load any persisted table settings and merge them with any defaults
-  const [settings, setSettings] = useTableSettings(options.enableSettings, props.id, props.defaultSettings, props.onChangeSettings);
+  const [settings, setSettings] = useTableSettings(options.enableSaveSettings, safeId, props.defaultSettings, props.onChangeSettings);
   // configure common custom features
   const columnFreezing = useTableColumnFreezing(options.enableColumnFreezing);
   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);
@@ -10554,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,
@@ -10573,7 +10848,7 @@ function useTable(props, ref, meta, internalColumns) {
       columnOrdering,
       fontSize,
       footer,
-      //getSettings
+      length,
       printing,
       rowActions,
       rowActive,
@@ -10601,8 +10876,8 @@ function useTable(props, ref, meta, internalColumns) {
   // configure ref with reset functions
   useTableRef(instance, ref);
   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()
   };
@@ -10782,6 +11057,7 @@ function Header$3(context) {
       key: String(`${isAllRowsSelected}_${isSomeRowsSelected}`),
       checked: isAllRowsSelected,
       indeterminate: isSomeRowsSelected,
+      loading: tableMeta.server.loadAllStatus === TableServerLoadAllState.Loading,
       onChange: handleChange
     }));
   }
@@ -10801,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;
@@ -10808,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, {
@@ -10862,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
@@ -11444,7 +11753,6 @@ function useAugmentedFocusManager() {
 function Body(props) {
   const {
     enableArrowKeyFocusing = false,
-    length,
     table,
     ...attributes
   } = props;
@@ -11459,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();
@@ -11497,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;
@@ -11555,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 {
@@ -11630,6 +11949,7 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     }
     if (event.key === 'Escape') {
       handleClear();
+      event.stopPropagation();
       return;
     }
   };
@@ -12865,6 +13185,7 @@ const Button$2 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
     children,
     onClick,
     tabIndex = 0,
+    fontSize,
     ...otherProps
   } = props;
   const {
@@ -12874,14 +13195,17 @@ const Button$2 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
     open,
     readOnly
   } = useSelect2Context();
-  const className = cn('cursor-pointer !px-1 h-fit', getInputClasses({
+  const className = cn('cursor-pointer px-1.5 h-fit', getInputClasses({
     ...props,
     disabled,
     highlighted,
     invalid,
     readOnly
-  }).replace('w-full', ''), {
-    'w-full': !((_props$className = props.className) !== null && _props$className !== void 0 && _props$className.includes('w-'))
+  }).replace('w-full', '').replace('px-2', ''), {
+    'w-full': !((_props$className = props.className) !== null && _props$className !== void 0 && _props$className.includes('w-')),
+    'text-xs': fontSize === exports.FontSizes.small,
+    'text-sm': fontSize === exports.FontSizes.medium,
+    'text-base': fontSize === exports.FontSizes.large
   }, props.className);
   const handleClick = event => {
     if (disabled || readOnly) {
@@ -12975,7 +13299,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     className
   } = buttonProps;
   if (open) {
-    className = cn('!absolute z-20', buttonProps.className);
+    className = cn('!absolute z-20 !h-fit', buttonProps.className);
     content = /*#__PURE__*/React__default.createElement(ScrollArea, {
       className: "my-1 flex max-h-[5.5rem] flex-col"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -13519,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, {
@@ -13542,6 +13898,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     onBlur: handleBlur,
     onKeyDown: handleKeyDown,
     ref: internalRef,
+    fontSize: fontSize,
     placeholder: placeholder
   }), flattenedChildren)), /*#__PURE__*/React__default.createElement(PopoverPrimitive.Portal, null, /*#__PURE__*/React__default.createElement(PopoverPrimitive.Content, {
     asChild: true,
@@ -13558,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, {
@@ -13709,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) {
@@ -13766,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; }`);
@@ -13795,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,
@@ -13830,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,
@@ -13850,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
@@ -13868,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 {
@@ -14095,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: {
@@ -14113,7 +14480,7 @@ function Filter$1(props) {
       comparator: TableFilterComparator.Contains,
       value: undefined
     };
-    handleChange(id, {
+    handleChange(position, {
       id: columnId,
       value
     });
@@ -14123,7 +14490,7 @@ function Filter$1(props) {
     if (comparator === TableFilterComparator.IsEmpty || comparator === TableFilterComparator.IsNotEmpty) {
       nextValue = undefined;
     }
-    handleChange(id, {
+    handleChange(position, {
       id,
       value: {
         comparator,
@@ -14132,7 +14499,7 @@ function Filter$1(props) {
     });
   };
   const handleChangeValue = value => {
-    handleChange(id, {
+    handleChange(position, {
       id,
       value: {
         ...filter.value,
@@ -14140,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", {
@@ -14149,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,
@@ -14159,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,
@@ -14212,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));
-  };
-  // placeholders
-  const handleCreateFilterFromPlaceholder = columnId => {
-    setFilters(currentFilters => [...currentFilters, {
-      id: columnId,
-      value: {
-        comparator: TableFilterComparator.Contains,
-        value: undefined
-      }
-    }]);
-    handleRemovePlaceholder();
+    setFilters(currentFilters => currentFilters.filter((_, index) => index !== position));
   };
-  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;
@@ -14271,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
@@ -14299,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, {
@@ -14420,7 +14747,8 @@ function useCssGridStylesheet(tableId, table, fontSize) {
   const allVisibleColumns = table.getVisibleLeafColumns();
   const columnSizing = table.getState().columnSizing;
   const globalMinSize = getCellMinWidth(fontSize);
-  const gridTemplateRows = 'min-content 1fr min-content'; // header body footer;
+  // header body ?footer
+  const gridTemplateRows = table.getRowModel().rows.length ? 'min-content 1fr min-content' : 'min-content 1fr';
   return React__default.useMemo(() => {
     let printGridTemplateColumns = '';
     const printHiddenColumns = [];
@@ -14438,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)`;
@@ -14460,7 +14791,7 @@ function useCssGridStylesheet(tableId, table, fontSize) {
     // we have to be specific so that nested tables don't inherit the same css
     const hiddenColumns = printHiddenColumns.map(id => `table[data-taco='report']#${tableId} > thead > tr > th[data-cell-id='${id}']\n,table[data-taco='report']#${tableId} > tbody > tr > td[data-cell-id='${id}']\n`).join(',');
     return `table[data-taco='report']#${tableId} { grid-template-columns: ${gridTemplateColumns}; grid-template-rows: ${gridTemplateRows}; }
-@media print { table[data-taco='report']#${tableId} { grid-template-columns: ${printGridTemplateColumns}; } ${hiddenColumns} { display: none; } }`;
+@media print { table[data-taco='report']#${tableId} { grid-template-columns: ${printGridTemplateColumns}; } ${hiddenColumns ? `${hiddenColumns} { display: none; }` : ''} }`;
   }, [allVisibleColumns, columnSizing, globalMinSize, tableMeta.rowActions.rowActionsLength]);
 }
 
@@ -14658,7 +14989,10 @@ function getCellAttributes(cell, isHighlighted) {
   }
   return attributes;
 }
-function useSearchHighlighting(cell, index, ref) {
+function useSearchHighlighting(cell, cellIndex, ref) {
+  const {
+    rowIndex
+  } = React__default.useContext(RowContext);
   const context = cell.getContext();
   const tableMeta = context.table.options.meta;
   const columnMeta = cell.column.columnDef.meta;
@@ -14674,7 +15008,7 @@ function useSearchHighlighting(cell, index, ref) {
       return undefined;
     }
     const [rowActiveIndex, currentColumnIndex] = tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex];
-    if (rowActiveIndex === cell.row.index && currentColumnIndex === index) {
+    if (rowActiveIndex === rowIndex && currentColumnIndex === cellIndex) {
       return 'current';
     }
     return true;
@@ -15067,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);
@@ -15097,6 +15423,20 @@ function useTableGlobalShortcuts(table, tableRef, scrollToIndex) {
   [tableRef.current, tableMeta.rowActive.rowActiveIndex, scrollToIndex]);
 }
 
+function EmptyStateBody(props) {
+  const {
+    emptyState: Placeholder = null,
+    ...attributes
+  } = props;
+  return /*#__PURE__*/React__default.createElement("tbody", Object.assign({}, attributes, {
+    className: "!auto-rows-fr"
+  }), /*#__PURE__*/React__default.createElement("tr", {
+    className: "!auto-rows-fr"
+  }, /*#__PURE__*/React__default.createElement("td", {
+    className: "col-span-full !border-0 !p-0 hover:!bg-white"
+  }, Placeholder ? /*#__PURE__*/React__default.createElement(Placeholder, null) : null)));
+}
+
 function Column$1(_) {
   return null;
 }
@@ -15104,28 +15444,28 @@ function Group$3(_) {
   return null;
 }
 const Report$1 = /*#__PURE__*/fixedForwardRef(function Report(props, ref) {
-  var _report$state$groupin;
+  var _report$state$groupin, _renderer$rows;
   const tableRef = useMergedRef(ref);
   const report = useReport(props, tableRef);
   const renderer = useTableRenderer(report.instance, tableRef, props.defaultRowActiveIndex);
-  const stylesheet = useStylesheet(props.id, report.instance);
+  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,
-    tableId: props.id,
+    tableId: report.id,
     tableRef: tableRef
   }), props.toolbarPanel ? /*#__PURE__*/React__default.createElement("div", {
     className: "mb-4"
   }, props.toolbarPanel) : undefined, /*#__PURE__*/React__default.createElement(focus.FocusScope, null, /*#__PURE__*/React__default.createElement("table", {
-    id: props.id,
+    id: report.id,
     "data-taco": "report",
     "data-table-font-size": report.meta.fontSize.size,
     "data-table-horizontally-scrolled": report.meta.columnFreezing.isHorizontallyScrolled ? true : undefined,
@@ -15139,14 +15479,12 @@ const Report$1 = /*#__PURE__*/fixedForwardRef(function Report(props, ref) {
     tabIndex: -1
   }, /*#__PURE__*/React__default.createElement("thead", null, report.instance.getHeaderGroups().map(headerGroup => ( /*#__PURE__*/React__default.createElement("tr", {
     key: headerGroup.id
-  }, headerGroup.headers.map(Header$4))))), /*#__PURE__*/React__default.createElement(Body, {
-    length: report.length,
+  }, 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, {
     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), report.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Summary, {
-    length: report.length,
-    table: report.instance
-  }) : null));
+  }, 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$1.Column = Column$1;
 Report$1.Group = Group$3;
@@ -17757,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;
@@ -19172,7 +19512,7 @@ function EditingCell(props) {
   }));
 }
 const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditingCell(props) {
-  var _tableMeta$editing$ge, _tableMeta$editing$ro, _rows$tableMeta$rowAc, _column$columnDef$met;
+  var _tableMeta$editing$ge, _tableMeta$editing$ro, _rows$tableMeta$rowAc, _column$columnDef$met, _column$columnDef$met2;
   const {
     cell,
     column,
@@ -19307,7 +19647,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
   }));
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, moveReason !== null && mountNode && !error ? ( /*#__PURE__*/React__default.createElement(Indicator, {
     reason: moveReason,
-    columnName: String(cell.column.columnDef.header),
+    columnName: String((_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.header),
     mountNode: mountNode,
     validationErrors: []
   })) : null, /*#__PURE__*/React__default.createElement("div", {
@@ -19436,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, {
@@ -19444,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));
@@ -19467,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",
@@ -19488,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
@@ -20180,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
@@ -20204,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);
@@ -20256,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,
@@ -20300,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) {
@@ -20784,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,
@@ -20804,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
@@ -20822,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 {
@@ -20841,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
@@ -20928,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,
@@ -21080,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: {
@@ -21098,7 +21466,7 @@ function Filter$2(props) {
       comparator: null,
       value: null
     };
-    handleChange(id, {
+    handleChange(position, {
       id: columnId,
       value
     });
@@ -21108,7 +21476,7 @@ function Filter$2(props) {
     if (comparator === Table3FilterComparator.IsEmpty || comparator === Table3FilterComparator.IsNotEmpty) {
       nextValue = undefined;
     }
-    handleChange(id, {
+    handleChange(position, {
       id,
       value: {
         comparator,
@@ -21117,7 +21485,7 @@ function Filter$2(props) {
     });
   };
   const handleChangeValue = value => {
-    handleChange(id, {
+    handleChange(position, {
       id,
       value: {
         ...filter.value,
@@ -21125,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", {
@@ -21134,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,
@@ -21144,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,
@@ -21175,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 => {
@@ -21229,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 = {
@@ -21272,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, {
@@ -21634,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;
@@ -21812,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
   }));
 }
@@ -22521,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;
@@ -23039,9 +23396,9 @@ const PrimaryNavigation = /*#__PURE__*/React__default.forwardRef(function Primar
   } = useLocalization();
   const internalRef = useMergedRef(ref);
   const className = cn('flex h-full w-full flex-grow items-center overflow-hidden active:outline-none relative', props.className);
-  const moreButton = /*#__PURE__*/React__default.createElement(Button$1, {
+  const moreButton = () => ( /*#__PURE__*/React__default.createElement(Button$1, {
     className: cn(getLinkClasses(), '!bg-transparent aria-expanded:!bg-white/[.08]')
-  }, texts.header.more);
+  }, texts.header.more));
   return /*#__PURE__*/React__default.createElement("nav", Object.assign({}, props, {
     className: className,
     ref: internalRef
@@ -23651,6 +24008,7 @@ exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.CollectionPrimitive = Collection;
 exports.Combobox = Combobox;
+exports.DEFAULT_PAGE_SIZE = DEFAULT_PAGE_SIZE;
 exports.Datepicker = Datepicker;
 exports.Dialog = Dialog;
 exports.Drawer = Drawer;
@@ -23739,6 +24097,7 @@ exports.useOnClickOutside = useOnClickOutside;
 exports.usePagination = usePagination;
 exports.useRadioGroup = useRadioGroup;
 exports.useTable3DataLoader = useTable3DataLoader;
+exports.useTableDataLoader = useTableDataLoader;
 exports.useTableRowCreation = useTableRowCreation;
 exports.useToast = useToast;
 //# sourceMappingURL=taco.cjs.development.js.map