@economic/taco 1.30.1 → 1.31.0

package/dist/esm/packages/taco/src/primitives/Button.js

@@ -1,19 +1,38 @@
-import { forwardRef, createElement, Children } from 'react';
+import { forwardRef, useEffect, createElement, Children } from 'react';
+import { createShortcutKeyDownHandler } from '../utils/keyboard.js';
+import { useMergedRef } from '../hooks/useMergedRef.js';
 
 const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
   const {
     disabled,
+    shortcut,
     target,
     type = 'button',
     ...otherProps
   } = props;
+  const internalRef = useMergedRef(ref);
+  useEffect(() => {
+    let handleKeyDown;
+    if (shortcut) {
+      handleKeyDown = createShortcutKeyDownHandler(shortcut, () => {
+        var _internalRef$current;
+        (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.click();
+      });
+      document.addEventListener('keydown', handleKeyDown);
+    }
+    return () => {
+      if (handleKeyDown) {
+        document.removeEventListener('keydown', handleKeyDown);
+      }
+    };
+  }, [shortcut]);
   const Tag = props.href ? 'a' : 'button';
   return /*#__PURE__*/createElement(Tag, Object.assign({}, otherProps, {
     "aria-disabled": disabled ? 'true' : undefined,
     disabled: disabled,
     target: Tag === 'a' ? target : undefined,
     type: Tag !== 'a' ? type : undefined,
-    ref: ref
+    ref: internalRef
   }), Children.count(props.children) > 1 ? Children.map(props.children, child => typeof child === 'string' ? /*#__PURE__*/createElement("span", null, child) : child) : props.children);
 });
 

package/dist/esm/packages/taco/src/primitives/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../../../src/primitives/Button.tsx"],"sourcesContent":["import * as React from 'react';\n\ntype ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> & {\n    /** Content should be a text */\n    children: React.ReactNode;\n    /** Provides url for buttons being used as a link */\n    href?: string;\n    /** Provides target for buttons being used as a link */\n    target?: '_self' | '_blank' | '_parent' | '_top';\n};\n\nconst Button = React.forwardRef(function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) {\n    const { disabled, target, type = 'button', ...otherProps } = props;\n\n    const Tag = props.href ? 'a' : 'button';\n\n    return (\n        <Tag\n            {...otherProps}\n            aria-disabled={disabled ? 'true' : undefined}\n            disabled={disabled}\n            target={Tag === 'a' ? target : undefined}\n            type={Tag !== 'a' ? type : undefined}\n            ref={ref as any}>\n            {React.Children.count(props.children) > 1\n                ? React.Children.map(props.children, child => (typeof child === 'string' ? <span>{child}</span> : child))\n                : props.children}\n        </Tag>\n    );\n});\n\nexport { Button };\nexport type { ButtonProps };\n"],"names":["Button","React","props","ref","disabled","target","type","otherProps","Tag","href","undefined","count","children","map","child"],"mappings":";;MAWMA,MAAM,gBAAGC,UAAgB,CAAC,SAASD,MAAM,CAACE,KAAkB,EAAEC,GAAqD;EACrH,MAAM;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,IAAI,GAAG,QAAQ;IAAE,GAAGC;GAAY,GAAGL,KAAK;EAElE,MAAMM,GAAG,GAAGN,KAAK,CAACO,IAAI,GAAG,GAAG,GAAG,QAAQ;EAEvC,oBACIR,cAACO,GAAG,oBACID,UAAU;qBACCH,QAAQ,GAAG,MAAM,GAAGM,SAAS;IAC5CN,QAAQ,EAAEA,QAAQ;IAClBC,MAAM,EAAEG,GAAG,KAAK,GAAG,GAAGH,MAAM,GAAGK,SAAS;IACxCJ,IAAI,EAAEE,GAAG,KAAK,GAAG,GAAGF,IAAI,GAAGI,SAAS;IACpCP,GAAG,EAAEA;MACJF,QAAc,CAACU,KAAK,CAACT,KAAK,CAACU,QAAQ,CAAC,GAAG,CAAC,GACnCX,QAAc,CAACY,GAAG,CAACX,KAAK,CAACU,QAAQ,EAAEE,KAAK,IAAK,OAAOA,KAAK,KAAK,QAAQ,gBAAGb,4BAAOa,KAAK,CAAQ,GAAGA,KAAM,CAAC,GACvGZ,KAAK,CAACU,QAAQ,CAClB;AAEd,CAAC;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../../../../src/primitives/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { KeyDownHandlerOptions, createShortcutKeyDownHandler } from '../utils/keyboard';\nimport { useMergedRef } from '../hooks/useMergedRef';\n\ntype ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> & {\n    /** Content should be a text */\n    children: React.ReactNode;\n    /** Provides url for buttons being used as a link */\n    href?: string;\n    shortcut?: string | KeyDownHandlerOptions;\n    /** Provides target for buttons being used as a link */\n    target?: '_self' | '_blank' | '_parent' | '_top';\n};\n\nconst Button = React.forwardRef(function Button(props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) {\n    const { disabled, shortcut, target, type = 'button', ...otherProps } = props;\n    const internalRef = useMergedRef<HTMLButtonElement | HTMLAnchorElement>(ref);\n\n    React.useEffect(() => {\n        let handleKeyDown;\n\n        if (shortcut) {\n            handleKeyDown = createShortcutKeyDownHandler(shortcut, () => {\n                internalRef.current?.click();\n            });\n\n            document.addEventListener('keydown', handleKeyDown);\n        }\n\n        return () => {\n            if (handleKeyDown) {\n                document.removeEventListener('keydown', handleKeyDown);\n            }\n        };\n    }, [shortcut]);\n\n    const Tag = props.href ? 'a' : 'button';\n\n    return (\n        <Tag\n            {...otherProps}\n            aria-disabled={disabled ? 'true' : undefined}\n            disabled={disabled}\n            target={Tag === 'a' ? target : undefined}\n            type={Tag !== 'a' ? type : undefined}\n            ref={internalRef as any}>\n            {React.Children.count(props.children) > 1\n                ? React.Children.map(props.children, child => (typeof child === 'string' ? <span>{child}</span> : child))\n                : props.children}\n        </Tag>\n    );\n});\n\nexport { Button };\nexport type { ButtonProps };\n"],"names":["Button","React","props","ref","disabled","shortcut","target","type","otherProps","internalRef","useMergedRef","handleKeyDown","createShortcutKeyDownHandler","current","click","document","addEventListener","removeEventListener","Tag","href","undefined","count","children","map","child"],"mappings":";;;;MAcMA,MAAM,gBAAGC,UAAgB,CAAC,SAASD,MAAM,CAACE,KAAkB,EAAEC,GAAqD;EACrH,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,IAAI,GAAG,QAAQ;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC5E,MAAMO,WAAW,GAAGC,YAAY,CAAwCP,GAAG,CAAC;EAE5EF,SAAe,CAAC;IACZ,IAAIU,aAAa;IAEjB,IAAIN,QAAQ,EAAE;MACVM,aAAa,GAAGC,4BAA4B,CAACP,QAAQ,EAAE;;QACnD,wBAAAI,WAAW,CAACI,OAAO,yDAAnB,qBAAqBC,KAAK,EAAE;OAC/B,CAAC;MAEFC,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEL,aAAa,CAAC;;IAGvD,OAAO;MACH,IAAIA,aAAa,EAAE;QACfI,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEN,aAAa,CAAC;;KAE7D;GACJ,EAAE,CAACN,QAAQ,CAAC,CAAC;EAEd,MAAMa,GAAG,GAAGhB,KAAK,CAACiB,IAAI,GAAG,GAAG,GAAG,QAAQ;EAEvC,oBACIlB,cAACiB,GAAG,oBACIV,UAAU;qBACCJ,QAAQ,GAAG,MAAM,GAAGgB,SAAS;IAC5ChB,QAAQ,EAAEA,QAAQ;IAClBE,MAAM,EAAEY,GAAG,KAAK,GAAG,GAAGZ,MAAM,GAAGc,SAAS;IACxCb,IAAI,EAAEW,GAAG,KAAK,GAAG,GAAGX,IAAI,GAAGa,SAAS;IACpCjB,GAAG,EAAEM;MACJR,QAAc,CAACoB,KAAK,CAACnB,KAAK,CAACoB,QAAQ,CAAC,GAAG,CAAC,GACnCrB,QAAc,CAACsB,GAAG,CAACrB,KAAK,CAACoB,QAAQ,EAAEE,KAAK,IAAK,OAAOA,KAAK,KAAK,QAAQ,gBAAGvB,4BAAOuB,KAAK,CAAQ,GAAGA,KAAM,CAAC,GACvGtB,KAAK,CAACoB,QAAQ,CAClB;AAEd,CAAC;;;;"}

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

@@ -0,0 +1,35 @@
+const WHITELISTED_ELEMENTS = ['INPUT', 'TEXTAREA', 'SELECT'];
+function createShortcutKeyDownHandler(key, handler) {
+  return function (event) {
+    let condition = false;
+    if (event.target !== event.currentTarget && WHITELISTED_ELEMENTS.includes(event.target.tagName)) {
+      return;
+    }
+    if (typeof key === 'string') {
+      condition = event.key.toLowerCase() === key.toLowerCase();
+    } else {
+      if (key.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey) || key.meta === false && key.meta && (isMacOs() ? event.metaKey : event.ctrlKey)) {
+        return;
+      }
+      if (key.shift && !event.shiftKey || key.shift === false && event.shiftKey) {
+        return;
+      }
+      condition = event.key.toLowerCase() === key.key.toLowerCase();
+    }
+    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);
+      handler(event);
+    }
+  };
+}
+const isMacOs = () => {
+  var _window;
+  return (_window = window) === null || _window === void 0 ? void 0 : _window.navigator.userAgent.includes('Mac');
+};
+
+export { createShortcutKeyDownHandler, isMacOs };
+//# sourceMappingURL=keyboard.js.map

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

@@ -0,0 +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\nconst WHITELISTED_ELEMENTS = ['INPUT', 'TEXTAREA', 'SELECT'];\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        let condition = false;\n\n        if (event.target !== event.currentTarget && WHITELISTED_ELEMENTS.includes((event.target as HTMLElement).tagName)) {\n            return;\n        }\n\n        if (typeof key === 'string') {\n            condition = event.key.toLowerCase() === key.toLowerCase();\n        } else {\n            if (\n                (key.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey)) ||\n                (key.meta === false && key.meta && (isMacOs() ? event.metaKey : event.ctrlKey))\n            ) {\n                return;\n            }\n\n            if ((key.shift && !event.shiftKey) || (key.shift === false && event.shiftKey)) {\n                return;\n            }\n\n            condition = event.key.toLowerCase() === key.key.toLowerCase();\n        }\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":["WHITELISTED_ELEMENTS","createShortcutKeyDownHandler","key","handler","event","condition","target","currentTarget","includes","tagName","toLowerCase","meta","isMacOs","metaKey","ctrlKey","shift","shiftKey","stopPropagation","stopImmediatePropagation","window","navigator","userAgent"],"mappings":"AAIA,MAAMA,oBAAoB,GAAG,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC;SAE5CC,4BAA4B,CACxCC,GAAmC,EACnCC,OAAgE;EAEhE,OAAO,UAAUC,KAA6C;IAC1D,IAAIC,SAAS,GAAG,KAAK;IAErB,IAAID,KAAK,CAACE,MAAM,KAAKF,KAAK,CAACG,aAAa,IAAIP,oBAAoB,CAACQ,QAAQ,CAAEJ,KAAK,CAACE,MAAsB,CAACG,OAAO,CAAC,EAAE;MAC9G;;IAGJ,IAAI,OAAOP,GAAG,KAAK,QAAQ,EAAE;MACzBG,SAAS,GAAGD,KAAK,CAACF,GAAG,CAACQ,WAAW,EAAE,KAAKR,GAAG,CAACQ,WAAW,EAAE;KAC5D,MAAM;MACH,IACKR,GAAG,CAACS,IAAI,KAAKC,OAAO,EAAE,GAAG,CAACR,KAAK,CAACS,OAAO,GAAG,CAACT,KAAK,CAACU,OAAO,CAAC,IACzDZ,GAAG,CAACS,IAAI,KAAK,KAAK,IAAIT,GAAG,CAACS,IAAI,KAAKC,OAAO,EAAE,GAAGR,KAAK,CAACS,OAAO,GAAGT,KAAK,CAACU,OAAO,CAAE,EACjF;QACE;;MAGJ,IAAKZ,GAAG,CAACa,KAAK,IAAI,CAACX,KAAK,CAACY,QAAQ,IAAMd,GAAG,CAACa,KAAK,KAAK,KAAK,IAAIX,KAAK,CAACY,QAAS,EAAE;QAC3E;;MAGJX,SAAS,GAAGD,KAAK,CAACF,GAAG,CAACQ,WAAW,EAAE,KAAKR,GAAG,CAACA,GAAG,CAACQ,WAAW,EAAE;;IAGjE,IAAIL,SAAS,EAAE;MAAA;;MAEXD,KAAK,CAACa,eAAe,EAAE;;MAEtB,yBAAAb,KAAuB,CAACc,wBAAwB,0DAAhD,2BAAAd,KAAuB,CAA6B;MACrDD,OAAO,CAACC,KAAK,CAAC;;GAErB;AACL;MAEaQ,OAAO,GAAG;EAAA;EAAA,kBAAMO,MAAM,4CAAN,QAAQC,SAAS,CAACC,SAAS,CAACb,QAAQ,CAAC,KAAK,CAAC;AAAA;;;;"}

package/dist/hooks/useGlobalKeyDown.d.ts

@@ -0,0 +1,2 @@
+import { KeyDownHandlerOptions } from '../utils/keyboard';
+export declare const useGlobalKeyDown: (key: string | KeyDownHandlerOptions, handler: (event: KeyboardEvent) => void) => void;

package/dist/index.d.ts

@@ -53,6 +53,7 @@ export * from './components/Layout/Layout';
 export * from './components/Navigation2/Navigation2';
 export * as CollectionPrimitive from './primitives/Collection/Collection';
 export * from './utils/date';
+export * from './utils/keyboard';
 export * from './utils/mergeRefs';
 export * from './hooks/useBoundaryOverflowDetection';
 export * from './hooks/useBoundingClientRectListener';

package/dist/primitives/Button.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
+import { KeyDownHandlerOptions } from '../utils/keyboard';
 declare type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> & {
     /** Content should be a text */
     children: React.ReactNode;
     /** Provides url for buttons being used as a link */
     href?: string;
+    shortcut?: string | KeyDownHandlerOptions;
     /** Provides target for buttons being used as a link */
     target?: '_self' | '_blank' | '_parent' | '_top';
 };
@@ -12,6 +14,7 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
     children: React.ReactNode;
     /** Provides url for buttons being used as a link */
     href?: string | undefined;
+    shortcut?: string | KeyDownHandlerOptions | undefined;
     /** Provides target for buttons being used as a link */
     target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
 } & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;