@economic/taco 2.7.5 → 2.8.0

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={() => {\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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"}
+{"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    placeholder?: string;\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        placeholder,\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                        placeholder={placeholder}>\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","placeholder","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","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/Select2/components/Trigger.js

@@ -80,6 +80,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
     children,
     emptyValue,
     value,
+    placeholder,
     ...buttonProps
   } = props;
   const {
@@ -90,7 +91,14 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
   const contentClassName = cn('truncate items-center gap-1');
   const currentValue = children.find(matchesValue(value));
   let output;
-  if (currentValue) {
+  if (placeholder && currentValue === undefined) {
+    output = /*#__PURE__*/React__default.createElement("div", {
+      className: cn({
+        'text-grey-700': disabled,
+        'text-grey-500': !disabled
+      })
+    }, placeholder);
+  } else if (currentValue) {
     if (tags && emptyValue !== undefined && emptyValue !== value) {
       output = /*#__PURE__*/React__default.createElement(Tag, {
         className: "truncate",
@@ -117,6 +125,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     children,
     emptyValue: _,
     values = [],
+    placeholder,
     ...buttonProps
   } = props;
   const {
@@ -138,7 +147,12 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
       className: "my-1 flex max-h-[5.5rem] flex-col"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-wrap gap-1"
-    }, valuesAsChildren.map(child => /*#__PURE__*/React__default.createElement(Tag, {
+    }, valuesAsChildren.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
+      className: cn({
+        'text-grey-700': disabled,
+        'text-grey-500': !disabled
+      })
+    }, placeholder) : valuesAsChildren.map(child => /*#__PURE__*/React__default.createElement(Tag, {
       key: String(child.props.value),
       className: "truncate",
       color: tags ? child.props.color : undefined,
@@ -156,7 +170,8 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
   } else {
     content = /*#__PURE__*/React__default.createElement(MultipleValue, {
       key: String(open),
-      valuesAsChildren: valuesAsChildren
+      valuesAsChildren: valuesAsChildren,
+      placeholder: placeholder
     });
   }
   return /*#__PURE__*/React__default.createElement("div", {
@@ -172,7 +187,8 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
   }), content));
 });
 const MultipleValue = ({
-  valuesAsChildren
+  valuesAsChildren,
+  placeholder
 }) => {
   const {
     disabled,
@@ -195,9 +211,14 @@ const MultipleValue = ({
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex gap-1 truncate",
     ref: el => setContentRef(el)
-  }, valuesAsChildren.map((child, index) => {
+  }, valuesAsChildren.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: cn({
+      'text-grey-700': disabled,
+      'text-grey-500': !disabled
+    })
+  }, placeholder) : valuesAsChildren.map((child, index) => {
     const tag = /*#__PURE__*/React__default.createElement(Tag, {
-      key: child.props.value,
+      key: String(child.props.value),
       className: cn('cursor-pointer', {
         truncate: index === boundaryIndex,
         hidden: boundaryIndex !== undefined && boundaryIndex !== null ? index > boundaryIndex : false
@@ -210,7 +231,7 @@ const MultipleValue = ({
     }, child.props.children);
     if (index === boundaryIndex) {
       return /*#__PURE__*/React__default.createElement(Tooltip, {
-        key: child.props.value,
+        key: String(child.props.value),
         title: String(child.props.children)
       }, tag);
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Trigger.js","sources":["../../../../../../../../src/components/Select2/components/Trigger.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Tag } from '../../Tag/Tag';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { Icon } from '../../Icon/Icon';\nimport { Badge } from '../../Badge/Badge';\nimport { getInputClasses } from '../../Input/util';\nimport { Select2OptionValue } from '../types';\nimport { useSelect2Context } from './Context';\nimport { Select2OptionProps } from './Option';\nimport { getIndexOfFirstChildOverflowingParent } from '../../../utils/dom';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\n\ntype Select2TriggerProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    emptyValue?: Select2OptionValue;\n    children: React.ReactElement<Select2OptionProps>[];\n};\n\nexport const Trigger = React.forwardRef<HTMLButtonElement, Select2TriggerProps>(function Select2Trigger(props, ref) {\n    const { multiple, value } = useSelect2Context();\n\n    if (Array.isArray(value) || multiple) {\n        const values = Array.isArray(value) ? value : value !== undefined ? [value] : undefined;\n        return <Multiple {...props} ref={ref} values={values} />;\n    }\n\n    return <Single {...props} ref={ref} value={value} />;\n});\n\ntype ButtonProps = React.HTMLAttributes<HTMLButtonElement> &\n    Omit<Select2TriggerProps, 'children' | 'open' | 'setValue' | 'value'>;\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Select2TriggerButton(props, ref) {\n    const { children, onClick, tabIndex = 0, ...otherProps } = props;\n    const { disabled, highlighted, invalid, open, readOnly } = useSelect2Context();\n\n    const className = cn(\n        'cursor-pointer !px-1.5',\n        getInputClasses({ ...props, disabled, highlighted, invalid, readOnly }).replace('w-full', ''),\n        { 'w-full': !props.className?.includes('w-') },\n        props.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled || readOnly) {\n            event.preventDefault();\n            return;\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    return (\n        <button\n            {...otherProps}\n            aria-invalid={invalid ? true : undefined}\n            aria-readonly={readOnly ? true : undefined}\n            className={className}\n            disabled={disabled}\n            onClick={handleClick}\n            ref={ref}\n            role=\"combobox\"\n            tabIndex={disabled || readOnly ? -1 : tabIndex}\n            type=\"button\">\n            {children}\n            <Icon name={open ? 'chevron-up' : 'chevron-down'} className=\"pointer-events-none -mr-1 ml-auto\" />\n        </button>\n    );\n});\n\ntype SingleProps = Omit<Select2TriggerProps, 'value'> & { value?: Select2OptionValue };\n\nconst Single = React.forwardRef<HTMLButtonElement, SingleProps>(function Select2TriggerSingle(props, ref) {\n    const { children, emptyValue, value, ...buttonProps } = props;\n    const { disabled, readOnly, tags } = useSelect2Context();\n    const contentClassName = cn('truncate items-center gap-1');\n\n    const currentValue = children.find(matchesValue(value));\n\n    let output;\n\n    if (currentValue) {\n        if (tags && emptyValue !== undefined && emptyValue !== value) {\n            output = (\n                <Tag\n                    className=\"truncate\"\n                    color={currentValue.props.color}\n                    disabled={disabled}\n                    icon={currentValue.props.icon}\n                    readOnly={readOnly}>\n                    {currentValue.props.children}\n                </Tag>\n            );\n        } else {\n            output = (\n                <>\n                    {currentValue.props.icon ? (\n                        typeof currentValue.props.icon === 'string' ? (\n                            <Icon name={currentValue.props.icon} />\n                        ) : (\n                            currentValue.props.icon\n                        )\n                    ) : null}\n                    {currentValue.props.children}\n                </>\n            );\n        }\n    }\n\n    return (\n        <Button {...buttonProps} ref={ref}>\n            <div className={contentClassName}>{output}</div>\n        </Button>\n    );\n});\n\ntype MultipleProps = Omit<Select2TriggerProps, 'value'> & {\n    values?: Select2OptionValue[];\n};\n\nconst Multiple = React.forwardRef<HTMLButtonElement, MultipleProps>(function Select2TriggerMultiple(props, ref) {\n    const { children, emptyValue: _, values = [], ...buttonProps } = props;\n    const { disabled, open, readOnly, setValue, tags } = useSelect2Context();\n    const buttonRef = useMergedRef<HTMLButtonElement>(ref);\n\n    const valuesAsChildren = values\n        .map(value => children.find(c => c.props.value === value))\n        .filter(c => !!c) as React.ReactElement<Select2OptionProps>[];\n\n    let content;\n    let { className } = buttonProps;\n\n    if (open) {\n        className = cn('!absolute z-20', buttonProps.className);\n        content = (\n            <ScrollArea className=\"my-1 flex max-h-[5.5rem] flex-col\">\n                <div className=\"flex flex-wrap gap-1\">\n                    {valuesAsChildren.map(child => (\n                        <Tag\n                            key={String(child.props.value)}\n                            className=\"truncate\"\n                            color={tags ? child.props.color : undefined}\n                            disabled={disabled}\n                            icon={child.props.icon}\n                            onDelete={event => {\n                                event?.stopPropagation();\n                                event?.preventDefault();\n\n                                if (!disabled && !readOnly) {\n                                    setValue(child.props.value);\n                                }\n                            }}\n                            readOnly={readOnly}>\n                            {child.props.children}\n                        </Tag>\n                    ))}\n                </div>\n            </ScrollArea>\n        );\n    } else {\n        content = <MultipleValue key={String(open)} valuesAsChildren={valuesAsChildren} />;\n    }\n\n    return (\n        <div\n            className={cn('relative inline-flex flex-grow', { 'h-8': open })}\n            style={{ width: open ? buttonRef.current?.offsetWidth : undefined }}>\n            <Button {...buttonProps} className={className} ref={buttonRef}>\n                {content}\n            </Button>\n        </div>\n    );\n});\n\nconst MultipleValue = ({ valuesAsChildren }) => {\n    const { disabled, open, readOnly, setValue, tags } = useSelect2Context();\n    const [contentRef, setContentRef] = React.useState<HTMLDivElement | null>(null);\n    const boundaryIndex = contentRef ? getIndexOfFirstChildOverflowingParent(contentRef, 30) : undefined;\n\n    const createClickHandler = tagValue => event => {\n        event?.stopPropagation();\n        event?.preventDefault();\n\n        if (!disabled && !readOnly) {\n            setValue(tagValue);\n        }\n    };\n\n    return (\n        <div className=\"relative flex items-center gap-1 overflow-hidden\">\n            <div className=\"flex gap-1 truncate\" ref={el => setContentRef(el)}>\n                {valuesAsChildren.map((child, index) => {\n                    const tag = (\n                        <Tag\n                            key={child.props.value}\n                            className={cn('cursor-pointer', {\n                                truncate: index === boundaryIndex,\n                                hidden: boundaryIndex !== undefined && boundaryIndex !== null ? index > boundaryIndex : false,\n                            })}\n                            color={tags ? child.props.color : undefined}\n                            disabled={disabled}\n                            icon={child.props.icon}\n                            onDelete={open ? createClickHandler(child.props.value) : undefined}\n                            readOnly={readOnly}>\n                            {child.props.children}\n                        </Tag>\n                    );\n\n                    if (index === boundaryIndex) {\n                        return (\n                            <Tooltip key={child.props.value} title={String(child.props.children)}>\n                                {tag}\n                            </Tooltip>\n                        );\n                    }\n\n                    return tag;\n                })}\n            </div>\n            {boundaryIndex !== undefined && boundaryIndex !== null && boundaryIndex < valuesAsChildren.length - 1 ? (\n                <Tooltip\n                    title={valuesAsChildren\n                        .slice(boundaryIndex + 1)\n                        .map(child => (child ? String(child.props.children) : ''))\n                        .join(', ')}>\n                    <Badge className=\"flex-shrink-0\">+{valuesAsChildren.length - (boundaryIndex + 1)}</Badge>\n                </Tooltip>\n            ) : null}\n        </div>\n    );\n};\n\nconst matchesValue = (value: undefined | any | any[]) => (child: React.ReactElement<any>) => {\n    if (Array.isArray(value)) {\n        return value.includes(child.props.value);\n    }\n\n    return child.props.value === value;\n};\n"],"names":["Trigger","React","forwardRef","Select2Trigger","props","ref","multiple","value","useSelect2Context","Array","isArray","values","undefined","Multiple","Single","Button","Select2TriggerButton","children","onClick","tabIndex","otherProps","disabled","highlighted","invalid","open","readOnly","className","cn","getInputClasses","replace","_props$className","includes","handleClick","event","preventDefault","role","type","Icon","name","Select2TriggerSingle","emptyValue","buttonProps","tags","contentClassName","currentValue","find","matchesValue","output","Tag","color","icon","Select2TriggerMultiple","_","setValue","buttonRef","useMergedRef","valuesAsChildren","map","c","filter","content","ScrollArea","child","key","String","onDelete","stopPropagation","MultipleValue","style","width","_buttonRef$current","current","offsetWidth","contentRef","setContentRef","useState","boundaryIndex","getIndexOfFirstChildOverflowingParent","createClickHandler","tagValue","el","index","tag","truncate","hidden","Tooltip","title","length","slice","join","Badge"],"mappings":"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"}
+{"version":3,"file":"Trigger.js","sources":["../../../../../../../../src/components/Select2/components/Trigger.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Tag } from '../../Tag/Tag';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { Icon } from '../../Icon/Icon';\nimport { Badge } from '../../Badge/Badge';\nimport { getInputClasses } from '../../Input/util';\nimport { Select2OptionValue } from '../types';\nimport { useSelect2Context } from './Context';\nimport { Select2OptionProps } from './Option';\nimport { getIndexOfFirstChildOverflowingParent } from '../../../utils/dom';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\n\ntype Select2TriggerProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    emptyValue?: Select2OptionValue;\n    placeholder?: string;\n    children: React.ReactElement<Select2OptionProps>[];\n};\n\nexport const Trigger = React.forwardRef<HTMLButtonElement, Select2TriggerProps>(function Select2Trigger(props, ref) {\n    const { multiple, value } = useSelect2Context();\n\n    if (Array.isArray(value) || multiple) {\n        const values = Array.isArray(value) ? value : value !== undefined ? [value] : undefined;\n        return <Multiple {...props} ref={ref} values={values} />;\n    }\n\n    return <Single {...props} ref={ref} value={value} />;\n});\n\ntype ButtonProps = React.HTMLAttributes<HTMLButtonElement> &\n    Omit<Select2TriggerProps, 'children' | 'open' | 'setValue' | 'value'>;\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Select2TriggerButton(props, ref) {\n    const { children, onClick, tabIndex = 0, ...otherProps } = props;\n    const { disabled, highlighted, invalid, open, readOnly } = useSelect2Context();\n\n    const className = cn(\n        'cursor-pointer !px-1.5',\n        getInputClasses({ ...props, disabled, highlighted, invalid, readOnly }).replace('w-full', ''),\n        { 'w-full': !props.className?.includes('w-') },\n        props.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled || readOnly) {\n            event.preventDefault();\n            return;\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    return (\n        <button\n            {...otherProps}\n            aria-invalid={invalid ? true : undefined}\n            aria-readonly={readOnly ? true : undefined}\n            className={className}\n            disabled={disabled}\n            onClick={handleClick}\n            ref={ref}\n            role=\"combobox\"\n            tabIndex={disabled || readOnly ? -1 : tabIndex}\n            type=\"button\">\n            {children}\n            <Icon name={open ? 'chevron-up' : 'chevron-down'} className=\"pointer-events-none -mr-1 ml-auto\" />\n        </button>\n    );\n});\n\ntype SingleProps = Omit<Select2TriggerProps, 'value'> & { value?: Select2OptionValue; placeholder?: string };\n\nconst Single = React.forwardRef<HTMLButtonElement, SingleProps>(function Select2TriggerSingle(props, ref) {\n    const { children, emptyValue, value, placeholder, ...buttonProps } = props;\n    const { disabled, readOnly, tags } = useSelect2Context();\n    const contentClassName = cn('truncate items-center gap-1');\n\n    const currentValue = children.find(matchesValue(value));\n\n    let output;\n\n    if (placeholder && currentValue === undefined) {\n        output = <div className={cn({ 'text-grey-700': disabled, 'text-grey-500': !disabled })}>{placeholder}</div>;\n    } else if (currentValue) {\n        if (tags && emptyValue !== undefined && emptyValue !== value) {\n            output = (\n                <Tag\n                    className=\"truncate\"\n                    color={currentValue.props.color}\n                    disabled={disabled}\n                    icon={currentValue.props.icon}\n                    readOnly={readOnly}>\n                    {currentValue.props.children}\n                </Tag>\n            );\n        } else {\n            output = (\n                <>\n                    {currentValue.props.icon ? (\n                        typeof currentValue.props.icon === 'string' ? (\n                            <Icon name={currentValue.props.icon} />\n                        ) : (\n                            currentValue.props.icon\n                        )\n                    ) : null}\n                    {currentValue.props.children}\n                </>\n            );\n        }\n    }\n\n    return (\n        <Button {...buttonProps} ref={ref}>\n            <div className={contentClassName}>{output}</div>\n        </Button>\n    );\n});\n\ntype MultipleProps = Omit<Select2TriggerProps, 'value'> & {\n    values?: Select2OptionValue[];\n};\n\nconst Multiple = React.forwardRef<HTMLButtonElement, MultipleProps>(function Select2TriggerMultiple(props, ref) {\n    const { children, emptyValue: _, values = [], placeholder, ...buttonProps } = props;\n    const { disabled, open, readOnly, setValue, tags } = useSelect2Context();\n    const buttonRef = useMergedRef<HTMLButtonElement>(ref);\n\n    const valuesAsChildren = values\n        .map(value => children.find(c => c.props.value === value))\n        .filter(c => !!c) as React.ReactElement<Select2OptionProps>[];\n\n    let content;\n    let { className } = buttonProps;\n\n    if (open) {\n        className = cn('!absolute z-20', buttonProps.className);\n        content = (\n            <ScrollArea className=\"my-1 flex max-h-[5.5rem] flex-col\">\n                <div className=\"flex flex-wrap gap-1\">\n                    {valuesAsChildren.length === 0 ? (\n                        <div className={cn({ 'text-grey-700': disabled, 'text-grey-500': !disabled })}>{placeholder}</div>\n                    ) : (\n                        valuesAsChildren.map(child => (\n                            <Tag\n                                key={String(child.props.value)}\n                                className=\"truncate\"\n                                color={tags ? child.props.color : undefined}\n                                disabled={disabled}\n                                icon={child.props.icon}\n                                onDelete={event => {\n                                    event?.stopPropagation();\n                                    event?.preventDefault();\n\n                                    if (!disabled && !readOnly) {\n                                        setValue(child.props.value);\n                                    }\n                                }}\n                                readOnly={readOnly}>\n                                {child.props.children}\n                            </Tag>\n                        ))\n                    )}\n                </div>\n            </ScrollArea>\n        );\n    } else {\n        content = <MultipleValue key={String(open)} valuesAsChildren={valuesAsChildren} placeholder={placeholder} />;\n    }\n\n    return (\n        <div\n            className={cn('relative inline-flex flex-grow', { 'h-8': open })}\n            style={{ width: open ? buttonRef.current?.offsetWidth : undefined }}>\n            <Button {...buttonProps} className={className} ref={buttonRef}>\n                {content}\n            </Button>\n        </div>\n    );\n});\n\ntype MultipleValueProps = Omit<Select2TriggerProps, 'value' | 'children'> & {\n    valuesAsChildren: React.ReactElement<Select2OptionProps>[];\n    placeholder?: string;\n};\n\nconst MultipleValue = ({ valuesAsChildren, placeholder }: MultipleValueProps) => {\n    const { disabled, open, readOnly, setValue, tags } = useSelect2Context();\n    const [contentRef, setContentRef] = React.useState<HTMLDivElement | null>(null);\n    const boundaryIndex = contentRef ? getIndexOfFirstChildOverflowingParent(contentRef, 30) : undefined;\n\n    const createClickHandler = tagValue => event => {\n        event?.stopPropagation();\n        event?.preventDefault();\n\n        if (!disabled && !readOnly) {\n            setValue(tagValue);\n        }\n    };\n\n    return (\n        <div className=\"relative flex items-center gap-1 overflow-hidden\">\n            <div className=\"flex gap-1 truncate\" ref={el => setContentRef(el)}>\n                {valuesAsChildren.length === 0 ? (\n                    <div className={cn({ 'text-grey-700': disabled, 'text-grey-500': !disabled })}>{placeholder}</div>\n                ) : (\n                    valuesAsChildren.map((child, index) => {\n                        const tag = (\n                            <Tag\n                                key={String(child.props.value)}\n                                className={cn('cursor-pointer', {\n                                    truncate: index === boundaryIndex,\n                                    hidden: boundaryIndex !== undefined && boundaryIndex !== null ? index > boundaryIndex : false,\n                                })}\n                                color={tags ? child.props.color : undefined}\n                                disabled={disabled}\n                                icon={child.props.icon}\n                                onDelete={open ? createClickHandler(child.props.value) : undefined}\n                                readOnly={readOnly}>\n                                {child.props.children}\n                            </Tag>\n                        );\n\n                        if (index === boundaryIndex) {\n                            return (\n                                <Tooltip key={String(child.props.value)} title={String(child.props.children)}>\n                                    {tag}\n                                </Tooltip>\n                            );\n                        }\n\n                        return tag;\n                    })\n                )}\n            </div>\n            {boundaryIndex !== undefined && boundaryIndex !== null && boundaryIndex < valuesAsChildren.length - 1 ? (\n                <Tooltip\n                    title={valuesAsChildren\n                        .slice(boundaryIndex + 1)\n                        .map(child => (child ? String(child.props.children) : ''))\n                        .join(', ')}>\n                    <Badge className=\"flex-shrink-0\">+{valuesAsChildren.length - (boundaryIndex + 1)}</Badge>\n                </Tooltip>\n            ) : null}\n        </div>\n    );\n};\n\nconst matchesValue = (value: undefined | any | any[]) => (child: React.ReactElement<any>) => {\n    if (Array.isArray(value)) {\n        return value.includes(child.props.value);\n    }\n\n    return child.props.value === value;\n};\n"],"names":["Trigger","React","forwardRef","Select2Trigger","props","ref","multiple","value","useSelect2Context","Array","isArray","values","undefined","Multiple","Single","Button","Select2TriggerButton","children","onClick","tabIndex","otherProps","disabled","highlighted","invalid","open","readOnly","className","cn","getInputClasses","replace","_props$className","includes","handleClick","event","preventDefault","role","type","Icon","name","Select2TriggerSingle","emptyValue","placeholder","buttonProps","tags","contentClassName","currentValue","find","matchesValue","output","Tag","color","icon","Select2TriggerMultiple","_","setValue","buttonRef","useMergedRef","valuesAsChildren","map","c","filter","content","ScrollArea","length","child","key","String","onDelete","stopPropagation","MultipleValue","style","width","_buttonRef$current","current","offsetWidth","contentRef","setContentRef","useState","boundaryIndex","getIndexOfFirstChildOverflowingParent","createClickHandler","tagValue","el","index","tag","truncate","hidden","Tooltip","title","slice","join","Badge"],"mappings":"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"}

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

@@ -45,6 +45,11 @@ const Table = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const bodyRef = React__default.useRef(null);
   React__default.useEffect(() => {
     const handleKeyDown = event => {
+      const dialog = document.querySelector('[role="dialog"]');
+      // Don't trigger global shortcuts on the table if it is outside of the dialog
+      if (dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(internalRef.current))) {
+        return;
+      }
       tableMeta.hoverState.handleKeyDown(event);
       tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex);
       tableMeta.rowClick.handleKeyDown(event, table);
@@ -59,7 +64,7 @@ const Table = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   // See https://github.com/e-conomic/taco/blob/dev/packages/taco/src/components/Table3/strategies/virtualised.tsx#L143
   // scrollToIndex function changes when row count changes, so it is important to update handlers with new
   // scrollToIndex function.
-  [scrollToIndex]);
+  [scrollToIndex, internalRef.current]);
   const handleBlur = event => {
     tableMeta.editing.handleBlur(event);
   };
@@ -133,7 +138,7 @@ const Table = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     role: "rowgroup",
     ref: bodyRef
   }, renderBody())), /*#__PURE__*/React__default.createElement("div", {
-    className: "border-grey-300 col-span-full -mt-px border-t"
+    className: "border-grey-300 col-span-full translate-y-px border-t"
   }), tableMeta.enableFooter ? /*#__PURE__*/React__default.createElement("div", {
     className: "group/footer contents",
     "data-taco": "table2-footer",
@@ -145,6 +150,7 @@ const Table = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   }, footerGroup.headers.map(footer => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
     key: footer.id
   }, flexRender(footer.column.columnDef.footer, footer.getContext()))))), length ? /*#__PURE__*/React__default.createElement(Summary, {
+    currentLength: table.getRowModel().rows.length,
     length: length,
     table: table
   }) : null) : null) : /*#__PURE__*/React__default.createElement("div", {

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, 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';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n    return null;\n}\n\ntype FixedForwardRef = <T, P = {}>(\n    render: (props: P, ref: React.Ref<T>) => JSX.Element\n) => (props: P & React.RefAttributes<T>) => JSX.Element;\n\n// Cast the old forwardRef to the new one\nexport const fixedForwardRef = React.forwardRef as FixedForwardRef;\n\nconst Table = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const { emptyState: EmptyState, toolbarLeft, toolbarRight } = props;\n    const internalRef = useMergedRef<Table3Ref>(ref);\n\n    const { table, length } = useTable<TType>(props);\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        () => {\n            const handleKeyDown = (event: KeyboardEvent) => {\n                tableMeta.hoverState.handleKeyDown(event);\n                tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex);\n                tableMeta.rowClick.handleKeyDown(event, table);\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]\n    );\n\n    const handleBlur = (event: React.FocusEvent) => {\n        tableMeta.editing.handleBlur(event);\n    };\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]',\n        '[&[data-resizing=\"true\"]]:select-none',\n        {\n            'text-xs': tableMeta.fontSize.size === 'small',\n            'text-sm': tableMeta.fontSize.size === 'medium',\n            'text-base': tableMeta.fontSize.size === 'large',\n        }\n    );\n\n    const { style: cssGridStyle } = useCssGrid<TType>(table);\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 isServerLoadingAndNotReady = tableMeta.isUsingServer && props.length === undefined;\n\n    return (\n        <>\n            {columnFreezingStyle ? <style data-taco=\"table3-column-freezing-styles\">{columnFreezingStyle}</style> : null}\n            <Toolbar\n                table={table}\n                tableProps={props}\n                total={length}\n                left={toolbarLeft}\n                right={toolbarRight}\n                scrollToIndex={scrollToIndex}\n            />\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?.hoverState.isPaused}\n                data-resizing={!!state.columnSizingInfo.isResizingColumn}\n                data-taco=\"table2\"\n                onBlur={handleBlur}\n                onScroll={handleScroll}\n                ref={internalRef}\n                role=\"table\"\n                style={style}>\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 => (\n                                    <React.Fragment key={header.id}>\n                                        {flexRender(header.column.columnDef.header, { ...header.getContext(), scrollToIndex })}\n                                    </React.Fragment>\n                                ))}\n                            </div>\n                        ))}\n                    </div>\n                )}\n                {table.getRowModel().rows.length ? (\n                    <>\n                        <FocusScope>\n                            <div className=\"group/body contents\" data-taco=\"table2-body\" role=\"rowgroup\" ref={bodyRef}>\n                                {renderBody()}\n                            </div>\n                        </FocusScope>\n                        {/* This div makes sure that there is always a free space between the rows and footer when\n                        table height exceeds the cumulative height of all rows. See useCSSGrid.ts */}\n                        <div className=\"border-grey-300 col-span-full -mt-px border-t\" />\n                        {tableMeta.enableFooter ? (\n                            <div className=\"group/footer contents\" data-taco=\"table2-footer\" role=\"rowgroup\">\n                                {table.getFooterGroups().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                                {length ? <Summary length={length} table={table} /> : 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};\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;\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","_","fixedForwardRef","React","forwardRef","Table","Table3","props","ref","emptyState","EmptyState","toolbarLeft","toolbarRight","internalRef","useMergedRef","table","length","useTable","useTableRefInstanceSetup","useEffect","autoFocus","_internalRef$current","current","focus","renderBody","scrollToIndex","useTableRenderStrategy","tableMeta","options","meta","state","getState","bodyRef","useRef","handleKeyDown","event","hoverState","currentRow","getRowModel","rows","rowClick","rowSelection","editing","document","addEventListener","removeEventListener","handleBlur","handleScroll","columnFreezing","Promise","resolve","e","reject","className","cn","fontSize","size","style","cssGridStyle","useCssGrid","cssVars","useCssVars","rowHeight","height","opacity","columnFreezingStyle","useColumnFreezingStyle","id","isServerLoadingAndNotReady","isUsingServer","undefined","Toolbar","tableProps","total","left","right","isEditing","horizontallyScrolled","isPaused","columnSizingInfo","isResizingColumn","onBlur","onScroll","role","getHeaderGroups","map","headerGroup","key","headers","header","Fragment","flexRender","column","columnDef","getContext","FocusScope","enableFooter","getFooterGroups","footerGroup","footer","Summary","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, 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';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n    return null;\n}\n\ntype FixedForwardRef = <T, P = {}>(\n    render: (props: P, ref: React.Ref<T>) => JSX.Element\n) => (props: P & React.RefAttributes<T>) => JSX.Element;\n\n// Cast the old forwardRef to the new one\nexport const fixedForwardRef = React.forwardRef as FixedForwardRef;\n\nconst Table = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const { emptyState: EmptyState, toolbarLeft, toolbarRight } = props;\n    const internalRef = useMergedRef<Table3Ref>(ref);\n\n    const { table, length } = useTable<TType>(props);\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        () => {\n            const handleKeyDown = (event: KeyboardEvent) => {\n                const dialog = document.querySelector('[role=\"dialog\"]');\n\n                // Don't trigger global shortcuts on the table if it is outside of the dialog\n                if (dialog && !dialog?.contains(internalRef.current)) {\n                    return;\n                }\n\n                tableMeta.hoverState.handleKeyDown(event);\n                tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex);\n                tableMeta.rowClick.handleKeyDown(event, table);\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, internalRef.current]\n    );\n\n    const handleBlur = (event: React.FocusEvent) => {\n        tableMeta.editing.handleBlur(event);\n    };\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]',\n        '[&[data-resizing=\"true\"]]:select-none',\n        {\n            'text-xs': tableMeta.fontSize.size === 'small',\n            'text-sm': tableMeta.fontSize.size === 'medium',\n            'text-base': tableMeta.fontSize.size === 'large',\n        }\n    );\n\n    const { style: cssGridStyle } = useCssGrid<TType>(table);\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 isServerLoadingAndNotReady = tableMeta.isUsingServer && props.length === undefined;\n\n    return (\n        <>\n            {columnFreezingStyle ? <style data-taco=\"table3-column-freezing-styles\">{columnFreezingStyle}</style> : null}\n            <Toolbar\n                table={table}\n                tableProps={props}\n                total={length}\n                left={toolbarLeft}\n                right={toolbarRight}\n                scrollToIndex={scrollToIndex}\n            />\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?.hoverState.isPaused}\n                data-resizing={!!state.columnSizingInfo.isResizingColumn}\n                data-taco=\"table2\"\n                onBlur={handleBlur}\n                onScroll={handleScroll}\n                ref={internalRef}\n                role=\"table\"\n                style={style}>\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 => (\n                                    <React.Fragment key={header.id}>\n                                        {flexRender(header.column.columnDef.header, { ...header.getContext(), scrollToIndex })}\n                                    </React.Fragment>\n                                ))}\n                            </div>\n                        ))}\n                    </div>\n                )}\n                {table.getRowModel().rows.length ? (\n                    <>\n                        <FocusScope>\n                            <div className=\"group/body contents\" data-taco=\"table2-body\" role=\"rowgroup\" ref={bodyRef}>\n                                {renderBody()}\n                            </div>\n                        </FocusScope>\n                        {/* This div makes sure that there is always a free space between the rows and footer when\n                        table height exceeds the cumulative height of all rows. See useCSSGrid.ts */}\n                        {/* By vertically translating the div a pixel down, we hide the div border below footer so that\n                        the footer border doesn't appear an extra pixel thick */}\n                        <div className=\"border-grey-300 col-span-full translate-y-px border-t\" />\n                        {tableMeta.enableFooter ? (\n                            <div className=\"group/footer contents\" data-taco=\"table2-footer\" role=\"rowgroup\">\n                                {table.getFooterGroups().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                                {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};\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;\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","_","fixedForwardRef","React","forwardRef","Table","Table3","props","ref","emptyState","EmptyState","toolbarLeft","toolbarRight","internalRef","useMergedRef","table","length","useTable","useTableRefInstanceSetup","useEffect","autoFocus","_internalRef$current","current","focus","renderBody","scrollToIndex","useTableRenderStrategy","tableMeta","options","meta","state","getState","bodyRef","useRef","handleKeyDown","event","dialog","document","querySelector","contains","hoverState","currentRow","getRowModel","rows","rowClick","rowSelection","editing","addEventListener","removeEventListener","handleBlur","handleScroll","columnFreezing","Promise","resolve","e","reject","className","cn","fontSize","size","style","cssGridStyle","useCssGrid","cssVars","useCssVars","rowHeight","height","opacity","columnFreezingStyle","useColumnFreezingStyle","id","isServerLoadingAndNotReady","isUsingServer","undefined","Toolbar","tableProps","total","left","right","isEditing","horizontallyScrolled","isPaused","columnSizingInfo","isResizingColumn","onBlur","onScroll","role","getHeaderGroups","map","headerGroup","key","headers","header","Fragment","flexRender","column","columnDef","getContext","FocusScope","enableFooter","getFooterGroups","footerGroup","footer","Summary","currentLength","stringifiedChildren","String","children","useMemo"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import React__default from 'react';
 import cn from 'classnames';
 import { mergeRefs } from '../../../../../utils/mergeRefs.js';
+import { shouldTriggerShortcut } from '../../../../../utils/keyboard.js';
 import { Input } from '../../../../Input/Input.js';
 import { deselectInputValue } from '../../../../../utils/input.js';
 import { Datepicker } from '../../../../Datepicker/Datepicker.js';
@@ -31,16 +32,26 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
   const columnMeta = column.columnDef.meta;
   const controlRenderer = columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.control;
   const isCellInDetailMode = tableMeta.editing.detailModeEditing && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contains(document.activeElement));
-  // Revert to initial value if escape was pressed
   const handleKeyDown = event => {
+    // For some reason keydown event handler is not propogated to the table when input or other control element is
+    // in focus so we need to check for shortcut that toggles the editing.
+    if (shouldTriggerShortcut(event, {
+      key: 'e',
+      meta: true,
+      shift: false
+    })) {
+      tableMeta.editing.toggleEditing(false);
+      return;
+    }
     const target = event.target;
     if (target.readOnly) {
       return;
     }
-    // prevent row arrow shortcuts triggering when in detail mode
+    // Prevent row arrow shortcuts triggering when in detail mode
     if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
       event.stopPropagation();
     }
+    // Revert to initial value if escape was pressed
     if (event.key === 'Escape') {
       event.preventDefault();
       if (tableMeta.editing.detailModeEditing) {
@@ -86,7 +97,6 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
     // Switching to editing mode, when key pressed any alphabetical character or number
     if (/^[a-z0-9]$/i.test(event.key)) {
       tableMeta.editing.setDetailModeEditing(true);
-      return;
     }
   };
   const handleDatepickerChange = event => {

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                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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"}
+{"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';\nimport { shouldTriggerShortcut } from '../../../../../utils/keyboard';\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    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 = 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        }\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","shouldTriggerShortcut","key","shift","toggleEditing","target","readOnly","stopPropagation","preventDefault","setDetailModeEditing","changedRow","changes","row","id","rowEdtitingDataWithInitialValue","_","isEqual","original","resetChange","_tableRef$current","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/footer/Summary.js

@@ -2,10 +2,13 @@ import React__default from 'react';
 import { useLocalization } from '../../../../Provider/Localization.js';
 
 function Summary(props) {
+  var _table$getState$colum;
   const {
+    currentLength,
     length,
     table
   } = props;
+  const tableMeta = table.options.meta;
   const {
     locale,
     texts
@@ -16,13 +19,20 @@ function Summary(props) {
   const rowsSelectedLength = table.getIsAllRowsSelected() ? length : table.getSelectedRowModel().rows.length;
   if (rowsSelectedLength > 0) {
     label = texts.table3.footer.summary.selected;
-    count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(rowsSelectedLength)), "\u00A0", texts.table3.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, length));
+    count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(rowsSelectedLength)), "\u00A0", texts.table3.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length)));
+  } else if ((_table$getState$colum = table.getState().columnFilters) !== null && _table$getState$colum !== void 0 && _table$getState$colum.length ||
+  // filtered data
+  !!table.getState().globalFilter && tableMeta.search.excludeUnmatchedResults // search with hide enabled
+  ) {
+    label = texts.table3.footer.summary.records;
+    count = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("strong", null, currentLength), "\u00A0", texts.table3.footer.summary.count, "\u00A0", /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length)));
   } else {
     label = texts.table3.footer.summary.records;
     count = /*#__PURE__*/React__default.createElement("strong", null, new Intl.NumberFormat(locale).format(length));
   }
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "sticky bottom-0 left-0 z-40 -mt-10 flex h-10 w-fit items-center whitespace-nowrap bg-white px-4 !pr-3 shadow-[6px_0px_6px_theme(colors.white)]"
+    className: "sticky bottom-0 left-0 z-40 -mt-10 flex h-10 w-fit items-center whitespace-nowrap bg-white px-4 !pr-3 shadow-[6px_0px_6px_theme(colors.white)]",
+    "data-taco": "table2-footer-summary"
   }, label, "\u00A0", count);
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"Summary.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/footer/Summary.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable } from '@tanstack/react-table';\nimport { useLocalization } from '../../../../Provider/Localization';\n\nexport type FooterSummaryProps<TType = unknown> = {\n    length: number;\n    table: RTable<TType>;\n};\n\nexport function Summary<TType = unknown>(props: FooterSummaryProps<TType>) {\n    const { length, table } = props;\n    const { locale, texts } = useLocalization();\n\n    let label;\n    let count;\n\n    // row selection\n    const rowsSelectedLength = table.getIsAllRowsSelected() ? length : table.getSelectedRowModel().rows.length;\n\n    if (rowsSelectedLength > 0) {\n        label = texts.table3.footer.summary.selected;\n        count = (\n            <>\n                <strong>{new Intl.NumberFormat(locale).format(rowsSelectedLength)}</strong>&nbsp;\n                {texts.table3.footer.summary.count}&nbsp;\n                <strong>{length}</strong>\n            </>\n        );\n    } else {\n        label = texts.table3.footer.summary.records;\n        count = <strong>{new Intl.NumberFormat(locale).format(length)}</strong>;\n    }\n\n    return (\n        <div className=\"sticky bottom-0 left-0 z-40 -mt-10 flex h-10 w-fit items-center whitespace-nowrap bg-white px-4 !pr-3 shadow-[6px_0px_6px_theme(colors.white)]\">\n            {label}&nbsp;{count}\n        </div>\n    );\n}\n"],"names":["Summary","props","length","table","locale","texts","useLocalization","label","count","rowsSelectedLength","getIsAllRowsSelected","getSelectedRowModel","rows","table3","footer","summary","selected","React","Intl","NumberFormat","format","records","className"],"mappings":";;;SASgBA,OAAOA,CAAkBC,KAAgC;EACrE,MAAM;IAAEC,MAAM;IAAEC;GAAO,GAAGF,KAAK;EAC/B,MAAM;IAAEG,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EAE3C,IAAIC,KAAK;EACT,IAAIC,KAAK;;EAGT,MAAMC,kBAAkB,GAAGN,KAAK,CAACO,oBAAoB,EAAE,GAAGR,MAAM,GAAGC,KAAK,CAACQ,mBAAmB,EAAE,CAACC,IAAI,CAACV,MAAM;EAE1G,IAAIO,kBAAkB,GAAG,CAAC,EAAE;IACxBF,KAAK,GAAGF,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACC,QAAQ;IAC5CR,KAAK,gBACDS,yEACIA,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACf,MAAM,CAAC,CAACgB,MAAM,CAACX,kBAAkB,CAAC,CAAU,YAC1EJ,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACP,KAAK,yBAClCS,6CAASf,MAAM,CAAU,CAEhC;GACJ,MAAM;IACHK,KAAK,GAAGF,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACM,OAAO;IAC3Cb,KAAK,gBAAGS,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACf,MAAM,CAAC,CAACgB,MAAM,CAAClB,MAAM,CAAC,CAAU;;EAG3E,oBACIe;IAAKK,SAAS,EAAC;KACVf,KAAK,YAAQC,KAAK,CACjB;AAEd;;;;"}
+{"version":3,"file":"Summary.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/footer/Summary.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { useLocalization } from '../../../../Provider/Localization';\n\nexport type FooterSummaryProps<TType = unknown> = {\n    currentLength: number;\n    length: number;\n    table: RTable<TType>;\n};\n\nexport function Summary<TType = unknown>(props: FooterSummaryProps<TType>) {\n    const { currentLength, length, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const { locale, texts } = useLocalization();\n\n    let label;\n    let count;\n\n    // row selection\n    const rowsSelectedLength = table.getIsAllRowsSelected() ? length : table.getSelectedRowModel().rows.length;\n\n    if (rowsSelectedLength > 0) {\n        label = texts.table3.footer.summary.selected;\n        count = (\n            <>\n                <strong>{new Intl.NumberFormat(locale).format(rowsSelectedLength)}</strong>&nbsp;\n                {texts.table3.footer.summary.count}&nbsp;\n                <strong>{new Intl.NumberFormat(locale).format(length)}</strong>\n            </>\n        );\n    } else if (\n        table.getState().columnFilters?.length || // filtered data\n        (!!table.getState().globalFilter && tableMeta.search.excludeUnmatchedResults) // search with hide enabled\n    ) {\n        label = texts.table3.footer.summary.records;\n        count = (\n            <>\n                <strong>{currentLength}</strong>&nbsp;\n                {texts.table3.footer.summary.count}&nbsp;\n                <strong>{new Intl.NumberFormat(locale).format(length)}</strong>\n            </>\n        );\n    } else {\n        label = texts.table3.footer.summary.records;\n        count = <strong>{new Intl.NumberFormat(locale).format(length)}</strong>;\n    }\n\n    return (\n        <div\n            className=\"sticky bottom-0 left-0 z-40 -mt-10 flex h-10 w-fit items-center whitespace-nowrap bg-white px-4 !pr-3 shadow-[6px_0px_6px_theme(colors.white)]\"\n            data-taco=\"table2-footer-summary\">\n            {label}&nbsp;{count}\n        </div>\n    );\n}\n"],"names":["Summary","props","currentLength","length","table","tableMeta","options","meta","locale","texts","useLocalization","label","count","rowsSelectedLength","getIsAllRowsSelected","getSelectedRowModel","rows","table3","footer","summary","selected","React","Intl","NumberFormat","format","_table$getState$colum","getState","columnFilters","globalFilter","search","excludeUnmatchedResults","records","className"],"mappings":";;;SAUgBA,OAAOA,CAAkBC,KAAgC;;EACrE,MAAM;IAAEC,aAAa;IAAEC,MAAM;IAAEC;GAAO,GAAGH,KAAK;EAC9C,MAAMI,SAAS,GAAGD,KAAK,CAACE,OAAO,CAACC,IAAwB;EACxD,MAAM;IAAEC,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EAE3C,IAAIC,KAAK;EACT,IAAIC,KAAK;;EAGT,MAAMC,kBAAkB,GAAGT,KAAK,CAACU,oBAAoB,EAAE,GAAGX,MAAM,GAAGC,KAAK,CAACW,mBAAmB,EAAE,CAACC,IAAI,CAACb,MAAM;EAE1G,IAAIU,kBAAkB,GAAG,CAAC,EAAE;IACxBF,KAAK,GAAGF,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACC,QAAQ;IAC5CR,KAAK,gBACDS,yEACIA,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACf,MAAM,CAAC,CAACgB,MAAM,CAACX,kBAAkB,CAAC,CAAU,YAC1EJ,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACP,KAAK,yBAClCS,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACf,MAAM,CAAC,CAACgB,MAAM,CAACrB,MAAM,CAAC,CAAU,CAEtE;GACJ,MAAM,IACH,CAAAsB,qBAAA,GAAArB,KAAK,CAACsB,QAAQ,EAAE,CAACC,aAAa,cAAAF,qBAAA,eAA9BA,qBAAA,CAAgCtB,MAAM;;EACrC,CAAC,CAACC,KAAK,CAACsB,QAAQ,EAAE,CAACE,YAAY,IAAIvB,SAAS,CAACwB,MAAM,CAACC,uBAAwB;IAC/E;IACEnB,KAAK,GAAGF,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACY,OAAO;IAC3CnB,KAAK,gBACDS,yEACIA,6CAASnB,aAAa,CAAU,YAC/BO,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACP,KAAK,yBAClCS,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACf,MAAM,CAAC,CAACgB,MAAM,CAACrB,MAAM,CAAC,CAAU,CAEtE;GACJ,MAAM;IACHQ,KAAK,GAAGF,KAAK,CAACQ,MAAM,CAACC,MAAM,CAACC,OAAO,CAACY,OAAO;IAC3CnB,KAAK,gBAAGS,6CAAS,IAAIC,IAAI,CAACC,YAAY,CAACf,MAAM,CAAC,CAACgB,MAAM,CAACrB,MAAM,CAAC,CAAU;;EAG3E,oBACIkB;IACIW,SAAS,EAAC,gJAAgJ;iBAChJ;KACTrB,KAAK,YAAQC,KAAK,CACjB;AAEd;;;;"}