@homebound/beam 2.319.1 → 2.320.1

package/dist/components/Filters/SingleFilter.js

@@ -15,7 +15,7 @@ class SingleFilter extends BaseFilter_1.BaseFilter {
         const { label, defaultValue, options: maybeOptions, getOptionLabel, getOptionValue, nothingSelectedText, ...props } = this.props;
         const options = Array.isArray(maybeOptions)
             ? [allOption, ...maybeOptions]
-            : { ...maybeOptions, initial: [allOption, ...maybeOptions.initial] };
+            : { ...maybeOptions, current: maybeOptions.current };
         return ((0, jsx_runtime_1.jsx)(SelectField_1.SelectField, { ...props, options: options, getOptionValue: (o) => (o === allOption ? undefined : getOptionValue(o)), getOptionLabel: (o) => (o === allOption ? nothingSelectedText !== null && nothingSelectedText !== void 0 ? nothingSelectedText : "All" : getOptionLabel(o)), compact: !vertical, value: value, label: this.label, labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above", sizeToContent: !inModal && !vertical, nothingSelectedText: nothingSelectedText !== null && nothingSelectedText !== void 0 ? nothingSelectedText : "All", onSelect: (value) => setValue(value || undefined), ...this.testId(tid) }));
     }
 }

package/dist/inputs/SelectField.js

@@ -2,12 +2,14 @@
 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 ComboBoxBase_1 = require("./internal/ComboBoxBase");
 function SelectField(props) {
     const { getOptionValue = (opt) => opt.id, // if unset, assume O implements HasId
     getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
     options, onSelect, value, ...otherProps } = props;
-    return ((0, jsx_runtime_1.jsx)(ComboBoxBase_1.ComboBoxBase, { ...otherProps, options: options, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, values: [value], onSelect: (values, options) => {
+    const values = (0, react_1.useMemo)(() => [value], [value]);
+    return ((0, jsx_runtime_1.jsx)(ComboBoxBase_1.ComboBoxBase, { ...otherProps, options: options, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, values: values, onSelect: (values, options) => {
             // If the user used `unsetLabel`, then values will be `[undefined]` and options `[unsetOption]`
             if (values.length > 0 && options.length > 0) {
                 const option = options[0];

package/dist/inputs/TreeSelectField/TreeSelectField.js

@@ -64,7 +64,7 @@ function TreeSelectFieldBase(props) {
     const { values, options, getOptionValue, getOptionLabel, getOptionMenuLabel = getOptionLabel, disabled, readOnly, labelStyle, borderless, contrast = false, nothingSelectedText = "", onSelect, defaultCollapsed = false, placeholder, ...otherProps } = props;
     const isDisabled = !!disabled;
     const isReadOnly = !!readOnly;
-    const initialOptions = Array.isArray(options) ? options : options.initial;
+    const initialOptions = Array.isArray(options) ? options : options.current;
     const { contains } = (0, react_aria_1.useFilter)({ sensitivity: "base" });
     const { collapsedKeys } = useTreeSelectFieldProvider();
     function levelOptions(o, level, filtering) {

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

@@ -9,7 +9,7 @@ export type NestedOption<O> = O & {
     children?: NestedOption<O>[];
 };
 export type NestedOptionsOrLoad<O> = NestedOption<O>[] | {
-    initial: NestedOption<O>[];
+    current: NestedOption<O>[];
     load: () => Promise<{
         options: NestedOption<O>[];
     }>;

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

@@ -2,6 +2,7 @@ import React, { ReactNode } from "react";
 import { PresentationFieldProps } from "../../components/PresentationContext";
 import { Value } from "../Value";
 import { BeamFocusableProps } from "../../interfaces";
+/** Base props for either `SelectField` or `MultiSelectField`. */
 export interface ComboBoxBaseProps<O, V extends Value> extends BeamFocusableProps, PresentationFieldProps {
     /** Renders `opt` in the dropdown menu, defaults to the `getOptionLabel` prop. `isUnsetOpt` is only defined for single SelectField */
     getOptionMenuLabel?: (opt: O, isUnsetOpt?: boolean) => string | ReactNode;
@@ -62,13 +63,18 @@ export interface ComboBoxBaseProps<O, V extends Value> extends BeamFocusableProp
  * and so we cannot easily change them.
  */
 export declare function ComboBoxBase<O, V extends Value>(props: ComboBoxBaseProps<O, V>): JSX.Element;
+/** Allows lazy-loading select fields, which is useful for pages w/lots of fields the user may not actually use. */
 export type OptionsOrLoad<O> = O[] | {
-    initial: O[];
-    load: () => Promise<{
-        options: O[];
-    }>;
+    /** The initial option to show before the user interacts with the dropdown. */
+    current: O | undefined;
+    /** Fired when the user interacts with the dropdown, to load the real options. */
+    load: () => Promise<unknown>;
+    /** 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 | {
     value: Value;

package/dist/inputs/internal/ComboBoxBase.js

@@ -25,38 +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, ...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 : props.getOptionLabel(o)), 
-    // 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
-    [props.getOptionLabel, unsetLabel]);
-    const getOptionValue = (0, react_1.useCallback)((o) => (unsetLabel && o === exports.unsetOption ? undefined : props.getOptionValue(o)), 
-    // 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
-    [props.getOptionValue, unsetLabel]);
-    const getOptionMenuLabel = (0, react_1.useCallback)((o) => props.getOptionMenuLabel
-        ? props.getOptionMenuLabel(o, Boolean(unsetLabel) && o === exports.unsetOption)
-        : getOptionLabel(o), 
-    // 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
+    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
-    [props.getOptionValue, unsetLabel, getOptionLabel]);
+    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 : maybeOptions.initial;
-        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,
         };
     });
@@ -123,17 +116,10 @@ function ComboBoxBase(props) {
         }
     }
     async function maybeInitLoad() {
-        if (!Array.isArray(maybeOptions)) {
+        if (!Array.isArray(propOptions)) {
             setFieldState((prevState) => ({ ...prevState, optionsLoading: true }));
-            const loadedOptions = (await maybeOptions.load()).options;
-            // Ensure the `unset` option is prepended to the top of the list if `unsetLabel` was provided
-            const options = !unsetLabel ? loadedOptions : getOptionsWithUnset(unsetLabel, loadedOptions);
-            setFieldState((prevState) => ({
-                ...prevState,
-                filteredOptions: options,
-                allOptions: options,
-                optionsLoading: false,
-            }));
+            await propOptions.load();
+            setFieldState((prevState) => ({ ...prevState, optionsLoading: false }));
         }
     }
     const firstOpen = (0, react_1.useRef)(true);
@@ -216,37 +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]);
+    // Re-sync fieldState.allOptions
     (0, react_1.useEffect)(() => {
-        // 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.allOptions
-                : maybeOptions.initial;
-        if (maybeUpdatedOptions !== fieldState.allOptions) {
-            setFieldState((prevState) => {
-                var _a;
-                const selectedOptions = maybeUpdatedOptions.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: maybeUpdatedOptions,
-                    allOptions: maybeUpdatedOptions,
-                };
-            });
-        }
+        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,
+            };
+        });
     }, 
-    // 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
+    // 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
-    [maybeOptions]);
+    [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,
@@ -283,19 +261,33 @@ 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, initial: getOptionsWithUnset(unsetLabel, options.initial) };
+    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];
-}
+/** A marker option to automatically add an "Unset" option to the start of options. */
 exports.unsetOption = {};
 function disabledOptionToKeyedTuple(disabledOption) {
     if (typeof disabledOption === "object" && disabledOption !== null) {
@@ -306,3 +298,6 @@ function disabledOptionToKeyedTuple(disabledOption) {
     }
 }
 exports.disabledOptionToKeyedTuple = disabledOptionToKeyedTuple;
+function asArray(arrayOrElement) {
+    return Array.isArray(arrayOrElement) ? arrayOrElement : arrayOrElement ? [arrayOrElement] : [];
+}

package/package.json

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