@homebound/beam 2.362.1 → 2.363.0

package/dist/components/Modal/TestModalContent.d.ts

@@ -4,6 +4,7 @@ export interface TestModalContentProps {
     withTag?: boolean;
     withDateField?: boolean;
     withTextArea?: boolean;
+    withTextField?: boolean;
 }
 /** A fake modal content component that we share across the modal and superdrawer stories. */
 export declare function TestModalContent(props: TestModalContentProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Modal/TestModalContent.js

@@ -24,7 +24,7 @@ function TestModalContent(props) {
     const [date, setDate] = (0, react_1.useState)(formStateDomain_1.jan1);
     const [internalValue, setValue] = (0, react_1.useState)("");
     const { triggerNotice } = (0, Snackbar_1.useSnackbar)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: props.withTag ? ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.aic.$, children: [(0, jsx_runtime_1.jsx)("span", { children: "Modal Title with Tag" }), (0, jsx_runtime_1.jsx)(Tag_1.Tag, { text: "In progress", type: "info", xss: Css_1.Css.ml1.$ })] })) : props.withTextArea ? ((0, jsx_runtime_1.jsx)(inputs_1.TextAreaField, { label: "Title", placeholder: "Test title", value: internalValue, onChange: (v) => setValue(v), preventNewLines: true, labelStyle: "hidden", borderless: true, xss: Css_1.Css.xl.$ })) : ("The title of the modal that might wrap") }), (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.fdc.aifs.$, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "More", onClick: () => setNumSentences(numSentences + 2) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: () => setNumSentences(0) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Primary", onClick: () => setPrimaryDisabled(!primaryDisabled) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Trigger Snackbar", onClick: () => triggerNotice({ message: "Snackbar message" }) }), showLeftAction && ((0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Left Action", onClick: () => setLeftActionDisabled(!leftActionDisabled) }))] }), (0, jsx_runtime_1.jsx)("p", { children: "The body content of the modal. This content can be anything!".repeat(numSentences) })] }), withDateField && (0, jsx_runtime_1.jsx)(inputs_1.DateField, { value: date, label: "Date", onChange: setDate })] }), (0, jsx_runtime_1.jsxs)(Modal_1.ModalFooter, { xss: showLeftAction ? Css_1.Css.jcsb.$ : undefined, children: [showLeftAction && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: (0, addon_actions_1.action)("Clear Action"), variant: "tertiary", disabled: leftActionDisabled }) })), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", onClick: closeModal, variant: "tertiary" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Apply", onClick: (0, addon_actions_1.action)("Primary action"), disabled: primaryDisabled })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: props.withTag ? ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.aic.$, children: [(0, jsx_runtime_1.jsx)("span", { children: "Modal Title with Tag" }), (0, jsx_runtime_1.jsx)(Tag_1.Tag, { text: "In progress", type: "info", xss: Css_1.Css.ml1.$ })] })) : props.withTextField ? ((0, jsx_runtime_1.jsx)(inputs_1.TextField, { label: "Title", placeholder: "Test title", value: internalValue, onChange: (v) => setValue(v), labelStyle: "hidden", onEscapeBubble: true, borderless: true, xss: Css_1.Css.xl.$ })) : props.withTextArea ? ((0, jsx_runtime_1.jsx)(inputs_1.TextAreaField, { label: "Title", placeholder: "Test title", value: internalValue, onChange: (v) => setValue(v), preventNewLines: true, labelStyle: "hidden", borderless: true, xss: Css_1.Css.xl.$ })) : ("The title of the modal that might wrap") }), (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.fdc.aifs.$, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "More", onClick: () => setNumSentences(numSentences + 2) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: () => setNumSentences(0) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Primary", onClick: () => setPrimaryDisabled(!primaryDisabled) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Trigger Snackbar", onClick: () => triggerNotice({ message: "Snackbar message" }) }), showLeftAction && ((0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Left Action", onClick: () => setLeftActionDisabled(!leftActionDisabled) }))] }), (0, jsx_runtime_1.jsx)("p", { children: "The body content of the modal. This content can be anything!".repeat(numSentences) })] }), withDateField && (0, jsx_runtime_1.jsx)(inputs_1.DateField, { value: date, label: "Date", onChange: setDate })] }), (0, jsx_runtime_1.jsxs)(Modal_1.ModalFooter, { xss: showLeftAction ? Css_1.Css.jcsb.$ : undefined, children: [showLeftAction && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: (0, addon_actions_1.action)("Clear Action"), variant: "tertiary", disabled: leftActionDisabled }) })), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", onClick: closeModal, variant: "tertiary" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Apply", onClick: (0, addon_actions_1.action)("Primary action"), disabled: primaryDisabled })] })] })] }));
 }
 exports.TestModalContent = TestModalContent;
 function TestModalFilterTable() {

package/dist/inputs/TextField.d.ts

@@ -6,6 +6,16 @@ export interface TextFieldProps<X> extends BeamTextFieldProps<X> {
     clearable?: boolean;
     api?: MutableRefObject<TextFieldApi | undefined>;
     onEnter?: VoidFunction;
+    /**
+     * Allows a TextField to opt-in to bubbling up the escape key event to its parent.
+     *
+     * Usually this is a bad idea, because escape-in-a-modal might lose the user's WIP (without
+     * sufficient "are you sure" checking), and so instead we let callers opt-in to this.
+     *
+     * Note that react-aria's `useSearchField` / `useComboBox` seems to have this built-in:
+     * https://github.com/adobe/react-spectrum/issues/5480
+     */
+    onEscapeBubble?: boolean;
     endAdornment?: ReactNode;
     startAdornment?: ReactNode;
     hideErrorMessage?: boolean;

package/dist/inputs/TextField.js

@@ -8,7 +8,7 @@ const components_1 = require("../components");
 const TextFieldBase_1 = require("./TextFieldBase");
 const utils_1 = require("../utils");
 function TextField(props) {
-    const { disabled = false, readOnly = false, required, errorMsg, value = "", onBlur, onFocus, api, onEnter, hideErrorMessage, ...otherProps } = props;
+    const { disabled = false, readOnly = false, required, errorMsg, value = "", onBlur, onFocus, api, onEnter, onEscapeBubble, hideErrorMessage, ...otherProps } = props;
     const isDisabled = !!disabled;
     const isReadOnly = !!readOnly;
     const textFieldProps = {
@@ -28,6 +28,10 @@ function TextField(props) {
                 (0, utils_1.maybeCall)(onEnter);
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
             }
+            else if (e.key === "Escape" && onEscapeBubble) {
+                // Allow closing modals from within text fields...
+                e.continuePropagation();
+            }
         },
     }, inputRef);
     // Construct our TextFieldApi to give access to some imperative methods

package/dist/inputs/TreeSelectField/TreeSelectField.js

@@ -42,7 +42,19 @@ function TreeSelectField(props) {
     const { getOptionValue = (opt) => opt.id, // if unset, assume O implements HasId
     getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
     options, onSelect, values, defaultCollapsed = false, ...otherProps } = props;
-    const [collapsedKeys, setCollapsedKeys] = (0, react_1.useState)(Array.isArray(options) && defaultCollapsed ? options.map((o) => getOptionValue(o)) : []);
+    const [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
@@ -84,14 +96,17 @@ function TreeSelectFieldBase(props) {
             // Find the options that matches the value. These could be parents or a children.
             const foundOptions = (0, utils_1.findOptions)(initialOptions, (0, Value_1.valueToKey)(v), getOptionValue);
             // Go through the `foundOptions` and get the keys of the options and its children if it has any.
-            return foundOptions.flatMap(({ option }) => {
-                var _a, _b;
-                return [
-                    (0, Value_1.valueToKey)(getOptionValue(option)),
-                    ...((_b = (_a = option.children) === null || _a === void 0 ? void 0 : _a.flatMap((o) => (0, Value_1.valueToKey)(getOptionValue(o)))) !== null && _b !== void 0 ? _b : []),
-                ];
-            });
+            return foundOptions.flatMap(({ option }) => selectOptionAndAllChildren(option));
         }));
+        function selectOptionAndAllChildren(maybeParent) {
+            var _a, _b;
+            // 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)),
+                ...((_b = (_a = maybeParent.children) === null || _a === void 0 ? void 0 : _a.flatMap(selectOptionAndAllChildren)) !== null && _b !== void 0 ? _b : []),
+            ];
+        }
         // It is possible that all the children of a parent were considered selected `values`, but the parent wasn't included in the `values` array.
         // In this case, the parent also should be considered a selected option.
         function areAllChildrenSelected(maybeParent) {
@@ -146,17 +161,27 @@ function TreeSelectFieldBase(props) {
         getOptionLabel,
         isReadOnly,
         nothingSelectedText,
-        collapsedKeys,
         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 (values &&
-            (values.length !== selectedKeys.length || !values.every((v) => selectedKeys.includes((0, Value_1.valueToKey)(v))))) {
+        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
@@ -218,7 +243,7 @@ function TreeSelectFieldBase(props) {
             setFieldState((prevState) => ({
                 ...prevState,
                 inputValue: "",
-                filteredOptions: initialOptions.flatMap((o) => levelOptions(o, 0, false, collapsedKeys, getOptionValue)),
+                filteredOptions: prevState.allOptions.flatMap((o) => levelOptions(o, 0, false, collapsedKeys, getOptionValue)),
             }));
         }
     }
@@ -417,10 +442,10 @@ function TreeSelectFieldBase(props) {
         ...positionProps.style,
         width: (_c = comboBoxRef === null || comboBoxRef === void 0 ? void 0 : comboBoxRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth,
         // Ensures the menu never gets too small.
-        minWidth: 200,
+        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: 200, children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, { ...listBoxProps, positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, allowCollapsing: fieldState.allowCollapsing, isTree: true }) }))] }));
+    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) {
     var _a;

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

@@ -7,6 +7,7 @@ type FoundOption<O> = {
 };
 export type NestedOption<O> = O & {
     children?: NestedOption<O>[];
+    defaultCollapsed?: boolean;
 };
 export type NestedOptionsOrLoad<O> = NestedOption<O>[] | {
     current: NestedOption<O>[];

package/package.json

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