@homebound/beam 4.56.3 → 4.57.0

package/dist/index.d.cts

@@ -8724,8 +8724,8 @@ type MenuSelectFieldBaseProps<O, V extends Value> = {
     getOptionValue?: (opt: O) => V;
     /** String used in the trigger and the option's accessible name. Defaults to `option.name`. */
     getOptionLabel?: (opt: O) => string;
-    /** Custom content for the menu row. Falls back to `getOptionLabel`. */
-    getOptionMenuLabel?: (opt: O) => ReactNode;
+    /** Custom content for the menu row. Falls back to `getOptionLabel`. `isUnsetOpt` is true for the `unsetLabel` row. */
+    getOptionMenuLabel?: (opt: O, isUnsetOpt: boolean) => ReactNode;
     /** Extra text the menu search matches, in addition to `getOptionLabel`. */
     getOptionSearchText?: (opt: O) => string | readonly string[];
     /** Sort options by `getOptionLabel`. On by default. `MenuTreeSelectField` defaults this to false. */
@@ -8756,6 +8756,8 @@ type MenuSelectFieldProps<O, V extends Value> = MenuSelectFieldBaseProps<O, V> &
     /** Value proposed by an AI model; puts the field in AI mode. */
     proposedValue?: V;
     onSelect: (value: V | undefined, opt: O | undefined) => void;
+    /** `unsetLabel` row that clears the field. Stays first when options are sorted. Unlike `nothingSelectedText`, it is a selectable option. */
+    unsetLabel?: string;
 };
 /** Which selected options to surface: every one, only leaves, or only the highest selected ancestors. */
 type TreeSelectionDisplay = "all" | "leaf" | "root";

package/dist/index.d.ts

@@ -8724,8 +8724,8 @@ type MenuSelectFieldBaseProps<O, V extends Value> = {
     getOptionValue?: (opt: O) => V;
     /** String used in the trigger and the option's accessible name. Defaults to `option.name`. */
     getOptionLabel?: (opt: O) => string;
-    /** Custom content for the menu row. Falls back to `getOptionLabel`. */
-    getOptionMenuLabel?: (opt: O) => ReactNode;
+    /** Custom content for the menu row. Falls back to `getOptionLabel`. `isUnsetOpt` is true for the `unsetLabel` row. */
+    getOptionMenuLabel?: (opt: O, isUnsetOpt: boolean) => ReactNode;
     /** Extra text the menu search matches, in addition to `getOptionLabel`. */
     getOptionSearchText?: (opt: O) => string | readonly string[];
     /** Sort options by `getOptionLabel`. On by default. `MenuTreeSelectField` defaults this to false. */
@@ -8756,6 +8756,8 @@ type MenuSelectFieldProps<O, V extends Value> = MenuSelectFieldBaseProps<O, V> &
     /** Value proposed by an AI model; puts the field in AI mode. */
     proposedValue?: V;
     onSelect: (value: V | undefined, opt: O | undefined) => void;
+    /** `unsetLabel` row that clears the field. Stays first when options are sorted. Unlike `nothingSelectedText`, it is a selectable option. */
+    unsetLabel?: string;
 };
 /** Which selected options to surface: every one, only leaves, or only the highest selected ancestors. */
 type TreeSelectionDisplay = "all" | "leaf" | "root";

package/dist/index.js

@@ -18647,6 +18647,89 @@ import { trussProps as trussProps76 } from "@homebound/truss/runtime";
 // src/inputs/MenuSelectField/MenuSelectField.tsx
 import { useMemo as useMemo29 } from "react";
 
+// src/inputs/Value.ts
+var VALUE_PREFIX = "__VALUE--";
+function keyToValue(key) {
+  if (typeof key === "number") {
+    return key;
+  } else if (typeof key === "string") {
+    if (key === `${VALUE_PREFIX}null` || key === "__VALUE:null") {
+      return null;
+    } else if (key === `${VALUE_PREFIX}undefined` || key === "__VALUE:undefined") {
+      return void 0;
+    } else if (key.startsWith(`${VALUE_PREFIX}boolean--`) || key.startsWith("__VALUE:boolean:")) {
+      const parts = key.includes("--boolean--") ? key.split("--") : key.split(":");
+      return parts[parts.length - 1] === "true";
+    } else if (key.startsWith(`${VALUE_PREFIX}number--`) || key.startsWith("__VALUE:number:")) {
+      const parts = key.includes("--number--") ? key.split("--") : key.split(":");
+      return Number(parts[parts.length - 1]);
+    } else {
+      return key;
+    }
+  } else {
+    throw new Error(`Unsupported key ${key}`);
+  }
+}
+function valueToKey(value) {
+  if (typeof value === "string") {
+    return value;
+  } else if (typeof value === "number") {
+    return `${VALUE_PREFIX}number--${value}`;
+  } else if (typeof value === "boolean") {
+    return `${VALUE_PREFIX}boolean--${value}`;
+  } else if (value === null) {
+    return `${VALUE_PREFIX}null`;
+  } else if (value === void 0) {
+    return `${VALUE_PREFIX}undefined`;
+  } else {
+    throw new Error(`Unsupported value ${value}`);
+  }
+}
+
+// src/inputs/internal/selectFieldHelpers.ts
+function initializeOptions(optionsOrLoad, getOptionValue, getOptionLabel, unsetLabel, autoSort) {
+  const result = [];
+  if (unsetLabel) {
+    result.push(unsetOption);
+  }
+  const userOptions = [];
+  if (Array.isArray(optionsOrLoad)) {
+    userOptions.push(...optionsOrLoad);
+  } else {
+    const { options, current: current2 } = optionsOrLoad;
+    if (options) {
+      userOptions.push(...options);
+    }
+    if (current2) {
+      const toCheck = Array.isArray(current2) ? current2 : [current2];
+      toCheck.forEach((current3) => {
+        const value = getOptionValue(current3);
+        const found = options && options.find((o) => getOptionValue(o) === value);
+        if (!found) {
+          userOptions.push(current3);
+        }
+      });
+    }
+  }
+  result.push(...autoSort ? sortOptions(userOptions, getOptionLabel) : userOptions);
+  return result;
+}
+var unsetOption = {};
+function disabledOptionToKeyedTuple(disabledOption) {
+  if (typeof disabledOption === "object" && disabledOption !== null) {
+    return [valueToKey(disabledOption.value), disabledOption.reason];
+  } else {
+    return [valueToKey(disabledOption), void 0];
+  }
+}
+function sortOptions(options, getOptionLabel) {
+  return [...options].sort((a, b) => {
+    const labelA = getOptionLabel(a).toLowerCase();
+    const labelB = getOptionLabel(b).toLowerCase();
+    return labelA.localeCompare(labelB);
+  });
+}
+
 // src/inputs/MenuSelectField/internal/AnchoredOverlay.tsx
 import { useRef as useRef32 } from "react";
 import { FocusScope as FocusScope4 } from "react-aria";
@@ -19646,89 +19729,6 @@ import { useId as useId4, useLayoutEffect as useLayoutEffect8, useMemo as useMem
 import { ListKeyboardDelegate, useFilter as useFilter2, useFocusRing as useFocusRing10, useHover as useHover13 } from "react-aria";
 import { Item as Item2, useListState } from "react-stately";
 
-// src/inputs/Value.ts
-var VALUE_PREFIX = "__VALUE--";
-function keyToValue(key) {
-  if (typeof key === "number") {
-    return key;
-  } else if (typeof key === "string") {
-    if (key === `${VALUE_PREFIX}null` || key === "__VALUE:null") {
-      return null;
-    } else if (key === `${VALUE_PREFIX}undefined` || key === "__VALUE:undefined") {
-      return void 0;
-    } else if (key.startsWith(`${VALUE_PREFIX}boolean--`) || key.startsWith("__VALUE:boolean:")) {
-      const parts = key.includes("--boolean--") ? key.split("--") : key.split(":");
-      return parts[parts.length - 1] === "true";
-    } else if (key.startsWith(`${VALUE_PREFIX}number--`) || key.startsWith("__VALUE:number:")) {
-      const parts = key.includes("--number--") ? key.split("--") : key.split(":");
-      return Number(parts[parts.length - 1]);
-    } else {
-      return key;
-    }
-  } else {
-    throw new Error(`Unsupported key ${key}`);
-  }
-}
-function valueToKey(value) {
-  if (typeof value === "string") {
-    return value;
-  } else if (typeof value === "number") {
-    return `${VALUE_PREFIX}number--${value}`;
-  } else if (typeof value === "boolean") {
-    return `${VALUE_PREFIX}boolean--${value}`;
-  } else if (value === null) {
-    return `${VALUE_PREFIX}null`;
-  } else if (value === void 0) {
-    return `${VALUE_PREFIX}undefined`;
-  } else {
-    throw new Error(`Unsupported value ${value}`);
-  }
-}
-
-// src/inputs/internal/selectFieldHelpers.ts
-function initializeOptions(optionsOrLoad, getOptionValue, getOptionLabel, unsetLabel, autoSort) {
-  const result = [];
-  if (unsetLabel) {
-    result.push(unsetOption);
-  }
-  const userOptions = [];
-  if (Array.isArray(optionsOrLoad)) {
-    userOptions.push(...optionsOrLoad);
-  } else {
-    const { options, current: current2 } = optionsOrLoad;
-    if (options) {
-      userOptions.push(...options);
-    }
-    if (current2) {
-      const toCheck = Array.isArray(current2) ? current2 : [current2];
-      toCheck.forEach((current3) => {
-        const value = getOptionValue(current3);
-        const found = options && options.find((o) => getOptionValue(o) === value);
-        if (!found) {
-          userOptions.push(current3);
-        }
-      });
-    }
-  }
-  result.push(...autoSort ? sortOptions(userOptions, getOptionLabel) : userOptions);
-  return result;
-}
-var unsetOption = {};
-function disabledOptionToKeyedTuple(disabledOption) {
-  if (typeof disabledOption === "object" && disabledOption !== null) {
-    return [valueToKey(disabledOption.value), disabledOption.reason];
-  } else {
-    return [valueToKey(disabledOption), void 0];
-  }
-}
-function sortOptions(options, getOptionLabel) {
-  return [...options].sort((a, b) => {
-    const labelA = getOptionLabel(a).toLowerCase();
-    const labelB = getOptionLabel(b).toLowerCase();
-    return labelA.localeCompare(labelB);
-  });
-}
-
 // src/inputs/MenuSelectField/internal/menuTree.ts
 function buildMenuTree(roots, getKey, getChildren) {
   const nodes = /* @__PURE__ */ new Map();
@@ -19910,10 +19910,11 @@ import { jsx as jsx115 } from "react/jsx-runtime";
 function useMenuSelectField(props) {
   const {
     options: optionsProp,
-    getOptionValue = defaultOptionValue,
-    getOptionLabel = defaultOptionLabel,
+    getOptionValue: propGetOptionValue = defaultOptionValue,
+    getOptionLabel: propGetOptionLabel = defaultOptionLabel,
     getOptionMenuLabel,
     getOptionSearchText,
+    unsetLabel,
     autoSort = true,
     onSearch,
     disabledOptions,
@@ -19956,11 +19957,13 @@ function useMenuSelectField(props) {
   const [search, setSearch] = useState31("");
   const [optionsLoading, setOptionsLoading] = useState31(false);
   const didRequestOptionsRef = useRef36(false);
+  const getOptionLabel = (option) => unsetLabel && option === unsetOption ? unsetLabel : propGetOptionLabel(option);
+  const getOptionValue = (option) => unsetLabel && option === unsetOption ? void 0 : propGetOptionValue(option);
   const options = useMemo28(
-    () => initializeOptions(optionsProp, getOptionValue, getOptionLabel, void 0, autoSort),
+    () => initializeOptions(optionsProp, getOptionValue, getOptionLabel, unsetLabel, autoSort),
     // getOptionValue and getOptionLabel are typically inline lambdas
     // oxlint-disable-next-line react-hooks/exhaustive-deps
-    [optionsProp, autoSort]
+    [optionsProp, autoSort, unsetLabel]
   );
   const { hoverProps, isHovered } = useHover13({});
   const { focusProps, isFocusVisible } = useFocusRing10();
@@ -20027,10 +20030,12 @@ function useMenuSelectField(props) {
     );
   }, [menuTree, allOptions, search, serverSearch, contains, expandedKeys, searchCollapsedKeys]);
   const filteredOptions = useMemo28(
-    () => menuTree || !search || serverSearch ? options : options.filter((o) => matchesSearch(o, search, getOptionLabel, getOptionSearchText, contains)),
+    () => menuTree || !search || serverSearch ? options : options.filter(
+      (option) => unsetLabel && option === unsetOption ? contains(getOptionLabel(option), search) : matchesSearch(option, search, getOptionLabel, getOptionSearchText, contains)
+    ),
     // getOptionLabel and getOptionSearchText are typically inline lambdas
     // oxlint-disable-next-line react-hooks/exhaustive-deps
-    [menuTree, options, search, serverSearch, contains]
+    [menuTree, options, search, serverSearch, contains, unsetLabel]
   );
   function onSelectionChange(keys) {
     if (keys === "all") return;
@@ -20080,7 +20085,7 @@ function useMenuSelectField(props) {
   }, [treeRows, filteredOptions]);
   const state = useListState({
     items: collectionItems,
-    children: (item) => /* @__PURE__ */ jsx115(Item2, { textValue: getOptionLabel(item.option), children: getOptionMenuLabel ? getOptionMenuLabel(item.option) : getOptionLabel(item.option) }, item.key),
+    children: (item) => /* @__PURE__ */ jsx115(Item2, { textValue: getOptionLabel(item.option), children: getOptionMenuLabel ? getOptionMenuLabel(item.option, Boolean(unsetLabel) && item.option === unsetOption) : getOptionLabel(item.option) }, item.key),
     selectionMode: multiple ? "multiple" : "single",
     selectedKeys: selectedRowKeys,
     disabledKeys: disabledRowKeys,
@@ -20471,17 +20476,24 @@ function BaseMenuSelectField(props) {
 // src/inputs/MenuSelectField/MenuSelectField.tsx
 import { jsx as jsx117 } from "react/jsx-runtime";
 function MenuSelectField(props) {
-  const { value, proposedValue, onSelect, ...rest } = props;
-  const values = useMemo29(() => value === void 0 ? [] : [value], [value]);
+  const { value, proposedValue, onSelect, unsetLabel, ...rest } = props;
+  const values = useMemo29(() => {
+    if (value !== void 0) return [value];
+    return unsetLabel ? [void 0] : [];
+  }, [value, unsetLabel]);
   const proposedValues = useMemo29(() => proposedValue === void 0 ? void 0 : [proposedValue], [proposedValue]);
   return /* @__PURE__ */ jsx117(
     BaseMenuSelectField,
     {
       ...rest,
+      unsetLabel,
       selectionMode: "single",
       values,
       proposedValues,
-      onCommit: (next, opts) => onSelect(next[0], opts[0])
+      onCommit: (next, opts) => {
+        const option = opts[0];
+        onSelect(next[0], option === unsetOption ? void 0 : option);
+      }
     }
   );
 }
@@ -31499,7 +31511,6 @@ import { jsx as jsx241 } from "react/jsx-runtime";
 function singleFilter(props) {
   return (key) => new SingleFilter(key, props);
 }
-var allOption = {};
 var SingleFilter = class extends BaseFilter {
   formatSelectedFilterLabel(value) {
     const { options } = this.props;
@@ -31507,26 +31518,15 @@ var SingleFilter = class extends BaseFilter {
     return resolveOptionSelectedFilterLabel(options, getOptionValue, getOptionLabel, value);
   }
   render(value, setValue, tid, inModal, vertical) {
-    const { label, defaultValue, options: maybeOptions, nothingSelectedText, autoSort, ...props } = this.props;
-    const { getOptionValue, getOptionLabel } = optionReaders2(this.props);
-    const unsetText = nothingSelectedText ?? "All";
-    const isStaticList = Array.isArray(maybeOptions);
-    const options = isStaticList ? [
-      allOption,
-      ...initializeOptions(maybeOptions, getOptionValue, getOptionLabel, void 0, autoSort ?? true)
-    ] : maybeOptions;
+    const { label, defaultValue, nothingSelectedText, unsetLabel, ...props } = this.props;
     return /* @__PURE__ */ jsx241(
       MenuSelectField,
       {
         ...props,
-        autoSort: isStaticList ? false : autoSort,
-        options,
-        getOptionValue: (option) => option === allOption ? void 0 : getOptionValue(option),
-        getOptionLabel: (option) => option === allOption ? unsetText : getOptionLabel(option),
+        unsetLabel: unsetLabel ?? nothingSelectedText ?? "All",
         value,
         label: this.label,
         labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above",
-        nothingSelectedText: unsetText,
         onSelect: (next) => setValue(next || void 0),
         ...this.testId(tid)
       }