@homebound/beam 2.354.2 → 2.354.4

package/dist/Css.d.ts

@@ -3852,10 +3852,22 @@ declare class CssBuilder<T extends Properties> {
     } & {
         textOverflow: import("csstype").Property.TextOverflow | undefined;
     }>;
+    /** Sets `fontSize: value`. */
+    fs(value: Properties["fontSize"]): CssBuilder<T & {
+        fontSize: import("csstype").Property.FontSize<string | 0> | undefined;
+    }>;
+    /** Sets `fontSize: px`. */
+    fsPx(px: number): CssBuilder<T & {
+        fontSize: import("csstype").Property.FontSize<string | 0> | undefined;
+    }>;
     /** Sets `lineHeight: value`. */
     lh(value: Properties["lineHeight"]): CssBuilder<T & {
         lineHeight: import("csstype").Property.LineHeight<string | 0> | undefined;
     }>;
+    /** Sets `lineHeight: px`. */
+    lhPx(px: number): CssBuilder<T & {
+        lineHeight: import("csstype").Property.LineHeight<string | 0> | undefined;
+    }>;
     /** Sets `userSelect: "none"`. */
     get usn(): CssBuilder<T & {
         userSelect: import("csstype").Property.UserSelect | undefined;

package/dist/Css.js

@@ -3409,10 +3409,22 @@ class CssBuilder {
     get truncate() {
         return this.add("whiteSpace", "nowrap").add("overflow", "hidden").add("textOverflow", "ellipsis");
     }
+    /** Sets `fontSize: value`. */
+    fs(value) {
+        return this.add("fontSize", value);
+    }
+    /** Sets `fontSize: px`. */
+    fsPx(px) {
+        return this.fs(`${px}px`);
+    }
     /** Sets `lineHeight: value`. */
     lh(value) {
         return this.add("lineHeight", value);
     }
+    /** Sets `lineHeight: px`. */
+    lhPx(px) {
+        return this.lh(`${px}px`);
+    }
     // userSelect
     /** Sets `userSelect: "none"`. */
     get usn() {

package/dist/inputs/TreeSelectField/TreeSelectField.d.ts

@@ -38,6 +38,10 @@ export interface TreeSelectFieldProps<O, V extends Value> extends BeamFocusableP
     defaultCollapsed?: boolean;
     /** Allow the field's height to grow up to a predefined height (currently 72px), then scroll. */
     multiline?: boolean;
+    /** Which selected options to display as chips in the input field when not focused.
+     * @default root */
+    chipDisplay?: "all" | "leaf" | "root";
+    disabledOptions?: V[];
 }
 export declare function TreeSelectField<O, V extends Value>(props: TreeSelectFieldProps<O, V>): JSX.Element;
 export declare function TreeSelectField<O extends HasIdAndName<V>, V extends Value>(props: Optional<TreeSelectFieldProps<O, V>, "getOptionValue" | "getOptionLabel">): JSX.Element;

package/dist/inputs/TreeSelectField/TreeSelectField.js

@@ -37,6 +37,7 @@ const ListBox_1 = require("../internal/ListBox");
 const utils_1 = require("./utils");
 const Value_1 = require("../Value");
 const utils_2 = require("../utils");
+const ComboBoxBase_1 = require("../internal/ComboBoxBase");
 function TreeSelectField(props) {
     const { getOptionValue = (opt) => opt.id, // if unset, assume O implements HasId
     getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
@@ -62,72 +63,70 @@ exports.CollapsedContext = react_1.default.createContext({
     getOptionValue: () => ({}),
 });
 function TreeSelectFieldBase(props) {
-    var _a, _b;
+    var _a, _b, _c;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const { values, options, getOptionValue, getOptionLabel, getOptionMenuLabel = getOptionLabel, disabled, readOnly, labelStyle, borderless, contrast = false, nothingSelectedText = "", onSelect, defaultCollapsed = false, placeholder, fullWidth = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.fullWidth) !== null && _a !== void 0 ? _a : false, ...otherProps } = props;
+    const { values, options, getOptionValue, getOptionLabel, getOptionMenuLabel = getOptionLabel, disabled, readOnly, labelStyle, borderless, contrast = false, nothingSelectedText = "", onSelect, defaultCollapsed = false, placeholder, fullWidth = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.fullWidth) !== null && _a !== void 0 ? _a : false, chipDisplay = "root", disabledOptions, ...otherProps } = props;
     const isDisabled = !!disabled;
     const isReadOnly = !!readOnly;
     const initialOptions = Array.isArray(options) ? options : options.current;
     const { contains } = (0, react_aria_1.useFilter)({ sensitivity: "base" });
     const { collapsedKeys } = useTreeSelectFieldProvider();
-    function levelOptions(o, level, filtering) {
-        var _a;
-        // If a user is filtering, then do not provide level to the options as the various paddings may look quite odd.
-        const actualLevel = filtering ? 0 : level;
-        return [
-            [o, actualLevel],
-            ...(((_a = o.children) === null || _a === void 0 ? void 0 : _a.length) && !collapsedKeys.includes((0, Value_1.valueToKey)(getOptionValue(o)))
-                ? o.children.flatMap((oc) => levelOptions(oc, actualLevel + 1, filtering))
-                : []),
-        ];
-    }
-    // Initialize the TreeFieldState
-    const [fieldState, setFieldState] = (0, react_1.useState)(() => {
-        var _a;
-        const filteredOptions = initialOptions.flatMap((o) => levelOptions(o, 0));
-        const selectedOptions = (_a = values === null || values === void 0 ? void 0 : values.flatMap((v) => {
-            var _a, _b;
-            const maybeOption = (0, utils_1.findOption)(initialOptions, (0, Value_1.valueToKey)(v), getOptionValue);
-            if (!maybeOption)
-                return [];
-            const { option } = maybeOption;
-            // If the selected key has children then all children should also be considered selected.
-            return [option, ...((_b = (_a = option.children) === null || _a === void 0 ? void 0 : _a.flatMap(utils_1.flattenOptions)) !== null && _b !== void 0 ? _b : [])];
-        })) !== null && _a !== void 0 ? _a : [];
-        const selectedKeys = selectedOptions.map((o) => (0, Value_1.valueToKey)(getOptionValue(o)));
-        // It is possible that all the children of a parent were considered selected `values`, but the parent wasn't.
+    // `disabledKeys` from ComboBoxState does not support additional meta for showing a disabled reason to the user
+    // This lookup map helps us cleanly prune out the optional reason text, then access it further down the component tree
+    const disabledOptionsWithReasons = Object.fromEntries((_b = disabledOptions === null || disabledOptions === void 0 ? void 0 : disabledOptions.map(ComboBoxBase_1.disabledOptionToKeyedTuple)) !== null && _b !== void 0 ? _b : []);
+    const initTreeFieldState = (0, react_1.useCallback)(() => {
+        // Figure out which options should be considered selected.
+        // This is a bit of a complex process because:
+        // 1. The `values` array could contain the values of the parent options, but not the children. So those children should be considered selected.
+        // 2. The `values` array could contain the values of the children, but not the parent. So the parent should be considered selected if all children are.
+        // Create a list of all selected values - using a Set to immediately dedupe the list.
+        const selectedKeys = new Set(values === null || values === void 0 ? void 0 : values.flatMap((v) => {
+            // Find the options that matches the value. These could be parents or a children.
+            const foundOptions = (0, utils_1.findOptions)(initialOptions, (0, Value_1.valueToKey)(v), getOptionValue);
+            // Go through the `foundOptions` and get the keys of the options and its children if it has any.
+            return foundOptions.flatMap(({ option }) => {
+                var _a, _b;
+                return [
+                    (0, Value_1.valueToKey)(getOptionValue(option)),
+                    ...((_b = (_a = option.children) === null || _a === void 0 ? void 0 : _a.flatMap((o) => (0, Value_1.valueToKey)(getOptionValue(o)))) !== null && _b !== void 0 ? _b : []),
+                ];
+            });
+        }));
+        // It is possible that all the children of a parent were considered selected `values`, but the parent wasn't included in the `values` array.
         // In this case, the parent also should be considered a selected option.
         function areAllChildrenSelected(maybeParent) {
-            const isSelected = selectedKeys.includes((0, Value_1.valueToKey)(getOptionValue(maybeParent)));
-            // if this key is already selected, then return true
-            if (isSelected)
-                return true;
-            // If we do not have children, then return the state of this leaf node.
-            if (!maybeParent.children || maybeParent.children.length === 0)
+            const isSelected = selectedKeys.has((0, Value_1.valueToKey)(getOptionValue(maybeParent)));
+            // If already selected, or the options does not have children, then return its current state.
+            if (isSelected || !maybeParent.children || maybeParent.children.length === 0)
                 return isSelected;
             // If we do have children, then check if all children are selected.
-            // if all are selected, then push this parent to the selectedKeys and selectedOptions
+            // if all are selected, then push this parent to the selectedKeys
             const areAllSelected = maybeParent.children.every(areAllChildrenSelected);
             if (areAllSelected) {
-                selectedKeys.push((0, Value_1.valueToKey)(getOptionValue(maybeParent)));
-                selectedOptions.push(maybeParent);
+                selectedKeys.add((0, Value_1.valueToKey)(getOptionValue(maybeParent)));
             }
             return areAllSelected;
         }
         initialOptions.forEach(areAllChildrenSelected);
-        // Given a child option, determine if the parent is selected.
-        const isParentSelected = (option) => {
-            var _a;
-            const parents = (_a = (0, utils_1.findOption)(initialOptions, (0, Value_1.valueToKey)(getOptionValue(option)), getOptionValue)) === null || _a === void 0 ? void 0 : _a.parents;
-            if (!parents)
-                return false;
-            return parents.some((parent) => selectedKeys.includes((0, Value_1.valueToKey)(getOptionValue(parent))));
-        };
-        const selectedOptionsLabels = selectedOptions.filter((o) => !isParentSelected(o)).map(getOptionLabel);
+        // Using the `selectedKeys` Set, find the corresponding options that are selected. As it's a Set, its already deduped.
+        const selectedOptions = [...selectedKeys].flatMap((key) => {
+            // Find the first matching option, then this list will also be already deduped.
+            const maybeOption = (0, utils_1.findOption)(initialOptions, key, getOptionValue);
+            if (!maybeOption)
+                return [];
+            return [maybeOption.option];
+        });
+        // Store a list of the selected option labels so we can quickly refer to them later
+        const selectedOptionsLabels = chipDisplay === "root"
+            ? initialOptions.flatMap((o) => getTopLevelSelections(o, selectedKeys, getOptionValue)).map(getOptionLabel)
+            : chipDisplay === "leaf"
+                ? selectedOptions.filter((o) => !o.children || o.children.length === 0).map(getOptionLabel)
+                : selectedOptions.map(getOptionLabel);
+        const filteredOptions = initialOptions.flatMap((o) => levelOptions(o, 0, false, collapsedKeys, getOptionValue));
         return {
-            selectedKeys,
+            selectedKeys: [...selectedKeys],
             inputValue: selectedOptions.length === 1
-                ? getOptionLabel(selectedOptions[0])
+                ? getOptionLabel([...selectedOptions][0])
                 : isReadOnly && selectedOptions.length > 0
                     ? selectedOptionsLabels.join(", ")
                     : selectedOptions.length === 0
@@ -140,7 +139,28 @@ function TreeSelectFieldBase(props) {
             optionsLoading: false,
             allowCollapsing: true,
         };
-    });
+    }, [
+        initialOptions,
+        values,
+        chipDisplay,
+        getOptionLabel,
+        isReadOnly,
+        nothingSelectedText,
+        collapsedKeys,
+        getOptionValue,
+    ]);
+    // Initialize the TreeFieldState
+    const [fieldState, setFieldState] = (0, react_1.useState)(() => initTreeFieldState());
+    // Reset the TreeFieldState if the values array changes and doesn't match the selectedOptions
+    (0, react_1.useEffect)(() => {
+        // if the values does not match the values in the fieldState, then update the fieldState
+        const selectedKeys = fieldState.selectedOptions.map((o) => (0, Value_1.valueToKey)(getOptionValue(o)));
+        if (values &&
+            (values.length !== selectedKeys.length || !values.every((v) => selectedKeys.includes((0, Value_1.valueToKey)(v))))) {
+            setFieldState(initTreeFieldState());
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getOptionValue, initTreeFieldState, values]);
     // React to collapsed keys and update the filtered options
     const reactToCollapse = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
@@ -150,12 +170,12 @@ function TreeSelectFieldBase(props) {
                 allOptions,
                 inputValue,
                 ...others,
-                filteredOptions: allOptions.flatMap((o) => levelOptions(o, 0, inputValue.length > 0).filter(([option]) => contains(getOptionLabel(option), inputValue))),
+                filteredOptions: allOptions.flatMap((o) => levelOptions(o, 0, inputValue.length > 0, collapsedKeys, getOptionValue).filter(([option]) => contains(getOptionLabel(option), inputValue))),
             }));
         }
         reactToCollapse.current = true;
     }, 
-    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
+    // Only react to collapseKey changes. Other deps should be stable (`contains`, `getOptionLabel`, `getOptionValue`).
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [collapsedKeys]);
     // Update the filtered options when the input value changes
@@ -165,19 +185,16 @@ function TreeSelectFieldBase(props) {
                 ...prevState,
                 inputValue,
                 allowCollapsing: inputValue.length === 0,
-                filteredOptions: prevState.allOptions.flatMap((o) => levelOptions(o, 0, inputValue.length > 0).filter(([option]) => contains(getOptionLabel(option), inputValue))),
+                filteredOptions: prevState.allOptions.flatMap((o) => levelOptions(o, 0, inputValue.length > 0, collapsedKeys, getOptionValue).filter(([option]) => contains(getOptionLabel(option), inputValue))),
             };
         });
-    }, 
-    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setFieldState]);
+    }, [collapsedKeys, contains, getOptionLabel, getOptionValue]);
     // Handle loading of the options in the case that they are loaded via a Promise.
     const maybeInitLoad = (0, react_1.useCallback)(async (options, fieldState, setFieldState) => {
         if (!Array.isArray(options)) {
             setFieldState((prevState) => ({ ...prevState, optionsLoading: true }));
             const loadedOptions = (await options.load()).options;
-            const filteredOptions = loadedOptions.flatMap((o) => levelOptions(o, 0, fieldState.inputValue.length > 0).filter(([option]) => contains(getOptionLabel(option), fieldState.inputValue)));
+            const filteredOptions = loadedOptions.flatMap((o) => levelOptions(o, 0, fieldState.inputValue.length > 0, collapsedKeys, getOptionValue).filter(([option]) => contains(getOptionLabel(option), fieldState.inputValue)));
             // Ensure the `unset` option is prepended to the top of the list if `unsetLabel` was provided
             setFieldState((prevState) => ({
                 ...prevState,
@@ -186,10 +203,7 @@ function TreeSelectFieldBase(props) {
                 optionsLoading: false,
             }));
         }
-    }, 
-    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
+    }, [collapsedKeys, contains, getOptionLabel, getOptionValue]);
     // Only on the first open of the listbox, we want to load the options if they haven't been loaded yet.
     const firstOpen = (0, react_1.useRef)(true);
     function onOpenChange(isOpen) {
@@ -204,13 +218,14 @@ function TreeSelectFieldBase(props) {
             setFieldState((prevState) => ({
                 ...prevState,
                 inputValue: "",
-                filteredOptions: initialOptions.flatMap((o) => levelOptions(o, 0)),
+                filteredOptions: initialOptions.flatMap((o) => levelOptions(o, 0, false, collapsedKeys, getOptionValue)),
             }));
         }
     }
     // This is _always_ going to appear new. Maybe `useMemo`?
     const comboBoxProps = {
         ...otherProps,
+        disabledKeys: Object.keys(disabledOptionsWithReasons),
         placeholder: !values || values.length === 0 ? placeholder : "",
         label: props.label,
         inputValue: fieldState.inputValue,
@@ -222,7 +237,7 @@ function TreeSelectFieldBase(props) {
         onInputChange,
         onOpenChange,
         children: ([item]) => (
-        // what we're telling it to render. look at padding here - dont have to pass down to tree option - filtered options is where we're flat mapping
+        // what we're telling it to render. look at padding here - don't have to pass down to tree option - filtered options is where we're flat mapping
         (0, jsx_runtime_1.jsx)(react_stately_1.Item, { textValue: getOptionLabel(item), children: getOptionMenuLabel(item) }, (0, Value_1.valueToKey)(getOptionValue(item)))),
     };
     const state = (0, react_stately_1.useComboBoxState)({
@@ -266,76 +281,87 @@ function TreeSelectFieldBase(props) {
                 // For added keys, we need to see if any other options should be added as well.
                 [...addedKeys].forEach((key) => {
                     var _a;
-                    const maybeOption = (0, utils_1.findOption)(fieldState.allOptions, key, getOptionValue);
-                    if (!maybeOption)
+                    const maybeOptions = (0, utils_1.findOptions)(fieldState.allOptions, key, getOptionValue);
+                    if (maybeOptions.length === 0)
                         return;
-                    const { option, parents } = maybeOption;
-                    // If the newly added option has children, then consider the children to be newly added keys as well.
-                    if (option && option.children && option.children.length > 0) {
-                        const childrenKeys = option.children.flatMap(utils_1.flattenOptions).map((o) => (0, Value_1.valueToKey)(getOptionValue(o)));
-                        [key, ...childrenKeys].forEach(addedKeys.add, addedKeys);
-                    }
-                    // If this was a child that was selected, then see if every other child is also selected, and if so, consider the parent selected.
-                    // Walk up the parents and determine their state.
-                    for (const parent of parents.reverse()) {
-                        const allChecked = (_a = parent.children) === null || _a === void 0 ? void 0 : _a.every((child) => {
-                            const childKey = (0, Value_1.valueToKey)(getOptionValue(child));
-                            return addedKeys.has(childKey) || existingKeys.has(childKey);
-                        });
-                        if (allChecked) {
-                            addedKeys.add((0, Value_1.valueToKey)(getOptionValue(parent)));
+                    for (const { option, parents } of maybeOptions) {
+                        // If the newly added option has children, then consider the children to be newly added keys as well.
+                        if (option && option.children && option.children.length > 0) {
+                            const childrenKeys = option.children
+                                .flatMap(utils_1.flattenOptions)
+                                .map((o) => (0, Value_1.valueToKey)(getOptionValue(o)))
+                                .filter((childKey) => {
+                                // remove children that are disabled
+                                return !state.disabledKeys.has(childKey);
+                            });
+                            [key, ...childrenKeys].forEach(addedKeys.add, addedKeys);
+                        }
+                        // If this was a child that was selected, then see if every other child is also selected, and if so, consider the parent selected.
+                        // Walk up the parents and determine their state.
+                        for (const parent of parents.reverse()) {
+                            const allChecked = (_a = parent.children) === null || _a === void 0 ? void 0 : _a.every((child) => {
+                                const childKey = (0, Value_1.valueToKey)(getOptionValue(child));
+                                return addedKeys.has(childKey) || existingKeys.has(childKey) || state.disabledKeys.has(childKey);
+                            });
+                            if (allChecked) {
+                                addedKeys.add((0, Value_1.valueToKey)(getOptionValue(parent)));
+                            }
                         }
                     }
                 });
                 // For removed keys, we need to also unselect any children and parents of the removed key
                 [...removedKeys].forEach((key) => {
                     // Grab the option and parents of the option that was removed
-                    const maybeOption = (0, utils_1.findOption)(fieldState.allOptions, key, getOptionValue);
-                    if (!maybeOption)
+                    const maybeOptions = (0, utils_1.findOptions)(fieldState.allOptions, key, getOptionValue);
+                    if (maybeOptions.length === 0)
                         return;
-                    const { option, parents } = maybeOption;
-                    // If the option has children, then we need to unselect those children as well
-                    if (option.children && option.children.length > 0) {
-                        const childrenKeys = option.children.flatMap(utils_1.flattenOptions).map((o) => (0, Value_1.valueToKey)(getOptionValue(o)));
-                        [key, ...childrenKeys].forEach(removedKeys.add, removedKeys);
-                    }
-                    // If the option has parents, then we need to unselect those parents as well
-                    if (parents.length > 0) {
-                        const parentKeys = parents.map((o) => (0, Value_1.valueToKey)(getOptionValue(o)));
-                        [key, ...parentKeys].forEach(removedKeys.add, removedKeys);
+                    for (const { option, parents } of maybeOptions) {
+                        // If the option has children, then we need to unselect those children as well
+                        if (option.children && option.children.length > 0) {
+                            // Ensure we do not impact children that are disabled. They shouldn't be able to toggled on/off
+                            const childrenKeys = option.children
+                                .flatMap(utils_1.flattenOptions)
+                                .map((o) => (0, Value_1.valueToKey)(getOptionValue(o)))
+                                .filter((key) => !state.disabledKeys.has(key));
+                            [key, ...childrenKeys].forEach(removedKeys.add, removedKeys);
+                        }
+                        // If the option has parents, then we need to unselect those parents as well
+                        if (parents.length > 0) {
+                            const parentKeys = parents.map((o) => (0, Value_1.valueToKey)(getOptionValue(o)));
+                            [key, ...parentKeys].forEach(removedKeys.add, removedKeys);
+                        }
                     }
                 });
                 // Create the lists to update our TreeState with
                 const selectedKeys = new Set([...existingKeys, ...addedKeys].filter((x) => !removedKeys.has(x)));
-                const selectedOptions = fieldState.allOptions
-                    .flatMap(utils_1.flattenOptions)
-                    .filter((o) => selectedKeys.has((0, Value_1.valueToKey)(getOptionValue(o))));
+                const selectedOptions = [...selectedKeys]
+                    // Find the first option as it could be duplicated, but we only want one of them.
+                    .map((key) => { var _a; return (_a = (0, utils_1.findOption)(fieldState.allOptions, key, getOptionValue)) === null || _a === void 0 ? void 0 : _a.option; })
+                    .filter((o) => o); // filter out undefined
                 // Our `onSelect` callback provides three things:
                 // 1. ALL selected values + options
                 // 2. Only the top level selected values + options
                 // 3. Only the leaf selected values + options
                 // For the top level and leaf selections, we need to do some extra work to determine which options are the top level and leaf.
-                function getTopLevelSelections(o) {
-                    // If this element is already selected, return early. Do not bother looking through children.
-                    if (selectedKeys.has((0, Value_1.valueToKey)(getOptionValue(o))))
-                        return [o];
-                    // If this element has no children, then look through the children for top level selected options.
-                    if (o.children)
-                        return [...o.children.flatMap(getTopLevelSelections)];
-                    return [];
-                }
-                const rootOptions = fieldState.allOptions.flatMap(getTopLevelSelections);
+                const allRootOptions = fieldState.allOptions.flatMap((o) => getTopLevelSelections(o, selectedKeys, getOptionValue));
+                // dedupe selected root options
+                const rootOptions = allRootOptions.filter((o, idx, self) => idx === self.findIndex((t) => getOptionValue(o) === getOptionValue(t)));
                 const rootValues = rootOptions.map(getOptionValue);
                 // Finally get the list of options that are just the "leaf" options, meaning they have no children.
                 const leafOptions = selectedOptions.filter((o) => !o.children || o.children.length === 0);
                 const leafValues = leafOptions.map(getOptionValue);
                 setFieldState((prevState) => ({
                     ...prevState,
-                    inputValue: nothingSelectedText,
-                    filteredOptions: initialOptions.flatMap((o) => levelOptions(o, 0)),
+                    // Since we reset the list of options upon selection changes, then set the `inputValue` to empty string to reflect that.
+                    inputValue: "",
+                    filteredOptions: initialOptions.flatMap((o) => levelOptions(o, 0, false, collapsedKeys, getOptionValue)),
                     selectedKeys: [...selectedKeys],
                     selectedOptions,
-                    selectedOptionsLabels: rootOptions.map(getOptionLabel),
+                    selectedOptionsLabels: chipDisplay === "root"
+                        ? rootOptions.map(getOptionLabel)
+                        : chipDisplay === "leaf"
+                            ? leafOptions.map(getOptionLabel)
+                            : selectedOptions.map(getOptionLabel),
                 }));
                 onSelect({
                     all: { values: [...selectedKeys].map((key) => (0, Value_1.keyToValue)(key)), options: selectedOptions },
@@ -357,7 +383,7 @@ function TreeSelectFieldBase(props) {
                     : selectedOptions.length === 0
                         ? nothingSelectedText
                         : "",
-                filteredOptions: initialOptions.flatMap((o) => levelOptions(o, 0)),
+                filteredOptions: initialOptions.flatMap((o) => levelOptions(o, 0, false, collapsedKeys, getOptionValue)),
                 allowCollapsing: true,
             }));
         }
@@ -389,10 +415,32 @@ function TreeSelectFieldBase(props) {
     });
     positionProps.style = {
         ...positionProps.style,
-        width: (_b = comboBoxRef === null || comboBoxRef === void 0 ? void 0 : comboBoxRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth,
+        width: (_c = comboBoxRef === null || comboBoxRef === void 0 ? void 0 : comboBoxRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth,
         // Ensures the menu never gets too small.
         minWidth: 200,
     };
     const fieldMaxWidth = (0, utils_2.getFieldWidth)(fullWidth);
     return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw(fieldMaxWidth).if(labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(ComboBoxInput_1.ComboBoxInput, { ...otherProps, fullWidth: fullWidth, labelStyle: labelStyle, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, listBoxRef: listBoxRef, state: state, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, selectedOptionsLabels: fieldState.selectedOptionsLabels, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField, nothingSelectedText: nothingSelectedText, isTree: true }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200, children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, { ...listBoxProps, positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, allowCollapsing: fieldState.allowCollapsing, isTree: true }) }))] }));
 }
+function levelOptions(o, level, filtering, collapsedKeys, getOptionValue) {
+    var _a;
+    // If a user is filtering, then do not provide level to the options as the various paddings may look quite odd.
+    const actualLevel = filtering ? 0 : level;
+    return [
+        [o, actualLevel],
+        ...(((_a = o.children) === null || _a === void 0 ? void 0 : _a.length) && !collapsedKeys.includes((0, Value_1.valueToKey)(getOptionValue(o)))
+            ? o.children.flatMap((oc) => levelOptions(oc, actualLevel + 1, filtering, collapsedKeys, getOptionValue))
+            : []),
+    ];
+}
+// Given an option and the selected keys, it will return the top most selected option in the option's tree.
+// This could be a parent of the option, or the option itself.
+function getTopLevelSelections(o, selectedKeys, getOptionValue) {
+    // If this element is already selected, return early. Do not bother looking through children.
+    if (selectedKeys.has((0, Value_1.valueToKey)(getOptionValue(o))))
+        return [o];
+    // If this element has no children, then look through the children for top level selected options.
+    if (o.children)
+        return [...o.children.flatMap((c) => getTopLevelSelections(c, selectedKeys, getOptionValue))];
+    return [];
+}

package/dist/inputs/TreeSelectField/utils.d.ts

@@ -42,8 +42,10 @@ export type TreeSelectResponse<O, V extends Value> = {
         options: O[];
     };
 };
-/** Finds an option by Key, and returns it + any parents. */
+/** Finds first option by Key, and returns it + any parents. */
 export declare function findOption<O, V extends Value>(options: NestedOption<O>[], key: Key, getOptionValue: (o: O) => V): FoundOption<O> | undefined;
+/** Finds all options by Key, and returns it + any parents. */
+export declare function findOptions<O, V extends Value>(options: NestedOption<O>[], key: Key, getOptionValue: (o: O) => V): FoundOption<O>[];
 export declare function flattenOptions<O>(o: NestedOption<O>): NestedOption<O>[];
 export declare function isLeveledOption<O>(option: LeveledOption<O> | any): option is LeveledOption<O>;
 export declare function isLeveledNode<O>(node: Node<O> | Node<LeveledOption<O>>): node is Node<LeveledOption<O>>;

package/dist/inputs/TreeSelectField/utils.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isLeveledNode = exports.isLeveledOption = exports.flattenOptions = exports.findOption = void 0;
-/** Finds an option by Key, and returns it + any parents. */
+exports.isLeveledNode = exports.isLeveledOption = exports.flattenOptions = exports.findOptions = exports.findOption = void 0;
+/** Finds first option by Key, and returns it + any parents. */
 function findOption(options, key, getOptionValue) {
-    // This is technically an array of "maybe FoundRow"
+    // This is technically an array of "maybe FoundOption"
     const todo = options.map((option) => ({ option, parents: [] }));
     while (todo.length > 0) {
         const curr = todo.pop();
@@ -18,6 +18,24 @@ function findOption(options, key, getOptionValue) {
     return undefined;
 }
 exports.findOption = findOption;
+/** Finds all options by Key, and returns it + any parents. */
+function findOptions(options, key, getOptionValue) {
+    // This is technically an array of "maybe FoundOption"
+    const todo = options.map((option) => ({ option, parents: [] }));
+    const found = [];
+    while (todo.length > 0) {
+        const curr = todo.pop();
+        if (getOptionValue(curr.option) === key) {
+            found.push(curr);
+        }
+        else if (curr.option.children) {
+            // Search our children and pass along us as the parent
+            todo.push(...curr.option.children.map((option) => ({ option, parents: [...curr.parents, curr.option] })));
+        }
+    }
+    return found;
+}
+exports.findOptions = findOptions;
 function flattenOptions(o) {
     var _a;
     return [o, ...(((_a = o.children) === null || _a === void 0 ? void 0 : _a.length) ? o.children.flatMap((oc) => flattenOptions(oc)) : [])];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.354.2",
+  "version": "2.354.4",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -78,7 +78,7 @@
     "@homebound/eslint-config": "^1.10.2",
     "@homebound/rtl-react-router-utils": "1.0.3",
     "@homebound/rtl-utils": "^2.65.0",
-    "@homebound/truss": "^1.135.0",
+    "@homebound/truss": "^1.136.0",
     "@homebound/tsconfig": "^1.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",