@homebound/beam 4.61.0 → 4.62.0

package/dist/index.cjs

@@ -19334,7 +19334,7 @@ function valueToKey(value) {
 }
 
 // src/inputs/internal/selectFieldHelpers.ts
-function initializeOptions(optionsOrLoad, getOptionValue, getOptionLabel, unsetLabel, autoSort) {
+function initializeOptions(optionsOrLoad, getOptionValue, getOptionLabel, unsetLabel, autoSort, getChildren) {
   const result = [];
   if (unsetLabel) {
     result.push(unsetOption);
@@ -19351,8 +19351,8 @@ function initializeOptions(optionsOrLoad, getOptionValue, getOptionLabel, unsetL
       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) {
+        const alreadyListed = options !== void 0 && optionsIncludeValue(options, value, getOptionValue, getChildren);
+        if (!alreadyListed) {
           userOptions.push(current3);
         }
       });
@@ -19362,6 +19362,13 @@ function initializeOptions(optionsOrLoad, getOptionValue, getOptionLabel, unsetL
   return result;
 }
 var unsetOption = {};
+function optionsIncludeValue(options, value, getOptionValue, getChildren) {
+  return options.some((option) => {
+    if (getOptionValue(option) === value) return true;
+    const children = getChildren?.(option);
+    return children !== void 0 && optionsIncludeValue(children, value, getOptionValue, getChildren);
+  });
+}
 function disabledOptionToKeyedTuple(disabledOption) {
   if (typeof disabledOption === "object" && disabledOption !== null) {
     return [valueToKey(disabledOption.value), disabledOption.reason];
@@ -20131,7 +20138,9 @@ function BaseOptionRow(props) {
     id,
     disabledReason,
     mixedLegendId,
-    variant
+    variant,
+    indent,
+    isPathRoot
   } = props;
   const entry = item.value;
   const ref = (0, import_react83.useRef)(null);
@@ -20166,6 +20175,11 @@ function BaseOptionRow(props) {
         ref,
         ...(0, import_runtime86.trussProps)({
           ...rowCss,
+          ...indent !== void 0 ? {
+            paddingLeft: ["pl_var", {
+              "--paddingLeft": `${indent}px`
+            }]
+          } : {},
           ...highlighted ? {
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": "var(--b-surface-raised-hover)"
@@ -20182,7 +20196,17 @@ function BaseOptionRow(props) {
         children: [
           variant === "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(StyledCheckbox, { isSelected, isDisabled }),
           variant === "checkbox" && mixedLegendId && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(MixedDot, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("span", { className: "fg1 mw0", children: item.rendered }),
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("span", { ...(0, import_runtime86.trussProps)({
+            ...{
+              flexGrow: "fg1",
+              minWidth: "mw0"
+            },
+            ...isPathRoot ? {
+              fontWeight: "fw6",
+              fontSize: "fz_14px",
+              lineHeight: "lh_20px"
+            } : {}
+          }), children: item.rendered }),
           variant === "check" && isSelected && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("span", { className: "df aic fs0", children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Icon, { icon: "check", color: isDisabled ? "--b-text-disabled" /* TextDisabled */ : "--b-selection-indicator" /* SelectionIndicator */ }) }),
           variant === "check" && mixedLegendId && // Centered in the check icon's 24px box.
           /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("span", { className: "df aic jcc fs0 h_24px w_24px", children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(MixedDot, {}) })
@@ -20192,6 +20216,21 @@ function BaseOptionRow(props) {
   });
 }
 function TreeOptionRow(props) {
+  const {
+    selectionMode,
+    onExpandedChange,
+    ...rowProps
+  } = props;
+  if (selectionMode === "single") return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(SingleTreeOptionRow, { ...rowProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(MultiTreeOptionRow, { ...rowProps, selectionMode, onExpandedChange });
+}
+function SingleTreeOptionRow({
+  row,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(BaseOptionRow, { ...rest, variant: "check", indent: rowPaddingX + row.level * singleTreeIndent, isPathRoot: row.level === 0 });
+}
+function MultiTreeOptionRow(props) {
   const {
     item,
     state,
@@ -20282,6 +20321,7 @@ function TreeOptionRow(props) {
 }
 var menuRowHeight = 40;
 var rowPaddingX = 16;
+var singleTreeIndent = 16;
 var treeIndent = 28;
 var rowCss = {
   display: "df",
@@ -20359,7 +20399,7 @@ function OptionList(props) {
     disabledReasons,
     initialIndex,
     loading,
-    rowVariant,
+    selectionMode,
     tree,
     mixed
   } = menu;
@@ -20388,8 +20428,7 @@ function OptionList(props) {
     });
   }, [focusedKey, state.collection]);
   const [initialTop] = (0, import_react84.useState)(() => Math.max(0, Math.min(initialIndex, items.length - 1)));
-  const Row2 = rowVariant === "checkbox" ? MultiOptionRow : SingleOptionRow;
-  const isTree = rowVariant === "tree" && tree !== void 0;
+  const Row2 = selectionMode === "multiple" ? MultiOptionRow : SingleOptionRow;
   const isTest = process.env.NODE_ENV === "test";
   return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { ...listBoxProps, ...onKeyDown ? {
     onKeyDown,
@@ -20413,10 +20452,10 @@ function OptionList(props) {
       const item = items[index];
       const entry = item?.value;
       if (!item || !entry) return null;
-      const treeRow = isTree ? tree?.rows.get(String(item.key)) : void 0;
+      const treeRow = tree?.rows.get(String(item.key));
       const mixedLegendId = mixed?.keys.has(entry.valueKey) ? mixed.legendId : void 0;
       if (treeRow && tree) {
-        return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(TreeOptionRow, { item, state, id: optionDomId(id, index), disabledReason: disabledReasons[entry.valueKey], mixedLegendId, row: treeRow, onExpandedChange: (expanded) => tree.setExpanded(String(item.key), expanded), ...tid });
+        return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(TreeOptionRow, { item, state, id: optionDomId(id, index), disabledReason: disabledReasons[entry.valueKey], mixedLegendId, row: treeRow, selectionMode, onExpandedChange: (expanded) => tree.setExpanded(String(item.key), expanded), ...tid });
       }
       return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Row2, { item, state, id: optionDomId(id, index), disabledReason: disabledReasons[entry.valueKey], mixedLegendId, ...tid });
     } }, isTest ? items.length : "virtuoso"),
@@ -20689,10 +20728,10 @@ function useMenuSelectField(props) {
   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, unsetLabel, autoSort),
+    () => initializeOptions(optionsProp, getOptionValue, getOptionLabel, unsetLabel, autoSort, getChildren),
     // getOptionValue and getOptionLabel are typically inline lambdas
     // oxlint-disable-next-line react-hooks/exhaustive-deps
-    [optionsProp, autoSort, unsetLabel]
+    [optionsProp, autoSort, unsetLabel, getChildren]
   );
   const { hoverProps, isHovered } = (0, import_react_aria37.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_react_aria37.useFocusRing)();
@@ -20703,6 +20742,8 @@ function useMenuSelectField(props) {
     // oxlint-disable-next-line react-hooks/exhaustive-deps
     [options, getChildren]
   );
+  const isSingleSelectTree = !multiple && menuTree !== void 0;
+  const isMultiSelectTree = multiple && menuTree !== void 0;
   const allOptions = (0, import_react85.useMemo)(
     () => menuTree ? menuTree.orderedKeys.map((k) => menuTree.nodes.get(k).option) : options,
     [menuTree, options]
@@ -20721,12 +20762,17 @@ function useMenuSelectField(props) {
   const { effectiveValue, proposalProps } = useAiProposal(
     propValues,
     proposedValues,
-    (vs) => labelsFor(vs, allOptions, getOptionValue, getOptionLabel).join(", ")
+    (vs) => labelsFor(
+      vs,
+      allOptions,
+      getOptionValue,
+      (option) => isSingleSelectTree && menuTree ? optionPathLabel(menuTree, valueToKey(getOptionValue(option)), getOptionLabel) ?? getOptionLabel(option) : getOptionLabel(option)
+    ).join(", ")
   );
   const values = (0, import_react85.useMemo)(() => effectiveValue ?? [], [effectiveValue]);
   const selectedKeys = (0, import_react85.useMemo)(
-    () => menuTree ? normalizeTreeSelection(menuTree, values.map(valueToKey), disabledKeySet) : new Set(values.map(valueToKey)),
-    [menuTree, values, disabledKeySet]
+    () => isMultiSelectTree && menuTree ? normalizeTreeSelection(menuTree, values.map(valueToKey), disabledKeySet) : new Set(values.map(valueToKey)),
+    [isMultiSelectTree, menuTree, values, disabledKeySet]
   );
   const selectedRowKeys = (0, import_react85.useMemo)(
     () => menuTree ? new Set(menuTree.orderedKeys.filter((key) => selectedKeys.has(menuTree.nodes.get(key).valueKey))) : selectedKeys,
@@ -20770,10 +20816,11 @@ function useMenuSelectField(props) {
     return visibleNestedRows(
       roots,
       (node) => childNodes(menuTree, node),
-      (node) => isExpanded(node.key),
+      // A single-select hierarchy has no chevrons, so every node stays visible.
+      isMultiSelectTree ? (node) => isExpanded(node.key) : () => true,
       matchKeys ? (node) => matchKeys.has(node.valueKey) : void 0
     );
-  }, [menuTree, allOptions, search, serverSearch, contains, expandedKeys, searchCollapsedKeys]);
+  }, [menuTree, isMultiSelectTree, allOptions, search, serverSearch, contains, expandedKeys, searchCollapsedKeys]);
   const filteredOptions = (0, import_react85.useMemo)(
     () => menuTree || !search || serverSearch ? options : options.filter(
       (option) => unsetLabel && option === unsetOption ? contains(getOptionLabel(option), search) : matchesSearch(option, search, getOptionLabel, getOptionSearchText, contains)
@@ -20784,7 +20831,7 @@ function useMenuSelectField(props) {
   );
   function onSelectionChange(keys) {
     if (keys === "all") return;
-    if (menuTree) {
+    if (isMultiSelectTree && menuTree) {
       const added = [...keys].map(String).find((key2) => !selectedRowKeys.has(key2));
       const removed = [...selectedRowKeys].find((key2) => !keys.has(key2));
       const key = added ?? removed;
@@ -20801,7 +20848,7 @@ function useMenuSelectField(props) {
         close({ restoreFocus: true });
         return;
       }
-      const opt = optionsByKey.get(String(key));
+      const opt = isSingleSelectTree && menuTree ? menuTree.nodes.get(String(key))?.option : optionsByKey.get(String(key));
       proposalProps.onUserEdit?.();
       onCommit(opt === void 0 ? [] : [getOptionValue(opt)], opt === void 0 ? [] : [opt]);
       close({ restoreFocus: true });
@@ -20927,7 +20974,7 @@ function useMenuSelectField(props) {
     switch (e.key) {
       case "ArrowRight":
       case "ArrowLeft":
-        onTreeArrow(e, current2);
+        if (isMultiSelectTree) onTreeArrow(e, current2);
         break;
       case "ArrowDown":
         e.preventDefault();
@@ -20998,20 +21045,20 @@ function useMenuSelectField(props) {
     0,
     treeRows ? treeRows.findIndex(({ node }) => revealKeys.has(node.valueKey)) : filteredOptions.findIndex((o) => revealKeys.has(valueToKey(getOptionValue(o))))
   );
-  const selectedText = !multiple && selectedOptions[0] !== void 0 ? getOptionLabel(selectedOptions[0]) : "";
+  const selectedText = !multiple && selectedOptions[0] !== void 0 ? isSingleSelectTree && menuTree ? optionPathLabel(menuTree, valueToKey(getOptionValue(selectedOptions[0])), getOptionLabel) ?? getOptionLabel(selectedOptions[0]) : getOptionLabel(selectedOptions[0]) : "";
   const hasSelection = menuTree ? selectedKeys.size > 0 : values.length > 0;
   const isMixed = dottedKeys.size > 0 && (multiple || !hasSelection);
   const displayText = isMixed ? mixedLabel : selectedText || (hasSelection ? "" : nothingSelectedText || placeholder || "");
   const isPlaceholder = !isMixed && !selectedText && !hasSelection && !nothingSelectedText && !!placeholder;
-  const selectedLabels = menuTree && tree && getChildren ? bucketTreeSelection(selectedOptions, getChildren)[tree.display].map((option) => ({
+  const selectedLabels = isMultiSelectTree && getChildren && tree?.display ? bucketTreeSelection(selectedOptions, getChildren)[tree.display].map((option) => ({
     key: valueToKey(getOptionValue(option)),
     label: getOptionLabel(option)
   })) : multiple ? selectedOptions.map((o) => ({ key: valueToKey(getOptionValue(o)), label: getOptionLabel(o) })) : [];
   const badgeKeys = isMixed ? /* @__PURE__ */ new Set([...selectedLabels.map(({ key }) => key), ...dottedKeys]) : void 0;
   const badgeLabels = badgeKeys ? [...optionsByKey].filter(([key]) => badgeKeys.has(key)).map(([key, option]) => ({ key, label: getOptionLabel(option) })) : selectedLabels;
   const partialKeys = (0, import_react85.useMemo)(
-    () => menuTree ? partiallySelectedKeys(menuTree, selectedKeys) : void 0,
-    [menuTree, selectedKeys]
+    () => isMultiSelectTree && menuTree ? partiallySelectedKeys(menuTree, selectedKeys) : void 0,
+    [isMultiSelectTree, menuTree, selectedKeys]
   );
   const treeRowStates = treeRows ? new Map(
     treeRows.map(({ node, level }) => [
@@ -21019,15 +21066,15 @@ function useMenuSelectField(props) {
       {
         level,
         hasChildren: node.childKeys.length > 0,
-        isExpanded: node.childKeys.length > 0 && isExpanded(node.key),
-        isIndeterminate: !!partialKeys?.has(node.key)
+        isExpanded: isMultiSelectTree ? node.childKeys.length > 0 && isExpanded(node.key) : true,
+        isIndeterminate: isMultiSelectTree && !!partialKeys?.has(node.key)
       }
     ])
   ) : void 0;
   function deselect(key) {
     if (!multiple || disabledKeys.includes(key)) return;
     proposalProps.onUserEdit?.();
-    if (menuTree) {
+    if (isMultiSelectTree && menuTree) {
       const toggledKeys = toggleTreeSelection(menuTree, selectedKeys, key, false, disabledKeySet);
       commitTree(toggledKeys, key);
       return;
@@ -21100,7 +21147,7 @@ function useMenuSelectField(props) {
     loading: optionsLoading,
     disabledReasons,
     initialIndex,
-    rowVariant: treeRowStates ? "tree" : multiple ? "checkbox" : "check",
+    selectionMode,
     tree: treeRowStates ? { rows: treeRowStates, setExpanded: setTreeExpanded } : void 0,
     mixed: dottedKeys.size > 0 ? { keys: dottedKeys, legendId } : void 0,
     onKeyDown: onMenuKeyDown,
@@ -21170,6 +21217,17 @@ function labelsFor(values, options, getOptionValue, getOptionLabel) {
   }
   return labels;
 }
+function optionPathLabel(tree, valueKey, getOptionLabel) {
+  const node = tree.orderedKeys.map((key) => tree.nodes.get(key)).find((entry) => entry.valueKey === valueKey);
+  if (!node) return void 0;
+  const labels = [];
+  let current2 = node;
+  while (current2) {
+    labels.unshift(getOptionLabel(current2.option));
+    current2 = current2.parentKey === void 0 ? void 0 : tree.nodes.get(current2.parentKey);
+  }
+  return labels.join(" > ");
+}
 function rootNodes(tree) {
   return tree.orderedKeys.filter((key) => tree.nodes.get(key).parentKey === void 0).map((key) => tree.nodes.get(key));
 }
@@ -21282,7 +21340,8 @@ function BaseMenuSelectField(props) {
 // src/inputs/MenuSelectField/MenuSelectField.tsx
 var import_jsx_runtime119 = require("react/jsx-runtime");
 function MenuSelectField(props) {
-  const { value, proposedValue, onSelect, unsetLabel, ...rest } = props;
+  const { value, proposedValue, onSelect, unsetLabel, options, autoSort, ...rest } = props;
+  const nested = optionsHaveChildren(options);
   const values = (0, import_react86.useMemo)(() => {
     if (value !== void 0) return [value];
     return unsetLabel ? [void 0] : [];
@@ -21292,10 +21351,13 @@ function MenuSelectField(props) {
     BaseMenuSelectField,
     {
       ...rest,
+      options,
       unsetLabel,
+      autoSort: autoSort ?? !nested,
       selectionMode: "single",
       values,
       proposedValues,
+      tree: nested ? { getChildren: menuOptionChildren } : void 0,
       onCommit: (next, opts) => {
         const option = opts[0];
         onSelect(next[0], option === unsetOption ? void 0 : option);
@@ -21303,6 +21365,19 @@ function MenuSelectField(props) {
     }
   );
 }
+function optionsHaveChildren(options) {
+  const list = Array.isArray(options) ? options : [
+    ...options.current === void 0 ? [] : Array.isArray(options.current) ? options.current : [options.current],
+    ...options.options ?? []
+  ];
+  return list.some((option) => isNestedOption(option) && (option.children?.length ?? 0) > 0);
+}
+function menuOptionChildren(option) {
+  return isNestedOption(option) ? option.children : void 0;
+}
+function isNestedOption(option) {
+  return typeof option === "object" && option !== null && "children" in option && Array.isArray(option.children);
+}
 
 // src/components/Filters/Filters.tsx
 var import_jsx_runtime120 = require("react/jsx-runtime");