@homebound/beam 4.56.3 → 4.57.1

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

@@ -5413,8 +5413,8 @@ var Icons = {
     /* @__PURE__ */ jsx2("rect", { x: "6", y: "5", width: "10", height: "2" }),
     /* @__PURE__ */ jsx2("rect", { x: "12", y: "10", width: "10", height: "2" })
   ] }),
-  cube: /* @__PURE__ */ jsx2("path", { d: "M19.406 4.08601L10.406 0.0860059C10.146 -0.0289941 9.853 -0.0289941 9.593 0.0860059L0.593 4.08601C0.573 4.09501 0.559 4.11001 0.539 4.12101C0.511 4.13501 0.481 4.14401 0.455 4.16101C0.433 4.17601 0.416 4.19501 0.395 4.21101C0.367 4.23201 0.34 4.25501 0.315 4.27901C0.274 4.31801 0.238 4.36001 0.205 4.40501C0.185 4.43301 0.164 4.45801 0.146 4.48601C0.115 4.53901 0.0919999 4.59401 0.0699999 4.65101C0.0609999 4.67801 0.047 4.70301 0.039 4.73001C0.015 4.81701 0 4.90701 0 5.00001V15C0 15.396 0.232 15.753 0.594 15.914L9.594 19.914C9.724 19.972 9.862 20 10 20C10.139 20 10.273 19.961 10.402 19.904L10.406 19.914L19.406 15.914C19.768 15.753 20 15.396 20 15V5.00001C20 4.60401 19.768 4.24701 19.406 4.08601ZM10 2.09501L16.538 5.00001L10 7.90501L8.692 7.32401L3.463 5.00001L10 2.09501ZM2 14.351V6.53901L9 9.65001V17.461L2 14.351ZM11 17.461V9.65001L18 6.53901V14.351L11 17.461Z" }),
   // Figma's 1.75px strokes, scaled 8/7 to Beam's 2px
+  cube: /* @__PURE__ */ jsx2("path", { d: "M13.1016 12.6739V18.4562L18.3962 15.4686V9.6862L13.1016 12.6739ZM6 15.5433L11.1016 18.4485V12.6705L6 9.7654V15.5433ZM6.9933 8.0299L12.1038 10.9406L17.3616 7.973L12.1127 5.0109L6.9933 8.0299ZM20.3962 16.0522C20.3962 16.4129 20.2024 16.7465 19.8883 16.9239L12.5937 21.04C12.2876 21.2128 11.9127 21.2127 11.6071 21.0389L4.5056 16.9942C4.1933 16.8163 4 16.4841 4 16.1248V8.0456C4.0001 7.6917 4.1875 7.3648 4.4922 7.1851L11.5937 2.9953L11.7121 2.9362C11.9954 2.8162 12.3215 2.8328 12.5937 2.9864L19.8883 7.1025C20.2024 7.2798 20.3962 7.6134 20.3962 7.9741V16.0522Z" }),
   cubeDashed: /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsx2("path", { d: "M9.812 7.1132C9.4955 7.1132 9.1873 6.9506 9.0149 6.6583C8.7555 6.2186 8.9017 5.6519 9.3415 5.3925L11.485 4.1282C11.7694 3.9605 12.1216 3.9571 12.409 4.1193L14.5763 5.3425C15.0209 5.5934 15.1779 6.1572 14.927 6.6018C14.6761 7.0464 14.1122 7.2034 13.6678 6.9525L11.9649 5.9915L10.2807 6.9849C10.1333 7.0718 9.9715 7.1132 9.812 7.1132Z" }),
     /* @__PURE__ */ jsx2("path", { d: "M7.0861 11.2271C6.9311 11.2271 6.7739 11.188 6.6295 11.1058L4.4669 9.8742C4.1804 9.7111 4.0025 9.4077 4 9.078C3.9975 8.7484 4.1708 8.4423 4.4547 8.2748L6.5983 7.0104C7.038 6.751 7.6047 6.8973 7.8641 7.337C8.1235 7.7767 7.9773 8.3435 7.5376 8.6028L6.7676 9.057L7.5444 9.4993C7.988 9.7519 8.1428 10.3163 7.8902 10.76C7.7198 11.0592 7.4075 11.2271 7.0861 11.2271Z" }),
@@ -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)
       }