@economic/taco 2.7.4 → 2.7.5

package/dist/esm/index.css

@@ -778,7 +778,8 @@
 }
 
 [data-font-size='small'] [role='cell'] [data-taco='input'],
-[data-font-size='small'] [role='cell'] [data-taco='Select2'] {
+[data-font-size='small'] [role='cell'] [data-taco='Select2'],
+[data-font-size='small'] [role='cell'] [data-taco='textarea'] {
     @apply h-6 min-h-[theme(spacing.6)] px-1.5 text-xs;
 }
 
@@ -823,7 +824,8 @@
 }
 
 [data-font-size='large'] [role='cell'] [data-taco='input'],
-[data-font-size='large'] [role='cell'] [data-taco='Select2'] {
+[data-font-size='large'] [role='cell'] [data-taco='Select2'],
+[data-font-size='large'] [role='cell'] [data-taco='textarea'] {
     @apply h-10 px-2.5 text-lg;
 }
 

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

@@ -180,10 +180,8 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
   }), flattenedChildren)), /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement(Content, {
     asChild: true,
     align: "start",
-    onOpenAutoFocus: event => {
+    onOpenAutoFocus: () => {
       var _internalRef$current;
-      event.preventDefault();
-      event.stopPropagation();
       (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
     },
     onCloseAutoFocus: event => {

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

@@ -1 +1 @@
-{"version":3,"file":"Select2.js","sources":["../../../../../../../src/components/Select2/Select2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport * as ListboxPrimitive from '../../primitives/Listbox2/Listbox2';\nimport {\n    Select2Children,\n    Select2CreateHandler,\n    Select2DeleteHandler,\n    Select2EditHandler,\n    Select2OptionValue,\n    Select2Value,\n} from './types';\nimport { Option, Select2OptionProps } from './components/Option';\nimport { Group, Select2GroupProps } from './components/Group';\nimport { Select2TitleProps, Title } from './components/Title';\nimport { Select2Context } from './components/Context';\nimport { createCollectionClassName } from './utilities';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { Trigger } from './components/Trigger';\nimport { useIsFormControl } from '../../hooks/useIsFormControl';\nimport { BubbleSelect } from '../../primitives/BubbleSelect';\nimport { Search } from './components/Search';\nimport { useChildren } from './hooks/useChildren';\n\nimport { Create } from './components/Create';\nimport { Collection } from './components/Collection';\nimport { CollectionRef } from '../../primitives/Collection/Collection';\nimport { useLocalization } from '../Provider/Localization';\nimport { useIsHoverStatePaused } from '../../hooks/useIsHoverStatePaused';\nimport { isAriaDirectionKey } from '../../utils/aria';\n//import { All } from './components/All';\n\ntype Select2Texts = {\n    allSelect: string;\n    allDeselect: string;\n    cancel: string;\n    chooseColor: string;\n    create: string;\n    delete: string;\n    save: string;\n    search: string;\n    searchOrCreate: string;\n};\n\ntype Select2Props = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    autoFocus?: boolean;\n    children: Select2Children;\n    defaultValue?: Select2Value;\n    emptyValue?: Select2OptionValue;\n    disabled?: boolean;\n    highlighted?: boolean;\n    invalid?: boolean;\n    multiple?: boolean;\n    name?: string;\n    onChange?: (value: Select2Value) => void;\n    onCreate?: Select2CreateHandler;\n    onDelete?: Select2DeleteHandler;\n    onEdit?: Select2EditHandler;\n    readOnly?: boolean;\n    required?: boolean;\n    tags?: boolean;\n    value?: Select2Value;\n};\ntype Select2PropsWithStatics = React.ForwardRefExoticComponent<Select2Props & React.RefAttributes<HTMLButtonElement>> & {\n    Option: React.ForwardRefExoticComponent<Select2OptionProps>;\n    Group: React.ForwardRefExoticComponent<Select2GroupProps>;\n    Title: React.ForwardRefExoticComponent<Select2TitleProps>;\n};\n\nconst Select2 = React.forwardRef<HTMLButtonElement, Select2Props>(function Select2(props, ref) {\n    const {\n        children: initChildren,\n        defaultValue: defaultProp,\n        disabled = false,\n        emptyValue = undefined,\n        highlighted = false,\n        invalid = false,\n        multiple = false,\n        name,\n        onChange,\n        onCreate,\n        onDelete,\n        onEdit,\n        readOnly = false,\n        tags = false,\n        value: prop,\n        ...otherProps\n    } = props;\n\n    const emptyOption: React.ReactElement<Select2OptionProps> | undefined = React.useMemo(() => {\n        if (emptyValue !== undefined && !multiple) {\n            // Empty option has 0px height, because it's empty, so need to apply height manually\n            return <Option key=\"__empty\" children=\"\" value={emptyValue} className=\"h-8\" />;\n        }\n        return;\n    }, [emptyValue, multiple]);\n\n    const initialChildren = React.useMemo(() => {\n        if (emptyOption) {\n            return [emptyOption, ...initChildren] as Select2Children;\n        }\n        return initChildren;\n    }, [emptyOption, initChildren]);\n\n    // refs\n    const internalRef = useMergedRef<HTMLButtonElement>(ref);\n    const listboxRef = React.useRef<CollectionRef>(null);\n    const searchRef = React.useRef<HTMLInputElement>(null);\n    const { texts } = useLocalization();\n    // align the listbox min width with the width of the input - it should never be smaller\n    const dimensions = useBoundingClientRectListener(internalRef);\n\n    // state\n    const [open, setOpen] = React.useState(false);\n    const [value, _setValue] = useControllableState<Select2Value>({\n        // uncontrolled\n        defaultProp,\n        // controlled\n        onChange,\n        prop,\n    });\n    const setValue = ListboxPrimitive.createListboxValueSetter(multiple, _setValue);\n    const [validationError, setValidationError] = React.useState<Error | undefined>();\n    const [shouldPauseHoverState, setShouldPauseHoverState] = useIsHoverStatePaused();\n\n    const { flattenedChildren, filteredChildren, searchQuery, setSearchQuery } = useChildren({\n        children: initialChildren,\n        emptyValue,\n        multiple,\n        open,\n        setValue,\n        value,\n    });\n\n    // context\n    const context = {\n        disabled,\n        highlighted,\n        invalid,\n        listboxRef,\n        multiple,\n        onCreate,\n        onDelete,\n        onEdit,\n        open,\n        readOnly,\n        ref: internalRef,\n        searchQuery,\n        searchRef,\n        setOpen,\n        setSearchQuery,\n        setValidationError,\n        setValue,\n        shouldPauseHoverState,\n        setShouldPauseHoverState,\n        tags,\n        validationError,\n        value,\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (open) {\n            event.preventDefault();\n        } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {\n            setOpen(true);\n        }\n\n        // the focus should always remain on the input, so we forward events on to the listbox\n        listboxRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n    };\n\n    let handleBlur;\n\n    if (otherProps.onBlur) {\n        // we might be focusing on an input or something inside the dropdown that was triggered by the select\n        // so see if the element gaining focus is inside a portal and look up its controller\n        // if we don't do this, things like validate on blur occur while simply opening the select\n        handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n            const elementGainingFocus = event.relatedTarget;\n\n            if (elementGainingFocus === undefined) {\n                return;\n            }\n\n            const portalId = elementGainingFocus?.closest('[data-radix-popper-content-wrapper] > :first-child')?.id;\n\n            if (!portalId || event.currentTarget.getAttribute(`aria-controls`) !== portalId) {\n                otherProps.onBlur?.(event);\n            }\n        };\n    }\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (isAriaDirectionKey(event)) {\n            setShouldPauseHoverState(true);\n        }\n    };\n\n    const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());\n\n    return (\n        <Select2Context.Provider value={context}>\n            <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n                <ControlledHiddenField\n                    emptyValue={emptyValue}\n                    multiple={multiple || tags}\n                    name={name}\n                    options={flattenedChildren.map(child => child.props.value)}\n                    parentRef={internalRef}\n                    setValue={setValue}\n                    value={value}\n                />\n                <PopoverPrimitive.Trigger asChild data-taco=\"Select2\">\n                    <Trigger\n                        {...otherProps}\n                        aria-haspopup=\"listbox\"\n                        emptyValue={emptyValue}\n                        onBlur={handleBlur}\n                        onKeyDown={handleKeyDown}\n                        ref={internalRef}>\n                        {flattenedChildren}\n                    </Trigger>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Content\n                        asChild\n                        align=\"start\"\n                        onOpenAutoFocus={event => {\n                            event.preventDefault();\n                            event.stopPropagation();\n                            internalRef.current?.focus();\n                        }}\n                        onCloseAutoFocus={event => {\n                            event.preventDefault();\n                            event.stopPropagation();\n                            internalRef.current?.focus();\n                        }}\n                        sideOffset={4}\n                        tabIndex={-1}>\n                        <div className={className} style={{ minWidth: dimensions?.width ? `${dimensions.width}px` : undefined }}>\n                            {flattenedChildren.length > 0 || onCreate ? (\n                                <Search\n                                    placeholder={onCreate ? texts.select2.searchOrCreate : texts.select2.search}\n                                    ref={searchRef}\n                                />\n                            ) : null}\n                            {flattenedChildren.length <= 0 ? (\n                                <div className=\"text-grey-700 -mt-0.5 flex h-8 items-center px-2\" role=\"presentation\">\n                                    No results found...\n                                </div>\n                            ) : (\n                                <ListboxPrimitive.Root\n                                    className=\"flex flex-col gap-0.5\"\n                                    customSelector=\":scope > button\"\n                                    disabled={disabled}\n                                    multiple={multiple}\n                                    onKeyDown={handleListboxKeyDown}\n                                    readOnly={readOnly}\n                                    ref={listboxRef}\n                                    setValue={setValue}\n                                    tabIndex={-1}\n                                    value={value}>\n                                    {/*multiple && !searchQuery && Array.isArray(value) ? (\n                                    <All\n                                        children={flattenedChildren}\n                                        onToggle={_setValue}\n                                        selected={value.length === flattenedChildren.length}\n                                    />\n                                ) : null*/}\n                                    {searchQuery === '' ? (\n                                        <Collection>{initialChildren}</Collection>\n                                    ) : (\n                                        <Collection>{filteredChildren}</Collection>\n                                    )}\n                                    {onCreate ? <Create onCreate={onCreate} options={flattenedChildren} /> : null}\n                                </ListboxPrimitive.Root>\n                            )}\n                        </div>\n                    </PopoverPrimitive.Content>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </Select2Context.Provider>\n    );\n}) as Select2PropsWithStatics;\nSelect2.Option = Option;\nSelect2.Group = Group;\nSelect2.Title = Title;\n\nconst ControlledHiddenField = props => {\n    const { emptyValue, multiple, name, options, parentRef, value, setValue } = props;\n    const isFormControl = useIsFormControl(parentRef, () => setValue(multiple ? [] : undefined));\n\n    let bubbleValue;\n\n    if (isFormControl) {\n        if (value !== undefined) {\n            if (multiple) {\n                bubbleValue = Array.isArray(value) ? value.map(String) : [value === null ? '' : String(value)];\n            } else {\n                bubbleValue = value === null ? '' : String(value);\n            }\n        }\n\n        return (\n            <BubbleSelect aria-hidden key={String(bubbleValue)} multiple={multiple} name={name} value={bubbleValue}>\n                {emptyValue !== undefined ? <option value={emptyValue} /> : null}\n                {options.map(option => (\n                    <option key={String(option)} value={String(option)} />\n                ))}\n            </BubbleSelect>\n        );\n    }\n\n    return null;\n};\nSelect2.displayName = 'Select2';\n\nexport { Select2 };\n\nexport type {\n    Select2Texts,\n    Select2GroupProps,\n    Select2OptionProps,\n    Select2OptionValue,\n    Select2Value,\n    Select2Props,\n    Select2TitleProps,\n};\n"],"names":["Select2","React","forwardRef","props","ref","children","initChildren","defaultValue","defaultProp","disabled","emptyValue","undefined","highlighted","invalid","multiple","name","onChange","onCreate","onDelete","onEdit","readOnly","tags","value","prop","otherProps","emptyOption","useMemo","Option","key","className","initialChildren","internalRef","useMergedRef","listboxRef","useRef","searchRef","texts","useLocalization","dimensions","useBoundingClientRectListener","open","setOpen","useState","_setValue","useControllableState","setValue","ListboxPrimitive","validationError","setValidationError","shouldPauseHoverState","setShouldPauseHoverState","useIsHoverStatePaused","flattenedChildren","filteredChildren","searchQuery","setSearchQuery","useChildren","context","handleKeyDown","event","preventDefault","ctrlKey","metaKey","test","_listboxRef$current","current","dispatchEvent","createCustomKeyboardEvent","handleBlur","onBlur","elementGainingFocus","relatedTarget","portalId","_elementGainingFocus$","closest","id","currentTarget","getAttribute","_otherProps$onBlur","call","handleListboxKeyDown","isAriaDirectionKey","cn","createCollectionClassName","Select2Context","Provider","PopoverPrimitive","onOpenChange","ControlledHiddenField","options","map","child","parentRef","asChild","Trigger","onKeyDown","align","onOpenAutoFocus","stopPropagation","_internalRef$current","focus","onCloseAutoFocus","_internalRef$current2","sideOffset","tabIndex","style","minWidth","width","length","Search","placeholder","select2","searchOrCreate","search","role","customSelector","Collection","Create","Group","Title","isFormControl","useIsFormControl","bubbleValue","Array","isArray","String","BubbleSelect","option","displayName"],"mappings":"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"}
+{"version":3,"file":"Select2.js","sources":["../../../../../../../src/components/Select2/Select2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport * as ListboxPrimitive from '../../primitives/Listbox2/Listbox2';\nimport {\n    Select2Children,\n    Select2CreateHandler,\n    Select2DeleteHandler,\n    Select2EditHandler,\n    Select2OptionValue,\n    Select2Value,\n} from './types';\nimport { Option, Select2OptionProps } from './components/Option';\nimport { Group, Select2GroupProps } from './components/Group';\nimport { Select2TitleProps, Title } from './components/Title';\nimport { Select2Context } from './components/Context';\nimport { createCollectionClassName } from './utilities';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { Trigger } from './components/Trigger';\nimport { useIsFormControl } from '../../hooks/useIsFormControl';\nimport { BubbleSelect } from '../../primitives/BubbleSelect';\nimport { Search } from './components/Search';\nimport { useChildren } from './hooks/useChildren';\n\nimport { Create } from './components/Create';\nimport { Collection } from './components/Collection';\nimport { CollectionRef } from '../../primitives/Collection/Collection';\nimport { useLocalization } from '../Provider/Localization';\nimport { useIsHoverStatePaused } from '../../hooks/useIsHoverStatePaused';\nimport { isAriaDirectionKey } from '../../utils/aria';\n//import { All } from './components/All';\n\ntype Select2Texts = {\n    allSelect: string;\n    allDeselect: string;\n    cancel: string;\n    chooseColor: string;\n    create: string;\n    delete: string;\n    save: string;\n    search: string;\n    searchOrCreate: string;\n};\n\ntype Select2Props = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    autoFocus?: boolean;\n    children: Select2Children;\n    defaultValue?: Select2Value;\n    emptyValue?: Select2OptionValue;\n    disabled?: boolean;\n    highlighted?: boolean;\n    invalid?: boolean;\n    multiple?: boolean;\n    name?: string;\n    onChange?: (value: Select2Value) => void;\n    onCreate?: Select2CreateHandler;\n    onDelete?: Select2DeleteHandler;\n    onEdit?: Select2EditHandler;\n    readOnly?: boolean;\n    required?: boolean;\n    tags?: boolean;\n    value?: Select2Value;\n};\ntype Select2PropsWithStatics = React.ForwardRefExoticComponent<Select2Props & React.RefAttributes<HTMLButtonElement>> & {\n    Option: React.ForwardRefExoticComponent<Select2OptionProps>;\n    Group: React.ForwardRefExoticComponent<Select2GroupProps>;\n    Title: React.ForwardRefExoticComponent<Select2TitleProps>;\n};\n\nconst Select2 = React.forwardRef<HTMLButtonElement, Select2Props>(function Select2(props, ref) {\n    const {\n        children: initChildren,\n        defaultValue: defaultProp,\n        disabled = false,\n        emptyValue = undefined,\n        highlighted = false,\n        invalid = false,\n        multiple = false,\n        name,\n        onChange,\n        onCreate,\n        onDelete,\n        onEdit,\n        readOnly = false,\n        tags = false,\n        value: prop,\n        ...otherProps\n    } = props;\n\n    const emptyOption: React.ReactElement<Select2OptionProps> | undefined = React.useMemo(() => {\n        if (emptyValue !== undefined && !multiple) {\n            // Empty option has 0px height, because it's empty, so need to apply height manually\n            return <Option key=\"__empty\" children=\"\" value={emptyValue} className=\"h-8\" />;\n        }\n        return;\n    }, [emptyValue, multiple]);\n\n    const initialChildren = React.useMemo(() => {\n        if (emptyOption) {\n            return [emptyOption, ...initChildren] as Select2Children;\n        }\n        return initChildren;\n    }, [emptyOption, initChildren]);\n\n    // refs\n    const internalRef = useMergedRef<HTMLButtonElement>(ref);\n    const listboxRef = React.useRef<CollectionRef>(null);\n    const searchRef = React.useRef<HTMLInputElement>(null);\n    const { texts } = useLocalization();\n    // align the listbox min width with the width of the input - it should never be smaller\n    const dimensions = useBoundingClientRectListener(internalRef);\n\n    // state\n    const [open, setOpen] = React.useState(false);\n    const [value, _setValue] = useControllableState<Select2Value>({\n        // uncontrolled\n        defaultProp,\n        // controlled\n        onChange,\n        prop,\n    });\n    const setValue = ListboxPrimitive.createListboxValueSetter(multiple, _setValue);\n    const [validationError, setValidationError] = React.useState<Error | undefined>();\n    const [shouldPauseHoverState, setShouldPauseHoverState] = useIsHoverStatePaused();\n\n    const { flattenedChildren, filteredChildren, searchQuery, setSearchQuery } = useChildren({\n        children: initialChildren,\n        emptyValue,\n        multiple,\n        open,\n        setValue,\n        value,\n    });\n\n    // context\n    const context = {\n        disabled,\n        highlighted,\n        invalid,\n        listboxRef,\n        multiple,\n        onCreate,\n        onDelete,\n        onEdit,\n        open,\n        readOnly,\n        ref: internalRef,\n        searchQuery,\n        searchRef,\n        setOpen,\n        setSearchQuery,\n        setValidationError,\n        setValue,\n        shouldPauseHoverState,\n        setShouldPauseHoverState,\n        tags,\n        validationError,\n        value,\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (open) {\n            event.preventDefault();\n        } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {\n            setOpen(true);\n        }\n\n        // the focus should always remain on the input, so we forward events on to the listbox\n        listboxRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n    };\n\n    let handleBlur;\n\n    if (otherProps.onBlur) {\n        // we might be focusing on an input or something inside the dropdown that was triggered by the select\n        // so see if the element gaining focus is inside a portal and look up its controller\n        // if we don't do this, things like validate on blur occur while simply opening the select\n        handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n            const elementGainingFocus = event.relatedTarget;\n\n            if (elementGainingFocus === undefined) {\n                return;\n            }\n\n            const portalId = elementGainingFocus?.closest('[data-radix-popper-content-wrapper] > :first-child')?.id;\n\n            if (!portalId || event.currentTarget.getAttribute(`aria-controls`) !== portalId) {\n                otherProps.onBlur?.(event);\n            }\n        };\n    }\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (isAriaDirectionKey(event)) {\n            setShouldPauseHoverState(true);\n        }\n    };\n\n    const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());\n\n    return (\n        <Select2Context.Provider value={context}>\n            <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n                <ControlledHiddenField\n                    emptyValue={emptyValue}\n                    multiple={multiple || tags}\n                    name={name}\n                    options={flattenedChildren.map(child => child.props.value)}\n                    parentRef={internalRef}\n                    setValue={setValue}\n                    value={value}\n                />\n                <PopoverPrimitive.Trigger asChild data-taco=\"Select2\">\n                    <Trigger\n                        {...otherProps}\n                        aria-haspopup=\"listbox\"\n                        emptyValue={emptyValue}\n                        onBlur={handleBlur}\n                        onKeyDown={handleKeyDown}\n                        ref={internalRef}>\n                        {flattenedChildren}\n                    </Trigger>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Content\n                        asChild\n                        align=\"start\"\n                        onOpenAutoFocus={() => {\n                            internalRef.current?.focus();\n                        }}\n                        onCloseAutoFocus={event => {\n                            event.preventDefault();\n                            event.stopPropagation();\n                            internalRef.current?.focus();\n                        }}\n                        sideOffset={4}\n                        tabIndex={-1}>\n                        <div className={className} style={{ minWidth: dimensions?.width ? `${dimensions.width}px` : undefined }}>\n                            {flattenedChildren.length > 0 || onCreate ? (\n                                <Search\n                                    placeholder={onCreate ? texts.select2.searchOrCreate : texts.select2.search}\n                                    ref={searchRef}\n                                />\n                            ) : null}\n                            {flattenedChildren.length <= 0 ? (\n                                <div className=\"text-grey-700 -mt-0.5 flex h-8 items-center px-2\" role=\"presentation\">\n                                    No results found...\n                                </div>\n                            ) : (\n                                <ListboxPrimitive.Root\n                                    className=\"flex flex-col gap-0.5\"\n                                    customSelector=\":scope > button\"\n                                    disabled={disabled}\n                                    multiple={multiple}\n                                    onKeyDown={handleListboxKeyDown}\n                                    readOnly={readOnly}\n                                    ref={listboxRef}\n                                    setValue={setValue}\n                                    tabIndex={-1}\n                                    value={value}>\n                                    {/*multiple && !searchQuery && Array.isArray(value) ? (\n                                    <All\n                                        children={flattenedChildren}\n                                        onToggle={_setValue}\n                                        selected={value.length === flattenedChildren.length}\n                                    />\n                                ) : null*/}\n                                    {searchQuery === '' ? (\n                                        <Collection>{initialChildren}</Collection>\n                                    ) : (\n                                        <Collection>{filteredChildren}</Collection>\n                                    )}\n                                    {onCreate ? <Create onCreate={onCreate} options={flattenedChildren} /> : null}\n                                </ListboxPrimitive.Root>\n                            )}\n                        </div>\n                    </PopoverPrimitive.Content>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </Select2Context.Provider>\n    );\n}) as Select2PropsWithStatics;\nSelect2.Option = Option;\nSelect2.Group = Group;\nSelect2.Title = Title;\n\nconst ControlledHiddenField = props => {\n    const { emptyValue, multiple, name, options, parentRef, value, setValue } = props;\n    const isFormControl = useIsFormControl(parentRef, () => setValue(multiple ? [] : undefined));\n\n    let bubbleValue;\n\n    if (isFormControl) {\n        if (value !== undefined) {\n            if (multiple) {\n                bubbleValue = Array.isArray(value) ? value.map(String) : [value === null ? '' : String(value)];\n            } else {\n                bubbleValue = value === null ? '' : String(value);\n            }\n        }\n\n        return (\n            <BubbleSelect aria-hidden key={String(bubbleValue)} multiple={multiple} name={name} value={bubbleValue}>\n                {emptyValue !== undefined ? <option value={emptyValue} /> : null}\n                {options.map(option => (\n                    <option key={String(option)} value={String(option)} />\n                ))}\n            </BubbleSelect>\n        );\n    }\n\n    return null;\n};\nSelect2.displayName = 'Select2';\n\nexport { Select2 };\n\nexport type {\n    Select2Texts,\n    Select2GroupProps,\n    Select2OptionProps,\n    Select2OptionValue,\n    Select2Value,\n    Select2Props,\n    Select2TitleProps,\n};\n"],"names":["Select2","React","forwardRef","props","ref","children","initChildren","defaultValue","defaultProp","disabled","emptyValue","undefined","highlighted","invalid","multiple","name","onChange","onCreate","onDelete","onEdit","readOnly","tags","value","prop","otherProps","emptyOption","useMemo","Option","key","className","initialChildren","internalRef","useMergedRef","listboxRef","useRef","searchRef","texts","useLocalization","dimensions","useBoundingClientRectListener","open","setOpen","useState","_setValue","useControllableState","setValue","ListboxPrimitive","validationError","setValidationError","shouldPauseHoverState","setShouldPauseHoverState","useIsHoverStatePaused","flattenedChildren","filteredChildren","searchQuery","setSearchQuery","useChildren","context","handleKeyDown","event","preventDefault","ctrlKey","metaKey","test","_listboxRef$current","current","dispatchEvent","createCustomKeyboardEvent","handleBlur","onBlur","elementGainingFocus","relatedTarget","portalId","_elementGainingFocus$","closest","id","currentTarget","getAttribute","_otherProps$onBlur","call","handleListboxKeyDown","isAriaDirectionKey","cn","createCollectionClassName","Select2Context","Provider","PopoverPrimitive","onOpenChange","ControlledHiddenField","options","map","child","parentRef","asChild","Trigger","onKeyDown","align","onOpenAutoFocus","_internalRef$current","focus","onCloseAutoFocus","stopPropagation","_internalRef$current2","sideOffset","tabIndex","style","minWidth","width","length","Search","placeholder","select2","searchOrCreate","search","role","customSelector","Collection","Create","Group","Title","isFormControl","useIsFormControl","bubbleValue","Array","isArray","String","BubbleSelect","option","displayName"],"mappings":"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"}

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

@@ -102,11 +102,9 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
   const controlRenderer = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
   const className = cn('!px-[0.4375rem] py-[calc(var(--table3-row-padding)_-_0.06rem)]', {
     relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',
-    // Need to set higher z-index, so that the current row textarea (in expanded state) overlaps rows below
-    'z-10': isCurrentRow,
-    // When row is hovered and located below, then the hovered textarea overlaps the current row textarea(if the current row textarea is expanded to support multiple lines),
-    // as result we need to set lower z-index for the hovered row -> cell.
-    'z-0': isHovered
+    // Need to set higher z-index, so that the current row textarea (in expanded state, when positioned absolute) overlaps rows below,
+    // but at the same time it should not overlap the table headers which has z-10.
+    'z-[9]': isCurrentRow && controlRenderer === 'textarea'
   },
   // component overrides - grayscale for editing hover
   '[[role="row"][data-current="false"]:hover_&>*]:!grayscale [[role="row"][data-current="false"]:hover_&_.bg-white]:!bg-grey-100',

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

@@ -1 +1 @@
-{"version":3,"file":"EditingCell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingCell.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport _ from 'lodash';\nimport { TableMeta, CellContext, ColumnMeta, Cell as RTCell, Table as RTTable } from '@tanstack/react-table';\nimport { Indicator, IndicatorReason } from './Indicator';\nimport { columnFilterFn, globalFilterFn } from '../../../util/filtering';\nimport { Table3FilterValue } from '../../../types';\nimport { hasChanged, willRowMoveAfterSorting } from '../../../util/editing';\nimport { getCurrentRowCellElement } from '../../../util/columns';\nimport { EDITING_ACTIONS_WIDTH } from '../internal/EditingActions';\nimport { EditingControl } from './EditingControl';\nimport { useRowContext } from '../../rows/RowContext';\n\nexport type EditingCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    children?: string | JSX.Element;\n};\n\nexport function EditingCell<TType = unknown>(props: EditingCellProps<TType>) {\n    const { isHovered } = useRowContext();\n    // Need to explicitly pass tableMeta, because just passing the table object will not trigger editing change since table object is not mutatable.\n    const tableMeta = props.table.options.meta as TableMeta<TType>;\n    return <MemoedEditingCell<TType> {...props} isHovered={isHovered} tableMeta={tableMeta} />;\n}\n\n// Memoization\nexport type MemoedEditingCellProps<TType = unknown> = EditingCellProps<TType> & {\n    isHovered: boolean;\n    tableMeta: TableMeta<TType>;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n    const { cell, column, index, getValue, table, tableRef, row, isHovered, tableMeta } = props;\n    const columnMeta = column.columnDef.meta as ColumnMeta<TType, unknown>;\n\n    const cellRef = React.useRef<HTMLDivElement>(null);\n    const controlRef = React.useRef<HTMLElement>(null);\n\n    const handleChange = (value: unknown) => tableMeta.editing.setCellValue(cell, value);\n    const value = tableMeta.editing.getCellValue(cell) ?? getValue();\n\n    const handleFocus = event => {\n        // Check if cell is hidden behind pinned columns or edititng actions, and scroll to it.\n        const frozenColumnIndex = tableMeta.columnFreezing.frozenColumnIndex;\n        const tableElement = tableRef.current;\n\n        if (tableElement && frozenColumnIndex !== undefined && index > frozenColumnIndex) {\n            const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableElement);\n            const cellRect = cellRef.current?.getBoundingClientRect();\n            const lastFrozenRect = lastFrozenColumnElement?.getBoundingClientRect();\n            const tableRect = tableElement.getBoundingClientRect();\n\n            // Check for pinned columns overlap\n            if (cellRect && lastFrozenRect && cellRect.left < lastFrozenRect.left + lastFrozenRect.width) {\n                const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;\n                tableElement.scrollTo(cellRect.left - pinnedColumnsWidth, tableElement.scrollTop);\n                // Check for editing actions overlap\n            } else if (cellRect && tableRect && cellRect.right > tableRect.right - EDITING_ACTIONS_WIDTH) {\n                const spaceBetweenCellAndEditingActions = 10;\n                tableElement.scrollTo(\n                    // Need to take into account if table has been already scrolled.\n                    tableElement.scrollLeft + EDITING_ACTIONS_WIDTH + spaceBetweenCellAndEditingActions,\n                    tableElement.scrollTop\n                );\n            }\n        }\n\n        if (event.target?.select) {\n            requestAnimationFrame(() => {\n                event.target.select();\n            });\n        }\n    };\n\n    const handleBlur = () => {\n        tableMeta.editing.setDetailModeEditing(false);\n    };\n\n    // row move indicator\n    const moveReason = tableMeta.editing.rowMoveReason[cell.column.id] ?? null;\n    const rows = table.getRowModel().rows;\n    const isCurrentRow = rows[tableMeta.currentRow.currentRowIndex]?.id === row.id;\n    const mountNode = React.useMemo(() => {\n        if (moveReason) {\n            return cellRef.current?.parentElement?.firstChild as Element | null;\n        }\n        return null;\n    }, [moveReason, cellRef]);\n\n    const removeMoveReason = () => {\n        tableMeta.editing.removeRowMoveReason(cell.column.id);\n    };\n\n    React.useEffect(() => {\n        // To avoid reseting move reason on another row hover,\n        // we need to check for changes only if value got changed in the current row.\n        if (!isCurrentRow) {\n            return;\n        }\n\n        if (hasChanged(getValue(), value)) {\n            const moveReason = getRowMoveReason(table, row.index, row.original, cell, value);\n            tableMeta.editing.setRowMoveReason({ [cell.column.id]: moveReason });\n        } else {\n            removeMoveReason();\n        }\n        return removeMoveReason;\n    }, [value]);\n\n    const controlRenderer = column.columnDef.meta?.control;\n\n    const className = cn(\n        '!px-[0.4375rem] py-[calc(var(--table3-row-padding)_-_0.06rem)]',\n        {\n            relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',\n            // Need to set higher z-index, so that the current row textarea (in expanded state) overlaps rows below\n            'z-10': isCurrentRow,\n            // When row is hovered and located below, then the hovered textarea overlaps the current row textarea(if the current row textarea is expanded to support multiple lines),\n            // as result we need to set lower z-index for the hovered row -> cell.\n            'z-0': isHovered,\n        },\n\n        // component overrides - grayscale for editing hover\n        '[[role=\"row\"][data-current=\"false\"]:hover_&>*]:!grayscale [[role=\"row\"][data-current=\"false\"]:hover_&_.bg-white]:!bg-grey-100',\n        // we alias to any because className conflicts with the Table2 definition,\n        // when Table2 is gone, remove this as any\n        typeof columnMeta.className === 'function' ? (columnMeta.className as any)(row.original) : columnMeta.className\n    );\n\n    return (\n        <>\n            {moveReason !== null && mountNode && (\n                <Indicator\n                    reason={moveReason}\n                    columnName={String(cell.column.columnDef.header)}\n                    mountNode={mountNode}\n                    validationErrors={[]}\n                />\n            )}\n            <div className={className} data-align={columnMeta.align} data-column-index={index} role=\"cell\" ref={cellRef}>\n                <EditingControl\n                    align={columnMeta.align}\n                    column={cell.column}\n                    data={cell.row.original}\n                    initialValue={getValue()}\n                    onBlur={handleBlur}\n                    onFocus={handleFocus}\n                    onChange={handleChange}\n                    ref={controlRef}\n                    table={table}\n                    tableRef={tableRef}\n                    value={value}\n                    cell={cell}\n                    isCurrentRow={isCurrentRow}\n                />\n            </div>\n        </>\n    );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n\nfunction getRowMoveReason<TType>(\n    table: RTTable<any>,\n    rowIndex: number,\n    rowValues: TType,\n    cell: RTCell<any, unknown>,\n    newValue: any\n) {\n    let rowMoveReason: IndicatorReason | null = null;\n    const { globalFilter } = table.getState();\n\n    const isFilteredByGlobalFilter = Object.values<unknown>({ ...rowValues, [cell.id]: newValue }).some(cellValue =>\n        // Global filter can be undefined when there is no text being searched so we pass an empty string to\n        // globalFilterFn as query in that case.\n        globalFilterFn(String(cellValue), globalFilter ? String(globalFilter) : '')\n    );\n\n    if (!isFilteredByGlobalFilter) {\n        rowMoveReason = IndicatorReason.SEARCH;\n    } else if (cell.column.getIsFiltered() && !columnFilterFn(newValue, cell.column.getFilterValue() as Table3FilterValue)) {\n        rowMoveReason = IndicatorReason.FILTER;\n    } else if (\n        !rowMoveReason &&\n        cell.column.getIsSorted() &&\n        willRowMoveAfterSorting(\n            newValue,\n            cell,\n            rowIndex,\n            table.getRowModel().rows,\n            !!table.getState().sorting.find(s => s.id === cell.column.id)?.desc\n        )\n    ) {\n        rowMoveReason = IndicatorReason.SORTING;\n    }\n\n    return rowMoveReason;\n}\n"],"names":["EditingCell","props","isHovered","useRowContext","tableMeta","table","options","meta","React","MemoedEditingCell","memo","cell","column","index","getValue","tableRef","row","columnMeta","columnDef","cellRef","useRef","controlRef","handleChange","value","editing","setCellValue","_tableMeta$editing$ge","getCellValue","handleFocus","event","frozenColumnIndex","columnFreezing","tableElement","current","undefined","_cellRef$current","lastFrozenColumnElement","getCurrentRowCellElement","cellRect","getBoundingClientRect","lastFrozenRect","tableRect","left","width","pinnedColumnsWidth","scrollTo","scrollTop","right","EDITING_ACTIONS_WIDTH","spaceBetweenCellAndEditingActions","scrollLeft","_event$target","target","select","requestAnimationFrame","handleBlur","setDetailModeEditing","moveReason","_tableMeta$editing$ro","rowMoveReason","id","rows","getRowModel","isCurrentRow","_rows$tableMeta$curre","currentRow","currentRowIndex","mountNode","useMemo","_cellRef$current2","_cellRef$current2$par","parentElement","firstChild","removeMoveReason","removeRowMoveReason","useEffect","hasChanged","getRowMoveReason","original","setRowMoveReason","controlRenderer","_column$columnDef$met","control","className","cn","relative","Indicator","reason","columnName","String","header","validationErrors","align","role","ref","EditingControl","data","initialValue","onBlur","onFocus","onChange","rowIndex","rowValues","newValue","globalFilter","getState","isFilteredByGlobalFilter","Object","values","some","cellValue","globalFilterFn","IndicatorReason","SEARCH","getIsFiltered","columnFilterFn","getFilterValue","FILTER","getIsSorted","willRowMoveAfterSorting","_table$getState$sorti","sorting","find","s","desc","SORTING"],"mappings":"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"}
+{"version":3,"file":"EditingCell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingCell.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport _ from 'lodash';\nimport { TableMeta, CellContext, ColumnMeta, Cell as RTCell, Table as RTTable } from '@tanstack/react-table';\nimport { Indicator, IndicatorReason } from './Indicator';\nimport { columnFilterFn, globalFilterFn } from '../../../util/filtering';\nimport { Table3FilterValue } from '../../../types';\nimport { hasChanged, willRowMoveAfterSorting } from '../../../util/editing';\nimport { getCurrentRowCellElement } from '../../../util/columns';\nimport { EDITING_ACTIONS_WIDTH } from '../internal/EditingActions';\nimport { EditingControl } from './EditingControl';\nimport { useRowContext } from '../../rows/RowContext';\n\nexport type EditingCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    children?: string | JSX.Element;\n};\n\nexport function EditingCell<TType = unknown>(props: EditingCellProps<TType>) {\n    const { isHovered } = useRowContext();\n    // Need to explicitly pass tableMeta, because just passing the table object will not trigger editing change since table object is not mutatable.\n    const tableMeta = props.table.options.meta as TableMeta<TType>;\n    return <MemoedEditingCell<TType> {...props} isHovered={isHovered} tableMeta={tableMeta} />;\n}\n\n// Memoization\nexport type MemoedEditingCellProps<TType = unknown> = EditingCellProps<TType> & {\n    isHovered: boolean;\n    tableMeta: TableMeta<TType>;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n    const { cell, column, index, getValue, table, tableRef, row, isHovered, tableMeta } = props;\n    const columnMeta = column.columnDef.meta as ColumnMeta<TType, unknown>;\n\n    const cellRef = React.useRef<HTMLDivElement>(null);\n    const controlRef = React.useRef<HTMLElement>(null);\n\n    const handleChange = (value: unknown) => tableMeta.editing.setCellValue(cell, value);\n    const value = tableMeta.editing.getCellValue(cell) ?? getValue();\n\n    const handleFocus = event => {\n        // Check if cell is hidden behind pinned columns or edititng actions, and scroll to it.\n        const frozenColumnIndex = tableMeta.columnFreezing.frozenColumnIndex;\n        const tableElement = tableRef.current;\n\n        if (tableElement && frozenColumnIndex !== undefined && index > frozenColumnIndex) {\n            const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableElement);\n            const cellRect = cellRef.current?.getBoundingClientRect();\n            const lastFrozenRect = lastFrozenColumnElement?.getBoundingClientRect();\n            const tableRect = tableElement.getBoundingClientRect();\n\n            // Check for pinned columns overlap\n            if (cellRect && lastFrozenRect && cellRect.left < lastFrozenRect.left + lastFrozenRect.width) {\n                const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;\n                tableElement.scrollTo(cellRect.left - pinnedColumnsWidth, tableElement.scrollTop);\n                // Check for editing actions overlap\n            } else if (cellRect && tableRect && cellRect.right > tableRect.right - EDITING_ACTIONS_WIDTH) {\n                const spaceBetweenCellAndEditingActions = 10;\n                tableElement.scrollTo(\n                    // Need to take into account if table has been already scrolled.\n                    tableElement.scrollLeft + EDITING_ACTIONS_WIDTH + spaceBetweenCellAndEditingActions,\n                    tableElement.scrollTop\n                );\n            }\n        }\n\n        if (event.target?.select) {\n            requestAnimationFrame(() => {\n                event.target.select();\n            });\n        }\n    };\n\n    const handleBlur = () => {\n        tableMeta.editing.setDetailModeEditing(false);\n    };\n\n    // row move indicator\n    const moveReason = tableMeta.editing.rowMoveReason[cell.column.id] ?? null;\n    const rows = table.getRowModel().rows;\n    const isCurrentRow = rows[tableMeta.currentRow.currentRowIndex]?.id === row.id;\n    const mountNode = React.useMemo(() => {\n        if (moveReason) {\n            return cellRef.current?.parentElement?.firstChild as Element | null;\n        }\n        return null;\n    }, [moveReason, cellRef]);\n\n    const removeMoveReason = () => {\n        tableMeta.editing.removeRowMoveReason(cell.column.id);\n    };\n\n    React.useEffect(() => {\n        // To avoid reseting move reason on another row hover,\n        // we need to check for changes only if value got changed in the current row.\n        if (!isCurrentRow) {\n            return;\n        }\n\n        if (hasChanged(getValue(), value)) {\n            const moveReason = getRowMoveReason(table, row.index, row.original, cell, value);\n            tableMeta.editing.setRowMoveReason({ [cell.column.id]: moveReason });\n        } else {\n            removeMoveReason();\n        }\n        return removeMoveReason;\n    }, [value]);\n\n    const controlRenderer = column.columnDef.meta?.control;\n\n    const className = cn(\n        '!px-[0.4375rem] py-[calc(var(--table3-row-padding)_-_0.06rem)]',\n        {\n            relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',\n            // Need to set higher z-index, so that the current row textarea (in expanded state, when positioned absolute) overlaps rows below,\n            // but at the same time it should not overlap the table headers which has z-10.\n            'z-[9]': isCurrentRow && controlRenderer === 'textarea',\n        },\n\n        // component overrides - grayscale for editing hover\n        '[[role=\"row\"][data-current=\"false\"]:hover_&>*]:!grayscale [[role=\"row\"][data-current=\"false\"]:hover_&_.bg-white]:!bg-grey-100',\n        // we alias to any because className conflicts with the Table2 definition,\n        // when Table2 is gone, remove this as any\n        typeof columnMeta.className === 'function' ? (columnMeta.className as any)(row.original) : columnMeta.className\n    );\n\n    return (\n        <>\n            {moveReason !== null && mountNode && (\n                <Indicator\n                    reason={moveReason}\n                    columnName={String(cell.column.columnDef.header)}\n                    mountNode={mountNode}\n                    validationErrors={[]}\n                />\n            )}\n            <div className={className} data-align={columnMeta.align} data-column-index={index} role=\"cell\" ref={cellRef}>\n                <EditingControl\n                    align={columnMeta.align}\n                    column={cell.column}\n                    data={cell.row.original}\n                    initialValue={getValue()}\n                    onBlur={handleBlur}\n                    onFocus={handleFocus}\n                    onChange={handleChange}\n                    ref={controlRef}\n                    table={table}\n                    tableRef={tableRef}\n                    value={value}\n                    cell={cell}\n                    isCurrentRow={isCurrentRow}\n                />\n            </div>\n        </>\n    );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n\nfunction getRowMoveReason<TType>(\n    table: RTTable<any>,\n    rowIndex: number,\n    rowValues: TType,\n    cell: RTCell<any, unknown>,\n    newValue: any\n) {\n    let rowMoveReason: IndicatorReason | null = null;\n    const { globalFilter } = table.getState();\n\n    const isFilteredByGlobalFilter = Object.values<unknown>({ ...rowValues, [cell.id]: newValue }).some(cellValue =>\n        // Global filter can be undefined when there is no text being searched so we pass an empty string to\n        // globalFilterFn as query in that case.\n        globalFilterFn(String(cellValue), globalFilter ? String(globalFilter) : '')\n    );\n\n    if (!isFilteredByGlobalFilter) {\n        rowMoveReason = IndicatorReason.SEARCH;\n    } else if (cell.column.getIsFiltered() && !columnFilterFn(newValue, cell.column.getFilterValue() as Table3FilterValue)) {\n        rowMoveReason = IndicatorReason.FILTER;\n    } else if (\n        !rowMoveReason &&\n        cell.column.getIsSorted() &&\n        willRowMoveAfterSorting(\n            newValue,\n            cell,\n            rowIndex,\n            table.getRowModel().rows,\n            !!table.getState().sorting.find(s => s.id === cell.column.id)?.desc\n        )\n    ) {\n        rowMoveReason = IndicatorReason.SORTING;\n    }\n\n    return rowMoveReason;\n}\n"],"names":["EditingCell","props","isHovered","useRowContext","tableMeta","table","options","meta","React","MemoedEditingCell","memo","cell","column","index","getValue","tableRef","row","columnMeta","columnDef","cellRef","useRef","controlRef","handleChange","value","editing","setCellValue","_tableMeta$editing$ge","getCellValue","handleFocus","event","frozenColumnIndex","columnFreezing","tableElement","current","undefined","_cellRef$current","lastFrozenColumnElement","getCurrentRowCellElement","cellRect","getBoundingClientRect","lastFrozenRect","tableRect","left","width","pinnedColumnsWidth","scrollTo","scrollTop","right","EDITING_ACTIONS_WIDTH","spaceBetweenCellAndEditingActions","scrollLeft","_event$target","target","select","requestAnimationFrame","handleBlur","setDetailModeEditing","moveReason","_tableMeta$editing$ro","rowMoveReason","id","rows","getRowModel","isCurrentRow","_rows$tableMeta$curre","currentRow","currentRowIndex","mountNode","useMemo","_cellRef$current2","_cellRef$current2$par","parentElement","firstChild","removeMoveReason","removeRowMoveReason","useEffect","hasChanged","getRowMoveReason","original","setRowMoveReason","controlRenderer","_column$columnDef$met","control","className","cn","relative","Indicator","reason","columnName","String","header","validationErrors","align","role","ref","EditingControl","data","initialValue","onBlur","onFocus","onChange","rowIndex","rowValues","newValue","globalFilter","getState","isFilteredByGlobalFilter","Object","values","some","cellValue","globalFilterFn","IndicatorReason","SEARCH","getIsFiltered","columnFilterFn","getFilterValue","FILTER","getIsSorted","willRowMoveAfterSorting","_table$getState$sorti","sorting","find","s","desc","SORTING"],"mappings":"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"}

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

@@ -137,7 +137,8 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
     return /*#__PURE__*/React__default.createElement(TextareaControl, Object.assign({}, props, {
       isCellInDetailMode: isCellInDetailMode,
       onKeyDown: handleInputKeyDown,
-      ref: refCallback
+      ref: refCallback,
+      fontSize: tableMeta.fontSize.size
     }));
   }
   return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {

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 } from '../../../types';\nimport { TextareaControl } from './controls/TextareaControl';\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    isCurrentRow?: 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        isCurrentRow,\n        ...attributes\n    } = props;\n\n    const tableMeta = table.options.meta as TableMeta<unknown>;\n\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    // Revert to initial value if escape was pressed\n    const handleKeyDown = (event: React.KeyboardEvent) => {\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        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 = typeof value === 'number';\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            return;\n        }\n    };\n\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 = cell.row.original[cell.column.id];\n        const changedDate = (event as any).detail;\n        if (hasChanged(originalDate, changedDate)) {\n            handleChange(changedDate);\n        }\n    };\n\n    if (typeof controlRenderer === 'function') {\n        return controlRenderer(\n            {\n                ...attributes,\n                ref: ref,\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 handleDatepickerKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            handleKeyDown(event);\n\n            if (/^[a-z0-9]$/i.test(event.key)) {\n                tableMeta.editing.setDetailModeEditing(true);\n                return;\n            }\n        };\n\n        return (\n            <Datepicker\n                {...attributes}\n                className={cn({\n                    '[&_input]:!yt-focus-dark': isCellInDetailMode,\n                })}\n                onChange={handleDatepickerChange}\n                onKeyDown={handleDatepickerKeyDown}\n                ref={refCallback}\n                value={value as Date}\n            />\n        );\n    } else if (controlRenderer === 'switch') {\n        return (\n            <Switch {...attributes} className=\"mx-2 mt-1.5\" checked={Boolean(value)} onChange={handleChange} ref={refCallback} />\n        );\n    } else if (controlRenderer === 'textarea') {\n        return (\n            <TextareaControl\n                {...props}\n                isCellInDetailMode={isCellInDetailMode}\n                onKeyDown={handleInputKeyDown}\n                ref={refCallback}\n            />\n        );\n    }\n\n    return (\n        <Input\n            {...attributes}\n            className={cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {\n                '!yt-focus-dark': isCellInDetailMode,\n            })}\n            onChange={event => {\n                handleChange(event.target.value);\n            }}\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","isCurrentRow","attributes","tableMeta","options","meta","ref","useRef","refCallback","mergeRefs","columnMeta","columnDef","controlRenderer","control","isCellInDetailMode","editing","detailModeEditing","_ref$current","current","contains","document","activeElement","handleKeyDown","event","target","readOnly","key","stopPropagation","preventDefault","setDetailModeEditing","changedRow","changes","row","id","rowEdtitingDataWithInitialValue","_","isEqual","original","resetChange","_tableRef$current","toggleEditing","focus","deselectInputValue","_target$select","select","call","isNumber","handleInputKeyDown","test","handleDatepickerChange","originalDate","changedDate","detail","hasChanged","setValue","nextValue","handleDatepickerKeyDown","Datepicker","className","cn","onKeyDown","Switch","checked","Boolean","TextareaControl","Input","getInputAppearanceClassnames","getCellAlignmentClasses","type","undefined","String"],"mappings":"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"}
+{"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 } from '../../../types';\nimport { TextareaControl } from './controls/TextareaControl';\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    isCurrentRow?: 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        isCurrentRow,\n        ...attributes\n    } = props;\n\n    const tableMeta = table.options.meta as TableMeta<unknown>;\n\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    // Revert to initial value if escape was pressed\n    const handleKeyDown = (event: React.KeyboardEvent) => {\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        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 = typeof value === 'number';\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            return;\n        }\n    };\n\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 = cell.row.original[cell.column.id];\n        const changedDate = (event as any).detail;\n        if (hasChanged(originalDate, changedDate)) {\n            handleChange(changedDate);\n        }\n    };\n\n    if (typeof controlRenderer === 'function') {\n        return controlRenderer(\n            {\n                ...attributes,\n                ref: ref,\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 handleDatepickerKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            handleKeyDown(event);\n\n            if (/^[a-z0-9]$/i.test(event.key)) {\n                tableMeta.editing.setDetailModeEditing(true);\n                return;\n            }\n        };\n\n        return (\n            <Datepicker\n                {...attributes}\n                className={cn({\n                    '[&_input]:!yt-focus-dark': isCellInDetailMode,\n                })}\n                onChange={handleDatepickerChange}\n                onKeyDown={handleDatepickerKeyDown}\n                ref={refCallback}\n                value={value as Date}\n            />\n        );\n    } else if (controlRenderer === 'switch') {\n        return (\n            <Switch {...attributes} className=\"mx-2 mt-1.5\" checked={Boolean(value)} onChange={handleChange} ref={refCallback} />\n        );\n    } else if (controlRenderer === 'textarea') {\n        return (\n            <TextareaControl\n                {...props}\n                isCellInDetailMode={isCellInDetailMode}\n                onKeyDown={handleInputKeyDown}\n                ref={refCallback}\n                fontSize={tableMeta.fontSize.size}\n            />\n        );\n    }\n\n    return (\n        <Input\n            {...attributes}\n            className={cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {\n                '!yt-focus-dark': isCellInDetailMode,\n            })}\n            onChange={event => {\n                handleChange(event.target.value);\n            }}\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","isCurrentRow","attributes","tableMeta","options","meta","ref","useRef","refCallback","mergeRefs","columnMeta","columnDef","controlRenderer","control","isCellInDetailMode","editing","detailModeEditing","_ref$current","current","contains","document","activeElement","handleKeyDown","event","target","readOnly","key","stopPropagation","preventDefault","setDetailModeEditing","changedRow","changes","row","id","rowEdtitingDataWithInitialValue","_","isEqual","original","resetChange","_tableRef$current","toggleEditing","focus","deselectInputValue","_target$select","select","call","isNumber","handleInputKeyDown","test","handleDatepickerChange","originalDate","changedDate","detail","hasChanged","setValue","nextValue","handleDatepickerKeyDown","Datepicker","className","cn","onKeyDown","Switch","checked","Boolean","TextareaControl","fontSize","size","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

@@ -4,6 +4,22 @@ import { useMergedRef } from '../../../../../../hooks/useMergedRef.js';
 import { getCellAlignmentClasses } from '../../styles.js';
 import { Textarea } from '../../../../../Textarea/Textarea.js';
 
+// By UX design, textarea should fold to min size when blured and extend to max 5 lines height when edited in enableTruncate mode,
+// for this reason we need to set min/max height limits for each font size value.
+const heights = {
+  small: {
+    min: 24,
+    max: 86
+  },
+  medium: {
+    min: 34,
+    max: 100
+  },
+  large: {
+    min: 40,
+    max: 140
+  }
+};
 const TextareaControl = /*#__PURE__*/React__default.forwardRef(function TextareaControl(props, externalRef) {
   const {
     onKeyDown: handleKeyDown,
@@ -13,19 +29,25 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
     align,
     isCurrentRow,
     value,
+    fontSize,
     ...attributes
   } = props;
-  const textareaMaxHeight = 120;
-  const textareaMinHeight = 32;
+  const minMaxHeight = heights[fontSize];
   const columnMeta = column.columnDef.meta;
   const ref = useMergedRef(externalRef);
   React__default.useEffect(() => {
-    // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized.
-    if (ref !== null && ref !== void 0 && ref.current && !(columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate)) {
-      const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
-      resizeTextArea(textareaElement);
+    if (ref !== null && ref !== void 0 && ref.current) {
+      // Need to reset textarea to min height when font size got changed and if column in enable truncate mode.
+      if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
+        const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
+        textareaElement.style.height = `${minMaxHeight.min}px`;
+        // 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.
+      } else {
+        const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
+        resizeTextArea(textareaElement);
+      }
     }
-  }, []);
+  }, [fontSize]);
   React__default.useEffect(() => {
     // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.
     // Otherwise it should collapse to minimal height.
@@ -34,7 +56,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
       if (isCellInDetailMode) {
         resizeTextArea(textareaElement);
       } else {
-        textareaElement.style.height = `${textareaMinHeight}px`;
+        textareaElement.style.height = `${minMaxHeight.min}px`;
       }
     }
   }, [isCellInDetailMode]);
@@ -44,9 +66,9 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
     const textareaRect = textareaElement.getBoundingClientRect();
     const prevHeight = textareaRect.height;
     if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
-      if (prevHeight < textareaMaxHeight) {
+      if (prevHeight < minMaxHeight.max) {
         textareaElement.style.height = 'inherit';
-        textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, textareaMaxHeight)}px`;
+        textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, minMaxHeight.max)}px`;
       }
     } else {
       textareaElement.style.height = 'inherit';
@@ -83,13 +105,13 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
       // If truncation is enabled, then textarea should shring back to min height, when loosing focus.
       if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
         const textareaElement = event.currentTarget;
-        textareaElement.style.height = `${textareaMinHeight}px`;
+        textareaElement.style.height = `${minMaxHeight.min}px`;
       }
     },
     className: cn(getCellAlignmentClasses(align), `z-20 h-fit resize-none`, {
-      [`!min-h-[${textareaMinHeight}px]`]: columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate,
+      [`!min-h-[${minMaxHeight.min}px]`]: columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate,
       '!yt-focus-dark': isCellInDetailMode,
-      [`h-[${textareaMinHeight}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),
+      [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),
       // Only allow resizing when focused and truncation enabled
       'focus:resize-y': isCurrentRow && (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';\n\ntype TextareaControlProps<TType = unknown> = EditingControlProps<TType> & {\n    onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\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        column,\n        isCellInDetailMode,\n        align,\n        isCurrentRow,\n        value,\n        ...attributes\n    } = props;\n\n    const textareaMaxHeight = 120;\n    const textareaMinHeight = 32;\n\n    const columnMeta = column.columnDef.meta;\n\n    const ref = useMergedRef<HTMLTextAreaElement>(externalRef);\n\n    React.useEffect(() => {\n        // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized.\n        if (ref?.current && !columnMeta?.enableTruncate) {\n            const textareaElement = ref?.current as HTMLTextAreaElement;\n            resizeTextArea(textareaElement);\n        }\n    }, []);\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 = `${textareaMinHeight}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 < textareaMaxHeight) {\n                textareaElement.style.height = 'inherit';\n                textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, textareaMaxHeight)}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-20 focus-within:px-2 focus-within:pt-[var(--table3-row-padding)]':\n            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    return (\n        <div className={textareaContainerClassName} data-taco=\"input-container\">\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={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 = `${textareaMinHeight}px`;\n                    }\n                }}\n                className={cn(getCellAlignmentClasses(align), `z-20 h-fit resize-none`, {\n                    [`!min-h-[${textareaMinHeight}px]`]: columnMeta?.enableTruncate,\n                    '!yt-focus-dark': isCellInDetailMode,\n                    [`h-[${textareaMinHeight}px]`]: !isCellInDetailMode && columnMeta?.enableTruncate,\n                    // Only allow resizing when focused and truncation enabled\n                    'focus:resize-y': isCurrentRow && columnMeta?.enableTruncate,\n                })}\n                ref={ref}\n                value={String(value ?? '')}\n            />\n        </div>\n    );\n});\n"],"names":["TextareaControl","React","forwardRef","props","externalRef","onKeyDown","handleKeyDown","onChange","handleChange","column","isCellInDetailMode","align","isCurrentRow","value","attributes","textareaMaxHeight","textareaMinHeight","columnMeta","columnDef","meta","ref","useMergedRef","useEffect","current","enableTruncate","textareaElement","resizeTextArea","style","height","textareaRect","getBoundingClientRect","prevHeight","Math","min","scrollHeight","handleTextareaChange","e","target","textareaContainerClassName","cn","handleTextareaKeyDown","event","shiftKey","key","className","Textarea","rows","onBlur","currentTarget","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 { 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: 34,\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    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        column,\n        isCellInDetailMode,\n        align,\n        isCurrentRow,\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-20 focus-within:px-2 focus-within:pt-[var(--table3-row-padding)]':\n            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    return (\n        <div className={textareaContainerClassName} data-taco=\"input-container\">\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={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                }}\n                className={cn(getCellAlignmentClasses(align), `z-20 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': isCurrentRow && columnMeta?.enableTruncate,\n                })}\n                ref={ref}\n                value={String(value ?? '')}\n            />\n        </div>\n    );\n});\n"],"names":["heights","small","min","max","medium","large","TextareaControl","React","forwardRef","props","externalRef","onKeyDown","handleKeyDown","onChange","handleChange","column","isCellInDetailMode","align","isCurrentRow","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","className","Textarea","rows","onBlur","currentTarget","getCellAlignmentClasses","String"],"mappings":"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"}

package/dist/index.css

@@ -778,7 +778,8 @@
 }
 
 [data-font-size='small'] [role='cell'] [data-taco='input'],
-[data-font-size='small'] [role='cell'] [data-taco='Select2'] {
+[data-font-size='small'] [role='cell'] [data-taco='Select2'],
+[data-font-size='small'] [role='cell'] [data-taco='textarea'] {
     @apply h-6 min-h-[theme(spacing.6)] px-1.5 text-xs;
 }
 
@@ -823,7 +824,8 @@
 }
 
 [data-font-size='large'] [role='cell'] [data-taco='input'],
-[data-font-size='large'] [role='cell'] [data-taco='Select2'] {
+[data-font-size='large'] [role='cell'] [data-taco='Select2'],
+[data-font-size='large'] [role='cell'] [data-taco='textarea'] {
     @apply h-10 px-2.5 text-lg;
 }