@economic/taco 2.44.3 → 2.44.5

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

@@ -10,6 +10,7 @@ const getOptionsFromCollection = (collection, selector) => collection.querySelec
 const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(props, ref) {
   const {
     querySelector,
+    resetOnChange,
     tabIndex = 0,
     ...otherProps
   } = props;
@@ -40,14 +41,31 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
       internalRef.current.setActiveIndexByElement = setActiveIndexByElement;
     }
   }, [internalRef.current]);
+  React__default.useEffect(() => {
+    if (internalRef.current) {
+      const selected = internalRef.current.querySelectorAll(`[aria-current="true"]`);
+      const options = getOptionsFromCollection(internalRef.current, querySelector);
+      if (options.length && selected.length === 1) {
+        const firstSelected = internalRef.current.querySelector(`[aria-selected]`);
+        if (firstSelected) {
+          const selectedIndex = Array.from(options).indexOf(firstSelected);
+          if (selectedIndex > -1) {
+            setActiveOption(selectedIndex, internalRef.current, firstSelected);
+          }
+        }
+      }
+    }
+  }, [resetOnChange]);
   React__default.useEffect(() => {
     if (internalRef.current) {
       const options = getOptionsFromCollection(internalRef.current, querySelector);
       if (options.length) {
         let selected = internalRef.current.querySelectorAll(`[aria-current="true"]`);
+        // if nothing is current (keyboard visible), look for selected items
         if (selected.length === 0) {
           selected = internalRef.current.querySelectorAll(`[aria-selected]`);
         }
+        // if one item is selected, make sure it's current
         if (selected.length === 1) {
           if (options) {
             const firstSelected = selected.item(0);

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    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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"}
+{"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    resetOnChange?: unknown;\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, resetOnChange, 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 selected = internalRef.current.querySelectorAll(`[aria-current=\"true\"]`);\n            const options = getOptionsFromCollection(internalRef.current, querySelector);\n\n            if (options.length && selected.length === 1) {\n                const firstSelected = internalRef.current.querySelector(`[aria-selected]`);\n\n                if (firstSelected) {\n                    const selectedIndex = Array.from(options).indexOf(firstSelected);\n\n                    if (selectedIndex > -1) {\n                        setActiveOption(selectedIndex, internalRef.current, firstSelected);\n                    }\n                }\n            }\n        }\n    }, [resetOnChange]);\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 nothing is current (keyboard visible), look for selected items\n                if (selected.length === 0) {\n                    selected = internalRef.current.querySelectorAll(`[aria-selected]`);\n                }\n\n                // if one item is selected, make sure it's current\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","resetOnChange","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","selected","length","firstSelected","selectedIndex","item","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,7 +50,6 @@ 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            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;;;;"}
+{"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;;;;"}

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

@@ -36,6 +36,7 @@ const Root = /*#__PURE__*/React__default.forwardRef(function Listbox2(props, ref
     id: id,
     querySelector: customSelector ? `${DEFAULT_SELECTOR}, ${customSelector}` : DEFAULT_SELECTOR,
     ref: ref,
+    resetOnChange: value,
     role: "listbox"
   }), children)));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Root.js","sources":["../../../../../../../../src/primitives/Listbox2/components/Root.tsx"],"sourcesContent":["import React from 'react';\nimport { useId } from '../../../hooks/useId';\nimport * as CollectionPrimitive from '../../Collection/Collection';\nimport { Listbox2Value } from '../types';\nimport { Listbox2Context } from './Context';\n\nexport type Listbox2Props = React.HTMLAttributes<HTMLDivElement> & {\n    customSelector?: string;\n    disabled?: boolean;\n    multiple?: boolean;\n    readOnly?: boolean;\n    setValue: (value: Listbox2Value) => void;\n    value?: Listbox2Value;\n};\n\nconst DEFAULT_SELECTOR = '[role=\"option\"]';\n\nexport const Root = React.forwardRef<CollectionPrimitive.CollectionRef, Listbox2Props>(function Listbox2(props, ref) {\n    const {\n        children,\n        customSelector,\n        disabled = false,\n        id: nativeId,\n        multiple,\n        readOnly = false,\n        setValue,\n        title,\n        value,\n        ...otherProps\n    } = props;\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 = 'listbox2-' + useId(nativeId);\n\n    const context = React.useMemo(\n        () => ({\n            disabled,\n            readOnly,\n            setValue,\n            value,\n        }),\n        [disabled, readOnly, value]\n    );\n\n    return (\n        <Listbox2Context.Provider value={context}>\n            <div data-taco=\"listbox2\">\n                <CollectionPrimitive.Root\n                    {...otherProps}\n                    aria-multiselectable={multiple ? true : undefined}\n                    id={id}\n                    querySelector={customSelector ? `${DEFAULT_SELECTOR}, ${customSelector}` : DEFAULT_SELECTOR}\n                    ref={ref}\n                    role=\"listbox\">\n                    {children}\n                </CollectionPrimitive.Root>\n            </div>\n        </Listbox2Context.Provider>\n    );\n});\n\nexport const createListboxValueSetter =\n    (multiple: boolean, setValue: React.Dispatch<React.SetStateAction<Listbox2Value | undefined>>) =>\n    (nextValue: Listbox2Value) => {\n        setValue(value => {\n            if (Array.isArray(nextValue)) {\n                return nextValue;\n            }\n\n            if (multiple) {\n                if (value === undefined) {\n                    return [nextValue];\n                } else if (Array.isArray(value)) {\n                    if (value.includes(nextValue)) {\n                        return value.filter(v => v !== nextValue);\n                    }\n\n                    return [...value, nextValue];\n                } else if (value === nextValue) {\n                    return [];\n                }\n\n                return [value, nextValue];\n            }\n\n            return nextValue;\n        });\n    };\n"],"names":["DEFAULT_SELECTOR","Root","React","forwardRef","Listbox2","props","ref","children","customSelector","disabled","id","nativeId","multiple","readOnly","setValue","title","value","otherProps","useId","context","useMemo","Listbox2Context","Provider","CollectionPrimitive","undefined","querySelector","role","createListboxValueSetter","nextValue","Array","isArray","includes","filter","v"],"mappings":";;;;;;AAeA,MAAMA,gBAAgB,GAAG,iBAAiB;MAE7BC,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAmD,SAASC,QAAQA,CAACC,KAAK,EAAEC,GAAG;EAC/G,MAAM;IACFC,QAAQ;IACRC,cAAc;IACdC,QAAQ,GAAG,KAAK;IAChBC,EAAE,EAAEC,QAAQ;IACZC,QAAQ;IACRC,QAAQ,GAAG,KAAK;IAChBC,QAAQ;IACRC,KAAK;IACLC,KAAK;IACL,GAAGC;GACN,GAAGZ,KAAK;;;EAGT,MAAMK,EAAE,GAAG,WAAW,GAAGQ,KAAK,CAACP,QAAQ,CAAC;EAExC,MAAMQ,OAAO,GAAGjB,cAAK,CAACkB,OAAO,CACzB,OAAO;IACHX,QAAQ;IACRI,QAAQ;IACRC,QAAQ;IACRE;GACH,CAAC,EACF,CAACP,QAAQ,EAAEI,QAAQ,EAAEG,KAAK,CAAC,CAC9B;EAED,oBACId,6BAACmB,eAAe,CAACC,QAAQ;IAACN,KAAK,EAAEG;kBAC7BjB;iBAAe;kBACXA,6BAACqB,MAAwB,oBACjBN,UAAU;4BACQL,QAAQ,GAAG,IAAI,GAAGY,SAAS;IACjDd,EAAE,EAAEA,EAAE;IACNe,aAAa,EAAEjB,cAAc,GAAG,GAAGR,gBAAgB,KAAKQ,cAAc,EAAE,GAAGR,gBAAgB;IAC3FM,GAAG,EAAEA,GAAG;IACRoB,IAAI,EAAC;MACJnB,QAAQ,CACc,CACzB,CACiB;AAEnC,CAAC;MAEYoB,wBAAwB,GACjCA,CAACf,QAAiB,EAAEE,QAAyE,KAC5Fc,SAAwB;EACrBd,QAAQ,CAACE,KAAK;IACV,IAAIa,KAAK,CAACC,OAAO,CAACF,SAAS,CAAC,EAAE;MAC1B,OAAOA,SAAS;;IAGpB,IAAIhB,QAAQ,EAAE;MACV,IAAII,KAAK,KAAKQ,SAAS,EAAE;QACrB,OAAO,CAACI,SAAS,CAAC;OACrB,MAAM,IAAIC,KAAK,CAACC,OAAO,CAACd,KAAK,CAAC,EAAE;QAC7B,IAAIA,KAAK,CAACe,QAAQ,CAACH,SAAS,CAAC,EAAE;UAC3B,OAAOZ,KAAK,CAACgB,MAAM,CAACC,CAAC,IAAIA,CAAC,KAAKL,SAAS,CAAC;;QAG7C,OAAO,CAAC,GAAGZ,KAAK,EAAEY,SAAS,CAAC;OAC/B,MAAM,IAAIZ,KAAK,KAAKY,SAAS,EAAE;QAC5B,OAAO,EAAE;;MAGb,OAAO,CAACZ,KAAK,EAAEY,SAAS,CAAC;;IAG7B,OAAOA,SAAS;GACnB,CAAC;AACN;;;;"}
+{"version":3,"file":"Root.js","sources":["../../../../../../../../src/primitives/Listbox2/components/Root.tsx"],"sourcesContent":["import React from 'react';\nimport { useId } from '../../../hooks/useId';\nimport * as CollectionPrimitive from '../../Collection/Collection';\nimport { Listbox2Value } from '../types';\nimport { Listbox2Context } from './Context';\n\nexport type Listbox2Props = React.HTMLAttributes<HTMLDivElement> & {\n    customSelector?: string;\n    disabled?: boolean;\n    multiple?: boolean;\n    readOnly?: boolean;\n    setValue: (value: Listbox2Value) => void;\n    value?: Listbox2Value;\n};\n\nconst DEFAULT_SELECTOR = '[role=\"option\"]';\n\nexport const Root = React.forwardRef<CollectionPrimitive.CollectionRef, Listbox2Props>(function Listbox2(props, ref) {\n    const {\n        children,\n        customSelector,\n        disabled = false,\n        id: nativeId,\n        multiple,\n        readOnly = false,\n        setValue,\n        title,\n        value,\n        ...otherProps\n    } = props;\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 = 'listbox2-' + useId(nativeId);\n\n    const context = React.useMemo(\n        () => ({\n            disabled,\n            readOnly,\n            setValue,\n            value,\n        }),\n        [disabled, readOnly, value]\n    );\n\n    return (\n        <Listbox2Context.Provider value={context}>\n            <div data-taco=\"listbox2\">\n                <CollectionPrimitive.Root\n                    {...otherProps}\n                    aria-multiselectable={multiple ? true : undefined}\n                    id={id}\n                    querySelector={customSelector ? `${DEFAULT_SELECTOR}, ${customSelector}` : DEFAULT_SELECTOR}\n                    ref={ref}\n                    resetOnChange={value}\n                    role=\"listbox\">\n                    {children}\n                </CollectionPrimitive.Root>\n            </div>\n        </Listbox2Context.Provider>\n    );\n});\n\nexport const createListboxValueSetter =\n    (multiple: boolean, setValue: React.Dispatch<React.SetStateAction<Listbox2Value | undefined>>) =>\n    (nextValue: Listbox2Value) => {\n        setValue(value => {\n            if (Array.isArray(nextValue)) {\n                return nextValue;\n            }\n\n            if (multiple) {\n                if (value === undefined) {\n                    return [nextValue];\n                } else if (Array.isArray(value)) {\n                    if (value.includes(nextValue)) {\n                        return value.filter(v => v !== nextValue);\n                    }\n\n                    return [...value, nextValue];\n                } else if (value === nextValue) {\n                    return [];\n                }\n\n                return [value, nextValue];\n            }\n\n            return nextValue;\n        });\n    };\n"],"names":["DEFAULT_SELECTOR","Root","React","forwardRef","Listbox2","props","ref","children","customSelector","disabled","id","nativeId","multiple","readOnly","setValue","title","value","otherProps","useId","context","useMemo","Listbox2Context","Provider","CollectionPrimitive","undefined","querySelector","resetOnChange","role","createListboxValueSetter","nextValue","Array","isArray","includes","filter","v"],"mappings":";;;;;;AAeA,MAAMA,gBAAgB,GAAG,iBAAiB;MAE7BC,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAmD,SAASC,QAAQA,CAACC,KAAK,EAAEC,GAAG;EAC/G,MAAM;IACFC,QAAQ;IACRC,cAAc;IACdC,QAAQ,GAAG,KAAK;IAChBC,EAAE,EAAEC,QAAQ;IACZC,QAAQ;IACRC,QAAQ,GAAG,KAAK;IAChBC,QAAQ;IACRC,KAAK;IACLC,KAAK;IACL,GAAGC;GACN,GAAGZ,KAAK;;;EAGT,MAAMK,EAAE,GAAG,WAAW,GAAGQ,KAAK,CAACP,QAAQ,CAAC;EAExC,MAAMQ,OAAO,GAAGjB,cAAK,CAACkB,OAAO,CACzB,OAAO;IACHX,QAAQ;IACRI,QAAQ;IACRC,QAAQ;IACRE;GACH,CAAC,EACF,CAACP,QAAQ,EAAEI,QAAQ,EAAEG,KAAK,CAAC,CAC9B;EAED,oBACId,6BAACmB,eAAe,CAACC,QAAQ;IAACN,KAAK,EAAEG;kBAC7BjB;iBAAe;kBACXA,6BAACqB,MAAwB,oBACjBN,UAAU;4BACQL,QAAQ,GAAG,IAAI,GAAGY,SAAS;IACjDd,EAAE,EAAEA,EAAE;IACNe,aAAa,EAAEjB,cAAc,GAAG,GAAGR,gBAAgB,KAAKQ,cAAc,EAAE,GAAGR,gBAAgB;IAC3FM,GAAG,EAAEA,GAAG;IACRoB,aAAa,EAAEV,KAAK;IACpBW,IAAI,EAAC;MACJpB,QAAQ,CACc,CACzB,CACiB;AAEnC,CAAC;MAEYqB,wBAAwB,GACjCA,CAAChB,QAAiB,EAAEE,QAAyE,KAC5Fe,SAAwB;EACrBf,QAAQ,CAACE,KAAK;IACV,IAAIc,KAAK,CAACC,OAAO,CAACF,SAAS,CAAC,EAAE;MAC1B,OAAOA,SAAS;;IAGpB,IAAIjB,QAAQ,EAAE;MACV,IAAII,KAAK,KAAKQ,SAAS,EAAE;QACrB,OAAO,CAACK,SAAS,CAAC;OACrB,MAAM,IAAIC,KAAK,CAACC,OAAO,CAACf,KAAK,CAAC,EAAE;QAC7B,IAAIA,KAAK,CAACgB,QAAQ,CAACH,SAAS,CAAC,EAAE;UAC3B,OAAOb,KAAK,CAACiB,MAAM,CAACC,CAAC,IAAIA,CAAC,KAAKL,SAAS,CAAC;;QAG7C,OAAO,CAAC,GAAGb,KAAK,EAAEa,SAAS,CAAC;OAC/B,MAAM,IAAIb,KAAK,KAAKa,SAAS,EAAE;QAC5B,OAAO,EAAE;;MAGb,OAAO,CAACb,KAAK,EAAEa,SAAS,CAAC;;IAG7B,OAAOA,SAAS;GACnB,CAAC;AACN;;;;"}

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

@@ -1,12 +1,14 @@
 import React from 'react';
 export declare type CollectionProps = React.HTMLAttributes<HTMLDivElement> & {
     querySelector: string;
+    resetOnChange?: unknown;
 };
 export declare type CollectionRef = HTMLDivElement & {
     setActiveIndexByElement: (option: HTMLDivElement) => void;
 };
 export declare const Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     querySelector: string;
+    resetOnChange?: unknown;
 } & React.RefAttributes<CollectionRef>>;
 export declare const getNextIndexFromKeycode: (event: React.KeyboardEvent, length: number, activeIndex: number | undefined) => number | undefined;
 export declare const getNextEnabledItem: (event: React.KeyboardEvent<HTMLElement>, options: NodeListOf<Element>, activeIndex: number | undefined, recurse?: boolean) => number | undefined;

package/dist/taco.cjs.development.js

@@ -14386,6 +14386,7 @@ const getOptionsFromCollection = (collection, selector) => collection.querySelec
 const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(props, ref) {
   const {
     querySelector,
+    resetOnChange,
     tabIndex = 0,
     ...otherProps
   } = props;
@@ -14416,14 +14417,31 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
       internalRef.current.setActiveIndexByElement = setActiveIndexByElement;
     }
   }, [internalRef.current]);
+  React__default.useEffect(() => {
+    if (internalRef.current) {
+      const selected = internalRef.current.querySelectorAll(`[aria-current="true"]`);
+      const options = getOptionsFromCollection(internalRef.current, querySelector);
+      if (options.length && selected.length === 1) {
+        const firstSelected = internalRef.current.querySelector(`[aria-selected]`);
+        if (firstSelected) {
+          const selectedIndex = Array.from(options).indexOf(firstSelected);
+          if (selectedIndex > -1) {
+            setActiveOption(selectedIndex, internalRef.current, firstSelected);
+          }
+        }
+      }
+    }
+  }, [resetOnChange]);
   React__default.useEffect(() => {
     if (internalRef.current) {
       const options = getOptionsFromCollection(internalRef.current, querySelector);
       if (options.length) {
         let selected = internalRef.current.querySelectorAll(`[aria-current="true"]`);
+        // if nothing is current (keyboard visible), look for selected items
         if (selected.length === 0) {
           selected = internalRef.current.querySelectorAll(`[aria-selected]`);
         }
+        // if one item is selected, make sure it's current
         if (selected.length === 1) {
           if (options) {
             const firstSelected = selected.item(0);
@@ -14569,6 +14587,7 @@ const Root$1 = /*#__PURE__*/React__default.forwardRef(function Listbox2(props, r
     id: id,
     querySelector: customSelector ? `${DEFAULT_SELECTOR}, ${customSelector}` : DEFAULT_SELECTOR,
     ref: ref,
+    resetOnChange: value,
     role: "listbox"
   }), children)));
 });
@@ -14641,7 +14660,6 @@ 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,