@economic/taco 2.45.0-alpha.0 → 2.45.0-alpha.2

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

@@ -3,7 +3,7 @@ import cn from 'clsx';
 import { Icon } from '../../Icon/Icon.js';
 import { Badge } from '../../Badge/Badge.js';
 import { useMergedRef } from '../../../hooks/useMergedRef.js';
-import { getIndexOfFirstChildOverflowingParent } from '../../../utils/dom.js';
+import { getIndexOfFirstChildOverflowingParent, isElementInsideOrTriggeredFromContainer } from '../../../utils/dom.js';
 import { Tooltip } from '../../Tooltip/Tooltip.js';
 import { getInputClasses } from '../../Input/util.js';
 import { ScrollArea } from '../../ScrollArea/ScrollArea.js';
@@ -47,7 +47,9 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Select2TriggerBut
   var _props$className;
   const {
     children,
+    onBlur,
     onClick,
+    onFocus,
     tabIndex = 0,
     ...otherProps
   } = props;
@@ -78,6 +80,18 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Select2TriggerBut
       onClick(event);
     }
   };
+  let handleBlur;
+  if (typeof onBlur === 'function') {
+    // we might be focusing on an input or something inside the dropdown that was triggered by the select
+    // so see if the element gaining focus is inside a portal and look up its controller
+    // if we don't do this, things like validate on blur occur while simply opening the select
+    handleBlur = event => {
+      if (isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {
+        return;
+      }
+      onBlur(event);
+    };
+  }
   // select the value text if the select is readonly
   const handleFocus = event => {
     if (readOnly) {
@@ -87,6 +101,9 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Select2TriggerBut
         (_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : (_window$getSelection$ = _window$getSelection.selectAllChildren) === null || _window$getSelection$ === void 0 ? void 0 : _window$getSelection$.call(_window$getSelection, value);
       }
     }
+    if (typeof onFocus === 'function') {
+      onFocus(event);
+    }
   };
   return /*#__PURE__*/React__default.createElement("button", Object.assign({}, otherProps, {
     "aria-invalid": invalid ? true : undefined,
@@ -94,6 +111,7 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Select2TriggerBut
     className: className,
     disabled: disabled,
     onClick: handleClick,
+    onBlur: handleBlur,
     onFocus: handleFocus,
     ref: ref,
     role: "combobox",

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 'clsx';\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';\nimport { getFontSize } from '../utilities';\n\ntype Select2TriggerProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    emptyValue?: Select2OptionValue;\n    placeholder?: string;\n    children: React.ReactElement<Select2OptionProps>[];\n};\n\nconst Placeholder = ({ disabled, readOnly, ...props }: { disabled: boolean; readOnly: boolean; children: React.ReactNode }) => {\n    if (readOnly) {\n        return null;\n    }\n    return <div {...props} className={cn({ 'text-grey-700': disabled, 'text-grey-500': !disabled })} />;\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, fontSize, highlighted, invalid, open, readOnly } = useSelect2Context();\n\n    const className = cn(\n        'px-1.5 h-fit',\n        getInputClasses({ ...props, disabled, highlighted, invalid, readOnly })\n            .replace('w-full', '')\n            .replace('px-2', ''),\n        getFontSize(fontSize),\n        {\n            'select-text': readOnly,\n            'w-full': !props.className?.includes('w-'),\n        },\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    // select the value text if the select is readonly\n    const handleFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            const value = event.currentTarget.querySelector(':first-child');\n\n            if (value) {\n                window.getSelection()?.selectAllChildren?.(value);\n            }\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            onFocus={handleFocus}\n            ref={ref}\n            role=\"combobox\"\n            tabIndex={disabled ? -1 : tabIndex}\n            type=\"button\">\n            {children}\n            {readOnly ? null : <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 = (\n            <Placeholder disabled={disabled} readOnly={readOnly}>\n                {placeholder}\n            </Placeholder>\n        );\n    } else if (currentValue) {\n        if (tags && 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    const forwardClick = (event: any) => {\n        event.preventDefault();\n        buttonRef.current?.click();\n    };\n\n    let content;\n    let { className } = buttonProps;\n\n    if (open) {\n        className = cn('!absolute z-20 !h-fit', buttonProps.className);\n        content = (\n            <ScrollArea className=\"my-1 flex max-h-[5.5rem] flex-col\" onClick={forwardClick}>\n                <div className=\"flex flex-wrap gap-1\">\n                    {valuesAsChildren.length === 0 ? (\n                        <Placeholder disabled={disabled} readOnly={readOnly}>\n                            {placeholder}\n                        </Placeholder>\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 onClick={forwardClick} valuesAsChildren={valuesAsChildren} placeholder={placeholder} />;\n    }\n\n    return (\n        <div\n            className=\"relative inline-flex h-fit flex-grow\"\n            data-taco=\"select2-container\"\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    onClick?: (event: any) => void;\n};\n\nconst MultipleValue = ({ onClick, valuesAsChildren, placeholder }: MultipleValueProps) => {\n    const { disabled, readOnly, tags } = useSelect2Context();\n    const [contentRef, setContentRef] = React.useState<HTMLDivElement | null>(null);\n    const boundaryIndex = contentRef ? getIndexOfFirstChildOverflowingParent(contentRef, 30) : undefined;\n\n    return (\n        <div className=\"relative flex w-full items-center gap-1 overflow-hidden\" onClick={onClick}>\n            <div className=\"flex flex-1 gap-1 truncate\" ref={ref => setContentRef(ref)}>\n                {valuesAsChildren.length === 0 ? (\n                    <Placeholder disabled={disabled} readOnly={readOnly}>\n                        {placeholder}\n                    </Placeholder>\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                                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":["Placeholder","disabled","readOnly","props","React","className","cn","Trigger","forwardRef","Select2Trigger","ref","multiple","value","useSelect2Context","Array","isArray","values","undefined","Multiple","Single","Button","Select2TriggerButton","children","onClick","tabIndex","otherProps","fontSize","highlighted","invalid","open","getInputClasses","replace","getFontSize","_props$className","includes","handleClick","event","preventDefault","handleFocus","currentTarget","querySelector","_window$getSelection","_window$getSelection$","window","getSelection","selectAllChildren","call","onFocus","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","forwardClick","_buttonRef$current","current","click","content","ScrollArea","length","child","key","String","onDelete","stopPropagation","MultipleValue","style","width","_buttonRef$current2","offsetWidth","contentRef","setContentRef","useState","boundaryIndex","getIndexOfFirstChildOverflowingParent","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 'clsx';\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, isElementInsideOrTriggeredFromContainer } from '../../../utils/dom';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { getFontSize } from '../utilities';\n\ntype Select2TriggerProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    emptyValue?: Select2OptionValue;\n    placeholder?: string;\n    children: React.ReactElement<Select2OptionProps>[];\n};\n\nconst Placeholder = ({ disabled, readOnly, ...props }: { disabled: boolean; readOnly: boolean; children: React.ReactNode }) => {\n    if (readOnly) {\n        return null;\n    }\n    return <div {...props} className={cn({ 'text-grey-700': disabled, 'text-grey-500': !disabled })} />;\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, onBlur, onClick, onFocus, tabIndex = 0, ...otherProps } = props;\n    const { disabled, fontSize, highlighted, invalid, open, readOnly } = useSelect2Context();\n\n    const className = cn(\n        'px-1.5 h-fit',\n        getInputClasses({ ...props, disabled, highlighted, invalid, readOnly })\n            .replace('w-full', '')\n            .replace('px-2', ''),\n        getFontSize(fontSize),\n        {\n            'select-text': readOnly,\n            'w-full': !props.className?.includes('w-'),\n        },\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    let handleBlur;\n\n    if (typeof onBlur === 'function') {\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            if (isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {\n                return;\n            }\n\n            onBlur(event);\n        };\n    }\n\n    // select the value text if the select is readonly\n    const handleFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            const value = event.currentTarget.querySelector(':first-child');\n\n            if (value) {\n                window.getSelection()?.selectAllChildren?.(value);\n            }\n        }\n\n        if (typeof onFocus === 'function') {\n            onFocus(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            onBlur={handleBlur}\n            onFocus={handleFocus}\n            ref={ref}\n            role=\"combobox\"\n            tabIndex={disabled ? -1 : tabIndex}\n            type=\"button\">\n            {children}\n            {readOnly ? null : <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 = (\n            <Placeholder disabled={disabled} readOnly={readOnly}>\n                {placeholder}\n            </Placeholder>\n        );\n    } else if (currentValue) {\n        if (tags && 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    const forwardClick = (event: any) => {\n        event.preventDefault();\n        buttonRef.current?.click();\n    };\n\n    let content;\n    let { className } = buttonProps;\n\n    if (open) {\n        className = cn('!absolute z-20 !h-fit', buttonProps.className);\n        content = (\n            <ScrollArea className=\"my-1 flex max-h-[5.5rem] flex-col\" onClick={forwardClick}>\n                <div className=\"flex flex-wrap gap-1\">\n                    {valuesAsChildren.length === 0 ? (\n                        <Placeholder disabled={disabled} readOnly={readOnly}>\n                            {placeholder}\n                        </Placeholder>\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 onClick={forwardClick} valuesAsChildren={valuesAsChildren} placeholder={placeholder} />;\n    }\n\n    return (\n        <div\n            className=\"relative inline-flex h-fit flex-grow\"\n            data-taco=\"select2-container\"\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    onClick?: (event: any) => void;\n};\n\nconst MultipleValue = ({ onClick, valuesAsChildren, placeholder }: MultipleValueProps) => {\n    const { disabled, readOnly, tags } = useSelect2Context();\n    const [contentRef, setContentRef] = React.useState<HTMLDivElement | null>(null);\n    const boundaryIndex = contentRef ? getIndexOfFirstChildOverflowingParent(contentRef, 30) : undefined;\n\n    return (\n        <div className=\"relative flex w-full items-center gap-1 overflow-hidden\" onClick={onClick}>\n            <div className=\"flex flex-1 gap-1 truncate\" ref={ref => setContentRef(ref)}>\n                {valuesAsChildren.length === 0 ? (\n                    <Placeholder disabled={disabled} readOnly={readOnly}>\n                        {placeholder}\n                    </Placeholder>\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                                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":["Placeholder","disabled","readOnly","props","React","className","cn","Trigger","forwardRef","Select2Trigger","ref","multiple","value","useSelect2Context","Array","isArray","values","undefined","Multiple","Single","Button","Select2TriggerButton","children","onBlur","onClick","onFocus","tabIndex","otherProps","fontSize","highlighted","invalid","open","getInputClasses","replace","getFontSize","_props$className","includes","handleClick","event","preventDefault","handleBlur","isElementInsideOrTriggeredFromContainer","relatedTarget","currentTarget","handleFocus","querySelector","_window$getSelection","_window$getSelection$","window","getSelection","selectAllChildren","call","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","forwardClick","_buttonRef$current","current","click","content","ScrollArea","length","child","key","String","onDelete","stopPropagation","MultipleValue","style","width","_buttonRef$current2","offsetWidth","contentRef","setContentRef","useState","boundaryIndex","getIndexOfFirstChildOverflowingParent","index","tag","truncate","hidden","Tooltip","title","slice","join","Badge"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 import React__default from 'react';
+import { filterOption } from '../utilities.js';
 
 const isGroup = child => !!child.props.heading || !!child.props.hasSeparator;
 const useChildren = ({
@@ -51,16 +52,6 @@ const useChildren = ({
     setSearchQuery
   };
 };
-const filterOption = (child, searchQuery) => {
-  var _child$props$textValu, _child$props$descript;
-  if ((_child$props$textValu = child.props.textValue) !== null && _child$props$textValu !== void 0 && _child$props$textValu.toLowerCase().includes(searchQuery.toLowerCase())) {
-    return true;
-  }
-  if ((_child$props$descript = child.props.description) !== null && _child$props$descript !== void 0 && _child$props$descript.toLowerCase().includes(searchQuery.toLowerCase())) {
-    return true;
-  }
-  return String(child.props.children).toLowerCase().includes(searchQuery.toLowerCase());
-};
 
 export { isGroup, useChildren };
 //# sourceMappingURL=useChildren.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useChildren.js","sources":["../../../../../../../../src/components/Select2/hooks/useChildren.tsx"],"sourcesContent":["import React from 'react';\nimport { Select2OptionProps } from '../components/Option';\nimport { Select2GroupProps } from '../Select2';\nimport { Select2Children, Select2OptionValue, Select2Value } from '../types';\n\nexport const isGroup = (\n    child: React.ReactElement<Select2OptionProps> | React.ReactElement<Select2GroupProps>\n): child is React.ReactElement<Select2GroupProps> =>\n    !!(child.props as Select2GroupProps).heading || !!(child.props as Select2GroupProps).hasSeparator;\n\nexport type useChildrenArgs = {\n    children: Select2Children;\n    emptyValue?: Select2OptionValue;\n    multiple?: boolean;\n    open?: boolean;\n    setValue: (nextValue: Select2OptionValue) => void;\n    value?: Select2Value;\n};\nexport const useChildren = ({ children: initialChildren, emptyValue, multiple, open, setValue, value }: useChildrenArgs) => {\n    const [searchQuery, setSearchQuery] = React.useState<string>('');\n\n    // flatten children that might be inside groups\n    // support empty value - probably a more elegant way to achieve this\n    const flattenedChildren: React.ReactElement<Select2OptionProps>[] = React.useMemo(() => {\n        const initial: React.ReactElement<Select2OptionProps>[] =\n            initialChildren\n                ?.map(child => {\n                    if (isGroup(child)) {\n                        return (child as React.ReactElement<Select2GroupProps>).props.children;\n                    }\n                    // Since we are filtering out groups just above, then casting child to React.ReactElement<Select2OptionProps>, to avoid type inconsistency errors.\n                    return child as React.ReactElement<Select2OptionProps>;\n                })\n                .flatMap(c => c) || [];\n\n        return initial;\n    }, [initialChildren]);\n\n    // set an initial value if none is set, we have to trigger state updates for controlled components\n    React.useEffect(() => {\n        if (!multiple && emptyValue === undefined && value === undefined) {\n            setValue(flattenedChildren?.[0]?.props.value);\n        }\n    }, []);\n\n    React.useEffect(() => {\n        if (!open) {\n            setSearchQuery('');\n        }\n    }, [open]);\n\n    // apply filtering\n    const filteredChildren = React.useMemo(() => {\n        return initialChildren\n            .map(child => {\n                if (isGroup(child)) {\n                    const filteredGroupChildren = (child as React.ReactElement<Select2GroupProps>).props.children.filter(\n                        groupChild => filterOption(groupChild as React.ReactElement<Select2OptionProps>, searchQuery)\n                    );\n                    return filteredGroupChildren.length ? React.cloneElement(child, {}, filteredGroupChildren) : null;\n                }\n\n                return filterOption(child as React.ReactElement<Select2OptionProps>, searchQuery) ? child : null;\n            })\n            .filter(child => !!child) as Select2Children;\n    }, [flattenedChildren, searchQuery]);\n\n    return {\n        flattenedChildren,\n        filteredChildren,\n        searchQuery,\n        setSearchQuery,\n    };\n};\n\nconst filterOption = (child: React.ReactElement<Select2OptionProps>, searchQuery: string) => {\n    if (child.props.textValue?.toLowerCase().includes(searchQuery.toLowerCase())) {\n        return true;\n    }\n\n    if (child.props.description?.toLowerCase().includes(searchQuery.toLowerCase())) {\n        return true;\n    }\n\n    return String(child.props.children).toLowerCase().includes(searchQuery.toLowerCase());\n};\n"],"names":["isGroup","child","props","heading","hasSeparator","useChildren","children","initialChildren","emptyValue","multiple","open","setValue","value","searchQuery","setSearchQuery","React","useState","flattenedChildren","useMemo","initial","map","flatMap","c","useEffect","undefined","_flattenedChildren$","filteredChildren","filteredGroupChildren","filter","groupChild","filterOption","length","cloneElement","_child$props$textValu","textValue","toLowerCase","includes","_child$props$descript","description","String"],"mappings":"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"}
+{"version":3,"file":"useChildren.js","sources":["../../../../../../../../src/components/Select2/hooks/useChildren.tsx"],"sourcesContent":["import React from 'react';\nimport { Select2OptionProps } from '../components/Option';\nimport { Select2GroupProps } from '../Select2';\nimport { Select2Children, Select2OptionValue, Select2Value } from '../types';\nimport { filterOption } from '../utilities';\n\nexport const isGroup = (\n    child: React.ReactElement<Select2OptionProps> | React.ReactElement<Select2GroupProps>\n): child is React.ReactElement<Select2GroupProps> =>\n    !!(child.props as Select2GroupProps).heading || !!(child.props as Select2GroupProps).hasSeparator;\n\nexport type useChildrenArgs = {\n    children: Select2Children;\n    emptyValue?: Select2OptionValue;\n    multiple?: boolean;\n    open?: boolean;\n    setValue: (nextValue: Select2OptionValue) => void;\n    value?: Select2Value;\n};\nexport const useChildren = ({ children: initialChildren, emptyValue, multiple, open, setValue, value }: useChildrenArgs) => {\n    const [searchQuery, setSearchQuery] = React.useState<string>('');\n\n    // flatten children that might be inside groups\n    // support empty value - probably a more elegant way to achieve this\n    const flattenedChildren: React.ReactElement<Select2OptionProps>[] = React.useMemo(() => {\n        const initial: React.ReactElement<Select2OptionProps>[] =\n            initialChildren\n                ?.map(child => {\n                    if (isGroup(child)) {\n                        return (child as React.ReactElement<Select2GroupProps>).props.children;\n                    }\n                    // Since we are filtering out groups just above, then casting child to React.ReactElement<Select2OptionProps>, to avoid type inconsistency errors.\n                    return child as React.ReactElement<Select2OptionProps>;\n                })\n                .flatMap(c => c) || [];\n\n        return initial;\n    }, [initialChildren]);\n\n    // set an initial value if none is set, we have to trigger state updates for controlled components\n    React.useEffect(() => {\n        if (!multiple && emptyValue === undefined && value === undefined) {\n            setValue(flattenedChildren?.[0]?.props.value);\n        }\n    }, []);\n\n    React.useEffect(() => {\n        if (!open) {\n            setSearchQuery('');\n        }\n    }, [open]);\n\n    // apply filtering\n    const filteredChildren = React.useMemo(() => {\n        return initialChildren\n            .map(child => {\n                if (isGroup(child)) {\n                    const filteredGroupChildren = (child as React.ReactElement<Select2GroupProps>).props.children.filter(\n                        groupChild => filterOption(groupChild as React.ReactElement<Select2OptionProps>, searchQuery)\n                    );\n                    return filteredGroupChildren.length ? React.cloneElement(child, {}, filteredGroupChildren) : null;\n                }\n\n                return filterOption(child as React.ReactElement<Select2OptionProps>, searchQuery) ? child : null;\n            })\n            .filter(child => !!child) as Select2Children;\n    }, [flattenedChildren, searchQuery]);\n\n    return {\n        flattenedChildren,\n        filteredChildren,\n        searchQuery,\n        setSearchQuery,\n    };\n};\n"],"names":["isGroup","child","props","heading","hasSeparator","useChildren","children","initialChildren","emptyValue","multiple","open","setValue","value","searchQuery","setSearchQuery","React","useState","flattenedChildren","useMemo","initial","map","flatMap","c","useEffect","undefined","_flattenedChildren$","filteredChildren","filteredGroupChildren","filter","groupChild","filterOption","length","cloneElement"],"mappings":";;;MAMaA,OAAO,GAChBC,KAAqF,IAErF,CAAC,CAAEA,KAAK,CAACC,KAA2B,CAACC,OAAO,IAAI,CAAC,CAAEF,KAAK,CAACC,KAA2B,CAACE;MAU5EC,WAAW,GAAGA,CAAC;EAAEC,QAAQ,EAAEC,eAAe;EAAEC,UAAU;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,QAAQ;EAAEC;CAAwB;EACnH,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAS,EAAE,CAAC;;;EAIhE,MAAMC,iBAAiB,GAA6CF,cAAK,CAACG,OAAO,CAAC;IAC9E,MAAMC,OAAO,GACT,CAAAZ,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CACTa,GAAG,CAACnB,KAAK;MACP,IAAID,OAAO,CAACC,KAAK,CAAC,EAAE;QAChB,OAAQA,KAA+C,CAACC,KAAK,CAACI,QAAQ;;;MAG1E,OAAOL,KAA+C;KACzD,CAAC,CACDoB,OAAO,CAACC,CAAC,IAAIA,CAAC,CAAC,KAAI,EAAE;IAE9B,OAAOH,OAAO;GACjB,EAAE,CAACZ,eAAe,CAAC,CAAC;;EAGrBQ,cAAK,CAACQ,SAAS,CAAC;IACZ,IAAI,CAACd,QAAQ,IAAID,UAAU,KAAKgB,SAAS,IAAIZ,KAAK,KAAKY,SAAS,EAAE;MAAA,IAAAC,mBAAA;MAC9Dd,QAAQ,CAACM,iBAAiB,aAAjBA,iBAAiB,wBAAAQ,mBAAA,GAAjBR,iBAAiB,CAAG,CAAC,CAAC,cAAAQ,mBAAA,uBAAtBA,mBAAA,CAAwBvB,KAAK,CAACU,KAAK,CAAC;;GAEpD,EAAE,EAAE,CAAC;EAENG,cAAK,CAACQ,SAAS,CAAC;IACZ,IAAI,CAACb,IAAI,EAAE;MACPI,cAAc,CAAC,EAAE,CAAC;;GAEzB,EAAE,CAACJ,IAAI,CAAC,CAAC;;EAGV,MAAMgB,gBAAgB,GAAGX,cAAK,CAACG,OAAO,CAAC;IACnC,OAAOX,eAAe,CACjBa,GAAG,CAACnB,KAAK;MACN,IAAID,OAAO,CAACC,KAAK,CAAC,EAAE;QAChB,MAAM0B,qBAAqB,GAAI1B,KAA+C,CAACC,KAAK,CAACI,QAAQ,CAACsB,MAAM,CAChGC,UAAU,IAAIC,YAAY,CAACD,UAAoD,EAAEhB,WAAW,CAAC,CAChG;QACD,OAAOc,qBAAqB,CAACI,MAAM,gBAAGhB,cAAK,CAACiB,YAAY,CAAC/B,KAAK,EAAE,EAAE,EAAE0B,qBAAqB,CAAC,GAAG,IAAI;;MAGrG,OAAOG,YAAY,CAAC7B,KAA+C,EAAEY,WAAW,CAAC,GAAGZ,KAAK,GAAG,IAAI;KACnG,CAAC,CACD2B,MAAM,CAAC3B,KAAK,IAAI,CAAC,CAACA,KAAK,CAAoB;GACnD,EAAE,CAACgB,iBAAiB,EAAEJ,WAAW,CAAC,CAAC;EAEpC,OAAO;IACHI,iBAAiB;IACjBS,gBAAgB;IAChBb,WAAW;IACXC;GACH;AACL;;;;"}

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

@@ -16,6 +16,16 @@ const getFontSize = fontSize => {
       return 'text-sm';
   }
 };
+const filterOption = (child, searchQuery) => {
+  var _child$props$textValu, _child$props$descript;
+  if ((_child$props$textValu = child.props.textValue) !== null && _child$props$textValu !== void 0 && _child$props$textValu.toLowerCase().includes(searchQuery.toLowerCase())) {
+    return true;
+  }
+  if ((_child$props$descript = child.props.description) !== null && _child$props$descript !== void 0 && _child$props$descript.toLowerCase().includes(searchQuery.toLowerCase())) {
+    return true;
+  }
+  return String(child.props.children).toLowerCase().includes(searchQuery.toLowerCase());
+};
 
-export { createCollectionClassName, createOptionClassName, getFontSize };
+export { createCollectionClassName, createOptionClassName, filterOption, getFontSize };
 //# sourceMappingURL=utilities.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"utilities.js","sources":["../../../../../../../src/components/Select2/utilities.ts"],"sourcesContent":["import cn from 'clsx';\nimport { FontSize, FontSizes } from '../../types';\n\nexport const createOptionClassName = (shouldPauseHoverState = false) =>\n    cn(\n        'group mb-px flex w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white aria-current:wcag-grey-200 aria-disabled:text-black/25 aria-disabled:pointer-events-none !justify-normal',\n\n        {\n            'hover:wcag-grey-200': !shouldPauseHoverState,\n        }\n    );\n\nexport const createCollectionClassName = () => 'flex flex-col gap-px';\n\nexport const getFontSize = (fontSize?: FontSize) => {\n    switch (fontSize) {\n        case FontSizes.small:\n            return 'text-xs';\n\n        case FontSizes.large:\n            return 'text-base';\n\n        case FontSizes.medium:\n        default:\n            return 'text-sm';\n    }\n};\n"],"names":["createOptionClassName","shouldPauseHoverState","cn","createCollectionClassName","getFontSize","fontSize","FontSizes","small","large","medium"],"mappings":";;;MAGaA,qBAAqB,GAAGA,CAACC,qBAAqB,GAAG,KAAK,KAC/DC,EAAE,CACE,+QAA+Q,EAE/Q;EACI,qBAAqB,EAAE,CAACD;CAC3B;MAGIE,yBAAyB,GAAGA,MAAM;MAElCC,WAAW,GAAIC,QAAmB;EAC3C,QAAQA,QAAQ;IACZ,KAAKC,SAAS,CAACC,KAAK;MAChB,OAAO,SAAS;IAEpB,KAAKD,SAAS,CAACE,KAAK;MAChB,OAAO,WAAW;IAEtB,KAAKF,SAAS,CAACG,MAAM;IACrB;MACI,OAAO,SAAS;;AAE5B;;;;"}
+{"version":3,"file":"utilities.js","sources":["../../../../../../../src/components/Select2/utilities.ts"],"sourcesContent":["import cn from 'clsx';\nimport { FontSize, FontSizes } from '../../types';\nimport { Select2OptionProps } from './components/Option';\n\nexport const createOptionClassName = (shouldPauseHoverState = false) =>\n    cn(\n        'group mb-px flex w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white aria-current:wcag-grey-200 aria-disabled:text-black/25 aria-disabled:pointer-events-none !justify-normal',\n\n        {\n            'hover:wcag-grey-200': !shouldPauseHoverState,\n        }\n    );\n\nexport const createCollectionClassName = () => 'flex flex-col gap-px';\n\nexport const getFontSize = (fontSize?: FontSize) => {\n    switch (fontSize) {\n        case FontSizes.small:\n            return 'text-xs';\n\n        case FontSizes.large:\n            return 'text-base';\n\n        case FontSizes.medium:\n        default:\n            return 'text-sm';\n    }\n};\n\nexport const filterOption = (child: React.ReactElement<Select2OptionProps>, searchQuery: string) => {\n    if (child.props.textValue?.toLowerCase().includes(searchQuery.toLowerCase())) {\n        return true;\n    }\n\n    if (child.props.description?.toLowerCase().includes(searchQuery.toLowerCase())) {\n        return true;\n    }\n\n    return String(child.props.children).toLowerCase().includes(searchQuery.toLowerCase());\n};\n"],"names":["createOptionClassName","shouldPauseHoverState","cn","createCollectionClassName","getFontSize","fontSize","FontSizes","small","large","medium","filterOption","child","searchQuery","_child$props$textValu","props","textValue","toLowerCase","includes","_child$props$descript","description","String","children"],"mappings":";;;MAIaA,qBAAqB,GAAGA,CAACC,qBAAqB,GAAG,KAAK,KAC/DC,EAAE,CACE,+QAA+Q,EAE/Q;EACI,qBAAqB,EAAE,CAACD;CAC3B;MAGIE,yBAAyB,GAAGA,MAAM;MAElCC,WAAW,GAAIC,QAAmB;EAC3C,QAAQA,QAAQ;IACZ,KAAKC,SAAS,CAACC,KAAK;MAChB,OAAO,SAAS;IAEpB,KAAKD,SAAS,CAACE,KAAK;MAChB,OAAO,WAAW;IAEtB,KAAKF,SAAS,CAACG,MAAM;IACrB;MACI,OAAO,SAAS;;AAE5B;MAEaC,YAAY,GAAGA,CAACC,KAA6C,EAAEC,WAAmB;;EAC3F,KAAAC,qBAAA,GAAIF,KAAK,CAACG,KAAK,CAACC,SAAS,cAAAF,qBAAA,eAArBA,qBAAA,CAAuBG,WAAW,EAAE,CAACC,QAAQ,CAACL,WAAW,CAACI,WAAW,EAAE,CAAC,EAAE;IAC1E,OAAO,IAAI;;EAGf,KAAAE,qBAAA,GAAIP,KAAK,CAACG,KAAK,CAACK,WAAW,cAAAD,qBAAA,eAAvBA,qBAAA,CAAyBF,WAAW,EAAE,CAACC,QAAQ,CAACL,WAAW,CAACI,WAAW,EAAE,CAAC,EAAE;IAC5E,OAAO,IAAI;;EAGf,OAAOI,MAAM,CAACT,KAAK,CAACG,KAAK,CAACO,QAAQ,CAAC,CAACL,WAAW,EAAE,CAACC,QAAQ,CAACL,WAAW,CAACI,WAAW,EAAE,CAAC;AACzF;;;;"}

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

@@ -28,7 +28,7 @@ const Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
     onCheckedChange: onChange,
     ref: ref
   }), /*#__PURE__*/createElement(Thumb, {
-    className: "'will-change-transform mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform group-disabled:opacity-50 group-aria-checked:translate-x-[1.1rem]"
+    className: "pointer-events-none mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[1.1rem]"
   }));
   if (label) {
     const labelContainerClassName = cn('flex self-start cursor-pointer', {

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\nimport { useId } from '../../hooks/useId';\n\ntype SwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /** Label for the switch */\n    label?: React.ReactNode;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\nexport interface UncontrolledSwitchProps extends SwitchBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\nexport interface ControlledSwitchProps extends SwitchBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type SwitchProps = UncontrolledSwitchProps | ControlledSwitchProps;\n\nexport const Switch = React.forwardRef(function Switch(props: SwitchProps, ref: React.Ref<HTMLButtonElement>) {\n    const { label, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n\n    const className = cn(\n        'group h-5 w-9 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus',\n        {\n            'mr-2': !!label,\n            'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,\n            'bg-grey-500/50 aria-checked:bg-blue-500/50 cursor-not-allowed': props.disabled,\n        },\n        props.className\n    );\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    const element = (\n        <PrimitiveSwitch.Root\n            {...otherProps}\n            {...labelledByProps}\n            className={className}\n            data-taco=\"switch\"\n            onCheckedChange={onChange}\n            ref={ref}>\n            <PrimitiveSwitch.Thumb className=\"'will-change-transform mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform group-disabled:opacity-50 group-aria-checked:translate-x-[1.1rem]\" />\n        </PrimitiveSwitch.Root>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex self-start cursor-pointer', {\n            'cursor-not-allowed text-grey-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"switch-container\">\n                {element}\n                <label htmlFor={id} id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nSwitch.displayName = 'Switch';\n"],"names":["Switch","React","props","ref","label","onChange","otherProps","id","useId","className","cn","disabled","labelledByProps","element","PrimitiveSwitch","onCheckedChange","labelContainerClassName","htmlFor","displayName"],"mappings":";;;;;MA6BaA,MAAM,gBAAGC,UAAgB,CAAC,SAASD,MAAMA,CAACE,KAAkB,EAAEC,GAAiC;EACxG,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAChD,MAAMK,EAAE,GAAGC,KAAK,CAACN,KAAK,CAACK,EAAE,CAAC;EAE1B,MAAME,SAAS,GAAGC,EAAE,CAChB,kFAAkF,EAClF;IACI,MAAM,EAAE,CAAC,CAACN,KAAK;IACf,uFAAuF,EAAE,CAACF,KAAK,CAACS,QAAQ;IACxG,+DAA+D,EAAET,KAAK,CAACS;GAC1E,EACDT,KAAK,CAACO,SAAS,CAClB;EAED,IAAIG,eAAe,GAAkC,IAAI;EAEzD,IAAIR,KAAK,EAAE;IACPQ,eAAe,GAAG;MACd,iBAAiB,EAAE,GAAGL,EAAE,QAAQ;MAChCA;KACH;;EAGL,MAAMM,OAAO,gBACTZ,cAACa,IAAoB,oBACbR,UAAU,EACVM,eAAe;IACnBH,SAAS,EAAEA,SAAS;iBACV,QAAQ;IAClBM,eAAe,EAAEV,QAAQ;IACzBF,GAAG,EAAEA;mBACLF,cAACa,KAAqB;IAACL,SAAS,EAAC;IAA6K,CAErN;EAED,IAAIL,KAAK,EAAE;IACP,MAAMY,uBAAuB,GAAGN,EAAE,CAAC,gCAAgC,EAAE;MACjE,kCAAkC,EAAER,KAAK,CAACS;KAC7C,CAAC;IAEF,oBACIV;MAAMQ,SAAS,EAAEO,uBAAuB;mBAAY;OAC/CH,OAAO,eACRZ;MAAOgB,OAAO,EAAEV,EAAE;MAAEA,EAAE,EAAE,GAAGA,EAAE;OACxBH,KAAK,CACF,CACL;;EAIf,OAAOS,OAAO;AAClB,CAAC;AACDb,MAAM,CAACkB,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Switch.js","sources":["../../../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\nimport { useId } from '../../hooks/useId';\n\ntype SwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /** Label for the switch */\n    label?: React.ReactNode;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\nexport interface UncontrolledSwitchProps extends SwitchBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\nexport interface ControlledSwitchProps extends SwitchBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type SwitchProps = UncontrolledSwitchProps | ControlledSwitchProps;\n\nexport const Switch = React.forwardRef(function Switch(props: SwitchProps, ref: React.Ref<HTMLButtonElement>) {\n    const { label, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n\n    const className = cn(\n        'group h-5 w-9 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus',\n        {\n            'mr-2': !!label,\n            'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,\n            'bg-grey-500/50 aria-checked:bg-blue-500/50 cursor-not-allowed': props.disabled,\n        },\n        props.className\n    );\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    const element = (\n        <PrimitiveSwitch.Root\n            {...otherProps}\n            {...labelledByProps}\n            className={className}\n            data-taco=\"switch\"\n            onCheckedChange={onChange}\n            ref={ref}>\n            <PrimitiveSwitch.Thumb className=\"pointer-events-none mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[1.1rem]\" />\n        </PrimitiveSwitch.Root>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex self-start cursor-pointer', {\n            'cursor-not-allowed text-grey-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"switch-container\">\n                {element}\n                <label htmlFor={id} id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nSwitch.displayName = 'Switch';\n"],"names":["Switch","React","props","ref","label","onChange","otherProps","id","useId","className","cn","disabled","labelledByProps","element","PrimitiveSwitch","onCheckedChange","labelContainerClassName","htmlFor","displayName"],"mappings":";;;;;MA6BaA,MAAM,gBAAGC,UAAgB,CAAC,SAASD,MAAMA,CAACE,KAAkB,EAAEC,GAAiC;EACxG,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAChD,MAAMK,EAAE,GAAGC,KAAK,CAACN,KAAK,CAACK,EAAE,CAAC;EAE1B,MAAME,SAAS,GAAGC,EAAE,CAChB,kFAAkF,EAClF;IACI,MAAM,EAAE,CAAC,CAACN,KAAK;IACf,uFAAuF,EAAE,CAACF,KAAK,CAACS,QAAQ;IACxG,+DAA+D,EAAET,KAAK,CAACS;GAC1E,EACDT,KAAK,CAACO,SAAS,CAClB;EAED,IAAIG,eAAe,GAAkC,IAAI;EAEzD,IAAIR,KAAK,EAAE;IACPQ,eAAe,GAAG;MACd,iBAAiB,EAAE,GAAGL,EAAE,QAAQ;MAChCA;KACH;;EAGL,MAAMM,OAAO,gBACTZ,cAACa,IAAoB,oBACbR,UAAU,EACVM,eAAe;IACnBH,SAAS,EAAEA,SAAS;iBACV,QAAQ;IAClBM,eAAe,EAAEV,QAAQ;IACzBF,GAAG,EAAEA;mBACLF,cAACa,KAAqB;IAACL,SAAS,EAAC;IAAgM,CAExO;EAED,IAAIL,KAAK,EAAE;IACP,MAAMY,uBAAuB,GAAGN,EAAE,CAAC,gCAAgC,EAAE;MACjE,kCAAkC,EAAER,KAAK,CAACS;KAC7C,CAAC;IAEF,oBACIV;MAAMQ,SAAS,EAAEO,uBAAuB;mBAAY;OAC/CH,OAAO,eACRZ;MAAOgB,OAAO,EAAEV,EAAE;MAAEA,EAAE,EAAE,GAAGA,EAAE;OACxBH,KAAK,CACF,CACL;;EAIf,OAAOS,OAAO;AAClB,CAAC;AACDb,MAAM,CAACkB,WAAW,GAAG,QAAQ;;;;"}

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

@@ -3,8 +3,9 @@ import { fixedForwardRef } from '../../types.js';
 import { Table } from '../../primitives/Table/Core/Table.js';
 import { useTable3 } from './useTable3.js';
 import { Alert } from './components/Editing/Alert.js';
-import CreateNewRowButton from './components/Row/Editing/CreateRowButton.js';
 import { Editing } from './components/Toolbar/Editing/Editing.js';
+import { CreateNewRow } from './components/Row/Editing/CreateNewRow.js';
+import { TemporaryRow } from './components/Row/Editing/TemporaryRow.js';
 
 function Column(_) {
   return null;
@@ -21,8 +22,8 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
     'data-table-editing-mode': (_table3$meta$editing = table3.meta.editing) !== null && _table3$meta$editing !== void 0 && _table3$meta$editing.isEditing ? (_table3$meta$editing2 = table3.meta.editing) !== null && _table3$meta$editing2 !== void 0 && _table3$meta$editing2.isDetailedMode ? 'detailed' : 'normal' : undefined,
     enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing
   };
-  const hasAlertErrors = table3.meta.editing.hasAlertErrors();
-  const showCreateRowButton = table3.meta.editing.isEnabled && props.onEditingCreate;
+  const hasAlertErrors = table3.meta.editing.getErrorsShownInAlert().length;
+  const hasCreateWorkflow = table3.meta.editing.isEnabled && props.onEditingCreate;
   return /*#__PURE__*/React__default.createElement(Table, null, /*#__PURE__*/React__default.createElement(Table.Toolbar, {
     table: table3
   }, table3.meta.editing.isEnabled ? (/*#__PURE__*/React__default.createElement(Editing, {
@@ -36,12 +37,19 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
   })) : null, /*#__PURE__*/React__default.createElement(Table.Grid, Object.assign({}, gridAttributes, {
     "data-taco": "table3",
     table: table3
-  }), showCreateRowButton && (/*#__PURE__*/React__default.createElement(CreateNewRowButton, {
+  }), hasCreateWorkflow ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TemporaryRow, {
+    createRowButtonRef: table3.meta.editing.createRowButtonRef,
     table: table3.instance,
     tableMeta: table3.meta,
+    tableRef: table3.ref
+  }), /*#__PURE__*/React__default.createElement(CreateNewRow, {
+    buttonRef: table3.meta.editing.createRowButtonRef,
     onEditingCreate: props.onEditingCreate,
-    scrollToIndex: table3.renderer.scrollToIndex
-  }))));
+    scrollToIndex: table3.renderer.scrollToIndex,
+    table: table3.instance,
+    tableMeta: table3.meta,
+    tableRef: table3.ref
+  }))) : null));
 });
 const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const stringifiedChildren = String(props.children);

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 { fixedForwardRef } from '../../types';\nimport { useTable3 } from './useTable3';\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { Alert } from './components/Editing/Alert';\nimport CreateNewRowButton from './components/Row/Editing/CreateRowButton';\nimport { Table3Props, Table3Ref, Table3ColumnProps, Table3GroupProps } from './types';\nimport { Editing } from './components/Toolbar/Editing/Editing';\nimport './style.css';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n    return null;\n}\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: Table3GroupProps) {\n    return null;\n}\nGroup.displayName = 'Table3Group';\n\nconst BaseTable3 = fixedForwardRef(function BaseTable3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const table3 = useTable3<TType>(props, ref);\n\n    const gridAttributes = {\n        'data-table-editing-mode': table3.meta.editing?.isEditing\n            ? table3.meta.editing?.isDetailedMode\n                ? 'detailed'\n                : 'normal'\n            : undefined,\n        enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing,\n    };\n\n    const hasAlertErrors = table3.meta.editing.hasAlertErrors();\n    const showCreateRowButton = table3.meta.editing.isEnabled && props.onEditingCreate;\n\n    return (\n        <Table>\n            <Table.Toolbar<TType> table={table3}>\n                {table3.meta.editing.isEnabled ? (\n                    <Editing scrollToIndex={table3.renderer.scrollToIndex} table={table3.instance} />\n                ) : null}\n            </Table.Toolbar>\n            {hasAlertErrors ? (\n                <Alert\n                    className=\"mb-4\"\n                    scrollToIndex={table3.renderer.scrollToIndex}\n                    table={table3.instance}\n                    tableRef={table3.ref}\n                />\n            ) : null}\n            <Table.Grid<TType> {...gridAttributes} data-taco=\"table3\" table={table3}>\n                {showCreateRowButton && (\n                    <CreateNewRowButton\n                        table={table3.instance}\n                        tableMeta={table3.meta}\n                        onEditingCreate={props.onEditingCreate}\n                        scrollToIndex={table3.renderer.scrollToIndex}\n                    />\n                )}\n            </Table.Grid>\n        </Table>\n    );\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 <BaseTable3<TType> {...props} key={key} ref={ref} />;\n}) as (<TType = unknown>(props: Table3Props<TType> & React.RefAttributes<Table3Ref>) => JSX.Element) & {\n    Column: typeof Column;\n    Group: typeof Group;\n};\nTable3.Column = Column;\nTable3.Group = Group;\n\nexport type {\n    Table3Props,\n    Table3Ref,\n    Table3ColumnProps,\n    Table3GroupProps,\n    Table3EditingSaveHandler,\n    Table3EditingValidatorFn,\n    Table3FeatureProps,\n    Table3Texts,\n} from './types';\n"],"names":["Column","_","displayName","Group","BaseTable3","fixedForwardRef","props","ref","table3","useTable3","gridAttributes","_table3$meta$editing","meta","editing","isEditing","_table3$meta$editing2","isDetailedMode","undefined","enableHorizontalArrowKeyNavigation","hasAlertErrors","showCreateRowButton","isEnabled","onEditingCreate","React","Table","Toolbar","table","Editing","scrollToIndex","renderer","instance","Alert","className","tableRef","Grid","CreateNewRowButton","tableMeta","Table3","stringifiedChildren","String","children","key","useMemo"],"mappings":";;;;;;;;AAUA,SAASA,MAAMA,CAAkBC,CAA2B;EACxD,OAAO,IAAI;AACf;AACAD,MAAM,CAACE,WAAW,GAAG,cAAc;AAEnC,SAASC,KAAKA,CAACF,CAAmB;EAC9B,OAAO,IAAI;AACf;AACAE,KAAK,CAACD,WAAW,GAAG,aAAa;AAEjC,MAAME,UAAU,gBAAGC,eAAe,CAAC,SAASD,UAAUA,CAAkBE,KAAyB,EAAEC,GAAyB;;EACxH,MAAMC,MAAM,GAAGC,SAAS,CAAQH,KAAK,EAAEC,GAAG,CAAC;EAE3C,MAAMG,cAAc,GAAG;IACnB,yBAAyB,EAAE,CAAAC,oBAAA,GAAAH,MAAM,CAACI,IAAI,CAACC,OAAO,cAAAF,oBAAA,eAAnBA,oBAAA,CAAqBG,SAAS,GACnD,CAAAC,qBAAA,GAAAP,MAAM,CAACI,IAAI,CAACC,OAAO,cAAAE,qBAAA,eAAnBA,qBAAA,CAAqBC,cAAc,GAC/B,UAAU,GACV,QAAQ,GACZC,SAAS;IACfC,kCAAkC,EAAEV,MAAM,CAACI,IAAI,CAACC,OAAO,CAACC;GAC3D;EAED,MAAMK,cAAc,GAAGX,MAAM,CAACI,IAAI,CAACC,OAAO,CAACM,cAAc,EAAE;EAC3D,MAAMC,mBAAmB,GAAGZ,MAAM,CAACI,IAAI,CAACC,OAAO,CAACQ,SAAS,IAAIf,KAAK,CAACgB,eAAe;EAElF,oBACIC,6BAACC,KAAK,qBACFD,6BAACC,KAAK,CAACC,OAAO;IAAQC,KAAK,EAAElB;KACxBA,MAAM,CAACI,IAAI,CAACC,OAAO,CAACQ,SAAS,iBAC1BE,6BAACI,OAAO;IAACC,aAAa,EAAEpB,MAAM,CAACqB,QAAQ,CAACD,aAAa;IAAEF,KAAK,EAAElB,MAAM,CAACsB;IAAY,IACjF,IAAI,CACI,EACfX,cAAc,iBACXI,6BAACQ,KAAK;IACFC,SAAS,EAAC,MAAM;IAChBJ,aAAa,EAAEpB,MAAM,CAACqB,QAAQ,CAACD,aAAa;IAC5CF,KAAK,EAAElB,MAAM,CAACsB,QAAQ;IACtBG,QAAQ,EAAEzB,MAAM,CAACD;IACnB,IACF,IAAI,eACRgB,6BAACC,KAAK,CAACU,IAAI,oBAAYxB,cAAc;iBAAY,QAAQ;IAACgB,KAAK,EAAElB;MAC5DY,mBAAmB,kBAChBG,6BAACY,kBAAkB;IACfT,KAAK,EAAElB,MAAM,CAACsB,QAAQ;IACtBM,SAAS,EAAE5B,MAAM,CAACI,IAAI;IACtBU,eAAe,EAAEhB,KAAK,CAACgB,eAAe;IACtCM,aAAa,EAAEpB,MAAM,CAACqB,QAAQ,CAACD;IACjC,CACL,CACQ,CACT;AAEhB,CAAC,CAAC;MAEWS,MAAM,gBAAGhC,eAAe,CAAC,SAASgC,MAAMA,CAAkB/B,KAAyB,EAAEC,GAAyB;EACvH,MAAM+B,mBAAmB,GAAGC,MAAM,CAACjC,KAAK,CAACkC,QAAQ,CAAC;;;EAGlD,MAAMC,GAAG,GAAGlB,cAAK,CAACmB,OAAO,CAAC,MAAMH,MAAM,CAAC,WAAW,GAAGD,mBAAmB,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EACjG,oBAAOf,6BAACnB,UAAU,oBAAYE,KAAK;IAAEmC,GAAG,EAAEA,GAAG;IAAElC,GAAG,EAAEA;KAAO;AAC/D,CAAC;AAID8B,MAAM,CAACrC,MAAM,GAAGA,MAAM;AACtBqC,MAAM,CAAClC,KAAK,GAAGA,KAAK;;;;"}
+{"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport { fixedForwardRef } from '../../types';\nimport { useTable3 } from './useTable3';\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { Alert } from './components/Editing/Alert';\nimport { Table3Props, Table3Ref, Table3ColumnProps, Table3GroupProps } from './types';\nimport { Editing } from './components/Toolbar/Editing/Editing';\nimport { CreateNewRow } from './components/Row/Editing/CreateNewRow';\nimport { TemporaryRow } from './components/Row/Editing/TemporaryRow';\nimport './style.css';\n\nfunction Column<TType = unknown>(_: Table3ColumnProps<TType>) {\n    return null;\n}\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: Table3GroupProps) {\n    return null;\n}\nGroup.displayName = 'Table3Group';\n\nconst BaseTable3 = fixedForwardRef(function BaseTable3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const table3 = useTable3<TType>(props, ref);\n\n    const gridAttributes = {\n        'data-table-editing-mode': table3.meta.editing?.isEditing\n            ? table3.meta.editing?.isDetailedMode\n                ? 'detailed'\n                : 'normal'\n            : undefined,\n        enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing,\n    };\n\n    const hasAlertErrors = table3.meta.editing.getErrorsShownInAlert().length;\n    const hasCreateWorkflow = table3.meta.editing.isEnabled && props.onEditingCreate;\n\n    return (\n        <Table>\n            <Table.Toolbar<TType> table={table3}>\n                {table3.meta.editing.isEnabled ? (\n                    <Editing scrollToIndex={table3.renderer.scrollToIndex} table={table3.instance} />\n                ) : null}\n            </Table.Toolbar>\n            {hasAlertErrors ? (\n                <Alert\n                    className=\"mb-4\"\n                    scrollToIndex={table3.renderer.scrollToIndex}\n                    table={table3.instance}\n                    tableRef={table3.ref}\n                />\n            ) : null}\n            <Table.Grid<TType> {...gridAttributes} data-taco=\"table3\" table={table3}>\n                {hasCreateWorkflow ? (\n                    <>\n                        <TemporaryRow\n                            createRowButtonRef={table3.meta.editing.createRowButtonRef}\n                            table={table3.instance}\n                            tableMeta={table3.meta}\n                            tableRef={table3.ref}\n                        />\n                        <CreateNewRow\n                            buttonRef={table3.meta.editing.createRowButtonRef}\n                            onEditingCreate={props.onEditingCreate}\n                            scrollToIndex={table3.renderer.scrollToIndex}\n                            table={table3.instance}\n                            tableMeta={table3.meta}\n                            tableRef={table3.ref}\n                        />\n                    </>\n                ) : null}\n            </Table.Grid>\n        </Table>\n    );\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 <BaseTable3<TType> {...props} key={key} ref={ref} />;\n}) as (<TType = unknown>(props: Table3Props<TType> & React.RefAttributes<Table3Ref>) => JSX.Element) & {\n    Column: typeof Column;\n    Group: typeof Group;\n};\nTable3.Column = Column;\nTable3.Group = Group;\n\nexport type {\n    Table3Ref,\n    Table3Props,\n    Table3ColumnProps,\n    Table3GroupProps,\n    Table3EditingSaveHandler,\n    Table3EditingValidatorFn,\n    Table3Texts,\n    Table3FeatureProps,\n    Table3CommonProps,\n    Table3WithoutEditingWithClientProps,\n    Table3WithoutEditingWithServerProps,\n    Table3WithEditingProps,\n    Table3WithEditingWithClientProps,\n    Table3WithEditingWithServerProps,\n    Table3EditingChangeHandler,\n    Table3EditingCreateHandler,\n} from './types';\n"],"names":["Column","_","displayName","Group","BaseTable3","fixedForwardRef","props","ref","table3","useTable3","gridAttributes","_table3$meta$editing","meta","editing","isEditing","_table3$meta$editing2","isDetailedMode","undefined","enableHorizontalArrowKeyNavigation","hasAlertErrors","getErrorsShownInAlert","length","hasCreateWorkflow","isEnabled","onEditingCreate","React","Table","Toolbar","table","Editing","scrollToIndex","renderer","instance","Alert","className","tableRef","Grid","TemporaryRow","createRowButtonRef","tableMeta","CreateNewRow","buttonRef","Table3","stringifiedChildren","String","children","key","useMemo"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.js

@@ -43,7 +43,6 @@ function RowMoveIndicator(props) {
   if (!show) {
     return null;
   }
-  const className = 'wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap rounded-b-md px-1 py-1 text-xs font-bold z-10';
   const {
     title,
     description
@@ -52,7 +51,7 @@ function RowMoveIndicator(props) {
     placement: "bottom",
     title: description.replace('[COLUMN]', columnMeta.header)
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: className
+    "data-row-move-indicator": true
   }, /*#__PURE__*/React__default.createElement(Icon, {
     name: "info",
     className: "-mt-0.5 mr-1 !h-4 !w-4 rounded-full bg-white !p-0 text-blue-500"

package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"RowMoveIndicator.js","sources":["../../../../../../../../../../../src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { Cell as ReactTableCell, TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { Tooltip } from '../../../../../Tooltip/Tooltip';\nimport { LocalizationTexts, useLocalization } from '../../../../../Provider/Localization';\nimport { Icon } from '../../../../../Icon/Icon';\n\ntype TableRowMoveIndicatorProps<TType = unknown> = {\n    cell: ReactTableCell<TType, unknown>;\n    cellRef: React.RefObject<HTMLTableCellElement>;\n    isActiveRow: boolean;\n};\n\nexport function RowMoveIndicator<TType = unknown>(props: TableRowMoveIndicatorProps<TType>) {\n    const { cell, cellRef, isActiveRow } = props;\n    const { texts } = useLocalization();\n    const [show, setShow] = React.useState(false);\n    const tableMeta = cell.getContext().table.options.meta as ReactTableMeta<TType>;\n    const columnMeta = (cell.column.columnDef.meta ?? {}) as ReactTableColumnMeta<TType, unknown>;\n    const moveReason = tableMeta.editing.getRowMoveReason(cell.row.id);\n\n    React.useEffect(() => {\n        if (cellRef.current) {\n            if (isActiveRow && !!moveReason) {\n                const firstChild = cellRef.current.parentElement?.querySelector(`td[data-taco=\"cell-control\"]`);\n\n                if (cellRef.current === firstChild) {\n                    setShow(true);\n                    cellRef.current.parentElement?.setAttribute('data-row-editing-move', 'true');\n                }\n            } else {\n                setShow(false);\n                cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n            }\n        }\n\n        return () => {\n            if (cellRef.current) {\n                cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n            }\n        };\n    }, [cellRef, isActiveRow, moveReason]);\n\n    if (!show) {\n        return null;\n    }\n\n    const className =\n        'wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap rounded-b-md px-1 py-1 text-xs font-bold z-10';\n\n    const { title, description } = getMessageFromReason(texts, moveReason);\n\n    return (\n        <Tooltip placement=\"bottom\" title={description.replace('[COLUMN]', columnMeta.header)}>\n            <span className={className}>\n                <Icon name=\"info\" className=\"-mt-0.5 mr-1 !h-4 !w-4 rounded-full bg-white !p-0 text-blue-500\" />\n                {title}\n            </span>\n        </Tooltip>\n    );\n}\n\nfunction getMessageFromReason(texts: LocalizationTexts, reason: 'search' | 'sorting' | 'filter' | undefined) {\n    let title = '';\n    let description = '';\n\n    switch (reason) {\n        case 'filter':\n            title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;\n            break;\n\n        case 'search':\n            title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;\n            break;\n\n        case 'sorting':\n            title = texts.table3.editing.rowIndicator.rowWillMove;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;\n            break;\n    }\n\n    return { title, description };\n}\n"],"names":["RowMoveIndicator","props","cell","cellRef","isActiveRow","texts","useLocalization","show","setShow","React","useState","tableMeta","getContext","table","options","meta","columnMeta","_cell$column$columnDe","column","columnDef","moveReason","editing","getRowMoveReason","row","id","useEffect","current","_cellRef$current$pare","firstChild","parentElement","querySelector","_cellRef$current$pare2","setAttribute","_cellRef$current$pare3","removeAttribute","_cellRef$current$pare4","className","title","description","getMessageFromReason","Tooltip","placement","replace","header","Icon","name","reason","table3","rowIndicator","rowWillBeHidden","rowWillMoveReasonFilter","rowWillMoveReasonSearch","rowWillMove","rowWillMoveReasonSorting"],"mappings":"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"}
+{"version":3,"file":"RowMoveIndicator.js","sources":["../../../../../../../../../../../src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { Cell as ReactTableCell, TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { Tooltip } from '../../../../../Tooltip/Tooltip';\nimport { LocalizationTexts, useLocalization } from '../../../../../Provider/Localization';\nimport { Icon } from '../../../../../Icon/Icon';\n\ntype TableRowMoveIndicatorProps<TType = unknown> = {\n    cell: ReactTableCell<TType, unknown>;\n    cellRef: React.RefObject<HTMLTableCellElement>;\n    isActiveRow: boolean;\n};\n\nexport function RowMoveIndicator<TType = unknown>(props: TableRowMoveIndicatorProps<TType>) {\n    const { cell, cellRef, isActiveRow } = props;\n    const { texts } = useLocalization();\n    const [show, setShow] = React.useState(false);\n    const tableMeta = cell.getContext().table.options.meta as ReactTableMeta<TType>;\n    const columnMeta = (cell.column.columnDef.meta ?? {}) as ReactTableColumnMeta<TType, unknown>;\n    const moveReason = tableMeta.editing.getRowMoveReason(cell.row.id) as 'search' | 'sorting' | 'filter' | undefined;\n\n    React.useEffect(() => {\n        if (cellRef.current) {\n            if (isActiveRow && !!moveReason) {\n                const firstChild = cellRef.current.parentElement?.querySelector(`td[data-taco=\"cell-control\"]`);\n\n                if (cellRef.current === firstChild) {\n                    setShow(true);\n                    cellRef.current.parentElement?.setAttribute('data-row-editing-move', 'true');\n                }\n            } else {\n                setShow(false);\n                cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n            }\n        }\n\n        return () => {\n            if (cellRef.current) {\n                cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n            }\n        };\n    }, [cellRef, isActiveRow, moveReason]);\n\n    if (!show) {\n        return null;\n    }\n\n    const { title, description } = getMessageFromReason(texts, moveReason);\n\n    return (\n        <Tooltip placement=\"bottom\" title={description.replace('[COLUMN]', columnMeta.header)}>\n            <span data-row-move-indicator>\n                <Icon name=\"info\" className=\"-mt-0.5 mr-1 !h-4 !w-4 rounded-full bg-white !p-0 text-blue-500\" />\n                {title}\n            </span>\n        </Tooltip>\n    );\n}\n\nfunction getMessageFromReason(texts: LocalizationTexts, reason: 'search' | 'sorting' | 'filter' | undefined) {\n    let title = '';\n    let description = '';\n\n    switch (reason) {\n        case 'filter':\n            title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;\n            break;\n\n        case 'search':\n            title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;\n            break;\n\n        case 'sorting':\n            title = texts.table3.editing.rowIndicator.rowWillMove;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;\n            break;\n    }\n\n    return { title, description };\n}\n"],"names":["RowMoveIndicator","props","cell","cellRef","isActiveRow","texts","useLocalization","show","setShow","React","useState","tableMeta","getContext","table","options","meta","columnMeta","_cell$column$columnDe","column","columnDef","moveReason","editing","getRowMoveReason","row","id","useEffect","current","_cellRef$current$pare","firstChild","parentElement","querySelector","_cellRef$current$pare2","setAttribute","_cellRef$current$pare3","removeAttribute","_cellRef$current$pare4","title","description","getMessageFromReason","Tooltip","placement","replace","header","Icon","name","className","reason","table3","rowIndicator","rowWillBeHidden","rowWillMoveReasonFilter","rowWillMoveReasonSearch","rowWillMove","rowWillMoveReasonSorting"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js

@@ -1,6 +1,7 @@
 import React__default from 'react';
 import { isElementInsideOrTriggeredFromContainer } from '../../../../../utils/dom.js';
 import { isPressingMetaKey } from '../../../../../utils/keyboard.js';
+import { Checkbox } from '../../../../Checkbox/Checkbox.js';
 import { Input } from '../../../../Input/Input.js';
 import { isDate } from 'date-fns';
 import { parse, isWeakEqual } from '../../../../../utils/date.js';
@@ -24,13 +25,31 @@ function EditingControlCell(props) {
   const {
     rowIndex
   } = React__default.useContext(RowContext);
-  const tableMeta = cell.getContext().table.options.meta;
+  const {
+    table
+  } = cell.getContext();
+  const tableMeta = table.options.meta;
   const columnMeta = cell.column.columnDef.meta;
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
+  const type = (_columnMeta$control = columnMeta.control) !== null && _columnMeta$control !== void 0 ? _columnMeta$control : 'input';
   const handleFocus = useEditingCellAutofocus(props);
+  const value = cell.getValue();
+  // some controls, like select2, should trigger cell changed (validation, updates) as the value changes
+  const hasNonTextControl = React__default.useMemo(() => {
+    var _cellRef$current;
+    return typeof type === 'function' && !!((_cellRef$current = cellRef.current) !== null && _cellRef$current !== void 0 && _cellRef$current.querySelector('[data-taco="Select2"],[data-taco="switch"],[data-taco="checkbox"]'));
+  }, [cellRef.current]);
+  const handleChange = nextValue => {
+    if (nextValue !== value) {
+      tableMeta.editing.setCellValue(cell, nextValue);
+      if (hasNonTextControl) {
+        tableMeta.editing.onCellChanged(cell, rowIndex);
+      }
+    }
+  };
   const handleBlur = () => {
     tableMeta.editing.toggleDetailedMode(false);
-    tableMeta.editing.validateCell(cell);
+    tableMeta.editing.onCellChanged(cell, rowIndex, !hasNonTextControl);
   };
   // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)
   React__default.useEffect(() => {
@@ -50,14 +69,13 @@ function EditingControlCell(props) {
     isDetailedMode: tableMeta.editing.isDetailedMode,
     isTruncated: !!columnMeta.enableTruncate,
     onBlur: handleBlur,
-    onChange: value => tableMeta.editing.setCellValue(cell, value, rowIndex),
+    onChange: handleChange,
     row: cell.row.original,
-    rowPendingChanges: tableMeta.editing.getRowPendingChange(cell.row.id),
+    rowPendingChanges: tableMeta.editing.getRowValue(cell.row.id),
     tabIndex: isActiveRow ? 0 : -1,
-    toggleEditing: tableMeta.editing.toggleEditing,
     toggleDetailedMode: tableMeta.editing.toggleDetailedMode,
-    type: (_columnMeta$control = columnMeta.control) !== null && _columnMeta$control !== void 0 ? _columnMeta$control : 'input',
-    value: cell.getValue()
+    type,
+    value
   };
   const cellAttributes = {
     ...getCellAttributes(cell, index, isHighlighted),
@@ -89,7 +107,6 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     row,
     rowPendingChanges,
     tabIndex = -1,
-    toggleEditing,
     toggleDetailedMode,
     type = 'input',
     value
@@ -120,6 +137,13 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
       ref: controlRef
     }));
   }
+  if (type === 'checkbox') {
+    return /*#__PURE__*/React__default.createElement(Checkbox, Object.assign({}, commonProps, {
+      checked: Boolean(value),
+      onChange: onChange,
+      ref: controlRef
+    }));
+  }
   const handleInputKeyDown = event => {
     const target = event.target;
     if (target.readOnly) {
@@ -148,8 +172,8 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     }
     // reset the value, or exit edit mode when pressing escape
     if (event.key === 'Escape') {
-      event.preventDefault();
       if (isDetailedMode) {
+        event.preventDefault();
         toggleDetailedMode(false);
         if (value !== currentValue) {
           props.onChange(currentValue);
@@ -159,8 +183,6 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
           var _target$select2;
           return (_target$select2 = target.select) === null || _target$select2 === void 0 ? void 0 : _target$select2.call(target);
         });
-      } else {
-        toggleEditing(false);
       }
       return;
     }