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

package/dist/esm/packages/taco/src/primitives/Collection/components/Root.js.map

@@ -1 +1 @@
-{"version":3,"file":"Root.js","sources":["../../../../../../../../src/primitives/Collection/components/Root.tsx"],"sourcesContent":["import React from 'react';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { isAriaDirectionKey } from '../../../utils/aria';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\n\n/* This component provides a keyboard navigable collection primitive for use in lists\n * It is unlikely you need to edit this component\n */\n\nexport type CollectionProps = React.HTMLAttributes<HTMLDivElement> & {\n    querySelector: string;\n};\n\nexport type CollectionRef = HTMLDivElement & {\n    setActiveIndex: (option: HTMLDivElement) => void;\n};\n\nconst getOptionsFromCollection = (collection: HTMLDivElement, selector: string): NodeListOf<Element> =>\n    collection.querySelectorAll(selector);\n\n// we use javascript to set attributes (rather than cloning children and adding them)\n// so that we can support nesting (e.g. groups) - child elements that aren't options.\n// without doing this we would have to unwrap and flatten all groups\nexport const Root = React.forwardRef<CollectionRef, CollectionProps>(function CollectionRoot(props, ref) {\n    const { querySelector, tabIndex = 0, ...otherProps } = props;\n    const internalRef = useMergedRef<CollectionRef>(ref);\n    const [activeIndex, setActiveIndex] = React.useState<number | undefined>();\n    const lastLengthRef = React.useRef(0);\n\n    const setActiveOption = (index: number, collection: HTMLDivElement, option: Element) => {\n        collection.querySelector(`[aria-current]`)?.removeAttribute('aria-current');\n        option.setAttribute('aria-current', 'true');\n        option.scrollIntoView({ block: 'nearest' });\n        setActiveIndex(index);\n    };\n\n    const setActiveIndexByElement = React.useCallback(\n        (option: HTMLDivElement) => {\n            if (internalRef.current) {\n                if (option.matches(querySelector)) {\n                    const options = getOptionsFromCollection(internalRef.current, querySelector);\n                    const nextActiveIndex = Array.from(options).indexOf(option);\n\n                    if (nextActiveIndex > -1) {\n                        setActiveOption(nextActiveIndex, internalRef.current, option);\n                    }\n                }\n            }\n        },\n        [internalRef.current, querySelector]\n    );\n\n    React.useEffect(() => {\n        if (internalRef.current) {\n            internalRef.current.setActiveIndex = setActiveIndexByElement;\n        }\n    }, [internalRef.current]);\n\n    React.useEffect(() => {\n        if (internalRef.current) {\n            const options = getOptionsFromCollection(internalRef.current, querySelector);\n\n            if (options.length && options.length !== lastLengthRef.current) {\n                let selected = internalRef.current.querySelectorAll(`[aria-current=\"true\"]`);\n\n                if (selected.length === 0) {\n                    selected = internalRef.current.querySelectorAll(`[aria-selected]`);\n                }\n\n                if (selected.length === 1) {\n                    if (options) {\n                        const firstSelected = selected.item(0);\n                        const selectedIndex = Array.from(options).indexOf(firstSelected);\n\n                        if (selectedIndex > -1) {\n                            setActiveOption(selectedIndex, internalRef.current, firstSelected);\n                        }\n                    }\n                } else {\n                    // multiple selected or none selected should go to 0\n                    setActiveOption(0, internalRef.current, options.item(0));\n                }\n            }\n\n            lastLengthRef.current = options.length;\n        }\n    }, [props.children]);\n\n    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        const option = event.target as HTMLElement;\n\n        if (option.matches(querySelector)) {\n            const options = getOptionsFromCollection(event.currentTarget, querySelector);\n            const nextActiveIndex = Array.from(options).indexOf(option);\n\n            if (nextActiveIndex > -1) {\n                setActiveOption(nextActiveIndex, event.currentTarget, option);\n            }\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        // this stops the event dispatched to the option rebounding back and starting an infinite loop\n        if (event.target !== event.currentTarget) {\n            return;\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        const options = getOptionsFromCollection(event.currentTarget, querySelector);\n\n        if (options) {\n            if (isAriaDirectionKey(event)) {\n                event.preventDefault();\n                event.stopPropagation();\n                const nextActiveIndex = getNextEnabledItem(event, options, activeIndex);\n\n                if (nextActiveIndex !== undefined && nextActiveIndex !== activeIndex) {\n                    setActiveOption(nextActiveIndex, event.currentTarget, options.item(nextActiveIndex));\n                }\n            } else if (activeIndex !== undefined && !!options.item(activeIndex)) {\n                // forward events onto the underlying option - this lets consumers place onKeyDown handlers on their own components\n                options\n                    .item(activeIndex)\n                    ?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n            }\n        }\n    };\n\n    return <div {...otherProps} onClick={handleClick} onKeyDown={handleKeyDown} ref={internalRef} tabIndex={tabIndex} />;\n});\n\nexport const getNextIndexFromKeycode = (\n    event: React.KeyboardEvent,\n    length: number,\n    activeIndex: number | undefined\n): number | undefined => {\n    switch (event.key) {\n        case 'ArrowUp':\n            return activeIndex === undefined ? length - 1 : activeIndex > 0 ? activeIndex - 1 : activeIndex;\n\n        case 'ArrowDown':\n            return activeIndex === undefined ? 0 : activeIndex < length - 1 ? activeIndex + 1 : activeIndex;\n\n        case 'Home':\n            return 0;\n\n        case 'End':\n            return length - 1;\n\n        default:\n            return;\n    }\n};\n\nexport const getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    options: NodeListOf<Element>,\n    activeIndex: number | undefined,\n    recurse = true\n): number | undefined => {\n    const nextIndex = getNextIndexFromKeycode(event, options.length, activeIndex);\n\n    if (nextIndex !== undefined) {\n        if (nextIndex === activeIndex) {\n            return activeIndex;\n        } else if (options.item(nextIndex) && isSkippableItem(options.item(nextIndex))) {\n            // check in the other direction if the first or last item is disabled,\n            // but prevent infinite loops if all elements are disabled by disabling recursion\n            if (recurse) {\n                if (nextIndex === 0) {\n                    return getNextEnabledItem(\n                        new KeyboardEvent(event.type, { ...(event as any), key: 'ArrowDown' }) as any,\n                        options,\n                        nextIndex,\n                        false\n                    );\n                } else if (nextIndex === options.length - 1) {\n                    return getNextEnabledItem(\n                        new KeyboardEvent(event.type, { ...(event as any), key: 'ArrowUp' }) as any,\n                        options,\n                        nextIndex,\n                        false\n                    );\n                }\n            }\n\n            return getNextEnabledItem(event, options, nextIndex, recurse);\n        }\n    }\n\n    return nextIndex;\n};\n\nconst isSkippableItem = (element: Element) => {\n    return (\n        element.getAttribute('role') === 'presentation' ||\n        !!element.hasAttribute('disabled') ||\n        !!element.getAttribute('aria-disabled') ||\n        !!element.getAttribute('aria-hidden')\n    );\n};\n"],"names":["getOptionsFromCollection","collection","selector","querySelectorAll","Root","React","forwardRef","CollectionRoot","props","ref","querySelector","tabIndex","otherProps","internalRef","useMergedRef","activeIndex","setActiveIndex","useState","lastLengthRef","useRef","setActiveOption","index","option","_collection$querySele","removeAttribute","setAttribute","scrollIntoView","block","setActiveIndexByElement","useCallback","current","matches","options","nextActiveIndex","Array","from","indexOf","useEffect","length","selected","firstSelected","item","selectedIndex","children","handleClick","event","target","currentTarget","handleKeyDown","onKeyDown","isDefaultPrevented","isAriaDirectionKey","preventDefault","stopPropagation","getNextEnabledItem","undefined","_options$item","dispatchEvent","createCustomKeyboardEvent","onClick","getNextIndexFromKeycode","key","recurse","nextIndex","isSkippableItem","KeyboardEvent","type","element","getAttribute","hasAttribute"],"mappings":"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"}
+{"version":3,"file":"Root.js","sources":["../../../../../../../../src/primitives/Collection/components/Root.tsx"],"sourcesContent":["import React from 'react';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { isAriaDirectionKey } from '../../../utils/aria';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\n\n/* This component provides a keyboard navigable collection primitive for use in lists\n * It is unlikely you need to edit this component\n */\n\nexport type CollectionProps = React.HTMLAttributes<HTMLDivElement> & {\n    querySelector: string;\n};\n\nexport type CollectionRef = HTMLDivElement & {\n    setActiveIndexByElement: (option: HTMLDivElement) => void;\n};\n\nconst getOptionsFromCollection = (collection: HTMLDivElement, selector: string): NodeListOf<Element> =>\n    collection.querySelectorAll(selector);\n\n// we use javascript to set attributes (rather than cloning children and adding them)\n// so that we can support nesting (e.g. groups) - child elements that aren't options.\n// without doing this we would have to unwrap and flatten all groups\nexport const Root = React.forwardRef<CollectionRef, CollectionProps>(function CollectionRoot(props, ref) {\n    const { querySelector, tabIndex = 0, ...otherProps } = props;\n    const internalRef = useMergedRef<CollectionRef>(ref);\n    const [activeIndex, setActiveIndex] = React.useState<number | undefined>();\n\n    const setActiveOption = (index: number, collection: HTMLDivElement, option: Element) => {\n        collection.querySelector(`[aria-current]`)?.removeAttribute('aria-current');\n        option.setAttribute('aria-current', 'true');\n        option.scrollIntoView({ block: 'nearest' });\n        setActiveIndex(index);\n    };\n\n    const setActiveIndexByElement = React.useCallback(\n        (option: HTMLDivElement) => {\n            if (internalRef.current) {\n                if (option.matches(querySelector)) {\n                    const options = getOptionsFromCollection(internalRef.current, querySelector);\n                    const nextActiveIndex = Array.from(options).indexOf(option);\n\n                    if (nextActiveIndex > -1) {\n                        setActiveOption(nextActiveIndex, internalRef.current, option);\n                    }\n                }\n            }\n        },\n        [internalRef.current, querySelector]\n    );\n\n    React.useEffect(() => {\n        if (internalRef.current) {\n            internalRef.current.setActiveIndexByElement = setActiveIndexByElement;\n        }\n    }, [internalRef.current]);\n\n    React.useEffect(() => {\n        if (internalRef.current) {\n            const options = getOptionsFromCollection(internalRef.current, querySelector);\n\n            if (options.length) {\n                let selected = internalRef.current.querySelectorAll(`[aria-current=\"true\"]`);\n\n                if (selected.length === 0) {\n                    selected = internalRef.current.querySelectorAll(`[aria-selected]`);\n                }\n\n                if (selected.length === 1) {\n                    if (options) {\n                        const firstSelected = selected.item(0);\n                        const selectedIndex = Array.from(options).indexOf(firstSelected);\n\n                        if (selectedIndex > -1) {\n                            setActiveOption(selectedIndex, internalRef.current, firstSelected);\n                        }\n                    }\n                } else {\n                    // multiple selected or none selected should go to 0\n                    setActiveOption(0, internalRef.current, options.item(0));\n                }\n            }\n        }\n    }, [props.children]);\n\n    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        const option = event.target as HTMLElement;\n\n        if (option.matches(querySelector)) {\n            const options = getOptionsFromCollection(event.currentTarget, querySelector);\n            const nextActiveIndex = Array.from(options).indexOf(option);\n\n            if (nextActiveIndex > -1) {\n                setActiveOption(nextActiveIndex, event.currentTarget, option);\n            }\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        // this stops the event dispatched to the option rebounding back and starting an infinite loop\n        if (event.target !== event.currentTarget) {\n            return;\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        const options = getOptionsFromCollection(event.currentTarget, querySelector);\n\n        if (options) {\n            if (isAriaDirectionKey(event)) {\n                event.preventDefault();\n                event.stopPropagation();\n                const nextActiveIndex = getNextEnabledItem(event, options, activeIndex);\n\n                if (nextActiveIndex !== undefined && nextActiveIndex !== activeIndex) {\n                    setActiveOption(nextActiveIndex, event.currentTarget, options.item(nextActiveIndex));\n                }\n            } else if (activeIndex !== undefined && !!options.item(activeIndex)) {\n                // forward events onto the underlying option - this lets consumers place onKeyDown handlers on their own components\n                options\n                    .item(activeIndex)\n                    ?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n            }\n        }\n    };\n\n    return <div {...otherProps} onClick={handleClick} onKeyDown={handleKeyDown} ref={internalRef} tabIndex={tabIndex} />;\n});\n\nexport const getNextIndexFromKeycode = (\n    event: React.KeyboardEvent,\n    length: number,\n    activeIndex: number | undefined\n): number | undefined => {\n    switch (event.key) {\n        case 'ArrowUp':\n            return activeIndex === undefined ? length - 1 : activeIndex > 0 ? activeIndex - 1 : activeIndex;\n\n        case 'ArrowDown':\n            return activeIndex === undefined ? 0 : activeIndex < length - 1 ? activeIndex + 1 : activeIndex;\n\n        case 'Home':\n            return 0;\n\n        case 'End':\n            return length - 1;\n\n        default:\n            return;\n    }\n};\n\nexport const getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    options: NodeListOf<Element>,\n    activeIndex: number | undefined,\n    recurse = true\n): number | undefined => {\n    const nextIndex = getNextIndexFromKeycode(event, options.length, activeIndex);\n\n    if (nextIndex !== undefined) {\n        if (nextIndex === activeIndex) {\n            return activeIndex;\n        } else if (options.item(nextIndex) && isSkippableItem(options.item(nextIndex))) {\n            // check in the other direction if the first or last item is disabled,\n            // but prevent infinite loops if all elements are disabled by disabling recursion\n            if (recurse) {\n                if (nextIndex === 0) {\n                    return getNextEnabledItem(\n                        new KeyboardEvent(event.type, { ...(event as any), key: 'ArrowDown' }) as any,\n                        options,\n                        nextIndex,\n                        false\n                    );\n                } else if (nextIndex === options.length - 1) {\n                    return getNextEnabledItem(\n                        new KeyboardEvent(event.type, { ...(event as any), key: 'ArrowUp' }) as any,\n                        options,\n                        nextIndex,\n                        false\n                    );\n                }\n            }\n\n            return getNextEnabledItem(event, options, nextIndex, recurse);\n        }\n    }\n\n    return nextIndex;\n};\n\nconst isSkippableItem = (element: Element) => {\n    return (\n        element.getAttribute('role') === 'presentation' ||\n        !!element.hasAttribute('disabled') ||\n        !!element.getAttribute('aria-disabled') ||\n        !!element.getAttribute('aria-hidden')\n    );\n};\n"],"names":["getOptionsFromCollection","collection","selector","querySelectorAll","Root","React","forwardRef","CollectionRoot","props","ref","querySelector","tabIndex","otherProps","internalRef","useMergedRef","activeIndex","setActiveIndex","useState","setActiveOption","index","option","_collection$querySele","removeAttribute","setAttribute","scrollIntoView","block","setActiveIndexByElement","useCallback","current","matches","options","nextActiveIndex","Array","from","indexOf","useEffect","length","selected","firstSelected","item","selectedIndex","children","handleClick","event","target","currentTarget","handleKeyDown","onKeyDown","isDefaultPrevented","isAriaDirectionKey","preventDefault","stopPropagation","getNextEnabledItem","undefined","_options$item","dispatchEvent","createCustomKeyboardEvent","onClick","getNextIndexFromKeycode","key","recurse","nextIndex","isSkippableItem","KeyboardEvent","type","element","getAttribute","hasAttribute"],"mappings":"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"}

package/dist/esm/packages/taco/src/primitives/Listbox2/components/Option.js

@@ -50,6 +50,7 @@ const Option = /*#__PURE__*/React__default.forwardRef(function Listbox2Option(pr
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
     "aria-disabled": listboxDisabled || disabled ? 'true' : undefined,
     "aria-selected": selected ? 'true' : undefined,
+    key: `${value}_${String(selected)}`,
     id: id,
     onClick: handleClick,
     onKeyDown: handleKeyDown,

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

@@ -1 +1 @@
-{"version":3,"file":"Option.js","sources":["../../../../../../../../src/primitives/Listbox2/components/Option.tsx"],"sourcesContent":["import React from 'react';\nimport { useId } from '../../../hooks/useId';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport { Listbox2OptionValue } from '../types';\nimport { useListbox2Context } from './Context';\n\nexport type Listbox2OptionProps = React.HTMLAttributes<HTMLDivElement> & {\n    disabled?: boolean;\n    value: Listbox2OptionValue;\n};\n\nexport const Option = React.forwardRef<HTMLDivElement, Listbox2OptionProps>(function Listbox2Option(props, ref) {\n    const { disabled, id: nativeId, title, value, ...otherProps } = props;\n    const { disabled: listboxDisabled, readOnly: listboxReadOnly, setValue, value: currentValue } = useListbox2Context();\n    // The id name cannot start with a number, otherwise unit tests will fail when trying to querry element with such id.\n    // That's why adding prefix.\n    const id = 'option-' + useId(nativeId);\n    const selected = Array.isArray(currentValue) ? currentValue.includes(value) : currentValue === value;\n\n    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        if (disabled || listboxDisabled || listboxReadOnly) {\n            event.stopPropagation();\n            return;\n        } else {\n            setValue(value);\n        }\n\n        if (typeof props.onClick === 'function') {\n            props.onClick(event);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (disabled || listboxDisabled || listboxReadOnly) {\n            event.stopPropagation();\n            return;\n        }\n        // UX requirement: if tab key is pressed and the current option is selected then keydown event is ignored\n        else if (event.key === 'Tab' && selected) {\n            return;\n        } else if (isAriaSelectionKey(event)) {\n            setValue(value);\n        }\n\n        if (typeof props.onKeyDown === 'function') {\n            props.onKeyDown(event);\n        }\n    };\n\n    return (\n        <div\n            {...otherProps}\n            aria-disabled={listboxDisabled || disabled ? 'true' : undefined}\n            aria-selected={selected ? 'true' : undefined}\n            id={id}\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            ref={ref}\n            role=\"option\"\n        />\n    );\n});\n"],"names":["Option","React","forwardRef","Listbox2Option","props","ref","disabled","id","nativeId","title","value","otherProps","listboxDisabled","readOnly","listboxReadOnly","setValue","currentValue","useListbox2Context","useId","selected","Array","isArray","includes","handleClick","event","stopPropagation","onClick","handleKeyDown","key","isAriaSelectionKey","onKeyDown","undefined","role"],"mappings":";;;;;MAWaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAsC,SAASC,cAAcA,CAACC,KAAK,EAAEC,GAAG;EAC1G,MAAM;IAAEC,QAAQ;IAAEC,EAAE,EAAEC,QAAQ;IAAEC,KAAK;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGP,KAAK;EACrE,MAAM;IAAEE,QAAQ,EAAEM,eAAe;IAAEC,QAAQ,EAAEC,eAAe;IAAEC,QAAQ;IAAEL,KAAK,EAAEM;GAAc,GAAGC,kBAAkB,EAAE;;;EAGpH,MAAMV,EAAE,GAAG,SAAS,GAAGW,KAAK,CAACV,QAAQ,CAAC;EACtC,MAAMW,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAACL,YAAY,CAAC,GAAGA,YAAY,CAACM,QAAQ,CAACZ,KAAK,CAAC,GAAGM,YAAY,KAAKN,KAAK;EAEpG,MAAMa,WAAW,GAAIC,KAAuC;IACxD,IAAIlB,QAAQ,IAAIM,eAAe,IAAIE,eAAe,EAAE;MAChDU,KAAK,CAACC,eAAe,EAAE;MACvB;KACH,MAAM;MACHV,QAAQ,CAACL,KAAK,CAAC;;IAGnB,IAAI,OAAON,KAAK,CAACsB,OAAO,KAAK,UAAU,EAAE;MACrCtB,KAAK,CAACsB,OAAO,CAACF,KAAK,CAAC;;GAE3B;EAED,MAAMG,aAAa,GAAIH,KAA0C;IAC7D,IAAIlB,QAAQ,IAAIM,eAAe,IAAIE,eAAe,EAAE;MAChDU,KAAK,CAACC,eAAe,EAAE;MACvB;;;SAGC,IAAID,KAAK,CAACI,GAAG,KAAK,KAAK,IAAIT,QAAQ,EAAE;MACtC;KACH,MAAM,IAAIU,kBAAkB,CAACL,KAAK,CAAC,EAAE;MAClCT,QAAQ,CAACL,KAAK,CAAC;;IAGnB,IAAI,OAAON,KAAK,CAAC0B,SAAS,KAAK,UAAU,EAAE;MACvC1B,KAAK,CAAC0B,SAAS,CAACN,KAAK,CAAC;;GAE7B;EAED,oBACIvB,sDACQU,UAAU;qBACCC,eAAe,IAAIN,QAAQ,GAAG,MAAM,GAAGyB,SAAS;qBAChDZ,QAAQ,GAAG,MAAM,GAAGY,SAAS;IAC5CxB,EAAE,EAAEA,EAAE;IACNmB,OAAO,EAAEH,WAAW;IACpBO,SAAS,EAAEH,aAAa;IACxBtB,GAAG,EAAEA,GAAG;IACR2B,IAAI,EAAC;KACP;AAEV,CAAC;;;;"}
+{"version":3,"file":"Option.js","sources":["../../../../../../../../src/primitives/Listbox2/components/Option.tsx"],"sourcesContent":["import React from 'react';\nimport { useId } from '../../../hooks/useId';\nimport { isAriaSelectionKey } from '../../../utils/aria';\nimport { Listbox2OptionValue } from '../types';\nimport { useListbox2Context } from './Context';\n\nexport type Listbox2OptionProps = React.HTMLAttributes<HTMLDivElement> & {\n    disabled?: boolean;\n    value: Listbox2OptionValue;\n};\n\nexport const Option = React.forwardRef<HTMLDivElement, Listbox2OptionProps>(function Listbox2Option(props, ref) {\n    const { disabled, id: nativeId, title, value, ...otherProps } = props;\n    const { disabled: listboxDisabled, readOnly: listboxReadOnly, setValue, value: currentValue } = useListbox2Context();\n    // The id name cannot start with a number, otherwise unit tests will fail when trying to querry element with such id.\n    // That's why adding prefix.\n    const id = 'option-' + useId(nativeId);\n    const selected = Array.isArray(currentValue) ? currentValue.includes(value) : currentValue === value;\n\n    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        if (disabled || listboxDisabled || listboxReadOnly) {\n            event.stopPropagation();\n            return;\n        } else {\n            setValue(value);\n        }\n\n        if (typeof props.onClick === 'function') {\n            props.onClick(event);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (disabled || listboxDisabled || listboxReadOnly) {\n            event.stopPropagation();\n            return;\n        }\n        // UX requirement: if tab key is pressed and the current option is selected then keydown event is ignored\n        else if (event.key === 'Tab' && selected) {\n            return;\n        } else if (isAriaSelectionKey(event)) {\n            setValue(value);\n        }\n\n        if (typeof props.onKeyDown === 'function') {\n            props.onKeyDown(event);\n        }\n    };\n\n    return (\n        <div\n            {...otherProps}\n            aria-disabled={listboxDisabled || disabled ? 'true' : undefined}\n            aria-selected={selected ? 'true' : undefined}\n            key={`${value}_${String(selected)}`}\n            id={id}\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            ref={ref}\n            role=\"option\"\n        />\n    );\n});\n"],"names":["Option","React","forwardRef","Listbox2Option","props","ref","disabled","id","nativeId","title","value","otherProps","listboxDisabled","readOnly","listboxReadOnly","setValue","currentValue","useListbox2Context","useId","selected","Array","isArray","includes","handleClick","event","stopPropagation","onClick","handleKeyDown","key","isAriaSelectionKey","onKeyDown","undefined","String","role"],"mappings":";;;;;MAWaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAsC,SAASC,cAAcA,CAACC,KAAK,EAAEC,GAAG;EAC1G,MAAM;IAAEC,QAAQ;IAAEC,EAAE,EAAEC,QAAQ;IAAEC,KAAK;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGP,KAAK;EACrE,MAAM;IAAEE,QAAQ,EAAEM,eAAe;IAAEC,QAAQ,EAAEC,eAAe;IAAEC,QAAQ;IAAEL,KAAK,EAAEM;GAAc,GAAGC,kBAAkB,EAAE;;;EAGpH,MAAMV,EAAE,GAAG,SAAS,GAAGW,KAAK,CAACV,QAAQ,CAAC;EACtC,MAAMW,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAACL,YAAY,CAAC,GAAGA,YAAY,CAACM,QAAQ,CAACZ,KAAK,CAAC,GAAGM,YAAY,KAAKN,KAAK;EAEpG,MAAMa,WAAW,GAAIC,KAAuC;IACxD,IAAIlB,QAAQ,IAAIM,eAAe,IAAIE,eAAe,EAAE;MAChDU,KAAK,CAACC,eAAe,EAAE;MACvB;KACH,MAAM;MACHV,QAAQ,CAACL,KAAK,CAAC;;IAGnB,IAAI,OAAON,KAAK,CAACsB,OAAO,KAAK,UAAU,EAAE;MACrCtB,KAAK,CAACsB,OAAO,CAACF,KAAK,CAAC;;GAE3B;EAED,MAAMG,aAAa,GAAIH,KAA0C;IAC7D,IAAIlB,QAAQ,IAAIM,eAAe,IAAIE,eAAe,EAAE;MAChDU,KAAK,CAACC,eAAe,EAAE;MACvB;;;SAGC,IAAID,KAAK,CAACI,GAAG,KAAK,KAAK,IAAIT,QAAQ,EAAE;MACtC;KACH,MAAM,IAAIU,kBAAkB,CAACL,KAAK,CAAC,EAAE;MAClCT,QAAQ,CAACL,KAAK,CAAC;;IAGnB,IAAI,OAAON,KAAK,CAAC0B,SAAS,KAAK,UAAU,EAAE;MACvC1B,KAAK,CAAC0B,SAAS,CAACN,KAAK,CAAC;;GAE7B;EAED,oBACIvB,sDACQU,UAAU;qBACCC,eAAe,IAAIN,QAAQ,GAAG,MAAM,GAAGyB,SAAS;qBAChDZ,QAAQ,GAAG,MAAM,GAAGY,SAAS;IAC5CH,GAAG,EAAE,GAAGlB,KAAK,IAAIsB,MAAM,CAACb,QAAQ,CAAC,EAAE;IACnCZ,EAAE,EAAEA,EAAE;IACNmB,OAAO,EAAEH,WAAW;IACpBO,SAAS,EAAEH,aAAa;IACxBtB,GAAG,EAAEA,GAAG;IACR4B,IAAI,EAAC;KACP;AAEV,CAAC;;;;"}

package/dist/esm/packages/taco/src/primitives/Table/useTableManager/features/useTableSearch.js

@@ -12,10 +12,10 @@ function useTableSearch(isEnabled = false, defaultEnableGlobalFilter = false) {
     // react-table doesn't re-render when options.enableGlobalFilter changes, so for now we force it
     const currentFilter = instance.getState().globalFilter;
     if (currentFilter) {
-      setTimeout(() => {
-        instance.setGlobalFilter('');
+      instance.resetGlobalFilter(true);
+      window.requestAnimationFrame(() => {
         instance.setGlobalFilter(currentFilter);
-      }, 1);
+      });
     }
   }
   // highlighting

package/dist/esm/packages/taco/src/primitives/Table/useTableManager/features/useTableSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableSearch.js","sources":["../../../../../../../../../src/primitives/Table/useTableManager/features/useTableSearch.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable } from '@tanstack/react-table';\n\n/*\n    Search has two behaviours:\n    - Highlighting search results, this is custom and only uses the state part of globalFilter (to store the search query)\n    - Filtering of results, this is essentially the built in filtering, and relies on enableGlobalFilter being on or off\n*/\nexport function useTableSearch(isEnabled = false, defaultEnableGlobalFilter = false) {\n    const [enableGlobalFilter, _setEnableGlobalFilter] = React.useState<boolean>(defaultEnableGlobalFilter);\n\n    function setEnableGlobalFilter<TType = unknown>(enabled: boolean, instance: ReactTable<TType>) {\n        _setEnableGlobalFilter(enabled);\n\n        // react-table doesn't re-render when options.enableGlobalFilter changes, so for now we force it\n        const currentFilter = instance.getState().globalFilter;\n\n        if (currentFilter) {\n            setTimeout(() => {\n                instance.setGlobalFilter('');\n                instance.setGlobalFilter(currentFilter);\n            }, 1);\n        }\n    }\n\n    // highlighting\n    const [highlightedColumnIndexes, setHighlightedColumnIndexes] = React.useState<number[][]>([]);\n    const [currentHighlightColumnIndex, setCurrentHighlightColumnIndex] = React.useState<number | undefined>(undefined);\n\n    return {\n        isEnabled,\n        // filtering - built-in\n        enableGlobalFilter,\n        setEnableGlobalFilter,\n        // highlighting - custom\n        highlightedColumnIndexes,\n        setHighlightedColumnIndexes,\n        currentHighlightColumnIndex,\n        setCurrentHighlightColumnIndex,\n    };\n}\n"],"names":["useTableSearch","isEnabled","defaultEnableGlobalFilter","enableGlobalFilter","_setEnableGlobalFilter","React","useState","setEnableGlobalFilter","enabled","instance","currentFilter","getState","globalFilter","setTimeout","setGlobalFilter","highlightedColumnIndexes","setHighlightedColumnIndexes","currentHighlightColumnIndex","setCurrentHighlightColumnIndex","undefined"],"mappings":";;AAGA;;;;;SAKgBA,cAAcA,CAACC,SAAS,GAAG,KAAK,EAAEC,yBAAyB,GAAG,KAAK;EAC/E,MAAM,CAACC,kBAAkB,EAAEC,sBAAsB,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAUJ,yBAAyB,CAAC;EAEvG,SAASK,qBAAqBA,CAAkBC,OAAgB,EAAEC,QAA2B;IACzFL,sBAAsB,CAACI,OAAO,CAAC;;IAG/B,MAAME,aAAa,GAAGD,QAAQ,CAACE,QAAQ,EAAE,CAACC,YAAY;IAEtD,IAAIF,aAAa,EAAE;MACfG,UAAU,CAAC;QACPJ,QAAQ,CAACK,eAAe,CAAC,EAAE,CAAC;QAC5BL,QAAQ,CAACK,eAAe,CAACJ,aAAa,CAAC;OAC1C,EAAE,CAAC,CAAC;;;;EAKb,MAAM,CAACK,wBAAwB,EAAEC,2BAA2B,CAAC,GAAGX,cAAK,CAACC,QAAQ,CAAa,EAAE,CAAC;EAC9F,MAAM,CAACW,2BAA2B,EAAEC,8BAA8B,CAAC,GAAGb,cAAK,CAACC,QAAQ,CAAqBa,SAAS,CAAC;EAEnH,OAAO;IACHlB,SAAS;;IAETE,kBAAkB;IAClBI,qBAAqB;;IAErBQ,wBAAwB;IACxBC,2BAA2B;IAC3BC,2BAA2B;IAC3BC;GACH;AACL;;;;"}
+{"version":3,"file":"useTableSearch.js","sources":["../../../../../../../../../src/primitives/Table/useTableManager/features/useTableSearch.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable } from '@tanstack/react-table';\n\n/*\n    Search has two behaviours:\n    - Highlighting search results, this is custom and only uses the state part of globalFilter (to store the search query)\n    - Filtering of results, this is essentially the built in filtering, and relies on enableGlobalFilter being on or off\n*/\nexport function useTableSearch(isEnabled = false, defaultEnableGlobalFilter = false) {\n    const [enableGlobalFilter, _setEnableGlobalFilter] = React.useState<boolean>(defaultEnableGlobalFilter);\n\n    function setEnableGlobalFilter<TType = unknown>(enabled: boolean, instance: ReactTable<TType>) {\n        _setEnableGlobalFilter(enabled);\n\n        // react-table doesn't re-render when options.enableGlobalFilter changes, so for now we force it\n        const currentFilter = instance.getState().globalFilter;\n\n        if (currentFilter) {\n            instance.resetGlobalFilter(true);\n\n            window.requestAnimationFrame(() => {\n                instance.setGlobalFilter(currentFilter);\n            });\n        }\n    }\n\n    // highlighting\n    const [highlightedColumnIndexes, setHighlightedColumnIndexes] = React.useState<number[][]>([]);\n    const [currentHighlightColumnIndex, setCurrentHighlightColumnIndex] = React.useState<number | undefined>(undefined);\n\n    return {\n        isEnabled,\n        // filtering - built-in\n        enableGlobalFilter,\n        setEnableGlobalFilter,\n        // highlighting - custom\n        highlightedColumnIndexes,\n        setHighlightedColumnIndexes,\n        currentHighlightColumnIndex,\n        setCurrentHighlightColumnIndex,\n    };\n}\n"],"names":["useTableSearch","isEnabled","defaultEnableGlobalFilter","enableGlobalFilter","_setEnableGlobalFilter","React","useState","setEnableGlobalFilter","enabled","instance","currentFilter","getState","globalFilter","resetGlobalFilter","window","requestAnimationFrame","setGlobalFilter","highlightedColumnIndexes","setHighlightedColumnIndexes","currentHighlightColumnIndex","setCurrentHighlightColumnIndex","undefined"],"mappings":";;AAGA;;;;;SAKgBA,cAAcA,CAACC,SAAS,GAAG,KAAK,EAAEC,yBAAyB,GAAG,KAAK;EAC/E,MAAM,CAACC,kBAAkB,EAAEC,sBAAsB,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAUJ,yBAAyB,CAAC;EAEvG,SAASK,qBAAqBA,CAAkBC,OAAgB,EAAEC,QAA2B;IACzFL,sBAAsB,CAACI,OAAO,CAAC;;IAG/B,MAAME,aAAa,GAAGD,QAAQ,CAACE,QAAQ,EAAE,CAACC,YAAY;IAEtD,IAAIF,aAAa,EAAE;MACfD,QAAQ,CAACI,iBAAiB,CAAC,IAAI,CAAC;MAEhCC,MAAM,CAACC,qBAAqB,CAAC;QACzBN,QAAQ,CAACO,eAAe,CAACN,aAAa,CAAC;OAC1C,CAAC;;;;EAKV,MAAM,CAACO,wBAAwB,EAAEC,2BAA2B,CAAC,GAAGb,cAAK,CAACC,QAAQ,CAAa,EAAE,CAAC;EAC9F,MAAM,CAACa,2BAA2B,EAAEC,8BAA8B,CAAC,GAAGf,cAAK,CAACC,QAAQ,CAAqBe,SAAS,CAAC;EAEnH,OAAO;IACHpB,SAAS;;IAETE,kBAAkB;IAClBI,qBAAqB;;IAErBU,wBAAwB;IACxBC,2BAA2B;IAC3BC,2BAA2B;IAC3BC;GACH;AACL;;;;"}

package/dist/esm/packages/taco/src/utils/dom.js

@@ -47,10 +47,11 @@ function isElementInsideOrTriggeredFromContainer(element, container) {
   var _getOverlaySelector, _element$closest;
   const selector = (_getOverlaySelector = getOverlaySelector(element)) !== null && _getOverlaySelector !== void 0 ? _getOverlaySelector : getOverlaySelector((_element$closest = element === null || element === void 0 ? void 0 : element.closest('[role=dialog],[role=menu]')) !== null && _element$closest !== void 0 ? _element$closest : null);
   if (selector) {
-    if (container !== null && container !== void 0 && container.querySelector(selector)) {
+    const escapedSelector = CSS.escape(selector);
+    if (container !== null && container !== void 0 && container.querySelector(escapedSelector)) {
       return true;
     }
-    const elementInDocument = document.querySelector(selector);
+    const elementInDocument = document.querySelector(escapedSelector);
     // if the element does exist, see if it is itself connected to somethng that was triggered from the container
     if (elementInDocument) {
       return isElementInsideOrTriggeredFromContainer(elementInDocument, container);

package/dist/esm/packages/taco/src/utils/dom.js.map

@@ -1 +1 @@
-{"version":3,"file":"dom.js","sources":["../../../../../../src/utils/dom.ts"],"sourcesContent":["// taken from react-aria\nconst FOCUSABLE_ELEMENTS = [\n    'input:not([disabled]):not([type=hidden])',\n    'select:not([disabled])',\n    'textarea:not([disabled])',\n    'button:not([disabled])',\n    'a[href]',\n    'area[href]',\n    'summary',\n    'iframe',\n    'object',\n    'embed',\n    'audio[controls]',\n    'video[controls]',\n    '[contenteditable]',\n    '[tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n    'details:not([disabled])',\n    'summary:not(:disabled)',\n];\n\nexport const hasFocusableElement = (element: HTMLElement | null) => {\n    if (!element) {\n        return null;\n    }\n\n    return !!element.querySelector(FOCUSABLE_ELEMENTS.join(','));\n};\n\nexport const isOverflowing = (element: HTMLElement | null) =>\n    element !== null ? element.scrollWidth > element.offsetWidth : false;\n\nexport const getIndexOfFirstChildOverflowingParent = (element: HTMLElement, overscan = 0) => {\n    let index = 0;\n    let boundaryChildIndex: number | null = null;\n    const clientRect = element.getBoundingClientRect();\n\n    for (const child of Array.from(element.children)) {\n        const right = child.getBoundingClientRect().right - clientRect.left;\n        const width = clientRect.width - overscan;\n\n        if (right > width) {\n            boundaryChildIndex = index;\n            break;\n        }\n        index++;\n    }\n\n    return boundaryChildIndex;\n};\n\nexport const getNextFocussableElement = (currentElement: HTMLElement | null) => {\n    if (!currentElement) {\n        return null;\n    }\n\n    const focussableElements = [...document.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS.join(','))];\n    const currentElementIndex = focussableElements.indexOf(currentElement);\n\n    // If the currentElement is not in the focussable elements list or it is the last element\n    if (currentElementIndex !== -1 && currentElementIndex === focussableElements.length - 1) {\n        return null;\n    }\n\n    return focussableElements[currentElementIndex + 1];\n};\n\nconst getOverlaySelector = (element: Element | null) => {\n    switch (element?.getAttribute('role')) {\n        case 'dialog':\n            return `[aria-controls='${element.id}']`;\n\n        case 'menu':\n            return `#${element.getAttribute('aria-labelledby')}`;\n\n        default:\n            return undefined;\n    }\n};\n\nexport function isElementInsideOrTriggeredFromContainer(element: Element | null, container: Element | null): boolean {\n    const selector = getOverlaySelector(element) ?? getOverlaySelector(element?.closest('[role=dialog],[role=menu]') ?? null);\n\n    if (selector) {\n        if (container?.querySelector(selector)) {\n            return true;\n        }\n\n        const elementInDocument = document.querySelector(selector);\n\n        // if the element does exist, see if it is itself connected to somethng that was triggered from the container\n        if (elementInDocument) {\n            return isElementInsideOrTriggeredFromContainer(elementInDocument, container);\n        }\n\n        return false;\n    }\n\n    return !!container?.contains(element);\n}\n\nexport function isElementInsideOverlay(element: Element | null) {\n    return !!element?.closest('[role=dialog],[role=menu]');\n}\n\nexport function isSiblingElementInsideSameParentOverlay(element: Element | null, sibling: Element | null) {\n    return !!element?.closest('[role=dialog],[role=menu]')?.contains(sibling);\n}\n\nexport function isElementInteractive(element: Element | null) {\n    if (!element) {\n        return false;\n    }\n\n    return (\n        ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'].includes(element.tagName) &&\n        !(element as HTMLElement).hidden &&\n        !(element as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLButtonElement).disabled &&\n        !(element as HTMLInputElement | HTMLTextAreaElement).readOnly\n    );\n}\n\nexport function isElementInsideTable3OrReport(element: Element | null) {\n    return !!element?.closest('[data-taco^=table]');\n}\n\nexport function setDataFocusAttribute(target: Element) {\n    target.setAttribute('data-focus', 'programmatic');\n\n    const cleanup = () => {\n        target.removeAttribute('data-focus');\n        target.removeEventListener('blur', cleanup);\n    };\n\n    target.addEventListener('blur', cleanup);\n}\n"],"names":["FOCUSABLE_ELEMENTS","hasFocusableElement","element","querySelector","join","getIndexOfFirstChildOverflowingParent","overscan","index","boundaryChildIndex","clientRect","getBoundingClientRect","child","Array","from","children","right","left","width","getNextFocussableElement","currentElement","focussableElements","document","querySelectorAll","currentElementIndex","indexOf","length","getOverlaySelector","getAttribute","id","undefined","isElementInsideOrTriggeredFromContainer","container","selector","_getOverlaySelector","_element$closest","closest","elementInDocument","contains","isElementInsideOverlay","isSiblingElementInsideSameParentOverlay","sibling","_element$closest2","isElementInteractive","includes","tagName","hidden","disabled","readOnly","isElementInsideTable3OrReport","setDataFocusAttribute","target","setAttribute","cleanup","removeAttribute","removeEventListener","addEventListener"],"mappings":"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"}
+{"version":3,"file":"dom.js","sources":["../../../../../../src/utils/dom.ts"],"sourcesContent":["// taken from react-aria\nconst FOCUSABLE_ELEMENTS = [\n    'input:not([disabled]):not([type=hidden])',\n    'select:not([disabled])',\n    'textarea:not([disabled])',\n    'button:not([disabled])',\n    'a[href]',\n    'area[href]',\n    'summary',\n    'iframe',\n    'object',\n    'embed',\n    'audio[controls]',\n    'video[controls]',\n    '[contenteditable]',\n    '[tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n    'details:not([disabled])',\n    'summary:not(:disabled)',\n];\n\nexport const hasFocusableElement = (element: HTMLElement | null) => {\n    if (!element) {\n        return null;\n    }\n\n    return !!element.querySelector(FOCUSABLE_ELEMENTS.join(','));\n};\n\nexport const isOverflowing = (element: HTMLElement | null) =>\n    element !== null ? element.scrollWidth > element.offsetWidth : false;\n\nexport const getIndexOfFirstChildOverflowingParent = (element: HTMLElement, overscan = 0) => {\n    let index = 0;\n    let boundaryChildIndex: number | null = null;\n    const clientRect = element.getBoundingClientRect();\n\n    for (const child of Array.from(element.children)) {\n        const right = child.getBoundingClientRect().right - clientRect.left;\n        const width = clientRect.width - overscan;\n\n        if (right > width) {\n            boundaryChildIndex = index;\n            break;\n        }\n        index++;\n    }\n\n    return boundaryChildIndex;\n};\n\nexport const getNextFocussableElement = (currentElement: HTMLElement | null) => {\n    if (!currentElement) {\n        return null;\n    }\n\n    const focussableElements = [...document.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS.join(','))];\n    const currentElementIndex = focussableElements.indexOf(currentElement);\n\n    // If the currentElement is not in the focussable elements list or it is the last element\n    if (currentElementIndex !== -1 && currentElementIndex === focussableElements.length - 1) {\n        return null;\n    }\n\n    return focussableElements[currentElementIndex + 1];\n};\n\nconst getOverlaySelector = (element: Element | null) => {\n    switch (element?.getAttribute('role')) {\n        case 'dialog':\n            return `[aria-controls='${element.id}']`;\n\n        case 'menu':\n            return `#${element.getAttribute('aria-labelledby')}`;\n\n        default:\n            return undefined;\n    }\n};\n\nexport function isElementInsideOrTriggeredFromContainer(element: Element | null, container: Element | null): boolean {\n    const selector = getOverlaySelector(element) ?? getOverlaySelector(element?.closest('[role=dialog],[role=menu]') ?? null);\n\n    if (selector) {\n        const escapedSelector = CSS.escape(selector);\n\n        if (container?.querySelector(escapedSelector)) {\n            return true;\n        }\n\n        const elementInDocument = document.querySelector(escapedSelector);\n\n        // if the element does exist, see if it is itself connected to somethng that was triggered from the container\n        if (elementInDocument) {\n            return isElementInsideOrTriggeredFromContainer(elementInDocument, container);\n        }\n\n        return false;\n    }\n\n    return !!container?.contains(element);\n}\n\nexport function isElementInsideOverlay(element: Element | null) {\n    return !!element?.closest('[role=dialog],[role=menu]');\n}\n\nexport function isSiblingElementInsideSameParentOverlay(element: Element | null, sibling: Element | null) {\n    return !!element?.closest('[role=dialog],[role=menu]')?.contains(sibling);\n}\n\nexport function isElementInteractive(element: Element | null) {\n    if (!element) {\n        return false;\n    }\n\n    return (\n        ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL', 'OPTION'].includes(element.tagName) &&\n        !(element as HTMLElement).hidden &&\n        !(element as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLButtonElement).disabled &&\n        !(element as HTMLInputElement | HTMLTextAreaElement).readOnly\n    );\n}\n\nexport function isElementInsideTable3OrReport(element: Element | null) {\n    return !!element?.closest('[data-taco^=table]');\n}\n\nexport function setDataFocusAttribute(target: Element) {\n    target.setAttribute('data-focus', 'programmatic');\n\n    const cleanup = () => {\n        target.removeAttribute('data-focus');\n        target.removeEventListener('blur', cleanup);\n    };\n\n    target.addEventListener('blur', cleanup);\n}\n"],"names":["FOCUSABLE_ELEMENTS","hasFocusableElement","element","querySelector","join","getIndexOfFirstChildOverflowingParent","overscan","index","boundaryChildIndex","clientRect","getBoundingClientRect","child","Array","from","children","right","left","width","getNextFocussableElement","currentElement","focussableElements","document","querySelectorAll","currentElementIndex","indexOf","length","getOverlaySelector","getAttribute","id","undefined","isElementInsideOrTriggeredFromContainer","container","selector","_getOverlaySelector","_element$closest","closest","escapedSelector","CSS","escape","elementInDocument","contains","isElementInsideOverlay","isSiblingElementInsideSameParentOverlay","sibling","_element$closest2","isElementInteractive","includes","tagName","hidden","disabled","readOnly","isElementInsideTable3OrReport","setDataFocusAttribute","target","setAttribute","cleanup","removeAttribute","removeEventListener","addEventListener"],"mappings":"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"}

package/dist/primitives/Collection/components/Root.d.ts

@@ -3,7 +3,7 @@ export declare type CollectionProps = React.HTMLAttributes<HTMLDivElement> & {
     querySelector: string;
 };
 export declare type CollectionRef = HTMLDivElement & {
-    setActiveIndex: (option: HTMLDivElement) => void;
+    setActiveIndexByElement: (option: HTMLDivElement) => void;
 };
 export declare const Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     querySelector: string;

package/dist/primitives/Table/Core/components/Body/util.d.ts

@@ -1,6 +1,6 @@
 export declare function useAugmentedFocusManager(): {
-    focusPrevious: (arrowNavigation?: boolean) => import("@react-types/shared").FocusableElement;
-    focusNext: (arrowNavigation?: boolean) => import("@react-types/shared").FocusableElement;
-    focusFirst: () => import("@react-types/shared").FocusableElement;
-    focusLast: () => import("@react-types/shared").FocusableElement;
+    focusPrevious: (arrowNavigation?: boolean) => import("@react-types/shared").FocusableElement | null | undefined;
+    focusNext: (arrowNavigation?: boolean) => import("@react-types/shared").FocusableElement | null | undefined;
+    focusFirst: () => import("@react-types/shared").FocusableElement | null | undefined;
+    focusLast: () => import("@react-types/shared").FocusableElement | null | undefined;
 };

package/dist/taco.cjs.development.js

@@ -4217,10 +4217,11 @@ function isElementInsideOrTriggeredFromContainer(element, container) {
   var _getOverlaySelector, _element$closest;
   const selector = (_getOverlaySelector = getOverlaySelector(element)) !== null && _getOverlaySelector !== void 0 ? _getOverlaySelector : getOverlaySelector((_element$closest = element === null || element === void 0 ? void 0 : element.closest('[role=dialog],[role=menu]')) !== null && _element$closest !== void 0 ? _element$closest : null);
   if (selector) {
-    if (container !== null && container !== void 0 && container.querySelector(selector)) {
+    const escapedSelector = CSS.escape(selector);
+    if (container !== null && container !== void 0 && container.querySelector(escapedSelector)) {
       return true;
     }
-    const elementInDocument = document.querySelector(selector);
+    const elementInDocument = document.querySelector(escapedSelector);
     // if the element does exist, see if it is itself connected to somethng that was triggered from the container
     if (elementInDocument) {
       return isElementInsideOrTriggeredFromContainer(elementInDocument, container);
@@ -10955,10 +10956,10 @@ function useTableSearch(isEnabled = false, defaultEnableGlobalFilter = false) {
     // react-table doesn't re-render when options.enableGlobalFilter changes, so for now we force it
     const currentFilter = instance.getState().globalFilter;
     if (currentFilter) {
-      setTimeout(() => {
-        instance.setGlobalFilter('');
+      instance.resetGlobalFilter(true);
+      window.requestAnimationFrame(() => {
         instance.setGlobalFilter(currentFilter);
-      }, 1);
+      });
     }
   }
   // highlighting
@@ -14405,7 +14406,6 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
   } = props;
   const internalRef = useMergedRef(ref);
   const [activeIndex, setActiveIndex] = React__default.useState();
-  const lastLengthRef = React__default.useRef(0);
   const setActiveOption = (index, collection, option) => {
     var _collection$querySele;
     (_collection$querySele = collection.querySelector(`[aria-current]`)) === null || _collection$querySele === void 0 ? void 0 : _collection$querySele.removeAttribute('aria-current');
@@ -14428,13 +14428,13 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
   }, [internalRef.current, querySelector]);
   React__default.useEffect(() => {
     if (internalRef.current) {
-      internalRef.current.setActiveIndex = setActiveIndexByElement;
+      internalRef.current.setActiveIndexByElement = setActiveIndexByElement;
     }
   }, [internalRef.current]);
   React__default.useEffect(() => {
     if (internalRef.current) {
       const options = getOptionsFromCollection(internalRef.current, querySelector);
-      if (options.length && options.length !== lastLengthRef.current) {
+      if (options.length) {
         let selected = internalRef.current.querySelectorAll(`[aria-current="true"]`);
         if (selected.length === 0) {
           selected = internalRef.current.querySelectorAll(`[aria-selected]`);
@@ -14452,7 +14452,6 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
           setActiveOption(0, internalRef.current, options.item(0));
         }
       }
-      lastLengthRef.current = options.length;
     }
   }, [props.children]);
   const handleClick = event => {
@@ -14657,6 +14656,7 @@ const Option = /*#__PURE__*/React__default.forwardRef(function Listbox2Option(pr
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
     "aria-disabled": listboxDisabled || disabled ? 'true' : undefined,
     "aria-selected": selected ? 'true' : undefined,
+    key: `${value}_${String(selected)}`,
     id: id,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
@@ -14750,6 +14750,16 @@ const getFontSize = fontSize => {
       return 'text-sm';
   }
 };
+const filterOption = (child, searchQuery) => {
+  var _child$props$textValu, _child$props$descript;
+  if ((_child$props$textValu = child.props.textValue) !== null && _child$props$textValu !== void 0 && _child$props$textValu.toLowerCase().includes(searchQuery.toLowerCase())) {
+    return true;
+  }
+  if ((_child$props$descript = child.props.description) !== null && _child$props$descript !== void 0 && _child$props$descript.toLowerCase().includes(searchQuery.toLowerCase())) {
+    return true;
+  }
+  return String(child.props.children).toLowerCase().includes(searchQuery.toLowerCase());
+};
 
 const Select2Context = /*#__PURE__*/React__default.createContext({});
 const useSelect2Context = () => React__default.useContext(Select2Context);
@@ -15020,7 +15030,7 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
     onClick: event => {
       var _listboxRef$current;
       event.stopPropagation();
-      listboxRef === null || listboxRef === void 0 ? void 0 : (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 ? void 0 : _listboxRef$current.setActiveIndex(event.currentTarget.parentElement);
+      listboxRef === null || listboxRef === void 0 ? void 0 : (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 ? void 0 : _listboxRef$current.setActiveIndexByElement(event.currentTarget.parentElement);
     },
     popover: popover,
     tabIndex: -1
@@ -15435,7 +15445,7 @@ const Search$2 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
     }
   };
   return /*#__PURE__*/React__default.createElement(Field, {
-    className: cn('mx-1.5 mb-1.5 !min-h-fit ', {
+    className: cn('mx-1.5 mb-1.5 !min-h-fit', {
       '!pb-0': !validationError
     }),
     invalid: !!validationError,
@@ -15501,16 +15511,6 @@ const useChildren = ({
     setSearchQuery
   };
 };
-const filterOption = (child, searchQuery) => {
-  var _child$props$textValu, _child$props$descript;
-  if ((_child$props$textValu = child.props.textValue) !== null && _child$props$textValu !== void 0 && _child$props$textValu.toLowerCase().includes(searchQuery.toLowerCase())) {
-    return true;
-  }
-  if ((_child$props$descript = child.props.description) !== null && _child$props$descript !== void 0 && _child$props$descript.toLowerCase().includes(searchQuery.toLowerCase())) {
-    return true;
-  }
-  return String(child.props.children).toLowerCase().includes(searchQuery.toLowerCase());
-};
 
 const getNextColor = options => {
   const occurrences = AVAILABLE_COLORS.reduce((prev, color) => {
@@ -15727,6 +15727,26 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     createDialog,
     createTriggerText
   };
+  const hasInlineCreation = onCreate && !createDialog;
+  const hasSearch = flattenedChildren.length > 5 || hasInlineCreation;
+  const visibleChildren = searchQuery === '' ? initialChildren : filteredChildren;
+  const selectOptions = searchQuery === '' ? flattenedChildren.map(child => child.props.value) : filteredChildren.map(child => isGroup(child) ? Array.isArray(child.props.children) && child.props.children.map(subChild => subChild.props.value) : child.props.value).flatMap(c => c) || [];
+  // support typeahead functionality when search isn't available
+  const queryTimeoutRef = React__default.useRef('');
+  const typeahead = debounce(function () {
+    if (!queryTimeoutRef.current) {
+      return;
+    }
+    const matchedValueIndex = visibleChildren.findIndex(child => filterOption(child, queryTimeoutRef.current));
+    if (matchedValueIndex > -1) {
+      setValue(selectOptions[matchedValueIndex]);
+    }
+    queryTimeoutRef.current = '';
+  }, 200);
+  const setValueIfMatched = query => {
+    queryTimeoutRef.current = queryTimeoutRef.current + query;
+    typeahead();
+  };
   const handleKeyDown = event => {
     var _listboxRef$current;
     if (open) {
@@ -15735,6 +15755,9 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       return;
     } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {
       setOpen(true);
+      if (!hasSearch) {
+        setValueIfMatched(event.key);
+      }
     }
     // the focus should always remain on the input, so we forward events on to the listbox
     (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 ? void 0 : _listboxRef$current.dispatchEvent(createCustomKeyboardEvent(event));
@@ -15761,6 +15784,9 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     if (isAriaDirectionKey(event)) {
       setShouldPauseHoverState(true);
     }
+    if (!hasSearch && /^[a-z0-9]$/i.test(event.key)) {
+      setValueIfMatched(event.key);
+    }
   };
   const handleCloseAutoFocus = event => {
     event.preventDefault();
@@ -15778,7 +15804,6 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
     }
   };
-  const selectOptions = searchQuery === '' ? flattenedChildren.map(child => child.props.value) : filteredChildren.map(child => isGroup(child) ? Array.isArray(child.props.children) && child.props.children.map(subChild => subChild.props.value) : child.props.value).flatMap(c => c) || [];
   const areAllSelected = Array.isArray(value) && selectOptions.every(option => value.includes(option));
   const selectAllText = React__default.useMemo(() => {
     if (searchQuery === '') {
@@ -15810,8 +15835,6 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       setValue(nextValue);
     }
   };
-  const hasInlineCreation = onCreate && !createDialog;
-  const hasSearch = flattenedChildren.length > 5 || hasInlineCreation;
   const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md ', {
     'focus-within:yt-focus': !hasSearch,
     'outline-none': hasSearch
@@ -15878,7 +15901,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     ref: listboxRef,
     setValue: setValue,
     value: value
-  }, searchQuery === '' ? (/*#__PURE__*/React__default.createElement(Collection$1, null, initialChildren)) : (/*#__PURE__*/React__default.createElement(Collection$1, null, filteredChildren)), onCreate ? /*#__PURE__*/React__default.createElement(Create, {
+  }, /*#__PURE__*/React__default.createElement(Collection$1, null, visibleChildren), onCreate ? /*#__PURE__*/React__default.createElement(Create, {
     onCreate: onCreate,
     options: flattenedChildren
   }) : null))))), /*#__PURE__*/React__default.createElement(ControlledHiddenField, {
@@ -19438,7 +19461,7 @@ function SaveStatus(props) {
   React__default.useEffect(() => {
     let timeout;
     if (status === 'complete') {
-      timeout = setTimeout(() => {
+      timeout = window.setTimeout(() => {
         tableMeta.editing.setRowSaveStatus(rowId, undefined);
       }, COMPLETE_INDICATOR_DELAY);
     }
@@ -20572,9 +20595,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);
 };
 
 const Page = /*#__PURE__*/React__default.forwardRef(function LayoutPage(props, ref) {