@react-stately/combobox 3.12.1 → 3.13.0

package/dist/useComboBoxState.mjs

@@ -1,6 +1,6 @@
 import {useFormValidationState as $49BJP$useFormValidationState} from "@react-stately/form";
 import {getChildNodes as $49BJP$getChildNodes} from "@react-stately/collections";
-import {useSingleSelectListState as $49BJP$useSingleSelectListState, ListCollection as $49BJP$ListCollection} from "@react-stately/list";
+import {useListState as $49BJP$useListState, ListCollection as $49BJP$ListCollection} from "@react-stately/list";
 import {useOverlayTriggerState as $49BJP$useOverlayTriggerState} from "@react-stately/overlays";
 import {useState as $49BJP$useState, useMemo as $49BJP$useMemo, useRef as $49BJP$useRef, useCallback as $49BJP$useCallback, useEffect as $49BJP$useEffect} from "react";
 import {useControlledState as $49BJP$useControlledState} from "@react-stately/utils";
@@ -21,30 +21,88 @@ import {useControlledState as $49BJP$useControlledState} from "@react-stately/ut
 
 
 
+const $a9e7382a7d111cb5$var$EMPTY_VALUE = [];
 function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
     var _collection_getItem;
-    let { defaultFilter: defaultFilter, menuTrigger: menuTrigger = 'input', allowsEmptyCollection: allowsEmptyCollection = false, allowsCustomValue: allowsCustomValue, shouldCloseOnBlur: shouldCloseOnBlur = true } = props;
+    let { defaultFilter: defaultFilter, menuTrigger: menuTrigger = 'input', allowsEmptyCollection: allowsEmptyCollection = false, allowsCustomValue: allowsCustomValue, shouldCloseOnBlur: shouldCloseOnBlur = true, selectionMode: selectionMode = 'single' } = props;
     let [showAllItems, setShowAllItems] = (0, $49BJP$useState)(false);
     let [isFocused, setFocusedState] = (0, $49BJP$useState)(false);
     let [focusStrategy, setFocusStrategy] = (0, $49BJP$useState)(null);
-    let onSelectionChange = (key)=>{
-        if (props.onSelectionChange) props.onSelectionChange(key);
-        // If key is the same, reset the inputValue and close the menu
-        // (scenario: user clicks on already selected option)
-        if (key === selectedKey) {
-            resetInputValue();
-            closeMenu();
+    let defaultValue = (0, $49BJP$useMemo)(()=>{
+        var _props_defaultSelectedKey;
+        return props.defaultValue !== undefined ? props.defaultValue : selectionMode === 'single' ? (_props_defaultSelectedKey = props.defaultSelectedKey) !== null && _props_defaultSelectedKey !== void 0 ? _props_defaultSelectedKey : null : [];
+    }, [
+        props.defaultValue,
+        props.defaultSelectedKey,
+        selectionMode
+    ]);
+    let value = (0, $49BJP$useMemo)(()=>{
+        return props.value !== undefined ? props.value : selectionMode === 'single' ? props.selectedKey : undefined;
+    }, [
+        props.value,
+        props.selectedKey,
+        selectionMode
+    ]);
+    let [controlledValue, setControlledValue] = (0, $49BJP$useControlledState)(value, defaultValue, props.onChange);
+    // Only display the first selected item if in single selection mode but the value is an array.
+    let displayValue = selectionMode === 'single' && Array.isArray(controlledValue) ? controlledValue[0] : controlledValue;
+    let setValue = (value)=>{
+        if (selectionMode === 'single') {
+            var _props_onSelectionChange;
+            var _value_;
+            let key = Array.isArray(value) ? (_value_ = value[0]) !== null && _value_ !== void 0 ? _value_ : null : value;
+            setControlledValue(key);
+            if (key !== displayValue) (_props_onSelectionChange = props.onSelectionChange) === null || _props_onSelectionChange === void 0 ? void 0 : _props_onSelectionChange.call(props, key);
+        } else {
+            let keys = [];
+            if (Array.isArray(value)) keys = value;
+            else if (value != null) keys = [
+                value
+            ];
+            setControlledValue(keys);
         }
     };
     var _props_items;
-    let { collection: collection, selectionManager: selectionManager, selectedKey: selectedKey, setSelectedKey: setSelectedKey, selectedItem: selectedItem, disabledKeys: disabledKeys } = (0, $49BJP$useSingleSelectListState)({
+    let { collection: collection, selectionManager: selectionManager, disabledKeys: disabledKeys } = (0, $49BJP$useListState)({
         ...props,
-        onSelectionChange: onSelectionChange,
-        items: (_props_items = props.items) !== null && _props_items !== void 0 ? _props_items : props.defaultItems
+        items: (_props_items = props.items) !== null && _props_items !== void 0 ? _props_items : props.defaultItems,
+        selectionMode: selectionMode,
+        disallowEmptySelection: selectionMode === 'single',
+        allowDuplicateSelectionEvents: true,
+        selectedKeys: (0, $49BJP$useMemo)(()=>$a9e7382a7d111cb5$var$convertValue(displayValue), [
+            displayValue
+        ]),
+        onSelectionChange: (keys)=>{
+            // impossible, but TS doesn't know that
+            if (keys === 'all') return;
+            if (selectionMode === 'single') {
+                var _keys_values_next_value;
+                let key = (_keys_values_next_value = keys.values().next().value) !== null && _keys_values_next_value !== void 0 ? _keys_values_next_value : null;
+                if (key === displayValue) {
+                    var _props_onSelectionChange;
+                    (_props_onSelectionChange = props.onSelectionChange) === null || _props_onSelectionChange === void 0 ? void 0 : _props_onSelectionChange.call(props, key);
+                    // If key is the same, reset the inputValue and close the menu
+                    // (scenario: user clicks on already selected option)
+                    resetInputValue();
+                    closeMenu();
+                } else setValue(key);
+            } else setValue([
+                ...keys
+            ]);
+        }
     });
+    let selectedKey = selectionMode === 'single' ? selectionManager.firstSelectedKey : null;
+    let selectedItems = (0, $49BJP$useMemo)(()=>{
+        return [
+            ...selectionManager.selectedKeys
+        ].map((key)=>collection.getItem(key)).filter((item)=>item != null);
+    }, [
+        selectionManager.selectedKeys,
+        collection
+    ]);
     let [inputValue, setInputValue] = (0, $49BJP$useControlledState)(props.inputValue, $a9e7382a7d111cb5$var$getDefaultInputValue(props.defaultInputValue, selectedKey, collection) || '', props.onInputChange);
-    let [initialSelectedKey] = (0, $49BJP$useState)(selectedKey);
-    let [initialValue] = (0, $49BJP$useState)(inputValue);
+    let [initialValue] = (0, $49BJP$useState)(displayValue);
+    let [initialInputValue] = (0, $49BJP$useState)(inputValue);
     // Preserve original collection so we can show all items on demand
     let originalCollection = collection;
     let filteredCollection = (0, $49BJP$useMemo)(()=>// No default filter if items are controlled.
@@ -125,8 +183,7 @@ function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
         setLastValue(itemText);
         setInputValue(itemText);
     };
-    var _props_selectedKey, _ref;
-    let lastSelectedKey = (0, $49BJP$useRef)((_ref = (_props_selectedKey = props.selectedKey) !== null && _props_selectedKey !== void 0 ? _props_selectedKey : props.defaultSelectedKey) !== null && _ref !== void 0 ? _ref : null);
+    let lastValueRef = (0, $49BJP$useRef)(displayValue);
     var _collection_getItem_textValue;
     let lastSelectedKeyText = (0, $49BJP$useRef)(selectedKey != null ? (_collection_getItem_textValue = (_collection_getItem = collection.getItem(selectedKey)) === null || _collection_getItem === void 0 ? void 0 : _collection_getItem.textValue) !== null && _collection_getItem_textValue !== void 0 ? _collection_getItem_textValue : '' : '');
     // intentional omit dependency array, want this to happen on every render
@@ -140,19 +197,19 @@ function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
         // but we are currently showing all items via button press
         if (!showAllItems && !allowsEmptyCollection && triggerState.isOpen && filteredCollection.size === 0) closeMenu();
         // Close when an item is selected.
-        if (selectedKey != null && selectedKey !== lastSelectedKey.current) closeMenu();
+        if (displayValue != null && displayValue !== lastValueRef.current && selectionMode === 'single') closeMenu();
         // Clear focused key when input value changes and display filtered collection again.
         if (inputValue !== lastValue) {
             selectionManager.setFocusedKey(null);
             setShowAllItems(false);
-            // Set selectedKey to null when the user clears the input.
+            // Set value to null when the user clears the input.
             // If controlled, this is the application developer's responsibility.
-            if (inputValue === '' && (props.inputValue === undefined || props.selectedKey === undefined)) setSelectedKey(null);
+            if (selectionMode === 'single' && inputValue === '' && (props.inputValue === undefined || value === undefined)) setValue(null);
         }
-        // If the selectedKey changed, update the input value.
-        // Do nothing if both inputValue and selectedKey are controlled.
+        // If the value changed, update the input value.
+        // Do nothing if both inputValue and value are controlled.
         // In this case, it's the user's responsibility to update inputValue in onSelectionChange.
-        if (selectedKey !== lastSelectedKey.current && (props.inputValue === undefined || props.selectedKey === undefined)) resetInputValue();
+        if (displayValue !== lastValueRef.current && (props.inputValue === undefined || value === undefined)) resetInputValue();
         else if (lastValue !== inputValue) setLastValue(inputValue);
         var _collection_getItem_textValue;
         // Update the inputValue if the selected item's text changes from its last tracked value.
@@ -160,23 +217,25 @@ function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
         // Only reset if the user isn't currently within the field so we don't erroneously modify user input.
         // If inputValue is controlled, it is the user's responsibility to update the inputValue when items change.
         let selectedItemText = selectedKey != null ? (_collection_getItem_textValue = (_collection_getItem = collection.getItem(selectedKey)) === null || _collection_getItem === void 0 ? void 0 : _collection_getItem.textValue) !== null && _collection_getItem_textValue !== void 0 ? _collection_getItem_textValue : '' : '';
-        if (!isFocused && selectedKey != null && props.inputValue === undefined && selectedKey === lastSelectedKey.current) {
+        if (!isFocused && selectedKey != null && props.inputValue === undefined && selectedKey === lastValueRef.current) {
             if (lastSelectedKeyText.current !== selectedItemText) {
                 setLastValue(selectedItemText);
                 setInputValue(selectedItemText);
             }
         }
-        lastSelectedKey.current = selectedKey;
+        lastValueRef.current = displayValue;
         lastSelectedKeyText.current = selectedItemText;
     });
     let validation = (0, $49BJP$useFormValidationState)({
         ...props,
-        value: (0, $49BJP$useMemo)(()=>({
+        value: (0, $49BJP$useMemo)(()=>Array.isArray(displayValue) && displayValue.length === 0 ? null : {
                 inputValue: inputValue,
+                value: displayValue,
                 selectedKey: selectedKey
-            }), [
+            }, [
             inputValue,
-            selectedKey
+            selectedKey,
+            displayValue
         ])
     });
     // Revert input value and close menu
@@ -185,15 +244,17 @@ function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
         else commitSelection();
     };
     let commitCustomValue = ()=>{
-        lastSelectedKey.current = null;
-        setSelectedKey(null);
+        let value = selectionMode === 'multiple' ? $a9e7382a7d111cb5$var$EMPTY_VALUE : null;
+        lastValueRef.current = value;
+        setValue(value);
         closeMenu();
     };
     let commitSelection = ()=>{
         // If multiple things are controlled, call onSelectionChange
-        if (props.selectedKey !== undefined && props.inputValue !== undefined) {
-            var _props_onSelectionChange, _collection_getItem;
+        if (value !== undefined && props.inputValue !== undefined) {
+            var _props_onSelectionChange, _props_onChange, _collection_getItem;
             (_props_onSelectionChange = props.onSelectionChange) === null || _props_onSelectionChange === void 0 ? void 0 : _props_onSelectionChange.call(props, selectedKey);
+            (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, displayValue);
             var _collection_getItem_textValue;
             // Stop menu from reopening from useEffect
             let itemText = selectedKey != null ? (_collection_getItem_textValue = (_collection_getItem = collection.getItem(selectedKey)) === null || _collection_getItem === void 0 ? void 0 : _collection_getItem.textValue) !== null && _collection_getItem_textValue !== void 0 ? _collection_getItem_textValue : '' : '';
@@ -218,8 +279,8 @@ function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
         if (triggerState.isOpen && selectionManager.focusedKey != null) {
             // Reset inputValue and close menu here if the selected key is already the focused key. Otherwise
             // fire onSelectionChange to allow the application to control the closing.
-            if (selectedKey === selectionManager.focusedKey) commitSelection();
-            else setSelectedKey(selectionManager.focusedKey);
+            if (selectionManager.isSelected(selectionManager.focusedKey) && selectionMode === 'single') commitSelection();
+            else selectionManager.select(selectionManager.focusedKey);
         } else commitValue();
     };
     let valueOnFocus = (0, $49BJP$useRef)(inputValue);
@@ -246,8 +307,8 @@ function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
         lastCollection
     ]);
     var _props_defaultSelectedKey;
-    let defaultSelectedKey = (_props_defaultSelectedKey = props.defaultSelectedKey) !== null && _props_defaultSelectedKey !== void 0 ? _props_defaultSelectedKey : initialSelectedKey;
-    var _getDefaultInputValue;
+    let defaultSelectedKey = (_props_defaultSelectedKey = props.defaultSelectedKey) !== null && _props_defaultSelectedKey !== void 0 ? _props_defaultSelectedKey : selectionMode === 'single' ? initialValue : null;
+    var _selectedItems_, _getDefaultInputValue;
     return {
         ...validation,
         ...triggerState,
@@ -256,16 +317,20 @@ function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
         open: open,
         close: commitValue,
         selectionManager: selectionManager,
+        value: displayValue,
+        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : initialValue,
+        setValue: setValue,
         selectedKey: selectedKey,
+        selectedItems: selectedItems,
         defaultSelectedKey: defaultSelectedKey,
-        setSelectedKey: setSelectedKey,
+        setSelectedKey: setValue,
         disabledKeys: disabledKeys,
         isFocused: isFocused,
         setFocused: setFocused,
-        selectedItem: selectedItem,
+        selectedItem: (_selectedItems_ = selectedItems[0]) !== null && _selectedItems_ !== void 0 ? _selectedItems_ : null,
         collection: displayedCollection,
         inputValue: inputValue,
-        defaultInputValue: (_getDefaultInputValue = $a9e7382a7d111cb5$var$getDefaultInputValue(props.defaultInputValue, defaultSelectedKey, collection)) !== null && _getDefaultInputValue !== void 0 ? _getDefaultInputValue : initialValue,
+        defaultInputValue: (_getDefaultInputValue = $a9e7382a7d111cb5$var$getDefaultInputValue(props.defaultInputValue, defaultSelectedKey, collection)) !== null && _getDefaultInputValue !== void 0 ? _getDefaultInputValue : initialInputValue,
         setInputValue: setInputValue,
         commit: commit,
         revert: revert
@@ -302,6 +367,13 @@ function $a9e7382a7d111cb5$var$getDefaultInputValue(defaultInputValue, selectedK
     }
     return defaultInputValue;
 }
+function $a9e7382a7d111cb5$var$convertValue(value) {
+    if (value === undefined) return undefined;
+    if (value === null) return [];
+    return Array.isArray(value) ? value : [
+        value
+    ];
+}
 
 
 export {$a9e7382a7d111cb5$export$b453a3bfd4a5fa9e as useComboBoxState};

package/dist/useComboBoxState.module.js

@@ -1,6 +1,6 @@
 import {useFormValidationState as $49BJP$useFormValidationState} from "@react-stately/form";
 import {getChildNodes as $49BJP$getChildNodes} from "@react-stately/collections";
-import {useSingleSelectListState as $49BJP$useSingleSelectListState, ListCollection as $49BJP$ListCollection} from "@react-stately/list";
+import {useListState as $49BJP$useListState, ListCollection as $49BJP$ListCollection} from "@react-stately/list";
 import {useOverlayTriggerState as $49BJP$useOverlayTriggerState} from "@react-stately/overlays";
 import {useState as $49BJP$useState, useMemo as $49BJP$useMemo, useRef as $49BJP$useRef, useCallback as $49BJP$useCallback, useEffect as $49BJP$useEffect} from "react";
 import {useControlledState as $49BJP$useControlledState} from "@react-stately/utils";
@@ -21,30 +21,88 @@ import {useControlledState as $49BJP$useControlledState} from "@react-stately/ut
 
 
 
+const $a9e7382a7d111cb5$var$EMPTY_VALUE = [];
 function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
     var _collection_getItem;
-    let { defaultFilter: defaultFilter, menuTrigger: menuTrigger = 'input', allowsEmptyCollection: allowsEmptyCollection = false, allowsCustomValue: allowsCustomValue, shouldCloseOnBlur: shouldCloseOnBlur = true } = props;
+    let { defaultFilter: defaultFilter, menuTrigger: menuTrigger = 'input', allowsEmptyCollection: allowsEmptyCollection = false, allowsCustomValue: allowsCustomValue, shouldCloseOnBlur: shouldCloseOnBlur = true, selectionMode: selectionMode = 'single' } = props;
     let [showAllItems, setShowAllItems] = (0, $49BJP$useState)(false);
     let [isFocused, setFocusedState] = (0, $49BJP$useState)(false);
     let [focusStrategy, setFocusStrategy] = (0, $49BJP$useState)(null);
-    let onSelectionChange = (key)=>{
-        if (props.onSelectionChange) props.onSelectionChange(key);
-        // If key is the same, reset the inputValue and close the menu
-        // (scenario: user clicks on already selected option)
-        if (key === selectedKey) {
-            resetInputValue();
-            closeMenu();
+    let defaultValue = (0, $49BJP$useMemo)(()=>{
+        var _props_defaultSelectedKey;
+        return props.defaultValue !== undefined ? props.defaultValue : selectionMode === 'single' ? (_props_defaultSelectedKey = props.defaultSelectedKey) !== null && _props_defaultSelectedKey !== void 0 ? _props_defaultSelectedKey : null : [];
+    }, [
+        props.defaultValue,
+        props.defaultSelectedKey,
+        selectionMode
+    ]);
+    let value = (0, $49BJP$useMemo)(()=>{
+        return props.value !== undefined ? props.value : selectionMode === 'single' ? props.selectedKey : undefined;
+    }, [
+        props.value,
+        props.selectedKey,
+        selectionMode
+    ]);
+    let [controlledValue, setControlledValue] = (0, $49BJP$useControlledState)(value, defaultValue, props.onChange);
+    // Only display the first selected item if in single selection mode but the value is an array.
+    let displayValue = selectionMode === 'single' && Array.isArray(controlledValue) ? controlledValue[0] : controlledValue;
+    let setValue = (value)=>{
+        if (selectionMode === 'single') {
+            var _props_onSelectionChange;
+            var _value_;
+            let key = Array.isArray(value) ? (_value_ = value[0]) !== null && _value_ !== void 0 ? _value_ : null : value;
+            setControlledValue(key);
+            if (key !== displayValue) (_props_onSelectionChange = props.onSelectionChange) === null || _props_onSelectionChange === void 0 ? void 0 : _props_onSelectionChange.call(props, key);
+        } else {
+            let keys = [];
+            if (Array.isArray(value)) keys = value;
+            else if (value != null) keys = [
+                value
+            ];
+            setControlledValue(keys);
         }
     };
     var _props_items;
-    let { collection: collection, selectionManager: selectionManager, selectedKey: selectedKey, setSelectedKey: setSelectedKey, selectedItem: selectedItem, disabledKeys: disabledKeys } = (0, $49BJP$useSingleSelectListState)({
+    let { collection: collection, selectionManager: selectionManager, disabledKeys: disabledKeys } = (0, $49BJP$useListState)({
         ...props,
-        onSelectionChange: onSelectionChange,
-        items: (_props_items = props.items) !== null && _props_items !== void 0 ? _props_items : props.defaultItems
+        items: (_props_items = props.items) !== null && _props_items !== void 0 ? _props_items : props.defaultItems,
+        selectionMode: selectionMode,
+        disallowEmptySelection: selectionMode === 'single',
+        allowDuplicateSelectionEvents: true,
+        selectedKeys: (0, $49BJP$useMemo)(()=>$a9e7382a7d111cb5$var$convertValue(displayValue), [
+            displayValue
+        ]),
+        onSelectionChange: (keys)=>{
+            // impossible, but TS doesn't know that
+            if (keys === 'all') return;
+            if (selectionMode === 'single') {
+                var _keys_values_next_value;
+                let key = (_keys_values_next_value = keys.values().next().value) !== null && _keys_values_next_value !== void 0 ? _keys_values_next_value : null;
+                if (key === displayValue) {
+                    var _props_onSelectionChange;
+                    (_props_onSelectionChange = props.onSelectionChange) === null || _props_onSelectionChange === void 0 ? void 0 : _props_onSelectionChange.call(props, key);
+                    // If key is the same, reset the inputValue and close the menu
+                    // (scenario: user clicks on already selected option)
+                    resetInputValue();
+                    closeMenu();
+                } else setValue(key);
+            } else setValue([
+                ...keys
+            ]);
+        }
     });
+    let selectedKey = selectionMode === 'single' ? selectionManager.firstSelectedKey : null;
+    let selectedItems = (0, $49BJP$useMemo)(()=>{
+        return [
+            ...selectionManager.selectedKeys
+        ].map((key)=>collection.getItem(key)).filter((item)=>item != null);
+    }, [
+        selectionManager.selectedKeys,
+        collection
+    ]);
     let [inputValue, setInputValue] = (0, $49BJP$useControlledState)(props.inputValue, $a9e7382a7d111cb5$var$getDefaultInputValue(props.defaultInputValue, selectedKey, collection) || '', props.onInputChange);
-    let [initialSelectedKey] = (0, $49BJP$useState)(selectedKey);
-    let [initialValue] = (0, $49BJP$useState)(inputValue);
+    let [initialValue] = (0, $49BJP$useState)(displayValue);
+    let [initialInputValue] = (0, $49BJP$useState)(inputValue);
     // Preserve original collection so we can show all items on demand
     let originalCollection = collection;
     let filteredCollection = (0, $49BJP$useMemo)(()=>// No default filter if items are controlled.
@@ -125,8 +183,7 @@ function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
         setLastValue(itemText);
         setInputValue(itemText);
     };
-    var _props_selectedKey, _ref;
-    let lastSelectedKey = (0, $49BJP$useRef)((_ref = (_props_selectedKey = props.selectedKey) !== null && _props_selectedKey !== void 0 ? _props_selectedKey : props.defaultSelectedKey) !== null && _ref !== void 0 ? _ref : null);
+    let lastValueRef = (0, $49BJP$useRef)(displayValue);
     var _collection_getItem_textValue;
     let lastSelectedKeyText = (0, $49BJP$useRef)(selectedKey != null ? (_collection_getItem_textValue = (_collection_getItem = collection.getItem(selectedKey)) === null || _collection_getItem === void 0 ? void 0 : _collection_getItem.textValue) !== null && _collection_getItem_textValue !== void 0 ? _collection_getItem_textValue : '' : '');
     // intentional omit dependency array, want this to happen on every render
@@ -140,19 +197,19 @@ function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
         // but we are currently showing all items via button press
         if (!showAllItems && !allowsEmptyCollection && triggerState.isOpen && filteredCollection.size === 0) closeMenu();
         // Close when an item is selected.
-        if (selectedKey != null && selectedKey !== lastSelectedKey.current) closeMenu();
+        if (displayValue != null && displayValue !== lastValueRef.current && selectionMode === 'single') closeMenu();
         // Clear focused key when input value changes and display filtered collection again.
         if (inputValue !== lastValue) {
             selectionManager.setFocusedKey(null);
             setShowAllItems(false);
-            // Set selectedKey to null when the user clears the input.
+            // Set value to null when the user clears the input.
             // If controlled, this is the application developer's responsibility.
-            if (inputValue === '' && (props.inputValue === undefined || props.selectedKey === undefined)) setSelectedKey(null);
+            if (selectionMode === 'single' && inputValue === '' && (props.inputValue === undefined || value === undefined)) setValue(null);
         }
-        // If the selectedKey changed, update the input value.
-        // Do nothing if both inputValue and selectedKey are controlled.
+        // If the value changed, update the input value.
+        // Do nothing if both inputValue and value are controlled.
         // In this case, it's the user's responsibility to update inputValue in onSelectionChange.
-        if (selectedKey !== lastSelectedKey.current && (props.inputValue === undefined || props.selectedKey === undefined)) resetInputValue();
+        if (displayValue !== lastValueRef.current && (props.inputValue === undefined || value === undefined)) resetInputValue();
         else if (lastValue !== inputValue) setLastValue(inputValue);
         var _collection_getItem_textValue;
         // Update the inputValue if the selected item's text changes from its last tracked value.
@@ -160,23 +217,25 @@ function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
         // Only reset if the user isn't currently within the field so we don't erroneously modify user input.
         // If inputValue is controlled, it is the user's responsibility to update the inputValue when items change.
         let selectedItemText = selectedKey != null ? (_collection_getItem_textValue = (_collection_getItem = collection.getItem(selectedKey)) === null || _collection_getItem === void 0 ? void 0 : _collection_getItem.textValue) !== null && _collection_getItem_textValue !== void 0 ? _collection_getItem_textValue : '' : '';
-        if (!isFocused && selectedKey != null && props.inputValue === undefined && selectedKey === lastSelectedKey.current) {
+        if (!isFocused && selectedKey != null && props.inputValue === undefined && selectedKey === lastValueRef.current) {
             if (lastSelectedKeyText.current !== selectedItemText) {
                 setLastValue(selectedItemText);
                 setInputValue(selectedItemText);
             }
         }
-        lastSelectedKey.current = selectedKey;
+        lastValueRef.current = displayValue;
         lastSelectedKeyText.current = selectedItemText;
     });
     let validation = (0, $49BJP$useFormValidationState)({
         ...props,
-        value: (0, $49BJP$useMemo)(()=>({
+        value: (0, $49BJP$useMemo)(()=>Array.isArray(displayValue) && displayValue.length === 0 ? null : {
                 inputValue: inputValue,
+                value: displayValue,
                 selectedKey: selectedKey
-            }), [
+            }, [
             inputValue,
-            selectedKey
+            selectedKey,
+            displayValue
         ])
     });
     // Revert input value and close menu
@@ -185,15 +244,17 @@ function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
         else commitSelection();
     };
     let commitCustomValue = ()=>{
-        lastSelectedKey.current = null;
-        setSelectedKey(null);
+        let value = selectionMode === 'multiple' ? $a9e7382a7d111cb5$var$EMPTY_VALUE : null;
+        lastValueRef.current = value;
+        setValue(value);
         closeMenu();
     };
     let commitSelection = ()=>{
         // If multiple things are controlled, call onSelectionChange
-        if (props.selectedKey !== undefined && props.inputValue !== undefined) {
-            var _props_onSelectionChange, _collection_getItem;
+        if (value !== undefined && props.inputValue !== undefined) {
+            var _props_onSelectionChange, _props_onChange, _collection_getItem;
             (_props_onSelectionChange = props.onSelectionChange) === null || _props_onSelectionChange === void 0 ? void 0 : _props_onSelectionChange.call(props, selectedKey);
+            (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, displayValue);
             var _collection_getItem_textValue;
             // Stop menu from reopening from useEffect
             let itemText = selectedKey != null ? (_collection_getItem_textValue = (_collection_getItem = collection.getItem(selectedKey)) === null || _collection_getItem === void 0 ? void 0 : _collection_getItem.textValue) !== null && _collection_getItem_textValue !== void 0 ? _collection_getItem_textValue : '' : '';
@@ -218,8 +279,8 @@ function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
         if (triggerState.isOpen && selectionManager.focusedKey != null) {
             // Reset inputValue and close menu here if the selected key is already the focused key. Otherwise
             // fire onSelectionChange to allow the application to control the closing.
-            if (selectedKey === selectionManager.focusedKey) commitSelection();
-            else setSelectedKey(selectionManager.focusedKey);
+            if (selectionManager.isSelected(selectionManager.focusedKey) && selectionMode === 'single') commitSelection();
+            else selectionManager.select(selectionManager.focusedKey);
         } else commitValue();
     };
     let valueOnFocus = (0, $49BJP$useRef)(inputValue);
@@ -246,8 +307,8 @@ function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
         lastCollection
     ]);
     var _props_defaultSelectedKey;
-    let defaultSelectedKey = (_props_defaultSelectedKey = props.defaultSelectedKey) !== null && _props_defaultSelectedKey !== void 0 ? _props_defaultSelectedKey : initialSelectedKey;
-    var _getDefaultInputValue;
+    let defaultSelectedKey = (_props_defaultSelectedKey = props.defaultSelectedKey) !== null && _props_defaultSelectedKey !== void 0 ? _props_defaultSelectedKey : selectionMode === 'single' ? initialValue : null;
+    var _selectedItems_, _getDefaultInputValue;
     return {
         ...validation,
         ...triggerState,
@@ -256,16 +317,20 @@ function $a9e7382a7d111cb5$export$b453a3bfd4a5fa9e(props) {
         open: open,
         close: commitValue,
         selectionManager: selectionManager,
+        value: displayValue,
+        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : initialValue,
+        setValue: setValue,
         selectedKey: selectedKey,
+        selectedItems: selectedItems,
         defaultSelectedKey: defaultSelectedKey,
-        setSelectedKey: setSelectedKey,
+        setSelectedKey: setValue,
         disabledKeys: disabledKeys,
         isFocused: isFocused,
         setFocused: setFocused,
-        selectedItem: selectedItem,
+        selectedItem: (_selectedItems_ = selectedItems[0]) !== null && _selectedItems_ !== void 0 ? _selectedItems_ : null,
         collection: displayedCollection,
         inputValue: inputValue,
-        defaultInputValue: (_getDefaultInputValue = $a9e7382a7d111cb5$var$getDefaultInputValue(props.defaultInputValue, defaultSelectedKey, collection)) !== null && _getDefaultInputValue !== void 0 ? _getDefaultInputValue : initialValue,
+        defaultInputValue: (_getDefaultInputValue = $a9e7382a7d111cb5$var$getDefaultInputValue(props.defaultInputValue, defaultSelectedKey, collection)) !== null && _getDefaultInputValue !== void 0 ? _getDefaultInputValue : initialInputValue,
         setInputValue: setInputValue,
         commit: commit,
         revert: revert
@@ -302,6 +367,13 @@ function $a9e7382a7d111cb5$var$getDefaultInputValue(defaultInputValue, selectedK
     }
     return defaultInputValue;
 }
+function $a9e7382a7d111cb5$var$convertValue(value) {
+    if (value === undefined) return undefined;
+    if (value === null) return [];
+    return Array.isArray(value) ? value : [
+        value
+    ];
+}
 
 
 export {$a9e7382a7d111cb5$export$b453a3bfd4a5fa9e as useComboBoxState};