@economic/taco 2.7.5 → 2.8.1

package/dist/esm/packages/taco/src/utils/keyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.js","sources":["../../../../../../src/utils/keyboard.ts"],"sourcesContent":["import React from 'react';\n\nexport type KeyDownHandlerOptions = { key: string; meta?: boolean; shift?: boolean };\n\nexport function isEventTriggeredOnInteractiveElement(eventTarget: EventTarget | null) {\n    const element = eventTarget as HTMLElement;\n\n    return (\n        ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT'].includes(element.tagName) &&\n        !element.hidden &&\n        !(element as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLButtonElement).disabled &&\n        !(element as HTMLInputElement | HTMLTextAreaElement).readOnly\n    );\n}\n\nexport function createShortcutKeyDownHandler<T = Element>(\n    key: string | KeyDownHandlerOptions,\n    handler: (event: KeyboardEvent | React.KeyboardEvent<T>) => void\n) {\n    return function (event: KeyboardEvent | React.KeyboardEvent<T>) {\n        const keyOptions: KeyDownHandlerOptions = typeof key === 'string' ? { key, meta: false, shift: false } : key;\n\n        if (event.target !== event.currentTarget && isEventTriggeredOnInteractiveElement(event.target as HTMLElement)) {\n            return;\n        }\n\n        if (\n            (keyOptions.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey)) ||\n            (!keyOptions.meta && (isMacOs() ? event.metaKey : event.ctrlKey))\n        ) {\n            return;\n        }\n\n        if ((keyOptions.shift && !event.shiftKey) || (keyOptions.shift === false && event.shiftKey)) {\n            return;\n        }\n\n        const condition = event.key.toLowerCase() === keyOptions.key.toLowerCase();\n\n        if (condition) {\n            // stops react handlers bubbling up to global\n            event.stopPropagation();\n            // stops global handlers bubbling up to other global\n            (event as KeyboardEvent).stopImmediatePropagation?.();\n            handler(event);\n        }\n    };\n}\n\nexport const isMacOs = () => window?.navigator.userAgent.includes('Mac');\n"],"names":["isEventTriggeredOnInteractiveElement","eventTarget","element","includes","tagName","hidden","disabled","readOnly","createShortcutKeyDownHandler","key","handler","event","keyOptions","meta","shift","target","currentTarget","isMacOs","metaKey","ctrlKey","shiftKey","condition","toLowerCase","_event$stopImmediateP","stopPropagation","stopImmediatePropagation","call","_window","window","navigator","userAgent"],"mappings":"SAIgBA,oCAAoCA,CAACC,WAA+B;EAChF,MAAMC,OAAO,GAAGD,WAA0B;EAE1C,OACI,CAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC,CAACE,QAAQ,CAACD,OAAO,CAACE,OAAO,CAAC,IACxE,CAACF,OAAO,CAACG,MAAM,IACf,CAAEH,OAA0F,CAACI,QAAQ,IACrG,CAAEJ,OAAkD,CAACK,QAAQ;AAErE;SAEgBC,4BAA4BA,CACxCC,GAAmC,EACnCC,OAAgE;EAEhE,OAAO,UAAUC,KAA6C;IAC1D,MAAMC,UAAU,GAA0B,OAAOH,GAAG,KAAK,QAAQ,GAAG;MAAEA,GAAG;MAAEI,IAAI,EAAE,KAAK;MAAEC,KAAK,EAAE;KAAO,GAAGL,GAAG;IAE5G,IAAIE,KAAK,CAACI,MAAM,KAAKJ,KAAK,CAACK,aAAa,IAAIhB,oCAAoC,CAACW,KAAK,CAACI,MAAqB,CAAC,EAAE;MAC3G;;IAGJ,IACKH,UAAU,CAACC,IAAI,KAAKI,OAAO,EAAE,GAAG,CAACN,KAAK,CAACO,OAAO,GAAG,CAACP,KAAK,CAACQ,OAAO,CAAC,IAChE,CAACP,UAAU,CAACC,IAAI,KAAKI,OAAO,EAAE,GAAGN,KAAK,CAACO,OAAO,GAAGP,KAAK,CAACQ,OAAO,CAAE,EACnE;MACE;;IAGJ,IAAKP,UAAU,CAACE,KAAK,IAAI,CAACH,KAAK,CAACS,QAAQ,IAAMR,UAAU,CAACE,KAAK,KAAK,KAAK,IAAIH,KAAK,CAACS,QAAS,EAAE;MACzF;;IAGJ,MAAMC,SAAS,GAAGV,KAAK,CAACF,GAAG,CAACa,WAAW,EAAE,KAAKV,UAAU,CAACH,GAAG,CAACa,WAAW,EAAE;IAE1E,IAAID,SAAS,EAAE;MAAA,IAAAE,qBAAA;;MAEXZ,KAAK,CAACa,eAAe,EAAE;;MAEtB,CAAAD,qBAAA,GAAAZ,KAAuB,CAACc,wBAAwB,cAAAF,qBAAA,uBAAhDA,qBAAA,CAAAG,IAAA,CAAAf,MAAoD;MACrDD,OAAO,CAACC,KAAK,CAAC;;GAErB;AACL;MAEaM,OAAO,GAAGA;EAAA,IAAAU,OAAA;EAAA,QAAAA,OAAA,GAAMC,MAAM,cAAAD,OAAA,uBAANA,OAAA,CAAQE,SAAS,CAACC,SAAS,CAAC3B,QAAQ,CAAC,KAAK,CAAC;AAAA;;;;"}
+{"version":3,"file":"keyboard.js","sources":["../../../../../../src/utils/keyboard.ts"],"sourcesContent":["import React from 'react';\n\nexport type KeyDownHandlerOptions = { key: string; meta?: boolean; shift?: boolean };\n\nexport function isEventTriggeredOnInteractiveElement(eventTarget: EventTarget | null) {\n    const element = eventTarget as HTMLElement;\n\n    return (\n        ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT'].includes(element.tagName) &&\n        !element.hidden &&\n        !(element as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLButtonElement).disabled &&\n        !(element as HTMLInputElement | HTMLTextAreaElement).readOnly\n    );\n}\n\nexport function shouldTriggerShortcut<T = Element>(\n    event: KeyboardEvent | React.KeyboardEvent<T>,\n    key: string | KeyDownHandlerOptions\n) {\n    const keyOptions: KeyDownHandlerOptions = typeof key === 'string' ? { key, meta: false, shift: false } : key;\n\n    if (\n        (keyOptions.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey)) ||\n        (!keyOptions.meta && (isMacOs() ? event.metaKey : event.ctrlKey))\n    ) {\n        return false;\n    }\n\n    if ((keyOptions.shift && !event.shiftKey) || (keyOptions.shift === false && event.shiftKey)) {\n        return false;\n    }\n\n    return event.key.toLowerCase() === keyOptions.key.toLowerCase();\n}\n\nexport function createShortcutKeyDownHandler<T = Element>(\n    key: string | KeyDownHandlerOptions,\n    handler: (event: KeyboardEvent | React.KeyboardEvent<T>) => void,\n    stopPropagation = true\n) {\n    return function (event: KeyboardEvent | React.KeyboardEvent<T>) {\n        if (event.target !== event.currentTarget && isEventTriggeredOnInteractiveElement(event.target as HTMLElement)) {\n            return;\n        }\n\n        const condition = shouldTriggerShortcut(event, key);\n\n        if (condition) {\n            if (stopPropagation) {\n                // stops react handlers bubbling up to global\n                event.stopPropagation();\n                // stops global handlers bubbling up to other global\n                (event as KeyboardEvent).stopImmediatePropagation?.();\n            }\n\n            handler(event);\n        }\n    };\n}\n\nexport const isMacOs = () => window?.navigator.userAgent.includes('Mac');\n"],"names":["isEventTriggeredOnInteractiveElement","eventTarget","element","includes","tagName","hidden","disabled","readOnly","shouldTriggerShortcut","event","key","keyOptions","meta","shift","isMacOs","metaKey","ctrlKey","shiftKey","toLowerCase","createShortcutKeyDownHandler","handler","stopPropagation","target","currentTarget","condition","_event$stopImmediateP","stopImmediatePropagation","call","_window","window","navigator","userAgent"],"mappings":"SAIgBA,oCAAoCA,CAACC,WAA+B;EAChF,MAAMC,OAAO,GAAGD,WAA0B;EAE1C,OACI,CAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC,CAACE,QAAQ,CAACD,OAAO,CAACE,OAAO,CAAC,IACxE,CAACF,OAAO,CAACG,MAAM,IACf,CAAEH,OAA0F,CAACI,QAAQ,IACrG,CAAEJ,OAAkD,CAACK,QAAQ;AAErE;SAEgBC,qBAAqBA,CACjCC,KAA6C,EAC7CC,GAAmC;EAEnC,MAAMC,UAAU,GAA0B,OAAOD,GAAG,KAAK,QAAQ,GAAG;IAAEA,GAAG;IAAEE,IAAI,EAAE,KAAK;IAAEC,KAAK,EAAE;GAAO,GAAGH,GAAG;EAE5G,IACKC,UAAU,CAACC,IAAI,KAAKE,OAAO,EAAE,GAAG,CAACL,KAAK,CAACM,OAAO,GAAG,CAACN,KAAK,CAACO,OAAO,CAAC,IAChE,CAACL,UAAU,CAACC,IAAI,KAAKE,OAAO,EAAE,GAAGL,KAAK,CAACM,OAAO,GAAGN,KAAK,CAACO,OAAO,CAAE,EACnE;IACE,OAAO,KAAK;;EAGhB,IAAKL,UAAU,CAACE,KAAK,IAAI,CAACJ,KAAK,CAACQ,QAAQ,IAAMN,UAAU,CAACE,KAAK,KAAK,KAAK,IAAIJ,KAAK,CAACQ,QAAS,EAAE;IACzF,OAAO,KAAK;;EAGhB,OAAOR,KAAK,CAACC,GAAG,CAACQ,WAAW,EAAE,KAAKP,UAAU,CAACD,GAAG,CAACQ,WAAW,EAAE;AACnE;SAEgBC,4BAA4BA,CACxCT,GAAmC,EACnCU,OAAgE,EAChEC,eAAe,GAAG,IAAI;EAEtB,OAAO,UAAUZ,KAA6C;IAC1D,IAAIA,KAAK,CAACa,MAAM,KAAKb,KAAK,CAACc,aAAa,IAAIvB,oCAAoC,CAACS,KAAK,CAACa,MAAqB,CAAC,EAAE;MAC3G;;IAGJ,MAAME,SAAS,GAAGhB,qBAAqB,CAACC,KAAK,EAAEC,GAAG,CAAC;IAEnD,IAAIc,SAAS,EAAE;MACX,IAAIH,eAAe,EAAE;QAAA,IAAAI,qBAAA;;QAEjBhB,KAAK,CAACY,eAAe,EAAE;;QAEtB,CAAAI,qBAAA,GAAAhB,KAAuB,CAACiB,wBAAwB,cAAAD,qBAAA,uBAAhDA,qBAAA,CAAAE,IAAA,CAAAlB,MAAoD;;MAGzDW,OAAO,CAACX,KAAK,CAAC;;GAErB;AACL;MAEaK,OAAO,GAAGA;EAAA,IAAAc,OAAA;EAAA,QAAAA,OAAA,GAAMC,MAAM,cAAAD,OAAA,uBAANA,OAAA,CAAQE,SAAS,CAACC,SAAS,CAAC5B,QAAQ,CAAC,KAAK,CAAC;AAAA;;;;"}

package/dist/index.css

@@ -640,7 +640,8 @@
 
 /* cells */
 [role='cell'],
-[role='columnheader'] {
+[role='columnheader'],
+[data-taco='table2-footer-summary'] {
     @apply border-grey-300;
 }
 
@@ -649,6 +650,12 @@
     @apply flex px-4;
 }
 
+/* In cases where row height might differ from default one (example: textarea without truncate or changing of font size or row height),
+   we need to prevent editing controls to take all available space */
+[role='cell']:not([data-highlighted='true']) {
+    @apply items-start;
+}
+
 [role='cell'][data-align='left'],
 [role='columnheader'][data-align='left'] {
     @apply justify-start text-left;
@@ -668,6 +675,12 @@
     @apply border-b;
 }
 
+/* Removes a pixel space between the row and spacer div, so that the spacer div's top border appears like
+   bottom border of the cells */
+[role='row']:last-child [role='cell'] {
+    @apply -mb-px;
+}
+
 /* row/cell backgrounds */
 
 [role='columnheader'] {

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: {
@@ -6151,8 +6209,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 +6222,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 +9974,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
     children,
     emptyValue,
     value,
+    placeholder,
     ...buttonProps
   } = props;
   const {
@@ -9935,7 +9985,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 +10019,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     children,
     emptyValue: _,
     values = [],
+    placeholder,
     ...buttonProps
   } = props;
   const {
@@ -9983,7 +10041,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 +10064,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 +10081,8 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
   }), content));
 });
 const MultipleValue = ({
-  valuesAsChildren
+  valuesAsChildren,
+  placeholder
 }) => {
   const {
     disabled,
@@ -10040,9 +10105,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 +10125,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 +10452,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,7 +10598,8 @@ 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",
@@ -11209,9 +11281,9 @@ const useTableKeyboardNavigation = (props, rows, rowProps, ref) => {
     }
   });
   const onKeyDown = event => {
-    var _document$activeEleme;
+    var _document$activeEleme, _document$activeEleme2;
     const isModifierKeyPressed = event.metaKey || event.ctrlKey || event.altKey || event.shiftKey;
-    if (useGlobalKeyboardNavigation && document.activeElement !== ref.current && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.getAttribute('type')) !== 'search' && document.activeElement !== document.body) {
+    if (useGlobalKeyboardNavigation && document.activeElement !== ref.current && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.getAttribute('type')) !== 'search' && document.activeElement !== document.body && ((_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 ? void 0 : _document$activeEleme2.getAttribute('role')) !== 'dialog') {
       return;
     }
     // abort key handling if other elements inside table are focused and we don't use global keyboard navigation
@@ -16139,7 +16211,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,
@@ -17178,14 +17253,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 => {
@@ -17739,16 +17820,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) {
@@ -17794,7 +17885,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 => {
@@ -19748,6 +19838,7 @@ function Filters(props) {
     table
   } = props;
   const {
+    locale,
     texts
   } = useLocalization();
   const ref = React__default.useRef(null);
@@ -19828,7 +19919,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}`,
@@ -19969,14 +20060,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,
@@ -20510,10 +20593,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
@@ -20524,13 +20610,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);
 }
 
@@ -20750,6 +20843,14 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const bodyRef = React__default.useRef(null);
   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(internalRef.current))) {
+        return;
+      }
       tableMeta.hoverState.handleKeyDown(event);
       tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex);
       tableMeta.rowClick.handleKeyDown(event, table);
@@ -20764,7 +20865,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);
   };
@@ -20838,7 +20939,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",
@@ -20850,6 +20951,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", {
@@ -21907,6 +22009,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;