@homebound/beam 2.378.1 → 2.379.0

package/dist/inputs/TreeSelectField/TreeOption.js

@@ -1,62 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TreeOption = TreeOption;
-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) {
-    const { item, state, contrast = false, allowCollapsing = true } = props;
-    const leveledOption = item.value;
-    if (!leveledOption)
-        return null;
-    const [option, level] = leveledOption;
-    // TODO: validate this eslint-disable with https://app.shortcut.com/homebound-team/story/40045
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const ref = (0, react_1.useRef)(null);
-    // TODO: validate this eslint-disable with https://app.shortcut.com/homebound-team/story/40045
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const { hoverProps, isHovered } = (0, react_aria_1.useHover)({});
-    // TODO: validate this eslint-disable with https://app.shortcut.com/homebound-team/story/40045
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const tid = (0, utils_1.useTestIds)(props, "treeOption");
-    // TODO: validate this eslint-disable with https://app.shortcut.com/homebound-team/story/40045
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const { collapsedKeys, setCollapsedKeys, getOptionValue } = (0, TreeSelectField_1.useTreeSelectFieldProvider)();
-    // TODO: validate this eslint-disable with https://app.shortcut.com/homebound-team/story/40045
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    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 && option.children?.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.Blue700 : Css_1.Palette.Blue500}`).$,
-    };
-    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 && option.children?.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, "data-label": item.textValue, 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 })] })] }));
-}
-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

@@ -1,56 +0,0 @@
-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;
-    /** 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;
-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 {};
-//# sourceMappingURL=TreeSelectField.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"TreeSelectField.d.ts","sourceRoot":"","sources":["../../../src/inputs/TreeSelectField/TreeSelectField.tsx"],"names":[],"mappings":"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"}

package/dist/inputs/TreeSelectField/TreeSelectField.js

@@ -1,468 +0,0 @@
-"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 = void 0;
-exports.TreeSelectField = TreeSelectField;
-exports.useTreeSelectFieldProvider = useTreeSelectFieldProvider;
-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 PresentationContext_1 = require("../../components/PresentationContext");
-const Css_1 = require("../../Css");
-const ComboBoxBase_1 = require("../internal/ComboBoxBase");
-const ComboBoxInput_1 = require("../internal/ComboBoxInput");
-const ListBox_1 = require("../internal/ListBox");
-const utils_1 = require("./utils");
-const utils_2 = 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)([]);
-    (0, react_1.useEffect)(() => {
-        setCollapsedKeys(!Array.isArray(options)
-            ? []
-            : defaultCollapsed
-                ? options.map((o) => getOptionValue(o))
-                : options
-                    .flatMap(utils_1.flattenOptions)
-                    .filter((o) => o.defaultCollapsed)
-                    .map((o) => getOptionValue(o)));
-        // Explicitly ignoring `getOptionValue` as it typically isn't memo'd
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [options, defaultCollapsed]);
-    const contextValue = (0, react_1.useMemo)(() => ({ collapsedKeys, setCollapsedKeys, getOptionValue }), 
-    // 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, 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 });
-            } }) }));
-}
-function useTreeSelectFieldProvider() {
-    return (0, react_1.useContext)(exports.CollapsedContext);
-}
-// create the context to hold the collapsed state, default should be false
-exports.CollapsedContext = react_1.default.createContext({
-    collapsedKeys: [],
-    setCollapsedKeys: () => { },
-    getOptionValue: () => ({}),
-});
-function TreeSelectFieldBase(props) {
-    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 = fieldProps?.fullWidth ?? 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();
-    // `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(disabledOptions?.map(ComboBoxBase_1.disabledOptionToKeyedTuple) ?? []);
-    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?.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 }) => selectOptionAndAllChildren(option));
-        }));
-        function selectOptionAndAllChildren(maybeParent) {
-            // Check if the maybeParent has children, if so, return those as selected keys
-            // Do in a recursive way so that children may have children
-            return [
-                (0, Value_1.valueToKey)(getOptionValue(maybeParent)),
-                ...(maybeParent.children?.flatMap(selectOptionAndAllChildren) ?? []),
-            ];
-        }
-        // 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.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
-            const areAllSelected = maybeParent.children.every(areAllChildrenSelected);
-            if (areAllSelected) {
-                selectedKeys.add((0, Value_1.valueToKey)(getOptionValue(maybeParent)));
-            }
-            return areAllSelected;
-        }
-        initialOptions.forEach(areAllChildrenSelected);
-        // 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],
-            inputValue: selectedOptions.length === 1
-                ? getOptionLabel([...selectedOptions][0])
-                : isReadOnly && selectedOptions.length > 0
-                    ? selectedOptionsLabels.join(", ")
-                    : selectedOptions.length === 0
-                        ? nothingSelectedText
-                        : "",
-            filteredOptions,
-            selectedOptions,
-            allOptions: initialOptions,
-            selectedOptionsLabels,
-            optionsLoading: false,
-            allowCollapsing: true,
-        };
-    }, [
-        initialOptions,
-        values,
-        chipDisplay,
-        getOptionLabel,
-        isReadOnly,
-        nothingSelectedText,
-        getOptionValue,
-        collapsedKeys,
-    ]);
-    // Initialize the TreeFieldState
-    const [fieldState, setFieldState] = (0, react_1.useState)(() => initTreeFieldState());
-    (0, react_1.useEffect)(() => {
-        // We don't want to do this if initialOptions is not an array, because we would be lazy loading `allOptions`
-        if (Array.isArray(options)) {
-            setFieldState((prevState) => ({ ...prevState, allOptions: options }));
-        }
-    }, [options]);
-    // 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 (
-        // If the values were cleared
-        (values === undefined && selectedKeys.length !== 0) ||
-            // Or values were set, but they don't match the selected keys
-            (values && (values.length !== selectedKeys.length || !values.every((v) => selectedKeys.includes((0, Value_1.valueToKey)(v)))))) {
-            // Then reinitialize
-            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)(() => {
-        // 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, collapsedKeys, getOptionValue).filter(([option]) => contains(getOptionLabel(option), inputValue))),
-            }));
-        }
-        reactToCollapse.current = true;
-    }, 
-    // 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
-    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, collapsedKeys, getOptionValue).filter(([option]) => contains(getOptionLabel(option), inputValue))),
-            };
-        });
-    }, [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, 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,
-                filteredOptions,
-                allOptions: loadedOptions,
-                optionsLoading: false,
-            }));
-        }
-    }, [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) {
-        if (firstOpen.current && isOpen) {
-            // TODO: verify this eslint ignore
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            maybeInitLoad(options, fieldState, setFieldState);
-            firstOpen.current = false;
-        }
-        if (isOpen) {
-            // reset the input field to allow the user to start typing to filter
-            setFieldState((prevState) => ({
-                ...prevState,
-                inputValue: "",
-                filteredOptions: prevState.allOptions.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,
-        // 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 - 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)({
-        ...comboBoxProps,
-        allowsEmptyCollection: true,
-        allowsCustomValue: 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: nothingSelectedText,
-                        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) => {
-                    const maybeOptions = (0, utils_1.findOptions)(fieldState.allOptions, key, getOptionValue);
-                    if (maybeOptions.length === 0)
-                        return;
-                    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 = parent.children?.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 maybeOptions = (0, utils_1.findOptions)(fieldState.allOptions, key, getOptionValue);
-                    if (maybeOptions.length === 0)
-                        return;
-                    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 = [...selectedKeys]
-                    // Find the first option as it could be duplicated, but we only want one of them.
-                    .map((key) => (0, utils_1.findOption)(fieldState.allOptions, key, getOptionValue)?.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.
-                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,
-                    // 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: 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 },
-                    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 !== nothingSelectedText ||
-            (selectedOptions.length === 1 && inputValue !== getOptionLabel(selectedOptions[0]))) {
-            setFieldState((prevState) => ({
-                ...prevState,
-                inputValue: selectedOptions.length === 1
-                    ? getOptionLabel(selectedOptions[0])
-                    : selectedOptions.length === 0
-                        ? nothingSelectedText
-                        : "",
-                filteredOptions: initialOptions.flatMap((o) => levelOptions(o, 0, false, collapsedKeys, getOptionValue)),
-                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: comboBoxRef?.current?.clientWidth,
-        // Ensures the menu never gets too small.
-        minWidth: 320,
-    };
-    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: 320, 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) {
-    // 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],
-        // Flat map the children if the parent is not collapsed or if we are filtering (for the search results)
-        ...(o.children?.length && (!collapsedKeys.includes((0, Value_1.valueToKey)(getOptionValue(o))) || filtering)
-            ? 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/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./TreeSelectField";
-export type { NestedOption, NestedOptionsOrLoad } from "./utils";
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/inputs/TreeSelectField/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC"}

package/dist/inputs/TreeSelectField/index.js

@@ -1,17 +0,0 @@
-"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);