@economic/taco 2.7.4 → 2.8.0

package/dist/taco.cjs.development.js

@@ -761,6 +761,21 @@ function IconCircleClose(props, svgRef) {
 }
 var CircleClose = /*#__PURE__*/React.forwardRef(IconCircleClose);
 
+function IconCircleInformation(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 1.5a8.5 8.5 0 100 17 8.5 8.5 0 000-17zm-.267 5.753a1 1 0 10-.001-2.001 1 1 0 00.001 2.001zM14 16.754a.75.75 0 000-1.502h-1.267V11.5a.752.752 0 00-.75-.751H10a.75.75 0 000 1.502h1.233v3H10a.75.75 0 000 1.503h4z",
+    fill: "currentColor"
+  }));
+}
+var CircleInformation = /*#__PURE__*/React.forwardRef(IconCircleInformation);
+
 function IconCircleMinus(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -787,6 +802,21 @@ function IconCirclePlus(props, svgRef) {
 }
 var CirclePlus = /*#__PURE__*/React.forwardRef(IconCirclePlus);
 
+function IconCircleQuestionmark(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 1.5a8.5 8.5 0 100 17 8.5 8.5 0 000-17zm.58 10.15a.71.71 0 00.226-.543v-1.272a.306.306 0 01.045-.143.522.522 0 01.136-.133 3.91 3.91 0 01.285-.18l.028-.016c.112-.066.242-.143.387-.237.706-.454 1.156-1.012 1.156-1.838 0-.673-.37-1.19-.887-1.53-.513-.336-1.183-.508-1.845-.508-.552 0-1.234.096-1.79.317a2.441 2.441 0 00-.574.315c-.09.069-.174.146-.245.232a1.15 1.15 0 00-.154.238 1.474 1.474 0 00-.148.625c0 .075.01.118.02.167.036.159.12.3.254.401a.77.77 0 00.47.147.768.768 0 00.745-.517l.004-.013c.053-.17.226-.306.517-.4.282-.09.611-.116.852-.116.267 0 .575.078.809.213.241.139.345.298.345.44 0 .188-.051.32-.152.444-.11.136-.285.27-.55.444h-.002l-.136.091h-.001c-.232.153-.49.322-.695.513-.252.234-.467.537-.467.938v1.38c0 .226.087.421.248.556.155.13.357.185.56.185.21 0 .41-.064.558-.2zm-.559 3.1c.504 0 .924-.4.924-.904 0-.512-.423-.9-.924-.9a.908.908 0 00-.92.9c0 .504.42.904.92.904z",
+    fill: "currentColor"
+  }));
+}
+var CircleQuestionmark = /*#__PURE__*/React.forwardRef(IconCircleQuestionmark);
+
 function IconCircleTick(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -800,6 +830,21 @@ function IconCircleTick(props, svgRef) {
 }
 var CircleTick = /*#__PURE__*/React.forwardRef(IconCircleTick);
 
+function IconCircleWarning(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 1.5a8.5 8.5 0 100 17 8.5 8.5 0 000-17zm0 3.75a.97.97 0 00-.974.989L11.2 12.5c.01.417.352.749.771.749a.768.768 0 00.77-.74l.23-4.26a.97.97 0 00-.97-1zm0 9.5a1 1 0 100-2 1 1 0 000 2z",
+    fill: "currentColor"
+  }));
+}
+var CircleWarning = /*#__PURE__*/React.forwardRef(IconCircleWarning);
+
 function IconClampOpen(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3249,9 +3294,12 @@ const icons = {
   'chevron-up-solid': ChevronUpSolid,
   'chevron-up': ChevronUp,
   'circle-close': CircleClose,
+  'circle-information': CircleInformation,
   'circle-minus': CircleMinus,
   'circle-plus': CirclePlus,
+  'circle-questionmark': CircleQuestionmark,
   'circle-tick': CircleTick,
+  'circle-warning': CircleWarning,
   'clamp-open': ClampOpen,
   clamp: Clamp,
   close: Close,
@@ -3837,29 +3885,34 @@ function isEventTriggeredOnInteractiveElement(eventTarget) {
   const element = eventTarget;
   return ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT'].includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
 }
-function createShortcutKeyDownHandler(key, handler) {
+function shouldTriggerShortcut(event, key) {
+  const keyOptions = typeof key === 'string' ? {
+    key,
+    meta: false,
+    shift: false
+  } : key;
+  if (keyOptions.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey) || !keyOptions.meta && (isMacOs() ? event.metaKey : event.ctrlKey)) {
+    return false;
+  }
+  if (keyOptions.shift && !event.shiftKey || keyOptions.shift === false && event.shiftKey) {
+    return false;
+  }
+  return event.key.toLowerCase() === keyOptions.key.toLowerCase();
+}
+function createShortcutKeyDownHandler(key, handler, stopPropagation = true) {
   return function (event) {
-    const keyOptions = typeof key === 'string' ? {
-      key,
-      meta: false,
-      shift: false
-    } : key;
     if (event.target !== event.currentTarget && isEventTriggeredOnInteractiveElement(event.target)) {
       return;
     }
-    if (keyOptions.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey) || !keyOptions.meta && (isMacOs() ? event.metaKey : event.ctrlKey)) {
-      return;
-    }
-    if (keyOptions.shift && !event.shiftKey || keyOptions.shift === false && event.shiftKey) {
-      return;
-    }
-    const condition = event.key.toLowerCase() === keyOptions.key.toLowerCase();
+    const condition = shouldTriggerShortcut(event, key);
     if (condition) {
-      var _event$stopImmediateP;
-      // stops react handlers bubbling up to global
-      event.stopPropagation();
-      // stops global handlers bubbling up to other global
-      (_event$stopImmediateP = event.stopImmediatePropagation) === null || _event$stopImmediateP === void 0 ? void 0 : _event$stopImmediateP.call(event);
+      if (stopPropagation) {
+        var _event$stopImmediateP;
+        // stops react handlers bubbling up to global
+        event.stopPropagation();
+        // stops global handlers bubbling up to other global
+        (_event$stopImmediateP = event.stopImmediatePropagation) === null || _event$stopImmediateP === void 0 ? void 0 : _event$stopImmediateP.call(event);
+      }
       handler(event);
     }
   };
@@ -3873,7 +3926,7 @@ const useGlobalKeyDown = (shortcut, handler) => {
   React__default.useEffect(() => {
     let handleKeyDown;
     if (shortcut) {
-      handleKeyDown = createShortcutKeyDownHandler(shortcut, handler);
+      handleKeyDown = createShortcutKeyDownHandler(shortcut, handler, false);
       document.addEventListener('keydown', handleKeyDown);
     }
     return () => {
@@ -3881,7 +3934,7 @@ const useGlobalKeyDown = (shortcut, handler) => {
         document.removeEventListener('keydown', handleKeyDown);
       }
     };
-  }, [shortcut]);
+  }, [shortcut, handler]);
 };
 
 const Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
@@ -3895,6 +3948,11 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   const internalRef = useMergedRef(ref);
   useGlobalKeyDown(shortcut, () => {
     var _internalRef$current;
+    const dialog = document.querySelector('[role="dialog"]');
+    // Don't trigger the click on the button if it is outside of the dialog
+    if (dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(internalRef.current))) {
+      return;
+    }
     (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.click();
   });
   const Tag = props.href ? 'a' : 'button';
@@ -4367,7 +4425,7 @@ const defaultLocalisationTexts = {
       }
     },
     search: {
-      excludeUnmatchedResults: 'Hide unmatched records',
+      excludeUnmatchedResults: 'Show only search results',
       placeholder: 'Search...'
     },
     shortcuts: {
@@ -5630,6 +5688,12 @@ const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
   const className = cn('inline-flex relative', {
     'yt-combobox--inline': props.inline
   }, externalClassName);
+  const handleKeydown = event => {
+    const isInsideEditingCell = !!event.target.closest('[role="cell"]');
+    if (!isInsideEditingCell && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+      event.stopPropagation();
+    }
+  };
   return /*#__PURE__*/React.createElement("span", {
     className: className,
     "data-taco": "combobox",
@@ -5639,7 +5703,8 @@ const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
     ref: internalRef
   }, /*#__PURE__*/React.createElement("div", Object.assign({}, combobox, {
     className: "inline w-full",
-    ref: ref
+    ref: ref,
+    onKeyDown: handleKeydown
   }), /*#__PURE__*/React.createElement(Input, Object.assign({}, input, {
     autoComplete: "off",
     button: props.inline ? /*#__PURE__*/React.createElement(IconButton
@@ -6151,8 +6216,6 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
     } else if (dialog.onClose) {
       dialog.onClose();
     }
-    // Stops event from propogating outside the dialog.
-    event.stopPropagation();
   };
   // the chosen behaviour in taco is that outside clicks do not close the dialog
   const handleInteractOutside = event => event.preventDefault();
@@ -6166,19 +6229,12 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
   } else {
     output = props.children;
   }
-  const onKeyDown = event => {
-    if (event.key !== 'Escape') {
-      // Stops event from propogating outside the dialog.
-      event.stopPropagation();
-    }
-  };
   return /*#__PURE__*/React.createElement(DialogPrimitive.Portal, null, /*#__PURE__*/React.createElement(DialogPrimitive.Overlay, {
     asChild: true
   }, /*#__PURE__*/React.createElement(Backdrop, null, /*#__PURE__*/React.createElement(DialogPrimitive.Content, Object.assign({}, props, {
     className: className,
     onEscapeKeyDown: handleEscapeKeyDown,
     onInteractOutside: handleInteractOutside,
-    onKeyDown: onKeyDown,
     ref: internalRef,
     style: {
       ...props.style,
@@ -9925,6 +9981,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
     children,
     emptyValue,
     value,
+    placeholder,
     ...buttonProps
   } = props;
   const {
@@ -9935,7 +9992,14 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
   const contentClassName = cn('truncate items-center gap-1');
   const currentValue = children.find(matchesValue(value));
   let output;
-  if (currentValue) {
+  if (placeholder && currentValue === undefined) {
+    output = /*#__PURE__*/React__default.createElement("div", {
+      className: cn({
+        'text-grey-700': disabled,
+        'text-grey-500': !disabled
+      })
+    }, placeholder);
+  } else if (currentValue) {
     if (tags && emptyValue !== undefined && emptyValue !== value) {
       output = /*#__PURE__*/React__default.createElement(Tag$1, {
         className: "truncate",
@@ -9962,6 +10026,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     children,
     emptyValue: _,
     values = [],
+    placeholder,
     ...buttonProps
   } = props;
   const {
@@ -9983,7 +10048,12 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
       className: "my-1 flex max-h-[5.5rem] flex-col"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-wrap gap-1"
-    }, valuesAsChildren.map(child => /*#__PURE__*/React__default.createElement(Tag$1, {
+    }, valuesAsChildren.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
+      className: cn({
+        'text-grey-700': disabled,
+        'text-grey-500': !disabled
+      })
+    }, placeholder) : valuesAsChildren.map(child => /*#__PURE__*/React__default.createElement(Tag$1, {
       key: String(child.props.value),
       className: "truncate",
       color: tags ? child.props.color : undefined,
@@ -10001,7 +10071,8 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
   } else {
     content = /*#__PURE__*/React__default.createElement(MultipleValue, {
       key: String(open),
-      valuesAsChildren: valuesAsChildren
+      valuesAsChildren: valuesAsChildren,
+      placeholder: placeholder
     });
   }
   return /*#__PURE__*/React__default.createElement("div", {
@@ -10017,7 +10088,8 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
   }), content));
 });
 const MultipleValue = ({
-  valuesAsChildren
+  valuesAsChildren,
+  placeholder
 }) => {
   const {
     disabled,
@@ -10040,9 +10112,14 @@ const MultipleValue = ({
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex gap-1 truncate",
     ref: el => setContentRef(el)
-  }, valuesAsChildren.map((child, index) => {
+  }, valuesAsChildren.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: cn({
+      'text-grey-700': disabled,
+      'text-grey-500': !disabled
+    })
+  }, placeholder) : valuesAsChildren.map((child, index) => {
     const tag = /*#__PURE__*/React__default.createElement(Tag$1, {
-      key: child.props.value,
+      key: String(child.props.value),
       className: cn('cursor-pointer', {
         truncate: index === boundaryIndex,
         hidden: boundaryIndex !== undefined && boundaryIndex !== null ? index > boundaryIndex : false
@@ -10055,7 +10132,7 @@ const MultipleValue = ({
     }, child.props.children);
     if (index === boundaryIndex) {
       return /*#__PURE__*/React__default.createElement(Tooltip, {
-        key: child.props.value,
+        key: String(child.props.value),
         title: String(child.props.children)
       }, tag);
     }
@@ -10382,6 +10459,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     defaultValue: defaultProp,
     disabled = false,
     emptyValue = undefined,
+    placeholder,
     highlighted = false,
     invalid = false,
     multiple = false,
@@ -10527,14 +10605,13 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     emptyValue: emptyValue,
     onBlur: handleBlur,
     onKeyDown: handleKeyDown,
-    ref: internalRef
+    ref: internalRef,
+    placeholder: placeholder
   }), flattenedChildren)), /*#__PURE__*/React__default.createElement(PopoverPrimitive.Portal, null, /*#__PURE__*/React__default.createElement(PopoverPrimitive.Content, {
     asChild: true,
     align: "start",
-    onOpenAutoFocus: event => {
+    onOpenAutoFocus: () => {
       var _internalRef$current;
-      event.preventDefault();
-      event.stopPropagation();
       (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
     },
     onCloseAutoFocus: event => {
@@ -16141,7 +16218,10 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
   }) : null, hasMenu ? /*#__PURE__*/React__default.createElement(Menu$3, {
     canFreeze: canFreeze,
     canHide: canHide,
-    className: "ml-auto hidden group-hover/column:flex aria-expanded:!flex",
+    className: cn('hidden group-hover/column:flex aria-expanded:!flex', {
+      'ml-auto': align !== 'right',
+      'ml-2': align === 'right'
+    }),
     index: index,
     menu: meta.menu,
     onGoto: handleGoto,
@@ -17180,14 +17260,20 @@ function useEditing(isEnabled, onSave) {
     if (event.defaultPrevented) {
       return;
     }
-    if (event.ctrlKey || event.metaKey) {
-      if (event.key === 'e') {
-        setIsEditing(editing => !editing);
-      } else if (event.key === 's') {
-        // Prevent default browser save
-        event.preventDefault();
-        saveChangesIfNeeded();
-      }
+    if (shouldTriggerShortcut(event, {
+      key: 'e',
+      meta: true,
+      shift: false
+    })) {
+      setIsEditing(editing => !editing);
+    } else if (shouldTriggerShortcut(event, {
+      key: 's',
+      meta: true,
+      shift: false
+    })) {
+      // Prevent default browser save
+      event.preventDefault();
+      saveChangesIfNeeded();
     }
   }, [isEditing]);
   const handleBlur = React__default.useCallback(event => {
@@ -17604,6 +17690,22 @@ const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
   }));
 });
 
+// By UX design, textarea should fold to min size when blured and extend to max 5 lines height when edited in enableTruncate mode,
+// for this reason we need to set min/max height limits for each font size value.
+const heights = {
+  small: {
+    min: 24,
+    max: 86
+  },
+  medium: {
+    min: 34,
+    max: 100
+  },
+  large: {
+    min: 40,
+    max: 140
+  }
+};
 const TextareaControl = /*#__PURE__*/React__default.forwardRef(function TextareaControl(props, externalRef) {
   const {
     onKeyDown: handleKeyDown,
@@ -17613,19 +17715,25 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
     align,
     isCurrentRow,
     value,
+    fontSize,
     ...attributes
   } = props;
-  const textareaMaxHeight = 120;
-  const textareaMinHeight = 32;
+  const minMaxHeight = heights[fontSize];
   const columnMeta = column.columnDef.meta;
   const ref = useMergedRef(externalRef);
   React__default.useEffect(() => {
-    // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized.
-    if (ref !== null && ref !== void 0 && ref.current && !(columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate)) {
-      const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
-      resizeTextArea(textareaElement);
+    if (ref !== null && ref !== void 0 && ref.current) {
+      // Need to reset textarea to min height when font size got changed and if column in enable truncate mode.
+      if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
+        const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
+        textareaElement.style.height = `${minMaxHeight.min}px`;
+        // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized or fonsSize got changed.
+      } else {
+        const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
+        resizeTextArea(textareaElement);
+      }
     }
-  }, []);
+  }, [fontSize]);
   React__default.useEffect(() => {
     // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.
     // Otherwise it should collapse to minimal height.
@@ -17634,7 +17742,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
       if (isCellInDetailMode) {
         resizeTextArea(textareaElement);
       } else {
-        textareaElement.style.height = `${textareaMinHeight}px`;
+        textareaElement.style.height = `${minMaxHeight.min}px`;
       }
     }
   }, [isCellInDetailMode]);
@@ -17644,9 +17752,9 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
     const textareaRect = textareaElement.getBoundingClientRect();
     const prevHeight = textareaRect.height;
     if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
-      if (prevHeight < textareaMaxHeight) {
+      if (prevHeight < minMaxHeight.max) {
         textareaElement.style.height = 'inherit';
-        textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, textareaMaxHeight)}px`;
+        textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, minMaxHeight.max)}px`;
       }
     } else {
       textareaElement.style.height = 'inherit';
@@ -17683,13 +17791,13 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
       // If truncation is enabled, then textarea should shring back to min height, when loosing focus.
       if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
         const textareaElement = event.currentTarget;
-        textareaElement.style.height = `${textareaMinHeight}px`;
+        textareaElement.style.height = `${minMaxHeight.min}px`;
       }
     },
     className: cn(getCellAlignmentClasses$1(align), `z-20 h-fit resize-none`, {
-      [`!min-h-[${textareaMinHeight}px]`]: columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate,
+      [`!min-h-[${minMaxHeight.min}px]`]: columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate,
       '!yt-focus-dark': isCellInDetailMode,
-      [`h-[${textareaMinHeight}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),
+      [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),
       // Only allow resizing when focused and truncation enabled
       'focus:resize-y': isCurrentRow && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate)
     }),
@@ -17719,16 +17827,26 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
   const columnMeta = column.columnDef.meta;
   const controlRenderer = columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.control;
   const isCellInDetailMode = tableMeta.editing.detailModeEditing && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contains(document.activeElement));
-  // Revert to initial value if escape was pressed
   const handleKeyDown = event => {
+    // For some reason keydown event handler is not propogated to the table when input or other control element is
+    // in focus so we need to check for shortcut that toggles the editing.
+    if (shouldTriggerShortcut(event, {
+      key: 'e',
+      meta: true,
+      shift: false
+    })) {
+      tableMeta.editing.toggleEditing(false);
+      return;
+    }
     const target = event.target;
     if (target.readOnly) {
       return;
     }
-    // prevent row arrow shortcuts triggering when in detail mode
+    // Prevent row arrow shortcuts triggering when in detail mode
     if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
       event.stopPropagation();
     }
+    // Revert to initial value if escape was pressed
     if (event.key === 'Escape') {
       event.preventDefault();
       if (tableMeta.editing.detailModeEditing) {
@@ -17774,7 +17892,6 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
     // Switching to editing mode, when key pressed any alphabetical character or number
     if (/^[a-z0-9]$/i.test(event.key)) {
       tableMeta.editing.setDetailModeEditing(true);
-      return;
     }
   };
   const handleDatepickerChange = event => {
@@ -17825,7 +17942,8 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
     return /*#__PURE__*/React__default.createElement(TextareaControl, Object.assign({}, props, {
       isCellInDetailMode: isCellInDetailMode,
       onKeyDown: handleInputKeyDown,
-      ref: refCallback
+      ref: refCallback,
+      fontSize: tableMeta.fontSize.size
     }));
   }
   return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
@@ -17936,11 +18054,9 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
   const controlRenderer = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
   const className = cn('!px-[0.4375rem] py-[calc(var(--table3-row-padding)_-_0.06rem)]', {
     relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',
-    // Need to set higher z-index, so that the current row textarea (in expanded state) overlaps rows below
-    'z-10': isCurrentRow,
-    // When row is hovered and located below, then the hovered textarea overlaps the current row textarea(if the current row textarea is expanded to support multiple lines),
-    // as result we need to set lower z-index for the hovered row -> cell.
-    'z-0': isHovered
+    // Need to set higher z-index, so that the current row textarea (in expanded state, when positioned absolute) overlaps rows below,
+    // but at the same time it should not overlap the table headers which has z-10.
+    'z-[9]': isCurrentRow && controlRenderer === 'textarea'
   },
   // component overrides - grayscale for editing hover
   '[[role="row"][data-current="false"]:hover_&>*]:!grayscale [[role="row"][data-current="false"]:hover_&_.bg-white]:!bg-grey-100',
@@ -19729,6 +19845,7 @@ function Filters(props) {
     table
   } = props;
   const {
+    locale,
     texts
   } = useLocalization();
   const ref = React__default.useRef(null);
@@ -19809,7 +19926,7 @@ function Filters(props) {
       className: "mb-0 inline-flex"
     }, texts.table3.filters.button), /*#__PURE__*/React__default.createElement("p", {
       className: "text-grey-700 mb-0 mr-auto mt-px inline-flex"
-    }, texts.table3.filters.total.replace('[CURRENT]', String(table.getFilteredRowModel().rows.length)).replace('[TOTAL]', String(total))))), /*#__PURE__*/React__default.createElement("div", {
+    }, texts.table3.filters.total.replace('[CURRENT]', new Intl.NumberFormat(locale).format(table.getFilteredRowModel().rows.length)).replace('[TOTAL]', new Intl.NumberFormat(locale).format(total))))), /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-col gap-2"
     }, filters.map((filter, index) => /*#__PURE__*/React__default.createElement(Filter$1, {
       key: `filter_${index}`,
@@ -19950,14 +20067,6 @@ function EditButton(props) {
     '!wcag-blue-100': tableMeta.editing.isEditing
   });
   const handleClick = () => tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing);
-  useGlobalKeyDown({
-    key: 'e',
-    meta: true,
-    shift: false
-  }, event => {
-    event.preventDefault();
-    tableMeta.editing.toggleEditing(!tableMeta.editing.isEditing);
-  });
   return /*#__PURE__*/React__default.createElement(Button$1, {
     "aria-pressed": tableMeta.editing.isEditing,
     className: className,
@@ -20491,10 +20600,13 @@ function useTableRefInstanceSetup(table, ref) {
 }
 
 function Summary$1(props) {
+  var _table$getState$colum;
   const {
+    currentLength,
     length,
     table
   } = props;
+  const tableMeta = table.options.meta;
   const {
     locale,
     texts
@@ -20505,13 +20617,20 @@ function Summary$1(props) {
   const rowsSelectedLength = table.getIsAllRowsSelected() ? length : table.getSelectedRowModel().rows.length;
   if (rowsSelectedLength > 0) {
     label = texts.table3.footer.summary.selected;
-    count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(rowsSelectedLength)), "\u00A0", texts.table3.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, length));
+    count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(rowsSelectedLength)), "\u00A0", texts.table3.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length)));
+  } else if ((_table$getState$colum = table.getState().columnFilters) !== null && _table$getState$colum !== void 0 && _table$getState$colum.length ||
+  // filtered data
+  !!table.getState().globalFilter && tableMeta.search.excludeUnmatchedResults // search with hide enabled
+  ) {
+    label = texts.table3.footer.summary.records;
+    count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, currentLength), "\u00A0", texts.table3.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length)));
   } else {
     label = texts.table3.footer.summary.records;
     count = /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length));
   }
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "sticky bottom-0 left-0 z-40 -mt-10 flex h-10 w-fit items-center whitespace-nowrap bg-white px-4 !pr-3 shadow-[6px_0px_6px_theme(colors.white)]"
+    className: "sticky bottom-0 left-0 z-40 -mt-10 flex h-10 w-fit items-center whitespace-nowrap bg-white px-4 !pr-3 shadow-[6px_0px_6px_theme(colors.white)]",
+    "data-taco": "table2-footer-summary"
   }, label, "\u00A0", count);
 }
 
@@ -20731,6 +20850,11 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const bodyRef = React__default.useRef(null);
   React__default.useEffect(() => {
     const handleKeyDown = event => {
+      const dialog = document.querySelector('[role="dialog"]');
+      // Don't trigger global shortcuts on the table if it is outside of the dialog
+      if (dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(internalRef.current))) {
+        return;
+      }
       tableMeta.hoverState.handleKeyDown(event);
       tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex);
       tableMeta.rowClick.handleKeyDown(event, table);
@@ -20745,7 +20869,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   // See https://github.com/e-conomic/taco/blob/dev/packages/taco/src/components/Table3/strategies/virtualised.tsx#L143
   // scrollToIndex function changes when row count changes, so it is important to update handlers with new
   // scrollToIndex function.
-  [scrollToIndex]);
+  [scrollToIndex, internalRef.current]);
   const handleBlur = event => {
     tableMeta.editing.handleBlur(event);
   };
@@ -20819,7 +20943,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     role: "rowgroup",
     ref: bodyRef
   }, renderBody())), /*#__PURE__*/React__default.createElement("div", {
-    className: "border-grey-300 col-span-full -mt-px border-t"
+    className: "border-grey-300 col-span-full translate-y-px border-t"
   }), tableMeta.enableFooter ? /*#__PURE__*/React__default.createElement("div", {
     className: "group/footer contents",
     "data-taco": "table2-footer",
@@ -20831,6 +20955,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   }, footerGroup.headers.map(footer => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
     key: footer.id
   }, reactTable$1.flexRender(footer.column.columnDef.footer, footer.getContext()))))), length ? /*#__PURE__*/React__default.createElement(Summary$1, {
+    currentLength: table.getRowModel().rows.length,
     length: length,
     table: table
   }) : null) : null) : /*#__PURE__*/React__default.createElement("div", {
@@ -21888,6 +22013,7 @@ exports.parseFromCustomString = parseFromCustomString;
 exports.parseFromISOString = parseFromISOString;
 exports.removeChildTableRow = removeChildTableRow;
 exports.setByRowIndexPath = setByRowIndexPath;
+exports.shouldTriggerShortcut = shouldTriggerShortcut;
 exports.useBoundaryOverflowDetection = useBoundaryOverflowDetection;
 exports.useBoundingClientRectListener = useBoundingClientRectListener;
 exports.useDropTarget = useDropTarget;