@homebound/beam 2.416.7 → 2.417.0

package/dist/index.js

@@ -8993,7 +8993,7 @@ function Popover(props) {
 // src/inputs/internal/ComboBoxBase.tsx
 import { useCallback as useCallback12, useEffect as useEffect15, useMemo as useMemo17, useRef as useRef24, useState as useState21 } from "react";
 import { useButton as useButton7, useComboBox as useComboBox2, useFilter as useFilter4, useOverlayPosition as useOverlayPosition4 } from "react-aria";
-import { Item as Item4, useComboBoxState as useComboBoxState2, useMultipleSelectionState as useMultipleSelectionState2 } from "react-stately";
+import { Item as Item4, useComboBoxState as useComboBoxState2 } from "react-stately";
 
 // src/inputs/internal/ComboBoxInput.tsx
 import {
@@ -9071,7 +9071,7 @@ import React9, {
   useState as useState19
 } from "react";
 import { useButton as useButton6, useComboBox, useFilter as useFilter3, useOverlayPosition as useOverlayPosition3 } from "react-aria";
-import { Item as Item3, useComboBoxState, useMultipleSelectionState } from "react-stately";
+import { Item as Item3, useComboBoxState } from "react-stately";
 
 // src/inputs/internal/ListBox.tsx
 import { useEffect as useEffect13, useRef as useRef22, useState as useState18 } from "react";
@@ -10241,16 +10241,13 @@ function TreeSelectFieldBase(props) {
   const state = useComboBoxState({
     ...comboBoxProps,
     allowsEmptyCollection: true,
-    allowsCustomValue: true
-  });
-  state.selectionManager.state = useMultipleSelectionState({
     selectionMode: "multiple",
-    selectedKeys: fieldState.selectedKeys,
-    disabledKeys: Object.keys(disabledOptionsWithReasons),
-    onSelectionChange: (newKeys) => {
-      if (newKeys === "all") {
-        return;
-      }
+    // Prevent commitValue from calling onChange with stale displayValue on blur.
+    // Menu close is handled manually in ComboBoxInput's onBlur via state.toggle().
+    shouldCloseOnBlur: false,
+    value: fieldState.selectedKeys,
+    onChange: (newValue) => {
+      const newKeys = new Set(newValue);
       const existingKeys = state.selectionManager.selectedKeys;
       const addedKeys = new Set([...newKeys].filter((x) => !existingKeys.has(x)));
       const removedKeys = new Set([...existingKeys].filter((x) => !newKeys.has(x)));
@@ -10371,7 +10368,9 @@ function TreeSelectFieldBase(props) {
     scrollRef: listBoxRef,
     shouldFlip: true,
     isOpen: state.isOpen,
-    onClose: state.close,
+    // Use toggle() instead of close() to avoid commitValue(), which calls onChange(displayValue)
+    // with a potentially stale controlled value. See ComboBoxBase.tsx for details.
+    onClose: () => state.toggle(),
     placement: "bottom left",
     offset: borderless ? 8 : 4
   });
@@ -10415,7 +10414,7 @@ function TreeSelectFieldBase(props) {
         triggerRef,
         popoverRef,
         positionProps,
-        onClose: () => state.close(),
+        onClose: () => state.toggle(),
         isOpen: state.isOpen,
         minWidth: 320,
         children: /* @__PURE__ */ jsx55(
@@ -10537,46 +10536,31 @@ function ComboBoxInput(props) {
         // Not merging the following as we want them to overwrite existing events
         ...{
           onKeyDown: (e) => {
-            if (isMultiSelect) {
-              if (isTree) {
-                const focusedKey = state.selectionManager.focusedKey;
-                if (focusedKey == null) return;
-                const item = state.collection.getItem(focusedKey);
-                if (item && (e.key === "ArrowRight" || e.key === "ArrowLeft")) {
-                  if (!isLeveledNode(item)) return;
-                  const leveledOption = item.value;
-                  if (!leveledOption) return;
-                  const [option] = leveledOption;
-                  e.stopPropagation();
-                  e.preventDefault();
-                  if (option && option.children && option.children.length > 0) {
-                    if (collapsedKeys.includes(item.key) && e.key === "ArrowRight") {
-                      setCollapsedKeys((prevKeys) => prevKeys.filter((k) => k !== item.key));
-                    } else if (!collapsedKeys.includes(item.key) && e.key === "ArrowLeft") {
-                      setCollapsedKeys((prevKeys) => [...prevKeys, item.key]);
-                    }
+            if (isMultiSelect && isTree) {
+              const focusedKey = state.selectionManager.focusedKey;
+              if (focusedKey == null) return;
+              const item = state.collection.getItem(focusedKey);
+              if (item && (e.key === "ArrowRight" || e.key === "ArrowLeft")) {
+                if (!isLeveledNode(item)) return;
+                const leveledOption = item.value;
+                if (!leveledOption) return;
+                const [option] = leveledOption;
+                e.stopPropagation();
+                e.preventDefault();
+                if (option && option.children && option.children.length > 0) {
+                  if (collapsedKeys.includes(item.key) && e.key === "ArrowRight") {
+                    setCollapsedKeys((prevKeys) => prevKeys.filter((k) => k !== item.key));
+                  } else if (!collapsedKeys.includes(item.key) && e.key === "ArrowLeft") {
+                    setCollapsedKeys((prevKeys) => [...prevKeys, item.key]);
                   }
-                  return;
                 }
-              }
-              if (e.key === "Enter") {
-                if (state.isOpen) {
-                  e.preventDefault();
-                }
-                const focusedKey = state.selectionManager.focusedKey;
-                if (focusedKey != null) {
-                  state.selectionManager.toggleSelection(focusedKey);
-                }
-                return;
-              }
-              if (e.key === "Escape") {
-                state.close();
                 return;
               }
             }
-            if (e.key === "Escape") {
-              state.close();
-              resetField();
+            if (e.key === "Enter" && state.isOpen) {
+              e.preventDefault();
+            }
+            if (isMultiSelect && e.key === "Tab") {
               return;
             }
             inputProps.onKeyDown && inputProps.onKeyDown(e);
@@ -10592,7 +10576,10 @@ function ComboBoxInput(props) {
             }
             setIsFocused(false);
             maybeCall(onBlur);
-            state.close();
+            state.setFocused(false);
+            if (isMultiSelect && state.isOpen) {
+              state.toggle();
+            }
             resetField();
           },
           onFocus: () => {
@@ -10704,27 +10691,6 @@ function ComboBoxBase(props) {
   function resetField() {
     setFieldState((prevState) => ({ ...prevState, searchValue: void 0 }));
   }
-  function onSelectionChange(keys) {
-    if (keys === "all") {
-      return;
-    }
-    const selectionChanged = !(keys.size === state.selectionManager.selectedKeys.size && [...keys].every((value) => state.selectionManager.selectedKeys.has(value)));
-    if (multiselect && keys.size === 0) {
-      selectionChanged && onSelect([], []);
-      return;
-    }
-    const selectedKeys2 = [...keys.values()];
-    const selectedOptions2 = options.filter((o) => selectedKeys2.includes(valueToKey(getOptionValue(o))));
-    if (!multiselect && selectedOptions2[0] === addNewOption && onAddNew) {
-      onAddNew(fieldState.inputValue);
-      state.close();
-      return;
-    }
-    selectionChanged && onSelect(selectedKeys2.map(keyToValue), selectedOptions2);
-    if (!multiselect) {
-      state.close();
-    }
-  }
   function onInputChange(value) {
     if (value !== fieldState.inputValue) {
       setFieldState((prevState) => ({ ...prevState, inputValue: value, searchValue: value }));
@@ -10758,6 +10724,9 @@ function ComboBoxBase(props) {
     (item) => /* @__PURE__ */ jsx57(Item4, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item))),
     [getOptionValue, getOptionLabel, getOptionMenuLabel]
   );
+  const selectedKeys = useMemo17(() => {
+    return selectedOptions.map((o) => valueToKey(getOptionValue(o)));
+  }, [selectedOptions, getOptionValue]);
   const comboBoxProps = {
     ...otherProps,
     disabledKeys: Object.keys(disabledOptionsWithReasons),
@@ -10772,29 +10741,36 @@ function ComboBoxBase(props) {
   const state = useComboBoxState2({
     ...comboBoxProps,
     allowsEmptyCollection: true,
-    // We don't really allow custom values, as we reset the input value once a user `blur`s the input field.
-    // Though, setting `allowsCustomValue: true` prevents React-Aria/Stately from attempting to reset the input field's value when the menu closes.
-    allowsCustomValue: true,
-    // useComboBoxState.onSelectionChange will be executed if a keyboard interaction (Enter key) is used to select an item
-    onSelectionChange: (key) => {
-      if (key) {
-        const selectedKeys2 = state.selectionManager.selectedKeys;
-        const newSelection = new Set(!multiselect ? [key] : [...selectedKeys2, key]);
-        state.selectionManager.setSelectedKeys(newSelection);
+    selectionMode: multiselect ? "multiple" : "single",
+    // For multi-select, disable close-on-blur to prevent `commitValue` from calling `onChange`
+    // with a stale `displayValue` (the controlled `value` prop before React re-renders).
+    // We handle menu close manually in ComboBoxInput's onBlur via `state.toggle()`.
+    ...multiselect ? { shouldCloseOnBlur: false } : {},
+    // Use the new value/onChange API for native multi-select support
+    value: multiselect ? selectedKeys : selectedKeys[0] ?? null,
+    // Don't call state.close() inside onChange — `state.close` is mapped to `commitValue` which
+    // re-triggers onChange, causing an infinite loop. The native state handles menu close automatically
+    // for single-select (closes on value change) and multi-select (stays open).
+    onChange: (newValue) => {
+      if (multiselect) {
+        const keys = newValue ?? [];
+        const newSelectedOptions = options.filter((o) => keys.includes(valueToKey(getOptionValue(o))));
+        onSelect(keys.map(keyToValue), newSelectedOptions);
+      } else {
+        const key = newValue;
+        if (key === null || key === void 0) {
+          onSelect([], []);
+          return;
+        }
+        const selectedOption = options.find((o) => valueToKey(getOptionValue(o)) === key);
+        if (selectedOption === addNewOption && onAddNew) {
+          onAddNew(fieldState.inputValue);
+          return;
+        }
+        onSelect([keyToValue(key)], selectedOption ? [selectedOption] : []);
       }
     }
   });
-  const selectedKeys = useMemo17(() => {
-    return selectedOptions.map((o) => valueToKey(getOptionValue(o)));
-  }, [selectedOptions, getOptionValue]);
-  state.selectionManager.state = useMultipleSelectionState2({
-    selectionMode: multiselect ? "multiple" : "single",
-    // Do not allow an empty selection if single select mode
-    disallowEmptySelection: !multiselect,
-    selectedKeys,
-    onSelectionChange,
-    disabledKeys: Object.keys(disabledOptionsWithReasons)
-  });
   const [debouncedSearch] = useDebounce(searchValue, 300);
   useEffect15(() => {
     if (state.isOpen && multiselect && !debouncedSearch) {
@@ -10836,7 +10812,10 @@ function ComboBoxBase(props) {
     scrollRef: listBoxRef,
     shouldFlip: true,
     isOpen: state.isOpen,
-    onClose: state.close,
+    // For multi-select, use toggle() instead of close() to avoid commitValue(), which
+    // calls onChange(displayValue) with a potentially stale controlled value. For single-select,
+    // close() (i.e. commitValue) is correct — it commits the input text to the selected value.
+    onClose: multiselect ? () => state.toggle() : state.close,
     placement: "bottom left",
     offset: borderless ? 8 : 4
   });
@@ -10878,7 +10857,7 @@ function ComboBoxBase(props) {
         triggerRef,
         popoverRef,
         positionProps,
-        onClose: () => state.close(),
+        onClose: () => multiselect ? state.toggle() : state.close(),
         isOpen: state.isOpen,
         minWidth: 200,
         children: /* @__PURE__ */ jsx57(