@economic/taco 2.21.0 → 2.21.1

package/dist/esm/packages/taco/src/components/Input/Input.js

@@ -2,6 +2,7 @@ import { forwardRef, createElement, useRef, memo, cloneElement } from 'react';
 import cn from 'clsx';
 import { Icon } from '../Icon/Icon.js';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { isPressingMetaKey } from '../../utils/keyboard.js';
 import { getButtonStateClasses, getInputClasses } from './util.js';
 import { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener.js';
 
@@ -19,7 +20,7 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/forwardRef(function InputWit
   const internalRef = useMergedRef(ref);
   const handleKeyDown = event => {
     // prevent any external keyboard shortcuts from executing while typing single characters in input
-    if (event.key.length === 1) {
+    if (event.key.length === 1 && !isPressingMetaKey(event)) {
       event.stopPropagation();
     }
     // home and end keys only navigate to the start/end of input value if the input container does not scroll
@@ -45,13 +46,22 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/forwardRef(function InputWit
     'pl-8': !!prefix,
     'pr-8': !!postfix
   }, attributes.className);
+  const typeAttributes = {
+    type
+  };
+  // https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
+  if (type === 'number') {
+    typeAttributes.type = 'text';
+    typeAttributes.inputMode = 'numeric';
+    typeAttributes.pattern = '[0-9]*';
+  }
   return /*#__PURE__*/createElement("div", {
     className: "relative inline-flex w-full",
     "data-taco": "input-container",
     style: {
       opacity: 0.999
     }
-  }, /*#__PURE__*/createElement("input", Object.assign({}, attributes, {
+  }, /*#__PURE__*/createElement("input", Object.assign({}, attributes, typeAttributes, {
     className: className,
     "data-taco": "input",
     onKeyDown: handleKeyDown,
@@ -61,8 +71,7 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/forwardRef(function InputWit
     style: {
       paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,
       paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined
-    },
-    type: type
+    }
   })), prefix ? /*#__PURE__*/createElement(Affix, {
     type: "prefix",
     children: prefix,

package/dist/esm/packages/taco/src/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getButtonStateClasses, getInputClasses } from './util';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\nexport type InputWithoutDeprecatedFeaturesProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    postfix?: string | JSX.Element;\n    prefix?: string | JSX.Element;\n};\n\nconst validSetSelectionRangeTypes = ['text', 'search', 'url', 'tel', 'password'];\n\nconst InputWithoutDeprecatedFeatures = React.forwardRef(function InputWithoutDeprecatedFeatures(\n    props: InputWithoutDeprecatedFeaturesProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { highlighted, invalid, onKeyDown, postfix, prefix, type = 'text', ...attributes } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // prevent any external keyboard shortcuts from executing while typing single characters in input\n        if (event.key.length === 1) {\n            event.stopPropagation();\n        }\n\n        // home and end keys only navigate to the start/end of input value if the input container does not scroll\n        // if it has scroll height then the browser reverts to native scrolling behaviour only\n        // so we manually override it to ensure _our_ desired behaviour remains intact\n        // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange\n        if (validSetSelectionRangeTypes.includes(type)) {\n            if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n                event.preventDefault();\n                const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n                event.currentTarget.setSelectionRange(position, position);\n            }\n        }\n\n        if (typeof onKeyDown === 'function') {\n            onKeyDown(event);\n        }\n    };\n\n    const prefixRef = React.useRef<HTMLDivElement>(null);\n    const prefixRect = useBoundingClientRectListener(prefixRef);\n    const postfixRef = React.useRef<HTMLDivElement>(null);\n    const postfixRect = useBoundingClientRectListener(postfixRef, [postfix]);\n\n    const className = cn(\n        getInputClasses(props),\n        {\n            'pl-8': !!prefix,\n            'pr-8': !!postfix,\n        },\n        attributes.className\n    );\n\n    return (\n        <div className=\"relative inline-flex w-full\" data-taco=\"input-container\" style={{ opacity: 0.999 }}>\n            <input\n                {...attributes}\n                className={className}\n                data-taco=\"input\"\n                onKeyDown={handleKeyDown}\n                aria-invalid={invalid}\n                data-highlighted={highlighted}\n                ref={internalRef}\n                style={{\n                    paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,\n                    paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined,\n                }}\n                type={type}\n            />\n            {prefix ? <Affix type=\"prefix\" children={prefix} disabled={attributes.disabled} ref={prefixRef} /> : null}\n            {postfix ? <Affix type=\"postfix\" children={postfix} disabled={attributes.disabled} ref={postfixRef} /> : null}\n        </div>\n    );\n});\n\ntype AffixProps = {\n    children: string | JSX.Element;\n    disabled?: boolean;\n    type: 'prefix' | 'postfix';\n};\nconst Affix = React.memo(\n    React.forwardRef(function Affix(props: AffixProps, ref: React.Ref<HTMLDivElement>) {\n        const { children, disabled, type } = props;\n\n        return (\n            <div\n                className={cn(\n                    'group absolute top-0 flex h-full items-center justify-center px-2',\n                    // icon\n                    '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n                    {\n                        'text-grey-300': disabled,\n                        'text-grey-700': !disabled,\n                        'left-0 [&>button]:!-ml-2': type === 'prefix',\n                        'right-0 [&>button]:!-mr-2': type === 'postfix',\n                    }\n                )}\n                data-affix-type={type}\n                ref={ref}>\n                {children}\n            </div>\n        );\n    })\n);\n\nexport type InputProps = InputWithoutDeprecatedFeaturesProps & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n};\n\nexport const Input = React.forwardRef(function LegacyInput(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, ...attributes } = props;\n\n    let postfix;\n\n    if (button) {\n        const disabled = button.props.disabled || attributes.disabled;\n        const buttonClassName = cn(\n            'items-center focus:z-10 flex justify-center rounded-l-none rounded-r h-full focus:rounded focus:outline-none',\n            getButtonStateClasses(attributes.invalid, disabled),\n            button.props.className\n        );\n        postfix = React.cloneElement(button, {\n            className: buttonClassName,\n            disabled,\n        });\n    } else if (icon) {\n        postfix = typeof icon === 'string' ? <Icon name={icon} /> : icon;\n    }\n\n    return <InputWithoutDeprecatedFeatures {...attributes} postfix={attributes.postfix ?? postfix} ref={ref} />;\n});\n"],"names":["validSetSelectionRangeTypes","InputWithoutDeprecatedFeatures","React","props","ref","highlighted","invalid","onKeyDown","postfix","prefix","type","attributes","internalRef","useMergedRef","handleKeyDown","event","key","length","stopPropagation","includes","shiftKey","preventDefault","position","currentTarget","value","setSelectionRange","prefixRef","prefixRect","useBoundingClientRectListener","postfixRef","postfixRect","className","cn","getInputClasses","style","opacity","paddingLeft","width","undefined","paddingRight","Affix","children","disabled","Input","LegacyInput","button","icon","buttonClassName","getButtonStateClasses","Icon","name","_attributes$postfix"],"mappings":";;;;;;;AAgBA,MAAMA,2BAA2B,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC;AAEhF,MAAMC,8BAA8B,gBAAGC,UAAgB,CAAC,SAASD,8BAA8BA,CAC3FE,KAA0C,EAC1CC,GAAgC;EAEhC,MAAM;IAAEC,WAAW;IAAEC,OAAO;IAAEC,SAAS;IAAEC,OAAO;IAAEC,MAAM;IAAEC,IAAI,GAAG,MAAM;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAChG,MAAMS,WAAW,GAAGC,YAAY,CAAmBT,GAAG,CAAC;EAEvD,MAAMU,aAAa,GAAIC,KAA4C;;IAE/D,IAAIA,KAAK,CAACC,GAAG,CAACC,MAAM,KAAK,CAAC,EAAE;MACxBF,KAAK,CAACG,eAAe,EAAE;;;;;;IAO3B,IAAIlB,2BAA2B,CAACmB,QAAQ,CAACT,IAAI,CAAC,EAAE;MAC5C,IAAI,CAACK,KAAK,CAACK,QAAQ,KAAKL,KAAK,CAACC,GAAG,KAAK,MAAM,IAAID,KAAK,CAACC,GAAG,KAAK,KAAK,CAAC,EAAE;QAClED,KAAK,CAACM,cAAc,EAAE;QACtB,MAAMC,QAAQ,GAAGP,KAAK,CAACC,GAAG,KAAK,KAAK,GAAGD,KAAK,CAACQ,aAAa,CAACC,KAAK,CAACP,MAAM,GAAG,CAAC;QAC3EF,KAAK,CAACQ,aAAa,CAACE,iBAAiB,CAACH,QAAQ,EAAEA,QAAQ,CAAC;;;IAIjE,IAAI,OAAOf,SAAS,KAAK,UAAU,EAAE;MACjCA,SAAS,CAACQ,KAAK,CAAC;;GAEvB;EAED,MAAMW,SAAS,GAAGxB,MAAY,CAAiB,IAAI,CAAC;EACpD,MAAMyB,UAAU,GAAGC,6BAA6B,CAACF,SAAS,CAAC;EAC3D,MAAMG,UAAU,GAAG3B,MAAY,CAAiB,IAAI,CAAC;EACrD,MAAM4B,WAAW,GAAGF,6BAA6B,CAACC,UAAU,EAAE,CAACrB,OAAO,CAAC,CAAC;EAExE,MAAMuB,SAAS,GAAGC,EAAE,CAChBC,eAAe,CAAC9B,KAAK,CAAC,EACtB;IACI,MAAM,EAAE,CAAC,CAACM,MAAM;IAChB,MAAM,EAAE,CAAC,CAACD;GACb,EACDG,UAAU,CAACoB,SAAS,CACvB;EAED,oBACI7B;IAAK6B,SAAS,EAAC,6BAA6B;iBAAW,iBAAiB;IAACG,KAAK,EAAE;MAAEC,OAAO,EAAE;;kBACvFjC,yCACQS,UAAU;IACdoB,SAAS,EAAEA,SAAS;iBACV,OAAO;IACjBxB,SAAS,EAAEO,aAAa;oBACVR,OAAO;wBACHD,WAAW;IAC7BD,GAAG,EAAEQ,WAAW;IAChBsB,KAAK,EAAE;MACHE,WAAW,EAAET,UAAU,MAAMA,UAAU,CAACU,KAAK,GAAG,KAAK,GAAGC,SAAS;MACjEC,YAAY,EAAET,WAAW,MAAMA,WAAW,CAACO,KAAK,GAAG,KAAK,GAAGC;KAC9D;IACD5B,IAAI,EAAEA;KACR,EACDD,MAAM,gBAAGP,cAACsC,KAAK;IAAC9B,IAAI,EAAC,QAAQ;IAAC+B,QAAQ,EAAEhC,MAAM;IAAEiC,QAAQ,EAAE/B,UAAU,CAAC+B,QAAQ;IAAEtC,GAAG,EAAEsB;IAAa,GAAG,IAAI,EACxGlB,OAAO,gBAAGN,cAACsC,KAAK;IAAC9B,IAAI,EAAC,SAAS;IAAC+B,QAAQ,EAAEjC,OAAO;IAAEkC,QAAQ,EAAE/B,UAAU,CAAC+B,QAAQ;IAAEtC,GAAG,EAAEyB;IAAc,GAAG,IAAI,CAC3G;AAEd,CAAC,CAAC;AAOF,MAAMW,KAAK,gBAAGtC,IAAU,eACpBA,UAAgB,CAAC,SAASsC,KAAKA,CAACrC,KAAiB,EAAEC,GAA8B;EAC7E,MAAM;IAAEqC,QAAQ;IAAEC,QAAQ;IAAEhC;GAAM,GAAGP,KAAK;EAE1C,oBACID;IACI6B,SAAS,EAAEC,EAAE,CACT,mEAAmE;;IAEnE,yDAAyD,EACzD;MACI,eAAe,EAAEU,QAAQ;MACzB,eAAe,EAAE,CAACA,QAAQ;MAC1B,0BAA0B,EAAEhC,IAAI,KAAK,QAAQ;MAC7C,2BAA2B,EAAEA,IAAI,KAAK;KACzC,CACJ;uBACgBA,IAAI;IACrBN,GAAG,EAAEA;KACJqC,QAAQ,CACP;AAEd,CAAC,CAAC,CACL;MASYE,KAAK,gBAAGzC,UAAgB,CAAC,SAAS0C,WAAWA,CAACzC,KAAiB,EAAEC,GAAgC;;EAC1G,MAAM;IAAEyC,MAAM;IAAEC,IAAI;IAAE,GAAGnC;GAAY,GAAGR,KAAK;EAE7C,IAAIK,OAAO;EAEX,IAAIqC,MAAM,EAAE;IACR,MAAMH,QAAQ,GAAGG,MAAM,CAAC1C,KAAK,CAACuC,QAAQ,IAAI/B,UAAU,CAAC+B,QAAQ;IAC7D,MAAMK,eAAe,GAAGf,EAAE,CACtB,8GAA8G,EAC9GgB,qBAAqB,CAACrC,UAAU,CAACL,OAAO,EAAEoC,QAAQ,CAAC,EACnDG,MAAM,CAAC1C,KAAK,CAAC4B,SAAS,CACzB;IACDvB,OAAO,gBAAGN,YAAkB,CAAC2C,MAAM,EAAE;MACjCd,SAAS,EAAEgB,eAAe;MAC1BL;KACH,CAAC;GACL,MAAM,IAAII,IAAI,EAAE;IACbtC,OAAO,GAAG,OAAOsC,IAAI,KAAK,QAAQ,gBAAG5C,cAAC+C,IAAI;MAACC,IAAI,EAAEJ;MAAQ,GAAGA,IAAI;;EAGpE,oBAAO5C,cAACD,8BAA8B,oBAAKU,UAAU;IAAEH,OAAO,GAAA2C,mBAAA,GAAExC,UAAU,CAACH,OAAO,cAAA2C,mBAAA,cAAAA,mBAAA,GAAI3C,OAAO;IAAEJ,GAAG,EAAEA;KAAO;AAC/G,CAAC;;;;"}
+{"version":3,"file":"Input.js","sources":["../../../../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getButtonStateClasses, getInputClasses } from './util';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { isPressingMetaKey } from '../../utils/keyboard';\n\nexport type InputWithoutDeprecatedFeaturesProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    postfix?: string | JSX.Element;\n    prefix?: string | JSX.Element;\n};\n\nconst validSetSelectionRangeTypes = ['text', 'search', 'url', 'tel', 'password'];\n\nconst InputWithoutDeprecatedFeatures = React.forwardRef(function InputWithoutDeprecatedFeatures(\n    props: InputWithoutDeprecatedFeaturesProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { highlighted, invalid, onKeyDown, postfix, prefix, type = 'text', ...attributes } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        // prevent any external keyboard shortcuts from executing while typing single characters in input\n        if (event.key.length === 1 && !isPressingMetaKey(event)) {\n            event.stopPropagation();\n        }\n\n        // home and end keys only navigate to the start/end of input value if the input container does not scroll\n        // if it has scroll height then the browser reverts to native scrolling behaviour only\n        // so we manually override it to ensure _our_ desired behaviour remains intact\n        // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange\n        if (validSetSelectionRangeTypes.includes(type)) {\n            if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n                event.preventDefault();\n                const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n                event.currentTarget.setSelectionRange(position, position);\n            }\n        }\n\n        if (typeof onKeyDown === 'function') {\n            onKeyDown(event);\n        }\n    };\n\n    const prefixRef = React.useRef<HTMLDivElement>(null);\n    const prefixRect = useBoundingClientRectListener(prefixRef);\n    const postfixRef = React.useRef<HTMLDivElement>(null);\n    const postfixRect = useBoundingClientRectListener(postfixRef, [postfix]);\n\n    const className = cn(\n        getInputClasses(props),\n        {\n            'pl-8': !!prefix,\n            'pr-8': !!postfix,\n        },\n        attributes.className\n    );\n\n    const typeAttributes: Partial<React.InputHTMLAttributes<HTMLInputElement>> = {\n        type,\n    };\n\n    // https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/\n    if (type === 'number') {\n        typeAttributes.type = 'text';\n        typeAttributes.inputMode = 'numeric';\n        typeAttributes.pattern = '[0-9]*';\n    }\n\n    return (\n        <div className=\"relative inline-flex w-full\" data-taco=\"input-container\" style={{ opacity: 0.999 }}>\n            <input\n                {...attributes}\n                {...typeAttributes}\n                className={className}\n                data-taco=\"input\"\n                onKeyDown={handleKeyDown}\n                aria-invalid={invalid}\n                data-highlighted={highlighted}\n                ref={internalRef}\n                style={{\n                    paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,\n                    paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined,\n                }}\n            />\n            {prefix ? <Affix type=\"prefix\" children={prefix} disabled={attributes.disabled} ref={prefixRef} /> : null}\n            {postfix ? <Affix type=\"postfix\" children={postfix} disabled={attributes.disabled} ref={postfixRef} /> : null}\n        </div>\n    );\n});\n\ntype AffixProps = {\n    children: string | JSX.Element;\n    disabled?: boolean;\n    type: 'prefix' | 'postfix';\n};\nconst Affix = React.memo(\n    React.forwardRef(function Affix(props: AffixProps, ref: React.Ref<HTMLDivElement>) {\n        const { children, disabled, type } = props;\n\n        return (\n            <div\n                className={cn(\n                    'group absolute top-0 flex h-full items-center justify-center px-2',\n                    // icon\n                    '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n                    {\n                        'text-grey-300': disabled,\n                        'text-grey-700': !disabled,\n                        'left-0 [&>button]:!-ml-2': type === 'prefix',\n                        'right-0 [&>button]:!-mr-2': type === 'postfix',\n                    }\n                )}\n                data-affix-type={type}\n                ref={ref}>\n                {children}\n            </div>\n        );\n    })\n);\n\nexport type InputProps = InputWithoutDeprecatedFeaturesProps & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n};\n\nexport const Input = React.forwardRef(function LegacyInput(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, ...attributes } = props;\n\n    let postfix;\n\n    if (button) {\n        const disabled = button.props.disabled || attributes.disabled;\n        const buttonClassName = cn(\n            'items-center focus:z-10 flex justify-center rounded-l-none rounded-r h-full focus:rounded focus:outline-none',\n            getButtonStateClasses(attributes.invalid, disabled),\n            button.props.className\n        );\n        postfix = React.cloneElement(button, {\n            className: buttonClassName,\n            disabled,\n        });\n    } else if (icon) {\n        postfix = typeof icon === 'string' ? <Icon name={icon} /> : icon;\n    }\n\n    return <InputWithoutDeprecatedFeatures {...attributes} postfix={attributes.postfix ?? postfix} ref={ref} />;\n});\n"],"names":["validSetSelectionRangeTypes","InputWithoutDeprecatedFeatures","React","props","ref","highlighted","invalid","onKeyDown","postfix","prefix","type","attributes","internalRef","useMergedRef","handleKeyDown","event","key","length","isPressingMetaKey","stopPropagation","includes","shiftKey","preventDefault","position","currentTarget","value","setSelectionRange","prefixRef","prefixRect","useBoundingClientRectListener","postfixRef","postfixRect","className","cn","getInputClasses","typeAttributes","inputMode","pattern","style","opacity","paddingLeft","width","undefined","paddingRight","Affix","children","disabled","Input","LegacyInput","button","icon","buttonClassName","getButtonStateClasses","Icon","name","_attributes$postfix"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Input/util.js

@@ -4,7 +4,7 @@ const getInputClasses = props => {
   const disabled = props.disabled || !!props['aria-disabled'];
   const readOnly = props.readOnly || !!props['aria-readonly'];
   const invalid = props.invalid || !!props['aria-invalid'];
-  return cn('peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus-visible:yt-focus', {
+  return cn('peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full [text-align:inherit] text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus-visible:yt-focus', {
     'bg-white': !props.highlighted && !readOnly,
     // default
     'border-grey-300 enabled:hover:border-grey-500 disabled:border-grey-200': !invalid,

package/dist/esm/packages/taco/src/components/Input/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'clsx';\n\nexport const getInputClasses = props => {\n    const disabled = props.disabled || !!props['aria-disabled'];\n    const readOnly = props.readOnly || !!props['aria-readonly'];\n    const invalid = props.invalid || !!props['aria-invalid'];\n\n    return cn(\n        'peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus-visible:yt-focus',\n        {\n            'bg-white': !props.highlighted && !readOnly,\n            // default\n            'border-grey-300 enabled:hover:border-grey-500 disabled:border-grey-200': !invalid,\n            // disabled\n            'text-opacity-25 cursor-not-allowed placeholder:text-grey-700': disabled,\n            // highlighted\n            'bg-yellow-100/50': props.highlighted && disabled,\n            'bg-yellow-100': props.highlighted && !disabled,\n            // invalid\n            'border-red-500 enabled:hover:border-red-700 disabled:border-red-500/50': invalid,\n            // readOnly\n            'cursor-not-allowed text-black bg-grey-200': readOnly,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined, disabled = false): string => {\n    if (invalid) {\n        return cn('border border-red-500 group-peer-hover:enabled:border-red-700 transition-colors ease-in', {\n            'border-red-500/30': disabled,\n        });\n    }\n\n    return 'border border-grey-300 group-peer-hover:enabled:border-grey-500 transition-colors transition-opacity ease-in';\n};\n"],"names":["getInputClasses","props","disabled","readOnly","invalid","cn","highlighted","getButtonStateClasses"],"mappings":";;MAEaA,eAAe,GAAGC,KAAK;EAChC,MAAMC,QAAQ,GAAGD,KAAK,CAACC,QAAQ,IAAI,CAAC,CAACD,KAAK,CAAC,eAAe,CAAC;EAC3D,MAAME,QAAQ,GAAGF,KAAK,CAACE,QAAQ,IAAI,CAAC,CAACF,KAAK,CAAC,eAAe,CAAC;EAC3D,MAAMG,OAAO,GAAGH,KAAK,CAACG,OAAO,IAAI,CAAC,CAACH,KAAK,CAAC,cAAc,CAAC;EAExD,OAAOI,EAAE,CACL,wOAAwO,EACxO;IACI,UAAU,EAAE,CAACJ,KAAK,CAACK,WAAW,IAAI,CAACH,QAAQ;;IAE3C,wEAAwE,EAAE,CAACC,OAAO;;IAElF,8DAA8D,EAAEF,QAAQ;;IAExE,kBAAkB,EAAED,KAAK,CAACK,WAAW,IAAIJ,QAAQ;IACjD,eAAe,EAAED,KAAK,CAACK,WAAW,IAAI,CAACJ,QAAQ;;IAE/C,wEAAwE,EAAEE,OAAO;;IAEjF,2CAA2C,EAAED;GAChD,CACJ;AACL;MAEaI,qBAAqB,GAAGA,CAACH,OAA4B,EAAEF,QAAQ,GAAG,KAAK;EAChF,IAAIE,OAAO,EAAE;IACT,OAAOC,EAAE,CAAC,yFAAyF,EAAE;MACjG,mBAAmB,EAAEH;KACxB,CAAC;;EAGN,OAAO,8GAA8G;AACzH;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'clsx';\n\nexport const getInputClasses = props => {\n    const disabled = props.disabled || !!props['aria-disabled'];\n    const readOnly = props.readOnly || !!props['aria-readonly'];\n    const invalid = props.invalid || !!props['aria-invalid'];\n\n    return cn(\n        'peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full [text-align:inherit] text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus-visible:yt-focus',\n        {\n            'bg-white': !props.highlighted && !readOnly,\n            // default\n            'border-grey-300 enabled:hover:border-grey-500 disabled:border-grey-200': !invalid,\n            // disabled\n            'text-opacity-25 cursor-not-allowed placeholder:text-grey-700': disabled,\n            // highlighted\n            'bg-yellow-100/50': props.highlighted && disabled,\n            'bg-yellow-100': props.highlighted && !disabled,\n            // invalid\n            'border-red-500 enabled:hover:border-red-700 disabled:border-red-500/50': invalid,\n            // readOnly\n            'cursor-not-allowed text-black bg-grey-200': readOnly,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined, disabled = false): string => {\n    if (invalid) {\n        return cn('border border-red-500 group-peer-hover:enabled:border-red-700 transition-colors ease-in', {\n            'border-red-500/30': disabled,\n        });\n    }\n\n    return 'border border-grey-300 group-peer-hover:enabled:border-grey-500 transition-colors transition-opacity ease-in';\n};\n"],"names":["getInputClasses","props","disabled","readOnly","invalid","cn","highlighted","getButtonStateClasses"],"mappings":";;MAEaA,eAAe,GAAGC,KAAK;EAChC,MAAMC,QAAQ,GAAGD,KAAK,CAACC,QAAQ,IAAI,CAAC,CAACD,KAAK,CAAC,eAAe,CAAC;EAC3D,MAAME,QAAQ,GAAGF,KAAK,CAACE,QAAQ,IAAI,CAAC,CAACF,KAAK,CAAC,eAAe,CAAC;EAC3D,MAAMG,OAAO,GAAGH,KAAK,CAACG,OAAO,IAAI,CAAC,CAACH,KAAK,CAAC,cAAc,CAAC;EAExD,OAAOI,EAAE,CACL,6PAA6P,EAC7P;IACI,UAAU,EAAE,CAACJ,KAAK,CAACK,WAAW,IAAI,CAACH,QAAQ;;IAE3C,wEAAwE,EAAE,CAACC,OAAO;;IAElF,8DAA8D,EAAEF,QAAQ;;IAExE,kBAAkB,EAAED,KAAK,CAACK,WAAW,IAAIJ,QAAQ;IACjD,eAAe,EAAED,KAAK,CAACK,WAAW,IAAI,CAACJ,QAAQ;;IAE/C,wEAAwE,EAAEE,OAAO;;IAEjF,2CAA2C,EAAED;GAChD,CACJ;AACL;MAEaI,qBAAqB,GAAGA,CAACH,OAA4B,EAAEF,QAAQ,GAAG,KAAK;EAChF,IAAIE,OAAO,EAAE;IACT,OAAOC,EAAE,CAAC,yFAAyF,EAAE;MACjG,mBAAmB,EAAEH;KACxB,CAAC;;EAGN,OAAO,8GAA8G;AACzH;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Group.js

@@ -39,7 +39,7 @@ const MemoedGroup = /*#__PURE__*/React__default.memo(function MemoedGroup(props)
     meta,
     table
   } = props;
-  const containerClassName = cn('px-2 z-10 hover:z-20', colSpan > 1 ? `col-span-${colSpan}` : '', {
+  const containerClassName = cn('px-2 z-10 hover:z-20', {
     sticky: !isPrinting
   });
   const innerClassName = cn('font-bold box-content group/column relative', 'px-[var(--table3-cell-padding-x)]', {
@@ -52,6 +52,9 @@ const MemoedGroup = /*#__PURE__*/React__default.memo(function MemoedGroup(props)
   }
   return /*#__PURE__*/React__default.createElement("div", {
     className: containerClassName,
+    style: colSpan > 1 ? {
+      gridColumn: `span ${colSpan} / span ${colSpan}`
+    } : undefined,
     "data-taco": "table3-column-group",
     "data-align": align,
     role: "columnheader"

package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Group.js.map

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/header/Group.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\n\nimport { HeaderProps, HeaderSeparator } from './Header';\nimport { ColumnMeta, TableMeta } from '@tanstack/react-table';\nimport { Table3ColumnAlignment } from '../../../types';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\n\nexport function Group<TType = unknown>(props: HeaderProps<TType>) {\n    const { children, column, header, table, hasSeparator } = props;\n    const columnMeta = React.useMemo(() => column.columnDef.meta, []) as ColumnMeta<TType, unknown>;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    const memoedProps = {\n        align: 'center' as Table3ColumnAlignment,\n        children: children ?? columnMeta.header,\n        colSpan: header.colSpan,\n        hasSeparator,\n        id: header.id,\n        index: header.index,\n        isPrinting: tableMeta.printing.isPrinting,\n        length: table.getRowModel().rows.length,\n        meta: columnMeta,\n        table,\n    };\n\n    return <MemoedGroup<TType> {...memoedProps} />;\n}\n\n// Memoization\nexport type MemoedGroupProps<TType = unknown> = Omit<HeaderProps<TType>, 'column' | 'header' | 'scrollToIndex'> & {\n    align?: Table3ColumnAlignment;\n    colSpan: number;\n    hasSeparator?: boolean;\n    id: string;\n    index: number;\n    isPrinting: boolean;\n    length: number;\n    meta: ColumnMeta<TType, unknown>;\n};\n\nconst MemoedGroup = React.memo(function MemoedGroup<TType = unknown>(props: MemoedGroupProps<TType>) {\n    const { align, children, colSpan, hasSeparator, id, isPrinting, meta, table } = props;\n\n    const containerClassName = cn('px-2 z-10 hover:z-20', colSpan > 1 ? `col-span-${colSpan}` : '', { sticky: !isPrinting });\n\n    const innerClassName = cn(\n        'font-bold box-content group/column relative',\n        'px-[var(--table3-cell-padding-x)]',\n        {\n            'h-10 items-center': !isPrinting,\n            'pb-2': isPrinting,\n            'border-b-2': !!children,\n        },\n        meta.headerClassName\n    );\n\n    if (table.options.debugAll) {\n        console.log('header group render', id);\n    }\n\n    return (\n        <div className={containerClassName} data-taco=\"table3-column-group\" data-align={align} role=\"columnheader\">\n            <div className={innerClassName}>\n                <Tooltip title={String(meta?.tooltip ?? children)} placement=\"top\">\n                    <span className={cn({ truncate: !isPrinting })}>{children}</span>\n                </Tooltip>\n                {hasSeparator ? <HeaderSeparator /> : null}\n            </div>\n        </div>\n    );\n}) as <TType = unknown>(props: MemoedGroupProps<TType>) => JSX.Element;\n"],"names":["Group","props","children","column","header","table","hasSeparator","columnMeta","React","useMemo","columnDef","meta","tableMeta","options","memoedProps","align","colSpan","id","index","isPrinting","printing","length","getRowModel","rows","MemoedGroup","memo","containerClassName","cn","sticky","innerClassName","headerClassName","debugAll","console","log","className","role","Tooltip","title","String","_meta$tooltip","tooltip","placement","truncate","HeaderSeparator"],"mappings":";;;;;SAQgBA,KAAKA,CAAkBC,KAAyB;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,MAAM;IAAEC,KAAK;IAAEC;GAAc,GAAGL,KAAK;EAC/D,MAAMM,UAAU,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAMN,MAAM,CAACO,SAAS,CAACC,IAAI,EAAE,EAAE,CAA+B;EAC/F,MAAMC,SAAS,GAAGP,KAAK,CAACQ,OAAO,CAACF,IAAwB;EAExD,MAAMG,WAAW,GAAG;IAChBC,KAAK,EAAE,QAAiC;IACxCb,QAAQ,EAAEA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIK,UAAU,CAACH,MAAM;IACvCY,OAAO,EAAEZ,MAAM,CAACY,OAAO;IACvBV,YAAY;IACZW,EAAE,EAAEb,MAAM,CAACa,EAAE;IACbC,KAAK,EAAEd,MAAM,CAACc,KAAK;IACnBC,UAAU,EAAEP,SAAS,CAACQ,QAAQ,CAACD,UAAU;IACzCE,MAAM,EAAEhB,KAAK,CAACiB,WAAW,EAAE,CAACC,IAAI,CAACF,MAAM;IACvCV,IAAI,EAAEJ,UAAU;IAChBF;GACH;EAED,oBAAOG,6BAACgB,WAAW,oBAAYV,WAAW,EAAI;AAClD;AAcA,MAAMU,WAAW,gBAAGhB,cAAK,CAACiB,IAAI,CAAC,SAASD,WAAWA,CAAkBvB,KAA8B;;EAC/F,MAAM;IAAEc,KAAK;IAAEb,QAAQ;IAAEc,OAAO;IAAEV,YAAY;IAAEW,EAAE;IAAEE,UAAU;IAAER,IAAI;IAAEN;GAAO,GAAGJ,KAAK;EAErF,MAAMyB,kBAAkB,GAAGC,EAAE,CAAC,sBAAsB,EAAEX,OAAO,GAAG,CAAC,eAAeA,SAAS,GAAG,EAAE,EAAE;IAAEY,MAAM,EAAE,CAACT;GAAY,CAAC;EAExH,MAAMU,cAAc,GAAGF,EAAE,CACrB,6CAA6C,EAC7C,mCAAmC,EACnC;IACI,mBAAmB,EAAE,CAACR,UAAU;IAChC,MAAM,EAAEA,UAAU;IAClB,YAAY,EAAE,CAAC,CAACjB;GACnB,EACDS,IAAI,CAACmB,eAAe,CACvB;EAED,IAAIzB,KAAK,CAACQ,OAAO,CAACkB,QAAQ,EAAE;IACxBC,OAAO,CAACC,GAAG,CAAC,qBAAqB,EAAEhB,EAAE,CAAC;;EAG1C,oBACIT;IAAK0B,SAAS,EAAER,kBAAkB;iBAAY,qBAAqB;kBAAaX,KAAK;IAAEoB,IAAI,EAAC;kBACxF3B;IAAK0B,SAAS,EAAEL;kBACZrB,6BAAC4B,OAAO;IAACC,KAAK,EAAEC,MAAM,EAAAC,aAAA,GAAC5B,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAE6B,OAAO,cAAAD,aAAA,cAAAA,aAAA,GAAIrC,QAAQ,CAAC;IAAEuC,SAAS,EAAC;kBACzDjC;IAAM0B,SAAS,EAAEP,EAAE,CAAC;MAAEe,QAAQ,EAAE,CAACvB;KAAY;KAAIjB,QAAQ,CAAQ,CAC3D,EACTI,YAAY,gBAAGE,6BAACmC,eAAe,OAAG,GAAG,IAAI,CACxC,CACJ;AAEd,CAAC,CAAqE;;;;"}
+{"version":3,"file":"Group.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/header/Group.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\n\nimport { HeaderProps, HeaderSeparator } from './Header';\nimport { ColumnMeta, TableMeta } from '@tanstack/react-table';\nimport { Table3ColumnAlignment } from '../../../types';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\n\nexport function Group<TType = unknown>(props: HeaderProps<TType>) {\n    const { children, column, header, table, hasSeparator } = props;\n    const columnMeta = React.useMemo(() => column.columnDef.meta, []) as ColumnMeta<TType, unknown>;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    const memoedProps = {\n        align: 'center' as Table3ColumnAlignment,\n        children: children ?? columnMeta.header,\n        colSpan: header.colSpan,\n        hasSeparator,\n        id: header.id,\n        index: header.index,\n        isPrinting: tableMeta.printing.isPrinting,\n        length: table.getRowModel().rows.length,\n        meta: columnMeta,\n        table,\n    };\n\n    return <MemoedGroup<TType> {...memoedProps} />;\n}\n\n// Memoization\nexport type MemoedGroupProps<TType = unknown> = Omit<HeaderProps<TType>, 'column' | 'header' | 'scrollToIndex'> & {\n    align?: Table3ColumnAlignment;\n    colSpan: number;\n    hasSeparator?: boolean;\n    id: string;\n    index: number;\n    isPrinting: boolean;\n    length: number;\n    meta: ColumnMeta<TType, unknown>;\n};\n\nconst MemoedGroup = React.memo(function MemoedGroup<TType = unknown>(props: MemoedGroupProps<TType>) {\n    const { align, children, colSpan, hasSeparator, id, isPrinting, meta, table } = props;\n\n    const containerClassName = cn('px-2 z-10 hover:z-20', { sticky: !isPrinting });\n\n    const innerClassName = cn(\n        'font-bold box-content group/column relative',\n        'px-[var(--table3-cell-padding-x)]',\n        {\n            'h-10 items-center': !isPrinting,\n            'pb-2': isPrinting,\n            'border-b-2': !!children,\n        },\n        meta.headerClassName\n    );\n\n    if (table.options.debugAll) {\n        console.log('header group render', id);\n    }\n\n    return (\n        <div\n            className={containerClassName}\n            style={colSpan > 1 ? { gridColumn: `span ${colSpan} / span ${colSpan}` } : undefined}\n            data-taco=\"table3-column-group\"\n            data-align={align}\n            role=\"columnheader\">\n            <div className={innerClassName}>\n                <Tooltip title={String(meta?.tooltip ?? children)} placement=\"top\">\n                    <span className={cn({ truncate: !isPrinting })}>{children}</span>\n                </Tooltip>\n                {hasSeparator ? <HeaderSeparator /> : null}\n            </div>\n        </div>\n    );\n}) as <TType = unknown>(props: MemoedGroupProps<TType>) => JSX.Element;\n"],"names":["Group","props","children","column","header","table","hasSeparator","columnMeta","React","useMemo","columnDef","meta","tableMeta","options","memoedProps","align","colSpan","id","index","isPrinting","printing","length","getRowModel","rows","MemoedGroup","memo","containerClassName","cn","sticky","innerClassName","headerClassName","debugAll","console","log","className","style","gridColumn","undefined","role","Tooltip","title","String","_meta$tooltip","tooltip","placement","truncate","HeaderSeparator"],"mappings":";;;;;SAQgBA,KAAKA,CAAkBC,KAAyB;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,MAAM;IAAEC,KAAK;IAAEC;GAAc,GAAGL,KAAK;EAC/D,MAAMM,UAAU,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAMN,MAAM,CAACO,SAAS,CAACC,IAAI,EAAE,EAAE,CAA+B;EAC/F,MAAMC,SAAS,GAAGP,KAAK,CAACQ,OAAO,CAACF,IAAwB;EAExD,MAAMG,WAAW,GAAG;IAChBC,KAAK,EAAE,QAAiC;IACxCb,QAAQ,EAAEA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIK,UAAU,CAACH,MAAM;IACvCY,OAAO,EAAEZ,MAAM,CAACY,OAAO;IACvBV,YAAY;IACZW,EAAE,EAAEb,MAAM,CAACa,EAAE;IACbC,KAAK,EAAEd,MAAM,CAACc,KAAK;IACnBC,UAAU,EAAEP,SAAS,CAACQ,QAAQ,CAACD,UAAU;IACzCE,MAAM,EAAEhB,KAAK,CAACiB,WAAW,EAAE,CAACC,IAAI,CAACF,MAAM;IACvCV,IAAI,EAAEJ,UAAU;IAChBF;GACH;EAED,oBAAOG,6BAACgB,WAAW,oBAAYV,WAAW,EAAI;AAClD;AAcA,MAAMU,WAAW,gBAAGhB,cAAK,CAACiB,IAAI,CAAC,SAASD,WAAWA,CAAkBvB,KAA8B;;EAC/F,MAAM;IAAEc,KAAK;IAAEb,QAAQ;IAAEc,OAAO;IAAEV,YAAY;IAAEW,EAAE;IAAEE,UAAU;IAAER,IAAI;IAAEN;GAAO,GAAGJ,KAAK;EAErF,MAAMyB,kBAAkB,GAAGC,EAAE,CAAC,sBAAsB,EAAE;IAAEC,MAAM,EAAE,CAACT;GAAY,CAAC;EAE9E,MAAMU,cAAc,GAAGF,EAAE,CACrB,6CAA6C,EAC7C,mCAAmC,EACnC;IACI,mBAAmB,EAAE,CAACR,UAAU;IAChC,MAAM,EAAEA,UAAU;IAClB,YAAY,EAAE,CAAC,CAACjB;GACnB,EACDS,IAAI,CAACmB,eAAe,CACvB;EAED,IAAIzB,KAAK,CAACQ,OAAO,CAACkB,QAAQ,EAAE;IACxBC,OAAO,CAACC,GAAG,CAAC,qBAAqB,EAAEhB,EAAE,CAAC;;EAG1C,oBACIT;IACI0B,SAAS,EAAER,kBAAkB;IAC7BS,KAAK,EAAEnB,OAAO,GAAG,CAAC,GAAG;MAAEoB,UAAU,UAAUpB,kBAAkBA;KAAW,GAAGqB,SAAS;iBAC1E,qBAAqB;kBACnBtB,KAAK;IACjBuB,IAAI,EAAC;kBACL9B;IAAK0B,SAAS,EAAEL;kBACZrB,6BAAC+B,OAAO;IAACC,KAAK,EAAEC,MAAM,EAAAC,aAAA,GAAC/B,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEgC,OAAO,cAAAD,aAAA,cAAAA,aAAA,GAAIxC,QAAQ,CAAC;IAAE0C,SAAS,EAAC;kBACzDpC;IAAM0B,SAAS,EAAEP,EAAE,CAAC;MAAEkB,QAAQ,EAAE,CAAC1B;KAAY;KAAIjB,QAAQ,CAAQ,CAC3D,EACTI,YAAY,gBAAGE,6BAACsC,eAAe,OAAG,GAAG,IAAI,CACxC,CACJ;AAEd,CAAC,CAAqE;;;;"}

package/dist/esm/packages/taco/src/components/Textarea/Textarea.js

@@ -1,5 +1,6 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'clsx';
+import { isPressingMetaKey } from '../../utils/keyboard.js';
 import { getInputClasses } from '../Input/util.js';
 
 const Textarea = /*#__PURE__*/forwardRef(function Textarea(props, ref) {
@@ -16,7 +17,7 @@ const Textarea = /*#__PURE__*/forwardRef(function Textarea(props, ref) {
   // so we manually override it to ensure _our_ desired behaviour remains intact
   const handleKeyDown = event => {
     // prevent any external keyboard shortcuts from executing while typing single characters in textarea
-    if (event.key.length === 1) {
+    if (event.key.length === 1 && !isPressingMetaKey(event)) {
       event.stopPropagation();
     }
     if (event.key === 'Home' || event.key === 'End') {

package/dist/esm/packages/taco/src/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { getInputClasses } from '../Input/util';\n\nexport type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\n    /** Draws attention to the textarea by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /** Value of the textarea */\n    value?: string;\n};\n\nexport const Textarea = React.forwardRef(function Textarea(props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) {\n    const { defaultValue: _, highlighted, invalid, onKeyDown, ...otherProps } = props;\n    const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);\n\n    // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\n    // so we manually override it to ensure _our_ desired behaviour remains intact\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        // prevent any external keyboard shortcuts from executing while typing single characters in textarea\n        if (event.key.length === 1) {\n            event.stopPropagation();\n        }\n\n        if (event.key === 'Home' || event.key === 'End') {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n            event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;\n        }\n\n        if (onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    return <textarea {...otherProps} className={classNames} data-taco=\"textarea\" onKeyDown={handleKeyDown} ref={ref} />;\n});\n"],"names":["Textarea","React","props","ref","defaultValue","_","highlighted","invalid","onKeyDown","otherProps","classNames","cn","getInputClasses","className","handleKeyDown","event","key","length","stopPropagation","preventDefault","position","currentTarget","value","setSelectionRange","scrollTop","scrollHeight"],"mappings":";;;;MAaaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAmC;EAChH,MAAM;IAAEC,YAAY,EAAEC,CAAC;IAAEC,WAAW;IAAEC,OAAO;IAAEC,SAAS;IAAE,GAAGC;GAAY,GAAGP,KAAK;EACjF,MAAMQ,UAAU,GAAGC,EAAE,CAACC,eAAe,CAACV,KAAK,CAAC,EAAE,wCAAwC,EAAEA,KAAK,CAACW,SAAS,CAAC;;;;EAKxG,MAAMC,aAAa,GAAIC,KAA+C;;IAElE,IAAIA,KAAK,CAACC,GAAG,CAACC,MAAM,KAAK,CAAC,EAAE;MACxBF,KAAK,CAACG,eAAe,EAAE;;IAG3B,IAAIH,KAAK,CAACC,GAAG,KAAK,MAAM,IAAID,KAAK,CAACC,GAAG,KAAK,KAAK,EAAE;MAC7CD,KAAK,CAACI,cAAc,EAAE;MACtB,MAAMC,QAAQ,GAAGL,KAAK,CAACC,GAAG,KAAK,KAAK,GAAGD,KAAK,CAACM,aAAa,CAACC,KAAK,CAACL,MAAM,GAAG,CAAC;MAC3EF,KAAK,CAACM,aAAa,CAACE,iBAAiB,CAACH,QAAQ,EAAEA,QAAQ,CAAC;MACzDL,KAAK,CAACM,aAAa,CAACG,SAAS,GAAGT,KAAK,CAACC,GAAG,KAAK,KAAK,GAAGD,KAAK,CAACM,aAAa,CAACI,YAAY,GAAG,CAAC;;IAG9F,IAAIjB,SAAS,EAAE;MACXA,SAAS,CAACO,KAAK,CAAC;;GAEvB;EAED,oBAAOd,4CAAcQ,UAAU;IAAEI,SAAS,EAAEH,UAAU;iBAAY,UAAU;IAACF,SAAS,EAAEM,aAAa;IAAEX,GAAG,EAAEA;KAAO;AACvH,CAAC;;;;"}
+{"version":3,"file":"Textarea.js","sources":["../../../../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { getInputClasses } from '../Input/util';\nimport { isPressingMetaKey } from '../../utils/keyboard';\n\nexport type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\n    /** Draws attention to the textarea by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /** Value of the textarea */\n    value?: string;\n};\n\nexport const Textarea = React.forwardRef(function Textarea(props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) {\n    const { defaultValue: _, highlighted, invalid, onKeyDown, ...otherProps } = props;\n    const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);\n\n    // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\n    // so we manually override it to ensure _our_ desired behaviour remains intact\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        // prevent any external keyboard shortcuts from executing while typing single characters in textarea\n        if (event.key.length === 1 && !isPressingMetaKey(event)) {\n            event.stopPropagation();\n        }\n\n        if (event.key === 'Home' || event.key === 'End') {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n            event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;\n        }\n\n        if (onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    return <textarea {...otherProps} className={classNames} data-taco=\"textarea\" onKeyDown={handleKeyDown} ref={ref} />;\n});\n"],"names":["Textarea","React","props","ref","defaultValue","_","highlighted","invalid","onKeyDown","otherProps","classNames","cn","getInputClasses","className","handleKeyDown","event","key","length","isPressingMetaKey","stopPropagation","preventDefault","position","currentTarget","value","setSelectionRange","scrollTop","scrollHeight"],"mappings":";;;;;MAcaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQA,CAACE,KAAoB,EAAEC,GAAmC;EAChH,MAAM;IAAEC,YAAY,EAAEC,CAAC;IAAEC,WAAW;IAAEC,OAAO;IAAEC,SAAS;IAAE,GAAGC;GAAY,GAAGP,KAAK;EACjF,MAAMQ,UAAU,GAAGC,EAAE,CAACC,eAAe,CAACV,KAAK,CAAC,EAAE,wCAAwC,EAAEA,KAAK,CAACW,SAAS,CAAC;;;;EAKxG,MAAMC,aAAa,GAAIC,KAA+C;;IAElE,IAAIA,KAAK,CAACC,GAAG,CAACC,MAAM,KAAK,CAAC,IAAI,CAACC,iBAAiB,CAACH,KAAK,CAAC,EAAE;MACrDA,KAAK,CAACI,eAAe,EAAE;;IAG3B,IAAIJ,KAAK,CAACC,GAAG,KAAK,MAAM,IAAID,KAAK,CAACC,GAAG,KAAK,KAAK,EAAE;MAC7CD,KAAK,CAACK,cAAc,EAAE;MACtB,MAAMC,QAAQ,GAAGN,KAAK,CAACC,GAAG,KAAK,KAAK,GAAGD,KAAK,CAACO,aAAa,CAACC,KAAK,CAACN,MAAM,GAAG,CAAC;MAC3EF,KAAK,CAACO,aAAa,CAACE,iBAAiB,CAACH,QAAQ,EAAEA,QAAQ,CAAC;MACzDN,KAAK,CAACO,aAAa,CAACG,SAAS,GAAGV,KAAK,CAACC,GAAG,KAAK,KAAK,GAAGD,KAAK,CAACO,aAAa,CAACI,YAAY,GAAG,CAAC;;IAG9F,IAAIlB,SAAS,EAAE;MACXA,SAAS,CAACO,KAAK,CAAC;;GAEvB;EAED,oBAAOd,4CAAcQ,UAAU;IAAEI,SAAS,EAAEH,UAAU;iBAAY,UAAU;IAACF,SAAS,EAAEM,aAAa;IAAEX,GAAG,EAAEA;KAAO;AACvH,CAAC;;;;"}

package/dist/esm/packages/taco/src/index.js

@@ -9,7 +9,7 @@ export { Accordion } from './components/Accordion/Accordion.js';
 export { VisuallyHidden } from './components/VisuallyHidden/VisuallyHidden.js';
 export { Badge } from './components/Badge/Badge.js';
 export { useMergedRef } from './hooks/useMergedRef.js';
-export { createShortcutKeyDownHandler, isEventTriggeredOnInteractiveElement, isMacOs, shouldTriggerShortcut } from './utils/keyboard.js';
+export { createShortcutKeyDownHandler, isEventTriggeredOnInteractiveElement, isMacOs, isPressingMetaKey, shouldTriggerShortcut } from './utils/keyboard.js';
 export { Tooltip } from './components/Tooltip/Tooltip.js';
 export { Base, IconButton } from './components/IconButton/IconButton.js';
 export { LocalizationContext, LocalizationProvider, defaultLocalisationTexts, defaultLocalizationContext, useLocalization } from './components/Provider/Localization.js';

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

@@ -2,6 +2,9 @@ function isEventTriggeredOnInteractiveElement(eventTarget) {
   const element = eventTarget;
   return ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT'].includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
 }
+function isPressingMetaKey(event) {
+  return isMacOs() ? event.metaKey : event.ctrlKey;
+}
 function shouldTriggerShortcut(event, key) {
   const keyOptions = typeof key === 'string' ? {
     key,
@@ -18,7 +21,7 @@ function shouldTriggerShortcut(event, key) {
 }
 function createShortcutKeyDownHandler(key, handler, stopPropagation = true) {
   return function (event) {
-    if (event.target !== event.currentTarget && isEventTriggeredOnInteractiveElement(event.target)) {
+    if (event.target !== event.currentTarget && isEventTriggeredOnInteractiveElement(event.target) && !isPressingMetaKey(event)) {
       return;
     }
     const condition = shouldTriggerShortcut(event, key);
@@ -39,5 +42,5 @@ const isMacOs = () => {
   return (_window = window) === null || _window === void 0 ? void 0 : _window.navigator.userAgent.includes('Mac');
 };
 
-export { createShortcutKeyDownHandler, isEventTriggeredOnInteractiveElement, isMacOs, shouldTriggerShortcut };
+export { createShortcutKeyDownHandler, isEventTriggeredOnInteractiveElement, isMacOs, isPressingMetaKey, shouldTriggerShortcut };
 //# sourceMappingURL=keyboard.js.map

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 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;;;;"}
+{"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 isPressingMetaKey<T = Element>(event: KeyboardEvent | React.KeyboardEvent<T>) {\n    return isMacOs() ? event.metaKey : event.ctrlKey;\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 (\n            event.target !== event.currentTarget &&\n            isEventTriggeredOnInteractiveElement(event.target as HTMLElement) &&\n            !isPressingMetaKey(event)\n        ) {\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","isPressingMetaKey","event","isMacOs","metaKey","ctrlKey","shouldTriggerShortcut","key","keyOptions","meta","shift","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,iBAAiBA,CAAcC,KAA6C;EACxF,OAAOC,OAAO,EAAE,GAAGD,KAAK,CAACE,OAAO,GAAGF,KAAK,CAACG,OAAO;AACpD;SAEgBC,qBAAqBA,CACjCJ,KAA6C,EAC7CK,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,KAAKN,OAAO,EAAE,GAAG,CAACD,KAAK,CAACE,OAAO,GAAG,CAACF,KAAK,CAACG,OAAO,CAAC,IAChE,CAACG,UAAU,CAACC,IAAI,KAAKN,OAAO,EAAE,GAAGD,KAAK,CAACE,OAAO,GAAGF,KAAK,CAACG,OAAO,CAAE,EACnE;IACE,OAAO,KAAK;;EAGhB,IAAKG,UAAU,CAACE,KAAK,IAAI,CAACR,KAAK,CAACS,QAAQ,IAAMH,UAAU,CAACE,KAAK,KAAK,KAAK,IAAIR,KAAK,CAACS,QAAS,EAAE;IACzF,OAAO,KAAK;;EAGhB,OAAOT,KAAK,CAACK,GAAG,CAACK,WAAW,EAAE,KAAKJ,UAAU,CAACD,GAAG,CAACK,WAAW,EAAE;AACnE;SAEgBC,4BAA4BA,CACxCN,GAAmC,EACnCO,OAAgE,EAChEC,eAAe,GAAG,IAAI;EAEtB,OAAO,UAAUb,KAA6C;IAC1D,IACIA,KAAK,CAACc,MAAM,KAAKd,KAAK,CAACe,aAAa,IACpCxB,oCAAoC,CAACS,KAAK,CAACc,MAAqB,CAAC,IACjE,CAACf,iBAAiB,CAACC,KAAK,CAAC,EAC3B;MACE;;IAGJ,MAAMgB,SAAS,GAAGZ,qBAAqB,CAACJ,KAAK,EAAEK,GAAG,CAAC;IAEnD,IAAIW,SAAS,EAAE;MACX,IAAIH,eAAe,EAAE;QAAA,IAAAI,qBAAA;;QAEjBjB,KAAK,CAACa,eAAe,EAAE;;QAEtB,CAAAI,qBAAA,GAAAjB,KAAuB,CAACkB,wBAAwB,cAAAD,qBAAA,uBAAhDA,qBAAA,CAAAE,IAAA,CAAAnB,MAAoD;;MAGzDY,OAAO,CAACZ,KAAK,CAAC;;GAErB;AACL;MAEaC,OAAO,GAAGA;EAAA,IAAAmB,OAAA;EAAA,QAAAA,OAAA,GAAMC,MAAM,cAAAD,OAAA,uBAANA,OAAA,CAAQE,SAAS,CAACC,SAAS,CAAC7B,QAAQ,CAAC,KAAK,CAAC;AAAA;;;;"}

package/dist/taco.cjs.development.js

@@ -4018,6 +4018,9 @@ function isEventTriggeredOnInteractiveElement(eventTarget) {
   const element = eventTarget;
   return ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT'].includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
 }
+function isPressingMetaKey(event) {
+  return isMacOs() ? event.metaKey : event.ctrlKey;
+}
 function shouldTriggerShortcut(event, key) {
   const keyOptions = typeof key === 'string' ? {
     key,
@@ -4034,7 +4037,7 @@ function shouldTriggerShortcut(event, key) {
 }
 function createShortcutKeyDownHandler(key, handler, stopPropagation = true) {
   return function (event) {
-    if (event.target !== event.currentTarget && isEventTriggeredOnInteractiveElement(event.target)) {
+    if (event.target !== event.currentTarget && isEventTriggeredOnInteractiveElement(event.target) && !isPressingMetaKey(event)) {
       return;
     }
     const condition = shouldTriggerShortcut(event, key);
@@ -4879,7 +4882,7 @@ const getInputClasses = props => {
   const disabled = props.disabled || !!props['aria-disabled'];
   const readOnly = props.readOnly || !!props['aria-readonly'];
   const invalid = props.invalid || !!props['aria-invalid'];
-  return cn('peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus-visible:yt-focus', {
+  return cn('peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full [text-align:inherit] text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus-visible:yt-focus', {
     'bg-white': !props.highlighted && !readOnly,
     // default
     'border-grey-300 enabled:hover:border-grey-500 disabled:border-grey-200': !invalid,
@@ -4963,7 +4966,7 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/React.forwardRef(function In
   const internalRef = useMergedRef(ref);
   const handleKeyDown = event => {
     // prevent any external keyboard shortcuts from executing while typing single characters in input
-    if (event.key.length === 1) {
+    if (event.key.length === 1 && !isPressingMetaKey(event)) {
       event.stopPropagation();
     }
     // home and end keys only navigate to the start/end of input value if the input container does not scroll
@@ -4989,13 +4992,22 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/React.forwardRef(function In
     'pl-8': !!prefix,
     'pr-8': !!postfix
   }, attributes.className);
+  const typeAttributes = {
+    type
+  };
+  // https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
+  if (type === 'number') {
+    typeAttributes.type = 'text';
+    typeAttributes.inputMode = 'numeric';
+    typeAttributes.pattern = '[0-9]*';
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: "relative inline-flex w-full",
     "data-taco": "input-container",
     style: {
       opacity: 0.999
     }
-  }, /*#__PURE__*/React.createElement("input", Object.assign({}, attributes, {
+  }, /*#__PURE__*/React.createElement("input", Object.assign({}, attributes, typeAttributes, {
     className: className,
     "data-taco": "input",
     onKeyDown: handleKeyDown,
@@ -5005,8 +5017,7 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/React.forwardRef(function In
     style: {
       paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,
       paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined
-    },
-    type: type
+    }
   })), prefix ? /*#__PURE__*/React.createElement(Affix, {
     type: "prefix",
     children: prefix,
@@ -14930,7 +14941,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
   // so we manually override it to ensure _our_ desired behaviour remains intact
   const handleKeyDown = event => {
     // prevent any external keyboard shortcuts from executing while typing single characters in textarea
-    if (event.key.length === 1) {
+    if (event.key.length === 1 && !isPressingMetaKey(event)) {
       event.stopPropagation();
     }
     if (event.key === 'Home' || event.key === 'End') {
@@ -15851,7 +15862,7 @@ const MemoedGroup = /*#__PURE__*/React__default.memo(function MemoedGroup(props)
     meta,
     table
   } = props;
-  const containerClassName = cn('px-2 z-10 hover:z-20', colSpan > 1 ? `col-span-${colSpan}` : '', {
+  const containerClassName = cn('px-2 z-10 hover:z-20', {
     sticky: !isPrinting
   });
   const innerClassName = cn('font-bold box-content group/column relative', 'px-[var(--table3-cell-padding-x)]', {
@@ -15864,6 +15875,9 @@ const MemoedGroup = /*#__PURE__*/React__default.memo(function MemoedGroup(props)
   }
   return /*#__PURE__*/React__default.createElement("div", {
     className: containerClassName,
+    style: colSpan > 1 ? {
+      gridColumn: `span ${colSpan} / span ${colSpan}`
+    } : undefined,
     "data-taco": "table3-column-group",
     "data-align": align,
     role: "columnheader"
@@ -20061,6 +20075,7 @@ exports.icons = icons;
 exports.insertChildTableRow = insertChildTableRow;
 exports.isEventTriggeredOnInteractiveElement = isEventTriggeredOnInteractiveElement;
 exports.isMacOs = isMacOs;
+exports.isPressingMetaKey = isPressingMetaKey;
 exports.isWeakEqual = isWeakEqual;
 exports.mergeRefs = mergeRefs;
 exports.parseFromCustomString = parseFromCustomString;