@homebound/beam 2.320.0 → 2.320.1

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

@@ -72,7 +72,8 @@ export type OptionsOrLoad<O> = O[] | {
     /** The full list of options, after load() has been fired. */
     options: O[] | undefined;
 };
-export declare function initializeOptions<O>(options: OptionsOrLoad<O>, unsetLabel: string | undefined): OptionsOrLoad<O>;
+/** Transforms/simplifies `optionsOrLoad` into just options, with unsetLabel maybe added. */
+export declare function initializeOptions<O, V extends Value>(optionsOrLoad: OptionsOrLoad<O>, getOptionValue: (opt: O) => V, unsetLabel: string | undefined): O[];
 /** A marker option to automatically add an "Unset" option to the start of options. */
 export declare const unsetOption: {};
 export declare function disabledOptionToKeyedTuple(disabledOption: Value | {

package/dist/inputs/internal/ComboBoxBase.js

@@ -25,27 +25,31 @@ const utils_1 = require("../../utils");
 function ComboBoxBase(props) {
     var _a, _b, _c, _d;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const { disabled, readOnly, onSelect, options, 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 = [], 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";
-    // Call `initializeOptions` to prepend the `unset` option if the `unsetLabel` was provided.
-    const maybeOptions = (0, react_1.useMemo)(() => initializeOptions(options, unsetLabel), [options, unsetLabel]);
     // 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]);
+    // 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 { 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 initOptions = Array.isArray(maybeOptions) ? maybeOptions : asArray(maybeOptions.current);
-        const selectedOptions = initOptions.filter((o) => values.includes(getOptionValue(o)));
+        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(initOptions.filter((o) => values === null || values === void 0 ? void 0 : values.includes(getOptionValue(o))), getOptionLabel, multiselect, nothingSelectedText),
-            filteredOptions: initOptions,
-            allOptions: initOptions,
-            selectedOptions: selectedOptions,
+            inputValue: getInputValue(options.filter((o) => values === null || values === void 0 ? void 0 : values.includes(getOptionValue(o))), getOptionLabel, multiselect, nothingSelectedText),
+            filteredOptions: options,
+            allOptions: options,
+            selectedOptions,
             optionsLoading: false,
         };
     });
@@ -112,9 +116,9 @@ function ComboBoxBase(props) {
         }
     }
     async function maybeInitLoad() {
-        if (!Array.isArray(maybeOptions)) {
+        if (!Array.isArray(propOptions)) {
             setFieldState((prevState) => ({ ...prevState, optionsLoading: true }));
-            await maybeOptions.load();
+            await propOptions.load();
             setFieldState((prevState) => ({ ...prevState, optionsLoading: false }));
         }
     }
@@ -198,41 +202,29 @@ function ComboBoxBase(props) {
     // 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]);
-    // When options are an array, then use them as-is.
-    // If options are an object, then use the `initial` array if the menu has not been opened
-    // Otherwise, use the current fieldState array options.
-    const maybeUpdatedOptions = Array.isArray(maybeOptions)
-        ? maybeOptions
-        : firstOpen.current === false && !fieldState.optionsLoading
-            ? maybeOptions.options
-            : maybeOptions.current;
+    // Re-sync fieldState.allOptions
     (0, react_1.useEffect)(() => {
-        // We leave `maybeOptions.initial` as a non-array so that it's stable, but now that we're inside the
-        // useEffect, array-ize it if needed.
-        const maybeUpdatedArray = asArray(maybeUpdatedOptions);
-        if (maybeUpdatedArray !== fieldState.allOptions) {
-            setFieldState((prevState) => {
-                var _a;
-                const selectedOptions = maybeUpdatedArray.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,
-                    filteredOptions: maybeUpdatedArray,
-                    allOptions: maybeUpdatedArray,
-                };
-            });
-        }
+        setFieldState((prevState) => {
+            var _a;
+            const selectedOptions = options.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,
+                filteredOptions: options,
+                allOptions: options,
+            };
+        });
     }, 
-    // I started working on fixing this deps array, but seems like `getOptionLabel` & friends
-    // would very rarely be stable anyway, so going to hold off on further fixes for now...
+    // 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
-    [maybeUpdatedOptions, getOptionLabel, getOptionValue]);
+    [options]);
     // 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,
@@ -269,19 +261,32 @@ function getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSele
             ? nothingSelectedText
             : "";
 }
-function initializeOptions(options, unsetLabel) {
-    if (!unsetLabel) {
-        return options;
+/** Transforms/simplifies `optionsOrLoad` into just options, with unsetLabel maybe added. */
+function initializeOptions(optionsOrLoad, getOptionValue, unsetLabel) {
+    const opts = [];
+    if (unsetLabel) {
+        opts.push(exports.unsetOption);
     }
-    if (Array.isArray(options)) {
-        return getOptionsWithUnset(unsetLabel, options);
+    if (Array.isArray(optionsOrLoad)) {
+        opts.push(...optionsOrLoad);
     }
-    return { ...options, options: getOptionsWithUnset(unsetLabel, options.options) };
+    else {
+        const { options, current } = optionsOrLoad;
+        if (options) {
+            opts.push(...options);
+        }
+        // Even if the SelectField has lazy-loaded options, make sure the current value is really in there
+        if (current) {
+            const value = getOptionValue(current);
+            const found = options && options.find((o) => getOptionValue(o) === value);
+            if (!found) {
+                opts.push(current);
+            }
+        }
+    }
+    return opts;
 }
 exports.initializeOptions = initializeOptions;
-function getOptionsWithUnset(unsetLabel, options) {
-    return [exports.unsetOption, ...(options ? options : [])];
-}
 /** A marker option to automatically add an "Unset" option to the start of options. */
 exports.unsetOption = {};
 function disabledOptionToKeyedTuple(disabledOption) {

package/package.json

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