@homebound/beam 2.416.7 → 2.417.0

package/dist/index.cjs

@@ -10601,16 +10601,13 @@ function TreeSelectFieldBase(props) {
   const state = (0, import_react_stately6.useComboBoxState)({
     ...comboBoxProps,
     allowsEmptyCollection: true,
-    allowsCustomValue: true
-  });
-  state.selectionManager.state = (0, import_react_stately6.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)));
@@ -10731,7 +10728,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
   });
@@ -10775,7 +10774,7 @@ function TreeSelectFieldBase(props) {
         triggerRef,
         popoverRef,
         positionProps,
-        onClose: () => state.close(),
+        onClose: () => state.toggle(),
         isOpen: state.isOpen,
         minWidth: 320,
         children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
@@ -10897,46 +10896,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);
@@ -10952,7 +10936,10 @@ function ComboBoxInput(props) {
             }
             setIsFocused(false);
             maybeCall(onBlur);
-            state.close();
+            state.setFocused(false);
+            if (isMultiSelect && state.isOpen) {
+              state.toggle();
+            }
             resetField();
           },
           onFocus: () => {
@@ -11064,27 +11051,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 }));
@@ -11118,6 +11084,9 @@ function ComboBoxBase(props) {
     (item) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_stately7.Item, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, valueToKey(getOptionValue(item))),
     [getOptionValue, getOptionLabel, getOptionMenuLabel]
   );
+  const selectedKeys = (0, import_react49.useMemo)(() => {
+    return selectedOptions.map((o) => valueToKey(getOptionValue(o)));
+  }, [selectedOptions, getOptionValue]);
   const comboBoxProps = {
     ...otherProps,
     disabledKeys: Object.keys(disabledOptionsWithReasons),
@@ -11132,29 +11101,36 @@ function ComboBoxBase(props) {
   const state = (0, import_react_stately7.useComboBoxState)({
     ...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 = (0, import_react49.useMemo)(() => {
-    return selectedOptions.map((o) => valueToKey(getOptionValue(o)));
-  }, [selectedOptions, getOptionValue]);
-  state.selectionManager.state = (0, import_react_stately7.useMultipleSelectionState)({
-    selectionMode: multiselect ? "multiple" : "single",
-    // Do not allow an empty selection if single select mode
-    disallowEmptySelection: !multiselect,
-    selectedKeys,
-    onSelectionChange,
-    disabledKeys: Object.keys(disabledOptionsWithReasons)
-  });
   const [debouncedSearch] = (0, import_use_debounce5.useDebounce)(searchValue, 300);
   (0, import_react49.useEffect)(() => {
     if (state.isOpen && multiselect && !debouncedSearch) {
@@ -11196,7 +11172,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
   });
@@ -11238,7 +11217,7 @@ function ComboBoxBase(props) {
         triggerRef,
         popoverRef,
         positionProps,
-        onClose: () => state.close(),
+        onClose: () => multiselect ? state.toggle() : state.close(),
         isOpen: state.isOpen,
         minWidth: 200,
         children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(