@economic/taco 2.12.1 → 2.13.0

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

@@ -1 +1 @@
-{"version":3,"file":"Option.js","sources":["../../../../../../../../src/components/Select2/components/Option.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon, IconName, IconProps } from '../../Icon/Icon';\nimport { Tag } from '../../Tag/Tag';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport * as ListboxPrimitive from '../../../primitives/Listbox2/Listbox2';\nimport { createOptionClassName } from '../utilities';\nimport { useSelect2Context } from './Context';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { EditPopover } from './Edit';\nimport { isMobileDevice } from '../../../utils/device';\nimport { Color } from '../../../types';\n\nexport type Select2OptionProps = Omit<ListboxPrimitive.Listbox2OptionProps, 'children'> & {\n    children: string;\n    color?: Color;\n    description?: string;\n    icon?: React.ReactElement<IconProps> | IconName;\n    textValue?: string;\n};\n\nexport const Option = React.forwardRef<HTMLDivElement, Select2OptionProps>(function Select2Option(props, ref) {\n    const { children, color, description, icon, className: cName, ...otherProps } = props;\n    const {\n        onDelete,\n        onEdit,\n        listboxRef,\n        multiple,\n        ref: selectRef,\n        setOpen,\n        shouldPauseHoverState,\n        tags,\n        value,\n    } = useSelect2Context();\n    const className = cn(createOptionClassName(shouldPauseHoverState), cName);\n\n    const hasValue = Array.isArray(value) ? !!value.length : value !== undefined;\n    const isTag = tags && !!color;\n\n    const handleClick = () => {\n        if (!multiple) {\n            setOpen(false);\n        } else {\n            selectRef.current?.focus();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (isAriaSelectionKey(event)) {\n            if (!multiple || event.key === 'Tab') {\n                setOpen(false);\n            }\n        }\n    };\n\n    const isEmptyOption = children !== '';\n\n    const popover =\n        isEmptyOption && (onEdit || onDelete)\n            ? popoverProps => (\n                  <EditPopover\n                      {...popoverProps}\n                      color={props.color}\n                      key={props.textValue ?? String(props.children)}\n                      text={props.textValue ?? String(props.children)}\n                      value={props.value}\n                  />\n              )\n            : undefined;\n\n    return (\n        <ListboxPrimitive.Option {...otherProps} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref}>\n            {hasValue ? (\n                <Icon name=\"tick\" className=\"pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible\" />\n            ) : null}\n\n            {isTag ? (\n                <Tag className=\"pointer-events-none my-1\" color={color} icon={icon}>\n                    {children}\n                </Tag>\n            ) : (\n                <>\n                    {icon ? typeof icon === 'string' ? <Icon name={icon} /> : icon : null}\n                    <span className=\"flex flex-col\">\n                        <span>{children}</span>\n                        {description ? <span className=\"text-grey-700 -mt-1.5 mb-1.5 text-xs\">{description}</span> : null}\n                    </span>\n                </>\n            )}\n            {popover ? (\n                <IconButton\n                    icon=\"ellipsis-vertical\"\n                    appearance=\"discrete\"\n                    className={cn(\n                        'group-aria-current:visible invisible -mr-1 ml-auto !h-5 min-h-[theme(spacing.6)] !w-5 min-w-[theme(spacing.6)] hover:!bg-black/[.08] focus:!shadow-none group-hover:visible',\n                        {\n                            '!visible': isMobileDevice(window?.navigator),\n                        }\n                    )}\n                    onClick={event => {\n                        event.stopPropagation();\n                        listboxRef?.current?.setActiveIndex(event.currentTarget.parentElement as HTMLDivElement);\n                    }}\n                    popover={popover}\n                    tabIndex={-1}\n                />\n            ) : null}\n        </ListboxPrimitive.Option>\n    );\n});\n"],"names":["Option","React","forwardRef","Select2Option","props","ref","children","color","description","icon","className","cName","otherProps","onDelete","onEdit","listboxRef","multiple","selectRef","setOpen","shouldPauseHoverState","tags","value","useSelect2Context","cn","createOptionClassName","hasValue","Array","isArray","length","undefined","isTag","handleClick","_selectRef$current","current","focus","handleKeyDown","event","isAriaSelectionKey","key","isEmptyOption","popover","popoverProps","_props$textValue","_props$textValue2","EditPopover","textValue","String","text","ListboxPrimitive","onClick","onKeyDown","Icon","name","Tag","IconButton","appearance","isMobileDevice","_window","window","navigator","stopPropagation","_listboxRef$current","setActiveIndex","currentTarget","parentElement","tabIndex"],"mappings":"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"}
+{"version":3,"file":"Option.js","sources":["../../../../../../../../src/components/Select2/components/Option.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Tag } from '../../Tag/Tag';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport * as ListboxPrimitive from '../../../primitives/Listbox2/Listbox2';\nimport { createOptionClassName } from '../utilities';\nimport { useSelect2Context } from './Context';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { EditPopover } from './Edit';\nimport { isMobileDevice } from '../../../utils/device';\nimport { Color } from '../../../types';\n\nexport type Select2OptionProps = Omit<ListboxPrimitive.Listbox2OptionProps, 'children' | 'prefix'> & {\n    children: string;\n    color?: Color;\n    description?: string;\n    prefix?: IconName | JSX.Element;\n    postfix?: IconName | JSX.Element;\n    textValue?: string;\n};\n\nexport const Option = React.forwardRef<HTMLDivElement, Select2OptionProps>(function Select2Option(props, ref) {\n    const { children, color, description, prefix, postfix, className: cName, ...otherProps } = props;\n    const {\n        onDelete,\n        onEdit,\n        listboxRef,\n        multiple,\n        ref: selectRef,\n        setOpen,\n        shouldPauseHoverState,\n        tags,\n        value,\n    } = useSelect2Context();\n    const className = cn(createOptionClassName(shouldPauseHoverState), cName);\n\n    const hasValue = Array.isArray(value) ? !!value.length : value !== undefined;\n    const isTag = tags && !!color;\n\n    const handleClick = () => {\n        if (!multiple) {\n            setOpen(false);\n        } else {\n            selectRef.current?.focus();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (isAriaSelectionKey(event)) {\n            if (!multiple || event.key === 'Tab') {\n                setOpen(false);\n            }\n        }\n    };\n\n    const isEmptyOption = children !== '';\n\n    const popover =\n        isEmptyOption && (onEdit || onDelete)\n            ? popoverProps => (\n                  <EditPopover\n                      {...popoverProps}\n                      color={props.color}\n                      key={props.textValue ?? String(props.children)}\n                      text={props.textValue ?? String(props.children)}\n                      value={props.value}\n                  />\n              )\n            : undefined;\n\n    return (\n        <ListboxPrimitive.Option {...otherProps} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref}>\n            {hasValue ? (\n                <Icon name=\"tick\" className=\"pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible\" />\n            ) : null}\n\n            {isTag ? (\n                <Tag className=\"pointer-events-none my-1\" color={color} icon={prefix}>\n                    {children}\n                </Tag>\n            ) : (\n                <>\n                    {prefix ? typeof prefix === 'string' ? <Icon name={prefix} /> : prefix : null}\n                    <span className=\"flex w-full justify-between\">\n                        <span className=\"flex flex-col\">\n                            <span>{children}</span>\n                            {description ? <span className=\"text-grey-700 -mt-1.5 mb-1.5 text-xs\">{description}</span> : null}\n                        </span>\n                        <span className=\"mt-1 flex flex-col\">\n                            {postfix ? typeof postfix === 'string' ? <Icon name={postfix} /> : postfix : null}\n                        </span>\n                    </span>\n                </>\n            )}\n            {popover ? (\n                <IconButton\n                    icon=\"ellipsis-vertical\"\n                    appearance=\"discrete\"\n                    className={cn(\n                        'group-aria-current:visible invisible -mr-1 ml-auto !h-5 min-h-[theme(spacing.6)] !w-5 min-w-[theme(spacing.6)] hover:!bg-black/[.08] focus:!shadow-none group-hover:visible',\n                        {\n                            '!visible': isMobileDevice(window?.navigator),\n                        }\n                    )}\n                    onClick={event => {\n                        event.stopPropagation();\n                        listboxRef?.current?.setActiveIndex(event.currentTarget.parentElement as HTMLDivElement);\n                    }}\n                    popover={popover}\n                    tabIndex={-1}\n                />\n            ) : null}\n        </ListboxPrimitive.Option>\n    );\n});\n"],"names":["Option","React","forwardRef","Select2Option","props","ref","children","color","description","prefix","postfix","className","cName","otherProps","onDelete","onEdit","listboxRef","multiple","selectRef","setOpen","shouldPauseHoverState","tags","value","useSelect2Context","cn","createOptionClassName","hasValue","Array","isArray","length","undefined","isTag","handleClick","_selectRef$current","current","focus","handleKeyDown","event","isAriaSelectionKey","key","isEmptyOption","popover","popoverProps","_props$textValue","_props$textValue2","EditPopover","textValue","String","text","ListboxPrimitive","onClick","onKeyDown","Icon","name","Tag","icon","IconButton","appearance","isMobileDevice","_window","window","navigator","stopPropagation","_listboxRef$current","setActiveIndex","currentTarget","parentElement","tabIndex"],"mappings":"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"}

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

@@ -104,13 +104,14 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
         className: "truncate",
         color: currentValue.props.color,
         disabled: disabled,
-        icon: currentValue.props.icon,
+        icon: currentValue.props.prefix,
         readOnly: readOnly
       }, currentValue.props.children);
     } else {
-      output = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, currentValue.props.icon ? typeof currentValue.props.icon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
-        name: currentValue.props.icon
-      }) : currentValue.props.icon : null, currentValue.props.children);
+      output = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, currentValue.props.prefix ? typeof currentValue.props.prefix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+        name: currentValue.props.prefix,
+        className: "mr-1 !h-5 !w-5"
+      }) : currentValue.props.prefix : null, currentValue.props.children);
     }
   }
   return /*#__PURE__*/React__default.createElement(Button, Object.assign({}, buttonProps, {
@@ -157,7 +158,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
       className: "truncate",
       color: tags ? child.props.color : undefined,
       disabled: disabled,
-      icon: child.props.icon,
+      icon: child.props.prefix,
       onDelete: event => {
         event === null || event === void 0 ? void 0 : event.stopPropagation();
         event === null || event === void 0 ? void 0 : event.preventDefault();
@@ -225,7 +226,7 @@ const MultipleValue = ({
       }),
       color: tags ? child.props.color : undefined,
       disabled: disabled,
-      icon: child.props.icon,
+      icon: child.props.prefix,
       onDelete: open ? createClickHandler(child.props.value) : undefined,
       readOnly: readOnly
     }, child.props.children);

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    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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"}
+{"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.prefix}\n                    readOnly={readOnly}>\n                    {currentValue.props.children}\n                </Tag>\n            );\n        } else {\n            output = (\n                <>\n                    {currentValue.props.prefix ? (\n                        typeof currentValue.props.prefix === 'string' ? (\n                            <Icon name={currentValue.props.prefix} className=\"mr-1 !h-5 !w-5\" />\n                        ) : (\n                            currentValue.props.prefix\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.prefix}\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.prefix}\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","prefix","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

@@ -11,11 +11,17 @@ import { Toolbar } from './components/toolbar/Toolbar.js';
 import { useTableRefInstanceSetup } from './hooks/useTableRefInstanceSetup.js';
 import { Summary } from './components/columns/footer/Summary.js';
 import { useCssVars } from './hooks/useCssVars.js';
+import { useHeaderOffsetStyle } from './hooks/features/useHeaderOffsetStyle.js';
 export { useTable3DataLoader } from './hooks/useTableDataLoader.js';
 
 function Column(_) {
   return null;
 }
+Column.displayName = 'Table3Column';
+function Group(_) {
+  return null;
+}
+Group.displayName = 'Table3Group';
 // Cast the old forwardRef to the new one
 const fixedForwardRef = React__default.forwardRef;
 const Table = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
@@ -108,10 +114,13 @@ const Table = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     opacity: 0.999
   };
   const columnFreezingStyle = useColumnFreezingStyle(props.id, table);
+  const headerOffsetStyle = useHeaderOffsetStyle(props.id, table);
   const isServerLoadingAndNotReady = tableMeta.isUsingServer && props.length === undefined;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, columnFreezingStyle ? /*#__PURE__*/React__default.createElement("style", {
     "data-taco": "table3-column-freezing-styles"
-  }, columnFreezingStyle) : null, /*#__PURE__*/React__default.createElement(Toolbar, {
+  }, columnFreezingStyle) : null, headerOffsetStyle ? /*#__PURE__*/React__default.createElement("style", {
+    "data-taco": "table3-column-header-offset-styles"
+  }, headerOffsetStyle) : null, /*#__PURE__*/React__default.createElement(Toolbar, {
     table: table,
     tableProps: props,
     total: length,
@@ -143,12 +152,19 @@ const Table = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     className: "contents",
     key: headerGroup.id,
     role: "row"
-  }, headerGroup.headers.map(header => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-    key: header.id
-  }, flexRender(header.column.columnDef.header, {
-    ...header.getContext(),
-    scrollToIndex
-  })))))), table.getRowModel().rows.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FocusScope, {
+  }, headerGroup.headers.map((header, index) => {
+    var _headerGroup$headers;
+    // We need to render separator if column is not the last in array, if index is not equal to freeze column index,
+    // if next element is not placeholder and if column itself is not placeholder.
+    const hasSeparator = index !== tableMeta.columnFreezing.frozenColumnIndex && index !== headerGroup.headers.length - 1 && (!((_headerGroup$headers = headerGroup.headers[index + 1]) !== null && _headerGroup$headers !== void 0 && _headerGroup$headers.isPlaceholder) || !header.isPlaceholder);
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: header.id
+    }, flexRender(header.column.columnDef.header, {
+      ...header.getContext(),
+      scrollToIndex,
+      hasSeparator
+    }));
+  })))), table.getRowModel().rows.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FocusScope, {
     autoFocus: tableMeta.editing.isEditing
   }, /*#__PURE__*/React__default.createElement("div", {
     onMouseDownCapture: handleMouseCapture,
@@ -187,6 +203,7 @@ const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   }));
 });
 Table3.Column = Column;
+Table3.Group = Group;
 
 export { Table3, fixedForwardRef };
 //# sourceMappingURL=Table3.js.map

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, customSettings, 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 target = event.target as HTMLElement;\n                const dialog = target.closest('[role=\"dialog\"]');\n                const eventOriginatedFromCombobox = !!target.closest('[role=\"combobox\"]');\n\n                // Don't trigger global shortcuts on the table if event originated from a combobox or if table is\n                // outside the dialog\n                if (eventOriginatedFromCombobox || (dialog && !dialog?.contains(internalRef.current))) {\n                    return;\n                }\n\n                tableMeta.hoverState.handleKeyDown(event);\n                tableMeta.currentRow.handleKeyDown(\n                    event,\n                    table.getRowModel().rows.length,\n                    scrollToIndex,\n                    tableMeta.editing.isEditing,\n                    internalRef\n                );\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, tableMeta.editing.isEditing, internalRef.current]\n    );\n\n    const handleBlur = tableMeta.editing.isEnabled\n        ? (event: React.FocusEvent) => {\n              tableMeta.editing.handleBlur(event);\n          }\n        : undefined;\n\n    const handleFocus =\n        tableMeta.currentRow.currentRowIndex === undefined\n            ? (event: React.FocusEvent) => {\n                  tableMeta.currentRow.handleFocus(event, table.getRowModel().rows.length, scrollToIndex);\n              }\n            : undefined;\n\n    // mouse capture fires before focus, so we can prevent propagation and stop double setting of the active row\n    const handleMouseCapture =\n        tableMeta.currentRow.currentRowIndex === undefined\n            ? (event: React.MouseEvent) => {\n                  tableMeta.currentRow.handleMouseCapture(event, table.getRowModel().rows.length);\n              }\n            : undefined;\n\n    const handleScroll = async (event: React.MouseEvent<HTMLDivElement>) => {\n        tableMeta.columnFreezing.handleScroll(event);\n    };\n\n    const className = cn(\n        'border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px] focus-visible:outline-none',\n        '[&[data-resizing=\"true\"]]:select-none',\n        {\n            'text-xs': tableMeta.fontSize.size === 'small',\n            'text-sm': tableMeta.fontSize.size === 'medium',\n            'text-base': tableMeta.fontSize.size === 'large',\n        }\n    );\n\n    // Print tables have \"_print\" as the postfix for the table id, so we can use the it to determine\n    // if the table is a print table or not.\n    const { style: cssGridStyle } = useCssGrid<TType>(table, tableMeta.isPrinting, tableMeta.rowActions.actionsForRowLength);\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                customSettings={customSettings}\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                onFocus={handleFocus}\n                onScroll={handleScroll}\n                ref={internalRef}\n                role=\"table\"\n                style={style}\n                tabIndex={-1}>\n                {isServerLoadingAndNotReady ? null : (\n                    <div className=\"group/header contents\" data-taco=\"table2-header\" role=\"rowgroup\">\n                        {table.getHeaderGroups().map(headerGroup => (\n                            <div className=\"contents\" key={headerGroup.id} role=\"row\">\n                                {headerGroup.headers.map(header => (\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 autoFocus={tableMeta.editing.isEditing}>\n                            <div\n                                onMouseDownCapture={handleMouseCapture}\n                                className=\"group/body contents\"\n                                data-taco=\"table2-body\"\n                                role=\"rowgroup\"\n                                ref={bodyRef}>\n                                {renderBody()}\n                            </div>\n                        </FocusScope>\n                        {/* This div makes sure that there is always a free space between the rows and footer when\n                        table height exceeds the cumulative height of all rows. See useCSSGrid.ts */}\n                        {/* By vertically translating the div a pixel down, we hide the div border below footer so that\n                        the footer border doesn't appear an extra pixel thick */}\n                        <div className=\"border-grey-300 col-span-full translate-y-px border-t\" />\n                        {tableMeta.enableFooter ? (\n                            <div className=\"group/footer contents\" data-taco=\"table2-footer\" role=\"rowgroup\">\n                                {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","customSettings","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","target","dialog","closest","eventOriginatedFromCombobox","contains","hoverState","currentRow","getRowModel","rows","editing","isEditing","rowClick","rowSelection","document","addEventListener","removeEventListener","handleBlur","isEnabled","undefined","handleFocus","currentRowIndex","handleMouseCapture","handleScroll","columnFreezing","Promise","resolve","e","reject","className","cn","fontSize","size","style","cssGridStyle","useCssGrid","isPrinting","rowActions","actionsForRowLength","cssVars","useCssVars","rowHeight","height","opacity","columnFreezingStyle","useColumnFreezingStyle","id","isServerLoadingAndNotReady","isUsingServer","Toolbar","tableProps","total","left","right","horizontallyScrolled","isPaused","columnSizingInfo","isResizingColumn","onBlur","onFocus","onScroll","role","tabIndex","getHeaderGroups","map","headerGroup","key","headers","header","Fragment","flexRender","column","columnDef","getContext","FocusScope","onMouseDownCapture","enableFooter","getFooterGroups","footerGroup","footer","Summary","currentLength","stringifiedChildren","String","children","useMemo"],"mappings":"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"}
+{"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { flexRender, TableMeta } from '@tanstack/react-table';\nimport { FocusScope } from '@react-aria/focus';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useCssGrid } from './hooks/useCssGrid';\nimport { useTable } from './hooks/useTable';\nimport { useTableRenderStrategy } from './strategies';\nimport { Table3ColumnProps, Table3GroupProps, Table3Props, Table3Ref } from './types';\nimport { Toolbar } from './components/toolbar/Toolbar';\nimport { useColumnFreezingStyle } from './hooks/features/useColumnFreezing';\nimport { useTableRefInstanceSetup } from './hooks/useTableRefInstanceSetup';\nimport { Summary } from './components/columns/footer/Summary';\nimport { useCssVars } from './hooks/useCssVars';\nimport './style.css';\nimport { useHeaderOffsetStyle } from './hooks/features/useHeaderOffsetStyle';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n    return null;\n}\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: Table3GroupProps) {\n    return null;\n}\nGroup.displayName = 'Table3Group';\n\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, customSettings, 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 target = event.target as HTMLElement;\n                const dialog = target.closest('[role=\"dialog\"]');\n                const eventOriginatedFromCombobox = !!target.closest('[role=\"combobox\"]');\n\n                // Don't trigger global shortcuts on the table if event originated from a combobox or if table is\n                // outside the dialog\n                if (eventOriginatedFromCombobox || (dialog && !dialog?.contains(internalRef.current))) {\n                    return;\n                }\n\n                tableMeta.hoverState.handleKeyDown(event);\n                tableMeta.currentRow.handleKeyDown(\n                    event,\n                    table.getRowModel().rows.length,\n                    scrollToIndex,\n                    tableMeta.editing.isEditing,\n                    internalRef\n                );\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, tableMeta.editing.isEditing, internalRef.current]\n    );\n\n    const handleBlur = tableMeta.editing.isEnabled\n        ? (event: React.FocusEvent) => {\n              tableMeta.editing.handleBlur(event);\n          }\n        : undefined;\n\n    const handleFocus =\n        tableMeta.currentRow.currentRowIndex === undefined\n            ? (event: React.FocusEvent) => {\n                  tableMeta.currentRow.handleFocus(event, table.getRowModel().rows.length, scrollToIndex);\n              }\n            : undefined;\n\n    // mouse capture fires before focus, so we can prevent propagation and stop double setting of the active row\n    const handleMouseCapture =\n        tableMeta.currentRow.currentRowIndex === undefined\n            ? (event: React.MouseEvent) => {\n                  tableMeta.currentRow.handleMouseCapture(event, table.getRowModel().rows.length);\n              }\n            : undefined;\n\n    const handleScroll = async (event: React.MouseEvent<HTMLDivElement>) => {\n        tableMeta.columnFreezing.handleScroll(event);\n    };\n\n    const className = cn(\n        'border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px] focus-visible:outline-none',\n        '[&[data-resizing=\"true\"]]:select-none',\n        {\n            'text-xs': tableMeta.fontSize.size === 'small',\n            'text-sm': tableMeta.fontSize.size === 'medium',\n            'text-base': tableMeta.fontSize.size === 'large',\n        }\n    );\n\n    // Print tables have \"_print\" as the postfix for the table id, so we can use the it to determine\n    // if the table is a print table or not.\n    const { style: cssGridStyle } = useCssGrid<TType>(table, tableMeta.isPrinting, tableMeta.rowActions.actionsForRowLength);\n    const { style: cssVars } = useCssVars(tableMeta.rowHeight.height, tableMeta.fontSize.size);\n\n    const style = {\n        ...cssVars,\n        ...cssGridStyle,\n        // create a new stacking context so our internal z-indexes don't effect external components\n        // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n        opacity: 0.999,\n    };\n\n    const columnFreezingStyle = useColumnFreezingStyle(props.id, table);\n    const headerOffsetStyle = useHeaderOffsetStyle(props.id, table);\n    const isServerLoadingAndNotReady = tableMeta.isUsingServer && props.length === undefined;\n\n    return (\n        <>\n            {columnFreezingStyle ? <style data-taco=\"table3-column-freezing-styles\">{columnFreezingStyle}</style> : null}\n            {headerOffsetStyle ? <style data-taco=\"table3-column-header-offset-styles\">{headerOffsetStyle}</style> : null}\n            <Toolbar\n                table={table}\n                tableProps={props}\n                total={length}\n                left={toolbarLeft}\n                right={toolbarRight}\n                customSettings={customSettings}\n                scrollToIndex={scrollToIndex}\n            />\n            <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                onFocus={handleFocus}\n                onScroll={handleScroll}\n                ref={internalRef}\n                role=\"table\"\n                style={style}\n                tabIndex={-1}>\n                {isServerLoadingAndNotReady ? null : (\n                    <div className=\"group/header contents\" data-taco=\"table2-header\" role=\"rowgroup\">\n                        {table.getHeaderGroups().map(headerGroup => (\n                            <div className=\"contents\" key={headerGroup.id} role=\"row\">\n                                {headerGroup.headers.map((header, index) => {\n                                    // We need to render separator if column is not the last in array, if index is not equal to freeze column index,\n                                    // if next element is not placeholder and if column itself is not placeholder.\n                                    const hasSeparator =\n                                        index !== tableMeta.columnFreezing.frozenColumnIndex &&\n                                        index !== headerGroup.headers.length - 1 &&\n                                        (!headerGroup.headers[index + 1]?.isPlaceholder || !header.isPlaceholder);\n                                    return (\n                                        <React.Fragment key={header.id}>\n                                            {flexRender(header.column.columnDef.header, {\n                                                ...header.getContext(),\n                                                scrollToIndex,\n                                                hasSeparator,\n                                            })}\n                                        </React.Fragment>\n                                    );\n                                })}\n                            </div>\n                        ))}\n                    </div>\n                )}\n                {table.getRowModel().rows.length ? (\n                    <>\n                        <FocusScope autoFocus={tableMeta.editing.isEditing}>\n                            <div\n                                onMouseDownCapture={handleMouseCapture}\n                                className=\"group/body contents\"\n                                data-taco=\"table2-body\"\n                                role=\"rowgroup\"\n                                ref={bodyRef}>\n                                {renderBody()}\n                            </div>\n                        </FocusScope>\n                        {/* This div makes sure that there is always a free space between the rows and footer when\n                        table height exceeds the cumulative height of all rows. See useCSSGrid.ts */}\n                        {/* By vertically translating the div a pixel down, we hide the div border below footer so that\n                        the footer border doesn't appear an extra pixel thick */}\n                        <div className=\"border-grey-300 col-span-full translate-y-px border-t\" />\n                        {tableMeta.enableFooter ? (\n                            <div className=\"group/footer contents\" data-taco=\"table2-footer\" role=\"rowgroup\">\n                                {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    Group: typeof Group;\n};\n\nexport const Table3 = fixedForwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const stringifiedChildren = String(props.children);\n    // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n    // this is cheaper from a complexity perspective, and probably performance wise as well\n    const key = React.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);\n    return <Table<TType> {...props} key={key} ref={ref} />;\n}) as Table3WithStatics;\nTable3.Column = Column;\nTable3.Group = Group;\n\n// hooks\nexport { useTable3DataLoader } from './hooks/useTableDataLoader';\n\n// types\nexport type {\n    useTable3DataFetcher,\n    useTable3DataOptions,\n    useTable3DataFetcherValues as useTableDataValues,\n} from './hooks/useTableDataLoader';\n\nexport type {\n    Table3Ref,\n    Table3Props,\n    Table3Preset,\n    Table3Settings,\n    Table3SettingsHandler,\n    Table3RowHeight,\n    Table3FilterComparator,\n    Table3FilterHandler,\n    Table3LoadPageHandler,\n    Table3LoadAllHandler,\n    Table3RowGotoHandler,\n    Table3SortHandler,\n    Table3Shortcuts,\n    Table3ShortcutHandlerFn,\n    Table3ShortcutHandlerObject,\n    Table3FontSize,\n    Table3SortDirection,\n    Table3SortFn,\n    Table3RowActionRenderer,\n    Table3RowSelectionHandler,\n    Table3RowExpansionRenderer,\n    Table3RowDropHandler,\n    Table3RowDragHandler,\n    Table3RowClickHandler,\n    Table3ColumnProps,\n    Table3ColumnAlignment,\n    Table3ColumnDataType,\n    Table3ColumnHeaderMenu,\n    Table3ColumnClassNameHandler,\n    Table3ColumnFooterRenderer,\n    Table3ColumnRenderer,\n    Table3ColumnControlRenderer,\n    Table3ColumnControlProps,\n} from './types';\n"],"names":["Column","_","displayName","Group","fixedForwardRef","React","forwardRef","Table","Table3","props","ref","emptyState","EmptyState","customSettings","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","target","dialog","closest","eventOriginatedFromCombobox","contains","hoverState","currentRow","getRowModel","rows","editing","isEditing","rowClick","rowSelection","document","addEventListener","removeEventListener","handleBlur","isEnabled","undefined","handleFocus","currentRowIndex","handleMouseCapture","handleScroll","columnFreezing","Promise","resolve","e","reject","className","cn","fontSize","size","style","cssGridStyle","useCssGrid","isPrinting","rowActions","actionsForRowLength","cssVars","useCssVars","rowHeight","height","opacity","columnFreezingStyle","useColumnFreezingStyle","id","headerOffsetStyle","useHeaderOffsetStyle","isServerLoadingAndNotReady","isUsingServer","Toolbar","tableProps","total","left","right","horizontallyScrolled","isPaused","columnSizingInfo","isResizingColumn","onBlur","onFocus","onScroll","role","tabIndex","getHeaderGroups","map","headerGroup","key","headers","header","index","hasSeparator","frozenColumnIndex","_headerGroup$headers","isPlaceholder","Fragment","flexRender","column","columnDef","getContext","FocusScope","onMouseDownCapture","enableFooter","getFooterGroups","footerGroup","footer","Summary","currentLength","stringifiedChildren","String","children","useMemo"],"mappings":"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"}

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

@@ -0,0 +1,70 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Tooltip } from '../../../../Tooltip/Tooltip.js';
+import { HeaderSeparator } from './Header.js';
+
+function Group(props) {
+  const {
+    children,
+    column,
+    header,
+    table,
+    hasSeparator
+  } = props;
+  const columnMeta = React__default.useMemo(() => column.columnDef.meta, []);
+  const tableMeta = table.options.meta;
+  const memoedProps = {
+    align: 'center',
+    children: children !== null && children !== void 0 ? children : columnMeta.header,
+    colSpan: header.colSpan,
+    hasSeparator,
+    id: header.id,
+    index: header.index,
+    isPrinting: tableMeta.isPrinting,
+    length: table.getRowModel().rows.length,
+    meta: columnMeta,
+    table
+  };
+  return /*#__PURE__*/React__default.createElement(MemoedGroup, Object.assign({}, memoedProps));
+}
+const MemoedGroup = /*#__PURE__*/React__default.memo(function MemoedGroup(props) {
+  var _meta$tooltip;
+  const {
+    align,
+    children,
+    colSpan,
+    hasSeparator,
+    id,
+    isPrinting,
+    meta,
+    table
+  } = props;
+  const containerClassName = cn('sticky px-2 mb-[2px]', {
+    'h-10': !isPrinting
+  }, colSpan > 1 ? `col-span-${colSpan}` : '');
+  const innerClassName = cn('font-bold box-content group/column relative', 'px-[var(--table3-cell-padding-x)]', {
+    'h-full items-center': !isPrinting,
+    'pb-2': isPrinting,
+    'border-b-2': !!children
+  }, meta.headerClassName);
+  if (table.options.debugAll) {
+    console.log('header group render', id);
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: containerClassName,
+    "data-taco": "table3-column-group",
+    "data-align": align
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: innerClassName
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: String((_meta$tooltip = meta === null || meta === void 0 ? void 0 : meta.tooltip) !== null && _meta$tooltip !== void 0 ? _meta$tooltip : children),
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: cn({
+      truncate: !isPrinting
+    })
+  }, children)), hasSeparator ? /*#__PURE__*/React__default.createElement(HeaderSeparator, null) : null));
+});
+
+export { Group };
+//# sourceMappingURL=Group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Group.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/header/Group.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { HeaderProps, HeaderSeparator } from './Header';\nimport { ColumnMeta, TableMeta } from '@tanstack/react-table';\nimport { Table3ColumnAlignment } from '../../../types';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\n\nexport function Group<TType = unknown>(props: HeaderProps<TType>) {\n    const { children, column, header, table, hasSeparator } = props;\n    const columnMeta = React.useMemo(() => column.columnDef.meta, []) as ColumnMeta<TType, unknown>;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    const memoedProps = {\n        align: 'center' as Table3ColumnAlignment,\n        children: children ?? columnMeta.header,\n        colSpan: header.colSpan,\n        hasSeparator,\n        id: header.id,\n        index: header.index,\n        isPrinting: tableMeta.isPrinting,\n        length: table.getRowModel().rows.length,\n        meta: columnMeta,\n        table,\n    };\n\n    return <MemoedGroup<TType> {...memoedProps} />;\n}\n\n// Memoization\nexport type MemoedGroupProps<TType = unknown> = Omit<HeaderProps<TType>, 'column' | 'header' | 'scrollToIndex'> & {\n    align?: Table3ColumnAlignment;\n    colSpan: number;\n    hasSeparator?: boolean;\n    id: string;\n    index: number;\n    isPrinting: boolean;\n    length: number;\n    meta: ColumnMeta<TType, unknown>;\n};\n\nconst MemoedGroup = React.memo(function MemoedGroup<TType = unknown>(props: MemoedGroupProps<TType>) {\n    const { align, children, colSpan, hasSeparator, id, isPrinting, meta, table } = props;\n\n    const containerClassName = cn(\n        'sticky px-2 mb-[2px]',\n        {\n            'h-10': !isPrinting,\n        },\n        colSpan > 1 ? `col-span-${colSpan}` : ''\n    );\n\n    const innerClassName = cn(\n        'font-bold box-content group/column relative',\n        'px-[var(--table3-cell-padding-x)]',\n        {\n            'h-full items-center': !isPrinting,\n            'pb-2': isPrinting,\n            'border-b-2': !!children,\n        },\n        meta.headerClassName\n    );\n\n    if (table.options.debugAll) {\n        console.log('header group render', id);\n    }\n\n    return (\n        <div className={containerClassName} data-taco=\"table3-column-group\" data-align={align}>\n            <div className={innerClassName}>\n                <Tooltip title={String(meta?.tooltip ?? children)} placement=\"top\">\n                    <span className={cn({ truncate: !isPrinting })}>{children}</span>\n                </Tooltip>\n                {hasSeparator ? <HeaderSeparator /> : null}\n            </div>\n        </div>\n    );\n}) as <TType = unknown>(props: MemoedGroupProps<TType>) => JSX.Element;\n"],"names":["Group","props","children","column","header","table","hasSeparator","columnMeta","React","useMemo","columnDef","meta","tableMeta","options","memoedProps","align","colSpan","id","index","isPrinting","length","getRowModel","rows","MemoedGroup","memo","containerClassName","cn","innerClassName","headerClassName","debugAll","console","log","className","Tooltip","title","String","_meta$tooltip","tooltip","placement","truncate","HeaderSeparator"],"mappings":";;;;;SAQgBA,KAAKA,CAAkBC,KAAyB;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,MAAM;IAAEC,KAAK;IAAEC;GAAc,GAAGL,KAAK;EAC/D,MAAMM,UAAU,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAMN,MAAM,CAACO,SAAS,CAACC,IAAI,EAAE,EAAE,CAA+B;EAC/F,MAAMC,SAAS,GAAGP,KAAK,CAACQ,OAAO,CAACF,IAAwB;EAExD,MAAMG,WAAW,GAAG;IAChBC,KAAK,EAAE,QAAiC;IACxCb,QAAQ,EAAEA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIK,UAAU,CAACH,MAAM;IACvCY,OAAO,EAAEZ,MAAM,CAACY,OAAO;IACvBV,YAAY;IACZW,EAAE,EAAEb,MAAM,CAACa,EAAE;IACbC,KAAK,EAAEd,MAAM,CAACc,KAAK;IACnBC,UAAU,EAAEP,SAAS,CAACO,UAAU;IAChCC,MAAM,EAAEf,KAAK,CAACgB,WAAW,EAAE,CAACC,IAAI,CAACF,MAAM;IACvCT,IAAI,EAAEJ,UAAU;IAChBF;GACH;EAED,oBAAOG,6BAACe,WAAW,oBAAYT,WAAW,EAAI;AAClD;AAcA,MAAMS,WAAW,gBAAGf,cAAK,CAACgB,IAAI,CAAC,SAASD,WAAWA,CAAkBtB,KAA8B;;EAC/F,MAAM;IAAEc,KAAK;IAAEb,QAAQ;IAAEc,OAAO;IAAEV,YAAY;IAAEW,EAAE;IAAEE,UAAU;IAAER,IAAI;IAAEN;GAAO,GAAGJ,KAAK;EAErF,MAAMwB,kBAAkB,GAAGC,EAAE,CACzB,sBAAsB,EACtB;IACI,MAAM,EAAE,CAACP;GACZ,EACDH,OAAO,GAAG,CAAC,eAAeA,SAAS,GAAG,EAAE,CAC3C;EAED,MAAMW,cAAc,GAAGD,EAAE,CACrB,6CAA6C,EAC7C,mCAAmC,EACnC;IACI,qBAAqB,EAAE,CAACP,UAAU;IAClC,MAAM,EAAEA,UAAU;IAClB,YAAY,EAAE,CAAC,CAACjB;GACnB,EACDS,IAAI,CAACiB,eAAe,CACvB;EAED,IAAIvB,KAAK,CAACQ,OAAO,CAACgB,QAAQ,EAAE;IACxBC,OAAO,CAACC,GAAG,CAAC,qBAAqB,EAAEd,EAAE,CAAC;;EAG1C,oBACIT;IAAKwB,SAAS,EAAEP,kBAAkB;iBAAY,qBAAqB;kBAAaV;kBAC5EP;IAAKwB,SAAS,EAAEL;kBACZnB,6BAACyB,OAAO;IAACC,KAAK,EAAEC,MAAM,EAAAC,aAAA,GAACzB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAE0B,OAAO,cAAAD,aAAA,cAAAA,aAAA,GAAIlC,QAAQ,CAAC;IAAEoC,SAAS,EAAC;kBACzD9B;IAAMwB,SAAS,EAAEN,EAAE,CAAC;MAAEa,QAAQ,EAAE,CAACpB;KAAY;KAAIjB,QAAQ,CAAQ,CAC3D,EACTI,YAAY,gBAAGE,6BAACgC,eAAe,OAAG,GAAG,IAAI,CACxC,CACJ;AAEd,CAAC,CAAqE;;;;"}

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

@@ -15,6 +15,7 @@ function Header(props) {
     children,
     column,
     header,
+    hasSeparator,
     scrollToIndex,
     table
   } = props;
@@ -50,10 +51,13 @@ function Header(props) {
     canResize: column.getCanResize(),
     canSort,
     children: children !== null && children !== void 0 ? children : columnMeta.header,
+    colSpan: header.colSpan,
     hasMenu: isMenuAvailable(table, header),
+    hasSeparator,
     id: header.id,
     index: header.index,
     isFrozen: isFrozenColumn(header, table),
+    isPlaceholder: header.isPlaceholder,
     isPrinting: tableMeta.isPrinting,
     isResizing: column.getIsResizing(),
     length: table.getRowModel().rows.length,
@@ -78,10 +82,13 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     canHide,
     canResize,
     canSort,
+    colSpan,
     hasMenu,
+    hasSeparator,
     id,
     index,
     isFrozen,
+    isPlaceholder,
     isPrinting,
     isResizing,
     length,
@@ -95,19 +102,22 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     sortDirection,
     table
   } = props;
-  const className = cn('sticky top-0 border-b-2 font-bold box-content group/column relative', '[[role="table"][data-resizing="true"]_&]:pointer-events-none', 'px-[var(--table3-cell-padding-x)]', {
+  const className = cn('sticky font-bold border-b-2 box-content group/column relative', '[[role="table"][data-resizing="true"]_&]:pointer-events-none', 'px-[var(--table3-cell-padding-x)]', {
+    '!border-white': isPlaceholder,
     'h-10 items-center': !isPrinting,
     'pb-2': isPrinting,
     'cursor-pointer select-none': canSort,
-    'hover:bg-grey-100': canSort || canResize || hasMenu,
+    'hover:bg-grey-100': !isPlaceholder && (canSort || canResize || hasMenu),
     'focus-within:bg-grey-100': hasMenu,
-    '!pointer-events-all !bg-grey-100': isResizing,
+    '!pointer-events-all !bg-grey-100': !isPlaceholder && isResizing,
     // z-indexes
     'z-10 hover:z-20': !isFrozen && !isResizing,
     'z-20': !isFrozen && isResizing,
-    '!z-30': isFrozen,
+    // when column is frozen, we need to increase it's z-index when it's hovered,
+    // so that resize handler appears on top of next frozen cell, and didn't get cut by it.
+    '!z-30 hover:!z-40': isFrozen,
     '!z-40': isFrozen && isResizing
-  }, meta.headerClassName);
+  }, colSpan > 1 ? `col-span-${colSpan}` : '', meta.headerClassName);
   const [internalRef, setInternalRef] = React__default.useState(null);
   React__default.useLayoutEffect(() => {
     if (internalRef && length) {
@@ -130,7 +140,7 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     "data-column-index": index,
     role: "columnheader",
     ref: setInternalRef
-  }), isInternalColumn(id) ? children : /*#__PURE__*/React__default.createElement(Tooltip, {
+  }), isPlaceholder ? null : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isInternalColumn(id) ? children : /*#__PURE__*/React__default.createElement(Tooltip, {
     title: String((_meta$tooltip = meta === null || meta === void 0 ? void 0 : meta.tooltip) !== null && _meta$tooltip !== void 0 ? _meta$tooltip : children),
     placement: "top"
   }, /*#__PURE__*/React__default.createElement("span", {
@@ -155,11 +165,19 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     scrollToIndex: scrollToIndex,
     sortDirection: sortDirection,
     table: table
-  }) : null, canResize ? /*#__PURE__*/React__default.createElement(Resizer, {
+  }) : null), hasSeparator ? /*#__PURE__*/React__default.createElement(HeaderSeparator, null) : null, !isPlaceholder && canResize ? /*#__PURE__*/React__default.createElement(Resizer, {
     isResizing: isResizing,
     onResize: handleResize
   }) : null);
 });
+function HeaderSeparator() {
+  return /*#__PURE__*/React__default.createElement("div", {
+    "data-taco": "header-separator",
+    className: cn('invisible absolute right-[0.5px] top-0 flex h-full w-2 touch-none select-none justify-center py-2 group-hover/header:visible')
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: cn('bg-grey-300 h-full w-[1px]')
+  }));
+}
 
-export { Header, SORT_DIRECTION };
+export { Header, HeaderSeparator, SORT_DIRECTION };
 //# sourceMappingURL=Header.js.map