@homebound/beam 4.56.2 → 4.57.0

package/dist/index.cjs

@@ -19156,6 +19156,89 @@ var import_runtime86 = require("@homebound/truss/runtime");
 // src/inputs/MenuSelectField/MenuSelectField.tsx
 var import_react86 = require("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
 var import_react80 = require("react");
 var import_react_aria31 = require("react-aria");
@@ -20155,89 +20238,6 @@ var import_react85 = require("react");
 var import_react_aria37 = require("react-aria");
 var import_react_stately7 = require("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();
@@ -20419,10 +20419,11 @@ var import_jsx_runtime115 = require("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,
@@ -20465,11 +20466,13 @@ function useMenuSelectField(props) {
   const [search, setSearch] = (0, import_react85.useState)("");
   const [optionsLoading, setOptionsLoading] = (0, import_react85.useState)(false);
   const didRequestOptionsRef = (0, import_react85.useRef)(false);
+  const getOptionLabel = (option) => unsetLabel && option === unsetOption ? unsetLabel : propGetOptionLabel(option);
+  const getOptionValue = (option) => unsetLabel && option === unsetOption ? void 0 : propGetOptionValue(option);
   const options = (0, import_react85.useMemo)(
-    () => 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 } = (0, import_react_aria37.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_react_aria37.useFocusRing)();
@@ -20536,10 +20539,12 @@ function useMenuSelectField(props) {
     );
   }, [menuTree, allOptions, search, serverSearch, contains, expandedKeys, searchCollapsedKeys]);
   const filteredOptions = (0, import_react85.useMemo)(
-    () => 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;
@@ -20589,7 +20594,7 @@ function useMenuSelectField(props) {
   }, [treeRows, filteredOptions]);
   const state = (0, import_react_stately7.useListState)({
     items: collectionItems,
-    children: (item) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_react_stately7.Item, { textValue: getOptionLabel(item.option), children: getOptionMenuLabel ? getOptionMenuLabel(item.option) : getOptionLabel(item.option) }, item.key),
+    children: (item) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_react_stately7.Item, { 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,
@@ -20980,17 +20985,24 @@ function BaseMenuSelectField(props) {
 // src/inputs/MenuSelectField/MenuSelectField.tsx
 var import_jsx_runtime117 = require("react/jsx-runtime");
 function MenuSelectField(props) {
-  const { value, proposedValue, onSelect, ...rest } = props;
-  const values = (0, import_react86.useMemo)(() => value === void 0 ? [] : [value], [value]);
+  const { value, proposedValue, onSelect, unsetLabel, ...rest } = props;
+  const values = (0, import_react86.useMemo)(() => {
+    if (value !== void 0) return [value];
+    return unsetLabel ? [void 0] : [];
+  }, [value, unsetLabel]);
   const proposedValues = (0, import_react86.useMemo)(() => proposedValue === void 0 ? void 0 : [proposedValue], [proposedValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
     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);
+      }
     }
   );
 }
@@ -28787,6 +28799,7 @@ function DocumentScrollHost(props) {
       width: ["w_var", {
         "--width": (0, import_runtime134.maybeCssVar)(__maybeInc21(`min(100%, ${documentScrollChromeWidth()})`))
       }],
+      contain: "ctn_inline_size",
       zIndex: ["z_var", {
         "--zIndex": (0, import_runtime134.maybeCssVar)(zIndices.tableActions)
       }],
@@ -31999,7 +32012,6 @@ var import_jsx_runtime241 = require("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;
@@ -32007,26 +32019,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__ */ (0, import_jsx_runtime241.jsx)(
       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)
       }