@homebound/beam 2.263.0 → 2.265.0

package/dist/components/Icon.d.ts

@@ -77,6 +77,10 @@ export declare const Icons: {
     arrowUp: import("@emotion/react/jsx-runtime").JSX.Element;
     arrowDown: import("@emotion/react/jsx-runtime").JSX.Element;
     arrowRight: import("@emotion/react/jsx-runtime").JSX.Element;
+    triangleLeft: import("@emotion/react/jsx-runtime").JSX.Element;
+    triangleRight: import("@emotion/react/jsx-runtime").JSX.Element;
+    triangleUp: import("@emotion/react/jsx-runtime").JSX.Element;
+    triangleDown: import("@emotion/react/jsx-runtime").JSX.Element;
     menuClose: import("@emotion/react/jsx-runtime").JSX.Element;
     menuOpen: import("@emotion/react/jsx-runtime").JSX.Element;
     arrowFromLeft: import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Icon.js

@@ -84,6 +84,10 @@ exports.Icons = {
     arrowUp: ((0, jsx_runtime_1.jsx)("path", { d: "M12.793 21.207L12.793 6.62097L18.086 11.914L19.5 10.5L11.793 2.79297L4.086 10.5L5.5 11.914L10.793 6.62097L10.793 21.207L12.793 21.207Z" })),
     arrowDown: ((0, jsx_runtime_1.jsx)("path", { d: "M10.7929 2.79303L10.7929 17.379L5.49994 12.086L4.08594 13.5L11.7929 21.207L19.4999 13.5L18.0859 12.086L12.7929 17.379L12.7929 2.79303L10.7929 2.79303Z" })),
     arrowRight: ((0, jsx_runtime_1.jsx)("path", { d: "M2.586 13L17.172 13L11.879 18.293L13.293 19.707L21 12L13.293 4.29303L11.879 5.70703L17.172 11L2.586 11L2.586 13Z" })),
+    triangleLeft: (0, jsx_runtime_1.jsx)("path", { d: "M15 18L9 12L15 6L15 18Z" }),
+    triangleRight: (0, jsx_runtime_1.jsx)("path", { d: "M9 6L15 12L9 18L9 6Z" }),
+    triangleUp: (0, jsx_runtime_1.jsx)("path", { d: "M6 15L12 9L18 15L6 15Z" }),
+    triangleDown: (0, jsx_runtime_1.jsx)("path", { d: "M18 9L12 15L6 9H18Z" }),
     menuClose: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M8 6H24V8H8V6ZM8 11H24V13H8V11ZM8 16H24V18H8V16Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M5 8.94L1.94667 12L5 15.06L4.06 16L0.0599999 12L4.06 8L5 8.94Z" })] })),
     menuOpen: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M8 6H24V8H8V6ZM8 11H24V13H8V11ZM8 16H24V18H8V16Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M0.0600583 15.06L3.11339 12L0.0600586 8.94L1.00006 8L5.00006 12L1.00006 16L0.0600583 15.06Z" })] })),
     arrowFromLeft: ((0, jsx_runtime_1.jsx)("path", { d: "M4 6H6V18H4V6ZM8 13H16.586L12.293 17.293L13.707 18.707L20.414 12L13.707 5.293L12.293 6.707L16.586 11H8V13Z" })),

package/dist/inputs/CheckboxBase.d.ts

@@ -21,4 +21,11 @@ export interface CheckboxBaseProps extends BeamFocusableProps {
     helperText?: string | ReactNode;
 }
 export declare function CheckboxBase(props: CheckboxBaseProps): import("@emotion/react/jsx-runtime").JSX.Element;
+interface StyledCheckboxProps {
+    isDisabled?: boolean;
+    isIndeterminate?: boolean;
+    isSelected?: boolean;
+    isFocusVisible?: boolean;
+}
+export declare function StyledCheckbox(props: StyledCheckboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/inputs/CheckboxBase.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxBase = void 0;
+exports.StyledCheckbox = exports.CheckboxBase = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
@@ -15,7 +15,6 @@ function CheckboxBase(props) {
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)(ariaProps);
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
     const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
-    const markIcon = isIndeterminate ? dashSmall : isSelected ? checkmarkSmall : "";
     return ((0, jsx_runtime_1.jsxs)("label", { css: Css_1.Css.df.cursorPointer.relative
             // Prevents accidental checkbox clicks due to label width being longer
             // than the content.
@@ -23,16 +22,7 @@ function CheckboxBase(props) {
             .maxw((0, Css_1.px)(320))
             .if(description !== undefined)
             .maxw((0, Css_1.px)(344))
-            .if(isDisabled).cursorNotAllowed.$, "aria-label": label, children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...(0, react_aria_1.mergeProps)(inputProps, focusProps), ...tid, "data-indeterminate": isIndeterminate }) }), (0, jsx_runtime_1.jsx)("span", { ...hoverProps, css: {
-                    ...baseStyles,
-                    ...(((isSelected && !isDisabled) || isIndeterminate) && filledBoxStyles),
-                    ...(((isSelected && !isDisabled) || isIndeterminate) && isHovered && filledBoxHoverStyles),
-                    ...(isDisabled && disabledBoxStyles),
-                    ...(isDisabled && isSelected && disabledSelectedBoxStyles),
-                    ...(isFocusVisible && focusRingStyles),
-                    ...(isHovered && hoverBorderStyles),
-                    ...markStyles,
-                }, "aria-hidden": "true", children: markIcon }), !checkboxOnly && (
+            .if(isDisabled).cursorNotAllowed.$, "aria-label": label, children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...(0, react_aria_1.mergeProps)(inputProps, focusProps), ...tid, "data-indeterminate": isIndeterminate }) }), (0, jsx_runtime_1.jsx)(StyledCheckbox, { ...props, isFocusVisible: isFocusVisible }), !checkboxOnly && (
             // Use a mtPx(-2) to better align the label with the checkbox.
             // Not using align-items: center as the checkbox would align with all content below, where we really want it to stay only aligned with the label
             (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.ml1.mtPx(-2).$, children: [label && (0, jsx_runtime_1.jsx)("div", { css: { ...labelStyles, ...(isDisabled && disabledColor) }, children: label }), description && (0, jsx_runtime_1.jsx)("div", { css: { ...descStyles, ...(isDisabled && disabledColor) }, children: description }), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { errorMsg: errorMsg, ...tid.errorMsg }), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText, ...tid.helperText })] }))] }));
@@ -49,5 +39,22 @@ const hoverBorderStyles = Css_1.Css.bLightBlue900.$;
 const markStyles = { svg: Css_1.Css.absolute.topPx(-1).leftPx(-1).$ };
 const labelStyles = Css_1.Css.smMd.$;
 const descStyles = Css_1.Css.sm.gray700.$;
+function StyledCheckbox(props) {
+    const { isDisabled = false, isIndeterminate = false, isSelected, isFocusVisible } = props;
+    const { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
+    const markIcon = isIndeterminate ? dashSmall : isSelected ? checkmarkSmall : "";
+    const tid = (0, utils_1.useTestIds)(props);
+    return ((0, jsx_runtime_1.jsx)("span", { ...hoverProps, css: {
+            ...baseStyles,
+            ...(((isSelected && !isDisabled) || isIndeterminate) && filledBoxStyles),
+            ...(((isSelected && !isDisabled) || isIndeterminate) && isHovered && filledBoxHoverStyles),
+            ...(isDisabled && disabledBoxStyles),
+            ...(isDisabled && isSelected && disabledSelectedBoxStyles),
+            ...(isFocusVisible && focusRingStyles),
+            ...(isHovered && hoverBorderStyles),
+            ...markStyles,
+        }, "aria-hidden": "true", "data-checked": isSelected ? true : isIndeterminate ? "mixed" : false, ...tid.checkbox, children: markIcon }));
+}
+exports.StyledCheckbox = StyledCheckbox;
 const checkmarkSmall = ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", children: (0, jsx_runtime_1.jsx)("path", { d: "M6.66669 10.3907L4.47135 8.19533L3.52869 9.138L6.66669 12.276L13.138 5.80467L12.1954 4.862L6.66669 10.3907Z", fill: Css_1.Palette.White }) }));
 const dashSmall = ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", children: (0, jsx_runtime_1.jsx)("rect", { x: "4", y: "7.5", width: "8", height: "1.35", fill: Css_1.Palette.White }) }));

package/dist/inputs/SelectField.mock.js

@@ -36,7 +36,9 @@ function SelectField(props) {
                 }, 
                 // Read Only does not apply to `select` fields, instead we'll add in disabled for tests to verify.
                 disabled: !!(disabled || readOnly), "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly, children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }), options.map((option, i) => {
-                        return ((0, jsx_runtime_1.jsx)("option", { value: `${getOptionValue(option)}`, disabled: disabledOptions.includes(getOptionValue(option)), children: getOptionLabel(option) }, i));
+                        return ((0, jsx_runtime_1.jsx)("option", { value: `${getOptionValue(option)}`, disabled: disabledOptions.some((dOption) => typeof dOption === "object"
+                                ? dOption.value === getOptionValue(option)
+                                : dOption === getOptionValue(option)), children: getOptionLabel(option) }, i));
                     })] }), helperText && (0, jsx_runtime_1.jsx)("div", { ...tid.helperText, children: helperText })] }));
 }
 exports.SelectField = SelectField;

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

@@ -0,0 +1,12 @@
+import { Node } from "@react-types/shared";
+import { ListState } from "react-stately";
+import { LeveledOption } from "./utils";
+interface TreeOptionProps<O> {
+    item: Node<LeveledOption<O>>;
+    state: ListState<O>;
+    contrast?: boolean;
+    allowCollapsing?: boolean;
+}
+/** Represents a single option within a ListBox - used by SelectField, MultiSelectField, and TreeSelectField */
+export declare function TreeOption<O>(props: TreeOptionProps<O>): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/inputs/TreeSelectField/TreeOption.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeOption = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const react_aria_1 = require("react-aria");
+const components_1 = require("../../components");
+const Css_1 = require("../../Css");
+const CheckboxBase_1 = require("../CheckboxBase");
+const TreeSelectField_1 = require("./TreeSelectField");
+const Value_1 = require("../Value");
+const utils_1 = require("../../utils");
+/** Represents a single option within a ListBox - used by SelectField, MultiSelectField, and TreeSelectField */
+function TreeOption(props) {
+    var _a, _b;
+    const { item, state, contrast = false, allowCollapsing = true } = props;
+    const leveledOption = item.value;
+    if (!leveledOption)
+        return null;
+    const [option, level] = leveledOption;
+    const ref = (0, react_1.useRef)(null);
+    const { hoverProps, isHovered } = (0, react_aria_1.useHover)({});
+    const tid = (0, utils_1.useTestIds)(props, "treeOption");
+    const { collapsedKeys, setCollapsedKeys, getOptionValue } = (0, TreeSelectField_1.useTreeSelectFieldProvider)();
+    const { optionProps, isDisabled, isFocused, isSelected } = (0, react_aria_1.useOption)({ key: item.key, shouldSelectOnPressUp: true, shouldFocusOnHover: false }, state, ref);
+    // If this item is not selected, then determine if some of its children are selected to show the indeterminate state.
+    // Note: If `isSelected` will be true if all of the children were selected. That auto-parent-selection happens in the `onSelect` callback in TreeSelectField.
+    const isIndeterminate = !isSelected && ((_a = option.children) === null || _a === void 0 ? void 0 : _a.some((o) => hasSelectedChildren(o, state, getOptionValue)));
+    const listItemStyles = {
+        item: Css_1.Css.gray900.if(contrast).white.$,
+        hover: Css_1.Css.bgGray100.if(contrast).bgGray600.$,
+        disabled: Css_1.Css.cursorNotAllowed.gray400.if(contrast).gray500.$,
+        focus: Css_1.Css.add("boxShadow", `inset 0 0 0 1px ${!contrast ? Css_1.Palette.LightBlue700 : Css_1.Palette.LightBlue500}`).$,
+    };
+    return ((0, jsx_runtime_1.jsxs)("li", { ...hoverProps, css: {
+            ...Css_1.Css.df.aic.jcsb.gap1.pl2.mh("42px").outline0.cursorPointer.sm.plPx(16 + level * 8).$,
+            ...listItemStyles.item,
+            ...(isHovered && !isDisabled ? listItemStyles.hover : {}),
+            ...(isFocused ? listItemStyles.focus : {}),
+            ...(isDisabled ? listItemStyles.disabled : {}),
+        }, children: [allowCollapsing && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.wPx(18).fs0.df.aic.$, children: option.children && ((_b = option.children) === null || _b === void 0 ? void 0 : _b.length) > 0 && ((0, jsx_runtime_1.jsx)("button", { onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setCollapsedKeys((prevKeys) => collapsedKeys.includes(item.key) ? prevKeys.filter((k) => k !== item.key) : [...prevKeys, item.key]);
+                        return false;
+                    }, css: Css_1.Css.br4.hPx(16).wPx(16).bgTransparent.onHover.bgGray300.$, ...tid[`collapseToggle_${item.key}`], children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: collapsedKeys.includes(item.key) ? "triangleRight" : "triangleDown", inc: 2 }) })) })), (0, jsx_runtime_1.jsxs)("span", { css: Css_1.Css.df.aic.gap1.h100.fg1.py1.pr2.$, ref: ref, ...optionProps, children: [(0, jsx_runtime_1.jsx)(CheckboxBase_1.StyledCheckbox, { isDisabled: isDisabled, isSelected: isSelected, isIndeterminate: isIndeterminate, ...tid[item.key.toString()] }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.pl1.$, children: item.rendered })] })] }));
+}
+exports.TreeOption = TreeOption;
+function hasSelectedChildren(childOption, state, getOptionValue) {
+    if (childOption.children && childOption.children.length > 0) {
+        return childOption.children.some((child) => hasSelectedChildren(child, state, getOptionValue));
+    }
+    return state.selectionManager.isSelected((0, Value_1.valueToKey)(getOptionValue(childOption)));
+}

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

@@ -0,0 +1,49 @@
+import React, { Dispatch, Key, ReactNode, SetStateAction } from "react";
+import { PresentationFieldProps } from "../../components/PresentationContext";
+import { Value } from "../index";
+import { NestedOptionsOrLoad, TreeSelectResponse } from "./utils";
+import { BeamFocusableProps } from "../../interfaces";
+import { HasIdAndName, Optional } from "../../types";
+export interface TreeSelectFieldProps<O, V extends Value> extends BeamFocusableProps, PresentationFieldProps {
+    /** Renders `opt` in the dropdown menu, defaults to the `getOptionLabel` prop. `isUnsetOpt` is only defined for single SelectField */
+    getOptionMenuLabel?: (opt: O, isUnsetOpt?: boolean) => string | ReactNode;
+    getOptionValue: (opt: O) => V;
+    getOptionLabel: (opt: O) => string;
+    /** The current value; it can be `undefined`, even if `V` cannot be. */
+    values: V[] | undefined;
+    onSelect: (options: TreeSelectResponse<O, V>) => void;
+    options: NestedOptionsOrLoad<O>;
+    /** Whether the field is disabled. If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip. */
+    disabled?: boolean | ReactNode;
+    required?: boolean;
+    errorMsg?: string;
+    helperText?: string | ReactNode;
+    /** Allow placing an icon/decoration within the input field. */
+    fieldDecoration?: (opt: O) => ReactNode;
+    /** Sets the form field label. */
+    label: string;
+    readOnly?: boolean | ReactNode;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    sizeToContent?: boolean;
+    /** The text to show when nothing is selected, i.e. could be "All" for filters. */
+    nothingSelectedText?: string;
+    /** When set the SelectField is expected to be put on a darker background */
+    contrast?: boolean;
+    /** Placeholder content */
+    placeholder?: string;
+    hideErrorMessage?: boolean;
+    /** Whether to have all groups collapsed on initial load. Can also be configured individually, which overrides this behavior.
+     * @default false */
+    defaultCollapsed?: boolean;
+}
+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;
+export declare function useTreeSelectFieldProvider<O, V extends Value>(): CollapsedChildrenState<any, any>;
+interface CollapsedChildrenState<O, V extends Value> {
+    collapsedKeys: Key[];
+    setCollapsedKeys: Dispatch<SetStateAction<Key[]>>;
+    getOptionValue: (opt: O) => V;
+}
+export declare const CollapsedContext: React.Context<CollapsedChildrenState<any, any>>;
+export {};

package/dist/inputs/TreeSelectField/TreeSelectField.js

@@ -0,0 +1,342 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsedContext = exports.useTreeSelectFieldProvider = exports.TreeSelectField = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_aria_1 = require("react-aria");
+const react_stately_1 = require("react-stately");
+const components_1 = require("../../components");
+const internal_1 = require("../../components/internal");
+const Css_1 = require("../../Css");
+const ComboBoxInput_1 = require("../internal/ComboBoxInput");
+const ListBox_1 = require("../internal/ListBox");
+const utils_1 = require("./utils");
+const Value_1 = require("../Value");
+function TreeSelectField(props) {
+    const { getOptionValue = (opt) => opt.id, // if unset, assume O implements HasId
+    getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
+    options, onSelect, values, defaultCollapsed = false, ...otherProps } = props;
+    const [collapsedKeys, setCollapsedKeys] = (0, react_1.useState)(Array.isArray(options) && defaultCollapsed ? options.map((o) => getOptionValue(o)) : []);
+    const contextValue = (0, react_1.useMemo)(() => ({ collapsedKeys, setCollapsedKeys, getOptionValue }), [collapsedKeys, setCollapsedKeys]);
+    return ((0, jsx_runtime_1.jsx)(exports.CollapsedContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(TreeSelectFieldBase, { ...otherProps, options: options, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, values: values, onSelect: ({ all, leaf, root }) => {
+                onSelect({ all, leaf, root });
+            } }) }));
+}
+exports.TreeSelectField = TreeSelectField;
+function useTreeSelectFieldProvider() {
+    return (0, react_1.useContext)(exports.CollapsedContext);
+}
+exports.useTreeSelectFieldProvider = useTreeSelectFieldProvider;
+// create the context to hold the collapsed state, default should be false
+exports.CollapsedContext = react_1.default.createContext({
+    collapsedKeys: [],
+    setCollapsedKeys: () => { },
+    getOptionValue: () => ({}),
+});
+function TreeSelectFieldBase(props) {
+    var _a;
+    const { values, options, getOptionValue, getOptionLabel, getOptionMenuLabel = getOptionLabel, disabled, readOnly, labelStyle, borderless, contrast = false, nothingSelectedText = "", onSelect, defaultCollapsed = false, placeholder, ...otherProps } = props;
+    const isDisabled = !!disabled;
+    const isReadOnly = !!readOnly;
+    const initialOptions = Array.isArray(options) ? options : options.initial;
+    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.
+        // 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)
+                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
+            const areAllSelected = maybeParent.children.every(areAllChildrenSelected);
+            if (areAllSelected) {
+                selectedKeys.push((0, Value_1.valueToKey)(getOptionValue(maybeParent)));
+                selectedOptions.push(maybeParent);
+            }
+            return areAllSelected;
+        }
+        initialOptions.forEach(areAllChildrenSelected);
+        return {
+            selectedKeys,
+            inputValue: selectedOptions.length === 1 ? getOptionLabel(selectedOptions[0]) : "",
+            filteredOptions,
+            selectedOptions,
+            allOptions: initialOptions,
+            optionsLoading: false,
+            allowCollapsing: true,
+        };
+    });
+    // React to collapsed keys and update the filtered options
+    const reactToCollapse = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        // Do not run this effect on first render. Otherwise we'd be triggering a re-render on first render.
+        if (reactToCollapse.current) {
+            setFieldState(({ allOptions, inputValue, ...others }) => ({
+                allOptions,
+                inputValue,
+                ...others,
+                filteredOptions: allOptions.flatMap((o) => levelOptions(o, 0, inputValue.length > 0).filter(([option]) => contains(getOptionLabel(option), inputValue))),
+            }));
+        }
+        reactToCollapse.current = true;
+    }, [collapsedKeys]);
+    // Update the filtered options when the input value changes
+    const onInputChange = (0, react_1.useCallback)((inputValue) => {
+        setFieldState((prevState) => {
+            return {
+                ...prevState,
+                inputValue,
+                allowCollapsing: inputValue.length === 0,
+                filteredOptions: prevState.allOptions.flatMap((o) => levelOptions(o, 0, inputValue.length > 0).filter(([option]) => contains(getOptionLabel(option), inputValue))),
+            };
+        });
+    }, [setFieldState]);
+    // 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)));
+            // Ensure the `unset` option is prepended to the top of the list if `unsetLabel` was provided
+            setFieldState((prevState) => ({
+                ...prevState,
+                filteredOptions,
+                allOptions: loadedOptions,
+                optionsLoading: false,
+            }));
+        }
+    }, []);
+    // 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) {
+        if (firstOpen.current && isOpen) {
+            maybeInitLoad(options, fieldState, setFieldState);
+            firstOpen.current = false;
+        }
+    }
+    // This is _always_ going to appear new. Maybe `useMemo`?
+    const comboBoxProps = {
+        ...otherProps,
+        placeholder: !values || values.length === 0 ? placeholder : "",
+        label: props.label,
+        inputValue: fieldState.inputValue,
+        // where we might want to do flatmap and return diff kind of array (children ? add level prop) inside children callback - can put markup wrapper div adds padding
+        // so we're not doing it multiple places
+        items: fieldState.filteredOptions,
+        isDisabled,
+        isReadOnly,
+        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
+        (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)({
+        ...comboBoxProps,
+        allowsEmptyCollection: true,
+    });
+    // @ts-ignore - `selectionManager.state` exists, but not according to the types. We are tricking the ComboBox state to support multiple selections.
+    state.selectionManager.state = (0, react_stately_1.useMultipleSelectionState)({
+        selectionMode: "multiple",
+        selectedKeys: fieldState.selectedKeys,
+        onSelectionChange: (newKeys) => {
+            if (newKeys === "all") {
+                // We do not support an "All" option
+                return;
+            }
+            // First figure out which keys changed so we can correctly determine which affiliated options may need to be updated as well.
+            const existingKeys = state.selectionManager.selectedKeys;
+            const addedKeys = new Set([...newKeys].filter((x) => !existingKeys.has(x)));
+            const removedKeys = new Set([...existingKeys].filter((x) => !newKeys.has(x)));
+            // Make sure there are changes before we do anything.
+            if (addedKeys.size > 0 || removedKeys.size > 0) {
+                // Quickly return out of this if all selections are removed
+                if (newKeys.size === 0) {
+                    setFieldState((prevState) => ({ ...prevState, inputValue: "", selectedKeys: [], selectedOptions: [] }));
+                    onSelect({
+                        all: { values: [], options: [] },
+                        leaf: { values: [], options: [] },
+                        root: { values: [], options: [] },
+                    });
+                    return;
+                }
+                // `onSelectionChange` is only ever going to be adding or removing 1 key at a time.
+                // The below logic for adding/removing using a forEach loop is just to make TS happy.
+                // This may look like a lot of logic, but in the execution it will only ever be adding/removing 1 key at a time, so it really isn't as bad as it looks.
+                // 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)
+                        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 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)
+                        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);
+                    }
+                });
+                // 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))));
+                // 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 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,
+                    selectedKeys: [...selectedKeys],
+                    selectedOptions,
+                }));
+                onSelect({
+                    all: { values: [...selectedKeys].map((key) => (0, Value_1.keyToValue)(key)), options: selectedOptions },
+                    leaf: { values: leafValues, options: leafOptions },
+                    root: { values: rootValues, options: rootOptions },
+                });
+            }
+        },
+    });
+    // Resets the TreeFieldState when the 'blur' event is triggered on the input.
+    function resetField() {
+        const { inputValue, selectedOptions } = fieldState;
+        if (inputValue !== "" || (selectedOptions.length === 1 && inputValue !== getOptionLabel(selectedOptions[0]))) {
+            setFieldState((prevState) => ({
+                ...prevState,
+                inputValue: selectedOptions.length === 1 ? getOptionLabel(selectedOptions[0]) : "",
+                filteredOptions: initialOptions.flatMap((o) => levelOptions(o, 0)),
+                allowCollapsing: true,
+            }));
+        }
+    }
+    const comboBoxRef = (0, react_1.useRef)(null);
+    const triggerRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const inputWrapRef = (0, react_1.useRef)(null);
+    const listBoxRef = (0, react_1.useRef)(null);
+    const popoverRef = (0, react_1.useRef)(null);
+    const { buttonProps: triggerProps, inputProps, listBoxProps, labelProps, } = (0, react_aria_1.useComboBox)({
+        ...comboBoxProps,
+        inputRef,
+        buttonRef: triggerRef,
+        listBoxRef,
+        popoverRef,
+    }, state);
+    const { buttonProps } = (0, react_aria_1.useButton)({ ...triggerProps, isDisabled: isDisabled || isReadOnly }, triggerRef);
+    // useOverlayPosition moves the overlay to the top of the DOM to avoid any z-index issues. Uses the `targetRef` to DOM placement
+    const { overlayProps: positionProps } = (0, react_aria_1.useOverlayPosition)({
+        targetRef: inputWrapRef,
+        overlayRef: popoverRef,
+        scrollRef: listBoxRef,
+        shouldFlip: true,
+        isOpen: state.isOpen,
+        onClose: state.close,
+        placement: "bottom left",
+        offset: borderless ? 8 : 4,
+    });
+    positionProps.style = {
+        ...positionProps.style,
+        width: (_a = comboBoxRef === null || comboBoxRef === void 0 ? void 0 : comboBoxRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth,
+        // Ensures the menu never gets too small.
+        minWidth: 200,
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).if(labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(ComboBoxInput_1.ComboBoxInput, { ...otherProps, labelStyle: labelStyle, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, listBoxRef: listBoxRef, state: state, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField, nothingSelectedText: nothingSelectedText, typeToFilter: true, 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 }) }))] }));
+}

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

@@ -0,0 +1,2 @@
+export * from "./TreeSelectField";
+export type { NestedOption, NestedOptionsOrLoad } from "./utils";

package/dist/inputs/TreeSelectField/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TreeSelectField"), exports);

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

@@ -0,0 +1,46 @@
+import { Node } from "@react-types/shared";
+import { Key } from "react";
+import { Value } from "../Value";
+type FoundOption<O> = {
+    option: NestedOption<O>;
+    parents: NestedOption<O>[];
+};
+export type NestedOption<O> = O & {
+    children?: NestedOption<O>[];
+};
+export type NestedOptionsOrLoad<O> = NestedOption<O>[] | {
+    initial: NestedOption<O>[];
+    load: () => Promise<{
+        options: NestedOption<O>[];
+    }>;
+};
+export type LeveledOption<O> = [NestedOption<O>, number];
+export type TreeFieldState<O> = {
+    inputValue: string;
+    filteredOptions: LeveledOption<O>[];
+    selectedKeys: Key[];
+    selectedOptions: NestedOption<O>[];
+    allOptions: NestedOption<O>[];
+    optionsLoading: boolean;
+    allowCollapsing: boolean;
+};
+export type TreeSelectResponse<O, V extends Value> = {
+    all: {
+        values: V[];
+        options: O[];
+    };
+    leaf: {
+        values: V[];
+        options: O[];
+    };
+    root: {
+        values: V[];
+        options: O[];
+    };
+};
+/** Finds an 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;
+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>>;
+export {};

package/dist/inputs/TreeSelectField/utils.js

@@ -0,0 +1,33 @@
+"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. */
+function findOption(options, key, getOptionValue) {
+    // This is technically an array of "maybe FoundRow"
+    const todo = options.map((option) => ({ option, parents: [] }));
+    while (todo.length > 0) {
+        const curr = todo.pop();
+        if (getOptionValue(curr.option) === key) {
+            return 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 undefined;
+}
+exports.findOption = findOption;
+function flattenOptions(o) {
+    var _a;
+    return [o, ...(((_a = o.children) === null || _a === void 0 ? void 0 : _a.length) ? o.children.flatMap((oc) => flattenOptions(oc)) : [])];
+}
+exports.flattenOptions = flattenOptions;
+function isLeveledOption(option) {
+    return Array.isArray(option) && option.length === 2 && typeof option[1] === "number";
+}
+exports.isLeveledOption = isLeveledOption;
+function isLeveledNode(node) {
+    return isLeveledOption(node.value);
+}
+exports.isLeveledNode = isLeveledNode;

package/dist/inputs/index.d.ts

@@ -17,4 +17,5 @@ export * from "./TextField";
 export type { TextFieldApi } from "./TextField";
 export * from "./ToggleButton";
 export * from "./ToggleChipGroup";
+export * from "./TreeSelectField";
 export type { Value } from "./Value";

package/dist/inputs/index.js

@@ -32,3 +32,4 @@ __exportStar(require("./TextAreaField"), exports);
 __exportStar(require("./TextField"), exports);
 __exportStar(require("./ToggleButton"), exports);
 __exportStar(require("./ToggleChipGroup"), exports);
+__exportStar(require("./TreeSelectField"), exports);

package/dist/inputs/internal/ComboBoxInput.d.ts

@@ -2,12 +2,13 @@ import { InputHTMLAttributes, LabelHTMLAttributes, MutableRefObject, ReactNode }
 import { ComboBoxState } from "react-stately";
 import { PresentationFieldProps } from "../../components/PresentationContext";
 import { Value } from "../Value";
-interface SelectFieldInputProps<O, V extends Value> extends PresentationFieldProps {
+interface ComboBoxInputProps<O, V extends Value> extends PresentationFieldProps {
     buttonProps: any;
     buttonRef: MutableRefObject<HTMLButtonElement | null>;
     inputProps: InputHTMLAttributes<HTMLInputElement>;
     inputRef: MutableRefObject<HTMLInputElement | null>;
     inputWrapRef: MutableRefObject<HTMLDivElement | null>;
+    listBoxRef?: MutableRefObject<HTMLDivElement | null>;
     state: ComboBoxState<O>;
     fieldDecoration?: (opt: O) => ReactNode;
     errorMsg?: string;
@@ -27,6 +28,7 @@ interface SelectFieldInputProps<O, V extends Value> extends PresentationFieldPro
     resetField: VoidFunction;
     hideErrorMessage?: boolean;
     typeToFilter: boolean;
+    isTree?: boolean;
 }
-export declare function ComboBoxInput<O, V extends Value>(props: SelectFieldInputProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ComboBoxInput<O, V extends Value>(props: ComboBoxInputProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/inputs/internal/ComboBoxInput.js

@@ -7,25 +7,50 @@ const react_aria_1 = require("react-aria");
 const components_1 = require("../../components");
 const Css_1 = require("../../Css");
 const TextFieldBase_1 = require("../TextFieldBase");
-const utils_1 = require("../../utils");
+const TreeSelectField_1 = require("../TreeSelectField/TreeSelectField");
+const utils_1 = require("../TreeSelectField/utils");
+const utils_2 = require("../../utils");
 function ComboBoxInput(props) {
-    const { inputProps, buttonProps, buttonRef, errorMsg, state, fieldDecoration, onBlur, onFocus, selectedOptions, getOptionValue, getOptionLabel, sizeToContent = false, contrast = false, nothingSelectedText, resetField, ...otherProps } = props;
+    const { inputProps, buttonProps, buttonRef, errorMsg, state, fieldDecoration, onBlur, onFocus, selectedOptions, getOptionValue, getOptionLabel, sizeToContent = false, contrast = false, nothingSelectedText, resetField, isTree, listBoxRef, ...otherProps } = props;
+    const { collapsedKeys, setCollapsedKeys } = (0, TreeSelectField_1.useTreeSelectFieldProvider)();
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const isMultiSelect = state.selectionManager.selectionMode === "multiple";
     const showNumSelection = isMultiSelect && state.selectionManager.selectedKeys.size > 1;
     // For MultiSelect only show the `fieldDecoration` when input is not in focus.
     const showFieldDecoration = (!isMultiSelect || (isMultiSelect && !isFocused)) && fieldDecoration && selectedOptions.length === 1;
-    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...otherProps, errorMsg: errorMsg, contrast: contrast, xss: otherProps.labelStyle !== "inline" && !inputProps.readOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinySb.df.aic.jcc.$, children: state.selectionManager.selectedKeys.size }))) ||
+    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...otherProps, errorMsg: errorMsg, contrast: contrast, xss: otherProps.labelStyle !== "inline" && !inputProps.readOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinySb.df.aic.jcc.$, "data-testid": "selectedOptionsCount", children: state.selectionManager.selectedKeys.size }))) ||
             (showFieldDecoration && fieldDecoration(selectedOptions[0])), endAdornment: !inputProps.readOnly && ((0, jsx_runtime_1.jsx)("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, css: {
                 ...Css_1.Css.br4.outline0.gray700.if(contrast).gray400.$,
                 ...(inputProps.disabled ? Css_1.Css.cursorNotAllowed.gray400.if(contrast).gray600.$ : {}),
-            }, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }) })), inputProps: {
+            }, "data-testid": "toggleListBox", children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }) })), inputProps: {
             ...(0, react_aria_1.mergeProps)(inputProps, { "aria-invalid": Boolean(errorMsg), onInput: () => state.open() }),
             // Not merging the following as we want them to overwrite existing events
             ...{
                 onKeyDown: (e) => {
                     // We need to do some custom logic when using MultiSelect, as react-aria/stately Combobox doesn't support multiselect out of the box.
                     if (isMultiSelect) {
+                        if (isTree) {
+                            const item = state.collection.getItem(state.selectionManager.focusedKey);
+                            if (item && (e.key === "ArrowRight" || e.key === "ArrowLeft")) {
+                                if (!(0, utils_1.isLeveledNode)(item))
+                                    return;
+                                const leveledOption = item.value;
+                                if (!leveledOption)
+                                    return;
+                                const [option] = leveledOption;
+                                e.stopPropagation();
+                                e.preventDefault();
+                                if (option && option.children && option.children.length > 0) {
+                                    if (collapsedKeys.includes(item.key) && e.key === "ArrowRight") {
+                                        setCollapsedKeys((prevKeys) => prevKeys.filter((k) => k !== item.key));
+                                    }
+                                    else if (!collapsedKeys.includes(item.key) && e.key === "ArrowLeft") {
+                                        setCollapsedKeys((prevKeys) => [...prevKeys, item.key]);
+                                    }
+                                }
+                                return;
+                            }
+                        }
                         // Enter should toggle the focused item.
                         if (e.key === "Enter") {
                             // Prevent form submissions if menu is open.
@@ -54,9 +79,11 @@ function ComboBoxInput(props) {
                     inputProps.onKeyDown && inputProps.onKeyDown(e);
                 },
                 onBlur: (e) => {
-                    // Do not call onBlur if readOnly or interacting within the input wrapper (such as the menu trigger button).
+                    var _a;
+                    // Do not call onBlur if readOnly or interacting within the input wrapper (such as the menu trigger button), or anything within the listbox.
                     if (inputProps.readOnly ||
-                        (props.inputWrapRef.current && props.inputWrapRef.current.contains(e.relatedTarget))) {
+                        (props.inputWrapRef.current && props.inputWrapRef.current.contains(e.relatedTarget)) ||
+                        (((_a = props.listBoxRef) === null || _a === void 0 ? void 0 : _a.current) && props.listBoxRef.current.contains(e.relatedTarget))) {
                         return;
                     }
                     // We purposefully override onBlur here instead of using mergeProps, b/c inputProps.onBlur
@@ -64,7 +91,7 @@ function ComboBoxInput(props) {
                     // detects a) there is no props.selectedKey (b/c we don't pass it), and b) there is an
                     // `inputValue`, so it thinks it needs to call `resetInputValue()`.
                     setIsFocused(false);
-                    (0, utils_1.maybeCall)(onBlur);
+                    (0, utils_2.maybeCall)(onBlur);
                     state.close();
                     // Always call `resetField` onBlur, this ensures the field's `input.value` resets
                     // to what it should be in case it doesn't currently match.
@@ -74,7 +101,7 @@ function ComboBoxInput(props) {
                     if (inputProps.readOnly)
                         return;
                     setIsFocused(true);
-                    (0, utils_1.maybeCall)(onFocus);
+                    (0, utils_2.maybeCall)(onFocus);
                 },
                 onClick: () => {
                     var _a;
@@ -89,7 +116,7 @@ function ComboBoxInput(props) {
                 // 3. Use `nothingSelectedText`
                 // 4. Default to "1"
                 // And do not allow it to grow past a size of 20.
-                // TODO: Combine logic to determine the input's value. Similar logic is used in SelectFieldBase, though it is intertwined with other state logic. Such as when to open/close menu, or filter the options within that menu, etc...
+                // TODO: Combine logic to determine the input's value. Similar logic is used in ComboBoxBase, though it is intertwined with other state logic. Such as when to open/close menu, or filter the options within that menu, etc...
                 sizeToContent
                     ? Math.min(String(inputProps.value ||
                         (isMultiSelect && selectedOptions.length === 1 && getOptionLabel(selectedOptions[0])) ||

package/dist/inputs/internal/ListBox.d.ts

@@ -11,6 +11,8 @@ interface ListBoxProps<O, V extends Key> {
     positionProps: React.HTMLAttributes<Element>;
     loading?: boolean | (() => JSX.Element);
     disabledOptionsWithReasons?: Record<string, string | undefined>;
+    isTree?: boolean;
+    allowCollapsing?: boolean;
 }
 /** A ListBox is an internal component used by SelectField and MultiSelectField to display the list of options */
 export declare function ListBox<O, V extends Key>(props: ListBoxProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/internal/ListBox.js

@@ -12,7 +12,7 @@ const VirtualizedOptions_1 = require("./VirtualizedOptions");
 /** A ListBox is an internal component used by SelectField and MultiSelectField to display the list of options */
 function ListBox(props) {
     var _a;
-    const { state, listBoxRef, selectedOptions = [], getOptionLabel, getOptionValue, contrast = false, positionProps, horizontalLayout = false, loading, disabledOptionsWithReasons = {}, } = props;
+    const { state, listBoxRef, selectedOptions = [], getOptionLabel, getOptionValue, contrast = false, positionProps, horizontalLayout = false, loading, disabledOptionsWithReasons = {}, isTree, allowCollapsing, } = props;
     const { listBoxProps } = (0, react_aria_1.useListBox)({ disallowEmptySelection: true, ...props }, state, listBoxRef);
     const positionMaxHeight = (_a = positionProps.style) === null || _a === void 0 ? void 0 : _a.maxHeight;
     // The popoverMaxHeight will be based on the value defined by the positionProps returned from `useOverlayPosition` (which will always be a defined as a `number` based on React-Aria's `calculatePosition`).
@@ -57,11 +57,11 @@ function ListBox(props) {
             // Add `w50` in that case to ensure the ListBox is only the width of the field. If the width definitions ever change, we need to update here as well.
             ...Css_1.Css.bgWhite.br4.w100.bshBasic.hPx(popoverHeight).df.fdc.if(contrast).bgGray700.if(horizontalLayout).w50.$,
             "&:hover": Css_1.Css.bshHover.$,
-        }, ref: listBoxRef, ...listBoxProps, children: [isMultiSelect && state.selectionManager.selectedKeys.size > 0 && ((0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.pt2.pl2.pb1.pr1.df.bb.bGray200.add("flexWrap", "wrap").maxh("50%").overflowAuto.$, ref: selectedList, children: selectedOptions.map((o) => ((0, jsx_runtime_1.jsx)(ListBoxToggleChip_1.ListBoxToggleChip, { state: state, option: o, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o)))) })), (0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.fg1.$, children: hasSections ? ([...state.collection].map((section) => ((0, jsx_runtime_1.jsx)(ListBoxSection_1.ListBoxSection, { section: section, state: state, contrast: contrast, onListHeightChange: onListHeightChange, popoverHeight: popoverHeight, 
+        }, ref: listBoxRef, ...listBoxProps, children: [isMultiSelect && !isTree && state.selectionManager.selectedKeys.size > 0 && ((0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.pt2.pl2.pb1.pr1.df.bb.bGray200.add("flexWrap", "wrap").maxh("50%").overflowAuto.$, ref: selectedList, children: selectedOptions.map((o) => ((0, jsx_runtime_1.jsx)(ListBoxToggleChip_1.ListBoxToggleChip, { state: state, option: o, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o)))) })), (0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.fg1.$, children: hasSections ? ([...state.collection].map((section) => ((0, jsx_runtime_1.jsx)(ListBoxSection_1.ListBoxSection, { section: section, state: state, contrast: contrast, onListHeightChange: onListHeightChange, popoverHeight: popoverHeight, 
                     // Only scroll on focus if using VirtualFocus (used for ComboBoxState (SelectField), but not SelectState (ChipSelectField))
                     scrollOnFocus: props.shouldUseVirtualFocus, disabledOptionsWithReasons: disabledOptionsWithReasons }, section.key)))) : ((0, jsx_runtime_1.jsx)(VirtualizedOptions_1.VirtualizedOptions, { state: state, items: [...state.collection], onListHeightChange: onListHeightChange, contrast: contrast, 
                     // Only scroll on focus if using VirtualFocus (used for ComboBoxState (SelectField), but not SelectState (ChipSelectField))
-                    scrollOnFocus: props.shouldUseVirtualFocus, loading: loading, disabledOptionsWithReasons: disabledOptionsWithReasons })) })] }));
+                    scrollOnFocus: props.shouldUseVirtualFocus, loading: loading, disabledOptionsWithReasons: disabledOptionsWithReasons, isTree: isTree, allowCollapsing: allowCollapsing })) })] }));
 }
 exports.ListBox = ListBox;
 // UX specified maximum height for a ListBox (in pixels)

package/dist/inputs/internal/Option.js

@@ -22,28 +22,10 @@ function Option(props) {
     // Get props for the option element.
     // Prevent options from receiving browser focus via shouldUseVirtualFocus.
     const { optionProps, isDisabled, isFocused, isSelected } = (0, react_aria_1.useOption)({ key: item.key, shouldSelectOnPressUp: true, shouldFocusOnHover: false }, state, ref);
-    // Additional onKeyDown logic to ensure the  the virtualized list (in <VirtualizedOptions />) scrolls to keep the "focused" option in view
-    const onKeyDown = (0, react_1.useCallback)((e) => {
-        if (!scrollToIndex || !(e.key === "ArrowDown" || e.key === "ArrowUp")) {
-            return;
-        }
-        const toKey = e.key === "ArrowDown" ? item.nextKey : item.prevKey;
-        if (!toKey) {
-            return;
-        }
-        const toItem = state.collection.getItem(toKey);
-        // Only scroll the "options" (`state.collection` is a flat list of sections and items - we want to avoid scrolling to a "section" as it is not shown in the UI)
-        if (toItem &&
-            // Ensure we are only ever scrolling to an "option".
-            (toItem.parentKey === "options" || (!toItem.parentKey && toItem.type === "item")) &&
-            toItem.index !== undefined) {
-            scrollToIndex(toItem.index);
-        }
-    }, [scrollToIndex, state]);
     return (0, components_1.maybeTooltip)({
         title: disabledReason,
         placement: "right",
-        children: ((0, jsx_runtime_1.jsxs)("li", { ...(0, react_aria_1.mergeProps)(optionProps, hoverProps, { onKeyDown }), ref: ref, css: {
+        children: ((0, jsx_runtime_1.jsxs)("li", { ...(0, react_aria_1.mergeProps)(optionProps, hoverProps), ref: ref, css: {
                 ...Css_1.Css.df.aic.jcsb.py1.px2.mh("42px").outline0.cursorPointer.sm.$,
                 // Assumes only one Persistent Item per list - will need to change to utilize Sections if that assumption is incorrect.
                 ...((0, ChipSelectField_1.isPersistentKey)(item.key) ? Css_1.Css.bt.bGray200.$ : {}),

package/dist/inputs/internal/VirtualizedOptions.d.ts

@@ -1,14 +1,17 @@
 /// <reference types="react" />
 import { Node } from "@react-types/shared";
 import { SelectState } from "react-stately";
+import { LeveledOption } from "../TreeSelectField/utils";
 interface VirtualizedOptionsProps<O> {
     state: SelectState<O>;
-    items: Node<O>[];
+    items: Node<O>[] | Node<LeveledOption<O>>[];
     onListHeightChange: (height: number) => void;
     contrast: boolean;
     scrollOnFocus?: boolean;
     loading?: boolean | (() => JSX.Element);
     disabledOptionsWithReasons: Record<string, string | undefined>;
+    isTree?: boolean;
+    allowCollapsing?: boolean;
 }
 export declare function VirtualizedOptions<O>(props: VirtualizedOptionsProps<O>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/inputs/internal/VirtualizedOptions.js

@@ -6,9 +6,11 @@ const react_1 = require("react");
 const react_virtuoso_1 = require("react-virtuoso");
 const LoadingDots_1 = require("./LoadingDots");
 const Option_1 = require("./Option");
+const TreeOption_1 = require("../TreeSelectField/TreeOption");
+const utils_1 = require("../TreeSelectField/utils");
 // Displays ListBox options in a virtualized container for performance reasons
 function VirtualizedOptions(props) {
-    const { state, items, onListHeightChange, contrast, scrollOnFocus, loading, disabledOptionsWithReasons } = props;
+    const { state, items, onListHeightChange, contrast, scrollOnFocus, loading, disabledOptionsWithReasons, isTree, allowCollapsing, } = props;
     const virtuosoRef = (0, react_1.useRef)(null);
     const focusedItem = state.collection.getItem(state.selectionManager.focusedKey);
     const selectedItem = state.selectionManager.selectedKeys.size > 0
@@ -26,13 +28,20 @@ function VirtualizedOptions(props) {
         // We don't really need to set this, but it's handy for tests, which would
         // otherwise render just 1 row. A better way to do this would be to jest.mock
         // out Virtuoso with an impl that just rendered everything, but doing this for now.
-        initialItemCount: 5, itemContent: (idx) => {
+        initialItemCount: 10, itemContent: (idx) => {
             var _a;
             const item = items[idx];
             if (item) {
-                return ((0, jsx_runtime_1.jsx)(Option_1.Option, { item: item, state: state, contrast: contrast, 
-                    // Only send scrollToIndex functionality forward if we are not auto-scrolling on focus.
-                    scrollToIndex: scrollOnFocus ? undefined : (_a = virtuosoRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex, disabledReason: disabledOptionsWithReasons[item.key] }, item.key));
+                if (isTree && (0, utils_1.isLeveledNode)(item)) {
+                    return ((0, jsx_runtime_1.jsx)(TreeOption_1.TreeOption, { item: item, state: state, contrast: contrast, 
+                        // scrollToIndex={scrollOnFocus ? undefined : virtuosoRef.current?.scrollToIndex}
+                        allowCollapsing: allowCollapsing }, item.key));
+                }
+                if (!(0, utils_1.isLeveledNode)(item)) {
+                    return ((0, jsx_runtime_1.jsx)(Option_1.Option, { item: item, state: state, contrast: contrast, 
+                        // Only send scrollToIndex functionality forward if we are not auto-scrolling on focus.
+                        scrollToIndex: scrollOnFocus ? undefined : (_a = virtuosoRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex, disabledReason: disabledOptionsWithReasons[item.key] }, item.key));
+                }
             }
         }, components: !loading
             ? {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.263.0",
+  "version": "2.265.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",