@economic/taco 2.44.0 → 2.44.2

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":";;;;;AAiBA,MAAMA,wBAAwB,GAAGA,CAACC,UAA0B,EAAEC,QAAgB,KAC1ED,UAAU,CAACE,gBAAgB,CAACD,QAAQ,CAAC;AAEzC;AACA;AACA;MACaE,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAiC,SAASC,cAAcA,CAACC,KAAK,EAAEC,GAAG;EACnG,MAAM;IAAEC,aAAa;IAAEC,QAAQ,GAAG,CAAC;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAC5D,MAAMK,WAAW,GAAGC,YAAY,CAAgBL,GAAG,CAAC;EACpD,MAAM,CAACM,WAAW,EAAEC,cAAc,CAAC,GAAGX,cAAK,CAACY,QAAQ,EAAsB;EAC1E,MAAMC,aAAa,GAAGb,cAAK,CAACc,MAAM,CAAC,CAAC,CAAC;EAErC,MAAMC,eAAe,GAAGA,CAACC,KAAa,EAAEpB,UAA0B,EAAEqB,MAAe;;IAC/E,CAAAC,qBAAA,GAAAtB,UAAU,CAACS,aAAa,CAAC,gBAAgB,CAAC,cAAAa,qBAAA,uBAA1CA,qBAAA,CAA4CC,eAAe,CAAC,cAAc,CAAC;IAC3EF,MAAM,CAACG,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC;IAC3CH,MAAM,CAACI,cAAc,CAAC;MAAEC,KAAK,EAAE;KAAW,CAAC;IAC3CX,cAAc,CAACK,KAAK,CAAC;GACxB;EAED,MAAMO,uBAAuB,GAAGvB,cAAK,CAACwB,WAAW,CAC5CP,MAAsB;IACnB,IAAIT,WAAW,CAACiB,OAAO,EAAE;MACrB,IAAIR,MAAM,CAACS,OAAO,CAACrB,aAAa,CAAC,EAAE;QAC/B,MAAMsB,OAAO,GAAGhC,wBAAwB,CAACa,WAAW,CAACiB,OAAO,EAAEpB,aAAa,CAAC;QAC5E,MAAMuB,eAAe,GAAGC,KAAK,CAACC,IAAI,CAACH,OAAO,CAAC,CAACI,OAAO,CAACd,MAAM,CAAC;QAE3D,IAAIW,eAAe,GAAG,CAAC,CAAC,EAAE;UACtBb,eAAe,CAACa,eAAe,EAAEpB,WAAW,CAACiB,OAAO,EAAER,MAAM,CAAC;;;;GAI5E,EACD,CAACT,WAAW,CAACiB,OAAO,EAAEpB,aAAa,CAAC,CACvC;EAEDL,cAAK,CAACgC,SAAS,CAAC;IACZ,IAAIxB,WAAW,CAACiB,OAAO,EAAE;MACrBjB,WAAW,CAACiB,OAAO,CAACd,cAAc,GAAGY,uBAAuB;;GAEnE,EAAE,CAACf,WAAW,CAACiB,OAAO,CAAC,CAAC;EAEzBzB,cAAK,CAACgC,SAAS,CAAC;IACZ,IAAIxB,WAAW,CAACiB,OAAO,EAAE;MACrB,MAAME,OAAO,GAAGhC,wBAAwB,CAACa,WAAW,CAACiB,OAAO,EAAEpB,aAAa,CAAC;MAE5E,IAAIsB,OAAO,CAACM,MAAM,IAAIN,OAAO,CAACM,MAAM,KAAKpB,aAAa,CAACY,OAAO,EAAE;QAC5D,IAAIS,QAAQ,GAAG1B,WAAW,CAACiB,OAAO,CAAC3B,gBAAgB,CAAC,uBAAuB,CAAC;QAE5E,IAAIoC,QAAQ,CAACD,MAAM,KAAK,CAAC,EAAE;UACvBC,QAAQ,GAAG1B,WAAW,CAACiB,OAAO,CAAC3B,gBAAgB,CAAC,iBAAiB,CAAC;;QAGtE,IAAIoC,QAAQ,CAACD,MAAM,KAAK,CAAC,EAAE;UACvB,IAAIN,OAAO,EAAE;YACT,MAAMQ,aAAa,GAAGD,QAAQ,CAACE,IAAI,CAAC,CAAC,CAAC;YACtC,MAAMC,aAAa,GAAGR,KAAK,CAACC,IAAI,CAACH,OAAO,CAAC,CAACI,OAAO,CAACI,aAAa,CAAC;YAEhE,IAAIE,aAAa,GAAG,CAAC,CAAC,EAAE;cACpBtB,eAAe,CAACsB,aAAa,EAAE7B,WAAW,CAACiB,OAAO,EAAEU,aAAa,CAAC;;;SAG7E,MAAM;;UAEHpB,eAAe,CAAC,CAAC,EAAEP,WAAW,CAACiB,OAAO,EAAEE,OAAO,CAACS,IAAI,CAAC,CAAC,CAAC,CAAC;;;MAIhEvB,aAAa,CAACY,OAAO,GAAGE,OAAO,CAACM,MAAM;;GAE7C,EAAE,CAAC9B,KAAK,CAACmC,QAAQ,CAAC,CAAC;EAEpB,MAAMC,WAAW,GAAIC,KAAuC;IACxD,MAAMvB,MAAM,GAAGuB,KAAK,CAACC,MAAqB;IAE1C,IAAIxB,MAAM,CAACS,OAAO,CAACrB,aAAa,CAAC,EAAE;MAC/B,MAAMsB,OAAO,GAAGhC,wBAAwB,CAAC6C,KAAK,CAACE,aAAa,EAAErC,aAAa,CAAC;MAC5E,MAAMuB,eAAe,GAAGC,KAAK,CAACC,IAAI,CAACH,OAAO,CAAC,CAACI,OAAO,CAACd,MAAM,CAAC;MAE3D,IAAIW,eAAe,GAAG,CAAC,CAAC,EAAE;QACtBb,eAAe,CAACa,eAAe,EAAEY,KAAK,CAACE,aAAa,EAAEzB,MAAM,CAAC;;;GAGxE;EAED,MAAM0B,aAAa,GAAIH,KAA0C;;IAE7D,IAAIA,KAAK,CAACC,MAAM,KAAKD,KAAK,CAACE,aAAa,EAAE;MACtC;;IAGJ,IAAInC,UAAU,CAACqC,SAAS,EAAE;MACtBrC,UAAU,CAACqC,SAAS,CAACJ,KAAK,CAAC;;IAG/B,IAAIA,KAAK,CAACK,kBAAkB,EAAE,EAAE;MAC5B;;IAGJ,MAAMlB,OAAO,GAAGhC,wBAAwB,CAAC6C,KAAK,CAACE,aAAa,EAAErC,aAAa,CAAC;IAE5E,IAAIsB,OAAO,EAAE;MACT,IAAImB,kBAAkB,CAACN,KAAK,CAAC,EAAE;QAC3BA,KAAK,CAACO,cAAc,EAAE;QACtBP,KAAK,CAACQ,eAAe,EAAE;QACvB,MAAMpB,eAAe,GAAGqB,kBAAkB,CAACT,KAAK,EAAEb,OAAO,EAAEjB,WAAW,CAAC;QAEvE,IAAIkB,eAAe,KAAKsB,SAAS,IAAItB,eAAe,KAAKlB,WAAW,EAAE;UAClEK,eAAe,CAACa,eAAe,EAAEY,KAAK,CAACE,aAAa,EAAEf,OAAO,CAACS,IAAI,CAACR,eAAe,CAAC,CAAC;;OAE3F,MAAM,IAAIlB,WAAW,KAAKwC,SAAS,IAAI,CAAC,CAACvB,OAAO,CAACS,IAAI,CAAC1B,WAAW,CAAC,EAAE;QAAA,IAAAyC,aAAA;;QAEjE,CAAAA,aAAA,GAAAxB,OAAO,CACFS,IAAI,CAAC1B,WAAW,CAAC,cAAAyC,aAAA,uBADtBA,aAAA,CAEMC,aAAa,CAACC,yBAAyB,CAACb,KAA8C,CAAC,CAAC;;;GAGzG;EAED,oBAAOxC,sDAASO,UAAU;IAAE+C,OAAO,EAAEf,WAAW;IAAEK,SAAS,EAAED,aAAa;IAAEvC,GAAG,EAAEI,WAAW;IAAEF,QAAQ,EAAEA;KAAY;AACxH,CAAC;MAEYiD,uBAAuB,GAAGA,CACnCf,KAA0B,EAC1BP,MAAc,EACdvB,WAA+B;EAE/B,QAAQ8B,KAAK,CAACgB,GAAG;IACb,KAAK,SAAS;MACV,OAAO9C,WAAW,KAAKwC,SAAS,GAAGjB,MAAM,GAAG,CAAC,GAAGvB,WAAW,GAAG,CAAC,GAAGA,WAAW,GAAG,CAAC,GAAGA,WAAW;IAEnG,KAAK,WAAW;MACZ,OAAOA,WAAW,KAAKwC,SAAS,GAAG,CAAC,GAAGxC,WAAW,GAAGuB,MAAM,GAAG,CAAC,GAAGvB,WAAW,GAAG,CAAC,GAAGA,WAAW;IAEnG,KAAK,MAAM;MACP,OAAO,CAAC;IAEZ,KAAK,KAAK;MACN,OAAOuB,MAAM,GAAG,CAAC;IAErB;MACI;;AAEZ;MAEagB,kBAAkB,GAAGA,CAC9BT,KAAuC,EACvCb,OAA4B,EAC5BjB,WAA+B,EAC/B+C,OAAO,GAAG,IAAI;EAEd,MAAMC,SAAS,GAAGH,uBAAuB,CAACf,KAAK,EAAEb,OAAO,CAACM,MAAM,EAAEvB,WAAW,CAAC;EAE7E,IAAIgD,SAAS,KAAKR,SAAS,EAAE;IACzB,IAAIQ,SAAS,KAAKhD,WAAW,EAAE;MAC3B,OAAOA,WAAW;KACrB,MAAM,IAAIiB,OAAO,CAACS,IAAI,CAACsB,SAAS,CAAC,IAAIC,eAAe,CAAChC,OAAO,CAACS,IAAI,CAACsB,SAAS,CAAC,CAAC,EAAE;;;MAG5E,IAAID,OAAO,EAAE;QACT,IAAIC,SAAS,KAAK,CAAC,EAAE;UACjB,OAAOT,kBAAkB,CACrB,IAAIW,aAAa,CAACpB,KAAK,CAACqB,IAAI,EAAE;YAAE,GAAIrB,KAAa;YAAEgB,GAAG,EAAE;WAAa,CAAQ,EAC7E7B,OAAO,EACP+B,SAAS,EACT,KAAK,CACR;SACJ,MAAM,IAAIA,SAAS,KAAK/B,OAAO,CAACM,MAAM,GAAG,CAAC,EAAE;UACzC,OAAOgB,kBAAkB,CACrB,IAAIW,aAAa,CAACpB,KAAK,CAACqB,IAAI,EAAE;YAAE,GAAIrB,KAAa;YAAEgB,GAAG,EAAE;WAAW,CAAQ,EAC3E7B,OAAO,EACP+B,SAAS,EACT,KAAK,CACR;;;MAIT,OAAOT,kBAAkB,CAACT,KAAK,EAAEb,OAAO,EAAE+B,SAAS,EAAED,OAAO,CAAC;;;EAIrE,OAAOC,SAAS;AACpB;AAEA,MAAMC,eAAe,GAAIG,OAAgB;EACrC,OACIA,OAAO,CAACC,YAAY,CAAC,MAAM,CAAC,KAAK,cAAc,IAC/C,CAAC,CAACD,OAAO,CAACE,YAAY,CAAC,UAAU,CAAC,IAClC,CAAC,CAACF,OAAO,CAACC,YAAY,CAAC,eAAe,CAAC,IACvC,CAAC,CAACD,OAAO,CAACC,YAAY,CAAC,aAAa,CAAC;AAE7C,CAAC;;;;"}
+{"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/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/features/useTableStyle.d.ts

@@ -147,7 +147,7 @@ export declare function useTableStyle<TType = unknown>(tableId: string, table: R
         gridTemplateAreas?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | undefined;
         gridTemplateColumns?: string | number | (string & {}) | undefined;
         gridTemplateRows?: string | number | (string & {}) | undefined;
-        hangingPunctuation?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "allow-end" | "first" | "force-end" | "last" | undefined;
+        hangingPunctuation?: (string & {}) | "first" | "last" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "allow-end" | "force-end" | undefined;
         height?: string | number | (string & {}) | undefined;
         hyphenateCharacter?: (string & {}) | "auto" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
         hyphens?: "auto" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "manual" | undefined;

package/dist/taco.cjs.development.js

@@ -14391,7 +14391,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');
@@ -14414,13 +14413,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]`);
@@ -14438,7 +14437,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 => {
@@ -14643,6 +14641,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,
@@ -14736,6 +14735,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);
@@ -15008,7 +15017,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
@@ -15423,7 +15432,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,
@@ -15489,16 +15498,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 => {
   let occurrences = {};
@@ -15714,6 +15713,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) {
@@ -15722,6 +15741,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));
@@ -15748,6 +15770,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();
@@ -15765,7 +15790,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 === '') {
@@ -15797,8 +15821,10 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       setValue(nextValue);
     }
   };
-  const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());
-  const isInlineCreation = onCreate && !createDialog;
+  const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md ', {
+    'focus-within:yt-focus': !hasSearch,
+    'outline-none': hasSearch
+  }, createCollectionClassName());
   return /*#__PURE__*/React__default.createElement(Select2Context.Provider, {
     value: context
   }, /*#__PURE__*/React__default.createElement(PopoverPrimitive.Root, {
@@ -15829,8 +15855,8 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     style: {
       minWidth: dimensions !== null && dimensions !== void 0 && dimensions.width ? `${dimensions.width}px` : undefined
     }
-  }, flattenedChildren.length > 5 || isInlineCreation ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Search$2, {
-    placeholder: isInlineCreation ? texts.select2.searchOrCreate : texts.select2.search,
+  }, hasSearch ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Search$2, {
+    placeholder: hasInlineCreation ? texts.select2.searchOrCreate : texts.select2.search,
     ref: searchRef,
     onTabKeyPress: () => setTabTriggeredClose(true)
   }), multiple && selectOptions.length > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button$1, {
@@ -15852,7 +15878,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     className: "text-grey-700 -mt-0.5 flex h-8 items-center px-2",
     role: "presentation"
   }, texts.listbox.empty)) : (/*#__PURE__*/React__default.createElement(Root$1, {
-    className: "flex flex-col gap-0.5",
+    className: "flex flex-col gap-0.5 focus-visible:outline-none",
     customSelector: ":scope > button",
     disabled: disabled,
     multiple: multiple,
@@ -15860,9 +15886,8 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     readOnly: readOnly,
     ref: listboxRef,
     setValue: setValue,
-    tabIndex: -1,
     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, {
@@ -18405,6 +18430,8 @@ function willRowMoveAfterSorting(cell, change, rowIndex) {
       const aUndefined = aValue === undefined;
       const bUndefined = bValue === undefined;
       if (aUndefined || bUndefined) {
+        if (sortUndefined === 'first') return aUndefined ? -1 : 1;
+        if (sortUndefined === 'last') return aUndefined ? 1 : -1;
         return aUndefined && bUndefined ? 0 : aUndefined ? sortUndefined : -sortUndefined;
       }
     }