@homebound/beam 2.319.0 → 2.320.0

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/components/ScrollShadows.js

@@ -20,7 +20,7 @@ function ScrollShadows(props) {
     // The shadow styles will rarely every change. Memoize them to avoid recomputing them when we don't have to.
     const [startShadowStyles, endShadowStyles] = (0, react_1.useMemo)(() => {
         const transparentBgColor = bgColor.replace(/,1\)$/, ",0)");
-        const commonStyles = src_1.Css.absolute.z3.$;
+        const commonStyles = src_1.Css.absolute.z3.add({ pointerEvents: "none" }).$;
         const startShadowStyles = !horizontal ? src_1.Css.top0.left0.right0.hPx(40).$ : src_1.Css.left0.top0.bottom0.wPx(25).$;
         const endShadowStyles = !horizontal ? src_1.Css.bottom0.left0.right0.hPx(40).$ : src_1.Css.right0.top0.bottom0.wPx(25).$;
         const startGradient = `linear-gradient(${!horizontal ? 180 : 90}deg, ${bgColor} 0%, ${transparentBgColor} 92%);`;

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,17 @@ 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>;
+/** 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,31 +25,20 @@ 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, 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
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [props.getOptionValue, unsetLabel, getOptionLabel]);
+    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 { contains } = (0, react_aria_1.useFilter)({ sensitivity: "base" });
     const isDisabled = !!disabled;
     const isReadOnly = !!readOnly;
     const [fieldState, setFieldState] = (0, react_1.useState)(() => {
         var _a;
-        const initOptions = Array.isArray(maybeOptions) ? maybeOptions : maybeOptions.initial;
+        const initOptions = Array.isArray(maybeOptions) ? maybeOptions : asArray(maybeOptions.current);
         const selectedOptions = initOptions.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 : [],
@@ -125,15 +114,8 @@ function ComboBoxBase(props) {
     async function maybeInitLoad() {
         if (!Array.isArray(maybeOptions)) {
             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 maybeOptions.load();
+            setFieldState((prevState) => ({ ...prevState, optionsLoading: false }));
         }
     }
     const firstOpen = (0, react_1.useRef)(true);
@@ -216,19 +198,22 @@ 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;
     (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) {
+        // 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 = maybeUpdatedOptions.filter((o) => values === null || values === void 0 ? void 0 : values.includes(getOptionValue(o)));
+                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 : [],
@@ -238,15 +223,16 @@ function ComboBoxBase(props) {
                             ? nothingSelectedText
                             : "",
                     selectedOptions: selectedOptions,
-                    filteredOptions: maybeUpdatedOptions,
-                    allOptions: maybeUpdatedOptions,
+                    filteredOptions: maybeUpdatedArray,
+                    allOptions: maybeUpdatedArray,
                 };
             });
         }
     }, 
-    // 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
+    // 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...
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [maybeOptions]);
+    [maybeUpdatedOptions, getOptionLabel, getOptionValue]);
     // 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,
@@ -290,12 +276,13 @@ function initializeOptions(options, unsetLabel) {
     if (Array.isArray(options)) {
         return getOptionsWithUnset(unsetLabel, options);
     }
-    return { ...options, initial: getOptionsWithUnset(unsetLabel, options.initial) };
+    return { ...options, options: getOptionsWithUnset(unsetLabel, options.options) };
 }
 exports.initializeOptions = initializeOptions;
 function getOptionsWithUnset(unsetLabel, options) {
-    return [exports.unsetOption, ...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) {
     if (typeof disabledOption === "object" && disabledOption !== null) {
@@ -306,3 +293,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.0",
+  "version": "2.320.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",