@homebound/beam 2.378.1 → 2.379.0

package/dist/inputs/internal/ComboBoxBase.js

@@ -1,302 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.addNewOption = exports.unsetOption = void 0;
-exports.ComboBoxBase = ComboBoxBase;
-exports.initializeOptions = initializeOptions;
-exports.disabledOptionToKeyedTuple = disabledOptionToKeyedTuple;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = 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 ComboBoxInput_1 = require("./ComboBoxInput");
-const ListBox_1 = require("./ListBox");
-const utils_1 = require("../utils");
-const Value_1 = require("../Value");
-const use_debounce_1 = require("use-debounce");
-/**
- * Provides a non-native select/dropdown widget that allows the user to type to filter the options.
- *
- * The `O` type is a list of options to show, the `V` is the primitive value of a
- * given `O` (i.e. it's id) that you want to use as the current/selected value.
- *
- * Note that the `V extends Key` constraint come from react-aria,
- * and so we cannot easily change them.
- */
-function ComboBoxBase(props) {
-    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const { disabled, readOnly, onSelect, options: propOptions, multiselect = false, values: propValues, nothingSelectedText = "", contrast, disabledOptions, borderless, unsetLabel, inputStylePalette: propsInputStylePalette, getOptionLabel: propOptionLabel, getOptionValue: propOptionValue, getOptionMenuLabel: propOptionMenuLabel, fullWidth = fieldProps?.fullWidth ?? false, onSearch, onAddNew, ...otherProps } = props;
-    const labelStyle = otherProps.labelStyle ?? fieldProps?.labelStyle ?? "above";
-    // Memoize the callback functions and handle the `unset` option if provided.
-    const getOptionLabel = (0, react_1.useCallback)((o) => unsetLabel && o === exports.unsetOption
-        ? unsetLabel
-        : onAddNew && o === exports.addNewOption
-            ? exports.addNewOption.name
-            : propOptionLabel(o), 
-    // propOptionLabel is basically always a lambda, so don't dep on it
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [unsetLabel]);
-    const getOptionValue = (0, react_1.useCallback)((o) => unsetLabel && o === exports.unsetOption
-        ? undefined
-        : onAddNew && o === exports.addNewOption
-            ? exports.addNewOption.id
-            : propOptionValue(o), 
-    // propOptionValue is basically always a lambda, so don't dep on it
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [unsetLabel]);
-    const getOptionMenuLabel = (0, react_1.useCallback)((o) => propOptionMenuLabel
-        ? propOptionMenuLabel(o, Boolean(unsetLabel) && o === exports.unsetOption, Boolean(onAddNew) && o === exports.addNewOption)
-        : getOptionLabel(o), 
-    // propOptionMenuLabel is basically always a lambda, so don't dep on it
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [unsetLabel, getOptionLabel]);
-    // Call `initializeOptions` to prepend the `unset` option if the `unsetLabel` was provided.
-    const options = (0, react_1.useMemo)(() => initializeOptions(propOptions, getOptionValue, unsetLabel, !!onAddNew), 
-    // If the caller is using { current, load, options }, memoize on only `current` and `options` values.
-    // ...and don't bother on memoizing on getOptionValue b/c it's basically always a lambda
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    Array.isArray(propOptions)
-        ? [propOptions, unsetLabel, onAddNew]
-        : [propOptions.current, propOptions.options, unsetLabel, onAddNew]);
-    const values = (0, react_1.useMemo)(() => propValues ?? [], [propValues]);
-    const inputStylePalette = (0, react_1.useMemo)(() => propsInputStylePalette, [propsInputStylePalette]);
-    const selectedOptions = (0, react_1.useMemo)(() => options.filter((o) => values.includes(getOptionValue(o))), [options, values, getOptionValue]);
-    const { contains } = (0, react_aria_1.useFilter)({ sensitivity: "base" });
-    const isDisabled = !!disabled;
-    const isReadOnly = !!readOnly;
-    // Do a one-time initialize of fieldState
-    const [fieldState, setFieldState] = (0, react_1.useState)(() => {
-        return {
-            inputValue: getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly),
-            searchValue: undefined,
-            optionsLoading: false,
-        };
-    });
-    const { searchValue } = fieldState;
-    const filteredOptions = (0, react_1.useMemo)(() => {
-        return !searchValue
-            ? options
-            : options.filter((o) => contains(getOptionLabel(o), searchValue) || o === exports.addNewOption);
-    }, [options, searchValue, getOptionLabel, contains]);
-    /** Resets field's input value and filtered options list for cases where the user exits the field without making changes (on Escape, or onBlur) */
-    function resetField() {
-        setFieldState((prevState) => ({ ...prevState, searchValue: undefined }));
-    }
-    function onSelectionChange(keys) {
-        // We don't currently handle the "all" case
-        if (keys === "all") {
-            return;
-        }
-        // `onSelectionChange` may be called even if the selection's didn't change.
-        // For example, we trigger this `onBlur` of SelectFieldInput in order to reset the input's value.
-        // In those cases, we do not need to again call `onSelect` so let's avoid it if we can.
-        const selectionChanged = !(keys.size === state.selectionManager.selectedKeys.size &&
-            [...keys].every((value) => state.selectionManager.selectedKeys.has(value)));
-        if (multiselect && keys.size === 0) {
-            selectionChanged && onSelect([], []);
-            return;
-        }
-        const selectedKeys = [...keys.values()];
-        const selectedOptions = options.filter((o) => selectedKeys.includes((0, Value_1.valueToKey)(getOptionValue(o))));
-        if (!multiselect && selectedOptions[0] === exports.addNewOption && onAddNew) {
-            onAddNew(fieldState.inputValue);
-            state.close();
-            return;
-        }
-        selectionChanged && onSelect(selectedKeys.map(Value_1.keyToValue), selectedOptions);
-        if (!multiselect) {
-            // Close menu upon selection change only for Single selection mode
-            state.close();
-        }
-    }
-    function onInputChange(value) {
-        if (value !== fieldState.inputValue) {
-            setFieldState((prevState) => ({ ...prevState, inputValue: value, searchValue: value }));
-        }
-    }
-    async function maybeInitLoad() {
-        if (!Array.isArray(propOptions)) {
-            setFieldState((prevState) => ({ ...prevState, optionsLoading: true }));
-            await propOptions.load();
-            setFieldState((prevState) => ({ ...prevState, optionsLoading: false }));
-        }
-    }
-    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();
-            firstOpen.current = false;
-        }
-        // When using the multiselect field, always empty the input upon open.
-        if (multiselect && isOpen) {
-            setFieldState((prevState) => ({ ...prevState, inputValue: "" }));
-        }
-    }
-    // Used to calculate the rendered width of the combo box (input + button)
-    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);
-    // `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(disabledOptionToKeyedTuple) ?? []);
-    const comboBoxProps = {
-        ...otherProps,
-        disabledKeys: Object.keys(disabledOptionsWithReasons),
-        inputValue: fieldState.inputValue,
-        items: filteredOptions,
-        isDisabled,
-        isReadOnly,
-        onInputChange,
-        onOpenChange,
-        children: (item) => ((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,
-        // We don't really allow custom values, as we reset the input value once a user `blur`s the input field.
-        // Though, setting `allowsCustomValue: true` prevents React-Aria/Stately from attempting to reset the input field's value when the menu closes.
-        allowsCustomValue: true,
-        // useComboBoxState.onSelectionChange will be executed if a keyboard interaction (Enter key) is used to select an item
-        onSelectionChange: (key) => {
-            // ignore undefined/null keys - `null` can happen if input field's value is completely deleted after having a value assigned.
-            if (key) {
-                const selectedKeys = state.selectionManager.selectedKeys;
-                // Create the `newSelection` Set depending on the value type of SelectField.
-                const newSelection = new Set(!multiselect ? [key] : [...selectedKeys, key]);
-                // Use only the `multipleSelectionState` to manage selected keys
-                state.selectionManager.setSelectedKeys(newSelection);
-            }
-        },
-    });
-    const selectedKeys = (0, react_1.useMemo)(() => {
-        return selectedOptions.map((o) => (0, Value_1.valueToKey)(getOptionValue(o)));
-    }, [selectedOptions, getOptionValue]);
-    // @ts-ignore - `selectionManager.state` exists, but not according to the types
-    state.selectionManager.state = (0, react_stately_1.useMultipleSelectionState)({
-        selectionMode: multiselect ? "multiple" : "single",
-        // Do not allow an empty selection if single select mode
-        disallowEmptySelection: !multiselect,
-        selectedKeys,
-        onSelectionChange,
-    });
-    const [debouncedSearch] = (0, use_debounce_1.useDebounce)(searchValue, 300);
-    // Reset inputValue when closed or selected changes
-    (0, react_1.useEffect)(() => {
-        if (state.isOpen && multiselect && !debouncedSearch) {
-            // When a single-select is open, with "inputValue=Blue", when "Blue" is actually
-            // selected (our value changes), the box will close immediately, so the inputValue
-            // will get reset in the `!isOpen` case.
-            //
-            // When a multi-select is open, with "inputValue=Blue", when "Blue" is actually
-            // selected (our value changes), we leave the box open, and we want to reset
-            // the "inputValue=(empty) so the user can now type "inputType=Green".
-            //
-            // ...unless the multi-select is using onSearch, in which case we want to let them
-            // only explicitly trigger a new `onSearch` by changing the existing inputValue,
-            // i.e. they might want to keep typing "Blueish".
-            setFieldState((prevState) => ({
-                ...prevState,
-                inputValue: "",
-                searchValue: "",
-            }));
-        }
-        else if (!state.isOpen) {
-            setFieldState((prevState) => ({
-                ...prevState,
-                searchValue: "",
-                inputValue: getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly),
-            }));
-        }
-    }, [state.isOpen, selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly, debouncedSearch]);
-    // Call on search callback when the user types in the input field
-    (0, react_1.useEffect)(() => {
-        onSearch?.(debouncedSearch ?? "");
-    }, [onSearch, debouncedSearch]);
-    // For the most part, the returned props contain `aria-*` and `id` attributes for accessibility purposes.
-    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: 200,
-    };
-    const fieldMaxWidth = (0, utils_1.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, inputStylePalette: inputStylePalette, fullWidth: fullWidth, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, listBoxRef: listBoxRef, state: state, labelProps: labelProps, selectedOptions: selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField }), 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: selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, disabledOptionsWithReasons: disabledOptionsWithReasons }) }))] }));
-}
-function getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText, readOnly) {
-    return selectedOptions.length === 1
-        ? getOptionLabel(selectedOptions[0])
-        : readOnly && selectedOptions.length > 0
-            ? selectedOptions.map(getOptionLabel).join(", ")
-            : multiselect && selectedOptions.length === 0
-                ? nothingSelectedText
-                : "";
-}
-/** Transforms/simplifies `optionsOrLoad` into just options, with unsetLabel maybe added. */
-function initializeOptions(optionsOrLoad, getOptionValue, unsetLabel, addNew) {
-    const opts = [];
-    if (unsetLabel) {
-        opts.push(exports.unsetOption);
-    }
-    if (Array.isArray(optionsOrLoad)) {
-        opts.push(...optionsOrLoad);
-    }
-    else {
-        const { options, current } = optionsOrLoad;
-        if (options) {
-            opts.push(...options);
-        }
-        // Add the `current` to the list of options in the event it is not already there.
-        if (current) {
-            const toCheck = Array.isArray(current) ? current : [current];
-            toCheck.forEach((current) => {
-                const value = getOptionValue(current);
-                const found = options && options.find((o) => getOptionValue(o) === value);
-                if (!found) {
-                    opts.push(current);
-                }
-            });
-        }
-    }
-    if (addNew) {
-        opts.push(exports.addNewOption);
-    }
-    return opts;
-}
-/** A marker option to automatically add an "Unset" option to the start of options. */
-exports.unsetOption = {};
-exports.addNewOption = { id: "new", name: "Add New" };
-function disabledOptionToKeyedTuple(disabledOption) {
-    if (typeof disabledOption === "object" && disabledOption !== null) {
-        return [(0, Value_1.valueToKey)(disabledOption.value), disabledOption.reason];
-    }
-    else {
-        return [(0, Value_1.valueToKey)(disabledOption), undefined];
-    }
-}

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

@@ -1,36 +0,0 @@
-import { InputHTMLAttributes, LabelHTMLAttributes, MutableRefObject, ReactNode } from "react";
-import { ComboBoxState } from "react-stately";
-import { PresentationFieldProps } from "../../components/PresentationContext";
-import { Value } from "../Value";
-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;
-    required?: boolean;
-    helperText?: string | ReactNode;
-    onBlur?: () => void;
-    onFocus?: () => void;
-    labelProps: LabelHTMLAttributes<HTMLLabelElement>;
-    label: string;
-    selectedOptions: O[];
-    selectedOptionsLabels?: string[];
-    getOptionValue: (opt: O) => V;
-    getOptionLabel: (opt: O) => string;
-    sizeToContent?: boolean;
-    contrast?: boolean;
-    nothingSelectedText: string;
-    tooltip?: ReactNode;
-    resetField: VoidFunction;
-    hideErrorMessage?: boolean;
-    isTree?: boolean;
-    multiline?: boolean;
-}
-export declare function ComboBoxInput<O, V extends Value>(props: ComboBoxInputProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=ComboBoxInput.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ComboBoxInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/internal/ComboBoxInput.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEZ,mBAAmB,EAEnB,mBAAmB,EACnB,gBAAgB,EAChB,SAAS,EAEV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAE,sBAAsB,EAA0B,6CAA2C;AAMpG,OAAO,EAAE,KAAK,EAAE,iBAAyB;AAGzC,UAAU,kBAAkB,CAAC,CAAC,EAAE,CAAC,SAAS,KAAK,CAAE,SAAQ,sBAAsB;IAC7E,WAAW,EAAE,GAAG,CAAC;IACjB,SAAS,EAAE,gBAAgB,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACtD,UAAU,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAClD,QAAQ,EAAE,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACpD,YAAY,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACtD,UAAU,CAAC,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACxB,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,CAAC,EAAE,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,cAAc,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;IAC9B,cAAc,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,UAAU,EAAE,YAAY,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,oDAwNhF"}

package/dist/inputs/internal/ComboBoxInput.js

@@ -1,153 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComboBoxInput = ComboBoxInput;
-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 PresentationContext_1 = require("../../components/PresentationContext");
-const Css_1 = require("../../Css");
-const useGrowingTextField_1 = require("../hooks/useGrowingTextField");
-const TextFieldBase_1 = require("../TextFieldBase");
-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, selectedOptionsLabels, getOptionValue, getOptionLabel, sizeToContent = false, contrast = false, nothingSelectedText, resetField, isTree, listBoxRef, inputRef, inputWrapRef, multiline = false, ...otherProps } = props;
-    const { wrap = false } = (0, PresentationContext_1.usePresentationContext)();
-    // Allow the field to wrap whether the caller has explicitly set `multiline=true` or the `PresentationContext.wrap=true`
-    const allowWrap = wrap || multiline;
-    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;
-    // Show selections as chips when using multiselect when unfocused
-    const showChipSelection = isMultiSelect && state.selectionManager.selectedKeys.size > 0;
-    // For MultiSelect only show the `fieldDecoration` when input is not in focus.
-    const showFieldDecoration = (!isMultiSelect || (isMultiSelect && !isFocused)) && fieldDecoration && selectedOptions.length === 1;
-    const multilineProps = allowWrap ? { textAreaMinHeight: 0, multiline: true } : {};
-    const chipLabels = isTree ? selectedOptionsLabels || [] : selectedOptions.map((o) => getOptionLabel(o));
-    (0, useGrowingTextField_1.useGrowingTextField)({
-        // This says: When using a multiselect, then only enable the growing textfield when we are focused on it.
-        // Because otherwise, we're not displaying the input element that dictates the height (we're displaying <Chips/>). This would cause incorrect calculations
-        disabled: (isMultiSelect && (!allowWrap || !isFocused)) || (!isMultiSelect && !allowWrap),
-        inputRef,
-        inputWrapRef,
-        value: inputProps.value,
-    });
-    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...otherProps, ...multilineProps, unfocusedPlaceholder: showChipSelection && (0, jsx_runtime_1.jsx)(components_1.Chips, { compact: otherProps.compact, values: chipLabels, wrap: allowWrap }), inputRef: inputRef, inputWrapRef: inputWrapRef, errorMsg: errorMsg, contrast: contrast, xss: otherProps.labelStyle !== "inline" && !inputProps.readOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)(components_1.Tooltip, { title: (0, jsx_runtime_1.jsx)(SelectedOptionBullets, { labels: chipLabels }), children: (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgBlue700.white.tinySb.df.aic.jcc.$, "data-testid": "selectedOptionsCount", children: isTree ? selectedOptionsLabels?.length : 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.$ : {}),
-            }, "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.
-                            if (state.isOpen) {
-                                e.preventDefault();
-                            }
-                            state.selectionManager.toggleSelection(state.selectionManager.focusedKey);
-                            return;
-                        }
-                        // By default, the Escape key would "revert" changes,
-                        // but we just want to close the menu and leave the reset of the field state as is.
-                        if (e.key === "Escape") {
-                            state.close();
-                            return;
-                        }
-                    }
-                    // Handle single selection Escape key press
-                    // When a user hits `Escape`, then react-aria calls `state.revert`, which uses `state.selectedKey` to
-                    // reset the field to its previous value. However, because we use a the Multiple Selection State manager,
-                    // then our `state.selectedKey` isn't set. So we need to properly reset the state ourselves.
-                    if (e.key === "Escape") {
-                        state.close();
-                        resetField();
-                        return;
-                    }
-                    inputProps.onKeyDown && inputProps.onKeyDown(e);
-                },
-                onChange: (e) => {
-                    // Prevent user from entering any content that has new line characters.
-                    const target = e.target;
-                    target.value = target.value.replace(/[\n\r]/g, "");
-                    // Call existing onChange handler if any.
-                    inputProps.onChange && inputProps.onChange(e);
-                },
-                onBlur: (e) => {
-                    // 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.listBoxRef?.current && props.listBoxRef.current.contains(e.relatedTarget))) {
-                        return;
-                    }
-                    // We purposefully override onBlur here instead of using mergeProps, b/c inputProps.onBlur
-                    // goes into useComboBox's onBlur, which calls setFocused(false), which in useComboBoxState
-                    // 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_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.
-                    resetField();
-                },
-                onFocus: () => {
-                    if (inputProps.readOnly)
-                        return;
-                    setIsFocused(true);
-                    (0, utils_2.maybeCall)(onFocus);
-                },
-                onClick: () => {
-                    if (inputProps.readOnly)
-                        return;
-                    buttonRef.current?.click();
-                },
-                size: 
-                // If sizeToContent, then, in order of precedence, base it of from:
-                // 1. input's value if any
-                // 2. If is MultiSelect and only one option is chosen, then use the length of that option to define the width to avoid size jumping on blur.
-                // 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 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])) ||
-                        nothingSelectedText ||
-                        "").length || 1, 20)
-                    : undefined,
-            },
-        } }));
-}
-function SelectedOptionBullets({ labels = [] }) {
-    return (0, jsx_runtime_1.jsx)("div", { children: labels?.map((label) => (0, jsx_runtime_1.jsx)("li", { children: label }, label)) });
-}

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

@@ -1,20 +0,0 @@
-import React, { Key, MutableRefObject } from "react";
-import { SelectState } from "react-stately";
-interface ListBoxProps<O, V extends Key> {
-    listBoxRef: MutableRefObject<HTMLDivElement | null>;
-    state: SelectState<O>;
-    selectedOptions?: O[];
-    getOptionLabel: (opt: O) => string;
-    getOptionValue: (opt: O) => V;
-    contrast?: boolean;
-    horizontalLayout?: boolean;
-    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;
-export {};
-//# sourceMappingURL=ListBox.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../src/inputs/internal/ListBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,gBAAgB,EAA+B,MAAM,OAAO,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAO5C,UAAU,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,GAAG;IACrC,UAAU,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACpD,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACtB,eAAe,CAAC,EAAE,CAAC,EAAE,CAAC;IACtB,cAAc,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;IACnC,cAAc,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,CAAC;IACxC,0BAA0B,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAChE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,iHAAiH;AACjH,wBAAgB,OAAO,CAAC,CAAC,EAAE,CAAC,SAAS,GAAG,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,oDA+HlE"}

package/dist/inputs/internal/ListBox.js

@@ -1,68 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListBox = ListBox;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
-const react_aria_1 = require("react-aria");
-const Css_1 = require("../../Css");
-const constants_1 = require("./constants");
-const ListBoxSection_1 = require("./ListBoxSection");
-const ListBoxToggleChip_1 = require("./ListBoxToggleChip");
-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) {
-    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 = positionProps.style?.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`).
-    // If `maxHeight` is set use that, otherwise use `maxPopoverHeight` as a default, per UX guidelines.
-    // (`positionMaxHeight` should always be set and defined as a number, but we need to do these type checks to make TS happy)
-    const popoverMaxHeight = positionMaxHeight && typeof positionMaxHeight === "number"
-        ? Math.min(positionMaxHeight, maxPopoverHeight)
-        : maxPopoverHeight;
-    const [popoverHeight, setPopoverHeight] = (0, react_1.useState)(popoverMaxHeight);
-    const isMultiSelect = state.selectionManager.selectionMode === "multiple";
-    const firstItem = state.collection.at(0);
-    const hasSections = firstItem && firstItem.type === "section";
-    // Create a reference for measuring the MultiSelect's selected list's height. Used for re-evaluating `popoverHeight`.
-    const selectedList = (0, react_1.useRef)(null);
-    const firstRender = (0, react_1.useRef)(true);
-    // Keep track of the virtuoso list height to properly update the ListBox's height.
-    // Using a ref, this itself should not trigger a rerender, only `popoverHeight` changes will trigger a rerender.
-    const virtuosoListHeight = (0, react_1.useRef)(0);
-    const onListHeightChange = (listHeight) => {
-        virtuosoListHeight.current = listHeight;
-        // The "listHeight" is only the list of options.
-        // For multiple selects we need to also account for the height of the list of currently selected elements when re-evaluating.
-        // Using `offsetHeight` to account for borders
-        const height = (selectedList.current?.offsetHeight || 0) + listHeight;
-        // Using Math.min to choose between the smaller height, either the total height of the List (`height` arg), or the maximum height defined by the space allotted on screen or our hard coded max.
-        // If there are ListBoxSections, then we assume it is the persistent section with a single item and account for that height.
-        setPopoverHeight(Math.min(popoverMaxHeight, hasSections ? height + constants_1.persistentItemHeight + constants_1.sectionSeparatorHeight : height));
-    };
-    (0, react_1.useEffect)(() => {
-        // Reevaluate the list height when introducing or removing the MultiSelect's options list.
-        // Do not call `onListHeightChange` on the first render. Only when the selectedKeys size has actually changed between empty and not empty.
-        if (!firstRender.current &&
-            isMultiSelect &&
-            (state.selectionManager.selectedKeys.size === 0 || state.selectionManager.selectedKeys.size === 1)) {
-            onListHeightChange(virtuosoListHeight.current);
-        }
-        firstRender.current = false;
-    }, 
-    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [state.selectionManager.selectedKeys.size]);
-    return ((0, jsx_runtime_1.jsxs)("div", { css: {
-            // If `horizontalLayout`, then that means `labelStyle === "left"`. In this case the label the the field both take 50% of the horizontal space.
-            // 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 && !isTree && state.selectionManager.selectedKeys.size > 0 && ((0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.pt2.pl2.pb1.pr1.df.bb.bcGray200.add("flexWrap", "wrap").maxh("50%").oa.$, 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, isTree: isTree, allowCollapsing: allowCollapsing })) })] }));
-}
-// UX specified maximum height for a ListBox (in pixels)
-const maxPopoverHeight = 512;

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

@@ -1,6 +0,0 @@
-interface ListBoxChipProps {
-    label: string;
-}
-export declare function ListBoxChip({ label }: ListBoxChipProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=ListBoxChip.d.ts.map

package/dist/inputs/internal/ListBoxChip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListBoxChip.d.ts","sourceRoot":"","sources":["../../../src/inputs/internal/ListBoxChip.tsx"],"names":[],"mappings":"AAGA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,gBAAgB,oDAWtD"}

package/dist/inputs/internal/ListBoxChip.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListBoxChip = ListBoxChip;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const PresentationContext_1 = require("../../components/PresentationContext");
-const Css_1 = require("../../Css");
-function ListBoxChip({ label }) {
-    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    return ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css[fieldProps?.typeScale ?? "sm"].tal.bgGray300.gray900.br16.pxPx(10).pyPx(2).lineClamp1.wbba.$, title: label, children: label }));
-}

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

@@ -1,14 +0,0 @@
-import { Node } from "@react-types/shared";
-import { SelectState } from "react-stately";
-interface ListBoxSectionProps<O> {
-    section: Node<O>;
-    state: SelectState<O>;
-    contrast: boolean;
-    onListHeightChange: (height: number) => void;
-    popoverHeight: number;
-    scrollOnFocus?: boolean;
-    disabledOptionsWithReasons: Record<string, string | undefined>;
-}
-export declare function ListBoxSection<O>(props: ListBoxSectionProps<O>): import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=ListBoxSection.d.ts.map

package/dist/inputs/internal/ListBoxSection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListBoxSection.d.ts","sourceRoot":"","sources":["../../../src/inputs/internal/ListBoxSection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAE3C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAM5C,UAAU,mBAAmB,CAAC,CAAC;IAC7B,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB,kBAAkB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,0BAA0B,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;CAChE;AAID,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,oDA2C9D"}