@economic/taco 2.53.2 → 2.55.0-EC-64018.0

package/dist/esm/packages/taco/src/components/Combobox/useCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCombobox.js","sources":["../../../../../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { v4 as uuid } from 'uuid';\nimport debounce from 'lodash/debounce';\nimport { ComboboxProps } from './Combobox';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '../Listbox/util';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getId, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { InputProps } from '../Input/Input';\nimport { isElementInsideTable3OrReport } from '../../utils/dom';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst convertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    button: { ref: any };\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        id: nativeId,\n        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        onSearch,\n        readOnly,\n        value,\n        ...props\n    }: Omit<ComboboxProps, 'dialog'>,\n    ref: React.Ref<HTMLInputElement>\n): useCombobox => {\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const [open, setOpen] = React.useState(false);\n    const listId = React.useMemo(() => uuid(), []);\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n    const flattenedData = useFlattenedData(unfilteredData);\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined\n    );\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                setInputValueByRef(inputRef.current, option.value, 'focusout');\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        // if the selected option is not already selected, trigger blur event\n        if (option.value !== value) {\n            setInputValueByIndex(index);\n        } else {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n    React.useEffect(() => {\n        if (value !== undefined && value !== inputValue) {\n            setInputValue(convertToInputValue(value));\n        }\n    }, [value]);\n\n    React.useEffect(() => {\n        if (onSearch) {\n            debouncer(() => {\n                onSearch(inputValue);\n            });\n        }\n    }, [inputValue]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === String(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n    }, [inputValue, data]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (listRef.current && event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        // event.target.value is always a string so it is important to cast value to a string before checking the equality\n        if (onChange && event.target.value !== String(value)) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!open && inputValue && data.length)) {\n            setOpen(true);\n        }\n\n        if (onClick) {\n            event.persist();\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (!event.ctrlKey && !event.metaKey) {\n            switch (event.key) {\n                case 'Backspace': {\n                    return;\n                }\n\n                case 'Escape': {\n                    event.preventDefault();\n                    setInputValue(convertToInputValue(value));\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Tab': {\n                    setCurrentValue(currentIndex);\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Enter': {\n                    event.preventDefault();\n\n                    if (isElementInsideTable3OrReport(event.currentTarget)) {\n                        if (inline && !open) {\n                            setOpen(true);\n                        } else if (buttonRef.current && !open) {\n                            buttonRef.current.click();\n                        }\n                    }\n\n                    if (open) {\n                        setCurrentValue(currentIndex);\n                        setOpen(false);\n                    }\n\n                    return;\n                }\n\n                case 'ArrowDown':\n                    if (open) {\n                        event.preventDefault();\n                    } else {\n                        if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {\n                            buttonRef.current.click();\n                        }\n                    }\n                    break;\n\n                case 'ArrowUp':\n                case 'Home':\n                case 'End': {\n                    if (open) {\n                        event.preventDefault();\n                    }\n                    break;\n                }\n\n                default:\n            }\n\n            // we aren't focused on the list, so manually forward the keydown event to it\n            if (listRef.current) {\n                listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n            }\n\n            if (inline && !open) {\n                if (\n                    (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n                    !isElementInsideTable3OrReport(event.currentTarget)\n                ) {\n                    event.preventDefault();\n                    const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n                    setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);\n                    setOpen(true);\n                }\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        setOpen(false);\n    };\n\n    const combobox = {\n        'aria-expanded': open,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...props,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue ?? '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    const button = {\n        ref: buttonRef,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        button,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n            //visible: !data.length ? false : open,\n        },\n    };\n};\n"],"names":["debouncer","debounce","f","convertToInputValue","value","String","useCombobox","ariaLabel","ariaLabelledBy","data","unfilteredData","defaultValue","disabled","id","nativeId","inline","loading","__","onChange","onClick","onKeyDown","onSearch","readOnly","props","ref","inputRef","useMergedRef","buttonRef","React","listRef","open","setOpen","listId","uuid","inputValue","setInputValue","shouldFilterData","flattenedData","useFlattenedData","filterData","currentIndex","setCurrentIndex","undefined","getIndexFromValue","setInputValueByIndex","index","option","setInputValueByRef","current","setCurrentValue","isCurrentValue","length","handleInputBlur","event","persist","relatedTarget","preventDefault","target","item","findByValue","detail","sanitizeItem","parents","getOptionParents","path","onBlur","handleInputChange","handleInputClick","handleInputKeyDown","ctrlKey","metaKey","key","isElementInsideTable3OrReport","currentTarget","click","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","scrollOnFocus","tabIndex","button","popover","onOpenChange"],"mappings":"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"}
+{"version":3,"file":"useCombobox.js","sources":["../../../../../../../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { v4 as uuid } from 'uuid';\nimport debounce from 'lodash/debounce';\nimport { ComboboxProps } from './Combobox';\nimport {\n    setInputValueByRef,\n    getIndexFromValue,\n    findByValue,\n    useFlattenedData,\n    sanitizeItem,\n    getOptionParents,\n    filterData,\n} from '../Listbox/util';\nimport { createCustomKeyboardEvent } from '../../utils/input';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getId, ScrollableListItemValue, ScrollableListPropsWithRef } from '../Listbox/ScrollableList';\nimport { InputProps } from '../Input/Input';\nimport { isElementInsideTable3OrReport } from '../../utils/dom';\n\nconst debouncer = debounce(f => f(), 200);\n\nconst convertToInputValue = (value: ScrollableListItemValue | undefined) => String(value ?? '');\n\ntype useCombobox = React.HTMLAttributes<HTMLDivElement> & {\n    combobox: React.HTMLAttributes<HTMLSpanElement>;\n    input: Omit<InputProps, 'defaultValue'> & { ref: React.RefObject<HTMLInputElement> };\n    list: ScrollableListPropsWithRef;\n    button: { ref: any };\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n};\n\nexport const useCombobox = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data: unfilteredData = [],\n        defaultValue,\n        disabled,\n        id: nativeId,\n        inline,\n        loading: __,\n        onChange,\n        onClick,\n        onKeyDown,\n        onSearch,\n        readOnly,\n        value,\n        ...props\n    }: Omit<ComboboxProps, 'dialog'>,\n    ref: React.Ref<HTMLInputElement>\n): useCombobox => {\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    const listRef = React.useRef<HTMLUListElement>(null);\n    const [open, setOpen] = React.useState(false);\n    const listId = React.useMemo(() => uuid(), []);\n    const [inputValue, setInputValue] = React.useState<string>(convertToInputValue(value));\n    const shouldFilterData = !onSearch && (!inline || (inline && inputValue !== convertToInputValue(value)));\n    const flattenedData = useFlattenedData(unfilteredData);\n    const data = React.useMemo(\n        () => (shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData),\n        [shouldFilterData, inputValue, flattenedData]\n    );\n    // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state\n    const [currentIndex, setCurrentIndex] = React.useState<number | undefined>(\n        inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined\n    );\n\n    const setInputValueByIndex = (index: number | undefined, event?: string): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                const eventType = event ?? 'focusout';\n                setInputValueByRef(inputRef.current, option.value, eventType);\n            }\n        }\n    };\n\n    const setCurrentValue = (index: number | undefined, event?: string) => {\n        if (index === undefined) {\n            return;\n        }\n\n        const option = data[index];\n\n        // if the selected option is not already selected, trigger blur event\n        if (option.value !== value) {\n            setInputValueByIndex(index, event);\n        } else {\n            // if the selected option is already selected, refill input with its value\n            setInputValue(convertToInputValue(value));\n        }\n    };\n\n    // ensure the external value is synced with the internal value when mounting, e.g. incase a default value was set\n    React.useEffect(() => {\n        if (defaultValue && !value) {\n            setInputValueByIndex(getIndexFromValue(data, defaultValue));\n        }\n    }, [data]);\n\n    // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc\n    React.useEffect(() => {\n        if (value !== undefined && value !== inputValue) {\n            setInputValue(convertToInputValue(value));\n        }\n    }, [value]);\n\n    React.useEffect(() => {\n        if (onSearch) {\n            debouncer(() => {\n                onSearch(inputValue);\n            });\n        }\n    }, [inputValue]);\n\n    // show listbox based on input value\n    React.useEffect(() => {\n        // don't show the popover if the internal (input) value already is the current value\n        // this prevents the popover showing after selecting a value or pressing escape\n        const isCurrentValue = value !== undefined && value !== null && inputValue === String(value);\n\n        if (inputValue && data.length && !isCurrentValue) {\n            setCurrentIndex(0);\n\n            if (!open) {\n                setOpen(true);\n            }\n        } else {\n            setOpen(false);\n        }\n    }, [inputValue, data]);\n\n    React.useEffect(() => {\n        if (open) {\n            setCurrentIndex(getIndexFromValue(data, inputValue) || 0);\n        } else {\n            setCurrentIndex(undefined);\n        }\n    }, [open]);\n\n    // event handlers\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (listRef.current && event.relatedTarget === listRef.current) {\n            event.preventDefault();\n            return;\n        }\n\n        // event.target.value is always a string so it is important to cast value to a string before checking the equality\n        if (onChange && event.target.value !== String(value)) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const parents = getOptionParents(flattenedData, item?.path);\n\n            if (parents !== null && parents.length > 0) {\n                (event as any).detail.parents = parents;\n            }\n\n            onChange(event);\n        }\n\n        if (props.onBlur) {\n            props.onBlur(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        setInputValue(event.target.value);\n    };\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>): void => {\n        if (inline || (!open && inputValue && data.length)) {\n            setOpen(true);\n        }\n\n        if (onClick) {\n            event.persist();\n            onClick(event);\n        }\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (!event.ctrlKey && !event.metaKey) {\n            switch (event.key) {\n                case 'Backspace': {\n                    return;\n                }\n\n                case 'Escape': {\n                    event.preventDefault();\n                    setInputValue(convertToInputValue(value));\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Tab': {\n                    // default focusout will trigger onBlur and we don't want to trigger it twice\n                    setCurrentValue(currentIndex, 'change');\n                    setOpen(false);\n                    return;\n                }\n\n                case 'Enter': {\n                    event.preventDefault();\n\n                    if (isElementInsideTable3OrReport(event.currentTarget)) {\n                        if (inline && !open) {\n                            setOpen(true);\n                        } else if (buttonRef.current && !open) {\n                            buttonRef.current.click();\n                        }\n                    }\n\n                    if (open) {\n                        // we need to focusout to trigger onBlur as we are not actually blurring the input\n                        setCurrentValue(currentIndex, 'focusout');\n                        setOpen(false);\n                    }\n\n                    return;\n                }\n\n                case 'ArrowDown':\n                    if (open) {\n                        event.preventDefault();\n                    } else {\n                        if (!inline && buttonRef.current && !isElementInsideTable3OrReport(event.currentTarget)) {\n                            buttonRef.current.click();\n                        }\n                    }\n                    break;\n\n                case 'ArrowUp':\n                case 'Home':\n                case 'End': {\n                    if (open) {\n                        event.preventDefault();\n                    }\n                    break;\n                }\n\n                default:\n            }\n\n            // we aren't focused on the list, so manually forward the keydown event to it\n            if (listRef.current) {\n                listRef.current.dispatchEvent(createCustomKeyboardEvent(event));\n            }\n\n            if (inline && !open) {\n                if (\n                    (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&\n                    !isElementInsideTable3OrReport(event.currentTarget)\n                ) {\n                    event.preventDefault();\n                    const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;\n                    setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);\n                    setOpen(true);\n                }\n            }\n        }\n\n        if (!event.isDefaultPrevented() && onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setCurrentIndex(index);\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>, index: number): void => {\n        event.preventDefault();\n        setCurrentValue(index);\n        setOpen(false);\n    };\n\n    const combobox = {\n        'aria-expanded': open,\n        'aria-owns': listId,\n        'aria-haspopup': 'listbox' as const,\n        role: 'combobox',\n    };\n\n    const input = {\n        ...props,\n        'aria-controls': listId,\n        // Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions\n        // are related to the string that is present in the textbox\n        'aria-autocomplete': 'list' as const,\n        // Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element\n        'aria-activedescendant':\n            currentIndex !== undefined && data[currentIndex] ? getId(listId, String(data[currentIndex].value)) : undefined,\n        'aria-labelledby': ariaLabelledBy,\n        disabled,\n        onBlur: !disabled && !readOnly ? handleInputBlur : undefined,\n        onChange: !disabled && !readOnly ? handleInputChange : undefined,\n        onClick: !disabled && !readOnly ? handleInputClick : undefined,\n        onKeyDown: !disabled && !readOnly ? handleInputKeyDown : undefined,\n        readOnly,\n        ref: inputRef,\n        type: 'text',\n        value: inputValue ?? '',\n    };\n\n    const list: ScrollableListPropsWithRef = {\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        id: listId,\n        onChange: handleListboxChange,\n        onClick: handleListboxClick,\n        ref: listRef,\n        scrollOnFocus: false,\n        tabIndex: -1,\n        value: currentIndex,\n    };\n\n    const button = {\n        ref: buttonRef,\n    };\n\n    return {\n        combobox,\n        input,\n        list,\n        button,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n            //visible: !data.length ? false : open,\n        },\n    };\n};\n"],"names":["debouncer","debounce","f","convertToInputValue","value","String","useCombobox","ariaLabel","ariaLabelledBy","data","unfilteredData","defaultValue","disabled","id","nativeId","inline","loading","__","onChange","onClick","onKeyDown","onSearch","readOnly","props","ref","inputRef","useMergedRef","buttonRef","React","listRef","open","setOpen","listId","uuid","inputValue","setInputValue","shouldFilterData","flattenedData","useFlattenedData","filterData","currentIndex","setCurrentIndex","undefined","getIndexFromValue","setInputValueByIndex","index","event","option","eventType","setInputValueByRef","current","setCurrentValue","isCurrentValue","length","handleInputBlur","persist","relatedTarget","preventDefault","target","item","findByValue","detail","sanitizeItem","parents","getOptionParents","path","onBlur","handleInputChange","handleInputClick","handleInputKeyDown","ctrlKey","metaKey","key","isElementInsideTable3OrReport","currentTarget","click","dispatchEvent","createCustomKeyboardEvent","initialIndex","isDefaultPrevented","handleListboxChange","handleListboxClick","combobox","role","input","getId","type","list","scrollOnFocus","tabIndex","button","popover","onOpenChange"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Layout/components/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../../../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { LayoutContext } from './Context';\nimport { useIsLargeScreen } from '../../../hooks/useIsLargeScreen';\nimport { Backdrop, BackdropProps } from '../../Backdrop/Backdrop';\n\nconst SidebarBackdrop = motion<BackdropProps>(Backdrop);\n\nexport type LayoutSidebarProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n    const { children, ...attributes } = props;\n    const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n    const isLargeScreen = useIsLargeScreen();\n    const isSmallScreen = !isLargeScreen;\n\n    // if it's a large screen we override the open state and make it always visible\n    const isVisible = isLargeScreen || sidebarOpen;\n\n    // ensures the menu is always closed by default when resizing to a smaller window size\n    React.useEffect(() => {\n        setSidebarOpen(isLargeScreen);\n    }, [isLargeScreen]);\n\n    React.useEffect(() => {\n        const handleEscapeKey = (event: KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                event.preventDefault();\n                event.stopPropagation();\n                setSidebarOpen(false);\n            }\n        };\n\n        if (isSmallScreen && sidebarOpen) {\n            window.addEventListener('keydown', handleEscapeKey);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleEscapeKey);\n        };\n    }, [isSmallScreen, sidebarOpen]);\n\n    const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n    const [ready, setReady] = React.useState(isSmallScreen);\n\n    const className = cn(\n        'bg-grey-50 h-full w-64 flex-shrink-0 flex-grow-0 print:hidden',\n        {\n            'absolute z-10 aria-hidden:-translate-x-64 ': isSmallScreen,\n            // prevent animation when crossing the boundary from large to small screen,\n            // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)\n            invisible: isSmallScreen && !ready,\n            'transition-[transform] duration-300 visible': isSmallScreen && ready,\n            'border-r-2 border-black/[.08] ': !showBackdrop,\n        },\n        props.className\n    );\n\n    React.useEffect(() => {\n        // ensure state is updated in the next cpu tick so that the animation definitely doesn't run\n        setTimeout(() => {\n            setReady(isSmallScreen);\n        }, 1);\n    }, [isSmallScreen]);\n\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n    const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n    if (!content) {\n        return null;\n    }\n\n    return (\n        <>\n            <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n                {content}\n            </nav>\n            <AnimatePresence>\n                {showBackdrop && (\n                    <SidebarBackdrop\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0 }}\n                        className=\"z-[1]\"\n                        onClick={() => setSidebarOpen(false)}\n                    />\n                )}\n            </AnimatePresence>\n        </>\n    );\n});\n"],"names":["SidebarBackdrop","motion","Backdrop","Sidebar","React","forwardRef","LayoutSidebar","props","ref","children","attributes","sidebarOpen","setSidebarOpen","useContext","LayoutContext","isLargeScreen","useIsLargeScreen","isSmallScreen","isVisible","useEffect","handleEscapeKey","event","key","preventDefault","stopPropagation","window","addEventListener","removeEventListener","showBackdrop","ready","setReady","useState","className","cn","invisible","setTimeout","toggleSidebar","open","content","AnimatePresence","initial","opacity","animate","exit","onClick"],"mappings":";;;;;;;AAOA,MAAMA,eAAe,gBAAGC,MAAM,CAAgBC,QAAQ,CAAC;MAI1CC,OAAO,gBAAGC,cAAK,CAACC,UAAU,CAAqC,SAASC,aAAaA,CAACC,KAAK,EAAEC,GAAG;EACzG,MAAM;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACzC,MAAM;IAAEI,WAAW;IAAEC;GAAgB,GAAGR,cAAK,CAACS,UAAU,CAACC,aAAa,CAAC;EACvE,MAAMC,aAAa,GAAGC,gBAAgB,EAAE;EACxC,MAAMC,aAAa,GAAG,CAACF,aAAa;;EAGpC,MAAMG,SAAS,GAAGH,aAAa,IAAIJ,WAAW;;EAG9CP,cAAK,CAACe,SAAS,CAAC;IACZP,cAAc,CAACG,aAAa,CAAC;GAChC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnBX,cAAK,CAACe,SAAS,CAAC;IACZ,MAAMC,eAAe,GAAIC,KAAoB;MACzC,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;QACxBD,KAAK,CAACE,cAAc,EAAE;QACtBF,KAAK,CAACG,eAAe,EAAE;QACvBZ,cAAc,CAAC,KAAK,CAAC;;KAE5B;IAED,IAAIK,aAAa,IAAIN,WAAW,EAAE;MAC9Bc,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAEN,eAAe,CAAC;;IAGvD,OAAO;MACHK,MAAM,CAACE,mBAAmB,CAAC,SAAS,EAAEP,eAAe,CAAC;KACzD;GACJ,EAAE,CAACH,aAAa,EAAEN,WAAW,CAAC,CAAC;EAEhC,MAAMiB,YAAY,GAAGX,aAAa,IAAIN,WAAW,KAAK,IAAI;EAE1D,MAAM,CAACkB,KAAK,EAAEC,QAAQ,CAAC,GAAG1B,cAAK,CAAC2B,QAAQ,CAACd,aAAa,CAAC;EAEvD,MAAMe,SAAS,GAAGC,EAAE,CAChB,+DAA+D,EAC/D;IACI,4CAA4C,EAAEhB,aAAa;;;IAG3DiB,SAAS,EAAEjB,aAAa,IAAI,CAACY,KAAK;IAClC,6CAA6C,EAAEZ,aAAa,IAAIY,KAAK;IACrE,gCAAgC,EAAE,CAACD;GACtC,EACDrB,KAAK,CAACyB,SAAS,CAClB;EAED5B,cAAK,CAACe,SAAS,CAAC;;IAEZgB,UAAU,CAAC;MACPL,QAAQ,CAACb,aAAa,CAAC;KAC1B,EAAE,CAAC,CAAC;GACR,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,MAAMmB,aAAa,GAAGA,MAAMxB,cAAc,CAACyB,IAAI,IAAI,CAACA,IAAI,CAAC;EACzD,MAAMC,OAAO,GAAG,OAAO7B,QAAQ,KAAK,UAAU,GAAGA,QAAQ,CAAC;IAAEM,aAAa;IAAEsB,IAAI,EAAE1B,WAAW;IAAEyB;GAAe,CAAC,GAAG3B,QAAQ;EAEzH,IAAI,CAAC6B,OAAO,EAAE;IACV,OAAO,IAAI;;EAGf,oBACIlC,yEACIA,sDAASM,UAAU;uBAAmBO,aAAa;mBAAe,CAACC,SAAS;IAAEc,SAAS,EAAEA,SAAS;IAAExB,GAAG,EAAEA;MACpG8B,OAAO,CACN,eACNlC,6BAACmC,eAAe,QACXX,YAAY,kBACTxB,6BAACJ,eAAe;IACZwC,OAAO,EAAE;MAAEC,OAAO,EAAE;KAAG;IACvBC,OAAO,EAAE;MAAED,OAAO,EAAE;KAAG;IACvBE,IAAI,EAAE;MAAEF,OAAO,EAAE;KAAG;IACpBT,SAAS,EAAC,OAAO;IACjBY,OAAO,EAAEA,MAAMhC,cAAc,CAAC,KAAK;IACrC,CACL,CACa,CACnB;AAEX,CAAC;;;;"}
+{"version":3,"file":"Sidebar.js","sources":["../../../../../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { LayoutContext } from './Context';\nimport { useIsLargeScreen } from '../../../hooks/useIsLargeScreen';\nimport { Backdrop, BackdropProps } from '../../Backdrop/Backdrop';\n\nconst SidebarBackdrop = motion<BackdropProps>(Backdrop);\n\nexport type LayoutSidebarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children:\n        | React.ReactNode\n        | (({\n              isLargeScreen,\n              open,\n              toggleSidebar,\n          }: {\n              isLargeScreen: boolean;\n              open: boolean;\n              toggleSidebar: () => void;\n          }) => React.ReactNode);\n};\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n    const { children, ...attributes } = props;\n    const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n    const isLargeScreen = useIsLargeScreen();\n    const isSmallScreen = !isLargeScreen;\n\n    // if it's a large screen we override the open state and make it always visible\n    const isVisible = isLargeScreen || sidebarOpen;\n\n    // ensures the menu is always closed by default when resizing to a smaller window size\n    React.useEffect(() => {\n        setSidebarOpen(isLargeScreen);\n    }, [isLargeScreen]);\n\n    React.useEffect(() => {\n        const handleEscapeKey = (event: KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                event.preventDefault();\n                event.stopPropagation();\n                setSidebarOpen(false);\n            }\n        };\n\n        if (isSmallScreen && sidebarOpen) {\n            window.addEventListener('keydown', handleEscapeKey);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleEscapeKey);\n        };\n    }, [isSmallScreen, sidebarOpen]);\n\n    const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n    const [ready, setReady] = React.useState(isSmallScreen);\n\n    const className = cn(\n        'bg-grey-50 h-full w-64 flex-shrink-0 flex-grow-0 print:hidden',\n        {\n            'absolute z-10 aria-hidden:-translate-x-64 ': isSmallScreen,\n            // prevent animation when crossing the boundary from large to small screen,\n            // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)\n            invisible: isSmallScreen && !ready,\n            'transition-[transform] duration-300 visible': isSmallScreen && ready,\n            'border-r-2 border-black/[.08] ': !showBackdrop,\n        },\n        props.className\n    );\n\n    React.useEffect(() => {\n        // ensure state is updated in the next cpu tick so that the animation definitely doesn't run\n        setTimeout(() => {\n            setReady(isSmallScreen);\n        }, 1);\n    }, [isSmallScreen]);\n\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n    const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n    if (!content) {\n        return null;\n    }\n\n    return (\n        <>\n            <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n                {content}\n            </nav>\n            <AnimatePresence>\n                {showBackdrop && (\n                    <SidebarBackdrop\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0 }}\n                        className=\"z-[1]\"\n                        onClick={() => setSidebarOpen(false)}\n                    />\n                )}\n            </AnimatePresence>\n        </>\n    );\n});\n"],"names":["SidebarBackdrop","motion","Backdrop","Sidebar","React","forwardRef","LayoutSidebar","props","ref","children","attributes","sidebarOpen","setSidebarOpen","useContext","LayoutContext","isLargeScreen","useIsLargeScreen","isSmallScreen","isVisible","useEffect","handleEscapeKey","event","key","preventDefault","stopPropagation","window","addEventListener","removeEventListener","showBackdrop","ready","setReady","useState","className","cn","invisible","setTimeout","toggleSidebar","open","content","AnimatePresence","initial","opacity","animate","exit","onClick"],"mappings":";;;;;;;AAOA,MAAMA,eAAe,gBAAGC,MAAM,CAAgBC,QAAQ,CAAC;MAgB1CC,OAAO,gBAAGC,cAAK,CAACC,UAAU,CAAqC,SAASC,aAAaA,CAACC,KAAK,EAAEC,GAAG;EACzG,MAAM;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACzC,MAAM;IAAEI,WAAW;IAAEC;GAAgB,GAAGR,cAAK,CAACS,UAAU,CAACC,aAAa,CAAC;EACvE,MAAMC,aAAa,GAAGC,gBAAgB,EAAE;EACxC,MAAMC,aAAa,GAAG,CAACF,aAAa;;EAGpC,MAAMG,SAAS,GAAGH,aAAa,IAAIJ,WAAW;;EAG9CP,cAAK,CAACe,SAAS,CAAC;IACZP,cAAc,CAACG,aAAa,CAAC;GAChC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnBX,cAAK,CAACe,SAAS,CAAC;IACZ,MAAMC,eAAe,GAAIC,KAAoB;MACzC,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,EAAE;QACxBD,KAAK,CAACE,cAAc,EAAE;QACtBF,KAAK,CAACG,eAAe,EAAE;QACvBZ,cAAc,CAAC,KAAK,CAAC;;KAE5B;IAED,IAAIK,aAAa,IAAIN,WAAW,EAAE;MAC9Bc,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAEN,eAAe,CAAC;;IAGvD,OAAO;MACHK,MAAM,CAACE,mBAAmB,CAAC,SAAS,EAAEP,eAAe,CAAC;KACzD;GACJ,EAAE,CAACH,aAAa,EAAEN,WAAW,CAAC,CAAC;EAEhC,MAAMiB,YAAY,GAAGX,aAAa,IAAIN,WAAW,KAAK,IAAI;EAE1D,MAAM,CAACkB,KAAK,EAAEC,QAAQ,CAAC,GAAG1B,cAAK,CAAC2B,QAAQ,CAACd,aAAa,CAAC;EAEvD,MAAMe,SAAS,GAAGC,EAAE,CAChB,+DAA+D,EAC/D;IACI,4CAA4C,EAAEhB,aAAa;;;IAG3DiB,SAAS,EAAEjB,aAAa,IAAI,CAACY,KAAK;IAClC,6CAA6C,EAAEZ,aAAa,IAAIY,KAAK;IACrE,gCAAgC,EAAE,CAACD;GACtC,EACDrB,KAAK,CAACyB,SAAS,CAClB;EAED5B,cAAK,CAACe,SAAS,CAAC;;IAEZgB,UAAU,CAAC;MACPL,QAAQ,CAACb,aAAa,CAAC;KAC1B,EAAE,CAAC,CAAC;GACR,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,MAAMmB,aAAa,GAAGA,MAAMxB,cAAc,CAACyB,IAAI,IAAI,CAACA,IAAI,CAAC;EACzD,MAAMC,OAAO,GAAG,OAAO7B,QAAQ,KAAK,UAAU,GAAGA,QAAQ,CAAC;IAAEM,aAAa;IAAEsB,IAAI,EAAE1B,WAAW;IAAEyB;GAAe,CAAC,GAAG3B,QAAQ;EAEzH,IAAI,CAAC6B,OAAO,EAAE;IACV,OAAO,IAAI;;EAGf,oBACIlC,yEACIA,sDAASM,UAAU;uBAAmBO,aAAa;mBAAe,CAACC,SAAS;IAAEc,SAAS,EAAEA,SAAS;IAAExB,GAAG,EAAEA;MACpG8B,OAAO,CACN,eACNlC,6BAACmC,eAAe,QACXX,YAAY,kBACTxB,6BAACJ,eAAe;IACZwC,OAAO,EAAE;MAAEC,OAAO,EAAE;KAAG;IACvBC,OAAO,EAAE;MAAED,OAAO,EAAE;KAAG;IACvBE,IAAI,EAAE;MAAEF,OAAO,EAAE;KAAG;IACpBT,SAAS,EAAC,OAAO;IACjBY,OAAO,EAAEA,MAAMhC,cAAc,CAAC,KAAK;IACrC,CACL,CACa,CACnB;AAEX,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Layout/components/Top.js

@@ -6,9 +6,9 @@ const Top = props => {
     setSidebarOpen
   } = React__default.useContext(LayoutContext);
   const toggleSidebar = () => setSidebarOpen(open => !open);
-  return typeof props.children === 'function' ? props.children({
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof props.children === 'function' ? props.children({
     toggleSidebar
-  }) : props.children;
+  }) : props.children);
 };
 
 export { Top };

package/dist/esm/packages/taco/src/components/Layout/components/Top.js.map

@@ -1 +1 @@
-{"version":3,"file":"Top.js","sources":["../../../../../../../../src/components/Layout/components/Top.tsx"],"sourcesContent":["import React from 'react';\nimport { LayoutContext } from './Context';\n\nexport type LayoutTopProps = {\n    children: React.ReactNode | React.ReactNode[] | (({ toggleSidebar }) => React.ReactNode | React.ReactNode[]);\n};\n\nexport const Top = (props: LayoutTopProps) => {\n    const { setSidebarOpen } = React.useContext(LayoutContext);\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n\n    return typeof props.children === 'function' ? props.children({ toggleSidebar }) : props.children;\n};\n"],"names":["Top","props","setSidebarOpen","React","useContext","LayoutContext","toggleSidebar","open","children"],"mappings":";;;MAOaA,GAAG,GAAIC,KAAqB;EACrC,MAAM;IAAEC;GAAgB,GAAGC,cAAK,CAACC,UAAU,CAACC,aAAa,CAAC;EAC1D,MAAMC,aAAa,GAAGA,MAAMJ,cAAc,CAACK,IAAI,IAAI,CAACA,IAAI,CAAC;EAEzD,OAAO,OAAON,KAAK,CAACO,QAAQ,KAAK,UAAU,GAAGP,KAAK,CAACO,QAAQ,CAAC;IAAEF;GAAe,CAAC,GAAGL,KAAK,CAACO,QAAQ;AACpG;;;;"}
+{"version":3,"file":"Top.js","sources":["../../../../../../../../src/components/Layout/components/Top.tsx"],"sourcesContent":["import React from 'react';\nimport { LayoutContext } from './Context';\n\nexport type LayoutTopProps = {\n    children: React.ReactNode | (({ toggleSidebar }: { toggleSidebar: () => void }) => React.ReactNode);\n};\n\nexport const Top = (props: LayoutTopProps) => {\n    const { setSidebarOpen } = React.useContext(LayoutContext);\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n\n    return <>{typeof props.children === 'function' ? props.children({ toggleSidebar }) : props.children}</>;\n};\n"],"names":["Top","props","setSidebarOpen","React","useContext","LayoutContext","toggleSidebar","open","children"],"mappings":";;;MAOaA,GAAG,GAAIC,KAAqB;EACrC,MAAM;IAAEC;GAAgB,GAAGC,cAAK,CAACC,UAAU,CAACC,aAAa,CAAC;EAC1D,MAAMC,aAAa,GAAGA,MAAMJ,cAAc,CAACK,IAAI,IAAI,CAACA,IAAI,CAAC;EAEzD,oBAAOJ,4DAAG,OAAOF,KAAK,CAACO,QAAQ,KAAK,UAAU,GAAGP,KAAK,CAACO,QAAQ,CAAC;IAAEF;GAAe,CAAC,GAAGL,KAAK,CAACO,QAAQ,CAAI;AAC3G;;;;"}

package/dist/esm/packages/taco/src/components/List/components/Toggle.js

@@ -58,13 +58,18 @@ const Switch = /*#__PURE__*/React__default.forwardRef(function Switch(props, ref
     setChecked(!checked);
     onChange(!checked);
   }, [checked, onChange]);
+  const controlClassName = cn(
+  // When ToggleItem is hovered
+  'group-hover/toggle:bg-grey-700',
+  // When ToggleItem is hovered and switch inside it is selected
+  'group-hover/toggle:group-data-[selected]:bg-blue-700');
   const control = /*#__PURE__*/React__default.createElement(Switch$1, {
     checked: checked,
-    className: "group-hover/toggle:[&[aria-checked=false]]:bg-grey-700 group-hover/toggle:[&[aria-checked=true]]:bg-blue-700",
+    className: controlClassName,
     disabled: props.disabled,
     onChange: toggle,
     ref: switchRef,
-    tabIndex: -1
+    excludeFromTabOrder: true
   });
   return /*#__PURE__*/React__default.createElement(ToggleItem, Object.assign({}, attributes, {
     control: control,
@@ -85,13 +90,18 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef(function Switch(props, r
     setChecked(!checked);
     onChange(!checked);
   }, [checked, onChange]);
+  const controlClassName = cn(
+  // When ToggleItem is hovered
+  'group-hover/toggle:border-grey-700',
+  // When ToggleItem is hovered and checkbox inside it is selected
+  'group-hover/toggle:group-data-[selected]:border-blue-700 group-hover/toggle:group-data-[selected]:bg-blue-700');
   const control = /*#__PURE__*/React__default.createElement(Checkbox$1, {
     checked: checked,
-    className: "group-hover/toggle:[&[aria-checked=false]]:border-grey-700 group-hover/toggle:[&[aria-checked=true]]:border-blue-700 group-hover/checkbox:[&[aria-checked=true]]:bg-blue-700",
+    className: controlClassName,
     disabled: props.disabled,
     onChange: toggle,
     ref: checkboxRef,
-    tabIndex: -1
+    excludeFromTabOrder: true
   });
   return /*#__PURE__*/React__default.createElement(ToggleItem, Object.assign({}, attributes, {
     control: control,

package/dist/esm/packages/taco/src/components/List/components/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../../../../../../src/components/List/components/Toggle.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { ControlledSwitchProps, Switch as TacoSwitch } from '../../Switch/Switch';\nimport { ControlledCheckboxProps, Checkbox as TacoCheckbox } from '../../Checkbox/Checkbox';\nimport { Item, ComposableListItemProps } from './Item';\n\ntype ToggleProps = ComposableListItemProps<'div'> & {\n    control: JSX.Element;\n    controlRef: React.RefObject<HTMLButtonElement>;\n    onToggle: () => void;\n};\n\nconst ToggleItem = React.forwardRef<HTMLDivElement, ToggleProps>(function Toggle(props, ref) {\n    const { controlRef, onToggle, ...attributes } = props;\n\n    function handleClick(event: React.MouseEvent<HTMLDivElement>) {\n        if (typeof props.onClick === 'function') {\n            props.onClick(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then trigger click of the control\n        if (event.target !== controlRef.current && !controlRef.current?.contains(event.target as HTMLElement)) {\n            onToggle();\n            return;\n        }\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n        if (typeof props.onKeyDown === 'function') {\n            props.onKeyDown(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then send appropriate \"activate\" keyboard shortcuts to the control as a click\n        if (\n            (event.key === 'Enter' || event.key === ' ') &&\n            event.target !== controlRef.current &&\n            !controlRef.current?.contains(event.target as HTMLElement)\n        ) {\n            onToggle();\n            return;\n        }\n    }\n\n    const className = cn('group/toggle', props.className);\n    return <Item {...attributes} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref} />;\n});\n\nexport type ListSwitchProps = ComposableListItemProps<'div'> & Omit<ControlledSwitchProps, 'title'>;\n\nexport const Switch = React.forwardRef<HTMLDivElement, ListSwitchProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = React.useState<boolean>(externalChecked);\n    const switchRef = React.useRef<HTMLButtonElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(!checked);\n        onChange(!checked);\n    }, [checked, onChange]);\n\n    const control = (\n        <TacoSwitch\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:bg-grey-700 group-hover/toggle:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={switchRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={switchRef} ref={ref} onToggle={toggle} />;\n});\n\nexport type ListCheckboxProps = ComposableListItemProps<'div'> & ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef<HTMLDivElement, ListSwitchProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = React.useState<boolean>(externalChecked);\n    const checkboxRef = React.useRef<HTMLButtonElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(!checked);\n        onChange(!checked);\n    }, [checked, onChange]);\n\n    const control = (\n        <TacoCheckbox\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:border-grey-700 group-hover/toggle:[&[aria-checked=true]]:border-blue-700 group-hover/checkbox:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={checkboxRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={checkboxRef} ref={ref} onToggle={toggle} />;\n});\n"],"names":["ToggleItem","React","forwardRef","Toggle","props","ref","controlRef","onToggle","attributes","handleClick","event","onClick","isDefaultPrevented","target","current","_controlRef$current","contains","handleKeyDown","onKeyDown","key","_controlRef$current2","className","cn","Item","Switch","checked","externalChecked","onChange","setChecked","useState","switchRef","useRef","toggle","useCallback","control","TacoSwitch","disabled","tabIndex","Checkbox","checkboxRef","TacoCheckbox"],"mappings":"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"}
+{"version":3,"file":"Toggle.js","sources":["../../../../../../../../src/components/List/components/Toggle.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { ControlledSwitchProps, Switch as TacoSwitch } from '../../Switch/Switch';\nimport { ControlledCheckboxProps, Checkbox as TacoCheckbox } from '../../Checkbox/Checkbox';\nimport { Item, ComposableListItemProps } from './Item';\n\ntype ToggleProps = ComposableListItemProps<'div'> & {\n    control: JSX.Element;\n    controlRef: React.RefObject<HTMLInputElement>;\n    onToggle: () => void;\n};\n\nconst ToggleItem = React.forwardRef<HTMLDivElement, ToggleProps>(function Toggle(props, ref) {\n    const { controlRef, onToggle, ...attributes } = props;\n\n    function handleClick(event: React.MouseEvent<HTMLDivElement>) {\n        if (typeof props.onClick === 'function') {\n            props.onClick(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then trigger click of the control\n        if (event.target !== controlRef.current && !controlRef.current?.contains(event.target as HTMLElement)) {\n            onToggle();\n            return;\n        }\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n        if (typeof props.onKeyDown === 'function') {\n            props.onKeyDown(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then send appropriate \"activate\" keyboard shortcuts to the control as a click\n        if (\n            (event.key === 'Enter' || event.key === ' ') &&\n            event.target !== controlRef.current &&\n            !controlRef.current?.contains(event.target as HTMLElement)\n        ) {\n            onToggle();\n            return;\n        }\n    }\n\n    const className = cn('group/toggle', props.className);\n    return <Item {...attributes} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref} />;\n});\n\nexport type ListSwitchProps = ComposableListItemProps<'div'> & Omit<ControlledSwitchProps, 'title'>;\n\nexport const Switch = React.forwardRef<HTMLDivElement, ListSwitchProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = React.useState<boolean>(externalChecked);\n    const switchRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(!checked);\n        onChange(!checked);\n    }, [checked, onChange]);\n\n    const controlClassName = cn(\n        // When ToggleItem is hovered\n        'group-hover/toggle:bg-grey-700',\n        // When ToggleItem is hovered and switch inside it is selected\n        'group-hover/toggle:group-data-[selected]:bg-blue-700'\n    );\n\n    const control = (\n        <TacoSwitch\n            checked={checked}\n            className={controlClassName}\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={switchRef}\n            excludeFromTabOrder\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={switchRef} ref={ref} onToggle={toggle} />;\n});\n\nexport type ListCheckboxProps = ComposableListItemProps<'div'> & ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef<HTMLDivElement, ListSwitchProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = React.useState<boolean>(externalChecked);\n    const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(!checked);\n        onChange(!checked);\n    }, [checked, onChange]);\n\n    const controlClassName = cn(\n        // When ToggleItem is hovered\n        'group-hover/toggle:border-grey-700',\n        // When ToggleItem is hovered and checkbox inside it is selected\n        'group-hover/toggle:group-data-[selected]:border-blue-700 group-hover/toggle:group-data-[selected]:bg-blue-700'\n    );\n\n    const control = (\n        <TacoCheckbox\n            checked={checked}\n            className={controlClassName}\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={checkboxRef}\n            excludeFromTabOrder\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={checkboxRef} ref={ref} onToggle={toggle} />;\n});\n"],"names":["ToggleItem","React","forwardRef","Toggle","props","ref","controlRef","onToggle","attributes","handleClick","event","onClick","isDefaultPrevented","target","current","_controlRef$current","contains","handleKeyDown","onKeyDown","key","_controlRef$current2","className","cn","Item","Switch","checked","externalChecked","onChange","setChecked","useState","switchRef","useRef","toggle","useCallback","controlClassName","control","TacoSwitch","disabled","excludeFromTabOrder","Checkbox","checkboxRef","TacoCheckbox"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Listbox/ScrollableList.js

@@ -155,10 +155,13 @@ const ScrollableList = /*#__PURE__*/forwardRef(function ScrollableList(props, re
   // so need to be taken out of screen reader scope.
   , {
     "aria-hidden": true,
-    tabIndex: -1,
+    excludeFromTabOrder: true,
     checked: optionProps['aria-selected'],
-    onChange: () => null,
-    className: "pointer-events-none ml-2 self-center p-px"
+    onChange: () => {
+      var _optionProps$ref, _optionProps$ref$curr;
+      (_optionProps$ref = optionProps.ref) === null || _optionProps$ref === void 0 ? void 0 : (_optionProps$ref$curr = _optionProps$ref.current) === null || _optionProps$ref$curr === void 0 ? void 0 : _optionProps$ref$curr.click();
+    },
+    className: "ml-2 self-center p-px"
   }))))) : (/*#__PURE__*/createElement("li", {
     className: "yt-list__empty"
   }, /*#__PURE__*/createElement("span", null, texts.listbox.empty))));

package/dist/esm/packages/taco/src/components/Listbox/ScrollableList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableList.js","sources":["../../../../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Localization';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /* Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement;\n    /* The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /* Sets the list to read only mode */\n    readOnly?: boolean;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKey(event.key, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        } else if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted,\n        id,\n        invalid: _,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useMergedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        if (currentIndex && itemRefs[currentIndex]?.current) {\n            itemRefs[currentIndex].current?.scrollIntoView({\n                block: 'center',\n            });\n        }\n    }, []);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex !== undefined ? nextIndex : currentIndex;\n            onKeyDown(event, index);\n        }\n\n        // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable\n        // list are not executed.\n        event.stopPropagation();\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        } else if (!optionValue || !selectedIndexes) {\n            return false;\n        } else {\n            return selectedIndexes.findIndex(i => i === index) !== -1;\n        }\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue-500 focus:border-blue-500',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: options.length <= 0 || loading ? 'presentation' : 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span className=\"flex-grow truncate text-left\">{children}</span>\n                        {multiselect && (\n                            <Checkbox\n                                // In multiselect variant, this checkbox only acts as visual representation of item being selected,\n                                // so need to be taken out of screen reader scope.\n                                aria-hidden\n                                tabIndex={-1}\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"pointer-events-none ml-2 self-center p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKey","key","length","disabled","ScrollableList","React","props","ref","highlighted","invalid","_","loading","onChange","setCurrentIndex","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useMergedRef","itemRefs","map","texts","useLocalization","scrollTo","useListScrollTo","_itemRefs$currentInde","current","_itemRefs$currentInde2","scrollIntoView","block","handleKeyDown","undefined","preventDefault","persist","stopPropagation","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","options","option","depth","path","split","String","children","text","className","cn","hasChildren","icon","role","style","paddingLeft","list","getInputClasses","tabIndex","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}
+{"version":3,"file":"ScrollableList.js","sources":["../../../../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Localization';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /* Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement;\n    /* The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /* Sets the list to read only mode */\n    readOnly?: boolean;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKey(event.key, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        } else if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted,\n        id,\n        invalid: _,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useMergedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        if (currentIndex && itemRefs[currentIndex]?.current) {\n            itemRefs[currentIndex].current?.scrollIntoView({\n                block: 'center',\n            });\n        }\n    }, []);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex !== undefined ? nextIndex : currentIndex;\n            onKeyDown(event, index);\n        }\n\n        // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable\n        // list are not executed.\n        event.stopPropagation();\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        } else if (!optionValue || !selectedIndexes) {\n            return false;\n        } else {\n            return selectedIndexes.findIndex(i => i === index) !== -1;\n        }\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue-500 focus:border-blue-500',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: options.length <= 0 || loading ? 'presentation' : 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span className=\"flex-grow truncate text-left\">{children}</span>\n                        {multiselect && (\n                            <Checkbox\n                                // In multiselect variant, this checkbox only acts as visual representation of item being selected,\n                                // so need to be taken out of screen reader scope.\n                                aria-hidden\n                                excludeFromTabOrder\n                                checked={optionProps['aria-selected']}\n                                onChange={() => {\n                                    optionProps.ref?.current?.click();\n                                }}\n                                className=\"ml-2 self-center p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKey","key","length","disabled","ScrollableList","React","props","ref","highlighted","invalid","_","loading","onChange","setCurrentIndex","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useMergedRef","itemRefs","map","texts","useLocalization","scrollTo","useListScrollTo","_itemRefs$currentInde","current","_itemRefs$currentInde2","scrollIntoView","block","handleKeyDown","undefined","preventDefault","persist","stopPropagation","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","options","option","depth","path","split","String","children","text","className","cn","hasChildren","icon","role","style","paddingLeft","list","getInputClasses","tabIndex","Spinner","delay","listbox","optionProps","Checkbox","excludeFromTabOrder","checked","_optionProps$ref","_optionProps$ref$curr","click","empty"],"mappings":"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"}

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

@@ -1,24 +1,46 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'clsx';
 import { Icon } from '../Icon/Icon.js';
-import { Root, Thumb } from '@radix-ui/react-switch';
+import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { Switch } from 'react-aria-components';
 
 const ModeSwitch = /*#__PURE__*/forwardRef(function ModeSwitch(props, ref) {
   const {
+    checked,
+    defaultChecked,
+    readOnly,
     onChange,
+    disabled,
+    className,
     ...otherProps
   } = props;
-  const className = cn('group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus p-1', {
-    'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,
-    'bg-grey-500 aria-checked:bg-blue-500 cursor-not-allowed opacity-50': props.disabled
-  }, props.className);
-  return /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "mode",
-    onCheckedChange: onChange,
-    ref: ref
-  }), /*#__PURE__*/createElement(Thumb, {
-    className: "pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]"
+  const inputRef = useMergedRef(ref);
+  const switchClassName = cn('group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex p-1 cursor-pointer bg-grey-500', 'data-[focus-visible]:yt-focus', 'hover:bg-grey-700',
+  // When modeswitch is selected
+  'data-[selected]:bg-blue-500',
+  // When modeswitch is selected and hovered
+  'hover:data-[selected]:bg-blue-700',
+  // When modeswitch is disabled
+  'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:bg-grey-500 ',
+  // When modeswitch is disabled and selected
+  'data-[disabled]:data-[selected]:!bg-blue-500', className);
+  const switchThumbClassName = cn('pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform',
+  // When modeswitch is disabled
+  'group-data-[disabled]:opacity-50',
+  // When modeswitch is selected
+  'group-data-[selected]:translate-x-full');
+  return /*#__PURE__*/createElement(Switch, Object.assign({}, otherProps, {
+    className: switchClassName,
+    defaultSelected: defaultChecked,
+    id: otherProps.id,
+    inputRef: inputRef,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    isSelected: checked,
+    onChange: onChange
+  }), /*#__PURE__*/createElement("span", {
+    className: switchThumbClassName,
+    "data-taco": "mode"
   }, /*#__PURE__*/createElement(Icon, {
     name: "edit-simple",
     className: "pointer-events-none !h-5 !w-5"

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

@@ -1 +1 @@
-{"version":3,"file":"ModeSwitch.js","sources":["../../../../../../../src/components/ModeSwitch/ModeSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\n\nimport { Icon } from '../Icon/Icon';\n\ntype ModeSwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledModeSwitchProps extends ModeSwitchBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledModeSwitchProps extends ModeSwitchBaseProps {\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 ModeSwitchProps = UncontrolledModeSwitchProps | ControlledModeSwitchProps;\n\nexport const ModeSwitch = React.forwardRef(function ModeSwitch(props: ModeSwitchProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onChange, ...otherProps } = props;\n\n    const className = cn(\n        'group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus p-1',\n        {\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 aria-checked:bg-blue-500 cursor-not-allowed opacity-50': props.disabled,\n        },\n        props.className\n    );\n\n    return (\n        <PrimitiveSwitch.Root {...otherProps} className={className} data-taco=\"mode\" onCheckedChange={onChange} ref={ref}>\n            <PrimitiveSwitch.Thumb className=\"pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]\">\n                <Icon name=\"edit-simple\" className=\"pointer-events-none !h-5 !w-5\" />\n            </PrimitiveSwitch.Thumb>\n        </PrimitiveSwitch.Root>\n    );\n});\nModeSwitch.displayName = 'ModeSwitch';\n"],"names":["ModeSwitch","React","props","ref","onChange","otherProps","className","cn","disabled","PrimitiveSwitch","onCheckedChange","Icon","name","displayName"],"mappings":";;;;;MA4BaA,UAAU,gBAAGC,UAAgB,CAAC,SAASD,UAAUA,CAACE,KAAsB,EAAEC,GAAiC;EACpH,MAAM;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGH,KAAK;EAEzC,MAAMI,SAAS,GAAGC,EAAE,CAChB,uFAAuF,EACvF;IACI,uFAAuF,EAAE,CAACL,KAAK,CAACM,QAAQ;IACxG,oEAAoE,EAAEN,KAAK,CAACM;GAC/E,EACDN,KAAK,CAACI,SAAS,CAClB;EAED,oBACIL,cAACQ,IAAoB,oBAAKJ,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACI,eAAe,EAAEN,QAAQ;IAAED,GAAG,EAAEA;mBACzGF,cAACQ,KAAqB;IAACH,SAAS,EAAC;kBAC7BL,cAACU,IAAI;IAACC,IAAI,EAAC,aAAa;IAACN,SAAS,EAAC;IAAkC,CACjD,CACL;AAE/B,CAAC;AACDN,UAAU,CAACa,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"ModeSwitch.js","sources":["../../../../../../../src/components/ModeSwitch/ModeSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Switch as SwitchPrimitive, SwitchProps as SwitchPrimitiveProps } from 'react-aria-components';\n\nimport { Icon } from '../Icon/Icon';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\ntype ModeSwitchBaseProps = Omit<\n    SwitchPrimitiveProps,\n    'onChange' | 'label' | 'isDisabled' | 'isReadOnly' | 'isSelected' | 'defaultSelected' | 'isInvalid'\n> & {\n    disabled?: boolean;\n    readOnly?: boolean;\n    onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;\n};\n\ninterface UncontrolledModeSwitchProps extends ModeSwitchBaseProps {\n    checked?: never;\n    onChange?: never;\n    defaultChecked?: boolean;\n}\n\ninterface ControlledModeSwitchProps extends ModeSwitchBaseProps {\n    defaultChecked?: never;\n    checked: boolean;\n    onChange: (checked: boolean) => void;\n}\n\nexport type ModeSwitchProps = UncontrolledModeSwitchProps | ControlledModeSwitchProps;\n\nexport const ModeSwitch = React.forwardRef(function ModeSwitch(props: ModeSwitchProps, ref: React.Ref<HTMLInputElement>) {\n    const { checked, defaultChecked, readOnly, onChange, disabled, className, ...otherProps } = props;\n\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n\n    const switchClassName = cn(\n        'group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex p-1 cursor-pointer bg-grey-500',\n        'data-[focus-visible]:yt-focus',\n        'hover:bg-grey-700',\n        // When modeswitch is selected\n        'data-[selected]:bg-blue-500',\n        // When modeswitch is selected and hovered\n        'hover:data-[selected]:bg-blue-700',\n        // When modeswitch is disabled\n        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:bg-grey-500 ',\n        // When modeswitch is disabled and selected\n        'data-[disabled]:data-[selected]:!bg-blue-500',\n        className\n    );\n\n    const switchThumbClassName = cn(\n        'pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform',\n        // When modeswitch is disabled\n        'group-data-[disabled]:opacity-50',\n        // When modeswitch is selected\n        'group-data-[selected]:translate-x-full'\n    );\n\n    return (\n        <SwitchPrimitive\n            {...otherProps}\n            className={switchClassName}\n            defaultSelected={defaultChecked}\n            id={otherProps.id}\n            inputRef={inputRef}\n            isDisabled={disabled}\n            isReadOnly={readOnly}\n            isSelected={checked}\n            onChange={onChange}>\n            <span className={switchThumbClassName} data-taco=\"mode\">\n                <Icon name=\"edit-simple\" className=\"pointer-events-none !h-5 !w-5\" />\n            </span>\n        </SwitchPrimitive>\n    );\n});\nModeSwitch.displayName = 'ModeSwitch';\n"],"names":["ModeSwitch","React","props","ref","checked","defaultChecked","readOnly","onChange","disabled","className","otherProps","inputRef","useMergedRef","switchClassName","cn","switchThumbClassName","SwitchPrimitive","defaultSelected","id","isDisabled","isReadOnly","isSelected","Icon","name","displayName"],"mappings":";;;;;;MA8BaA,UAAU,gBAAGC,UAAgB,CAAC,SAASD,UAAUA,CAACE,KAAsB,EAAEC,GAAgC;EACnH,MAAM;IAAEC,OAAO;IAAEC,cAAc;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,SAAS;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAEjG,MAAMS,QAAQ,GAAGC,YAAY,CAAmBT,GAAG,CAAC;EAEpD,MAAMU,eAAe,GAAGC,EAAE,CACtB,2FAA2F,EAC3F,+BAA+B,EAC/B,mBAAmB;;EAEnB,6BAA6B;;EAE7B,mCAAmC;;EAEnC,4FAA4F;;EAE5F,8CAA8C,EAC9CL,SAAS,CACZ;EAED,MAAMM,oBAAoB,GAAGD,EAAE,CAC3B,+HAA+H;;EAE/H,kCAAkC;;EAElC,wCAAwC,CAC3C;EAED,oBACIb,cAACe,MAAe,oBACRN,UAAU;IACdD,SAAS,EAAEI,eAAe;IAC1BI,eAAe,EAAEZ,cAAc;IAC/Ba,EAAE,EAAER,UAAU,CAACQ,EAAE;IACjBP,QAAQ,EAAEA,QAAQ;IAClBQ,UAAU,EAAEX,QAAQ;IACpBY,UAAU,EAAEd,QAAQ;IACpBe,UAAU,EAAEjB,OAAO;IACnBG,QAAQ,EAAEA;mBACVN;IAAMQ,SAAS,EAAEM,oBAAoB;iBAAY;kBAC7Cd,cAACqB,IAAI;IAACC,IAAI,EAAC,aAAa;IAACd,SAAS,EAAC;IAAkC,CAClE,CACO;AAE1B,CAAC;AACDT,UAAU,CAACwB,WAAW,GAAG,YAAY;;;;"}

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

@@ -3,9 +3,8 @@ import { fixedForwardRef } from '../../types.js';
 import { useReport } from './useReport.js';
 import { Table } from '../../primitives/Table/Core/Table.js';
 
-function Column(_) {
-  return null;
-}
+const Column = () => null;
+Column.displayName = 'Table3Column';
 function Group(_) {
   return null;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Report.js","sources":["../../../../../../../src/components/Report/Report.tsx"],"sourcesContent":["import React from 'react';\nimport { fixedForwardRef } from '../../types';\nimport { useReport } from './useReport';\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { ReportRef, ReportProps, ReportColumnProps, ReportGroupProps } from './types';\n\nfunction Column<TType = unknown>(_: ReportColumnProps<TType>) {\n    return null;\n}\n\nfunction Group(_: ReportGroupProps) {\n    return null;\n}\n\nconst BaseReport = fixedForwardRef(function BaseReport<TType = unknown>(props: ReportProps<TType>, ref: React.Ref<ReportRef>) {\n    const report = useReport<TType>(props, ref);\n\n    return (\n        <Table>\n            <Table.Toolbar<TType> table={report} />\n            <Table.Grid<TType> data-taco=\"table-report\" table={report} />\n        </Table>\n    );\n});\n\nexport const Report = fixedForwardRef(function Report<TType = unknown>(props: ReportProps<TType>, ref: React.Ref<ReportRef>) {\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 <BaseReport<TType> {...props} key={key} ref={ref} />;\n}) as (<TType = unknown>(props: ReportProps<TType> & React.RefAttributes<ReportRef>) => JSX.Element) & {\n    Column: typeof Column;\n    Group: typeof Group;\n};\nReport.Column = Column;\nReport.Group = Group;\n\nexport type { ReportRef, ReportProps, ReportColumnProps, ReportGroupProps } from './types';\n"],"names":["Column","_","Group","BaseReport","fixedForwardRef","props","ref","report","useReport","React","Table","Toolbar","table","Grid","Report","stringifiedChildren","String","children","key","useMemo"],"mappings":";;;;;AAMA,SAASA,MAAMA,CAAkBC,CAA2B;EACxD,OAAO,IAAI;AACf;AAEA,SAASC,KAAKA,CAACD,CAAmB;EAC9B,OAAO,IAAI;AACf;AAEA,MAAME,UAAU,gBAAGC,eAAe,CAAC,SAASD,UAAUA,CAAkBE,KAAyB,EAAEC,GAAyB;EACxH,MAAMC,MAAM,GAAGC,SAAS,CAAQH,KAAK,EAAEC,GAAG,CAAC;EAE3C,oBACIG,6BAACC,KAAK,qBACFD,6BAACC,KAAK,CAACC,OAAO;IAAQC,KAAK,EAAEL;IAAU,eACvCE,6BAACC,KAAK,CAACG,IAAI;iBAAkB,cAAc;IAACD,KAAK,EAAEL;IAAU,CACzD;AAEhB,CAAC,CAAC;MAEWO,MAAM,gBAAGV,eAAe,CAAC,SAASU,MAAMA,CAAkBT,KAAyB,EAAEC,GAAyB;EACvH,MAAMS,mBAAmB,GAAGC,MAAM,CAACX,KAAK,CAACY,QAAQ,CAAC;;;EAGlD,MAAMC,GAAG,GAAGT,cAAK,CAACU,OAAO,CAAC,MAAMH,MAAM,CAAC,WAAW,GAAGD,mBAAmB,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EACjG,oBAAON,6BAACN,UAAU,oBAAYE,KAAK;IAAEa,GAAG,EAAEA,GAAG;IAAEZ,GAAG,EAAEA;KAAO;AAC/D,CAAC;AAIDQ,MAAM,CAACd,MAAM,GAAGA,MAAM;AACtBc,MAAM,CAACZ,KAAK,GAAGA,KAAK;;;;"}
+{"version":3,"file":"Report.js","sources":["../../../../../../../src/components/Report/Report.tsx"],"sourcesContent":["import React from 'react';\nimport { fixedForwardRef } from '../../types';\nimport { useReport } from './useReport';\nimport { Table } from '../../primitives/Table/Core/Table';\nimport { ReportRef, ReportProps, ReportColumnProps, ReportGroupProps } from './types';\n\nconst Column: React.FC<ReportColumnProps<unknown>> & {\n    <TType = unknown>(_: ReportColumnProps<TType>): null;\n} = () => null;\n\nColumn.displayName = 'Table3Column';\n\nfunction Group(_: ReportGroupProps) {\n    return null;\n}\n\nconst BaseReport = fixedForwardRef(function BaseReport<TType = unknown>(props: ReportProps<TType>, ref: React.Ref<ReportRef>) {\n    const report = useReport<TType>(props, ref);\n\n    return (\n        <Table>\n            <Table.Toolbar<TType> table={report} />\n            <Table.Grid<TType> data-taco=\"table-report\" table={report} />\n        </Table>\n    );\n});\n\nexport const Report = fixedForwardRef(function Report<TType = unknown>(props: ReportProps<TType>, ref: React.Ref<ReportRef>) {\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 <BaseReport<TType> {...props} key={key} ref={ref} />;\n}) as (<TType = unknown>(props: ReportProps<TType> & React.RefAttributes<ReportRef>) => JSX.Element) & {\n    Column: typeof Column;\n    Group: typeof Group;\n};\nReport.Column = Column;\nReport.Group = Group;\n\nexport type { ReportRef, ReportProps, ReportColumnProps, ReportGroupProps } from './types';\n"],"names":["Column","displayName","Group","_","BaseReport","fixedForwardRef","props","ref","report","useReport","React","Table","Toolbar","table","Grid","Report","stringifiedChildren","String","children","key","useMemo"],"mappings":";;;;;AAMA,MAAMA,MAAM,GAERA,MAAM,IAAI;AAEdA,MAAM,CAACC,WAAW,GAAG,cAAc;AAEnC,SAASC,KAAKA,CAACC,CAAmB;EAC9B,OAAO,IAAI;AACf;AAEA,MAAMC,UAAU,gBAAGC,eAAe,CAAC,SAASD,UAAUA,CAAkBE,KAAyB,EAAEC,GAAyB;EACxH,MAAMC,MAAM,GAAGC,SAAS,CAAQH,KAAK,EAAEC,GAAG,CAAC;EAE3C,oBACIG,6BAACC,KAAK,qBACFD,6BAACC,KAAK,CAACC,OAAO;IAAQC,KAAK,EAAEL;IAAU,eACvCE,6BAACC,KAAK,CAACG,IAAI;iBAAkB,cAAc;IAACD,KAAK,EAAEL;IAAU,CACzD;AAEhB,CAAC,CAAC;MAEWO,MAAM,gBAAGV,eAAe,CAAC,SAASU,MAAMA,CAAkBT,KAAyB,EAAEC,GAAyB;EACvH,MAAMS,mBAAmB,GAAGC,MAAM,CAACX,KAAK,CAACY,QAAQ,CAAC;;;EAGlD,MAAMC,GAAG,GAAGT,cAAK,CAACU,OAAO,CAAC,MAAMH,MAAM,CAAC,WAAW,GAAGD,mBAAmB,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EACjG,oBAAON,6BAACN,UAAU,oBAAYE,KAAK;IAAEa,GAAG,EAAEA,GAAG;IAAEZ,GAAG,EAAEA;KAAO;AAC/D,CAAC;AAIDQ,MAAM,CAACf,MAAM,GAAGA,MAAM;AACtBe,MAAM,CAACb,KAAK,GAAGA,KAAK;;;;"}

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

@@ -1,48 +1,50 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'clsx';
-import { useId } from '../../hooks/useId.js';
-import { Root, Thumb } from '@radix-ui/react-switch';
+import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { Switch as Switch$1 } from 'react-aria-components';
 
 const Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
   const {
+    checked,
+    defaultChecked,
+    readOnly,
     label,
     onChange,
+    disabled,
+    onClick,
+    className,
     ...otherProps
   } = props;
-  const id = useId(props.id);
-  const className = cn('group h-5 w-9 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus', {
-    'mr-2': !!label,
-    'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,
-    'bg-grey-500/50 aria-checked:bg-blue-500/50 cursor-not-allowed': props.disabled
-  }, props.className);
-  let labelledByProps = null;
-  if (label) {
-    labelledByProps = {
-      'aria-labelledby': `${id}-label`,
-      id
-    };
-  }
-  const element = /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, labelledByProps, {
-    className: className,
+  const inputRef = useMergedRef(ref);
+  const switchContainerClassName = cn('group flex self-start', 'data-[disabled]:text-grey-300 data-[disabled]:cursor-not-allowed');
+  const switchClassName = cn('h-5 w-9 flex flex-shrink-0 rounded-full inline-flex cursor-pointer bg-grey-500', 'group-data-[focus-visible]:yt-focus', {
+    'mr-2': !!label
+  }, 'group-hover:bg-grey-700',
+  // When switch is selected
+  'group-data-[selected]:bg-blue-500',
+  // When switch is selected and hovered
+  'group-hover:group-data-[selected]:bg-blue-700',
+  // When switch is disabled
+  'group-data-[disabled]:!bg-grey-500/50 group-data-[disabled]:cursor-not-allowed',
+  // When switch is disabled and selected
+  'group-data-[disabled]:group-data-[selected]:!bg-blue-500/50', className);
+  const switchThumbClassName = cn('pointer-events-none mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform will-change-transform', 'group-data-[disabled]:opacity-50', 'group-data-[selected]:translate-x-[1.1rem]');
+  return /*#__PURE__*/createElement(Switch$1, Object.assign({}, otherProps, {
+    className: switchContainerClassName,
+    "data-taco": "switch-container",
+    inputRef: inputRef,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    isSelected: checked,
+    defaultSelected: defaultChecked,
+    onChange: onChange
+  }), /*#__PURE__*/createElement("span", {
+    className: switchClassName,
     "data-taco": "switch",
-    onCheckedChange: onChange,
-    ref: ref
-  }), /*#__PURE__*/createElement(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]"
-  }));
-  if (label) {
-    const labelContainerClassName = cn('flex self-start cursor-pointer', {
-      'cursor-not-allowed text-grey-300': props.disabled
-    });
-    return /*#__PURE__*/createElement("span", {
-      className: labelContainerClassName,
-      "data-taco": "switch-container"
-    }, element, /*#__PURE__*/createElement("label", {
-      htmlFor: id,
-      id: `${id}-label`
-    }, label));
-  }
-  return element;
+    onClick: onClick
+  }, /*#__PURE__*/createElement("span", {
+    className: switchThumbClassName
+  })), label);
 });
 Switch.displayName = 'Switch';
 

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=\"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;;;;"}
+{"version":3,"file":"Switch.js","sources":["../../../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Switch as SwitchPrimitive, SwitchProps as SwitchPrimitiveProps } from 'react-aria-components';\n\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\ntype SwitchBaseProps = Omit<SwitchPrimitiveProps, 'onChange' | 'isDisabled' | 'isReadOnly' | 'isSelected' | 'defaultSelected'> & {\n    label?: React.ReactNode;\n    disabled?: boolean;\n    readOnly?: boolean;\n    onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;\n};\n\nexport interface UncontrolledSwitchProps extends SwitchBaseProps {\n    checked?: never;\n    onChange?: never;\n    defaultChecked?: boolean;\n}\n\nexport interface ControlledSwitchProps extends SwitchBaseProps {\n    defaultChecked?: never;\n    checked: boolean;\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<HTMLInputElement>) {\n    const { checked, defaultChecked, readOnly, label, onChange, disabled, onClick, className, ...otherProps } = props;\n\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n\n    const switchContainerClassName = cn(\n        'group flex self-start',\n        'data-[disabled]:text-grey-300 data-[disabled]:cursor-not-allowed'\n    );\n\n    const switchClassName = cn(\n        'h-5 w-9 flex flex-shrink-0 rounded-full inline-flex cursor-pointer bg-grey-500',\n        'group-data-[focus-visible]:yt-focus',\n        {\n            'mr-2': !!label,\n        },\n        'group-hover:bg-grey-700',\n        // When switch is selected\n        'group-data-[selected]:bg-blue-500',\n        // When switch is selected and hovered\n        'group-hover:group-data-[selected]:bg-blue-700',\n        // When switch is disabled\n        'group-data-[disabled]:!bg-grey-500/50 group-data-[disabled]:cursor-not-allowed',\n        // When switch is disabled and selected\n        'group-data-[disabled]:group-data-[selected]:!bg-blue-500/50',\n        className\n    );\n\n    const switchThumbClassName = cn(\n        'pointer-events-none mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform will-change-transform',\n        'group-data-[disabled]:opacity-50',\n        'group-data-[selected]:translate-x-[1.1rem]'\n    );\n\n    return (\n        <SwitchPrimitive\n            {...otherProps}\n            className={switchContainerClassName}\n            data-taco=\"switch-container\"\n            inputRef={inputRef}\n            isDisabled={disabled}\n            isReadOnly={readOnly}\n            isSelected={checked}\n            defaultSelected={defaultChecked}\n            onChange={onChange}>\n            <span className={switchClassName} data-taco=\"switch\" onClick={onClick}>\n                <span className={switchThumbClassName} />\n            </span>\n            {label}\n        </SwitchPrimitive>\n    );\n});\nSwitch.displayName = 'Switch';\n"],"names":["Switch","React","props","ref","checked","defaultChecked","readOnly","label","onChange","disabled","onClick","className","otherProps","inputRef","useMergedRef","switchContainerClassName","cn","switchClassName","switchThumbClassName","SwitchPrimitive","isDisabled","isReadOnly","isSelected","defaultSelected","displayName"],"mappings":";;;;;MA2BaA,MAAM,gBAAGC,UAAgB,CAAC,SAASD,MAAMA,CAACE,KAAkB,EAAEC,GAAgC;EACvG,MAAM;IAAEC,OAAO;IAAEC,cAAc;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,OAAO;IAAEC,SAAS;IAAE,GAAGC;GAAY,GAAGV,KAAK;EAEjH,MAAMW,QAAQ,GAAGC,YAAY,CAAmBX,GAAG,CAAC;EAEpD,MAAMY,wBAAwB,GAAGC,EAAE,CAC/B,uBAAuB,EACvB,kEAAkE,CACrE;EAED,MAAMC,eAAe,GAAGD,EAAE,CACtB,gFAAgF,EAChF,qCAAqC,EACrC;IACI,MAAM,EAAE,CAAC,CAACT;GACb,EACD,yBAAyB;;EAEzB,mCAAmC;;EAEnC,+CAA+C;;EAE/C,gFAAgF;;EAEhF,6DAA6D,EAC7DI,SAAS,CACZ;EAED,MAAMO,oBAAoB,GAAGF,EAAE,CAC3B,2HAA2H,EAC3H,kCAAkC,EAClC,4CAA4C,CAC/C;EAED,oBACIf,cAACkB,QAAe,oBACRP,UAAU;IACdD,SAAS,EAAEI,wBAAwB;iBACzB,kBAAkB;IAC5BF,QAAQ,EAAEA,QAAQ;IAClBO,UAAU,EAAEX,QAAQ;IACpBY,UAAU,EAAEf,QAAQ;IACpBgB,UAAU,EAAElB,OAAO;IACnBmB,eAAe,EAAElB,cAAc;IAC/BG,QAAQ,EAAEA;mBACVP;IAAMU,SAAS,EAAEM,eAAe;iBAAY,QAAQ;IAACP,OAAO,EAAEA;kBAC1DT;IAAMU,SAAS,EAAEO;IAAwB,CACtC,EACNX,KAAK,CACQ;AAE1B,CAAC;AACDP,MAAM,CAACwB,WAAW,GAAG,QAAQ;;;;"}