@economic/taco 2.20.3 → 2.21.1

package/dist/components/Report/components/Body/Body.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
 declare type BodyProps<TType = unknown> = React.HTMLAttributes<HTMLTableSectionElement> & {
+    enableArrowKeyFocusing?: boolean;
     length: number;
     table: ReactTable<TType>;
 };

package/dist/components/Report/components/Body/util.d.ts

@@ -0,0 +1,6 @@
+export declare function useAugmentedFocusManager(): {
+    focusPrevious: () => import("@react-types/shared").FocusableElement;
+    focusNext: () => import("@react-types/shared").FocusableElement;
+    focusFirst: () => import("@react-types/shared").FocusableElement;
+    focusLast: () => import("@react-types/shared").FocusableElement;
+};

package/dist/components/Report/components/Cell/Cell.d.ts

@@ -1,3 +1,9 @@
 /// <reference types="react" />
 import { Cell as ReactTableCell } from '@tanstack/react-table';
-export declare function Cell<TType = unknown>(cell: ReactTableCell<TType, unknown>, index: number): JSX.Element | null;
+declare type CellProps<TType = unknown> = {
+    cell: ReactTableCell<TType, unknown>;
+    index: number;
+    rowIndex: number;
+};
+export declare function Cell<TType = unknown>(props: CellProps<TType>): JSX.Element | null;
+export {};

package/dist/components/Report/components/Cell/DisplayCell.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { Cell as ReactTableCell } from '@tanstack/react-table';
 export declare type DisplayCellProps<TType = unknown> = {
-    index: number;
     cell: ReactTableCell<TType, unknown>;
+    cellRef: React.RefObject<HTMLTableCellElement>;
+    isHighlighted?: true | 'current';
 };
 export declare function DisplayCell<TType = unknown>(props: DisplayCellProps<TType>): JSX.Element;

package/dist/components/Report/components/Cell/GroupedCell.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { Cell as ReactTableCell } from '@tanstack/react-table';
 export declare type GroupedCellProps<TType = unknown> = {
-    index: number;
     cell: ReactTableCell<TType, unknown>;
+    cellRef: React.RefObject<HTMLTableCellElement>;
+    isHighlighted?: true | 'current';
 };
 export declare function GroupedCell<TType = unknown>(props: GroupedCellProps<TType>): JSX.Element;

package/dist/components/Report/components/Row/Row.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 import { Table as ReactTable, Row as ReactTableRow } from '@tanstack/react-table';
 export declare type RowProps<TType = unknown> = React.HTMLAttributes<HTMLTableRowElement> & {
     index: number;
+    measureRow: (size: number, expansionHeight?: number) => void;
     row: ReactTableRow<TType>;
     table: ReactTable<TType>;
 };
-export declare function Row<TType = unknown>(row: ReactTableRow<TType>, index: number, table: ReactTable<TType>, measureRow: (size: number, expansionHeight?: number) => void): JSX.Element;
+export declare function Row<TType = unknown>(props: RowProps<TType>): JSX.Element;

package/dist/components/Report/components/Row/RowContext.d.ts

@@ -5,5 +5,4 @@ declare type RowContextValue = {
     rowIndex: number;
 };
 export declare const RowContext: React.Context<RowContextValue>;
-export declare const useRowContext: () => RowContextValue;
 export {};

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":"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"}
+{"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":";;;;;;;;AAiBA,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,IAAI,CAACC,iBAAiB,CAACH,KAAK,CAAC,EAAE;MACrDA,KAAK,CAACI,eAAe,EAAE;;;;;;IAO3B,IAAInB,2BAA2B,CAACoB,QAAQ,CAACV,IAAI,CAAC,EAAE;MAC5C,IAAI,CAACK,KAAK,CAACM,QAAQ,KAAKN,KAAK,CAACC,GAAG,KAAK,MAAM,IAAID,KAAK,CAACC,GAAG,KAAK,KAAK,CAAC,EAAE;QAClED,KAAK,CAACO,cAAc,EAAE;QACtB,MAAMC,QAAQ,GAAGR,KAAK,CAACC,GAAG,KAAK,KAAK,GAAGD,KAAK,CAACS,aAAa,CAACC,KAAK,CAACR,MAAM,GAAG,CAAC;QAC3EF,KAAK,CAACS,aAAa,CAACE,iBAAiB,CAACH,QAAQ,EAAEA,QAAQ,CAAC;;;IAIjE,IAAI,OAAOhB,SAAS,KAAK,UAAU,EAAE;MACjCA,SAAS,CAACQ,KAAK,CAAC;;GAEvB;EAED,MAAMY,SAAS,GAAGzB,MAAY,CAAiB,IAAI,CAAC;EACpD,MAAM0B,UAAU,GAAGC,6BAA6B,CAACF,SAAS,CAAC;EAC3D,MAAMG,UAAU,GAAG5B,MAAY,CAAiB,IAAI,CAAC;EACrD,MAAM6B,WAAW,GAAGF,6BAA6B,CAACC,UAAU,EAAE,CAACtB,OAAO,CAAC,CAAC;EAExE,MAAMwB,SAAS,GAAGC,EAAE,CAChBC,eAAe,CAAC/B,KAAK,CAAC,EACtB;IACI,MAAM,EAAE,CAAC,CAACM,MAAM;IAChB,MAAM,EAAE,CAAC,CAACD;GACb,EACDG,UAAU,CAACqB,SAAS,CACvB;EAED,MAAMG,cAAc,GAAyD;IACzEzB;GACH;;EAGD,IAAIA,IAAI,KAAK,QAAQ,EAAE;IACnByB,cAAc,CAACzB,IAAI,GAAG,MAAM;IAC5ByB,cAAc,CAACC,SAAS,GAAG,SAAS;IACpCD,cAAc,CAACE,OAAO,GAAG,QAAQ;;EAGrC,oBACInC;IAAK8B,SAAS,EAAC,6BAA6B;iBAAW,iBAAiB;IAACM,KAAK,EAAE;MAAEC,OAAO,EAAE;;kBACvFrC,yCACQS,UAAU,EACVwB,cAAc;IAClBH,SAAS,EAAEA,SAAS;iBACV,OAAO;IACjBzB,SAAS,EAAEO,aAAa;oBACVR,OAAO;wBACHD,WAAW;IAC7BD,GAAG,EAAEQ,WAAW;IAChB0B,KAAK,EAAE;MACHE,WAAW,EAAEZ,UAAU,MAAMA,UAAU,CAACa,KAAK,GAAG,KAAK,GAAGC,SAAS;MACjEC,YAAY,EAAEZ,WAAW,MAAMA,WAAW,CAACU,KAAK,GAAG,KAAK,GAAGC;;KAEjE,EACDjC,MAAM,gBAAGP,cAAC0C,KAAK;IAAClC,IAAI,EAAC,QAAQ;IAACmC,QAAQ,EAAEpC,MAAM;IAAEqC,QAAQ,EAAEnC,UAAU,CAACmC,QAAQ;IAAE1C,GAAG,EAAEuB;IAAa,GAAG,IAAI,EACxGnB,OAAO,gBAAGN,cAAC0C,KAAK;IAAClC,IAAI,EAAC,SAAS;IAACmC,QAAQ,EAAErC,OAAO;IAAEsC,QAAQ,EAAEnC,UAAU,CAACmC,QAAQ;IAAE1C,GAAG,EAAE0B;IAAc,GAAG,IAAI,CAC3G;AAEd,CAAC,CAAC;AAOF,MAAMc,KAAK,gBAAG1C,IAAU,eACpBA,UAAgB,CAAC,SAAS0C,KAAKA,CAACzC,KAAiB,EAAEC,GAA8B;EAC7E,MAAM;IAAEyC,QAAQ;IAAEC,QAAQ;IAAEpC;GAAM,GAAGP,KAAK;EAE1C,oBACID;IACI8B,SAAS,EAAEC,EAAE,CACT,mEAAmE;;IAEnE,yDAAyD,EACzD;MACI,eAAe,EAAEa,QAAQ;MACzB,eAAe,EAAE,CAACA,QAAQ;MAC1B,0BAA0B,EAAEpC,IAAI,KAAK,QAAQ;MAC7C,2BAA2B,EAAEA,IAAI,KAAK;KACzC,CACJ;uBACgBA,IAAI;IACrBN,GAAG,EAAEA;KACJyC,QAAQ,CACP;AAEd,CAAC,CAAC,CACL;MASYE,KAAK,gBAAG7C,UAAgB,CAAC,SAAS8C,WAAWA,CAAC7C,KAAiB,EAAEC,GAAgC;;EAC1G,MAAM;IAAE6C,MAAM;IAAEC,IAAI;IAAE,GAAGvC;GAAY,GAAGR,KAAK;EAE7C,IAAIK,OAAO;EAEX,IAAIyC,MAAM,EAAE;IACR,MAAMH,QAAQ,GAAGG,MAAM,CAAC9C,KAAK,CAAC2C,QAAQ,IAAInC,UAAU,CAACmC,QAAQ;IAC7D,MAAMK,eAAe,GAAGlB,EAAE,CACtB,8GAA8G,EAC9GmB,qBAAqB,CAACzC,UAAU,CAACL,OAAO,EAAEwC,QAAQ,CAAC,EACnDG,MAAM,CAAC9C,KAAK,CAAC6B,SAAS,CACzB;IACDxB,OAAO,gBAAGN,YAAkB,CAAC+C,MAAM,EAAE;MACjCjB,SAAS,EAAEmB,eAAe;MAC1BL;KACH,CAAC;GACL,MAAM,IAAII,IAAI,EAAE;IACb1C,OAAO,GAAG,OAAO0C,IAAI,KAAK,QAAQ,gBAAGhD,cAACmD,IAAI;MAACC,IAAI,EAAEJ;MAAQ,GAAGA,IAAI;;EAGpE,oBAAOhD,cAACD,8BAA8B,oBAAKU,UAAU;IAAEH,OAAO,GAAA+C,mBAAA,GAAE5C,UAAU,CAACH,OAAO,cAAA+C,mBAAA,cAAAA,mBAAA,GAAI/C,OAAO;IAAEJ,GAAG,EAAEA;KAAO;AAC/G,CAAC;;;;"}

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/Table3.js

@@ -192,7 +192,9 @@ const Table = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     role: "rowgroup",
     ref: bodyRef
   }, renderBody())), /*#__PURE__*/React__default.createElement("div", {
-    className: "border-grey-300 col-span-full translate-y-px border-t"
+    className: cn('border-grey-300 col-span-full border-t', {
+      'translate-y-px': tableMeta.enableFooter
+    })
   }), tableMeta.enableFooter ? ( /*#__PURE__*/React__default.createElement("div", {
     className: "group/footer contents",
     "data-taco": "table2-footer",
@@ -210,7 +212,7 @@ const Table = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     length: length,
     table: table
   })) : null)) : null)) : ( /*#__PURE__*/React__default.createElement("div", {
-    className: "col-span-full min-h-[theme(spacing.8)]"
+    className: "col-span-full box-border min-h-[theme(spacing.8)]"
   }, EmptyState ? /*#__PURE__*/React__default.createElement(EmptyState, null) : null))));
 });
 const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { flexRender, TableMeta } from '@tanstack/react-table';\nimport { FocusScope } from '@react-aria/focus';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useCssGrid } from './hooks/useCssGrid';\nimport { useTable } from './hooks/useTable';\nimport { useTableRenderStrategy } from './strategies';\nimport { Table3ColumnProps, Table3GroupProps, Table3Props, Table3Ref } from './types';\nimport { Toolbar } from './components/toolbar/Toolbar';\nimport { useColumnFreezingStyle } from './hooks/features/useColumnFreezing';\nimport { useTableRefInstanceSetup } from './hooks/useTableRefInstanceSetup';\nimport { Summary } from './components/columns/footer/Summary';\nimport { useCssVars } from './hooks/useCssVars';\nimport './style.css';\nimport { useHeaderOffsetStyle } from './hooks/features/useHeaderOffsetStyle';\nimport { ErrorAlert } from './components/alert/ErrorAlert';\nimport { fixedForwardRef, FontSizes } from '../../types';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n    return null;\n}\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: Table3GroupProps) {\n    return null;\n}\nGroup.displayName = 'Table3Group';\n\nconst Table = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const {\n        emptyState: EmptyState,\n        customSettings,\n        toolbarLeft,\n        toolbarRight,\n        defaultCurrentRowIndex: defaultRowActiveIndex,\n    } = props;\n    const internalRef = useMergedRef<Table3Ref>(ref);\n\n    const { table, length } = useTable<TType>(props, internalRef);\n    useTableRefInstanceSetup(table, internalRef);\n\n    React.useEffect(() => {\n        if (props.autoFocus) {\n            internalRef.current?.focus();\n        }\n    }, []);\n\n    const { renderBody, scrollToIndex } = useTableRenderStrategy<TType>(props, table, internalRef);\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const state = table.getState();\n\n    const bodyRef = React.useRef<HTMLDivElement | null>(null);\n\n    React.useEffect(() => {\n        // On a very first render, the tanstack table rendered without any rows,\n        // so we delaying default row scrolling logic with using of requestAnimation frame\n        const animationFrameId = requestAnimationFrame(() => {\n            if (defaultRowActiveIndex) {\n                scrollToIndex(defaultRowActiveIndex, { align: 'center' });\n            }\n        });\n\n        return () => {\n            cancelAnimationFrame(animationFrameId);\n        };\n    }, []);\n\n    React.useEffect(\n        () => {\n            const handleKeyDown = (event: KeyboardEvent) => {\n                const target = event.target as HTMLElement;\n                const dialog = target.closest('[role=\"dialog\"]');\n                // Select2 also have combobox role to align with W3C guidelines\n                const eventOriginatedFromCombobox = !!target.closest('[role=\"combobox\"]:not([data-taco=\"Select2\"])');\n\n                // Don't trigger global shortcuts on the table if event originated from a combobox or if table is\n                // outside the dialog\n                if (\n                    eventOriginatedFromCombobox ||\n                    (dialog && !dialog?.contains(internalRef.current)) ||\n                    tableMeta.shortcutsState.isPaused\n                ) {\n                    return;\n                }\n\n                const rows = table.getRowModel().rows;\n\n                tableMeta.rowActive.handleKeyDown(\n                    event,\n                    rows.length,\n                    scrollToIndex,\n                    tableMeta.editing.isEditing ? undefined : internalRef\n                );\n                if (tableMeta.rowActive.rowActiveIndex !== undefined) {\n                    tableMeta.rowClick.handleKeyDown(event, rows[tableMeta.rowActive.rowActiveIndex]?.original);\n                }\n                tableMeta.rowSelection.handleKeyDown(event, table);\n                tableMeta.editing.handleKeyDown(event);\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => {\n                document.removeEventListener('keydown', handleKeyDown);\n            };\n        },\n        // See https://github.com/e-conomic/taco/blob/dev/packages/taco/src/components/Table3/strategies/virtualised.tsx#L143\n        // scrollToIndex function changes when row count changes, so it is important to update handlers with new\n        // scrollToIndex function.\n        [scrollToIndex, tableMeta.editing.isEditing, internalRef.current, tableMeta.rowActive.rowActiveIndex]\n    );\n\n    const handleBlur = tableMeta.editing.isEnabled\n        ? (event: React.FocusEvent) => {\n              tableMeta.editing.handleBlur(event);\n          }\n        : undefined;\n\n    const handleFocus =\n        tableMeta.rowActive.rowActiveIndex === undefined\n            ? (event: React.FocusEvent) => {\n                  tableMeta.rowActive.handleFocus(event, table.getRowModel().rows.length, scrollToIndex);\n              }\n            : undefined;\n\n    const handleScroll = async (event: React.MouseEvent<HTMLDivElement>) => {\n        tableMeta.columnFreezing.handleScroll(event);\n    };\n\n    const className = cn(\n        'border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px] focus-visible:outline-none',\n        '[&[data-resizing=\"true\"]]:select-none',\n        {\n            'text-xs': tableMeta.fontSize.size === FontSizes.small,\n            'text-sm': tableMeta.fontSize.size === FontSizes.medium,\n            'text-base': tableMeta.fontSize.size === FontSizes.large,\n        }\n    );\n\n    // Print tables have \"_print\" as the postfix for the table id, so we can use the it to determine\n    // if the table is a print table or not.\n    const { style: cssGridStyle } = useCssGrid<TType>(\n        table,\n        tableMeta.printing.isPrinting,\n        tableMeta.rowActions.actionsForRowLength,\n        tableMeta.fontSize.size\n    );\n    const { style: cssVars } = useCssVars(tableMeta.rowHeight.height, tableMeta.fontSize.size);\n\n    const style = {\n        ...cssVars,\n        ...cssGridStyle,\n        // create a new stacking context so our internal z-indexes don't effect external components\n        // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n        opacity: 0.999,\n    };\n\n    const columnFreezingStyle = useColumnFreezingStyle(props.id, table);\n    const headerOffsetStyle = useHeaderOffsetStyle(props.id, table);\n    const isServerLoadingAndNotReady = tableMeta.isUsingServer && props.length === undefined;\n\n    return (\n        <>\n            {columnFreezingStyle ? <style data-taco=\"table3-column-freezing-styles\">{columnFreezingStyle}</style> : null}\n            {headerOffsetStyle && !tableMeta.printing.isPrinting ? (\n                <style data-taco=\"table3-column-header-offset-styles\">{headerOffsetStyle}</style>\n            ) : null}\n            <Toolbar\n                table={table}\n                tableProps={props}\n                total={length}\n                left={toolbarLeft}\n                right={toolbarRight}\n                customSettings={customSettings}\n                scrollToIndex={scrollToIndex}\n            />\n            <ErrorAlert table={table} tableRef={internalRef} scrollToIndex={scrollToIndex} rowIdentifier={props.rowIdentifier} />\n            <div\n                className={className}\n                id={props.id}\n                data-font-size={tableMeta.fontSize.size}\n                data-editing={tableMeta.editing.isEditing}\n                data-horizontally-scrolled={tableMeta.columnFreezing.horizontallyScrolled}\n                data-pause-hover={tableMeta?.rowActive.isHoverStatePaused}\n                data-resizing={!!state.columnSizingInfo.isResizingColumn}\n                data-taco=\"table2\"\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                onScroll={handleScroll}\n                ref={internalRef}\n                role=\"table\"\n                style={style}\n                tabIndex={-1}>\n                {isServerLoadingAndNotReady ? null : (\n                    <div className=\"group/header contents\" data-taco=\"table2-header\" role=\"rowgroup\">\n                        {table.getHeaderGroups().map(headerGroup => (\n                            <div className=\"contents\" key={headerGroup.id} role=\"row\">\n                                {headerGroup.headers.map((header, index) => {\n                                    // We need to render separator if column is not the last in array, if index is not equal to freeze column index,\n                                    // if next element is not placeholder and if column itself is not placeholder.\n                                    const hasSeparator =\n                                        index !== tableMeta.columnFreezing.frozenColumnIndex &&\n                                        index !== headerGroup.headers.length - 1 &&\n                                        (!headerGroup.headers[index + 1]?.isPlaceholder || !header.isPlaceholder);\n                                    return (\n                                        <React.Fragment key={header.id}>\n                                            {flexRender(header.column.columnDef.header, {\n                                                ...header.getContext(),\n                                                scrollToIndex,\n                                                hasSeparator,\n                                            })}\n                                        </React.Fragment>\n                                    );\n                                })}\n                            </div>\n                        ))}\n                    </div>\n                )}\n                {table.getRowModel().rows.length ? (\n                    <>\n                        <FocusScope autoFocus={tableMeta.editing.isEditing}>\n                            <div className=\"group/body contents\" data-taco=\"table2-body\" role=\"rowgroup\" ref={bodyRef}>\n                                {renderBody()}\n                            </div>\n                        </FocusScope>\n                        {/* This div makes sure that there is always a free space between the rows and footer when\n                        table height exceeds the cumulative height of all rows. See useCSSGrid.ts */}\n                        {/* By vertically translating the div a pixel down, we hide the div border below footer so that\n                        the footer border doesn't appear an extra pixel thick */}\n                        <div className=\"border-grey-300 col-span-full translate-y-px border-t\" />\n                        {tableMeta.enableFooter ? (\n                            <div className=\"group/footer contents\" data-taco=\"table2-footer\" role=\"rowgroup\">\n                                {\n                                    // Render the footer cell only for individual columns, excluding column groups.\n                                    table\n                                        .getFooterGroups()\n                                        .slice(0, 1)\n                                        .map(footerGroup => (\n                                            <div className=\"contents\" key={footerGroup.id} role=\"row\">\n                                                {footerGroup.headers.map(footer => (\n                                                    <React.Fragment key={footer.id}>\n                                                        {flexRender(footer.column.columnDef.footer, footer.getContext())}\n                                                    </React.Fragment>\n                                                ))}\n                                            </div>\n                                        ))\n                                }\n                                {length ? (\n                                    <Summary currentLength={table.getRowModel().rows.length} length={length} table={table} />\n                                ) : null}\n                            </div>\n                        ) : null}\n                    </>\n                ) : (\n                    <div className=\"col-span-full min-h-[theme(spacing.8)]\">{EmptyState ? <EmptyState /> : null}</div>\n                )}\n            </div>\n        </>\n    );\n});\n\ntype Table3WithStatics = (<TType = unknown>(props: Table3Props<TType> & React.RefAttributes<Table3Ref>) => JSX.Element) & {\n    Column: typeof Column;\n    Group: typeof Group;\n};\n\nexport const Table3 = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const stringifiedChildren = String(props.children);\n    // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n    // this is cheaper from a complexity perspective, and probably performance wise as well\n    const key = React.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);\n    return <Table<TType> {...props} key={key} ref={ref} />;\n}) as Table3WithStatics;\nTable3.Column = Column;\nTable3.Group = Group;\n\n// hooks\nexport { useTable3DataLoader } from './hooks/useTableDataLoader';\n\n// types\nexport type {\n    useTable3DataFetcher,\n    useTable3DataOptions,\n    useTable3DataFetcherValues as useTableDataValues,\n} from './hooks/useTableDataLoader';\n\nexport type {\n    Table3Ref,\n    Table3Props,\n    Table3Preset,\n    Table3Settings,\n    Table3SettingsHandler,\n    Table3RowHeight,\n    Table3FilterComparator,\n    Table3FilterHandler,\n    Table3LoadPageHandler,\n    Table3LoadAllHandler,\n    Table3RowGotoHandler,\n    Table3SortHandler,\n    Table3Shortcuts,\n    Table3ShortcutHandlerFn,\n    Table3ShortcutHandlerObject,\n    Table3SortDirection,\n    Table3SortFn,\n    Table3RowActionRenderer,\n    Table3RowSelectionHandler,\n    Table3RowExpansionRenderer,\n    Table3RowDropHandler,\n    Table3RowDragHandler,\n    Table3RowClickHandler,\n    Table3ColumnProps,\n    Table3ColumnAlignment,\n    Table3ColumnDataType,\n    Table3ColumnHeaderMenu,\n    Table3ColumnClassNameHandler,\n    Table3ColumnFooterRenderer,\n    Table3ColumnRenderer,\n    Table3ColumnControlRenderer,\n    Table3ColumnControlProps,\n} from './types';\n"],"names":["Column","_","displayName","Group","Table","fixedForwardRef","Table3","props","ref","emptyState","EmptyState","customSettings","toolbarLeft","toolbarRight","defaultCurrentRowIndex","defaultRowActiveIndex","internalRef","useMergedRef","table","length","useTable","useTableRefInstanceSetup","React","useEffect","autoFocus","_internalRef$current","current","focus","renderBody","scrollToIndex","useTableRenderStrategy","tableMeta","options","meta","state","getState","bodyRef","useRef","animationFrameId","requestAnimationFrame","align","cancelAnimationFrame","handleKeyDown","event","target","dialog","closest","eventOriginatedFromCombobox","contains","shortcutsState","isPaused","rows","getRowModel","rowActive","editing","isEditing","undefined","rowActiveIndex","_rows$tableMeta$rowAc","rowClick","original","rowSelection","document","addEventListener","removeEventListener","handleBlur","isEnabled","handleFocus","handleScroll","columnFreezing","Promise","resolve","e","reject","className","cn","fontSize","size","FontSizes","small","medium","large","style","cssGridStyle","useCssGrid","printing","isPrinting","rowActions","actionsForRowLength","cssVars","useCssVars","rowHeight","height","opacity","columnFreezingStyle","useColumnFreezingStyle","id","headerOffsetStyle","useHeaderOffsetStyle","isServerLoadingAndNotReady","isUsingServer","Toolbar","tableProps","total","left","right","ErrorAlert","tableRef","rowIdentifier","horizontallyScrolled","isHoverStatePaused","columnSizingInfo","isResizingColumn","onBlur","onFocus","onScroll","role","tabIndex","getHeaderGroups","map","headerGroup","key","headers","header","index","hasSeparator","frozenColumnIndex","_headerGroup$headers","isPlaceholder","Fragment","flexRender","column","columnDef","getContext","FocusScope","enableFooter","getFooterGroups","slice","footerGroup","footer","Summary","currentLength","stringifiedChildren","String","children","useMemo"],"mappings":"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"}
+{"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { flexRender, TableMeta } from '@tanstack/react-table';\nimport { FocusScope } from '@react-aria/focus';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useCssGrid } from './hooks/useCssGrid';\nimport { useTable } from './hooks/useTable';\nimport { useTableRenderStrategy } from './strategies';\nimport { Table3ColumnProps, Table3GroupProps, Table3Props, Table3Ref } from './types';\nimport { Toolbar } from './components/toolbar/Toolbar';\nimport { useColumnFreezingStyle } from './hooks/features/useColumnFreezing';\nimport { useTableRefInstanceSetup } from './hooks/useTableRefInstanceSetup';\nimport { Summary } from './components/columns/footer/Summary';\nimport { useCssVars } from './hooks/useCssVars';\nimport './style.css';\nimport { useHeaderOffsetStyle } from './hooks/features/useHeaderOffsetStyle';\nimport { ErrorAlert } from './components/alert/ErrorAlert';\nimport { fixedForwardRef, FontSizes } from '../../types';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n    return null;\n}\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: Table3GroupProps) {\n    return null;\n}\nGroup.displayName = 'Table3Group';\n\nconst Table = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const {\n        emptyState: EmptyState,\n        customSettings,\n        toolbarLeft,\n        toolbarRight,\n        defaultCurrentRowIndex: defaultRowActiveIndex,\n    } = props;\n    const internalRef = useMergedRef<Table3Ref>(ref);\n\n    const { table, length } = useTable<TType>(props, internalRef);\n    useTableRefInstanceSetup(table, internalRef);\n\n    React.useEffect(() => {\n        if (props.autoFocus) {\n            internalRef.current?.focus();\n        }\n    }, []);\n\n    const { renderBody, scrollToIndex } = useTableRenderStrategy<TType>(props, table, internalRef);\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const state = table.getState();\n\n    const bodyRef = React.useRef<HTMLDivElement | null>(null);\n\n    React.useEffect(() => {\n        // On a very first render, the tanstack table rendered without any rows,\n        // so we delaying default row scrolling logic with using of requestAnimation frame\n        const animationFrameId = requestAnimationFrame(() => {\n            if (defaultRowActiveIndex) {\n                scrollToIndex(defaultRowActiveIndex, { align: 'center' });\n            }\n        });\n\n        return () => {\n            cancelAnimationFrame(animationFrameId);\n        };\n    }, []);\n\n    React.useEffect(\n        () => {\n            const handleKeyDown = (event: KeyboardEvent) => {\n                const target = event.target as HTMLElement;\n                const dialog = target.closest('[role=\"dialog\"]');\n                // Select2 also have combobox role to align with W3C guidelines\n                const eventOriginatedFromCombobox = !!target.closest('[role=\"combobox\"]:not([data-taco=\"Select2\"])');\n\n                // Don't trigger global shortcuts on the table if event originated from a combobox or if table is\n                // outside the dialog\n                if (\n                    eventOriginatedFromCombobox ||\n                    (dialog && !dialog?.contains(internalRef.current)) ||\n                    tableMeta.shortcutsState.isPaused\n                ) {\n                    return;\n                }\n\n                const rows = table.getRowModel().rows;\n\n                tableMeta.rowActive.handleKeyDown(\n                    event,\n                    rows.length,\n                    scrollToIndex,\n                    tableMeta.editing.isEditing ? undefined : internalRef\n                );\n                if (tableMeta.rowActive.rowActiveIndex !== undefined) {\n                    tableMeta.rowClick.handleKeyDown(event, rows[tableMeta.rowActive.rowActiveIndex]?.original);\n                }\n                tableMeta.rowSelection.handleKeyDown(event, table);\n                tableMeta.editing.handleKeyDown(event);\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => {\n                document.removeEventListener('keydown', handleKeyDown);\n            };\n        },\n        // See https://github.com/e-conomic/taco/blob/dev/packages/taco/src/components/Table3/strategies/virtualised.tsx#L143\n        // scrollToIndex function changes when row count changes, so it is important to update handlers with new\n        // scrollToIndex function.\n        [scrollToIndex, tableMeta.editing.isEditing, internalRef.current, tableMeta.rowActive.rowActiveIndex]\n    );\n\n    const handleBlur = tableMeta.editing.isEnabled\n        ? (event: React.FocusEvent) => {\n              tableMeta.editing.handleBlur(event);\n          }\n        : undefined;\n\n    const handleFocus =\n        tableMeta.rowActive.rowActiveIndex === undefined\n            ? (event: React.FocusEvent) => {\n                  tableMeta.rowActive.handleFocus(event, table.getRowModel().rows.length, scrollToIndex);\n              }\n            : undefined;\n\n    const handleScroll = async (event: React.MouseEvent<HTMLDivElement>) => {\n        tableMeta.columnFreezing.handleScroll(event);\n    };\n\n    const className = cn(\n        'border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px] focus-visible:outline-none',\n        '[&[data-resizing=\"true\"]]:select-none',\n        {\n            'text-xs': tableMeta.fontSize.size === FontSizes.small,\n            'text-sm': tableMeta.fontSize.size === FontSizes.medium,\n            'text-base': tableMeta.fontSize.size === FontSizes.large,\n        }\n    );\n\n    // Print tables have \"_print\" as the postfix for the table id, so we can use the it to determine\n    // if the table is a print table or not.\n    const { style: cssGridStyle } = useCssGrid<TType>(\n        table,\n        tableMeta.printing.isPrinting,\n        tableMeta.rowActions.actionsForRowLength,\n        tableMeta.fontSize.size\n    );\n    const { style: cssVars } = useCssVars(tableMeta.rowHeight.height, tableMeta.fontSize.size);\n\n    const style = {\n        ...cssVars,\n        ...cssGridStyle,\n        // create a new stacking context so our internal z-indexes don't effect external components\n        // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n        opacity: 0.999,\n    };\n\n    const columnFreezingStyle = useColumnFreezingStyle(props.id, table);\n    const headerOffsetStyle = useHeaderOffsetStyle(props.id, table);\n    const isServerLoadingAndNotReady = tableMeta.isUsingServer && props.length === undefined;\n\n    return (\n        <>\n            {columnFreezingStyle ? <style data-taco=\"table3-column-freezing-styles\">{columnFreezingStyle}</style> : null}\n            {headerOffsetStyle && !tableMeta.printing.isPrinting ? (\n                <style data-taco=\"table3-column-header-offset-styles\">{headerOffsetStyle}</style>\n            ) : null}\n            <Toolbar\n                table={table}\n                tableProps={props}\n                total={length}\n                left={toolbarLeft}\n                right={toolbarRight}\n                customSettings={customSettings}\n                scrollToIndex={scrollToIndex}\n            />\n            <ErrorAlert table={table} tableRef={internalRef} scrollToIndex={scrollToIndex} rowIdentifier={props.rowIdentifier} />\n            <div\n                className={className}\n                id={props.id}\n                data-font-size={tableMeta.fontSize.size}\n                data-editing={tableMeta.editing.isEditing}\n                data-horizontally-scrolled={tableMeta.columnFreezing.horizontallyScrolled}\n                data-pause-hover={tableMeta?.rowActive.isHoverStatePaused}\n                data-resizing={!!state.columnSizingInfo.isResizingColumn}\n                data-taco=\"table2\"\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                onScroll={handleScroll}\n                ref={internalRef}\n                role=\"table\"\n                style={style}\n                tabIndex={-1}>\n                {isServerLoadingAndNotReady ? null : (\n                    <div className=\"group/header contents\" data-taco=\"table2-header\" role=\"rowgroup\">\n                        {table.getHeaderGroups().map(headerGroup => (\n                            <div className=\"contents\" key={headerGroup.id} role=\"row\">\n                                {headerGroup.headers.map((header, index) => {\n                                    // We need to render separator if column is not the last in array, if index is not equal to freeze column index,\n                                    // if next element is not placeholder and if column itself is not placeholder.\n                                    const hasSeparator =\n                                        index !== tableMeta.columnFreezing.frozenColumnIndex &&\n                                        index !== headerGroup.headers.length - 1 &&\n                                        (!headerGroup.headers[index + 1]?.isPlaceholder || !header.isPlaceholder);\n                                    return (\n                                        <React.Fragment key={header.id}>\n                                            {flexRender(header.column.columnDef.header, {\n                                                ...header.getContext(),\n                                                scrollToIndex,\n                                                hasSeparator,\n                                            })}\n                                        </React.Fragment>\n                                    );\n                                })}\n                            </div>\n                        ))}\n                    </div>\n                )}\n                {table.getRowModel().rows.length ? (\n                    <>\n                        <FocusScope autoFocus={tableMeta.editing.isEditing}>\n                            <div className=\"group/body contents\" data-taco=\"table2-body\" role=\"rowgroup\" ref={bodyRef}>\n                                {renderBody()}\n                            </div>\n                        </FocusScope>\n                        {/* This div makes sure that there is always a free space between the rows and footer when\n                        table height exceeds the cumulative height of all rows. See useCSSGrid.ts */}\n                        {/* By vertically translating the div a pixel down, we hide the div border below footer so that\n                        the footer border doesn't appear an extra pixel thick */}\n                        <div\n                            className={cn('border-grey-300 col-span-full border-t', { 'translate-y-px': tableMeta.enableFooter })}\n                        />\n                        {tableMeta.enableFooter ? (\n                            <div className=\"group/footer contents\" data-taco=\"table2-footer\" role=\"rowgroup\">\n                                {\n                                    // Render the footer cell only for individual columns, excluding column groups.\n                                    table\n                                        .getFooterGroups()\n                                        .slice(0, 1)\n                                        .map(footerGroup => (\n                                            <div className=\"contents\" key={footerGroup.id} role=\"row\">\n                                                {footerGroup.headers.map(footer => (\n                                                    <React.Fragment key={footer.id}>\n                                                        {flexRender(footer.column.columnDef.footer, footer.getContext())}\n                                                    </React.Fragment>\n                                                ))}\n                                            </div>\n                                        ))\n                                }\n                                {length ? (\n                                    <Summary currentLength={table.getRowModel().rows.length} length={length} table={table} />\n                                ) : null}\n                            </div>\n                        ) : null}\n                    </>\n                ) : (\n                    <div className=\"col-span-full box-border min-h-[theme(spacing.8)]\">{EmptyState ? <EmptyState /> : null}</div>\n                )}\n            </div>\n        </>\n    );\n});\n\ntype Table3WithStatics = (<TType = unknown>(props: Table3Props<TType> & React.RefAttributes<Table3Ref>) => JSX.Element) & {\n    Column: typeof Column;\n    Group: typeof Group;\n};\n\nexport const Table3 = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const stringifiedChildren = String(props.children);\n    // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n    // this is cheaper from a complexity perspective, and probably performance wise as well\n    const key = React.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);\n    return <Table<TType> {...props} key={key} ref={ref} />;\n}) as Table3WithStatics;\nTable3.Column = Column;\nTable3.Group = Group;\n\n// hooks\nexport { useTable3DataLoader } from './hooks/useTableDataLoader';\n\n// types\nexport type {\n    useTable3DataFetcher,\n    useTable3DataOptions,\n    useTable3DataFetcherValues as useTableDataValues,\n} from './hooks/useTableDataLoader';\n\nexport type {\n    Table3Ref,\n    Table3Props,\n    Table3Preset,\n    Table3Settings,\n    Table3SettingsHandler,\n    Table3RowHeight,\n    Table3FilterComparator,\n    Table3FilterHandler,\n    Table3LoadPageHandler,\n    Table3LoadAllHandler,\n    Table3RowGotoHandler,\n    Table3SortHandler,\n    Table3Shortcuts,\n    Table3ShortcutHandlerFn,\n    Table3ShortcutHandlerObject,\n    Table3SortDirection,\n    Table3SortFn,\n    Table3RowActionRenderer,\n    Table3RowSelectionHandler,\n    Table3RowExpansionRenderer,\n    Table3RowDropHandler,\n    Table3RowDragHandler,\n    Table3RowClickHandler,\n    Table3ColumnProps,\n    Table3ColumnAlignment,\n    Table3ColumnDataType,\n    Table3ColumnHeaderMenu,\n    Table3ColumnClassNameHandler,\n    Table3ColumnFooterRenderer,\n    Table3ColumnRenderer,\n    Table3ColumnControlRenderer,\n    Table3ColumnControlProps,\n} from './types';\n"],"names":["Column","_","displayName","Group","Table","fixedForwardRef","Table3","props","ref","emptyState","EmptyState","customSettings","toolbarLeft","toolbarRight","defaultCurrentRowIndex","defaultRowActiveIndex","internalRef","useMergedRef","table","length","useTable","useTableRefInstanceSetup","React","useEffect","autoFocus","_internalRef$current","current","focus","renderBody","scrollToIndex","useTableRenderStrategy","tableMeta","options","meta","state","getState","bodyRef","useRef","animationFrameId","requestAnimationFrame","align","cancelAnimationFrame","handleKeyDown","event","target","dialog","closest","eventOriginatedFromCombobox","contains","shortcutsState","isPaused","rows","getRowModel","rowActive","editing","isEditing","undefined","rowActiveIndex","_rows$tableMeta$rowAc","rowClick","original","rowSelection","document","addEventListener","removeEventListener","handleBlur","isEnabled","handleFocus","handleScroll","columnFreezing","Promise","resolve","e","reject","className","cn","fontSize","size","FontSizes","small","medium","large","style","cssGridStyle","useCssGrid","printing","isPrinting","rowActions","actionsForRowLength","cssVars","useCssVars","rowHeight","height","opacity","columnFreezingStyle","useColumnFreezingStyle","id","headerOffsetStyle","useHeaderOffsetStyle","isServerLoadingAndNotReady","isUsingServer","Toolbar","tableProps","total","left","right","ErrorAlert","tableRef","rowIdentifier","horizontallyScrolled","isHoverStatePaused","columnSizingInfo","isResizingColumn","onBlur","onFocus","onScroll","role","tabIndex","getHeaderGroups","map","headerGroup","key","headers","header","index","hasSeparator","frozenColumnIndex","_headerGroup$headers","isPlaceholder","Fragment","flexRender","column","columnDef","getContext","FocusScope","enableFooter","getFooterGroups","slice","footerGroup","footer","Summary","currentLength","stringifiedChildren","String","children","useMemo"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/TextareaControl.js

@@ -25,6 +25,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
     onKeyDown: handleKeyDown,
     onChange: handleChange,
     onBlur,
+    onFocus,
     column,
     isCellInDetailMode,
     align,
@@ -98,6 +99,13 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
     }
     onBlur(event);
   };
+  const handleFocus = event => {
+    const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
+    if (textareaElement) {
+      resizeTextArea(textareaElement);
+    }
+    onFocus(event);
+  };
   return /*#__PURE__*/React__default.createElement("div", {
     "data-taco": "input-container"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -117,7 +125,8 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
       handleTextareaKeyDown(e);
     },
     onBlur: handleBlur,
-    className: cn(getCellAlignmentClasses(align), `h-fit resize-none [&:not(:focus)]:whitespace-nowrap`, {
+    onFocus: handleFocus,
+    className: cn(getCellAlignmentClasses(align), `h-fit resize-none overflow-y-hidden focus:overflow-y-auto [&:not(:focus)]:whitespace-nowrap`, {
       [`!min-h-[${minMaxHeight.min}px]`]: columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate,
       '!yt-focus-dark': isCellInDetailMode,
       [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/controls/TextareaControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaControl.js","sources":["../../../../../../../../../../../src/components/Table3/components/columns/cell/controls/TextareaControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Textarea } from '../../../../../Textarea/Textarea';\nimport { EditingControlProps } from '../EditingControl';\nimport { getCellAlignmentClasses } from '../../styles';\nimport { useMergedRef } from '../../../../../../hooks/useMergedRef';\nimport { FontSize } from '../../../../../../types';\n\ntype TextareaHeight = {\n    min: number;\n    max: number;\n};\n// By UX design, textarea should fold to min size when blured and extend to max 5 lines height when edited in enableTruncate mode,\n// for this reason we need to set min/max height limits for each font size value.\nconst heights: Record<FontSize, TextareaHeight> = {\n    small: {\n        min: 24,\n        max: 86,\n    },\n    medium: {\n        min: 32,\n        max: 100,\n    },\n    large: {\n        min: 40,\n        max: 140,\n    },\n};\n\ntype TextareaControlProps<TType = unknown> = EditingControlProps<TType> & {\n    onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n    fontSize: FontSize;\n    invalid: boolean;\n    isCellInDetailMode?: boolean;\n};\n\nexport const TextareaControl = React.forwardRef<HTMLElement, any>(function TextareaControl<TType = unknown>(\n    props: TextareaControlProps<TType>,\n    externalRef: React.Ref<HTMLElement>\n) {\n    const {\n        onKeyDown: handleKeyDown,\n        onChange: handleChange,\n        onBlur,\n        column,\n        isCellInDetailMode,\n        align,\n        isActiveRow,\n        value,\n        fontSize,\n        ...attributes\n    } = props;\n\n    const minMaxHeight = heights[fontSize];\n\n    const columnMeta = column.columnDef.meta;\n\n    const ref = useMergedRef<HTMLTextAreaElement>(externalRef);\n\n    React.useEffect(() => {\n        if (ref?.current) {\n            // Need to reset textarea to min height when font size got changed and if column in enable truncate mode.\n            if (columnMeta?.enableTruncate) {\n                const textareaElement = ref?.current as HTMLTextAreaElement;\n                textareaElement.style.height = `${minMaxHeight.min}px`;\n\n                // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized or fonsSize got changed.\n            } else {\n                const textareaElement = ref?.current as HTMLTextAreaElement;\n                resizeTextArea(textareaElement);\n            }\n        }\n    }, [fontSize]);\n\n    React.useEffect(() => {\n        // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.\n        // Otherwise it should collapse to minimal height.\n        if (ref?.current && columnMeta?.enableTruncate) {\n            const textareaElement = ref?.current as HTMLTextAreaElement;\n\n            if (isCellInDetailMode) {\n                resizeTextArea(textareaElement);\n            } else {\n                textareaElement.style.height = `${minMaxHeight.min}px`;\n            }\n        }\n    }, [isCellInDetailMode]);\n\n    const resizeTextArea = (textareaElement: HTMLTextAreaElement) => {\n        // Need to set inherit before calculating height, so that browser sets the scrollHeight properly,\n        // depending on text inside.\n        const textareaRect = textareaElement.getBoundingClientRect();\n        const prevHeight = textareaRect.height;\n        if (columnMeta?.enableTruncate) {\n            if (prevHeight < minMaxHeight.max) {\n                textareaElement.style.height = 'inherit';\n                textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, minMaxHeight.max)}px`;\n            }\n        } else {\n            textareaElement.style.height = 'inherit';\n            textareaElement.style.height = `${textareaElement.scrollHeight}px`;\n        }\n    };\n\n    const handleTextareaChange = e => {\n        resizeTextArea(e.target);\n    };\n\n    const textareaContainerClassName = cn('w-full', {\n        'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-[9]': columnMeta?.enableTruncate,\n    });\n    const handleTextareaKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour\n        if (event.shiftKey && event.key === 'Enter') {\n            return;\n        } else {\n            handleKeyDown(event);\n        }\n    };\n\n    const handleBlur = event => {\n        // If truncation is enabled, then textarea should shring back to min height, when loosing focus.\n        if (columnMeta?.enableTruncate) {\n            const textareaElement = event.currentTarget;\n            textareaElement.style.height = `${minMaxHeight.min}px`;\n        }\n        onBlur(event);\n    };\n\n    return (\n        <div data-taco=\"input-container\">\n            {/**\n             * Textarea should have min height placeholder, because it becomes absolute positioned when focused,\n             * which leads to overlapping of validation message rendered bellow.\n             * Somehow tailwind cannot dynamically assign min height when arbitary value has been used(in this particular case),\n             * so assigning it through style prop here\n             **/}\n            <div style={{ minHeight: `${minMaxHeight.min}px` }} className=\"relative\">\n                <div className={textareaContainerClassName}>\n                    <Textarea\n                        {...attributes}\n                        onChange={event => {\n                            handleChange(event.target.value);\n                            handleTextareaChange(event);\n                        }}\n                        rows={1}\n                        onKeyDown={e => {\n                            handleTextareaKeyDown(e);\n                        }}\n                        onBlur={handleBlur}\n                        className={cn(getCellAlignmentClasses(align), `h-fit resize-none [&:not(:focus)]:whitespace-nowrap`, {\n                            [`!min-h-[${minMaxHeight.min}px]`]: columnMeta?.enableTruncate,\n                            '!yt-focus-dark': isCellInDetailMode,\n                            [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && columnMeta?.enableTruncate,\n                            // Only allow resizing when focused and truncation enabled\n                            'focus:resize-y': isActiveRow && columnMeta?.enableTruncate,\n                        })}\n                        ref={ref}\n                        value={String(value ?? '')}\n                    />\n                </div>\n            </div>\n        </div>\n    );\n});\n"],"names":["heights","small","min","max","medium","large","TextareaControl","React","forwardRef","props","externalRef","onKeyDown","handleKeyDown","onChange","handleChange","onBlur","column","isCellInDetailMode","align","isActiveRow","value","fontSize","attributes","minMaxHeight","columnMeta","columnDef","meta","ref","useMergedRef","useEffect","current","enableTruncate","textareaElement","style","height","resizeTextArea","textareaRect","getBoundingClientRect","prevHeight","Math","scrollHeight","handleTextareaChange","e","target","textareaContainerClassName","cn","handleTextareaKeyDown","event","shiftKey","key","handleBlur","currentTarget","minHeight","className","Textarea","rows","getCellAlignmentClasses","String"],"mappings":"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"}
+{"version":3,"file":"TextareaControl.js","sources":["../../../../../../../../../../../src/components/Table3/components/columns/cell/controls/TextareaControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Textarea } from '../../../../../Textarea/Textarea';\nimport { EditingControlProps } from '../EditingControl';\nimport { getCellAlignmentClasses } from '../../styles';\nimport { useMergedRef } from '../../../../../../hooks/useMergedRef';\nimport { FontSize } from '../../../../../../types';\n\ntype TextareaHeight = {\n    min: number;\n    max: number;\n};\n// By UX design, textarea should fold to min size when blured and extend to max 5 lines height when edited in enableTruncate mode,\n// for this reason we need to set min/max height limits for each font size value.\nconst heights: Record<FontSize, TextareaHeight> = {\n    small: {\n        min: 24,\n        max: 86,\n    },\n    medium: {\n        min: 32,\n        max: 100,\n    },\n    large: {\n        min: 40,\n        max: 140,\n    },\n};\n\ntype TextareaControlProps<TType = unknown> = EditingControlProps<TType> & {\n    onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n    fontSize: FontSize;\n    invalid: boolean;\n    isCellInDetailMode?: boolean;\n};\n\nexport const TextareaControl = React.forwardRef<HTMLElement, any>(function TextareaControl<TType = unknown>(\n    props: TextareaControlProps<TType>,\n    externalRef: React.Ref<HTMLElement>\n) {\n    const {\n        onKeyDown: handleKeyDown,\n        onChange: handleChange,\n        onBlur,\n        onFocus,\n        column,\n        isCellInDetailMode,\n        align,\n        isActiveRow,\n        value,\n        fontSize,\n        ...attributes\n    } = props;\n\n    const minMaxHeight = heights[fontSize];\n\n    const columnMeta = column.columnDef.meta;\n\n    const ref = useMergedRef<HTMLTextAreaElement>(externalRef);\n\n    React.useEffect(() => {\n        if (ref?.current) {\n            // Need to reset textarea to min height when font size got changed and if column in enable truncate mode.\n            if (columnMeta?.enableTruncate) {\n                const textareaElement = ref?.current as HTMLTextAreaElement;\n                textareaElement.style.height = `${minMaxHeight.min}px`;\n\n                // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized or fonsSize got changed.\n            } else {\n                const textareaElement = ref?.current as HTMLTextAreaElement;\n                resizeTextArea(textareaElement);\n            }\n        }\n    }, [fontSize]);\n\n    React.useEffect(() => {\n        // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.\n        // Otherwise it should collapse to minimal height.\n        if (ref?.current && columnMeta?.enableTruncate) {\n            const textareaElement = ref?.current as HTMLTextAreaElement;\n\n            if (isCellInDetailMode) {\n                resizeTextArea(textareaElement);\n            } else {\n                textareaElement.style.height = `${minMaxHeight.min}px`;\n            }\n        }\n    }, [isCellInDetailMode]);\n\n    const resizeTextArea = (textareaElement: HTMLTextAreaElement) => {\n        // Need to set inherit before calculating height, so that browser sets the scrollHeight properly,\n        // depending on text inside.\n        const textareaRect = textareaElement.getBoundingClientRect();\n        const prevHeight = textareaRect.height;\n        if (columnMeta?.enableTruncate) {\n            if (prevHeight < minMaxHeight.max) {\n                textareaElement.style.height = 'inherit';\n                textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, minMaxHeight.max)}px`;\n            }\n        } else {\n            textareaElement.style.height = 'inherit';\n            textareaElement.style.height = `${textareaElement.scrollHeight}px`;\n        }\n    };\n\n    const handleTextareaChange = e => {\n        resizeTextArea(e.target);\n    };\n\n    const textareaContainerClassName = cn('w-full', {\n        'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-[9]': columnMeta?.enableTruncate,\n    });\n    const handleTextareaKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour\n        if (event.shiftKey && event.key === 'Enter') {\n            return;\n        } else {\n            handleKeyDown(event);\n        }\n    };\n\n    const handleBlur = event => {\n        // If truncation is enabled, then textarea should shring back to min height, when loosing focus.\n        if (columnMeta?.enableTruncate) {\n            const textareaElement = event.currentTarget;\n            textareaElement.style.height = `${minMaxHeight.min}px`;\n        }\n        onBlur(event);\n    };\n\n    const handleFocus = (event: React.FocusEvent) => {\n        const textareaElement = ref?.current;\n\n        if (textareaElement) {\n            resizeTextArea(textareaElement);\n        }\n\n        onFocus(event);\n    };\n\n    return (\n        <div data-taco=\"input-container\">\n            {/**\n             * Textarea should have min height placeholder, because it becomes absolute positioned when focused,\n             * which leads to overlapping of validation message rendered bellow.\n             * Somehow tailwind cannot dynamically assign min height when arbitary value has been used(in this particular case),\n             * so assigning it through style prop here\n             **/}\n            <div style={{ minHeight: `${minMaxHeight.min}px` }} className=\"relative\">\n                <div className={textareaContainerClassName}>\n                    <Textarea\n                        {...attributes}\n                        onChange={event => {\n                            handleChange(event.target.value);\n                            handleTextareaChange(event);\n                        }}\n                        rows={1}\n                        onKeyDown={e => {\n                            handleTextareaKeyDown(e);\n                        }}\n                        onBlur={handleBlur}\n                        onFocus={handleFocus}\n                        className={cn(\n                            getCellAlignmentClasses(align),\n                            `h-fit resize-none overflow-y-hidden focus:overflow-y-auto [&:not(:focus)]:whitespace-nowrap`,\n                            {\n                                [`!min-h-[${minMaxHeight.min}px]`]: columnMeta?.enableTruncate,\n                                '!yt-focus-dark': isCellInDetailMode,\n                                [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && columnMeta?.enableTruncate,\n                                // Only allow resizing when focused and truncation enabled\n                                'focus:resize-y': isActiveRow && columnMeta?.enableTruncate,\n                            }\n                        )}\n                        ref={ref}\n                        value={String(value ?? '')}\n                    />\n                </div>\n            </div>\n        </div>\n    );\n});\n"],"names":["heights","small","min","max","medium","large","TextareaControl","React","forwardRef","props","externalRef","onKeyDown","handleKeyDown","onChange","handleChange","onBlur","onFocus","column","isCellInDetailMode","align","isActiveRow","value","fontSize","attributes","minMaxHeight","columnMeta","columnDef","meta","ref","useMergedRef","useEffect","current","enableTruncate","textareaElement","style","height","resizeTextArea","textareaRect","getBoundingClientRect","prevHeight","Math","scrollHeight","handleTextareaChange","e","target","textareaContainerClassName","cn","handleTextareaKeyDown","event","shiftKey","key","handleBlur","currentTarget","handleFocus","minHeight","className","Textarea","rows","getCellAlignmentClasses","String"],"mappings":"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"}

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/dom.js

@@ -25,12 +25,21 @@ const getNextFocussableElement = currentElement => {
   }
   return focussableElements[currentElementIndex + 1];
 };
-function isElementInsideOrTriggeredFromContainer(element, container) {
+const getOverlaySelector = element => {
   switch (element === null || element === void 0 ? void 0 : element.getAttribute('role')) {
     case 'dialog':
-      return !!(container !== null && container !== void 0 && container.querySelector(`[aria-controls='${element.id}']`));
+      return `[aria-controls='${element.id}']`;
     case 'menu':
-      return !!(container !== null && container !== void 0 && container.querySelector(`#${element.getAttribute('aria-labelledby')}`));
+      return `#${element.getAttribute('aria-labelledby')}`;
+    default:
+      return undefined;
+  }
+};
+function isElementInsideOrTriggeredFromContainer(element, container) {
+  var _getOverlaySelector, _element$closest;
+  const selector = (_getOverlaySelector = getOverlaySelector(element)) !== null && _getOverlaySelector !== void 0 ? _getOverlaySelector : getOverlaySelector((_element$closest = element === null || element === void 0 ? void 0 : element.closest('[role=dialog],[role=menu]')) !== null && _element$closest !== void 0 ? _element$closest : null);
+  if (selector) {
+    return !!(container !== null && container !== void 0 && container.querySelector(selector));
   }
   return !!(container !== null && container !== void 0 && container.contains(element));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"dom.js","sources":["../../../../../../src/utils/dom.ts"],"sourcesContent":["export const isOverflowing = (element: HTMLElement | null) =>\n    element !== null ? element.scrollWidth > element.offsetWidth : false;\n\nexport const getIndexOfFirstChildOverflowingParent = (element: HTMLElement, overscan = 0) => {\n    let index = 0;\n    let boundaryChildIndex: number | null = null;\n    const clientRect = element.getBoundingClientRect();\n\n    for (const child of Array.from(element.children)) {\n        const right = child.getBoundingClientRect().right - clientRect.left;\n        const width = clientRect.width - overscan;\n\n        if (right > width) {\n            boundaryChildIndex = index;\n            break;\n        }\n        index++;\n    }\n\n    return boundaryChildIndex;\n};\n\nexport const getNextFocussableElement = (currentElement: HTMLElement | null) => {\n    if (!currentElement) {\n        return null;\n    }\n\n    const focussableElements = [\n        ...document.querySelectorAll<HTMLElement>(\n            'button:not([disabled]), [href]:not(link):not(script), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled]), details:not([disabled]), summary:not(:disabled)'\n        ),\n    ];\n    const currentElementIndex = focussableElements.indexOf(currentElement);\n\n    // If the currentElement is not in the focussable elements list or it is the last element\n    if (currentElementIndex !== -1 && currentElementIndex === focussableElements.length - 1) {\n        return null;\n    }\n\n    return focussableElements[currentElementIndex + 1];\n};\n\nexport function isElementInsideOrTriggeredFromContainer(element: Element | null, container: Element | null) {\n    switch (element?.getAttribute('role')) {\n        case 'dialog':\n            return !!container?.querySelector(`[aria-controls='${element.id}']`);\n\n        case 'menu':\n            return !!container?.querySelector(`#${element.getAttribute('aria-labelledby')}`);\n    }\n\n    return !!container?.contains(element);\n}\n"],"names":["getIndexOfFirstChildOverflowingParent","element","overscan","index","boundaryChildIndex","clientRect","getBoundingClientRect","child","Array","from","children","right","left","width","getNextFocussableElement","currentElement","focussableElements","document","querySelectorAll","currentElementIndex","indexOf","length","isElementInsideOrTriggeredFromContainer","container","getAttribute","querySelector","id","contains"],"mappings":"MAGaA,qCAAqC,GAAGA,CAACC,OAAoB,EAAEC,QAAQ,GAAG,CAAC;EACpF,IAAIC,KAAK,GAAG,CAAC;EACb,IAAIC,kBAAkB,GAAkB,IAAI;EAC5C,MAAMC,UAAU,GAAGJ,OAAO,CAACK,qBAAqB,EAAE;EAElD,KAAK,MAAMC,KAAK,IAAIC,KAAK,CAACC,IAAI,CAACR,OAAO,CAACS,QAAQ,CAAC,EAAE;IAC9C,MAAMC,KAAK,GAAGJ,KAAK,CAACD,qBAAqB,EAAE,CAACK,KAAK,GAAGN,UAAU,CAACO,IAAI;IACnE,MAAMC,KAAK,GAAGR,UAAU,CAACQ,KAAK,GAAGX,QAAQ;IAEzC,IAAIS,KAAK,GAAGE,KAAK,EAAE;MACfT,kBAAkB,GAAGD,KAAK;MAC1B;;IAEJA,KAAK,EAAE;;EAGX,OAAOC,kBAAkB;AAC7B;MAEaU,wBAAwB,GAAIC,cAAkC;EACvE,IAAI,CAACA,cAAc,EAAE;IACjB,OAAO,IAAI;;EAGf,MAAMC,kBAAkB,GAAG,CACvB,GAAGC,QAAQ,CAACC,gBAAgB,CACxB,iOAAiO,CACpO,CACJ;EACD,MAAMC,mBAAmB,GAAGH,kBAAkB,CAACI,OAAO,CAACL,cAAc,CAAC;;EAGtE,IAAII,mBAAmB,KAAK,CAAC,CAAC,IAAIA,mBAAmB,KAAKH,kBAAkB,CAACK,MAAM,GAAG,CAAC,EAAE;IACrF,OAAO,IAAI;;EAGf,OAAOL,kBAAkB,CAACG,mBAAmB,GAAG,CAAC,CAAC;AACtD;SAEgBG,uCAAuCA,CAACrB,OAAuB,EAAEsB,SAAyB;EACtG,QAAQtB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEuB,YAAY,CAAC,MAAM,CAAC;IACjC,KAAK,QAAQ;MACT,OAAO,CAAC,EAACD,SAAS,aAATA,SAAS,eAATA,SAAS,CAAEE,aAAa,oBAAoBxB,OAAO,CAACyB,MAAM,CAAC;IAExE,KAAK,MAAM;MACP,OAAO,CAAC,EAACH,SAAS,aAATA,SAAS,eAATA,SAAS,CAAEE,aAAa,KAAKxB,OAAO,CAACuB,YAAY,CAAC,iBAAiB,GAAG,CAAC;;EAGxF,OAAO,CAAC,EAACD,SAAS,aAATA,SAAS,eAATA,SAAS,CAAEI,QAAQ,CAAC1B,OAAO,CAAC;AACzC;;;;"}
+{"version":3,"file":"dom.js","sources":["../../../../../../src/utils/dom.ts"],"sourcesContent":["export const isOverflowing = (element: HTMLElement | null) =>\n    element !== null ? element.scrollWidth > element.offsetWidth : false;\n\nexport const getIndexOfFirstChildOverflowingParent = (element: HTMLElement, overscan = 0) => {\n    let index = 0;\n    let boundaryChildIndex: number | null = null;\n    const clientRect = element.getBoundingClientRect();\n\n    for (const child of Array.from(element.children)) {\n        const right = child.getBoundingClientRect().right - clientRect.left;\n        const width = clientRect.width - overscan;\n\n        if (right > width) {\n            boundaryChildIndex = index;\n            break;\n        }\n        index++;\n    }\n\n    return boundaryChildIndex;\n};\n\nexport const getNextFocussableElement = (currentElement: HTMLElement | null) => {\n    if (!currentElement) {\n        return null;\n    }\n\n    const focussableElements = [\n        ...document.querySelectorAll<HTMLElement>(\n            'button:not([disabled]), [href]:not(link):not(script), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled]), details:not([disabled]), summary:not(:disabled)'\n        ),\n    ];\n    const currentElementIndex = focussableElements.indexOf(currentElement);\n\n    // If the currentElement is not in the focussable elements list or it is the last element\n    if (currentElementIndex !== -1 && currentElementIndex === focussableElements.length - 1) {\n        return null;\n    }\n\n    return focussableElements[currentElementIndex + 1];\n};\n\nconst getOverlaySelector = (element: Element | null) => {\n    switch (element?.getAttribute('role')) {\n        case 'dialog':\n            return `[aria-controls='${element.id}']`;\n\n        case 'menu':\n            return `#${element.getAttribute('aria-labelledby')}`;\n\n        default:\n            return undefined;\n    }\n};\n\nexport function isElementInsideOrTriggeredFromContainer(element: Element | null, container: Element | null) {\n    const selector = getOverlaySelector(element) ?? getOverlaySelector(element?.closest('[role=dialog],[role=menu]') ?? null);\n\n    if (selector) {\n        return !!container?.querySelector(selector);\n    }\n\n    return !!container?.contains(element);\n}\n"],"names":["getIndexOfFirstChildOverflowingParent","element","overscan","index","boundaryChildIndex","clientRect","getBoundingClientRect","child","Array","from","children","right","left","width","getNextFocussableElement","currentElement","focussableElements","document","querySelectorAll","currentElementIndex","indexOf","length","getOverlaySelector","getAttribute","id","undefined","isElementInsideOrTriggeredFromContainer","container","selector","_getOverlaySelector","_element$closest","closest","querySelector","contains"],"mappings":"MAGaA,qCAAqC,GAAGA,CAACC,OAAoB,EAAEC,QAAQ,GAAG,CAAC;EACpF,IAAIC,KAAK,GAAG,CAAC;EACb,IAAIC,kBAAkB,GAAkB,IAAI;EAC5C,MAAMC,UAAU,GAAGJ,OAAO,CAACK,qBAAqB,EAAE;EAElD,KAAK,MAAMC,KAAK,IAAIC,KAAK,CAACC,IAAI,CAACR,OAAO,CAACS,QAAQ,CAAC,EAAE;IAC9C,MAAMC,KAAK,GAAGJ,KAAK,CAACD,qBAAqB,EAAE,CAACK,KAAK,GAAGN,UAAU,CAACO,IAAI;IACnE,MAAMC,KAAK,GAAGR,UAAU,CAACQ,KAAK,GAAGX,QAAQ;IAEzC,IAAIS,KAAK,GAAGE,KAAK,EAAE;MACfT,kBAAkB,GAAGD,KAAK;MAC1B;;IAEJA,KAAK,EAAE;;EAGX,OAAOC,kBAAkB;AAC7B;MAEaU,wBAAwB,GAAIC,cAAkC;EACvE,IAAI,CAACA,cAAc,EAAE;IACjB,OAAO,IAAI;;EAGf,MAAMC,kBAAkB,GAAG,CACvB,GAAGC,QAAQ,CAACC,gBAAgB,CACxB,iOAAiO,CACpO,CACJ;EACD,MAAMC,mBAAmB,GAAGH,kBAAkB,CAACI,OAAO,CAACL,cAAc,CAAC;;EAGtE,IAAII,mBAAmB,KAAK,CAAC,CAAC,IAAIA,mBAAmB,KAAKH,kBAAkB,CAACK,MAAM,GAAG,CAAC,EAAE;IACrF,OAAO,IAAI;;EAGf,OAAOL,kBAAkB,CAACG,mBAAmB,GAAG,CAAC,CAAC;AACtD;AAEA,MAAMG,kBAAkB,GAAIrB,OAAuB;EAC/C,QAAQA,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEsB,YAAY,CAAC,MAAM,CAAC;IACjC,KAAK,QAAQ;MACT,0BAA0BtB,OAAO,CAACuB,MAAM;IAE5C,KAAK,MAAM;MACP,WAAWvB,OAAO,CAACsB,YAAY,CAAC,iBAAiB,GAAG;IAExD;MACI,OAAOE,SAAS;;AAE5B,CAAC;SAEeC,uCAAuCA,CAACzB,OAAuB,EAAE0B,SAAyB;;EACtG,MAAMC,QAAQ,IAAAC,mBAAA,GAAGP,kBAAkB,CAACrB,OAAO,CAAC,cAAA4B,mBAAA,cAAAA,mBAAA,GAAIP,kBAAkB,EAAAQ,gBAAA,GAAC7B,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE8B,OAAO,CAAC,2BAA2B,CAAC,cAAAD,gBAAA,cAAAA,gBAAA,GAAI,IAAI,CAAC;EAEzH,IAAIF,QAAQ,EAAE;IACV,OAAO,CAAC,EAACD,SAAS,aAATA,SAAS,eAATA,SAAS,CAAEK,aAAa,CAACJ,QAAQ,CAAC;;EAG/C,OAAO,CAAC,EAACD,SAAS,aAATA,SAAS,eAATA,SAAS,CAAEM,QAAQ,CAAChC,OAAO,CAAC;AACzC;;;;"}