@homebound/beam 2.320.0 → 2.321.0

package/dist/components/Icon.d.ts

@@ -97,6 +97,7 @@ export declare const Icons: {
     file: import("@emotion/react/jsx-runtime").JSX.Element;
     images: import("@emotion/react/jsx-runtime").JSX.Element;
     openBook: import("@emotion/react/jsx-runtime").JSX.Element;
+    inbox: import("@emotion/react/jsx-runtime").JSX.Element;
     criticalPath: import("@emotion/react/jsx-runtime").JSX.Element;
     calendarError: import("@emotion/react/jsx-runtime").JSX.Element;
     nested: import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Icon.js

@@ -106,6 +106,7 @@ exports.Icons = {
     images: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M20 2H8C6.897 2 6 2.897 6 4V16C6 17.103 6.897 18 8 18H20C21.103 18 22 17.103 22 16V4C22 2.897 21.103 2 20 2ZM8 16V4H20L20.002 16H8Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M4 8H2V20C2 21.103 2.897 22 4 22H16V20H4V8Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 12L11 11L9 14H19L15 8L12 12Z" })] })),
     openBook: ((0, jsx_runtime_1.jsx)("path", { d: "M21 3H14C13.229 3 12.532 3.301 12 3.78C11.468 3.301 10.771 3 10 3H3C2.447 3 2 3.448 2 4V19C2 19.553 2.447 20 3 20H8.758C9.284 20 9.8 20.214 10.172 20.586L11.293 21.707C11.302 21.716 11.314 21.719 11.323 21.728C11.409 21.807 11.505 21.877 11.617 21.924C11.618 21.924 11.618 21.924 11.619 21.924C11.74 21.974 11.869 22 12 22C12.131 22 12.26 21.974 12.381 21.924C12.382 21.924 12.382 21.924 12.383 21.924C12.495 21.877 12.591 21.807 12.677 21.728C12.686 21.719 12.698 21.716 12.707 21.707L13.828 20.586C14.2 20.214 14.716 20 15.242 20H21C21.553 20 22 19.553 22 19V4C22 3.448 21.553 3 21 3ZM8.758 18H4V5H10C10.552 5 11 5.449 11 6V18.689C10.342 18.246 9.557 18 8.758 18ZM20 18H15.242C14.443 18 13.658 18.246 13 18.689V6C13 5.449 13.448 5 14 5H20V18Z" })),
     // Misc
+    inbox: ((0, jsx_runtime_1.jsx)("path", { d: "M20 3H4C2.897 3 2 3.897 2 5V13V14V19C2 20.104 2.896 21 4 21H20C21.104 21 22 20.104 22 19V14V13V5C22 3.897 21.103 3 20 3ZM19 12H16H15.858C15.412 13.722 13.861 15 12 15C10.139 15 8.588 13.722 8.142 12H8H4V5H20V12H19Z" })),
     criticalPath: ((0, jsx_runtime_1.jsx)("path", { d: "M6.5 20H14.844C15.2 20.753 15.636 21.422 16.093 22H6.5C4.019 22 2 19.981 2 17.5C2 15.019 4.019 13 6.5 13H13.5C14.327 13 15 12.327 15 11.5C15 10.673 14.327 10 13.5 10H7.285C7.771 9.443 8.248 8.771 8.639 8H13.5C15.43 8 17 9.57 17 11.5C17 13.43 15.43 15 13.5 15H6.5C5.121 15 4 16.121 4 17.5C4 18.879 5.121 20 6.5 20ZM2 5C2 3.346 3.346 2 5 2C6.654 2 8 3.346 8 5C8 8.187 5 10 5 10C5 10 2 8.188 2 5ZM3.5 5C3.5 5.828 4.172 6.5 5 6.5C5.828 6.5 6.5 5.828 6.5 5C6.5 4.172 5.828 3.5 5 3.5C4.172 3.5 3.5 4.172 3.5 5ZM16 17C16 15.346 17.346 14 19 14C20.654 14 22 15.346 22 17C22 20.187 19 22 19 22C19 22 16 20.188 16 17ZM17.5 17C17.5 17.828 18.172 18.5 19 18.5C19.828 18.5 20.5 17.828 20.5 17C20.5 16.172 19.828 15.5 19 15.5C18.172 15.5 17.5 16.172 17.5 17Z" })),
     calendarError: ((0, jsx_runtime_1.jsx)("path", { d: "M2.99902 8V6C2.99902 4.897 3.89602 4 4.99902 4H6.99902V2H8.99902V4H14.999V2H16.999V4H18.999C20.102 4 20.999 4.897 20.999 6V8V20C20.999 21.103 20.102 22 18.999 22H4.99902C3.89602 22 2.99902 21.103 2.99902 20V8ZM4.99902 20H19.001L18.999 7H4.99902V20ZM13 9H11V15H13V9ZM13 16H11V18H13V16Z" })),
     nested: (0, jsx_runtime_1.jsx)("path", { d: "M7 6.99994V16.3333L16.3333 16.3333V14.3333H9L9 6.99994H7Z" }),

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.321.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",