@homebound/beam 2.268.1 → 2.270.0

package/dist/inputs/Autocomplete.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import { PresentationFieldProps } from "../components/PresentationContext";
 import { TextFieldBaseProps } from "./TextFieldBase";
+import { Value } from "./Value";
 interface AutocompleteProps<T> extends Pick<PresentationFieldProps, "labelStyle">, Pick<TextFieldBaseProps<any>, "label" | "clearable" | "startAdornment"> {
     onSelect: (item: T) => void;
     /** A function that returns how to render the an option in the menu. If not set, `getOptionLabel` will be used */
@@ -19,6 +20,11 @@ interface AutocompleteProps<T> extends Pick<PresentationFieldProps, "labelStyle"
     placeholder?: string;
     /** Whether the input is disabled */
     disabled?: boolean;
+    /** A list of options that are disabled. Can be either the option itself or an object with the option and a reason why it is disabled */
+    disabledOptions?: (Value | {
+        value: Value;
+        reason: string;
+    })[];
 }
 export declare function Autocomplete<T extends object>(props: AutocompleteProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/inputs/Autocomplete.js

@@ -7,14 +7,17 @@ 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 ComboBoxBase_1 = require("./internal/ComboBoxBase");
 const ListBox_1 = require("./internal/ListBox");
 const TextFieldBase_1 = require("./TextFieldBase");
 const Value_1 = require("./Value");
 function Autocomplete(props) {
-    var _a;
-    const { onSelect, getOptionLabel, getOptionValue, getOptionMenuLabel, onInputChange, value, options, disabled, ...others } = props;
+    var _a, _b;
+    const { onSelect, getOptionLabel, getOptionValue, getOptionMenuLabel, onInputChange, value, options, disabled, disabledOptions, ...others } = props;
+    const disabledOptionsWithReasons = Object.fromEntries((_a = disabledOptions === null || disabledOptions === void 0 ? void 0 : disabledOptions.map(ComboBoxBase_1.disabledOptionToKeyedTuple)) !== null && _a !== void 0 ? _a : []);
     const comboBoxProps = {
         isDisabled: !!disabled,
+        disabledKeys: Object.keys(disabledOptionsWithReasons),
         onInputChange: onInputChange,
         inputValue: value,
         items: options,
@@ -54,12 +57,12 @@ function Autocomplete(props) {
     });
     positionProps.style = {
         ...positionProps.style,
-        width: (_a = inputWrapRef === null || inputWrapRef === void 0 ? void 0 : inputWrapRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth,
+        width: (_b = inputWrapRef === null || inputWrapRef === void 0 ? void 0 : inputWrapRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth,
         // Ensures the menu never gets too small.
         minWidth: 200,
     };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { inputRef: inputRef, inputWrapRef: inputWrapRef, inputProps: inputProps, labelProps: labelProps, onChange: onInputChange, clearable: true, 
                 // Respect if caller to passes in `startAdornment={undefined}`
-                startAdornment: "startAdornment" in props ? props.startAdornment : (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "search" }), ...others }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: inputRef, 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, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), getOptionLabel: getOptionLabel }) }))] }));
+                startAdornment: "startAdornment" in props ? props.startAdornment : (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "search" }), ...others }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: inputRef, 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, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), getOptionLabel: getOptionLabel, disabledOptionsWithReasons: disabledOptionsWithReasons }) }))] }));
 }
 exports.Autocomplete = Autocomplete;

package/dist/inputs/TreeSelectField/TreeOption.js

@@ -43,7 +43,7 @@ function TreeOption(props) {
                         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 })] })] }));
+                    }, 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 })] })] }));
 }
 exports.TreeOption = TreeOption;
 function hasSelectedChildren(childOption, state, getOptionValue) {

package/dist/inputs/internal/Option.js

@@ -25,7 +25,7 @@ function Option(props) {
     return (0, components_1.maybeTooltip)({
         title: disabledReason,
         placement: "right",
-        children: ((0, jsx_runtime_1.jsxs)("li", { ...(0, react_aria_1.mergeProps)(optionProps, hoverProps), ref: ref, css: {
+        children: ((0, jsx_runtime_1.jsxs)("li", { ...(0, react_aria_1.mergeProps)(optionProps, hoverProps), "data-label": item.textValue, 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/utils/rtl.d.ts

@@ -1,7 +1,7 @@
 import { newLocation as _newLocation, withRouter as _withRouter } from "@homebound/rtl-react-router-utils";
 import { blur as _blur, change as _change, click as _click, focus as _focus, getOptions as _getOptions, input as _input, RenderResult, select as _select, type as _type, typeAndWait as _typeAndWait, wait as _wait, Wrapper } from "@homebound/rtl-utils";
 import { ReactElement } from "react";
-export { _blur as blur, _change as change, _click as click, _focus as focus, _getOptions as getOptions, _input as input, _select as select, _type as type, _typeAndWait as typeAndWait, _wait as wait, };
+export { _blur as blur, _change as change, _click as click, _focus as focus, _getOptions as rtlUtilGetOptions, _input as input, _select as rtlUtilSelect, _type as type, _typeAndWait as typeAndWait, _wait as wait, };
 export { _newLocation as newLocation, _withRouter as withRouter };
 interface RenderOpts {
     at?: {
@@ -32,3 +32,11 @@ export declare function rowAnd(r: RenderResult, rowNum: number, testId: string):
 export declare function tableSnapshot(r: RenderResult): string;
 /** RTL wrapper for Beam's SuperDrawer/Modal context. */
 export declare const withBeamRTL: Wrapper;
+/** Selects an option from the Beam SelectField, MultiSelectField, and TreeSelectField components
+ * For select fields that support multiple selections, subsequent calls to this function will toggle the selection state of an option.
+ * @param value The value or label of the option.
+ * */
+export declare function select(element: HTMLElement, value: string | string[]): void;
+export declare function selectAndWait(input: HTMLElement, value: string | string[]): Promise<void>;
+export declare function getSelected(element: HTMLElement): string[] | string | undefined;
+export declare function getOptions(element: HTMLElement): string[];

package/dist/utils/rtl.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withBeamRTL = exports.tableSnapshot = exports.rowAnd = exports.row = exports.cellAnd = exports.cellOf = exports.cell = exports.render = exports.withRouter = exports.newLocation = exports.wait = exports.typeAndWait = exports.type = exports.select = exports.input = exports.getOptions = exports.focus = exports.click = exports.change = exports.blur = void 0;
+exports.getOptions = exports.getSelected = exports.selectAndWait = exports.select = exports.withBeamRTL = exports.tableSnapshot = exports.rowAnd = exports.row = exports.cellAnd = exports.cellOf = exports.cell = exports.render = exports.withRouter = exports.newLocation = exports.wait = exports.typeAndWait = exports.type = exports.rtlUtilSelect = exports.input = exports.rtlUtilGetOptions = exports.focus = exports.click = exports.change = exports.blur = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const rtl_react_router_utils_1 = require("@homebound/rtl-react-router-utils");
 Object.defineProperty(exports, "newLocation", { enumerable: true, get: function () { return rtl_react_router_utils_1.newLocation; } });
@@ -10,9 +10,9 @@ Object.defineProperty(exports, "blur", { enumerable: true, get: function () { re
 Object.defineProperty(exports, "change", { enumerable: true, get: function () { return rtl_utils_1.change; } });
 Object.defineProperty(exports, "click", { enumerable: true, get: function () { return rtl_utils_1.click; } });
 Object.defineProperty(exports, "focus", { enumerable: true, get: function () { return rtl_utils_1.focus; } });
-Object.defineProperty(exports, "getOptions", { enumerable: true, get: function () { return rtl_utils_1.getOptions; } });
+Object.defineProperty(exports, "rtlUtilGetOptions", { enumerable: true, get: function () { return rtl_utils_1.getOptions; } });
 Object.defineProperty(exports, "input", { enumerable: true, get: function () { return rtl_utils_1.input; } });
-Object.defineProperty(exports, "select", { enumerable: true, get: function () { return rtl_utils_1.select; } });
+Object.defineProperty(exports, "rtlUtilSelect", { enumerable: true, get: function () { return rtl_utils_1.select; } });
 Object.defineProperty(exports, "type", { enumerable: true, get: function () { return rtl_utils_1.type; } });
 Object.defineProperty(exports, "typeAndWait", { enumerable: true, get: function () { return rtl_utils_1.typeAndWait; } });
 Object.defineProperty(exports, "wait", { enumerable: true, get: function () { return rtl_utils_1.wait; } });
@@ -135,3 +135,98 @@ function getTextFromTableCellNode(node) {
 exports.withBeamRTL = {
     wrap: (c) => (0, jsx_runtime_1.jsx)(components_1.BeamProvider, { children: c }),
 };
+/** Selects an option from the Beam SelectField, MultiSelectField, and TreeSelectField components
+ * For select fields that support multiple selections, subsequent calls to this function will toggle the selection state of an option.
+ * @param value The value or label of the option.
+ * */
+function select(element, value) {
+    const select = resolveIfNeeded(element);
+    if (isSelectElement(select)) {
+        throw new Error("Beam select helper does not support <select> elements.");
+    }
+    if (!isInputElement(select)) {
+        throw new Error(`Expected element to be INPUT, but got ${select.nodeName}. This field may be read-only.`);
+    }
+    function maybeOpenAndSelect(optionValue) {
+        const expanded = select.getAttribute("aria-expanded") === "true";
+        if (!expanded) {
+            (0, rtl_utils_1.click)(select);
+        }
+        const body = select.closest("body");
+        const listboxId = select.getAttribute("aria-controls");
+        const listbox = body.querySelector(`#${listboxId}`);
+        const options = listbox.querySelectorAll("[role=option]");
+        // Allow searching for options by their data-key (value) or textContent (label)
+        const optionToSelect = Array.from(options).find((o) => o.dataset.key === optionValue || o.dataset.label === optionValue);
+        if (!optionToSelect) {
+            throw new Error(`Could not find option with value or text content of ${optionValue}`);
+        }
+        (0, rtl_utils_1.click)(optionToSelect);
+    }
+    const optionValues = Array.isArray(value) ? value : [value];
+    optionValues.forEach((optionValue) => {
+        maybeOpenAndSelect(optionValue);
+    });
+}
+exports.select = select;
+function selectAndWait(input, value) {
+    return (0, rtl_utils_1.allowAndWaitForAsyncBehavior)(() => select(input, value));
+}
+exports.selectAndWait = selectAndWait;
+function getSelected(element) {
+    var _a;
+    const select = resolveIfNeeded(element);
+    if (isSelectElement(select)) {
+        throw new Error("Beam getSelected helper does not support <select> elements");
+    }
+    if (!isInputElement(select) && select.dataset.readonly === "true") {
+        // For read-only fields that render as a 'div'
+        return (_a = select.textContent) !== null && _a !== void 0 ? _a : undefined;
+    }
+    const expanded = select.getAttribute("aria-expanded") === "true";
+    if (!expanded) {
+        (0, rtl_utils_1.click)(select);
+    }
+    const body = select.closest("body");
+    const listboxId = select.getAttribute("aria-controls");
+    const listbox = body.querySelector(`#${listboxId}`);
+    const options = listbox.querySelectorAll("[role=option]");
+    const selections = Array.from(options)
+        .filter((o) => o.getAttribute("aria-selected") === "true")
+        .map((o) => { var _a, _b; return (_b = (_a = o.dataset.label) !== null && _a !== void 0 ? _a : o.dataset.key) !== null && _b !== void 0 ? _b : ""; })
+        // Filter out empty strings
+        .filter((o) => !!o);
+    return selections.length > 0 ? (selections.length > 1 ? selections : selections[0]) : undefined;
+}
+exports.getSelected = getSelected;
+function getOptions(element) {
+    const select = resolveIfNeeded(element);
+    if (isSelectElement(select)) {
+        throw new Error("Beam getOptions helper does not support <select> elements");
+    }
+    if (!isInputElement(select)) {
+        throw new Error(`Expected element to be INPUT, but got ${select.nodeName}. This field may be read-only. In that case we cannot get the list of options`);
+    }
+    const expanded = select.getAttribute("aria-expanded") === "true";
+    if (!expanded) {
+        (0, rtl_utils_1.click)(select);
+    }
+    const body = select.closest("body");
+    const listboxId = select.getAttribute("aria-controls");
+    const listbox = body.querySelector(`#${listboxId}`);
+    const options = listbox.querySelectorAll("[role=option]");
+    return Array.from(options)
+        .map((o) => { var _a, _b; return (_b = (_a = o.dataset.label) !== null && _a !== void 0 ? _a : o.dataset.key) !== null && _b !== void 0 ? _b : ""; })
+        .filter((o) => !!o);
+}
+exports.getOptions = getOptions;
+function resolveIfNeeded(element) {
+    const maybeProxy = element;
+    return maybeProxy instanceof Function ? maybeProxy() : element;
+}
+function isSelectElement(element) {
+    return element.nodeName === "SELECT";
+}
+function isInputElement(element) {
+    return element.nodeName === "INPUT";
+}

package/package.json

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

package/dist/inputs/MultiSelectField.mock.d.ts

@@ -1,3 +0,0 @@
-import { MultiSelectFieldProps, Value } from "./";
-/** Mocks out `MultiSelectField` as a multiple `<select>` field. */
-export declare function MultiSelectField<T, V extends Value>(props: MultiSelectFieldProps<T, V>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/MultiSelectField.mock.js

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultiSelectField = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const utils_1 = require("../utils");
-const defaultTestId_1 = require("../utils/defaultTestId");
-/** Mocks out `MultiSelectField` as a multiple `<select>` field. */
-function MultiSelectField(props) {
-    const { getOptionValue = (o) => o.id, // if unset, assume O implements HasId
-    getOptionLabel = (o) => o.name, // if unset, assume O implements HasName
-    values, options, onSelect, readOnly = false, errorMsg, onFocus, onBlur, disabled, label, disabledOptions = [], helperText, } = props;
-    const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
-    return ((0, jsx_runtime_1.jsxs)("label", { ...tid.label, children: [label, (0, jsx_runtime_1.jsxs)("select", { ...tid, 
-                // We're cheating and assume the values are strings...what we should really do is either:
-                // a) use beam's valueToKey mapping to string-encode any Value, or
-                // b) instead of using `values` directly, use the index of each value's `option` in `options`
-                value: values, onChange: (e) => {
-                    var _a, _b, _c;
-                    const { target } = e;
-                    const selectedValues = [...values];
-                    for (let i = 0; i < target.selectedOptions.length; i++) {
-                        if (selectedValues.includes((_a = target.selectedOptions.item(i)) === null || _a === void 0 ? void 0 : _a.value)) {
-                            // deSelect if already selected
-                            selectedValues.splice(selectedValues.indexOf((_b = target.selectedOptions.item(i)) === null || _b === void 0 ? void 0 : _b.value), 1);
-                        }
-                        else {
-                            // add value
-                            selectedValues.push((_c = target.selectedOptions.item(i)) === null || _c === void 0 ? void 0 : _c.value);
-                        }
-                    }
-                    const selectedOptions = options.filter((o) => selectedValues.includes(getOptionValue(o)));
-                    onSelect(selectedOptions.map((o) => getOptionValue(o)), selectedOptions);
-                }, multiple: true, onFocus: () => {
-                    if (!readOnly && onFocus)
-                        onFocus();
-                }, onBlur: () => {
-                    if (!readOnly && onBlur)
-                        onBlur();
-                }, 
-                // Read Only does not apply to `select` fields, instead we'll add in disabled for tests to verify.
-                disabled: !!(readOnly || disabled), "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));
-                    })] }), helperText && (0, jsx_runtime_1.jsx)("div", { ...tid.helperText, children: helperText })] }));
-}
-exports.MultiSelectField = MultiSelectField;

package/dist/inputs/SelectField.mock.d.ts

@@ -1,4 +0,0 @@
-import { Key } from "react";
-import { SelectFieldProps } from "./";
-/** Mocks out `SelectField` as a `<select>` field. */
-export declare function SelectField<O extends object, V extends Key>(props: SelectFieldProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/SelectField.mock.js

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectField = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
-const utils_1 = require("../utils");
-const defaultTestId_1 = require("../utils/defaultTestId");
-/** Mocks out `SelectField` as a `<select>` field. */
-function SelectField(props) {
-    const { getOptionValue = (o) => o.id, // if unset, assume O implements HasId
-    getOptionLabel = (o) => o.name, // if unset, assume O implements HasName
-    value, options: maybeOptions, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, disabledOptions = [], label, helperText, } = props;
-    const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
-    const [options, setOptions] = (0, react_1.useState)(Array.isArray(maybeOptions) ? maybeOptions : maybeOptions.initial);
-    const currentOption = options.find((o) => getOptionValue(o) === value) || options[0];
-    (0, react_1.useEffect)(() => {
-        if (Array.isArray(maybeOptions) && maybeOptions !== options) {
-            setOptions(maybeOptions);
-        }
-    }, [maybeOptions]);
-    return ((0, jsx_runtime_1.jsxs)("label", { ...tid.label, children: [label, (0, jsx_runtime_1.jsxs)("select", { ...tid, value: 
-                // @ts-ignore - allow `value` to be seen as a string
-                value !== undefined && value !== "" && currentOption ? getOptionValue(currentOption) : "", onChange: (e) => {
-                    const option = options.find((o) => `${getOptionValue(o)}` === e.target.value) || options[0];
-                    onSelect(getOptionValue(option), option);
-                }, onFocus: async () => {
-                    if (!Array.isArray(maybeOptions)) {
-                        const result = await maybeOptions.load();
-                        setOptions(result.options);
-                    }
-                    if (!readOnly && onFocus)
-                        onFocus();
-                }, onBlur: () => {
-                    if (!readOnly && onBlur)
-                        onBlur();
-                }, 
-                // 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.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;