@homebound/beam 2.321.0 → 2.322.0

package/dist/inputs/internal/ComboBoxBase.js

@@ -12,7 +12,6 @@ const Css_1 = require("../../Css");
 const ComboBoxInput_1 = require("./ComboBoxInput");
 const ListBox_1 = require("./ListBox");
 const Value_1 = require("../Value");
-const utils_1 = require("../../utils");
 /**
  * Provides a non-native select/dropdown widget that allows the user to type to filter the options.
  *
@@ -25,45 +24,49 @@ const utils_1 = require("../../utils");
 function ComboBoxBase(props) {
     var _a, _b, _c, _d;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const { disabled, readOnly, onSelect, options: propOptions, multiselect = false, values = [], nothingSelectedText = "", contrast, disabledOptions, borderless, unsetLabel, getOptionLabel: propOptionLabel, getOptionValue: propOptionValue, getOptionMenuLabel: propOptionMenuLabel, ...otherProps } = props;
+    const { disabled, readOnly, onSelect, options: propOptions, multiselect = false, values: propValues, nothingSelectedText = "", contrast, disabledOptions, borderless, unsetLabel, getOptionLabel: propOptionLabel, getOptionValue: propOptionValue, getOptionMenuLabel: propOptionMenuLabel, ...otherProps } = props;
     const labelStyle = (_b = (_a = otherProps.labelStyle) !== null && _a !== void 0 ? _a : fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelStyle) !== null && _b !== void 0 ? _b : "above";
     // Memoize the callback functions and handle the `unset` option if provided.
-    const getOptionLabel = (0, react_1.useCallback)((o) => (unsetLabel && o === exports.unsetOption ? unsetLabel : propOptionLabel(o)), [propOptionLabel, unsetLabel]);
-    const getOptionValue = (0, react_1.useCallback)((o) => (unsetLabel && o === exports.unsetOption ? undefined : propOptionValue(o)), [propOptionValue, unsetLabel]);
-    const getOptionMenuLabel = (0, react_1.useCallback)((o) => propOptionMenuLabel ? propOptionMenuLabel(o, Boolean(unsetLabel) && o === exports.unsetOption) : getOptionLabel(o), [propOptionMenuLabel, unsetLabel, getOptionLabel]);
+    const getOptionLabel = (0, react_1.useCallback)((o) => (unsetLabel && o === exports.unsetOption ? unsetLabel : 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 : 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) : 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), 
     // 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] : [propOptions.current, propOptions.options, unsetLabel]);
+    const values = (0, react_1.useMemo)(() => propValues !== null && propValues !== void 0 ? propValues : [], [propValues]);
+    const selectedOptions = (0, react_1.useMemo)(() => {
+        return 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)(() => {
-        var _a;
-        const selectedOptions = options.filter((o) => values.includes(getOptionValue(o)));
         return {
-            selectedKeys: (_a = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.map((o) => (0, Value_1.valueToKey)(getOptionValue(o)))) !== null && _a !== void 0 ? _a : [],
-            inputValue: getInputValue(options.filter((o) => values === null || values === void 0 ? void 0 : values.includes(getOptionValue(o))), getOptionLabel, multiselect, nothingSelectedText),
-            filteredOptions: options,
-            allOptions: options,
-            selectedOptions,
+            inputValue: getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText),
+            searchValue: undefined,
             optionsLoading: false,
         };
     });
+    const { searchValue } = fieldState;
+    const filteredOptions = (0, react_1.useMemo)(() => {
+        return !searchValue ? options : options.filter((o) => contains(getOptionLabel(o), searchValue));
+    }, [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() {
-        const inputValue = getInputValue(fieldState.allOptions.filter((o) => values === null || values === void 0 ? void 0 : values.includes(getOptionValue(o))), getOptionLabel, multiselect, nothingSelectedText);
-        // Conditionally reset the value if the current inputValue doesn't match that of the passed in value, or we filtered the list
-        if (inputValue !== fieldState.inputValue || fieldState.filteredOptions.length !== fieldState.allOptions.length) {
-            setFieldState((prevState) => ({
-                ...prevState,
-                inputValue,
-                filteredOptions: prevState.allOptions,
-            }));
-        }
+        setFieldState((prevState) => ({ ...prevState, searchValue: undefined }));
     }
     function onSelectionChange(keys) {
         // We don't currently handle the "all" case
@@ -76,30 +79,11 @@ function ComboBoxBase(props) {
         const selectionChanged = !(keys.size === state.selectionManager.selectedKeys.size &&
             [...keys].every((value) => state.selectionManager.selectedKeys.has(value)));
         if (multiselect && keys.size === 0) {
-            setFieldState({
-                ...fieldState,
-                inputValue: state.isOpen ? "" : nothingSelectedText,
-                selectedKeys: [],
-                selectedOptions: [],
-            });
             selectionChanged && onSelect([], []);
             return;
         }
         const selectedKeys = [...keys.values()];
-        const selectedOptions = fieldState.allOptions.filter((o) => selectedKeys.includes((0, Value_1.valueToKey)(getOptionValue(o))));
-        const firstSelectedOption = selectedOptions[0];
-        setFieldState((prevState) => ({
-            ...prevState,
-            // If menu is open then reset inputValue to "". Otherwise set inputValue depending on number of options selected.
-            inputValue: multiselect && (state.isOpen || selectedKeys.length > 1)
-                ? ""
-                : firstSelectedOption
-                    ? getOptionLabel(firstSelectedOption)
-                    : "",
-            selectedKeys,
-            selectedOptions,
-            filteredOptions: fieldState.allOptions,
-        }));
+        const selectedOptions = options.filter((o) => selectedKeys.includes((0, Value_1.valueToKey)(getOptionValue(o))));
         selectionChanged && onSelect(selectedKeys.map(Value_1.keyToValue), selectedOptions);
         if (!multiselect) {
             // Close menu upon selection change only for Single selection mode
@@ -108,11 +92,7 @@ function ComboBoxBase(props) {
     }
     function onInputChange(value) {
         if (value !== fieldState.inputValue) {
-            setFieldState((prevState) => ({
-                ...prevState,
-                inputValue: value,
-                filteredOptions: fieldState.allOptions.filter((o) => contains(getOptionLabel(o), value)),
-            }));
+            setFieldState((prevState) => ({ ...prevState, inputValue: value, searchValue: value }));
         }
     }
     async function maybeInitLoad() {
@@ -147,7 +127,7 @@ function ComboBoxBase(props) {
         ...otherProps,
         disabledKeys: Object.keys(disabledOptionsWithReasons),
         inputValue: fieldState.inputValue,
-        items: fieldState.filteredOptions,
+        items: filteredOptions,
         isDisabled,
         isReadOnly,
         onInputChange,
@@ -172,59 +152,34 @@ function ComboBoxBase(props) {
             }
         },
     });
+    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: fieldState.selectedKeys,
+        selectedKeys,
         onSelectionChange,
     });
-    // Ensure we reset if the field's values change and the user is not actively selecting options.
+    // Reset inputValue when closed or selected changes
     (0, react_1.useEffect)(() => {
-        if (!state.isOpen && !(0, utils_1.areArraysEqual)(values, fieldState.selectedKeys)) {
-            setFieldState((prevState) => {
-                var _a;
-                const selectedOptions = prevState.allOptions.filter((o) => values === null || values === void 0 ? void 0 : values.includes(getOptionValue(o)));
-                return {
-                    ...prevState,
-                    selectedKeys: (_a = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.map((o) => (0, Value_1.valueToKey)(getOptionValue(o)))) !== null && _a !== void 0 ? _a : [],
-                    inputValue: selectedOptions.length === 1
-                        ? getOptionLabel(selectedOptions[0])
-                        : multiselect && selectedOptions.length === 0
-                            ? nothingSelectedText
-                            : "",
-                    selectedOptions: selectedOptions,
-                };
-            });
+        if (state.isOpen && multiselect) {
+            // While the multiselect is open, let the user keep typing
+            setFieldState((prevState) => ({
+                ...prevState,
+                inputValue: "",
+                searchValue: "",
+            }));
         }
-    }, 
-    // 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
-    [values]);
-    // Re-sync fieldState.allOptions
-    (0, react_1.useEffect)(() => {
-        setFieldState((prevState) => {
-            var _a;
-            const selectedOptions = options.filter((o) => values === null || values === void 0 ? void 0 : values.includes(getOptionValue(o)));
-            return {
+        else {
+            setFieldState((prevState) => ({
                 ...prevState,
-                selectedKeys: (_a = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.map((o) => (0, Value_1.valueToKey)(getOptionValue(o)))) !== null && _a !== void 0 ? _a : [],
-                inputValue: selectedOptions.length === 1
-                    ? getOptionLabel(selectedOptions[0])
-                    : multiselect && selectedOptions.length === 0
-                        ? nothingSelectedText
-                        : "",
-                selectedOptions: selectedOptions,
-                filteredOptions: options,
-                allOptions: options,
-            };
-        });
-    }, 
-    // We're primarily only re-setting `allOptions`, and so recalc selected as well, but we don't
-    // want to depend on values/etc., b/c we'll defer to their useEffects to update their state
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [options]);
+                inputValue: getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText),
+            }));
+        }
+    }, [state.isOpen, selectedOptions, getOptionLabel, multiselect, nothingSelectedText]);
     // 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,
@@ -251,7 +206,7 @@ function ComboBoxBase(props) {
         // Ensures the menu never gets too small.
         minWidth: 200,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).if(labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(ComboBoxInput_1.ComboBoxInput, { ...otherProps, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, listBoxRef: listBoxRef, state: state, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, 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: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, disabledOptionsWithReasons: disabledOptionsWithReasons }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).if(labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(ComboBoxInput_1.ComboBoxInput, { ...otherProps, 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 }) }))] }));
 }
 exports.ComboBoxBase = ComboBoxBase;
 function getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText) {
@@ -298,6 +253,3 @@ function disabledOptionToKeyedTuple(disabledOption) {
     }
 }
 exports.disabledOptionToKeyedTuple = disabledOptionToKeyedTuple;
-function asArray(arrayOrElement) {
-    return Array.isArray(arrayOrElement) ? arrayOrElement : arrayOrElement ? [arrayOrElement] : [];
-}

package/dist/utils/rtl.d.ts

@@ -29,7 +29,7 @@ export declare function rowAnd(r: RenderResult, rowNum: number, testId: string):
       "
     `);
  * */
-export declare function tableSnapshot(r: RenderResult): string;
+export declare function tableSnapshot(r: RenderResult, columnNames?: string[]): string;
 /** RTL wrapper for Beam's SuperDrawer/Modal context. */
 export declare const withBeamRTL: Wrapper;
 /**

package/dist/utils/rtl.js

@@ -76,17 +76,30 @@ exports.rowAnd = rowAnd;
       "
     `);
  * */
-function tableSnapshot(r) {
+function tableSnapshot(r, columnNames = []) {
     const tableEl = r.getByTestId("gridTable");
     const dataRows = Array.from(tableEl.querySelectorAll("[data-gridrow]"));
     const hasExpandableHeader = !!tableEl.querySelector(`[data-testid="expandableColumn"]`);
-    const tableDataAsStrings = dataRows.map((row) => {
+    let tableDataAsStrings = dataRows.map((row) => {
         return Array.from(row.childNodes).map(getTextFromTableCellNode);
     });
-    return toMarkupTableString({ tableRows: tableDataAsStrings, hasExpandableHeader });
+    // If the user wants a subset of columns, look for column names
+    if (columnNames.length > 0) {
+        const headerCells = tableDataAsStrings[0];
+        if (headerCells) {
+            const columnIndices = columnNames.map((name) => {
+                const i = headerCells.indexOf(name);
+                if (i === -1)
+                    throw new Error(`Could not find header '${name}' in ${headerCells.join(", ")}`);
+                return i;
+            });
+            tableDataAsStrings = tableDataAsStrings.map((row) => columnIndices.map((index) => row[index]));
+        }
+    }
+    return toMarkupTableString(tableDataAsStrings, hasExpandableHeader);
 }
 exports.tableSnapshot = tableSnapshot;
-function toMarkupTableString({ tableRows, hasExpandableHeader, }) {
+function toMarkupTableString(tableRows, hasExpandableHeader) {
     // Find the largest width of each column to set a consistent width for each row
     const columnWidths = tableRows.reduce((acc, row) => {
         row.forEach((cell, columnIndex) => {

package/package.json

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