@react-stately/combobox - npm Package Compare versions

Comparing version 3.0.0-nightly.2547 to 3.0.0-nightly.2555

dist/main.js

@@ -28,3 +28,3 @@ var {
 function useComboBoxState(props) {
-  var _props$defaultInputVa, _props$items;
+  var _props$defaultInputVa, _props$items, _ref, _props$selectedKey;
 
@@ -40,2 +40,18 @@ let {
   let [inputValue, setInputValue] = useControlledState(props.inputValue, (_props$defaultInputVa = props.defaultInputValue) != null ? _props$defaultInputVa : '', props.onInputChange);
+
+  let onSelectionChange = key => {
+    if (props.onSelectionChange) {
+      props.onSelectionChange(key);
+    } // If open state or selectedKey is uncontrolled and key is the same, reset the inputValue and close the menu
+    // (scenario: user clicks on already selected option)
+
+
+    if (props.isOpen === undefined || props.selectedKey === undefined) {
+      if (key === selectedKey) {
+        resetInputValue();
+        triggerState.close();
+      }
+    }
+  };
+
   let {
@@ -49,2 +65,3 @@ collection,
   } = useSingleSelectListState(_babelRuntimeHelpersExtends({}, props, {
+    onSelectionChange,
     items: (_props$items = props.items) != null ? _props$items : props.defaultItems
@@ -63,2 +80,11 @@ }));
 
+  let toggle = focusStrategy => {
+    // If the menu is closed and there is nothing to display, early return so toggle isn't called to prevent extraneous onOpenChange
+    if (!(allowsEmptyCollection || filteredCollection.size > 0) && !triggerState.isOpen) {
+      return;
+    }
+
+    triggerState.toggle(focusStrategy);
+  };
+
   let lastValue = useRef(inputValue);
@@ -75,3 +101,3 @@
   let isInitialRender = useRef(true);
-  let lastSelectedKey = useRef(null);
+  let lastSelectedKey = useRef((_ref = (_props$selectedKey = props.selectedKey) != null ? _props$selectedKey : props.defaultSelectedKey) != null ? _ref : null);
   useEffect(() => {
@@ -102,2 +128,7 @@ // If open state or inputValue is uncontrolled, open and close automatically when the input value changes,
       }
+    } // If it is the intial render and inputValue isn't controlled nor has an intial value, set input to match current selected key if any
+
+
+    if (isInitialRender.current && props.inputValue === undefined && props.defaultInputValue === undefined) {
+      resetInputValue();
     } // If the selectedKey changed, update the input value.
@@ -109,3 +140,3 @@ // Do nothing if both inputValue and selectedKey are controlled.
 
-    if (selectedKey !== lastSelectedKey.current && (props.inputValue === undefined || props.selectedKey === undefined) && !(isInitialRender.current && props.defaultInputValue !== undefined)) {
+    if (selectedKey !== lastSelectedKey.current && (props.inputValue === undefined || props.selectedKey === undefined)) {
       resetInputValue();
@@ -128,14 +159,14 @@ } else {
     let shouldClose = false;
+    lastSelectedKey.current = null;
+    setSelectedKey(null); // If previous key was already null, need to manually call onSelectionChange since it won't be triggered by a setSelectedKey call
+    // This allows the application to control whether or not to close the menu on custom value commit
 
-    if (!allowsCustomValue) {
-      resetInputValue();
-      shouldClose = inputValue === lastValue.current;
-    } else {
-      lastSelectedKey.current = null;
-      setSelectedKey(null);
-      shouldClose = selectedKey === null;
-    } // Close if no other event will be fired. Otherwise, allow the
+    if (selectedKey === null && props.onSelectionChange) {
+      props.onSelectionChange(null);
+    } // Should close menu ourselves if component open state or selected key is uncontrolled and therefore won't be closed by a user defined event handler
+
+
+    shouldClose = props.isOpen == null || props.selectedKey === undefined; // Close if no other event will be fired. Otherwise, allow the
     // application to control this based on that event.
 
-
     if (shouldClose) {
@@ -148,5 +179,6 @@ triggerState.close();
     if (triggerState.isOpen && selectionManager.focusedKey != null) {
-      // Close here if the selected key is already the focused key. Otherwise
+      // 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) {
+        resetInputValue();
         triggerState.close();
@@ -156,3 +188,3 @@ } else {
       }
-    } else {
+    } else if (allowsCustomValue) {
       commitCustomValue();
@@ -168,3 +200,10 @@ }
     } else if (shouldCloseOnBlur) {
-      commitCustomValue();
+      if (allowsCustomValue) {
+        commitCustomValue();
+      } else {
+        resetInputValue(); // Close menu if blurring away from the combobox
+        // Specifically handles case where user clicks away from the field
+
+        triggerState.close();
+      }
     }
@@ -176,2 +215,3 @@
   return _babelRuntimeHelpersExtends({}, triggerState, {
+    toggle,
     open,
@@ -178,0 +218,0 @@ selectionManager,

dist/module.js

@@ -7,3 +7,3 @@ import { useMenuTriggerState } from "@react-stately/menu";
 export function useComboBoxState(props) {
-  var _props$defaultInputVa, _props$items;
+  var _props$defaultInputVa, _props$items, _ref, _props$selectedKey;
 
@@ -19,2 +19,18 @@ let {
   let [inputValue, setInputValue] = useControlledState(props.inputValue, (_props$defaultInputVa = props.defaultInputValue) != null ? _props$defaultInputVa : '', props.onInputChange);
+
+  let onSelectionChange = key => {
+    if (props.onSelectionChange) {
+      props.onSelectionChange(key);
+    } // If open state or selectedKey is uncontrolled and key is the same, reset the inputValue and close the menu
+    // (scenario: user clicks on already selected option)
+
+
+    if (props.isOpen === undefined || props.selectedKey === undefined) {
+      if (key === selectedKey) {
+        resetInputValue();
+        triggerState.close();
+      }
+    }
+  };
+
   let {
@@ -28,2 +44,3 @@ collection,
   } = useSingleSelectListState(_babelRuntimeHelpersEsmExtends({}, props, {
+    onSelectionChange,
     items: (_props$items = props.items) != null ? _props$items : props.defaultItems
@@ -42,2 +59,11 @@ }));
 
+  let toggle = focusStrategy => {
+    // If the menu is closed and there is nothing to display, early return so toggle isn't called to prevent extraneous onOpenChange
+    if (!(allowsEmptyCollection || filteredCollection.size > 0) && !triggerState.isOpen) {
+      return;
+    }
+
+    triggerState.toggle(focusStrategy);
+  };
+
   let lastValue = useRef(inputValue);
@@ -54,3 +80,3 @@
   let isInitialRender = useRef(true);
-  let lastSelectedKey = useRef(null);
+  let lastSelectedKey = useRef((_ref = (_props$selectedKey = props.selectedKey) != null ? _props$selectedKey : props.defaultSelectedKey) != null ? _ref : null);
   useEffect(() => {
@@ -81,2 +107,7 @@ // If open state or inputValue is uncontrolled, open and close automatically when the input value changes,
       }
+    } // If it is the intial render and inputValue isn't controlled nor has an intial value, set input to match current selected key if any
+
+
+    if (isInitialRender.current && props.inputValue === undefined && props.defaultInputValue === undefined) {
+      resetInputValue();
     } // If the selectedKey changed, update the input value.
@@ -88,3 +119,3 @@ // Do nothing if both inputValue and selectedKey are controlled.
 
-    if (selectedKey !== lastSelectedKey.current && (props.inputValue === undefined || props.selectedKey === undefined) && !(isInitialRender.current && props.defaultInputValue !== undefined)) {
+    if (selectedKey !== lastSelectedKey.current && (props.inputValue === undefined || props.selectedKey === undefined)) {
       resetInputValue();
@@ -107,14 +138,14 @@ } else {
     let shouldClose = false;
+    lastSelectedKey.current = null;
+    setSelectedKey(null); // If previous key was already null, need to manually call onSelectionChange since it won't be triggered by a setSelectedKey call
+    // This allows the application to control whether or not to close the menu on custom value commit
 
-    if (!allowsCustomValue) {
-      resetInputValue();
-      shouldClose = inputValue === lastValue.current;
-    } else {
-      lastSelectedKey.current = null;
-      setSelectedKey(null);
-      shouldClose = selectedKey === null;
-    } // Close if no other event will be fired. Otherwise, allow the
+    if (selectedKey === null && props.onSelectionChange) {
+      props.onSelectionChange(null);
+    } // Should close menu ourselves if component open state or selected key is uncontrolled and therefore won't be closed by a user defined event handler
+
+
+    shouldClose = props.isOpen == null || props.selectedKey === undefined; // Close if no other event will be fired. Otherwise, allow the
     // application to control this based on that event.
 
-
     if (shouldClose) {
@@ -127,5 +158,6 @@ triggerState.close();
     if (triggerState.isOpen && selectionManager.focusedKey != null) {
-      // Close here if the selected key is already the focused key. Otherwise
+      // 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) {
+        resetInputValue();
         triggerState.close();
@@ -135,3 +167,3 @@ } else {
       }
-    } else {
+    } else if (allowsCustomValue) {
       commitCustomValue();
@@ -147,3 +179,10 @@ }
     } else if (shouldCloseOnBlur) {
-      commitCustomValue();
+      if (allowsCustomValue) {
+        commitCustomValue();
+      } else {
+        resetInputValue(); // Close menu if blurring away from the combobox
+        // Specifically handles case where user clicks away from the field
+
+        triggerState.close();
+      }
     }
@@ -155,2 +194,3 @@
   return _babelRuntimeHelpersEsmExtends({}, triggerState, {
+    toggle,
     open,
@@ -157,0 +197,0 @@ selectionManager,

package.json

 {
   "name": "@react-stately/combobox",
-  "version": "3.0.0-nightly.2547+309a8a23",
+  "version": "3.0.0-nightly.2555+cbaffb3e",
   "description": "Spectrum UI components in React",
@@ -21,8 +21,8 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-stately/list": "3.2.3-nightly.2547+309a8a23",
-    "@react-stately/menu": "3.2.2-nightly.2547+309a8a23",
-    "@react-stately/select": "3.1.2-nightly.2547+309a8a23",
-    "@react-stately/utils": "3.0.0-nightly.869+309a8a23",
-    "@react-types/combobox": "3.0.0-nightly.2547+309a8a23",
-    "@react-types/shared": "3.0.0-nightly.869+309a8a23"
+    "@react-stately/list": "3.2.3-nightly.2555+cbaffb3e",
+    "@react-stately/menu": "3.2.2-nightly.2555+cbaffb3e",
+    "@react-stately/select": "3.1.2-nightly.2555+cbaffb3e",
+    "@react-stately/utils": "3.0.0-nightly.877+cbaffb3e",
+    "@react-types/combobox": "3.0.0-nightly.2555+cbaffb3e",
+    "@react-types/shared": "3.0.0-nightly.877+cbaffb3e"
   },
@@ -35,3 +35,3 @@ "peerDependencies": {
   },
-  "gitHead": "309a8a236d27c8766da70c1b416d63172c145c0f"
+  "gitHead": "cbaffb3e7e94f5000c42d9153548021907250dee"
 }

src/useComboBoxState.ts

@@ -50,4 +50,20 @@ /*
 
+  let onSelectionChange = (key) => {
+    if (props.onSelectionChange) {
+      props.onSelectionChange(key);
+    }
+
+    // If open state or selectedKey is uncontrolled and key is the same, reset the inputValue and close the menu
+    // (scenario: user clicks on already selected option)
+    if (props.isOpen === undefined || props.selectedKey === undefined) {
+      if (key === selectedKey) {
+        resetInputValue();
+        triggerState.close();
+      }
+    }
+  };
+
   let {collection, selectionManager, selectedKey, setSelectedKey, selectedItem, disabledKeys} = useSingleSelectListState({
     ...props,
+    onSelectionChange,
     items: props.items ?? props.defaultItems
@@ -71,2 +87,11 @@ });
 
+  let toggle = (focusStrategy?: FocusStrategy) => {
+    // If the menu is closed and there is nothing to display, early return so toggle isn't called to prevent extraneous onOpenChange
+    if (!(allowsEmptyCollection || filteredCollection.size > 0) && !triggerState.isOpen) {
+      return;
+    }
+
+    triggerState.toggle(focusStrategy);
+  };
+
   let lastValue = useRef(inputValue);
@@ -80,3 +105,3 @@ let resetInputValue = () => {
   let isInitialRender = useRef(true);
-  let lastSelectedKey = useRef(null);
+  let lastSelectedKey = useRef(props.selectedKey ?? props.defaultSelectedKey ?? null);
   useEffect(() => {
@@ -126,2 +151,7 @@ // If open state or inputValue is uncontrolled, open and close automatically when the input value changes,
 
+    // If it is the intial render and inputValue isn't controlled nor has an intial value, set input to match current selected key if any
+    if (isInitialRender.current && (props.inputValue === undefined && props.defaultInputValue === undefined)) {
+      resetInputValue();
+    }
+
     // If the selectedKey changed, update the input value.
@@ -133,4 +163,3 @@ // Do nothing if both inputValue and selectedKey are controlled.
       selectedKey !== lastSelectedKey.current &&
-      (props.inputValue === undefined || props.selectedKey === undefined) &&
-      !(isInitialRender.current && props.defaultInputValue !== undefined)
+      (props.inputValue === undefined || props.selectedKey === undefined)
     ) {
@@ -155,11 +184,15 @@ resetInputValue();
     let shouldClose = false;
-    if (!allowsCustomValue) {
-      resetInputValue();
-      shouldClose = inputValue === lastValue.current;
-    } else {
-      lastSelectedKey.current = null;
-      setSelectedKey(null);
-      shouldClose = selectedKey === null;
+    lastSelectedKey.current = null;
+    setSelectedKey(null);
+
+    // If previous key was already null, need to manually call onSelectionChange since it won't be triggered by a setSelectedKey call
+    // This allows the application to control whether or not to close the menu on custom value commit
+    if (selectedKey === null && props.onSelectionChange) {
+      props.onSelectionChange(null);
     }
 
+    // Should close menu ourselves if component open state or selected key is uncontrolled and therefore won't be closed by a user defined event handler
+    shouldClose = props.isOpen == null || props.selectedKey === undefined;
+
+
     // Close if no other event will be fired. Otherwise, allow the
@@ -174,5 +207,6 @@ // application to control this based on that event.
     if (triggerState.isOpen && selectionManager.focusedKey != null) {
-      // Close here if the selected key is already the focused key. Otherwise
+      // 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) {
+        resetInputValue();
         triggerState.close();
@@ -182,3 +216,3 @@ } else {
       }
-    } else {
+    } else if (allowsCustomValue) {
       commitCustomValue();
@@ -194,3 +228,10 @@ }
     } else if (shouldCloseOnBlur) {
-      commitCustomValue();
+      if (allowsCustomValue) {
+        commitCustomValue();
+      } else {
+        resetInputValue();
+        // Close menu if blurring away from the combobox
+        // Specifically handles case where user clicks away from the field
+        triggerState.close();
+      }
     }
@@ -203,2 +244,3 @@
     ...triggerState,
+    toggle,
     open,
@@ -205,0 +247,0 @@ selectionManager,

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

75488

increased by17.42%

Lines of code

644

increased by17.09%

Dependency changes

• Updated@react-stately/list@3.2.3-nightly.2555+cbaffb3e

• Updated@react-stately/menu@3.2.2-nightly.2555+cbaffb3e

• Updated@react-stately/select@3.1.2-nightly.2555+cbaffb3e

• Updated@react-stately/utils@3.0.0-nightly.877+cbaffb3e

• Updated@react-types/combobox@3.0.0-nightly.2555+cbaffb3e

• Updated@react-types/shared@3.0.0-nightly.877+cbaffb3e