@homebound/beam 4.61.0 → 4.62.0

package/dist/index.d.cts

@@ -8768,6 +8768,31 @@ type OptionsOrLoad<O> = O[] | {
     options: O[] | undefined;
 };
 
+type NestedOption<O> = O & {
+    children?: NestedOption<O>[];
+    defaultCollapsed?: boolean;
+};
+type NestedOptionsOrLoad<O> = NestedOption<O>[] | {
+    current: NestedOption<O>[];
+    load: () => Promise<{
+        options: NestedOption<O>[];
+    }>;
+};
+type TreeSelectResponse<O, V extends Value> = {
+    all: {
+        values: V[];
+        options: O[];
+    };
+    leaf: {
+        values: V[];
+        options: O[];
+    };
+    root: {
+        values: V[];
+        options: O[];
+    };
+};
+
 /** Props shared by `MenuSelectField`, `MenuMultiSelectField`, and `MenuTreeSelectField`. */
 type MenuSelectFieldBaseProps<O, V extends Value> = {
     label: string;
@@ -8781,7 +8806,7 @@ type MenuSelectFieldBaseProps<O, V extends Value> = {
     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. */
+    /** Sort options by `getOptionLabel`. On by default. `MenuTreeSelectField` defaults this to false, and so does `MenuSelectField` when an option has `children`. */
     autoSort?: boolean;
     /** Debounced menu search text. The caller replaces `options` and should keep `mixedValues` in that list. Closing calls this with `""`. */
     onSearch?: (search: string) => void;
@@ -8806,7 +8831,9 @@ type MenuSelectFieldBaseProps<O, V extends Value> = {
     onFocus?: VoidFunction;
     onBlur?: VoidFunction;
 } & Pick<PresentationFieldProps, "labelStyle" | "compact" | "borderless" | "borderOnHover" | "fullWidth" | "visuallyDisabled" | "errorInTooltip" | "inputStylePalette">;
-type MenuSelectFieldProps<O, V extends Value> = MenuSelectFieldBaseProps<O, V> & {
+type MenuSelectFieldProps<O, V extends Value> = Omit<MenuSelectFieldBaseProps<O, V>, "options"> & {
+    /** Flat `O[]`, or `NestedOption<O>[]` when a row has `children`. `{ current, load, options }` loads either list. */
+    options: OptionsOrLoad<O> | OptionsOrLoad<NestedOption<O>>;
     value: V | undefined;
     /** Value proposed by an AI model; puts the field in AI mode. */
     proposedValue?: V;
@@ -8846,31 +8873,6 @@ type BoundMenuSelectFieldProps<O, V extends Value> = Omit<MenuSelectFieldProps<O
 /** Binds `MenuSelectField` to a form field. */
 declare function BoundMenuSelectField<O, V extends Value>(props: BoundMenuSelectFieldProps<O, V>): JSX.Element;
 
-type NestedOption<O> = O & {
-    children?: NestedOption<O>[];
-    defaultCollapsed?: boolean;
-};
-type NestedOptionsOrLoad<O> = NestedOption<O>[] | {
-    current: NestedOption<O>[];
-    load: () => Promise<{
-        options: NestedOption<O>[];
-    }>;
-};
-type TreeSelectResponse<O, V extends Value> = {
-    all: {
-        values: V[];
-        options: O[];
-    };
-    leaf: {
-        values: V[];
-        options: O[];
-    };
-    root: {
-        values: V[];
-        options: O[];
-    };
-};
-
 type MenuTreeSelectFieldProps<O, V extends Value> = MenuSelectFieldBaseProps<NestedOption<O>, V> & {
     /** Selected values. A parent selects its whole subtree; a parent whose children are all selected is selected too. */
     values: V[];
@@ -12038,7 +12040,9 @@ type ErrorMessageProps = {
  */
 declare function ErrorMessage(props: ErrorMessageProps): React$1.JSX.Element;
 
-/** Select whose trigger shows the value and opens a menu. Search is included when the list is longer than `searchOptionLimit`, or when `onSearch` is set. See `MenuSelectField.mdx`. */
+/** Select whose trigger shows the value and opens a menu.
+ *
+ * Options with `children` are a tree: every node stays visible, and the trigger shows the path. Search is included when the list is longer than `searchOptionLimit`, or when `onSearch` is set. See `MenuSelectField.mdx`. */
 declare function MenuSelectField<O, V extends Value>(props: MenuSelectFieldProps<O, V>): JSX.Element;
 
 type ToggleButtonProps = {

package/dist/index.d.ts

@@ -8768,6 +8768,31 @@ type OptionsOrLoad<O> = O[] | {
     options: O[] | undefined;
 };
 
+type NestedOption<O> = O & {
+    children?: NestedOption<O>[];
+    defaultCollapsed?: boolean;
+};
+type NestedOptionsOrLoad<O> = NestedOption<O>[] | {
+    current: NestedOption<O>[];
+    load: () => Promise<{
+        options: NestedOption<O>[];
+    }>;
+};
+type TreeSelectResponse<O, V extends Value> = {
+    all: {
+        values: V[];
+        options: O[];
+    };
+    leaf: {
+        values: V[];
+        options: O[];
+    };
+    root: {
+        values: V[];
+        options: O[];
+    };
+};
+
 /** Props shared by `MenuSelectField`, `MenuMultiSelectField`, and `MenuTreeSelectField`. */
 type MenuSelectFieldBaseProps<O, V extends Value> = {
     label: string;
@@ -8781,7 +8806,7 @@ type MenuSelectFieldBaseProps<O, V extends Value> = {
     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. */
+    /** Sort options by `getOptionLabel`. On by default. `MenuTreeSelectField` defaults this to false, and so does `MenuSelectField` when an option has `children`. */
     autoSort?: boolean;
     /** Debounced menu search text. The caller replaces `options` and should keep `mixedValues` in that list. Closing calls this with `""`. */
     onSearch?: (search: string) => void;
@@ -8806,7 +8831,9 @@ type MenuSelectFieldBaseProps<O, V extends Value> = {
     onFocus?: VoidFunction;
     onBlur?: VoidFunction;
 } & Pick<PresentationFieldProps, "labelStyle" | "compact" | "borderless" | "borderOnHover" | "fullWidth" | "visuallyDisabled" | "errorInTooltip" | "inputStylePalette">;
-type MenuSelectFieldProps<O, V extends Value> = MenuSelectFieldBaseProps<O, V> & {
+type MenuSelectFieldProps<O, V extends Value> = Omit<MenuSelectFieldBaseProps<O, V>, "options"> & {
+    /** Flat `O[]`, or `NestedOption<O>[]` when a row has `children`. `{ current, load, options }` loads either list. */
+    options: OptionsOrLoad<O> | OptionsOrLoad<NestedOption<O>>;
     value: V | undefined;
     /** Value proposed by an AI model; puts the field in AI mode. */
     proposedValue?: V;
@@ -8846,31 +8873,6 @@ type BoundMenuSelectFieldProps<O, V extends Value> = Omit<MenuSelectFieldProps<O
 /** Binds `MenuSelectField` to a form field. */
 declare function BoundMenuSelectField<O, V extends Value>(props: BoundMenuSelectFieldProps<O, V>): JSX.Element;
 
-type NestedOption<O> = O & {
-    children?: NestedOption<O>[];
-    defaultCollapsed?: boolean;
-};
-type NestedOptionsOrLoad<O> = NestedOption<O>[] | {
-    current: NestedOption<O>[];
-    load: () => Promise<{
-        options: NestedOption<O>[];
-    }>;
-};
-type TreeSelectResponse<O, V extends Value> = {
-    all: {
-        values: V[];
-        options: O[];
-    };
-    leaf: {
-        values: V[];
-        options: O[];
-    };
-    root: {
-        values: V[];
-        options: O[];
-    };
-};
-
 type MenuTreeSelectFieldProps<O, V extends Value> = MenuSelectFieldBaseProps<NestedOption<O>, V> & {
     /** Selected values. A parent selects its whole subtree; a parent whose children are all selected is selected too. */
     values: V[];
@@ -12038,7 +12040,9 @@ type ErrorMessageProps = {
  */
 declare function ErrorMessage(props: ErrorMessageProps): React$1.JSX.Element;
 
-/** Select whose trigger shows the value and opens a menu. Search is included when the list is longer than `searchOptionLimit`, or when `onSearch` is set. See `MenuSelectField.mdx`. */
+/** Select whose trigger shows the value and opens a menu.
+ *
+ * Options with `children` are a tree: every node stays visible, and the trigger shows the path. Search is included when the list is longer than `searchOptionLimit`, or when `onSearch` is set. See `MenuSelectField.mdx`. */
 declare function MenuSelectField<O, V extends Value>(props: MenuSelectFieldProps<O, V>): JSX.Element;
 
 type ToggleButtonProps = {

package/dist/index.js

@@ -18823,7 +18823,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);
@@ -18840,8 +18840,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);
         }
       });
@@ -18851,6 +18851,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];
@@ -19620,7 +19627,9 @@ function BaseOptionRow(props) {
     id,
     disabledReason,
     mixedLegendId,
-    variant
+    variant,
+    indent,
+    isPathRoot
   } = props;
   const entry = item.value;
   const ref = useRef34(null);
@@ -19655,6 +19664,11 @@ function BaseOptionRow(props) {
         ref,
         ...trussProps76({
           ...rowCss,
+          ...indent !== void 0 ? {
+            paddingLeft: ["pl_var", {
+              "--paddingLeft": `${indent}px`
+            }]
+          } : {},
           ...highlighted ? {
             backgroundColor: ["bgColor_var", {
               "--backgroundColor": "var(--b-surface-raised-hover)"
@@ -19671,7 +19685,17 @@ function BaseOptionRow(props) {
         children: [
           variant === "checkbox" && /* @__PURE__ */ jsx115(StyledCheckbox, { isSelected, isDisabled }),
           variant === "checkbox" && mixedLegendId && /* @__PURE__ */ jsx115(MixedDot, {}),
-          /* @__PURE__ */ jsx115("span", { className: "fg1 mw0", children: item.rendered }),
+          /* @__PURE__ */ jsx115("span", { ...trussProps76({
+            ...{
+              flexGrow: "fg1",
+              minWidth: "mw0"
+            },
+            ...isPathRoot ? {
+              fontWeight: "fw6",
+              fontSize: "fz_14px",
+              lineHeight: "lh_20px"
+            } : {}
+          }), children: item.rendered }),
           variant === "check" && isSelected && /* @__PURE__ */ jsx115("span", { className: "df aic fs0", children: /* @__PURE__ */ jsx115(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__ */ jsx115("span", { className: "df aic jcc fs0 h_24px w_24px", children: /* @__PURE__ */ jsx115(MixedDot, {}) })
@@ -19681,6 +19705,21 @@ function BaseOptionRow(props) {
   });
 }
 function TreeOptionRow(props) {
+  const {
+    selectionMode,
+    onExpandedChange,
+    ...rowProps
+  } = props;
+  if (selectionMode === "single") return /* @__PURE__ */ jsx115(SingleTreeOptionRow, { ...rowProps });
+  return /* @__PURE__ */ jsx115(MultiTreeOptionRow, { ...rowProps, selectionMode, onExpandedChange });
+}
+function SingleTreeOptionRow({
+  row,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx115(BaseOptionRow, { ...rest, variant: "check", indent: rowPaddingX + row.level * singleTreeIndent, isPathRoot: row.level === 0 });
+}
+function MultiTreeOptionRow(props) {
   const {
     item,
     state,
@@ -19771,6 +19810,7 @@ function TreeOptionRow(props) {
 }
 var menuRowHeight = 40;
 var rowPaddingX = 16;
+var singleTreeIndent = 16;
 var treeIndent = 28;
 var rowCss = {
   display: "df",
@@ -19848,7 +19888,7 @@ function OptionList(props) {
     disabledReasons,
     initialIndex,
     loading,
-    rowVariant,
+    selectionMode,
     tree,
     mixed
   } = menu;
@@ -19877,8 +19917,7 @@ function OptionList(props) {
     });
   }, [focusedKey, state.collection]);
   const [initialTop] = useState30(() => 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__ */ jsx116("div", { ...listBoxProps, ...onKeyDown ? {
     onKeyDown,
@@ -19902,10 +19941,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__ */ jsx116(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__ */ jsx116(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__ */ jsx116(Row2, { item, state, id: optionDomId(id, index), disabledReason: disabledReasons[entry.valueKey], mixedLegendId, ...tid });
     } }, isTest ? items.length : "virtuoso"),
@@ -20178,10 +20217,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 = useMemo28(
-    () => 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 } = useHover13({});
   const { focusProps, isFocusVisible } = useFocusRing10();
@@ -20192,6 +20231,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 = useMemo28(
     () => menuTree ? menuTree.orderedKeys.map((k) => menuTree.nodes.get(k).option) : options,
     [menuTree, options]
@@ -20210,12 +20251,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 = useMemo28(() => effectiveValue ?? [], [effectiveValue]);
   const selectedKeys = useMemo28(
-    () => 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 = useMemo28(
     () => menuTree ? new Set(menuTree.orderedKeys.filter((key) => selectedKeys.has(menuTree.nodes.get(key).valueKey))) : selectedKeys,
@@ -20259,10 +20305,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 = useMemo28(
     () => menuTree || !search || serverSearch ? options : options.filter(
       (option) => unsetLabel && option === unsetOption ? contains(getOptionLabel(option), search) : matchesSearch(option, search, getOptionLabel, getOptionSearchText, contains)
@@ -20273,7 +20320,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;
@@ -20290,7 +20337,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 });
@@ -20416,7 +20463,7 @@ function useMenuSelectField(props) {
     switch (e.key) {
       case "ArrowRight":
       case "ArrowLeft":
-        onTreeArrow(e, current2);
+        if (isMultiSelectTree) onTreeArrow(e, current2);
         break;
       case "ArrowDown":
         e.preventDefault();
@@ -20487,20 +20534,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 = useMemo28(
-    () => 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 }) => [
@@ -20508,15 +20555,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;
@@ -20589,7 +20636,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,
@@ -20659,6 +20706,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));
 }
@@ -20771,7 +20829,8 @@ function BaseMenuSelectField(props) {
 // src/inputs/MenuSelectField/MenuSelectField.tsx
 import { jsx as jsx119 } from "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 = useMemo29(() => {
     if (value !== void 0) return [value];
     return unsetLabel ? [void 0] : [];
@@ -20781,10 +20840,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);
@@ -20792,6 +20854,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
 import { jsx as jsx120, jsxs as jsxs79 } from "react/jsx-runtime";