@homebound/beam 4.59.0 → 4.59.1

package/dist/index.d.cts

@@ -8730,7 +8730,7 @@ type MenuSelectFieldBaseProps<O, V extends Value> = {
     getOptionSearchText?: (opt: O) => string | readonly string[];
     /** Sort options by `getOptionLabel`. On by default. `MenuTreeSelectField` defaults this to false. */
     autoSort?: boolean;
-    /** Debounced menu search text. The caller replaces `options` and should keep the current selection and `mixedValues` in that list. Closing calls this with `""`. */
+    /** Debounced menu search text. The caller replaces `options` and should keep `mixedValues` in that list. Closing calls this with `""`. */
     onSearch?: (search: string) => void;
     disabledOptions?: (V | {
         value: V;

package/dist/index.d.ts

@@ -8730,7 +8730,7 @@ type MenuSelectFieldBaseProps<O, V extends Value> = {
     getOptionSearchText?: (opt: O) => string | readonly string[];
     /** Sort options by `getOptionLabel`. On by default. `MenuTreeSelectField` defaults this to false. */
     autoSort?: boolean;
-    /** Debounced menu search text. The caller replaces `options` and should keep the current selection and `mixedValues` in that list. Closing calls this with `""`. */
+    /** Debounced menu search text. The caller replaces `options` and should keep `mixedValues` in that list. Closing calls this with `""`. */
     onSearch?: (search: string) => void;
     disabledOptions?: (V | {
         value: V;

package/dist/index.js

@@ -20100,9 +20100,20 @@ function useMenuSelectField(props) {
     () => menuTree ? menuTree.orderedKeys.filter((key) => disabledKeySet.has(menuTree.nodes.get(key).valueKey)) : disabledKeys,
     [menuTree, disabledKeySet, disabledKeys]
   );
+  const rememberedSelectedRef = useRef36(/* @__PURE__ */ new Map());
+  syncRememberedOptions(rememberedSelectedRef.current, values, optionsByKey);
   const selectedOptions = useMemo28(
-    () => menuTree ? selectedTreeOptions(menuTree, selectedKeys) : values.map((v) => optionsByKey.get(valueToKey(v))).filter((o) => o !== void 0),
-    [menuTree, selectedKeys, values, optionsByKey]
+    () => resolveSelectedOptions(
+      values,
+      menuTree,
+      selectedKeys,
+      optionsByKey,
+      rememberedSelectedRef.current,
+      getOptionValue
+    ),
+    // getOptionValue is typically an inline lambda
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    [values, optionsByKey, menuTree, selectedKeys]
   );
   const dottedKeys = useMemo28(
     () => new Set(mixedValues?.map(valueToKey).filter((key) => optionsByKey.has(key) && !selectedKeys.has(key))),
@@ -20144,9 +20155,8 @@ function useMenuSelectField(props) {
       const valueKey = key === void 0 ? void 0 : menuTree.nodes.get(key)?.valueKey;
       if (valueKey === void 0) return;
       const next2 = toggleTreeSelection(menuTree, selectedKeys, valueKey, added !== void 0, disabledKeySet);
-      const nextOptions = selectedTreeOptions(menuTree, next2);
       proposalProps.onUserEdit?.();
-      onCommit(nextOptions.map(getOptionValue), nextOptions);
+      commitTree(next2);
       return;
     }
     if (!multiple) {
@@ -20161,16 +20171,17 @@ function useMenuSelectField(props) {
       close({ restoreFocus: true });
       return;
     }
-    const next = values.filter((v) => keys.has(valueToKey(v)));
+    const next = values.filter((value) => {
+      const key = valueToKey(value);
+      if (!optionsByKey.has(key)) return true;
+      return keys.has(key);
+    });
     for (const k of keys) {
       const opt = optionsByKey.get(String(k));
       if (opt !== void 0 && !selectedKeys.has(String(k))) next.push(getOptionValue(opt));
     }
     proposalProps.onUserEdit?.();
-    onCommit(
-      next,
-      next.map((v) => optionsByKey.get(valueToKey(v))).filter((o) => o !== void 0)
-    );
+    onCommit(next, optionsForValues(next));
   }
   const collectionItems = useMemo28(() => {
     if (treeRows) {
@@ -20382,14 +20393,35 @@ function useMenuSelectField(props) {
     proposalProps.onUserEdit?.();
     if (menuTree) {
       const toggledKeys = toggleTreeSelection(menuTree, selectedKeys, key, false, disabledKeySet);
-      const toggledOptions = selectedTreeOptions(menuTree, toggledKeys);
-      onCommit(toggledOptions.map(getOptionValue), toggledOptions);
+      commitTree(toggledKeys, key);
       return;
     }
     const next = values.filter((value) => valueToKey(value) !== key);
+    onCommit(next, optionsForValues(next));
+  }
+  function optionsForValues(next) {
+    return next.flatMap((value) => {
+      const option = optionForKey(valueToKey(value), optionsByKey, rememberedSelectedRef.current);
+      return option ? [option] : [];
+    });
+  }
+  function commitTree(nextKeys, clearedKey) {
+    if (!menuTree) return;
+    const selectedInTree = selectedTreeOptions(menuTree, nextKeys);
+    const valueKeysInTree = new Set(menuTree.orderedKeys.map((rowKey) => menuTree.nodes.get(rowKey).valueKey));
+    const seen = /* @__PURE__ */ new Set();
+    const keptSelections = values.flatMap((value) => {
+      const key = valueToKey(value);
+      if (valueKeysInTree.has(key) || key === clearedKey || seen.has(key)) return [];
+      const option = optionForKey(key, optionsByKey, rememberedSelectedRef.current);
+      if (!option) return [];
+      seen.add(key);
+      return [option];
+    });
+    const nextOptions = [...selectedInTree, ...keptSelections];
     onCommit(
-      next,
-      next.map((value) => optionsByKey.get(valueToKey(value))).filter((option) => option !== void 0)
+      nextOptions.map((option) => getOptionValue(option)),
+      nextOptions
     );
   }
   const triggerProps = {
@@ -20455,6 +20487,41 @@ function useMenuSelectField(props) {
     }
   };
 }
+function syncRememberedOptions(remembered, values, optionsByKey) {
+  const selected = /* @__PURE__ */ new Set();
+  for (const value of values) {
+    const key = valueToKey(value);
+    selected.add(key);
+    const option = optionsByKey.get(key);
+    if (option) remembered.set(key, option);
+  }
+  for (const key of remembered.keys()) {
+    if (!selected.has(key)) remembered.delete(key);
+  }
+}
+function optionForKey(key, optionsByKey, remembered) {
+  return optionsByKey.get(key) ?? remembered.get(key);
+}
+function resolveSelectedOptions(values, menuTree, selectedKeys, optionsByKey, remembered, getOptionValue) {
+  if (!menuTree) {
+    return values.flatMap((value) => {
+      const option = optionForKey(valueToKey(value), optionsByKey, remembered);
+      return option ? [option] : [];
+    });
+  }
+  const selectedInTree = selectedTreeOptions(menuTree, selectedKeys);
+  const seen = new Set(selectedInTree.map((option) => valueToKey(getOptionValue(option))));
+  const keptSelections = [];
+  for (const value of values) {
+    const key = valueToKey(value);
+    if (seen.has(key)) continue;
+    const option = optionForKey(key, optionsByKey, remembered);
+    if (!option) continue;
+    seen.add(key);
+    keptSelections.push(option);
+  }
+  return [...selectedInTree, ...keptSelections];
+}
 function labelsFor(values, options, getOptionValue, getOptionLabel) {
   const keys = new Set(values.map(valueToKey));
   const seen = /* @__PURE__ */ new Set();