@economic/taco 2.17.2 → 2.19.0

package/dist/esm/packages/taco/src/components/Select2/components/Option.js.map

@@ -1 +1 @@
-{"version":3,"file":"Option.js","sources":["../../../../../../../../src/components/Select2/components/Option.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Tag } from '../../Tag/Tag';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport * as ListboxPrimitive from '../../../primitives/Listbox2/Listbox2';\nimport { createOptionClassName } from '../utilities';\nimport { useSelect2Context } from './Context';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { EditPopover } from './Edit';\nimport { isMobileDevice } from '../../../utils/device';\nimport { Color } from '../../../types';\n\nexport type Select2OptionProps = Omit<ListboxPrimitive.Listbox2OptionProps, 'children' | 'prefix'> & {\n    children: string;\n    color?: Color;\n    description?: string;\n    prefix?: IconName | JSX.Element;\n    postfix?: IconName | JSX.Element;\n    textValue?: string;\n};\n\nexport const Option = React.forwardRef<HTMLDivElement, Select2OptionProps>(function Select2Option(props, ref) {\n    const { children, color, description, prefix, postfix, className: cName, ...otherProps } = props;\n    const {\n        onDelete,\n        onEdit,\n        listboxRef,\n        multiple,\n        ref: selectRef,\n        setOpen,\n        shouldPauseHoverState,\n        tags,\n        value,\n    } = useSelect2Context();\n    const className = cn(createOptionClassName(shouldPauseHoverState), cName);\n\n    const hasValue = Array.isArray(value) ? !!value.length : value !== undefined;\n    const isTag = tags && !!color;\n\n    const handleClick = () => {\n        if (!multiple) {\n            setOpen(false);\n        } else {\n            selectRef.current?.focus();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (isAriaSelectionKey(event)) {\n            if (!multiple || event.key === 'Tab') {\n                setOpen(false);\n            }\n        }\n    };\n\n    const isEmptyOption = children !== '';\n\n    const popover =\n        isEmptyOption && (onEdit || onDelete)\n            ? popoverProps => (\n                  <EditPopover\n                      {...popoverProps}\n                      color={props.color}\n                      key={props.textValue ?? String(props.children)}\n                      text={props.textValue ?? String(props.children)}\n                      value={props.value}\n                  />\n              )\n            : undefined;\n\n    return (\n        <ListboxPrimitive.Option {...otherProps} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref}>\n            {hasValue ? (\n                <Icon name=\"tick\" className=\"pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible\" />\n            ) : null}\n\n            {isTag ? (\n                <Tag className=\"pointer-events-none my-1\" color={color} icon={prefix}>\n                    {children}\n                </Tag>\n            ) : (\n                <>\n                    {prefix ? typeof prefix === 'string' ? <Icon name={prefix} /> : prefix : null}\n                    <span className=\"flex w-full justify-between\">\n                        <span className=\"flex flex-col\">\n                            <span>{children}</span>\n                            {description ? <span className=\"text-grey-700 -mt-1.5 mb-1.5 text-xs\">{description}</span> : null}\n                        </span>\n                        <span className=\"flex flex-col self-center\">\n                            {postfix ? typeof postfix === 'string' ? <Icon name={postfix} /> : postfix : null}\n                        </span>\n                    </span>\n                </>\n            )}\n            {popover ? (\n                <IconButton\n                    icon=\"ellipsis-vertical\"\n                    appearance=\"discrete\"\n                    className={cn(\n                        'group-aria-current:visible invisible -mr-1 ml-auto !h-5 min-h-[theme(spacing.6)] !w-5 min-w-[theme(spacing.6)] hover:!bg-black/[.08] focus:!shadow-none group-hover:visible',\n                        {\n                            '!visible': isMobileDevice(window?.navigator),\n                        }\n                    )}\n                    onClick={event => {\n                        event.stopPropagation();\n                        listboxRef?.current?.setActiveIndex(event.currentTarget.parentElement as HTMLDivElement);\n                    }}\n                    popover={popover}\n                    tabIndex={-1}\n                />\n            ) : null}\n        </ListboxPrimitive.Option>\n    );\n});\n"],"names":["Option","React","forwardRef","Select2Option","props","ref","children","color","description","prefix","postfix","className","cName","otherProps","onDelete","onEdit","listboxRef","multiple","selectRef","setOpen","shouldPauseHoverState","tags","value","useSelect2Context","cn","createOptionClassName","hasValue","Array","isArray","length","undefined","isTag","handleClick","_selectRef$current","current","focus","handleKeyDown","event","isAriaSelectionKey","key","isEmptyOption","popover","popoverProps","_props$textValue","_props$textValue2","EditPopover","textValue","String","text","ListboxPrimitive","onClick","onKeyDown","Icon","name","Tag","icon","IconButton","appearance","isMobileDevice","_window","window","navigator","stopPropagation","_listboxRef$current","setActiveIndex","currentTarget","parentElement","tabIndex"],"mappings":"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"}
+{"version":3,"file":"Option.js","sources":["../../../../../../../../src/components/Select2/components/Option.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Tag } from '../../Tag/Tag';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport * as ListboxPrimitive from '../../../primitives/Listbox2/Listbox2';\nimport { createOptionClassName } from '../utilities';\nimport { useSelect2Context } from './Context';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { EditPopover } from './Edit';\nimport { isMobileDevice } from '../../../utils/device';\nimport { Color } from '../../../types';\nimport { FontSize, FontSizes } from '../../../types';\n\nexport type Select2OptionProps = Omit<ListboxPrimitive.Listbox2OptionProps, 'children' | 'prefix'> & {\n    children: string;\n    color?: Color;\n    description?: string;\n    fontSize?: FontSize;\n    prefix?: IconName | JSX.Element;\n    postfix?: IconName | JSX.Element;\n    textValue?: string;\n};\n\nexport const Option = React.forwardRef<HTMLDivElement, Select2OptionProps>(function Select2Option(props, ref) {\n    const { children, color, description, prefix, postfix, className: cName, ...otherProps } = props;\n    const {\n        onDelete,\n        onEdit,\n        listboxRef,\n        multiple,\n        ref: selectRef,\n        setOpen,\n        shouldPauseHoverState,\n        tags,\n        value,\n        fontSize = FontSizes.medium,\n    } = useSelect2Context();\n    const className = cn(\n        createOptionClassName(shouldPauseHoverState),\n        {\n            'text-xs': fontSize === FontSizes.small,\n            'text-sm': fontSize === FontSizes.medium,\n            'text-base': fontSize === FontSizes.large,\n        },\n        cName\n    );\n\n    const hasValue = Array.isArray(value) ? !!value.length : value !== undefined;\n    const isTag = tags && !!color;\n\n    const handleClick = () => {\n        if (!multiple) {\n            setOpen(false);\n        } else {\n            selectRef.current?.focus();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (isAriaSelectionKey(event)) {\n            if (!multiple || event.key === 'Tab') {\n                setOpen(false);\n            }\n        }\n    };\n\n    const isEmptyOption = children !== '';\n\n    const popover =\n        isEmptyOption && (onEdit || onDelete)\n            ? popoverProps => (\n                  <EditPopover\n                      {...popoverProps}\n                      color={props.color}\n                      key={props.textValue ?? String(props.children)}\n                      text={props.textValue ?? String(props.children)}\n                      value={props.value}\n                  />\n              )\n            : undefined;\n\n    return (\n        <ListboxPrimitive.Option {...otherProps} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref}>\n            {hasValue ? (\n                <Icon name=\"tick\" className=\"pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible\" />\n            ) : null}\n\n            {isTag ? (\n                <Tag className=\"pointer-events-none my-1\" color={color} icon={prefix}>\n                    {children}\n                </Tag>\n            ) : (\n                <>\n                    {prefix ? typeof prefix === 'string' ? <Icon name={prefix} /> : prefix : null}\n                    <span className=\"flex w-full justify-between\">\n                        <span className=\"flex flex-col\">\n                            <span>{children}</span>\n                            {description ? <span className=\"text-grey-700 -mt-1.5 mb-1.5 text-xs\">{description}</span> : null}\n                        </span>\n                        <span className=\"flex flex-col self-center\">\n                            {postfix ? typeof postfix === 'string' ? <Icon name={postfix} /> : postfix : null}\n                        </span>\n                    </span>\n                </>\n            )}\n            {popover ? (\n                <IconButton\n                    icon=\"ellipsis-vertical\"\n                    appearance=\"discrete\"\n                    className={cn(\n                        'group-aria-current:visible invisible -mr-1 ml-auto !h-5 min-h-[theme(spacing.6)] !w-5 min-w-[theme(spacing.6)] hover:!bg-black/[.08] focus:!shadow-none group-hover:visible',\n                        {\n                            '!visible': isMobileDevice(window?.navigator),\n                        }\n                    )}\n                    onClick={event => {\n                        event.stopPropagation();\n                        listboxRef?.current?.setActiveIndex(event.currentTarget.parentElement as HTMLDivElement);\n                    }}\n                    popover={popover}\n                    tabIndex={-1}\n                />\n            ) : null}\n        </ListboxPrimitive.Option>\n    );\n});\n"],"names":["Option","React","forwardRef","Select2Option","props","ref","children","color","description","prefix","postfix","className","cName","otherProps","onDelete","onEdit","listboxRef","multiple","selectRef","setOpen","shouldPauseHoverState","tags","value","fontSize","FontSizes","medium","useSelect2Context","cn","createOptionClassName","small","large","hasValue","Array","isArray","length","undefined","isTag","handleClick","_selectRef$current","current","focus","handleKeyDown","event","isAriaSelectionKey","key","isEmptyOption","popover","popoverProps","_props$textValue","_props$textValue2","EditPopover","textValue","String","text","ListboxPrimitive","onClick","onKeyDown","Icon","name","Tag","icon","IconButton","appearance","isMobileDevice","_window","window","navigator","stopPropagation","_listboxRef$current","setActiveIndex","currentTarget","parentElement","tabIndex"],"mappings":";;;;;;;;;;;;;;;;MAwBaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAqC,SAASC,aAAaA,CAACC,KAAK,EAAEC,GAAG;;EACxG,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,WAAW;IAAEC,MAAM;IAAEC,OAAO;IAAEC,SAAS,EAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGT,KAAK;EAChG,MAAM;IACFU,QAAQ;IACRC,MAAM;IACNC,UAAU;IACVC,QAAQ;IACRZ,GAAG,EAAEa,SAAS;IACdC,OAAO;IACPC,qBAAqB;IACrBC,IAAI;IACJC,KAAK;IACLC,QAAQ,GAAGC,SAAS,CAACC;GACxB,GAAGC,iBAAiB,EAAE;EACvB,MAAMf,SAAS,GAAGgB,EAAE,CAChBC,qBAAqB,CAACR,qBAAqB,CAAC,EAC5C;IACI,SAAS,EAAEG,QAAQ,KAAKC,SAAS,CAACK,KAAK;IACvC,SAAS,EAAEN,QAAQ,KAAKC,SAAS,CAACC,MAAM;IACxC,WAAW,EAAEF,QAAQ,KAAKC,SAAS,CAACM;GACvC,EACDlB,KAAK,CACR;EAED,MAAMmB,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAACX,KAAK,CAAC,GAAG,CAAC,CAACA,KAAK,CAACY,MAAM,GAAGZ,KAAK,KAAKa,SAAS;EAC5E,MAAMC,KAAK,GAAGf,IAAI,IAAI,CAAC,CAACd,KAAK;EAE7B,MAAM8B,WAAW,GAAGA;IAChB,IAAI,CAACpB,QAAQ,EAAE;MACXE,OAAO,CAAC,KAAK,CAAC;KACjB,MAAM;MAAA,IAAAmB,kBAAA;MACH,CAAAA,kBAAA,GAAApB,SAAS,CAACqB,OAAO,cAAAD,kBAAA,uBAAjBA,kBAAA,CAAmBE,KAAK,EAAE;;GAEjC;EAED,MAAMC,aAAa,GAAIC,KAA0B;IAC7C,IAAIC,kBAAkB,CAACD,KAAK,CAAC,EAAE;MAC3B,IAAI,CAACzB,QAAQ,IAAIyB,KAAK,CAACE,GAAG,KAAK,KAAK,EAAE;QAClCzB,OAAO,CAAC,KAAK,CAAC;;;GAGzB;EAED,MAAM0B,aAAa,GAAGvC,QAAQ,KAAK,EAAE;EAErC,MAAMwC,OAAO,GACTD,aAAa,KAAK9B,MAAM,IAAID,QAAQ,CAAC,GAC/BiC,YAAY;IAAA,IAAAC,gBAAA,EAAAC,iBAAA;IAAA,oBACRhD,6BAACiD,WAAW,oBACJH,YAAY;MAChBxC,KAAK,EAAEH,KAAK,CAACG,KAAK;MAClBqC,GAAG,GAAAI,gBAAA,GAAE5C,KAAK,CAAC+C,SAAS,cAAAH,gBAAA,cAAAA,gBAAA,GAAII,MAAM,CAAChD,KAAK,CAACE,QAAQ,CAAC;MAC9C+C,IAAI,GAAAJ,iBAAA,GAAE7C,KAAK,CAAC+C,SAAS,cAAAF,iBAAA,cAAAA,iBAAA,GAAIG,MAAM,CAAChD,KAAK,CAACE,QAAQ,CAAC;MAC/CgB,KAAK,EAAElB,KAAK,CAACkB;OACf;GACL,GACDa,SAAS;EAEnB,oBACIlC,6BAACqD,QAAuB,oBAAKzC,UAAU;IAAEF,SAAS,EAAEA,SAAS;IAAE4C,OAAO,EAAElB,WAAW;IAAEmB,SAAS,EAAEf,aAAa;IAAEpC,GAAG,EAAEA;MAC/G0B,QAAQ,kBACL9B,6BAACwD,IAAI;IAACC,IAAI,EAAC,MAAM;IAAC/C,SAAS,EAAC;IAAgF,IAC5G,IAAI,EAEPyB,KAAK,kBACFnC,6BAAC0D,GAAG;IAAChD,SAAS,EAAC,0BAA0B;IAACJ,KAAK,EAAEA,KAAK;IAAEqD,IAAI,EAAEnD;KACzDH,QAAQ,CACP,mBAENL,4DACKQ,MAAM,GAAG,OAAOA,MAAM,KAAK,QAAQ,gBAAGR,6BAACwD,IAAI;IAACC,IAAI,EAAEjD;IAAU,GAAGA,MAAM,GAAG,IAAI,eAC7ER;IAAMU,SAAS,EAAC;kBACZV;IAAMU,SAAS,EAAC;kBACZV,2CAAOK,QAAQ,CAAQ,EACtBE,WAAW,gBAAGP;IAAMU,SAAS,EAAC;KAAwCH,WAAW,CAAQ,GAAG,IAAI,CAC9F,eACPP;IAAMU,SAAS,EAAC;KACXD,OAAO,GAAG,OAAOA,OAAO,KAAK,QAAQ,gBAAGT,6BAACwD,IAAI;IAACC,IAAI,EAAEhD;IAAW,GAAGA,OAAO,GAAG,IAAI,CAC9E,CACJ,CACR,CACN,EACAoC,OAAO,kBACJ7C,6BAAC4D,UAAU;IACPD,IAAI,EAAC,mBAAmB;IACxBE,UAAU,EAAC,UAAU;IACrBnD,SAAS,EAAEgB,EAAE,CACT,6KAA6K,EAC7K;MACI,UAAU,EAAEoC,cAAc,EAAAC,OAAA,GAACC,MAAM,cAAAD,OAAA,uBAANA,OAAA,CAAQE,SAAS;KAC/C,CACJ;IACDX,OAAO,EAAEb,KAAK;;MACVA,KAAK,CAACyB,eAAe,EAAE;MACvBnD,UAAU,aAAVA,UAAU,wBAAAoD,mBAAA,GAAVpD,UAAU,CAAEuB,OAAO,cAAA6B,mBAAA,uBAAnBA,mBAAA,CAAqBC,cAAc,CAAC3B,KAAK,CAAC4B,aAAa,CAACC,aAA+B,CAAC;KAC3F;IACDzB,OAAO,EAAEA,OAAO;IAChB0B,QAAQ,EAAE,CAAC;IACb,IACF,IAAI,CACc;AAElC,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Select2/components/Search.js

@@ -8,6 +8,7 @@ import { useSelect2Context } from './Context.js';
 
 const Search = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(props, ref) {
   const {
+    onTabKeyPress,
     ...otherProps
   } = props;
   const {
@@ -32,7 +33,7 @@ const Search = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(pro
     // Select2 should close dropdown and receive focus, when user press Tab while searching (UX requirement to support better keyboard navigation)
     if (event.key === 'Tab') {
       setOpen(false);
-      return;
+      onTabKeyPress();
     }
     if (isAriaSelectionKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       var _listboxRef$current;

package/dist/esm/packages/taco/src/components/Select2/components/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sources":["../../../../../../../../src/components/Select2/components/Search.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\nimport { Input, InputProps } from '../../Input/Input';\nimport { useSelect2Context } from './Context';\nimport { Field } from '../../Field/Field';\nimport { isAriaSelectionKey } from '../../../utils/aria';\n\nexport type Select2SearchProps = InputProps & {};\n\nexport const Search = React.forwardRef<HTMLInputElement, Select2SearchProps>(function ListboxSearch(props, ref) {\n    const { ...otherProps } = props;\n    const { listboxRef, searchQuery, setSearchQuery, setValidationError, validationError, setOpen } = useSelect2Context();\n\n    const handleChange = event => {\n        if (validationError) {\n            setValidationError(undefined);\n        }\n\n        setSearchQuery(event.target.value);\n    };\n\n    const handleKeyDown = event => {\n        // space is an aria selection key, so we have to remove it to allow spaces\n        if (event.key === ' ') {\n            return;\n        }\n\n        // Select2 should close dropdown and receive focus, when user press Tab while searching (UX requirement to support better keyboard navigation)\n        if (event.key === 'Tab') {\n            setOpen(false);\n            return;\n        }\n\n        if (isAriaSelectionKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n            event.preventDefault();\n            // forward navigation events onto the underlying collection - we want arrow keys to work from inside the filter input\n            listboxRef?.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n            return;\n        }\n    };\n\n    return (\n        <Field\n            className={cn('mx-1.5 mb-1.5 !min-h-fit ', { '!pb-0': !validationError })}\n            invalid={!!validationError}\n            message={validationError?.message}>\n            <Input\n                {...otherProps}\n                aria-hidden\n                autoFocus\n                invalid={!!validationError}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                ref={ref}\n                value={searchQuery}\n            />\n        </Field>\n    );\n});\n"],"names":["Search","React","forwardRef","ListboxSearch","props","ref","otherProps","listboxRef","searchQuery","setSearchQuery","setValidationError","validationError","setOpen","useSelect2Context","handleChange","event","undefined","target","value","handleKeyDown","key","isAriaSelectionKey","_listboxRef$current","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","Field","className","cn","invalid","message","Input","autoFocus","onChange","onKeyDown"],"mappings":";;;;;;;;MAUaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAuC,SAASC,aAAaA,CAACC,KAAK,EAAEC,GAAG;EAC1G,MAAM;IAAE,GAAGC;GAAY,GAAGF,KAAK;EAC/B,MAAM;IAAEG,UAAU;IAAEC,WAAW;IAAEC,cAAc;IAAEC,kBAAkB;IAAEC,eAAe;IAAEC;GAAS,GAAGC,iBAAiB,EAAE;EAErH,MAAMC,YAAY,GAAGC,KAAK;IACtB,IAAIJ,eAAe,EAAE;MACjBD,kBAAkB,CAACM,SAAS,CAAC;;IAGjCP,cAAc,CAACM,KAAK,CAACE,MAAM,CAACC,KAAK,CAAC;GACrC;EAED,MAAMC,aAAa,GAAGJ,KAAK;;IAEvB,IAAIA,KAAK,CAACK,GAAG,KAAK,GAAG,EAAE;MACnB;;;IAIJ,IAAIL,KAAK,CAACK,GAAG,KAAK,KAAK,EAAE;MACrBR,OAAO,CAAC,KAAK,CAAC;MACd;;IAGJ,IAAIS,kBAAkB,CAACN,KAAK,CAAC,IAAIA,KAAK,CAACK,GAAG,KAAK,WAAW,IAAIL,KAAK,CAACK,GAAG,KAAK,SAAS,EAAE;MAAA,IAAAE,mBAAA;MACnFP,KAAK,CAACQ,cAAc,EAAE;;MAEtBhB,UAAU,aAAVA,UAAU,wBAAAe,mBAAA,GAAVf,UAAU,CAAEiB,OAAO,cAAAF,mBAAA,uBAAnBA,mBAAA,CAAqBG,aAAa,CAACC,yBAAyB,CAACX,KAA8C,CAAC,CAAC;MAC7G;;GAEP;EAED,oBACId,6BAAC0B,KAAK;IACFC,SAAS,EAAEC,EAAE,CAAC,2BAA2B,EAAE;MAAE,OAAO,EAAE,CAAClB;KAAiB,CAAC;IACzEmB,OAAO,EAAE,CAAC,CAACnB,eAAe;IAC1BoB,OAAO,EAAEpB,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEoB;kBAC1B9B,6BAAC+B,KAAK,oBACE1B,UAAU;;IAEd2B,SAAS;IACTH,OAAO,EAAE,CAAC,CAACnB,eAAe;IAC1BuB,QAAQ,EAAEpB,YAAY;IACtBqB,SAAS,EAAEhB,aAAa;IACxBd,GAAG,EAAEA,GAAG;IACRa,KAAK,EAAEV;KACT,CACE;AAEhB,CAAC;;;;"}
+{"version":3,"file":"Search.js","sources":["../../../../../../../../src/components/Select2/components/Search.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\nimport { Input, InputProps } from '../../Input/Input';\nimport { useSelect2Context } from './Context';\nimport { Field } from '../../Field/Field';\nimport { isAriaSelectionKey } from '../../../utils/aria';\n\nexport type Select2SearchProps = InputProps & {\n    onTabKeyPress: () => void;\n};\n\nexport const Search = React.forwardRef<HTMLInputElement, Select2SearchProps>(function ListboxSearch(props, ref) {\n    const { onTabKeyPress, ...otherProps } = props;\n    const { listboxRef, searchQuery, setSearchQuery, setValidationError, validationError, setOpen } = useSelect2Context();\n\n    const handleChange = event => {\n        if (validationError) {\n            setValidationError(undefined);\n        }\n\n        setSearchQuery(event.target.value);\n    };\n\n    const handleKeyDown = event => {\n        // space is an aria selection key, so we have to remove it to allow spaces\n        if (event.key === ' ') {\n            return;\n        }\n\n        // Select2 should close dropdown and receive focus, when user press Tab while searching (UX requirement to support better keyboard navigation)\n        if (event.key === 'Tab') {\n            setOpen(false);\n            onTabKeyPress();\n        }\n\n        if (isAriaSelectionKey(event) || event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n            event.preventDefault();\n            // forward navigation events onto the underlying collection - we want arrow keys to work from inside the filter input\n            listboxRef?.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n            return;\n        }\n    };\n\n    return (\n        <Field\n            className={cn('mx-1.5 mb-1.5 !min-h-fit ', { '!pb-0': !validationError })}\n            invalid={!!validationError}\n            message={validationError?.message}>\n            <Input\n                {...otherProps}\n                aria-hidden\n                autoFocus\n                invalid={!!validationError}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                ref={ref}\n                value={searchQuery}\n            />\n        </Field>\n    );\n});\n"],"names":["Search","React","forwardRef","ListboxSearch","props","ref","onTabKeyPress","otherProps","listboxRef","searchQuery","setSearchQuery","setValidationError","validationError","setOpen","useSelect2Context","handleChange","event","undefined","target","value","handleKeyDown","key","isAriaSelectionKey","_listboxRef$current","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","Field","className","cn","invalid","message","Input","autoFocus","onChange","onKeyDown"],"mappings":";;;;;;;;MAYaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAuC,SAASC,aAAaA,CAACC,KAAK,EAAEC,GAAG;EAC1G,MAAM;IAAEC,aAAa;IAAE,GAAGC;GAAY,GAAGH,KAAK;EAC9C,MAAM;IAAEI,UAAU;IAAEC,WAAW;IAAEC,cAAc;IAAEC,kBAAkB;IAAEC,eAAe;IAAEC;GAAS,GAAGC,iBAAiB,EAAE;EAErH,MAAMC,YAAY,GAAGC,KAAK;IACtB,IAAIJ,eAAe,EAAE;MACjBD,kBAAkB,CAACM,SAAS,CAAC;;IAGjCP,cAAc,CAACM,KAAK,CAACE,MAAM,CAACC,KAAK,CAAC;GACrC;EAED,MAAMC,aAAa,GAAGJ,KAAK;;IAEvB,IAAIA,KAAK,CAACK,GAAG,KAAK,GAAG,EAAE;MACnB;;;IAIJ,IAAIL,KAAK,CAACK,GAAG,KAAK,KAAK,EAAE;MACrBR,OAAO,CAAC,KAAK,CAAC;MACdP,aAAa,EAAE;;IAGnB,IAAIgB,kBAAkB,CAACN,KAAK,CAAC,IAAIA,KAAK,CAACK,GAAG,KAAK,WAAW,IAAIL,KAAK,CAACK,GAAG,KAAK,SAAS,EAAE;MAAA,IAAAE,mBAAA;MACnFP,KAAK,CAACQ,cAAc,EAAE;;MAEtBhB,UAAU,aAAVA,UAAU,wBAAAe,mBAAA,GAAVf,UAAU,CAAEiB,OAAO,cAAAF,mBAAA,uBAAnBA,mBAAA,CAAqBG,aAAa,CAACC,yBAAyB,CAACX,KAA8C,CAAC,CAAC;MAC7G;;GAEP;EAED,oBACIf,6BAAC2B,KAAK;IACFC,SAAS,EAAEC,EAAE,CAAC,2BAA2B,EAAE;MAAE,OAAO,EAAE,CAAClB;KAAiB,CAAC;IACzEmB,OAAO,EAAE,CAAC,CAACnB,eAAe;IAC1BoB,OAAO,EAAEpB,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEoB;kBAC1B/B,6BAACgC,KAAK,oBACE1B,UAAU;;IAEd2B,SAAS;IACTH,OAAO,EAAE,CAAC,CAACnB,eAAe;IAC1BuB,QAAQ,EAAEpB,YAAY;IACtBqB,SAAS,EAAEhB,aAAa;IACxBf,GAAG,EAAEA,GAAG;IACRc,KAAK,EAAEV;KACT,CACE;AAEhB,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Select2/hooks/useChildren.js

@@ -1,6 +1,6 @@
 import React__default from 'react';
 
-const isGroup = child => !!child.props.heading;
+const isGroup = child => !!child.props.heading || !!child.props.hasSeparator;
 const useChildren = ({
   children: initialChildren,
   emptyValue,

package/dist/esm/packages/taco/src/components/Select2/hooks/useChildren.js.map

@@ -1 +1 @@
-{"version":3,"file":"useChildren.js","sources":["../../../../../../../../src/components/Select2/hooks/useChildren.tsx"],"sourcesContent":["import React from 'react';\nimport { Select2OptionProps } from '../components/Option';\nimport { Select2GroupProps } from '../Select2';\nimport { Select2Children, Select2OptionValue, Select2Value } from '../types';\n\nconst isGroup = (child: React.ReactElement) => !!child.props.heading;\n\nexport type useChildrenArgs = {\n    children: Select2Children;\n    emptyValue?: Select2OptionValue;\n    multiple?: boolean;\n    open?: boolean;\n    setValue: (nextValue: Select2OptionValue) => void;\n    value?: Select2Value;\n};\nexport const useChildren = ({ children: initialChildren, emptyValue, multiple, open, setValue, value }: useChildrenArgs) => {\n    const [searchQuery, setSearchQuery] = React.useState<string>('');\n\n    // flatten children that might be inside groups\n    // support empty value - probably a more elegant way to achieve this\n    const flattenedChildren: React.ReactElement<Select2OptionProps>[] = React.useMemo(() => {\n        const initial: React.ReactElement<Select2OptionProps>[] =\n            initialChildren\n                ?.map(child => {\n                    if (isGroup(child)) {\n                        return (child as React.ReactElement<Select2GroupProps>).props.children;\n                    }\n                    // Since we are filtering out groups just above, then casting child to React.ReactElement<Select2OptionProps>, to avoid type inconsistency errors.\n                    return child as React.ReactElement<Select2OptionProps>;\n                })\n                .flatMap(c => c) || [];\n\n        return initial;\n    }, [initialChildren]);\n\n    // set an initial value if none is set, we have to trigger state updates for controlled components\n    React.useEffect(() => {\n        if (!multiple && emptyValue === undefined && value === undefined) {\n            setValue(flattenedChildren?.[0]?.props.value);\n        }\n    }, []);\n\n    React.useEffect(() => {\n        if (!open) {\n            setSearchQuery('');\n        }\n    }, [open]);\n\n    // apply filtering\n    const filteredChildren = React.useMemo(() => {\n        return initialChildren\n            .map(child => {\n                if (isGroup(child)) {\n                    const filteredGroupChildren = (child as React.ReactElement<Select2GroupProps>).props.children.filter(\n                        groupChild => filterOption(groupChild as React.ReactElement<Select2OptionProps>, searchQuery)\n                    );\n                    return filteredGroupChildren.length\n                        ? React.cloneElement(child as React.ReactElement<Select2OptionProps>, {}, filteredGroupChildren)\n                        : null;\n                }\n\n                return filterOption(child as React.ReactElement<Select2OptionProps>, searchQuery) ? child : null;\n            })\n            .filter(child => !!child) as Select2Children;\n    }, [flattenedChildren, searchQuery]);\n\n    return {\n        flattenedChildren,\n        filteredChildren,\n        searchQuery,\n        setSearchQuery,\n    };\n};\n\nconst filterOption = (child: React.ReactElement<Select2OptionProps>, searchQuery: string) => {\n    if (child.props.textValue?.toLowerCase().includes(searchQuery.toLowerCase())) {\n        return true;\n    }\n\n    if (child.props.description?.toLowerCase().includes(searchQuery.toLowerCase())) {\n        return true;\n    }\n\n    return String(child.props.children).toLowerCase().includes(searchQuery.toLowerCase());\n};\n"],"names":["isGroup","child","props","heading","useChildren","children","initialChildren","emptyValue","multiple","open","setValue","value","searchQuery","setSearchQuery","React","useState","flattenedChildren","useMemo","initial","map","flatMap","c","useEffect","undefined","_flattenedChildren$","filteredChildren","filteredGroupChildren","filter","groupChild","filterOption","length","cloneElement","_child$props$textValu","textValue","toLowerCase","includes","_child$props$descript","description","String"],"mappings":"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"}
+{"version":3,"file":"useChildren.js","sources":["../../../../../../../../src/components/Select2/hooks/useChildren.tsx"],"sourcesContent":["import React from 'react';\nimport { Select2OptionProps } from '../components/Option';\nimport { Select2GroupProps } from '../Select2';\nimport { Select2Children, Select2OptionValue, Select2Value } from '../types';\n\nconst isGroup = (child: React.ReactElement) => !!child.props.heading || !!child.props.hasSeparator;\n\nexport type useChildrenArgs = {\n    children: Select2Children;\n    emptyValue?: Select2OptionValue;\n    multiple?: boolean;\n    open?: boolean;\n    setValue: (nextValue: Select2OptionValue) => void;\n    value?: Select2Value;\n};\nexport const useChildren = ({ children: initialChildren, emptyValue, multiple, open, setValue, value }: useChildrenArgs) => {\n    const [searchQuery, setSearchQuery] = React.useState<string>('');\n\n    // flatten children that might be inside groups\n    // support empty value - probably a more elegant way to achieve this\n    const flattenedChildren: React.ReactElement<Select2OptionProps>[] = React.useMemo(() => {\n        const initial: React.ReactElement<Select2OptionProps>[] =\n            initialChildren\n                ?.map(child => {\n                    if (isGroup(child)) {\n                        return (child as React.ReactElement<Select2GroupProps>).props.children;\n                    }\n                    // Since we are filtering out groups just above, then casting child to React.ReactElement<Select2OptionProps>, to avoid type inconsistency errors.\n                    return child as React.ReactElement<Select2OptionProps>;\n                })\n                .flatMap(c => c) || [];\n\n        return initial;\n    }, [initialChildren]);\n\n    // set an initial value if none is set, we have to trigger state updates for controlled components\n    React.useEffect(() => {\n        if (!multiple && emptyValue === undefined && value === undefined) {\n            setValue(flattenedChildren?.[0]?.props.value);\n        }\n    }, []);\n\n    React.useEffect(() => {\n        if (!open) {\n            setSearchQuery('');\n        }\n    }, [open]);\n\n    // apply filtering\n    const filteredChildren = React.useMemo(() => {\n        return initialChildren\n            .map(child => {\n                if (isGroup(child)) {\n                    const filteredGroupChildren = (child as React.ReactElement<Select2GroupProps>).props.children.filter(\n                        groupChild => filterOption(groupChild as React.ReactElement<Select2OptionProps>, searchQuery)\n                    );\n                    return filteredGroupChildren.length\n                        ? React.cloneElement(child as React.ReactElement<Select2OptionProps>, {}, filteredGroupChildren)\n                        : null;\n                }\n\n                return filterOption(child as React.ReactElement<Select2OptionProps>, searchQuery) ? child : null;\n            })\n            .filter(child => !!child) as Select2Children;\n    }, [flattenedChildren, searchQuery]);\n\n    return {\n        flattenedChildren,\n        filteredChildren,\n        searchQuery,\n        setSearchQuery,\n    };\n};\n\nconst filterOption = (child: React.ReactElement<Select2OptionProps>, searchQuery: string) => {\n    if (child.props.textValue?.toLowerCase().includes(searchQuery.toLowerCase())) {\n        return true;\n    }\n\n    if (child.props.description?.toLowerCase().includes(searchQuery.toLowerCase())) {\n        return true;\n    }\n\n    return String(child.props.children).toLowerCase().includes(searchQuery.toLowerCase());\n};\n"],"names":["isGroup","child","props","heading","hasSeparator","useChildren","children","initialChildren","emptyValue","multiple","open","setValue","value","searchQuery","setSearchQuery","React","useState","flattenedChildren","useMemo","initial","map","flatMap","c","useEffect","undefined","_flattenedChildren$","filteredChildren","filteredGroupChildren","filter","groupChild","filterOption","length","cloneElement","_child$props$textValu","textValue","toLowerCase","includes","_child$props$descript","description","String"],"mappings":"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"}

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

@@ -2,8 +2,8 @@ import React__default from 'react';
 import cn from 'classnames';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
 import { FocusScope } from '@react-aria/focus';
+import { fixedForwardRef, FontSizes } from '../../types.js';
 import { flexRender } from '@tanstack/react-table';
-import { FONT_SIZE } from './components/toolbar/FontSize.js';
 import { useCssGrid } from './hooks/useCssGrid.js';
 import { useColumnFreezingStyle } from './hooks/features/useColumnFreezing.js';
 import { useTable } from './hooks/useTable.js';
@@ -14,7 +14,6 @@ import { Summary } from './components/columns/footer/Summary.js';
 import { useCssVars } from './hooks/useCssVars.js';
 import { useHeaderOffsetStyle } from './hooks/features/useHeaderOffsetStyle.js';
 import { ErrorAlert } from './components/alert/ErrorAlert.js';
-import { fixedForwardRef } from '../../types.js';
 export { useTable3DataLoader } from './hooks/useTableDataLoader.js';
 
 function Column(_) {
@@ -114,9 +113,9 @@ const Table = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     }
   };
   const className = cn('border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px] focus-visible:outline-none', '[&[data-resizing="true"]]:select-none', {
-    'text-xs': tableMeta.fontSize.size === FONT_SIZE.small,
-    'text-sm': tableMeta.fontSize.size === FONT_SIZE.medium,
-    'text-base': tableMeta.fontSize.size === FONT_SIZE.large
+    'text-xs': tableMeta.fontSize.size === FontSizes.small,
+    'text-sm': tableMeta.fontSize.size === FontSizes.medium,
+    'text-base': tableMeta.fontSize.size === FontSizes.large
   });
   // Print tables have "_print" as the postfix for the table id, so we can use the it to determine
   // if the table is a print table or not.

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 'classnames';\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 { FONT_SIZE } from './components/toolbar/FontSize';\nimport { ErrorAlert } from './components/alert/ErrorAlert';\nimport { fixedForwardRef } 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    // mouse capture fires before focus, so we can prevent propagation and stop double setting of the active row\n    const handleMouseCapture =\n        tableMeta.rowActive.rowActiveIndex === undefined\n            ? (event: React.MouseEvent) => {\n                  tableMeta.rowActive.handleMouseCapture(event, table.getRowModel().rows.length);\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 === FONT_SIZE.small,\n            'text-sm': tableMeta.fontSize.size === FONT_SIZE.medium,\n            'text-base': tableMeta.fontSize.size === FONT_SIZE.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\n                                onMouseDownCapture={handleMouseCapture}\n                                className=\"group/body contents\"\n                                data-taco=\"table2-body\"\n                                role=\"rowgroup\"\n                                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    Table3FontSize,\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","handleMouseCapture","handleScroll","columnFreezing","Promise","resolve","e","reject","className","cn","fontSize","size","FONT_SIZE","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","onMouseDownCapture","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 'classnames';\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    // mouse capture fires before focus, so we can prevent propagation and stop double setting of the active row\n    const handleMouseCapture =\n        tableMeta.rowActive.rowActiveIndex === undefined\n            ? (event: React.MouseEvent) => {\n                  tableMeta.rowActive.handleMouseCapture(event, table.getRowModel().rows.length);\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\n                                onMouseDownCapture={handleMouseCapture}\n                                className=\"group/body contents\"\n                                data-taco=\"table2-body\"\n                                role=\"rowgroup\"\n                                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","handleMouseCapture","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","onMouseDownCapture","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/alert/ErrorAlert.js

@@ -92,7 +92,7 @@ function ErrorAlert(props) {
   // Getting the row from core rows (ignoring search and filtering)
   const getCoreRow = React__default.useCallback(rowId => coreRows.find(coreRow => coreRow.id === rowId), [coreRows]);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-4"
+    className: "mb-4 empty:hidden"
   }, errorsRowIds.length ? ( /*#__PURE__*/React__default.createElement(Alert, {
     state: "error",
     className: "mb-1"

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorAlert.js","sources":["../../../../../../../../../src/components/Table3/components/alert/ErrorAlert.tsx"],"sourcesContent":["import { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { TableStrategy } from '../../types';\nimport React from 'react';\nimport { Alert } from '../../../Alert/Alert';\nimport { Button } from '../../../Button/Button';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { focusableSelector } from '../../util/editing';\nimport { lastCellIndex } from '../rows/Row';\nimport { Dialog } from '../../../Dialog/Dialog';\nimport { Group } from '../../../Group/Group';\n\nexport type ErrorAlertProps<TType = unknown> = {\n    table: RTable<TType>;\n    tableRef: React.RefObject<HTMLDivElement>;\n    scrollToIndex: TableStrategy['scrollToIndex'];\n    rowIdentifier?: string;\n};\n\nexport function ErrorAlert<TType = unknown>(props: ErrorAlertProps<TType>) {\n    const { table, tableRef, scrollToIndex, rowIdentifier } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const errors = tableMeta.validation.errors;\n    const errorsRowIds = errors ? Object.keys(errors) : [];\n    const rows = table.getRowModel().rows;\n    const coreRows = table.getCoreRowModel().rows;\n    const { texts } = useLocalization();\n    const [resetFiltersConfirmationOpen, setResetFiltersConfirmationOpen] = React.useState(false);\n    const [internalRowId, setInternalRowId] = React.useState<string | null>(null);\n    const [internalRowIndex, setInternalRowIndex] = React.useState<number | null>(null);\n    const [isFiltersReset, setIsFiltersReset] = React.useState(false);\n    const columns = table.getAllFlatColumns();\n    const column = columns.find(column => column.id === rowIdentifier);\n    const rowIdentifierHeader = column?.columnDef.meta?.header;\n\n    // Find and focus first invalid cell\n    const navigateToFirstInvalidCell = () => {\n        const firstInvalidCell = tableRef.current?.querySelector(\n            '[role=\"row\"][data-current=\"true\"] [role=\"cell\"][data-invalid=\"true\"]'\n        );\n        const firstInvalidElement = firstInvalidCell?.querySelector(focusableSelector);\n\n        if (firstInvalidElement) {\n            (firstInvalidElement as HTMLElement)?.focus();\n            lastCellIndex.value = firstInvalidCell?.getAttribute('data-column-index');\n        }\n    };\n\n    // Navigate to row and focus first invalid cell\n    const navigateToRow = rowIndex => {\n        tableMeta.rowActive.setRowActiveIndex(rowIndex);\n        scrollToIndex(rowIndex, { align: 'center' });\n        lastCellIndex.value = undefined;\n\n        // Need to request animation frame here, because newly selected row is not rendered yet.\n        requestAnimationFrame(() => {\n            navigateToFirstInvalidCell();\n        });\n    };\n\n    // When internal row index is changed after click on row link, we should navigate to the row.\n    React.useEffect(() => {\n        if (internalRowIndex !== null && internalRowIndex >= 0) {\n            navigateToRow(internalRowIndex);\n        }\n    }, [internalRowIndex]);\n\n    // When filters are reset, we're able to get the real row index by rowId\n    React.useEffect(() => {\n        if (isFiltersReset) {\n            const rowIndex = rows.findIndex(row => row.id === internalRowId);\n            if (rowIndex === -1) {\n                return;\n            }\n            setInternalRowIndex(rowIndex);\n        }\n    }, [isFiltersReset]);\n\n    const onRowNumberClick = React.useCallback(\n        (rowId: string) => {\n            // When row is hidden due filtering it will not be present in rows (but it still will be present in coreRows)\n            const foundIndex = rows.findIndex(row => row.id === rowId);\n            if (foundIndex === -1) {\n                setIsFiltersReset(false);\n                setResetFiltersConfirmationOpen(true);\n\n                // Since row indexes changed due filtering, we need to save row id, so that we can find it when filters will be reset\n                setInternalRowId(rowId);\n                return;\n            }\n\n            // In cases when user clicked on a row link multiple times we still need to navigate to the row, and focus the cell,\n            // because row/cell will loose focus on next click, but row index will not change.\n            if (foundIndex === internalRowIndex) {\n                navigateToRow(foundIndex);\n            } else {\n                setInternalRowIndex(foundIndex);\n            }\n        },\n        [rows, internalRowIndex]\n    );\n\n    const onResetFiltersConfirm = () => {\n        setIsFiltersReset(true);\n    };\n\n    // Getting the row from core rows (ignoring search and filtering)\n    const getCoreRow = React.useCallback((rowId: string) => coreRows.find(coreRow => coreRow.id === rowId), [coreRows]);\n\n    return (\n        <div className=\"mb-4\">\n            {errorsRowIds.length ? (\n                <Alert state=\"error\" className=\"mb-1\">\n                    <>\n                        <b>\n                            {errorsRowIds.length} {texts.table3.validation.alert.unsavedEntries(errorsRowIds.length)}\n                        </b>{' '}\n                    </>\n                    {rowIdentifierHeader || texts.table3.validation.index}{' '}\n                    {errorsRowIds.map((rowId: string, index) => {\n                        const coreRow = getCoreRow(rowId);\n                        return (\n                            <>\n                                <Button\n                                    key={rowId}\n                                    className=\"!min-h-[theme(spacing.2)] !min-w-[theme(spacing.2)] !px-1\"\n                                    appearance=\"discrete\"\n                                    onClick={() => {\n                                        onRowNumberClick(rowId);\n                                    }}>\n                                    {/* Getting row from core rows, because 'table.getRow' will fail if row is hidden due filtering */}\n                                    {rowIdentifier ? coreRow?.original[rowIdentifier] : coreRow?.index}\n                                </Button>\n                                <span key={`${rowId}_comma`}>{index < errorsRowIds.length - 1 ? ',' : ''}</span>\n                            </>\n                        );\n                    })}\n                    {texts.table3.validation.alert.incompleteAndHavntBeenSaved(errorsRowIds.length)}\n                </Alert>\n            ) : null}\n            <FilterResetDialog\n                open={resetFiltersConfirmationOpen}\n                onClose={() => {\n                    setResetFiltersConfirmationOpen(false);\n                }}\n                onConfirm={onResetFiltersConfirm}\n                table={table}\n            />\n        </div>\n    );\n}\n\ntype FilterResetDialogProps<TType = unknown> = {\n    open: boolean;\n    onClose: () => void;\n    onConfirm: () => void;\n    table: RTable<TType>;\n};\nfunction FilterResetDialog<TType = unknown>(props: FilterResetDialogProps<TType>) {\n    const { open, onClose, onConfirm, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const { texts } = useLocalization();\n\n    const resetFilters = React.useCallback(() => {\n        tableMeta.search.setQuery('');\n        table.resetGlobalFilter();\n        table.resetColumnFilters();\n    }, [table, tableMeta.search]);\n\n    const handleConfirmClick = () => {\n        resetFilters();\n        onConfirm();\n        onClose();\n    };\n\n    return (\n        <Dialog open={open} onClose={onClose} size=\"xs\">\n            <Dialog.Content aria-label=\"Create a new account\">\n                <Dialog.Title>{texts.table3.validation.resetFiltersDialog.title}</Dialog.Title>\n\n                <p>{texts.table3.validation.resetFiltersDialog.description}</p>\n\n                <Dialog.Footer>\n                    <Group>\n                        <Dialog.Close>\n                            <Button>{texts.table3.validation.resetFiltersDialog.cancel}</Button>\n                        </Dialog.Close>\n                        <Button appearance=\"primary\" onClick={handleConfirmClick}>\n                            {texts.table3.validation.resetFiltersDialog.confirm}\n                        </Button>\n                    </Group>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["ErrorAlert","props","table","tableRef","scrollToIndex","rowIdentifier","tableMeta","options","meta","errors","validation","errorsRowIds","Object","keys","rows","getRowModel","coreRows","getCoreRowModel","texts","useLocalization","resetFiltersConfirmationOpen","setResetFiltersConfirmationOpen","React","useState","internalRowId","setInternalRowId","internalRowIndex","setInternalRowIndex","isFiltersReset","setIsFiltersReset","columns","getAllFlatColumns","column","find","id","rowIdentifierHeader","_column$columnDef$met","columnDef","header","navigateToFirstInvalidCell","firstInvalidCell","_tableRef$current","current","querySelector","firstInvalidElement","focusableSelector","focus","lastCellIndex","value","getAttribute","navigateToRow","rowIndex","rowActive","setRowActiveIndex","align","undefined","requestAnimationFrame","useEffect","findIndex","row","onRowNumberClick","useCallback","rowId","foundIndex","onResetFiltersConfirm","getCoreRow","coreRow","className","length","Alert","state","table3","alert","unsavedEntries","index","map","Button","key","appearance","onClick","original","incompleteAndHavntBeenSaved","FilterResetDialog","open","onClose","onConfirm","resetFilters","search","setQuery","resetGlobalFilter","resetColumnFilters","handleConfirmClick","Dialog","size","Content","Title","resetFiltersDialog","title","description","Footer","Group","Close","cancel","confirm"],"mappings":"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"}
+{"version":3,"file":"ErrorAlert.js","sources":["../../../../../../../../../src/components/Table3/components/alert/ErrorAlert.tsx"],"sourcesContent":["import { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { TableStrategy } from '../../types';\nimport React from 'react';\nimport { Alert } from '../../../Alert/Alert';\nimport { Button } from '../../../Button/Button';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { focusableSelector } from '../../util/editing';\nimport { lastCellIndex } from '../rows/Row';\nimport { Dialog } from '../../../Dialog/Dialog';\nimport { Group } from '../../../Group/Group';\n\nexport type ErrorAlertProps<TType = unknown> = {\n    table: RTable<TType>;\n    tableRef: React.RefObject<HTMLDivElement>;\n    scrollToIndex: TableStrategy['scrollToIndex'];\n    rowIdentifier?: string;\n};\n\nexport function ErrorAlert<TType = unknown>(props: ErrorAlertProps<TType>) {\n    const { table, tableRef, scrollToIndex, rowIdentifier } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const errors = tableMeta.validation.errors;\n    const errorsRowIds = errors ? Object.keys(errors) : [];\n    const rows = table.getRowModel().rows;\n    const coreRows = table.getCoreRowModel().rows;\n    const { texts } = useLocalization();\n    const [resetFiltersConfirmationOpen, setResetFiltersConfirmationOpen] = React.useState(false);\n    const [internalRowId, setInternalRowId] = React.useState<string | null>(null);\n    const [internalRowIndex, setInternalRowIndex] = React.useState<number | null>(null);\n    const [isFiltersReset, setIsFiltersReset] = React.useState(false);\n    const columns = table.getAllFlatColumns();\n    const column = columns.find(column => column.id === rowIdentifier);\n    const rowIdentifierHeader = column?.columnDef.meta?.header;\n\n    // Find and focus first invalid cell\n    const navigateToFirstInvalidCell = () => {\n        const firstInvalidCell = tableRef.current?.querySelector(\n            '[role=\"row\"][data-current=\"true\"] [role=\"cell\"][data-invalid=\"true\"]'\n        );\n        const firstInvalidElement = firstInvalidCell?.querySelector(focusableSelector);\n\n        if (firstInvalidElement) {\n            (firstInvalidElement as HTMLElement)?.focus();\n            lastCellIndex.value = firstInvalidCell?.getAttribute('data-column-index');\n        }\n    };\n\n    // Navigate to row and focus first invalid cell\n    const navigateToRow = rowIndex => {\n        tableMeta.rowActive.setRowActiveIndex(rowIndex);\n        scrollToIndex(rowIndex, { align: 'center' });\n        lastCellIndex.value = undefined;\n\n        // Need to request animation frame here, because newly selected row is not rendered yet.\n        requestAnimationFrame(() => {\n            navigateToFirstInvalidCell();\n        });\n    };\n\n    // When internal row index is changed after click on row link, we should navigate to the row.\n    React.useEffect(() => {\n        if (internalRowIndex !== null && internalRowIndex >= 0) {\n            navigateToRow(internalRowIndex);\n        }\n    }, [internalRowIndex]);\n\n    // When filters are reset, we're able to get the real row index by rowId\n    React.useEffect(() => {\n        if (isFiltersReset) {\n            const rowIndex = rows.findIndex(row => row.id === internalRowId);\n            if (rowIndex === -1) {\n                return;\n            }\n            setInternalRowIndex(rowIndex);\n        }\n    }, [isFiltersReset]);\n\n    const onRowNumberClick = React.useCallback(\n        (rowId: string) => {\n            // When row is hidden due filtering it will not be present in rows (but it still will be present in coreRows)\n            const foundIndex = rows.findIndex(row => row.id === rowId);\n            if (foundIndex === -1) {\n                setIsFiltersReset(false);\n                setResetFiltersConfirmationOpen(true);\n\n                // Since row indexes changed due filtering, we need to save row id, so that we can find it when filters will be reset\n                setInternalRowId(rowId);\n                return;\n            }\n\n            // In cases when user clicked on a row link multiple times we still need to navigate to the row, and focus the cell,\n            // because row/cell will loose focus on next click, but row index will not change.\n            if (foundIndex === internalRowIndex) {\n                navigateToRow(foundIndex);\n            } else {\n                setInternalRowIndex(foundIndex);\n            }\n        },\n        [rows, internalRowIndex]\n    );\n\n    const onResetFiltersConfirm = () => {\n        setIsFiltersReset(true);\n    };\n\n    // Getting the row from core rows (ignoring search and filtering)\n    const getCoreRow = React.useCallback((rowId: string) => coreRows.find(coreRow => coreRow.id === rowId), [coreRows]);\n\n    return (\n        <div className=\"mb-4 empty:hidden\">\n            {errorsRowIds.length ? (\n                <Alert state=\"error\" className=\"mb-1\">\n                    <>\n                        <b>\n                            {errorsRowIds.length} {texts.table3.validation.alert.unsavedEntries(errorsRowIds.length)}\n                        </b>{' '}\n                    </>\n                    {rowIdentifierHeader || texts.table3.validation.index}{' '}\n                    {errorsRowIds.map((rowId: string, index) => {\n                        const coreRow = getCoreRow(rowId);\n                        return (\n                            <>\n                                <Button\n                                    key={rowId}\n                                    className=\"!min-h-[theme(spacing.2)] !min-w-[theme(spacing.2)] !px-1\"\n                                    appearance=\"discrete\"\n                                    onClick={() => {\n                                        onRowNumberClick(rowId);\n                                    }}>\n                                    {/* Getting row from core rows, because 'table.getRow' will fail if row is hidden due filtering */}\n                                    {rowIdentifier ? coreRow?.original[rowIdentifier] : coreRow?.index}\n                                </Button>\n                                <span key={`${rowId}_comma`}>{index < errorsRowIds.length - 1 ? ',' : ''}</span>\n                            </>\n                        );\n                    })}\n                    {texts.table3.validation.alert.incompleteAndHavntBeenSaved(errorsRowIds.length)}\n                </Alert>\n            ) : null}\n            <FilterResetDialog\n                open={resetFiltersConfirmationOpen}\n                onClose={() => {\n                    setResetFiltersConfirmationOpen(false);\n                }}\n                onConfirm={onResetFiltersConfirm}\n                table={table}\n            />\n        </div>\n    );\n}\n\ntype FilterResetDialogProps<TType = unknown> = {\n    open: boolean;\n    onClose: () => void;\n    onConfirm: () => void;\n    table: RTable<TType>;\n};\nfunction FilterResetDialog<TType = unknown>(props: FilterResetDialogProps<TType>) {\n    const { open, onClose, onConfirm, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const { texts } = useLocalization();\n\n    const resetFilters = React.useCallback(() => {\n        tableMeta.search.setQuery('');\n        table.resetGlobalFilter();\n        table.resetColumnFilters();\n    }, [table, tableMeta.search]);\n\n    const handleConfirmClick = () => {\n        resetFilters();\n        onConfirm();\n        onClose();\n    };\n\n    return (\n        <Dialog open={open} onClose={onClose} size=\"xs\">\n            <Dialog.Content aria-label=\"Create a new account\">\n                <Dialog.Title>{texts.table3.validation.resetFiltersDialog.title}</Dialog.Title>\n\n                <p>{texts.table3.validation.resetFiltersDialog.description}</p>\n\n                <Dialog.Footer>\n                    <Group>\n                        <Dialog.Close>\n                            <Button>{texts.table3.validation.resetFiltersDialog.cancel}</Button>\n                        </Dialog.Close>\n                        <Button appearance=\"primary\" onClick={handleConfirmClick}>\n                            {texts.table3.validation.resetFiltersDialog.confirm}\n                        </Button>\n                    </Group>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["ErrorAlert","props","table","tableRef","scrollToIndex","rowIdentifier","tableMeta","options","meta","errors","validation","errorsRowIds","Object","keys","rows","getRowModel","coreRows","getCoreRowModel","texts","useLocalization","resetFiltersConfirmationOpen","setResetFiltersConfirmationOpen","React","useState","internalRowId","setInternalRowId","internalRowIndex","setInternalRowIndex","isFiltersReset","setIsFiltersReset","columns","getAllFlatColumns","column","find","id","rowIdentifierHeader","_column$columnDef$met","columnDef","header","navigateToFirstInvalidCell","firstInvalidCell","_tableRef$current","current","querySelector","firstInvalidElement","focusableSelector","focus","lastCellIndex","value","getAttribute","navigateToRow","rowIndex","rowActive","setRowActiveIndex","align","undefined","requestAnimationFrame","useEffect","findIndex","row","onRowNumberClick","useCallback","rowId","foundIndex","onResetFiltersConfirm","getCoreRow","coreRow","className","length","Alert","state","table3","alert","unsavedEntries","index","map","Button","key","appearance","onClick","original","incompleteAndHavntBeenSaved","FilterResetDialog","open","onClose","onConfirm","resetFilters","search","setQuery","resetGlobalFilter","resetColumnFilters","handleConfirmClick","Dialog","size","Content","Title","resetFiltersDialog","title","description","Footer","Group","Close","cancel","confirm"],"mappings":"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"}

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

@@ -132,6 +132,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
           handleChange(nextValue);
         }
       },
+      fontSize: tableMeta.fontSize.size,
       value
     }, data);
   } else if (controlRenderer === 'datepicker') {

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

@@ -1 +1 @@
-{"version":3,"file":"EditingControl.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Cell as RTCell, Column as RTColumn, Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport _ from 'lodash';\n\nimport { deselectInputValue } from '../../../../../utils/input';\nimport { hasChanged } from '../../../util/editing';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { getCellAlignmentClasses, getInputAppearanceClassnames } from '../styles';\nimport { mergeRefs } from '../../../../../utils/mergeRefs';\nimport { Table3ColumnAlignment, Table3ColumnDataType } from '../../../types';\nimport { TextareaControl } from './controls/TextareaControl';\nimport { shouldTriggerShortcut } from '../../../../../utils/keyboard';\nimport { getTableLeftScrollDistance } from '../../../util/scrolling';\n\nexport type EditingControlProps<TType = unknown> = {\n    align?: Table3ColumnAlignment;\n    column: RTColumn<TType, unknown>;\n    data: TType;\n    initialValue: any;\n    value: any;\n    onBlur: (event: React.FocusEvent) => void;\n    onFocus: (event: React.FocusEvent) => void;\n    onChange: (value: any) => void;\n    ref: React.Ref<HTMLElement>;\n    table: RTTable<TType>;\n    tableRef: React.RefObject<HTMLDivElement>;\n    cell: RTCell<TType, unknown>;\n    error?: string;\n    tabIndex?: number;\n    isActiveRow?: boolean;\n};\n\nexport const EditingControl = React.forwardRef<HTMLElement, any>(function Control<TType = unknown>(\n    props: EditingControlProps<TType>,\n    externalRef: React.Ref<HTMLElement>\n) {\n    const {\n        align,\n        column,\n        data,\n        initialValue,\n        onChange: handleChange,\n        table,\n        tableRef,\n        value,\n        cell,\n        error,\n        isActiveRow,\n        ...attributes\n    } = props;\n\n    const tableMeta = table.options.meta as TableMeta<unknown>;\n    const ref = React.useRef<HTMLElement>();\n    const refCallback = mergeRefs([ref, externalRef]);\n\n    const columnMeta = column.columnDef.meta;\n    const controlRenderer = columnMeta?.control;\n\n    const isCellInDetailMode =\n        tableMeta.editing.detailModeEditing && (ref as React.RefObject<HTMLElement>)?.current?.contains(document.activeElement);\n\n    const originalRow = cell.row.original as TType;\n\n    // Revert to initial value if escape was pressed\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        // For some reason keydown event handler is not propogated to the table when input or other control element is\n        // in focus so we need to check for shortcut that toggles the editing.\n        if (shouldTriggerShortcut(event, { key: 'e', meta: true, shift: false })) {\n            tableMeta.editing.toggleEditing(false);\n            return;\n        }\n\n        const target = event.target as HTMLInputElement;\n\n        if (target.readOnly) {\n            return;\n        }\n\n        // Prevent row arrow shortcuts triggering when in detail mode\n        if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {\n            event.stopPropagation();\n        }\n\n        // Revert to initial value if escape was pressed\n        if (event.key === 'Escape') {\n            event.preventDefault();\n\n            if (tableMeta.editing.detailModeEditing) {\n                tableMeta.editing.setDetailModeEditing(false);\n\n                if (value !== initialValue) {\n                    // Before reseting to initial value, we need to check if edited row with cell initial value is the same as original row,\n                    // and in this case we need to completely remove row from editing state to avoid saving the same data as original.\n                    const changedRow: any = tableMeta.editing.changes ? tableMeta.editing.changes[cell.row.id] : {};\n                    const rowEdtitingDataWithInitialValue = { ...changedRow, [cell.column.id]: initialValue };\n                    if (_.isEqual(cell.row.original, rowEdtitingDataWithInitialValue)) {\n                        tableMeta.editing.resetChange(cell.row.id);\n                    } else {\n                        handleChange(initialValue);\n                    }\n                }\n            } else {\n                tableMeta.editing.toggleEditing(false);\n                tableRef.current?.focus();\n            }\n\n            return;\n        }\n\n        // Should enable/disable editing mode if Enter was clicked\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (!tableMeta.editing.detailModeEditing) {\n                deselectInputValue(target);\n            } else {\n                target?.select?.();\n            }\n\n            // Ketydown \"Enter\" should toggle edititng mode\n            tableMeta.editing.setDetailModeEditing(!tableMeta.editing.detailModeEditing);\n\n            return;\n        }\n    };\n\n    const isNumber = columnMeta?.dataType === ('number' as Table3ColumnDataType);\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        handleKeyDown(event);\n\n        // Switching to editing mode, when key pressed any alphabetical character or number\n        if (/^[a-z0-9]$/i.test(event.key)) {\n            tableMeta.editing.setDetailModeEditing(true);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent) => {\n        const { frozenColumnIndex: externalFrozenColumnIndex = -1, frozenInternalColumnCount = 0 } = tableMeta.columnFreezing;\n        const tableElement = tableMeta.tableRef.current;\n        const frozenColumnIndex =\n            externalFrozenColumnIndex > -1\n                ? externalFrozenColumnIndex + frozenInternalColumnCount\n                : frozenInternalColumnCount - 1;\n        const cell = event.target?.closest('[role=\"cell\"]');\n\n        if (!tableElement || !cell) {\n            return;\n        }\n\n        const isEditing = true;\n        const leftScrollDistance = getTableLeftScrollDistance(tableElement, cell, frozenColumnIndex, isEditing);\n\n        if (leftScrollDistance !== null) {\n            tableElement.scrollLeft = leftScrollDistance;\n        }\n    };\n\n    if (typeof controlRenderer === 'function') {\n        return controlRenderer(\n            {\n                ...attributes,\n                invalid: !!error,\n                onFocus: handleFocus,\n                ref: refCallback,\n                setValue: nextValue => {\n                    if (nextValue !== value) {\n                        handleChange(nextValue);\n                    }\n                },\n                value,\n            },\n            data\n        );\n    } else if (controlRenderer === 'datepicker') {\n        const handleDatepickerChange = event => {\n            // When datepicker looses focus, it triggers change event, even if date wasn't changed,\n            // so adding additional check here to prevent adding change to the edititng state.\n            const originalDate = originalRow[cell.column.id];\n            const changedDate = (event as any).detail;\n            if (hasChanged(originalDate, changedDate)) {\n                handleChange(changedDate);\n            }\n        };\n\n        return (\n            <Datepicker\n                {...attributes}\n                invalid={!!error}\n                className={cn({\n                    '[&_input]:!yt-focus-dark': isCellInDetailMode,\n                })}\n                onChange={handleDatepickerChange}\n                onFocus={handleFocus}\n                onKeyDown={handleInputKeyDown}\n                ref={refCallback}\n                value={value as Date}\n            />\n        );\n    } else if (controlRenderer === 'switch') {\n        return (\n            <Switch {...attributes} checked={Boolean(value)} onChange={handleChange} onFocus={handleFocus} ref={refCallback} />\n        );\n    } else if (controlRenderer === 'textarea') {\n        return (\n            <TextareaControl\n                {...props}\n                invalid={!!error}\n                isCellInDetailMode={isCellInDetailMode}\n                onFocus={handleFocus}\n                onKeyDown={handleInputKeyDown}\n                ref={refCallback}\n                fontSize={tableMeta.fontSize.size}\n            />\n        );\n    }\n\n    return (\n        <Input\n            {...attributes}\n            invalid={!!error}\n            className={cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {\n                '!yt-focus-dark': isCellInDetailMode,\n            })}\n            onChange={event => {\n                handleChange(event.target.value);\n            }}\n            onFocus={handleFocus}\n            onKeyDown={handleInputKeyDown}\n            ref={refCallback}\n            type={isNumber ? 'number' : undefined}\n            value={isNumber ? value : String(value ?? '')}\n        />\n    );\n});\n"],"names":["EditingControl","React","forwardRef","Control","props","externalRef","align","column","data","initialValue","onChange","handleChange","table","tableRef","value","cell","error","isActiveRow","attributes","tableMeta","options","meta","ref","useRef","refCallback","mergeRefs","columnMeta","columnDef","controlRenderer","control","isCellInDetailMode","editing","detailModeEditing","_ref$current","current","contains","document","activeElement","originalRow","row","original","handleKeyDown","event","shouldTriggerShortcut","key","shift","toggleEditing","target","readOnly","stopPropagation","preventDefault","setDetailModeEditing","changedRow","changes","id","rowEdtitingDataWithInitialValue","_","isEqual","resetChange","_tableRef$current","focus","deselectInputValue","_target$select","select","call","isNumber","dataType","handleInputKeyDown","test","handleFocus","frozenColumnIndex","externalFrozenColumnIndex","frozenInternalColumnCount","columnFreezing","tableElement","_event$target","closest","isEditing","leftScrollDistance","getTableLeftScrollDistance","scrollLeft","invalid","onFocus","setValue","nextValue","handleDatepickerChange","originalDate","changedDate","detail","hasChanged","Datepicker","className","cn","onKeyDown","Switch","checked","Boolean","TextareaControl","fontSize","size","Input","getInputAppearanceClassnames","getCellAlignmentClasses","type","undefined","String"],"mappings":";;;;;;;;;;;;;;MAmCaA,cAAc,gBAAGC,cAAK,CAACC,UAAU,CAAmB,SAASC,OAAOA,CAC7EC,KAAiC,EACjCC,WAAmC;;EAEnC,MAAM;IACFC,KAAK;IACLC,MAAM;IACNC,IAAI;IACJC,YAAY;IACZC,QAAQ,EAAEC,YAAY;IACtBC,KAAK;IACLC,QAAQ;IACRC,KAAK;IACLC,IAAI;IACJC,KAAK;IACLC,WAAW;IACX,GAAGC;GACN,GAAGd,KAAK;EAET,MAAMe,SAAS,GAAGP,KAAK,CAACQ,OAAO,CAACC,IAA0B;EAC1D,MAAMC,GAAG,GAAGrB,cAAK,CAACsB,MAAM,EAAe;EACvC,MAAMC,WAAW,GAAGC,SAAS,CAAC,CAACH,GAAG,EAAEjB,WAAW,CAAC,CAAC;EAEjD,MAAMqB,UAAU,GAAGnB,MAAM,CAACoB,SAAS,CAACN,IAAI;EACxC,MAAMO,eAAe,GAAGF,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEG,OAAO;EAE3C,MAAMC,kBAAkB,GACpBX,SAAS,CAACY,OAAO,CAACC,iBAAiB,KAAKV,GAAoC,aAApCA,GAAoC,wBAAAW,YAAA,GAApCX,GAAoC,CAAEY,OAAO,cAAAD,YAAA,uBAA7CA,YAAA,CAA+CE,QAAQ,CAACC,QAAQ,CAACC,aAAa,CAAC;EAE3H,MAAMC,WAAW,GAAGvB,IAAI,CAACwB,GAAG,CAACC,QAAiB;;EAG9C,MAAMC,aAAa,GAAIC,KAA0B;;;IAG7C,IAAIC,qBAAqB,CAACD,KAAK,EAAE;MAAEE,GAAG,EAAE,GAAG;MAAEvB,IAAI,EAAE,IAAI;MAAEwB,KAAK,EAAE;KAAO,CAAC,EAAE;MACtE1B,SAAS,CAACY,OAAO,CAACe,aAAa,CAAC,KAAK,CAAC;MACtC;;IAGJ,MAAMC,MAAM,GAAGL,KAAK,CAACK,MAA0B;IAE/C,IAAIA,MAAM,CAACC,QAAQ,EAAE;MACjB;;;IAIJ,IAAI7B,SAAS,CAACY,OAAO,CAACC,iBAAiB,KAAKU,KAAK,CAACE,GAAG,KAAK,SAAS,IAAIF,KAAK,CAACE,GAAG,KAAK,WAAW,CAAC,EAAE;MAC/FF,KAAK,CAACO,eAAe,EAAE;;;IAI3B,IAAIP,KAAK,CAACE,GAAG,KAAK,QAAQ,EAAE;MACxBF,KAAK,CAACQ,cAAc,EAAE;MAEtB,IAAI/B,SAAS,CAACY,OAAO,CAACC,iBAAiB,EAAE;QACrCb,SAAS,CAACY,OAAO,CAACoB,oBAAoB,CAAC,KAAK,CAAC;QAE7C,IAAIrC,KAAK,KAAKL,YAAY,EAAE;;;UAGxB,MAAM2C,UAAU,GAAQjC,SAAS,CAACY,OAAO,CAACsB,OAAO,GAAGlC,SAAS,CAACY,OAAO,CAACsB,OAAO,CAACtC,IAAI,CAACwB,GAAG,CAACe,EAAE,CAAC,GAAG,EAAE;UAC/F,MAAMC,+BAA+B,GAAG;YAAE,GAAGH,UAAU;YAAE,CAACrC,IAAI,CAACR,MAAM,CAAC+C,EAAE,GAAG7C;WAAc;UACzF,IAAI+C,CAAC,CAACC,OAAO,CAAC1C,IAAI,CAACwB,GAAG,CAACC,QAAQ,EAAEe,+BAA+B,CAAC,EAAE;YAC/DpC,SAAS,CAACY,OAAO,CAAC2B,WAAW,CAAC3C,IAAI,CAACwB,GAAG,CAACe,EAAE,CAAC;WAC7C,MAAM;YACH3C,YAAY,CAACF,YAAY,CAAC;;;OAGrC,MAAM;QAAA,IAAAkD,iBAAA;QACHxC,SAAS,CAACY,OAAO,CAACe,aAAa,CAAC,KAAK,CAAC;QACtC,CAAAa,iBAAA,GAAA9C,QAAQ,CAACqB,OAAO,cAAAyB,iBAAA,uBAAhBA,iBAAA,CAAkBC,KAAK,EAAE;;MAG7B;;;IAIJ,IAAIlB,KAAK,CAACE,GAAG,KAAK,OAAO,EAAE;MACvBF,KAAK,CAACQ,cAAc,EAAE;MAEtB,IAAI,CAAC/B,SAAS,CAACY,OAAO,CAACC,iBAAiB,EAAE;QACtC6B,kBAAkB,CAACd,MAAM,CAAC;OAC7B,MAAM;QAAA,IAAAe,cAAA;QACHf,MAAM,aAANA,MAAM,wBAAAe,cAAA,GAANf,MAAM,CAAEgB,MAAM,cAAAD,cAAA,uBAAdA,cAAA,CAAAE,IAAA,CAAAjB,OAAkB;;;MAItB5B,SAAS,CAACY,OAAO,CAACoB,oBAAoB,CAAC,CAAChC,SAAS,CAACY,OAAO,CAACC,iBAAiB,CAAC;MAE5E;;GAEP;EAED,MAAMiC,QAAQ,GAAG,CAAAvC,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEwC,QAAQ,MAAM,QAAiC;EAC5E,MAAMC,kBAAkB,GAAIzB,KAAkE;IAC1FD,aAAa,CAACC,KAAK,CAAC;;IAGpB,IAAI,aAAa,CAAC0B,IAAI,CAAC1B,KAAK,CAACE,GAAG,CAAC,EAAE;MAC/BzB,SAAS,CAACY,OAAO,CAACoB,oBAAoB,CAAC,IAAI,CAAC;;GAEnD;EAED,MAAMkB,WAAW,GAAI3B,KAAuB;;IACxC,MAAM;MAAE4B,iBAAiB,EAAEC,yBAAyB,GAAG,CAAC,CAAC;MAAEC,yBAAyB,GAAG;KAAG,GAAGrD,SAAS,CAACsD,cAAc;IACrH,MAAMC,YAAY,GAAGvD,SAAS,CAACN,QAAQ,CAACqB,OAAO;IAC/C,MAAMoC,iBAAiB,GACnBC,yBAAyB,GAAG,CAAC,CAAC,GACxBA,yBAAyB,GAAGC,yBAAyB,GACrDA,yBAAyB,GAAG,CAAC;IACvC,MAAMzD,IAAI,IAAA4D,aAAA,GAAGjC,KAAK,CAACK,MAAM,cAAA4B,aAAA,uBAAZA,aAAA,CAAcC,OAAO,CAAC,eAAe,CAAC;IAEnD,IAAI,CAACF,YAAY,IAAI,CAAC3D,IAAI,EAAE;MACxB;;IAGJ,MAAM8D,SAAS,GAAG,IAAI;IACtB,MAAMC,kBAAkB,GAAGC,0BAA0B,CAACL,YAAY,EAAE3D,IAAI,EAAEuD,iBAAiB,EAAEO,SAAS,CAAC;IAEvG,IAAIC,kBAAkB,KAAK,IAAI,EAAE;MAC7BJ,YAAY,CAACM,UAAU,GAAGF,kBAAkB;;GAEnD;EAED,IAAI,OAAOlD,eAAe,KAAK,UAAU,EAAE;IACvC,OAAOA,eAAe,CAClB;MACI,GAAGV,UAAU;MACb+D,OAAO,EAAE,CAAC,CAACjE,KAAK;MAChBkE,OAAO,EAAEb,WAAW;MACpB/C,GAAG,EAAEE,WAAW;MAChB2D,QAAQ,EAAEC,SAAS;QACf,IAAIA,SAAS,KAAKtE,KAAK,EAAE;UACrBH,YAAY,CAACyE,SAAS,CAAC;;OAE9B;MACDtE;KACH,EACDN,IAAI,CACP;GACJ,MAAM,IAAIoB,eAAe,KAAK,YAAY,EAAE;IACzC,MAAMyD,sBAAsB,GAAG3C,KAAK;;;MAGhC,MAAM4C,YAAY,GAAGhD,WAAW,CAACvB,IAAI,CAACR,MAAM,CAAC+C,EAAE,CAAC;MAChD,MAAMiC,WAAW,GAAI7C,KAAa,CAAC8C,MAAM;MACzC,IAAIC,UAAU,CAACH,YAAY,EAAEC,WAAW,CAAC,EAAE;QACvC5E,YAAY,CAAC4E,WAAW,CAAC;;KAEhC;IAED,oBACItF,6BAACyF,UAAU,oBACHxE,UAAU;MACd+D,OAAO,EAAE,CAAC,CAACjE,KAAK;MAChB2E,SAAS,EAAEC,EAAE,CAAC;QACV,0BAA0B,EAAE9D;OAC/B,CAAC;MACFpB,QAAQ,EAAE2E,sBAAsB;MAChCH,OAAO,EAAEb,WAAW;MACpBwB,SAAS,EAAE1B,kBAAkB;MAC7B7C,GAAG,EAAEE,WAAW;MAChBV,KAAK,EAAEA;OACT;GAET,MAAM,IAAIc,eAAe,KAAK,QAAQ,EAAE;IACrC,oBACI3B,6BAAC6F,MAAM,oBAAK5E,UAAU;MAAE6E,OAAO,EAAEC,OAAO,CAAClF,KAAK,CAAC;MAAEJ,QAAQ,EAAEC,YAAY;MAAEuE,OAAO,EAAEb,WAAW;MAAE/C,GAAG,EAAEE;OAAe;GAE1H,MAAM,IAAII,eAAe,KAAK,UAAU,EAAE;IACvC,oBACI3B,6BAACgG,eAAe,oBACR7F,KAAK;MACT6E,OAAO,EAAE,CAAC,CAACjE,KAAK;MAChBc,kBAAkB,EAAEA,kBAAkB;MACtCoD,OAAO,EAAEb,WAAW;MACpBwB,SAAS,EAAE1B,kBAAkB;MAC7B7C,GAAG,EAAEE,WAAW;MAChB0E,QAAQ,EAAE/E,SAAS,CAAC+E,QAAQ,CAACC;OAC/B;;EAIV,oBACIlG,6BAACmG,KAAK,oBACElF,UAAU;IACd+D,OAAO,EAAE,CAAC,CAACjE,KAAK;IAChB2E,SAAS,EAAEC,EAAE,CAACS,4BAA4B,EAAE,EAAEC,uBAAuB,CAAChG,KAAK,CAAC,EAAE;MAC1E,gBAAgB,EAAEwB;KACrB,CAAC;IACFpB,QAAQ,EAAEgC,KAAK;MACX/B,YAAY,CAAC+B,KAAK,CAACK,MAAM,CAACjC,KAAK,CAAC;KACnC;IACDoE,OAAO,EAAEb,WAAW;IACpBwB,SAAS,EAAE1B,kBAAkB;IAC7B7C,GAAG,EAAEE,WAAW;IAChB+E,IAAI,EAAEtC,QAAQ,GAAG,QAAQ,GAAGuC,SAAS;IACrC1F,KAAK,EAAEmD,QAAQ,GAAGnD,KAAK,GAAG2F,MAAM,CAAC3F,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE;KAC9C;AAEV,CAAC;;;;"}
+{"version":3,"file":"EditingControl.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Cell as RTCell, Column as RTColumn, Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport _ from 'lodash';\n\nimport { deselectInputValue } from '../../../../../utils/input';\nimport { hasChanged } from '../../../util/editing';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { getCellAlignmentClasses, getInputAppearanceClassnames } from '../styles';\nimport { mergeRefs } from '../../../../../utils/mergeRefs';\nimport { Table3ColumnAlignment, Table3ColumnDataType } from '../../../types';\nimport { TextareaControl } from './controls/TextareaControl';\nimport { shouldTriggerShortcut } from '../../../../../utils/keyboard';\nimport { getTableLeftScrollDistance } from '../../../util/scrolling';\n\nexport type EditingControlProps<TType = unknown> = {\n    align?: Table3ColumnAlignment;\n    column: RTColumn<TType, unknown>;\n    data: TType;\n    initialValue: any;\n    value: any;\n    onBlur: (event: React.FocusEvent) => void;\n    onFocus: (event: React.FocusEvent) => void;\n    onChange: (value: any) => void;\n    ref: React.Ref<HTMLElement>;\n    table: RTTable<TType>;\n    tableRef: React.RefObject<HTMLDivElement>;\n    cell: RTCell<TType, unknown>;\n    error?: string;\n    tabIndex?: number;\n    isActiveRow?: boolean;\n};\n\nexport const EditingControl = React.forwardRef<HTMLElement, any>(function Control<TType = unknown>(\n    props: EditingControlProps<TType>,\n    externalRef: React.Ref<HTMLElement>\n) {\n    const {\n        align,\n        column,\n        data,\n        initialValue,\n        onChange: handleChange,\n        table,\n        tableRef,\n        value,\n        cell,\n        error,\n        isActiveRow,\n        ...attributes\n    } = props;\n\n    const tableMeta = table.options.meta as TableMeta<unknown>;\n    const ref = React.useRef<HTMLElement>();\n    const refCallback = mergeRefs([ref, externalRef]);\n\n    const columnMeta = column.columnDef.meta;\n    const controlRenderer = columnMeta?.control;\n\n    const isCellInDetailMode =\n        tableMeta.editing.detailModeEditing && (ref as React.RefObject<HTMLElement>)?.current?.contains(document.activeElement);\n\n    const originalRow = cell.row.original as TType;\n\n    // Revert to initial value if escape was pressed\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        // For some reason keydown event handler is not propogated to the table when input or other control element is\n        // in focus so we need to check for shortcut that toggles the editing.\n        if (shouldTriggerShortcut(event, { key: 'e', meta: true, shift: false })) {\n            tableMeta.editing.toggleEditing(false);\n            return;\n        }\n\n        const target = event.target as HTMLInputElement;\n\n        if (target.readOnly) {\n            return;\n        }\n\n        // Prevent row arrow shortcuts triggering when in detail mode\n        if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {\n            event.stopPropagation();\n        }\n\n        // Revert to initial value if escape was pressed\n        if (event.key === 'Escape') {\n            event.preventDefault();\n\n            if (tableMeta.editing.detailModeEditing) {\n                tableMeta.editing.setDetailModeEditing(false);\n\n                if (value !== initialValue) {\n                    // Before reseting to initial value, we need to check if edited row with cell initial value is the same as original row,\n                    // and in this case we need to completely remove row from editing state to avoid saving the same data as original.\n                    const changedRow: any = tableMeta.editing.changes ? tableMeta.editing.changes[cell.row.id] : {};\n                    const rowEdtitingDataWithInitialValue = { ...changedRow, [cell.column.id]: initialValue };\n                    if (_.isEqual(cell.row.original, rowEdtitingDataWithInitialValue)) {\n                        tableMeta.editing.resetChange(cell.row.id);\n                    } else {\n                        handleChange(initialValue);\n                    }\n                }\n            } else {\n                tableMeta.editing.toggleEditing(false);\n                tableRef.current?.focus();\n            }\n\n            return;\n        }\n\n        // Should enable/disable editing mode if Enter was clicked\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (!tableMeta.editing.detailModeEditing) {\n                deselectInputValue(target);\n            } else {\n                target?.select?.();\n            }\n\n            // Ketydown \"Enter\" should toggle edititng mode\n            tableMeta.editing.setDetailModeEditing(!tableMeta.editing.detailModeEditing);\n\n            return;\n        }\n    };\n\n    const isNumber = columnMeta?.dataType === ('number' as Table3ColumnDataType);\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        handleKeyDown(event);\n\n        // Switching to editing mode, when key pressed any alphabetical character or number\n        if (/^[a-z0-9]$/i.test(event.key)) {\n            tableMeta.editing.setDetailModeEditing(true);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent) => {\n        const { frozenColumnIndex: externalFrozenColumnIndex = -1, frozenInternalColumnCount = 0 } = tableMeta.columnFreezing;\n        const tableElement = tableMeta.tableRef.current;\n        const frozenColumnIndex =\n            externalFrozenColumnIndex > -1\n                ? externalFrozenColumnIndex + frozenInternalColumnCount\n                : frozenInternalColumnCount - 1;\n        const cell = event.target?.closest('[role=\"cell\"]');\n\n        if (!tableElement || !cell) {\n            return;\n        }\n\n        const isEditing = true;\n        const leftScrollDistance = getTableLeftScrollDistance(tableElement, cell, frozenColumnIndex, isEditing);\n\n        if (leftScrollDistance !== null) {\n            tableElement.scrollLeft = leftScrollDistance;\n        }\n    };\n\n    if (typeof controlRenderer === 'function') {\n        return controlRenderer(\n            {\n                ...attributes,\n                invalid: !!error,\n                onFocus: handleFocus,\n                ref: refCallback,\n                setValue: nextValue => {\n                    if (nextValue !== value) {\n                        handleChange(nextValue);\n                    }\n                },\n                fontSize: tableMeta.fontSize.size,\n                value,\n            },\n            data\n        );\n    } else if (controlRenderer === 'datepicker') {\n        const handleDatepickerChange = event => {\n            // When datepicker looses focus, it triggers change event, even if date wasn't changed,\n            // so adding additional check here to prevent adding change to the edititng state.\n            const originalDate = originalRow[cell.column.id];\n            const changedDate = (event as any).detail;\n            if (hasChanged(originalDate, changedDate)) {\n                handleChange(changedDate);\n            }\n        };\n\n        return (\n            <Datepicker\n                {...attributes}\n                invalid={!!error}\n                className={cn({\n                    '[&_input]:!yt-focus-dark': isCellInDetailMode,\n                })}\n                onChange={handleDatepickerChange}\n                onFocus={handleFocus}\n                onKeyDown={handleInputKeyDown}\n                ref={refCallback}\n                value={value as Date}\n            />\n        );\n    } else if (controlRenderer === 'switch') {\n        return (\n            <Switch {...attributes} checked={Boolean(value)} onChange={handleChange} onFocus={handleFocus} ref={refCallback} />\n        );\n    } else if (controlRenderer === 'textarea') {\n        return (\n            <TextareaControl\n                {...props}\n                invalid={!!error}\n                isCellInDetailMode={isCellInDetailMode}\n                onFocus={handleFocus}\n                onKeyDown={handleInputKeyDown}\n                ref={refCallback}\n                fontSize={tableMeta.fontSize.size}\n            />\n        );\n    }\n\n    return (\n        <Input\n            {...attributes}\n            invalid={!!error}\n            className={cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {\n                '!yt-focus-dark': isCellInDetailMode,\n            })}\n            onChange={event => {\n                handleChange(event.target.value);\n            }}\n            onFocus={handleFocus}\n            onKeyDown={handleInputKeyDown}\n            ref={refCallback}\n            type={isNumber ? 'number' : undefined}\n            value={isNumber ? value : String(value ?? '')}\n        />\n    );\n});\n"],"names":["EditingControl","React","forwardRef","Control","props","externalRef","align","column","data","initialValue","onChange","handleChange","table","tableRef","value","cell","error","isActiveRow","attributes","tableMeta","options","meta","ref","useRef","refCallback","mergeRefs","columnMeta","columnDef","controlRenderer","control","isCellInDetailMode","editing","detailModeEditing","_ref$current","current","contains","document","activeElement","originalRow","row","original","handleKeyDown","event","shouldTriggerShortcut","key","shift","toggleEditing","target","readOnly","stopPropagation","preventDefault","setDetailModeEditing","changedRow","changes","id","rowEdtitingDataWithInitialValue","_","isEqual","resetChange","_tableRef$current","focus","deselectInputValue","_target$select","select","call","isNumber","dataType","handleInputKeyDown","test","handleFocus","frozenColumnIndex","externalFrozenColumnIndex","frozenInternalColumnCount","columnFreezing","tableElement","_event$target","closest","isEditing","leftScrollDistance","getTableLeftScrollDistance","scrollLeft","invalid","onFocus","setValue","nextValue","fontSize","size","handleDatepickerChange","originalDate","changedDate","detail","hasChanged","Datepicker","className","cn","onKeyDown","Switch","checked","Boolean","TextareaControl","Input","getInputAppearanceClassnames","getCellAlignmentClasses","type","undefined","String"],"mappings":"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"}

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

@@ -117,7 +117,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
       handleTextareaKeyDown(e);
     },
     onBlur: handleBlur,
-    className: cn(getCellAlignmentClasses(align), `h-fit resize-none`, {
+    className: cn(getCellAlignmentClasses(align), `h-fit resize-none overflow-y-hidden focus:overflow-y-auto`, {
       [`!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 'classnames';\nimport { Textarea } from '../../../../../Textarea/Textarea';\nimport { EditingControlProps } from '../EditingControl';\nimport { getCellAlignmentClasses } from '../../styles';\nimport { useMergedRef } from '../../../../../../hooks/useMergedRef';\nimport { Table3FontSize } 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<Table3FontSize, 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: Table3FontSize;\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`, {\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 'classnames';\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(\n                            getCellAlignmentClasses(align),\n                            `h-fit resize-none overflow-y-hidden focus:overflow-y-auto`,\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","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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"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Actions.js

@@ -4,11 +4,11 @@ import { IconButton } from '../../../../IconButton/IconButton.js';
 import { useLocalization } from '../../../../Provider/Localization.js';
 import { Shortcut } from '../../../../Shortcut/Shortcut.js';
 import { Menu } from '../../../../Menu/Menu.js';
+import { FontSizes } from '../../../../../types.js';
 import { Header } from '../header/Header.js';
 import { RowContext } from '../../rows/RowContext.js';
 import { DisplayCell } from '../cell/DisplayCell.js';
 import { Footer } from '../footer/Footer.js';
-import { FONT_SIZE } from '../../toolbar/FontSize.js';
 import { isIndicatorVisible, getIndicatorCellClassName } from '../cell/Indicator.js';
 
 const COLUMN_ID = '__actions';
@@ -53,8 +53,8 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
     const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
     const className = cn('-mb-2 flex justify-end pl-2 text-right', {
       // Adjust negative margin on row actions cell to ensure that the cell aligns vertically.
-      '-mt-2': fontSize === FONT_SIZE.small,
-      '-mt-1.5': fontSize !== FONT_SIZE.small
+      '-mt-2': fontSize === FontSizes.small,
+      '-mt-1.5': fontSize !== FontSizes.small
     }, props.className);
     content = /*#__PURE__*/React__default.createElement("span", {
       className: className,