@economic/taco 1.14.1 → 1.14.3

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

@@ -85,9 +85,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
     readOnly,
     tags
   } = useSelect2Context();
-  const contentClassName = cn('truncate', {
-    'flex gap-1': tags
-  });
+  const contentClassName = cn('truncate flex items-center gap-1');
   const currentValue = children.find(matchesValue(value));
   let output;
   if (currentValue) {
@@ -101,7 +99,6 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
       }, currentValue.props.children);
     } else {
       output = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, currentValue.props.icon ? typeof currentValue.props.icon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
-        className: "mr-1",
         name: currentValue.props.icon
       }) : currentValue.props.icon : null, currentValue.props.children);
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Trigger.js","sources":["../../../../../../../../src/components/Select2/components/Trigger.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Tag } from '../../Tag/Tag';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { Icon } from '../../Icon/Icon';\nimport { Badge } from '../../Badge/Badge';\nimport { getInputClasses } from '../../Input/util';\nimport { Select2OptionValue } from '../types';\nimport { useSelect2Context } from './Context';\nimport { Select2OptionProps } from './Option';\nimport { getIndexOfFirstChildOverflowingParent } from '../../../utils/dom';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\n\ntype Select2TriggerProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    children: React.ReactElement<Select2OptionProps>[];\n};\n\nexport const Trigger = React.forwardRef<HTMLButtonElement, Select2TriggerProps>(function Select2Trigger(props, ref) {\n    const { multiple, value } = useSelect2Context();\n\n    if (Array.isArray(value) || multiple) {\n        const values = Array.isArray(value) ? value : value !== undefined ? [value] : undefined;\n        return <Multiple {...props} ref={ref} values={values} />;\n    }\n\n    return <Single {...props} ref={ref} value={value} />;\n});\n\ntype ButtonProps = React.HTMLAttributes<HTMLButtonElement> &\n    Omit<Select2TriggerProps, 'children' | 'open' | 'setValue' | 'value'>;\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Select2TriggerButton(props, ref) {\n    const { children, onClick, tabIndex = 0, ...otherProps } = props;\n    const { disabled, highlighted, invalid, open, readOnly } = useSelect2Context();\n\n    const className = cn(\n        'cursor-pointer !px-1.5',\n        getInputClasses({ ...props, disabled, highlighted, invalid, readOnly }).replace('w-full ', ''),\n        { 'w-full': !props.className?.includes('w-') },\n        props.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled || readOnly) {\n            event.preventDefault();\n            return;\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    return (\n        <button\n            {...otherProps}\n            aria-invalid={invalid ? true : undefined}\n            aria-readonly={readOnly ? true : undefined}\n            className={className}\n            disabled={disabled}\n            onClick={handleClick}\n            ref={ref}\n            role=\"combobox\"\n            tabIndex={disabled || readOnly ? -1 : tabIndex}\n            type=\"button\">\n            {children}\n            <Icon name={open ? 'chevron-up' : 'chevron-down'} className=\"-mr-1 ml-auto\" />\n        </button>\n    );\n});\n\ntype SingleProps = Omit<Select2TriggerProps, 'value'> & { value?: Select2OptionValue };\n\nconst Single = React.forwardRef<HTMLButtonElement, SingleProps>(function Select2TriggerSingle(props, ref) {\n    const { children, value, ...buttonProps } = props;\n    const { disabled, readOnly, tags } = useSelect2Context();\n    const contentClassName = cn('truncate', {\n        'flex gap-1': tags,\n    });\n\n    const currentValue = children.find(matchesValue(value));\n\n    let output;\n\n    if (currentValue) {\n        if (tags) {\n            output = (\n                <Tag\n                    className=\"truncate\"\n                    color={currentValue.props.color}\n                    disabled={disabled}\n                    icon={currentValue.props.icon}\n                    readOnly={readOnly}>\n                    {currentValue.props.children}\n                </Tag>\n            );\n        } else {\n            output = (\n                <>\n                    {currentValue.props.icon ? (\n                        typeof currentValue.props.icon === 'string' ? (\n                            <Icon className=\"mr-1\" name={currentValue.props.icon} />\n                        ) : (\n                            currentValue.props.icon\n                        )\n                    ) : null}\n                    {currentValue.props.children}\n                </>\n            );\n        }\n    }\n\n    return (\n        <Button {...buttonProps} ref={ref}>\n            <span className={contentClassName}>{output}</span>\n        </Button>\n    );\n});\n\ntype MultipleProps = Omit<Select2TriggerProps, 'value'> & {\n    values?: Select2OptionValue[];\n};\n\nconst Multiple = React.forwardRef<HTMLButtonElement, MultipleProps>(function Select2TriggerMultiple(props, ref) {\n    const { children, values = [], ...buttonProps } = props;\n    const { disabled, open, readOnly, setValue, tags } = useSelect2Context();\n    const contentRef = React.useRef<HTMLSpanElement>(null);\n\n    const createClickHandler = tagValue => event => {\n        event?.stopPropagation();\n        event?.preventDefault();\n\n        if (!disabled && !readOnly) {\n            setValue(tagValue);\n        }\n    };\n    const valuesAsChildren = values.map(value =>\n        children.find(c => c.props.value === value)\n    ) as React.ReactElement<Select2OptionProps>[];\n\n    if (open) {\n        return (\n            <span className=\"relative h-8\">\n                <Button {...buttonProps} className={cn('absolute z-20', buttonProps.className)} ref={ref}>\n                    <ScrollArea className=\"my-1 flex max-h-[5.5rem] flex-col\">\n                        <span className=\"flex flex-wrap gap-1\">\n                            {valuesAsChildren.map(child => (\n                                <Tag\n                                    key={child.props.value}\n                                    className=\"truncate\"\n                                    color={tags ? child.props.color : undefined}\n                                    disabled={disabled}\n                                    icon={child.props.icon}\n                                    onDelete={open ? createClickHandler(child.props.value) : undefined}\n                                    readOnly={readOnly}>\n                                    {child.props.children}\n                                </Tag>\n                            ))}\n                        </span>\n                    </ScrollArea>\n                </Button>\n            </span>\n        );\n    }\n\n    const boundaryIndex = contentRef.current ? getIndexOfFirstChildOverflowingParent(contentRef.current, 30) : undefined;\n\n    return (\n        <Button {...buttonProps} ref={ref}>\n            <span className=\"relative flex items-center gap-1 overflow-hidden\">\n                <span className=\"flex gap-1 truncate\" ref={contentRef}>\n                    {valuesAsChildren.map((child, index) => {\n                        const tag = (\n                            <Tag\n                                key={child.props.value}\n                                className={cn('cursor-pointer', {\n                                    truncate: index === boundaryIndex,\n                                    hidden: boundaryIndex !== undefined && boundaryIndex !== null ? index > boundaryIndex : false,\n                                })}\n                                color={tags ? child.props.color : undefined}\n                                disabled={disabled}\n                                icon={child.props.icon}\n                                onDelete={open ? createClickHandler(child.props.value) : undefined}\n                                readOnly={readOnly}>\n                                {child.props.children}\n                            </Tag>\n                        );\n\n                        if (index === boundaryIndex) {\n                            return (\n                                <Tooltip key={child.props.value} title={String(child.props.children)}>\n                                    {tag}\n                                </Tooltip>\n                            );\n                        }\n\n                        return tag;\n                    })}\n                </span>\n                {boundaryIndex !== undefined && boundaryIndex !== null && boundaryIndex < valuesAsChildren.length - 1 ? (\n                    <Tooltip\n                        title={valuesAsChildren\n                            .slice(boundaryIndex + 1)\n                            .map(child => (child ? String(child.props.children) : ''))\n                            .join(', ')}>\n                        <Badge className=\"flex-shrink-0\">+{valuesAsChildren.length - (boundaryIndex + 1)}</Badge>\n                    </Tooltip>\n                ) : null}\n            </span>\n        </Button>\n    );\n});\n\nconst matchesValue = (value: undefined | any | any[]) => (child: React.ReactElement<any>) => {\n    if (Array.isArray(value)) {\n        return value.includes(child.props.value);\n    }\n\n    return child.props.value === value;\n};\n"],"names":["Trigger","React","forwardRef","Select2Trigger","props","ref","multiple","value","useSelect2Context","Array","isArray","values","undefined","Multiple","Single","Button","Select2TriggerButton","children","onClick","tabIndex","otherProps","disabled","highlighted","invalid","open","readOnly","className","cn","getInputClasses","replace","includes","handleClick","event","preventDefault","role","type","Icon","name","Select2TriggerSingle","buttonProps","tags","contentClassName","currentValue","find","matchesValue","output","Tag","color","icon","Select2TriggerMultiple","setValue","contentRef","useRef","createClickHandler","tagValue","stopPropagation","valuesAsChildren","map","c","ScrollArea","child","key","onDelete","boundaryIndex","current","getIndexOfFirstChildOverflowingParent","index","tag","truncate","hidden","Tooltip","title","String","length","slice","join","Badge"],"mappings":"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"}
+{"version":3,"file":"Trigger.js","sources":["../../../../../../../../src/components/Select2/components/Trigger.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Tag } from '../../Tag/Tag';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { Icon } from '../../Icon/Icon';\nimport { Badge } from '../../Badge/Badge';\nimport { getInputClasses } from '../../Input/util';\nimport { Select2OptionValue } from '../types';\nimport { useSelect2Context } from './Context';\nimport { Select2OptionProps } from './Option';\nimport { getIndexOfFirstChildOverflowingParent } from '../../../utils/dom';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\n\ntype Select2TriggerProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    children: React.ReactElement<Select2OptionProps>[];\n};\n\nexport const Trigger = React.forwardRef<HTMLButtonElement, Select2TriggerProps>(function Select2Trigger(props, ref) {\n    const { multiple, value } = useSelect2Context();\n\n    if (Array.isArray(value) || multiple) {\n        const values = Array.isArray(value) ? value : value !== undefined ? [value] : undefined;\n        return <Multiple {...props} ref={ref} values={values} />;\n    }\n\n    return <Single {...props} ref={ref} value={value} />;\n});\n\ntype ButtonProps = React.HTMLAttributes<HTMLButtonElement> &\n    Omit<Select2TriggerProps, 'children' | 'open' | 'setValue' | 'value'>;\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Select2TriggerButton(props, ref) {\n    const { children, onClick, tabIndex = 0, ...otherProps } = props;\n    const { disabled, highlighted, invalid, open, readOnly } = useSelect2Context();\n\n    const className = cn(\n        'cursor-pointer !px-1.5',\n        getInputClasses({ ...props, disabled, highlighted, invalid, readOnly }).replace('w-full ', ''),\n        { 'w-full': !props.className?.includes('w-') },\n        props.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled || readOnly) {\n            event.preventDefault();\n            return;\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    return (\n        <button\n            {...otherProps}\n            aria-invalid={invalid ? true : undefined}\n            aria-readonly={readOnly ? true : undefined}\n            className={className}\n            disabled={disabled}\n            onClick={handleClick}\n            ref={ref}\n            role=\"combobox\"\n            tabIndex={disabled || readOnly ? -1 : tabIndex}\n            type=\"button\">\n            {children}\n            <Icon name={open ? 'chevron-up' : 'chevron-down'} className=\"-mr-1 ml-auto\" />\n        </button>\n    );\n});\n\ntype SingleProps = Omit<Select2TriggerProps, 'value'> & { value?: Select2OptionValue };\n\nconst Single = React.forwardRef<HTMLButtonElement, SingleProps>(function Select2TriggerSingle(props, ref) {\n    const { children, value, ...buttonProps } = props;\n    const { disabled, readOnly, tags } = useSelect2Context();\n    const contentClassName = cn('truncate flex items-center gap-1');\n\n    const currentValue = children.find(matchesValue(value));\n\n    let output;\n\n    if (currentValue) {\n        if (tags) {\n            output = (\n                <Tag\n                    className=\"truncate\"\n                    color={currentValue.props.color}\n                    disabled={disabled}\n                    icon={currentValue.props.icon}\n                    readOnly={readOnly}>\n                    {currentValue.props.children}\n                </Tag>\n            );\n        } else {\n            output = (\n                <>\n                    {currentValue.props.icon ? (\n                        typeof currentValue.props.icon === 'string' ? (\n                            <Icon name={currentValue.props.icon} />\n                        ) : (\n                            currentValue.props.icon\n                        )\n                    ) : null}\n                    {currentValue.props.children}\n                </>\n            );\n        }\n    }\n\n    return (\n        <Button {...buttonProps} ref={ref}>\n            <span className={contentClassName}>{output}</span>\n        </Button>\n    );\n});\n\ntype MultipleProps = Omit<Select2TriggerProps, 'value'> & {\n    values?: Select2OptionValue[];\n};\n\nconst Multiple = React.forwardRef<HTMLButtonElement, MultipleProps>(function Select2TriggerMultiple(props, ref) {\n    const { children, values = [], ...buttonProps } = props;\n    const { disabled, open, readOnly, setValue, tags } = useSelect2Context();\n    const contentRef = React.useRef<HTMLSpanElement>(null);\n\n    const createClickHandler = tagValue => event => {\n        event?.stopPropagation();\n        event?.preventDefault();\n\n        if (!disabled && !readOnly) {\n            setValue(tagValue);\n        }\n    };\n    const valuesAsChildren = values.map(value =>\n        children.find(c => c.props.value === value)\n    ) as React.ReactElement<Select2OptionProps>[];\n\n    if (open) {\n        return (\n            <span className=\"relative h-8\">\n                <Button {...buttonProps} className={cn('absolute z-20', buttonProps.className)} ref={ref}>\n                    <ScrollArea className=\"my-1 flex max-h-[5.5rem] flex-col\">\n                        <span className=\"flex flex-wrap gap-1\">\n                            {valuesAsChildren.map(child => (\n                                <Tag\n                                    key={child.props.value}\n                                    className=\"truncate\"\n                                    color={tags ? child.props.color : undefined}\n                                    disabled={disabled}\n                                    icon={child.props.icon}\n                                    onDelete={open ? createClickHandler(child.props.value) : undefined}\n                                    readOnly={readOnly}>\n                                    {child.props.children}\n                                </Tag>\n                            ))}\n                        </span>\n                    </ScrollArea>\n                </Button>\n            </span>\n        );\n    }\n\n    const boundaryIndex = contentRef.current ? getIndexOfFirstChildOverflowingParent(contentRef.current, 30) : undefined;\n\n    return (\n        <Button {...buttonProps} ref={ref}>\n            <span className=\"relative flex items-center gap-1 overflow-hidden\">\n                <span className=\"flex gap-1 truncate\" ref={contentRef}>\n                    {valuesAsChildren.map((child, index) => {\n                        const tag = (\n                            <Tag\n                                key={child.props.value}\n                                className={cn('cursor-pointer', {\n                                    truncate: index === boundaryIndex,\n                                    hidden: boundaryIndex !== undefined && boundaryIndex !== null ? index > boundaryIndex : false,\n                                })}\n                                color={tags ? child.props.color : undefined}\n                                disabled={disabled}\n                                icon={child.props.icon}\n                                onDelete={open ? createClickHandler(child.props.value) : undefined}\n                                readOnly={readOnly}>\n                                {child.props.children}\n                            </Tag>\n                        );\n\n                        if (index === boundaryIndex) {\n                            return (\n                                <Tooltip key={child.props.value} title={String(child.props.children)}>\n                                    {tag}\n                                </Tooltip>\n                            );\n                        }\n\n                        return tag;\n                    })}\n                </span>\n                {boundaryIndex !== undefined && boundaryIndex !== null && boundaryIndex < valuesAsChildren.length - 1 ? (\n                    <Tooltip\n                        title={valuesAsChildren\n                            .slice(boundaryIndex + 1)\n                            .map(child => (child ? String(child.props.children) : ''))\n                            .join(', ')}>\n                        <Badge className=\"flex-shrink-0\">+{valuesAsChildren.length - (boundaryIndex + 1)}</Badge>\n                    </Tooltip>\n                ) : null}\n            </span>\n        </Button>\n    );\n});\n\nconst matchesValue = (value: undefined | any | any[]) => (child: React.ReactElement<any>) => {\n    if (Array.isArray(value)) {\n        return value.includes(child.props.value);\n    }\n\n    return child.props.value === value;\n};\n"],"names":["Trigger","React","forwardRef","Select2Trigger","props","ref","multiple","value","useSelect2Context","Array","isArray","values","undefined","Multiple","Single","Button","Select2TriggerButton","children","onClick","tabIndex","otherProps","disabled","highlighted","invalid","open","readOnly","className","cn","getInputClasses","replace","includes","handleClick","event","preventDefault","role","type","Icon","name","Select2TriggerSingle","buttonProps","tags","contentClassName","currentValue","find","matchesValue","output","Tag","color","icon","Select2TriggerMultiple","setValue","contentRef","useRef","createClickHandler","tagValue","stopPropagation","valuesAsChildren","map","c","ScrollArea","child","key","onDelete","boundaryIndex","current","getIndexOfFirstChildOverflowingParent","index","tag","truncate","hidden","Tooltip","title","String","length","slice","join","Badge"],"mappings":"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"}

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

@@ -3,98 +3,87 @@ import { createCustomKeyboardEvent } from '../../../utils/input.js';
 import { useMergedRef } from '../../../hooks/useMergedRef.js';
 import { isAriaDirectionKey } from '../../../utils/aria.js';
 
-const getOptions = (collection, selector) => collection.querySelectorAll(selector);
+const getOptionsFromCollection = (collection, selector) => collection.querySelectorAll(selector);
 // we use javascript to set attributes (rather than cloning children and adding them)
 // so that we can support nesting (e.g. groups) - child elements that aren't options.
 // without doing this we would have to unwrap and flatten all groups
 const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(props, ref) {
   const {
-    selector,
+    querySelector,
     tabIndex = 0,
     ...otherProps
   } = props;
   const internalRef = useMergedRef(ref);
   const [activeIndex, setActiveIndex] = React__default.useState();
-  const toggleCurrent = collection => {
+  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');
-    if (activeIndex !== undefined) {
-      var _getOptions;
-      const option = (_getOptions = getOptions(collection, selector)) === null || _getOptions === void 0 ? void 0 : _getOptions.item(activeIndex);
-      if (option) {
-        option.setAttribute('aria-current', 'true');
-        option.scrollIntoView({
-          block: 'nearest'
-        });
-      }
-    }
+    option.setAttribute('aria-current', 'true');
+    option.scrollIntoView({
+      block: 'nearest'
+    });
+    setActiveIndex(index);
   };
   const setActiveIndexByElement = React__default.useCallback(option => {
     if (internalRef.current) {
-      if (option.matches(selector)) {
-        const options = getOptions(internalRef.current, selector);
+      if (option.matches(querySelector)) {
+        const options = getOptionsFromCollection(internalRef.current, querySelector);
         const nextActiveIndex = Array.from(options).indexOf(option);
         if (nextActiveIndex > -1) {
-          setActiveIndex(nextActiveIndex);
+          setActiveOption(nextActiveIndex, internalRef.current, option);
         }
       }
     }
-  }, [internalRef.current]);
+  }, [internalRef.current, querySelector]);
   React__default.useEffect(() => {
     if (internalRef.current) {
       internalRef.current.setActiveIndex = setActiveIndexByElement;
     }
   }, [internalRef.current]);
-  // set/remove appropriate aria-current attributes
-  // we do this in a hook because we expose setActiveIndex on the ref
-  React__default.useEffect(() => {
-    if (internalRef.current) {
-      toggleCurrent(internalRef.current);
-    }
-  }, [activeIndex]);
-  // set the initial active index on mount
   React__default.useEffect(() => {
     if (internalRef.current) {
-      const selected = internalRef.current.querySelectorAll(`[aria-selected]`);
-      if (selected.length === 1) {
-        const options = getOptions(internalRef.current, selector);
-        if (options) {
-          const selectedIndex = Array.from(options).indexOf(selected.item(0));
-          if (selectedIndex > -1) {
-            setActiveIndex(selectedIndex);
+      const options = getOptionsFromCollection(internalRef.current, querySelector);
+      if (options.length && options.length !== lastLengthRef.current) {
+        const selected = internalRef.current.querySelectorAll(`[aria-selected]`);
+        if (selected.length === 1) {
+          if (options) {
+            const firstSelected = selected.item(0);
+            const selectedIndex = Array.from(options).indexOf(firstSelected);
+            if (selectedIndex > -1) {
+              setActiveOption(selectedIndex, internalRef.current, firstSelected);
+            }
           }
+        } else {
+          // multiple selected or none selected should go to 0
+          setActiveOption(0, internalRef.current, options.item(0));
         }
-      } else {
-        // multiple selected or none selected should go to 0
-        setActiveIndex(0);
-      }
-    }
-  }, []);
-  // if children length changes, make sure we still have a valid active index (e.g. searching/filtering or adding a new item)
-  React__default.useEffect(() => {
-    if (internalRef.current) {
-      // make sure index and dom are synced
-      toggleCurrent(internalRef.current);
-      if (activeIndex !== undefined && activeIndex > React__default.Children.count(props.children)) {
-        setActiveIndex(0);
       }
+      lastLengthRef.current = options.length;
     }
   }, [props.children]);
   const handleClick = event => {
-    setActiveIndexByElement(event.target);
+    const option = event.target;
+    if (option.matches(querySelector)) {
+      const options = getOptionsFromCollection(event.currentTarget, querySelector);
+      const nextActiveIndex = Array.from(options).indexOf(option);
+      if (nextActiveIndex > -1) {
+        setActiveOption(nextActiveIndex, event.currentTarget, option);
+      }
+    }
   };
   const handleKeyDown = event => {
     // this stops the event dispatched to the option rebounding back and starting an infinite loop
     if (event.target !== event.currentTarget) {
       return;
     }
-    const options = getOptions(event.currentTarget, selector);
+    const options = getOptionsFromCollection(event.currentTarget, querySelector);
     if (options) {
       if (isAriaDirectionKey(event)) {
         const nextActiveIndex = getNextEnabledItem(event, options, activeIndex);
         if (nextActiveIndex !== undefined && nextActiveIndex !== activeIndex) {
           event.preventDefault();
-          setActiveIndex(nextActiveIndex);
+          setActiveOption(nextActiveIndex, event.currentTarget, options.item(nextActiveIndex));
         }
       } else if (activeIndex !== undefined) {
         // forward events onto the underlying option - this lets consumers place onKeyDown handlers on their own components
@@ -106,7 +95,7 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     ref: internalRef,
-    tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0
+    tabIndex: tabIndex
   }));
 });
 const getNextIndexFromKeycode = (event, length, activeIndex) => {

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    selector: string;\n};\n\nexport type CollectionRef = HTMLDivElement & {\n    setActiveIndex: (option: HTMLDivElement) => void;\n};\n\nconst getOptions = (collection: HTMLDivElement, selector: string): NodeListOf<Element> => 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 { selector, tabIndex = 0, ...otherProps } = props;\n    const internalRef = useMergedRef<CollectionRef>(ref);\n    const [activeIndex, setActiveIndex] = React.useState<undefined | number>();\n\n    const toggleCurrent = (collection: HTMLDivElement) => {\n        collection.querySelector(`[aria-current]`)?.removeAttribute('aria-current');\n\n        if (activeIndex !== undefined) {\n            const option = getOptions(collection, selector)?.item(activeIndex);\n\n            if (option) {\n                option.setAttribute('aria-current', 'true');\n                option.scrollIntoView({ block: 'nearest' });\n            }\n        }\n    };\n\n    const setActiveIndexByElement = React.useCallback(\n        (option: HTMLDivElement) => {\n            if (internalRef.current) {\n                if (option.matches(selector)) {\n                    const options = getOptions(internalRef.current, selector);\n                    const nextActiveIndex = Array.from(options).indexOf(option);\n\n                    if (nextActiveIndex > -1) {\n                        setActiveIndex(nextActiveIndex);\n                    }\n                }\n            }\n        },\n        [internalRef.current]\n    );\n\n    React.useEffect(() => {\n        if (internalRef.current) {\n            internalRef.current.setActiveIndex = setActiveIndexByElement;\n        }\n    }, [internalRef.current]);\n\n    // set/remove appropriate aria-current attributes\n    // we do this in a hook because we expose setActiveIndex on the ref\n    React.useEffect(() => {\n        if (internalRef.current) {\n            toggleCurrent(internalRef.current);\n        }\n    }, [activeIndex]);\n\n    // set the initial active index on mount\n    React.useEffect(() => {\n        if (internalRef.current) {\n            const selected = internalRef.current.querySelectorAll(`[aria-selected]`);\n\n            if (selected.length === 1) {\n                const options = getOptions(internalRef.current, selector);\n\n                if (options) {\n                    const selectedIndex = Array.from(options).indexOf(selected.item(0));\n\n                    if (selectedIndex > -1) {\n                        setActiveIndex(selectedIndex);\n                    }\n                }\n            } else {\n                // multiple selected or none selected should go to 0\n                setActiveIndex(0);\n            }\n        }\n    }, []);\n\n    // if children length changes, make sure we still have a valid active index (e.g. searching/filtering or adding a new item)\n    React.useEffect(() => {\n        if (internalRef.current) {\n            // make sure index and dom are synced\n            toggleCurrent(internalRef.current);\n\n            if (activeIndex !== undefined && activeIndex > React.Children.count(props.children)) {\n                setActiveIndex(0);\n            }\n        }\n    }, [props.children]);\n\n    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        setActiveIndexByElement(event.target as HTMLDivElement);\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        const options = getOptions(event.currentTarget, selector);\n\n        if (options) {\n            if (isAriaDirectionKey(event)) {\n                const nextActiveIndex = getNextEnabledItem(event, options, activeIndex);\n\n                if (nextActiveIndex !== undefined && nextActiveIndex !== activeIndex) {\n                    event.preventDefault();\n                    setActiveIndex(nextActiveIndex);\n                }\n            } else if (activeIndex !== undefined) {\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 ?? 0} />;\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":["getOptions","collection","selector","querySelectorAll","Root","React","forwardRef","CollectionRoot","props","ref","tabIndex","otherProps","internalRef","useMergedRef","activeIndex","setActiveIndex","useState","toggleCurrent","querySelector","removeAttribute","undefined","option","item","setAttribute","scrollIntoView","block","setActiveIndexByElement","useCallback","current","matches","options","nextActiveIndex","Array","from","indexOf","useEffect","selected","length","selectedIndex","Children","count","children","handleClick","event","target","handleKeyDown","currentTarget","isAriaDirectionKey","getNextEnabledItem","preventDefault","dispatchEvent","createCustomKeyboardEvent","onClick","onKeyDown","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    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                const selected = internalRef.current.querySelectorAll(`[aria-selected]`);\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        const options = getOptionsFromCollection(event.currentTarget, querySelector);\n\n        if (options) {\n            if (isAriaDirectionKey(event)) {\n                const nextActiveIndex = getNextEnabledItem(event, options, activeIndex);\n\n                if (nextActiveIndex !== undefined && nextActiveIndex !== activeIndex) {\n                    event.preventDefault();\n                    setActiveOption(nextActiveIndex, event.currentTarget, options.item(nextActiveIndex));\n                }\n            } else if (activeIndex !== undefined) {\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","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","isAriaDirectionKey","getNextEnabledItem","undefined","preventDefault","dispatchEvent","createCustomKeyboardEvent","onClick","onKeyDown","getNextIndexFromKeycode","key","recurse","nextIndex","isSkippableItem","KeyboardEvent","type","element","getAttribute","hasAttribute"],"mappings":"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"}

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

@@ -33,7 +33,7 @@ const Root = /*#__PURE__*/React__default.forwardRef(function Listbox2(props, ref
     id: id,
     ref: ref,
     role: "listbox",
-    selector: customSelector ? `${DEFAULT_SELECTOR}, ${customSelector}` : DEFAULT_SELECTOR
+    querySelector: customSelector ? `${DEFAULT_SELECTOR}, ${customSelector}` : DEFAULT_SELECTOR
   }), children)));
 });
 const createListboxValueSetter = (multiple, setValue) => nextValue => {

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    const id = 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                    ref={ref}\n                    role=\"listbox\"\n                    selector={customSelector ? `${DEFAULT_SELECTOR}, ${customSelector}` : DEFAULT_SELECTOR}>\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","role","selector","createListboxValueSetter","nextValue","Array","isArray","includes","filter","v"],"mappings":";;;;;AAeA,MAAMA,gBAAgB,GAAG,iBAAiB;MAE7BC,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAmD,SAASC,QAAQ,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;EACT,MAAMK,EAAE,GAAGQ,KAAK,CAACP,QAAQ,CAAC;EAE1B,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;IACNJ,GAAG,EAAEA,GAAG;IACRmB,IAAI,EAAC,SAAS;IACdC,QAAQ,EAAElB,cAAc,MAAMR,qBAAqBQ,gBAAgB,GAAGR;MACrEO,QAAQ,CACc,CACzB,CACiB;AAEnC,CAAC;MAEYoB,wBAAwB,GACjC,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    const id = 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                    ref={ref}\n                    role=\"listbox\"\n                    querySelector={customSelector ? `${DEFAULT_SELECTOR}, ${customSelector}` : DEFAULT_SELECTOR}>\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","role","querySelector","createListboxValueSetter","nextValue","Array","isArray","includes","filter","v"],"mappings":";;;;;AAeA,MAAMA,gBAAgB,GAAG,iBAAiB;MAE7BC,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAmD,SAASC,QAAQ,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;EACT,MAAMK,EAAE,GAAGQ,KAAK,CAACP,QAAQ,CAAC;EAE1B,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;IACNJ,GAAG,EAAEA,GAAG;IACRmB,IAAI,EAAC,SAAS;IACdC,aAAa,EAAElB,cAAc,MAAMR,qBAAqBQ,gBAAgB,GAAGR;MAC1EO,QAAQ,CACc,CACzB,CACiB;AAEnC,CAAC;MAEYoB,wBAAwB,GACjC,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;;;;"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
 export declare type CollectionProps = React.HTMLAttributes<HTMLDivElement> & {
-    selector: string;
+    querySelector: string;
 };
 export declare type CollectionRef = HTMLDivElement & {
     setActiveIndex: (option: HTMLDivElement) => void;
 };
 export declare const Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    selector: string;
+    querySelector: string;
 } & 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

@@ -7288,98 +7288,87 @@ const isAriaDirectionKey = event => {
   return false;
 };
 
-const getOptions = (collection, selector) => collection.querySelectorAll(selector);
+const getOptionsFromCollection = (collection, selector) => collection.querySelectorAll(selector);
 // we use javascript to set attributes (rather than cloning children and adding them)
 // so that we can support nesting (e.g. groups) - child elements that aren't options.
 // without doing this we would have to unwrap and flatten all groups
 const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(props, ref) {
   const {
-    selector,
+    querySelector,
     tabIndex = 0,
     ...otherProps
   } = props;
   const internalRef = useMergedRef(ref);
   const [activeIndex, setActiveIndex] = React__default.useState();
-  const toggleCurrent = collection => {
+  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');
-    if (activeIndex !== undefined) {
-      var _getOptions;
-      const option = (_getOptions = getOptions(collection, selector)) === null || _getOptions === void 0 ? void 0 : _getOptions.item(activeIndex);
-      if (option) {
-        option.setAttribute('aria-current', 'true');
-        option.scrollIntoView({
-          block: 'nearest'
-        });
-      }
-    }
+    option.setAttribute('aria-current', 'true');
+    option.scrollIntoView({
+      block: 'nearest'
+    });
+    setActiveIndex(index);
   };
   const setActiveIndexByElement = React__default.useCallback(option => {
     if (internalRef.current) {
-      if (option.matches(selector)) {
-        const options = getOptions(internalRef.current, selector);
+      if (option.matches(querySelector)) {
+        const options = getOptionsFromCollection(internalRef.current, querySelector);
         const nextActiveIndex = Array.from(options).indexOf(option);
         if (nextActiveIndex > -1) {
-          setActiveIndex(nextActiveIndex);
+          setActiveOption(nextActiveIndex, internalRef.current, option);
         }
       }
     }
-  }, [internalRef.current]);
+  }, [internalRef.current, querySelector]);
   React__default.useEffect(() => {
     if (internalRef.current) {
       internalRef.current.setActiveIndex = setActiveIndexByElement;
     }
   }, [internalRef.current]);
-  // set/remove appropriate aria-current attributes
-  // we do this in a hook because we expose setActiveIndex on the ref
   React__default.useEffect(() => {
     if (internalRef.current) {
-      toggleCurrent(internalRef.current);
-    }
-  }, [activeIndex]);
-  // set the initial active index on mount
-  React__default.useEffect(() => {
-    if (internalRef.current) {
-      const selected = internalRef.current.querySelectorAll(`[aria-selected]`);
-      if (selected.length === 1) {
-        const options = getOptions(internalRef.current, selector);
-        if (options) {
-          const selectedIndex = Array.from(options).indexOf(selected.item(0));
-          if (selectedIndex > -1) {
-            setActiveIndex(selectedIndex);
+      const options = getOptionsFromCollection(internalRef.current, querySelector);
+      if (options.length && options.length !== lastLengthRef.current) {
+        const selected = internalRef.current.querySelectorAll(`[aria-selected]`);
+        if (selected.length === 1) {
+          if (options) {
+            const firstSelected = selected.item(0);
+            const selectedIndex = Array.from(options).indexOf(firstSelected);
+            if (selectedIndex > -1) {
+              setActiveOption(selectedIndex, internalRef.current, firstSelected);
+            }
           }
+        } else {
+          // multiple selected or none selected should go to 0
+          setActiveOption(0, internalRef.current, options.item(0));
         }
-      } else {
-        // multiple selected or none selected should go to 0
-        setActiveIndex(0);
-      }
-    }
-  }, []);
-  // if children length changes, make sure we still have a valid active index (e.g. searching/filtering or adding a new item)
-  React__default.useEffect(() => {
-    if (internalRef.current) {
-      // make sure index and dom are synced
-      toggleCurrent(internalRef.current);
-      if (activeIndex !== undefined && activeIndex > React__default.Children.count(props.children)) {
-        setActiveIndex(0);
       }
+      lastLengthRef.current = options.length;
     }
   }, [props.children]);
   const handleClick = event => {
-    setActiveIndexByElement(event.target);
+    const option = event.target;
+    if (option.matches(querySelector)) {
+      const options = getOptionsFromCollection(event.currentTarget, querySelector);
+      const nextActiveIndex = Array.from(options).indexOf(option);
+      if (nextActiveIndex > -1) {
+        setActiveOption(nextActiveIndex, event.currentTarget, option);
+      }
+    }
   };
   const handleKeyDown = event => {
     // this stops the event dispatched to the option rebounding back and starting an infinite loop
     if (event.target !== event.currentTarget) {
       return;
     }
-    const options = getOptions(event.currentTarget, selector);
+    const options = getOptionsFromCollection(event.currentTarget, querySelector);
     if (options) {
       if (isAriaDirectionKey(event)) {
         const nextActiveIndex = getNextEnabledItem$1(event, options, activeIndex);
         if (nextActiveIndex !== undefined && nextActiveIndex !== activeIndex) {
           event.preventDefault();
-          setActiveIndex(nextActiveIndex);
+          setActiveOption(nextActiveIndex, event.currentTarget, options.item(nextActiveIndex));
         }
       } else if (activeIndex !== undefined) {
         // forward events onto the underlying option - this lets consumers place onKeyDown handlers on their own components
@@ -7391,7 +7380,7 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     ref: internalRef,
-    tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0
+    tabIndex: tabIndex
   }));
 });
 const getNextIndexFromKeycode = (event, length, activeIndex) => {
@@ -7471,7 +7460,7 @@ const Root$1 = /*#__PURE__*/React__default.forwardRef(function Listbox2(props, r
     id: id,
     ref: ref,
     role: "listbox",
-    selector: customSelector ? `${DEFAULT_SELECTOR}, ${customSelector}` : DEFAULT_SELECTOR
+    querySelector: customSelector ? `${DEFAULT_SELECTOR}, ${customSelector}` : DEFAULT_SELECTOR
   }), children)));
 });
 const createListboxValueSetter = (multiple, setValue) => nextValue => {
@@ -8040,9 +8029,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
     readOnly,
     tags
   } = useSelect2Context();
-  const contentClassName = cn('truncate', {
-    'flex gap-1': tags
-  });
+  const contentClassName = cn('truncate flex items-center gap-1');
   const currentValue = children.find(matchesValue(value));
   let output;
   if (currentValue) {
@@ -8056,7 +8043,6 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
       }, currentValue.props.children);
     } else {
       output = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, currentValue.props.icon ? typeof currentValue.props.icon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
-        className: "mr-1",
         name: currentValue.props.icon
       }) : currentValue.props.icon : null, currentValue.props.children);
     }