@homebound/beam 2.135.2 → 2.136.0

package/dist/components/Filters/Filters.js

@@ -29,7 +29,7 @@ function Filters(props) {
         return [Object.fromEntries(impls), {}];
     }, [numberOfPageFilters, filterDefs]);
     const numModalFilters = (0, utils_1.safeKeys)(modalFilters).filter((fk) => filter[fk] !== undefined).length;
-    const maybeGroupByField = groupBy ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SelectField_1.SelectField, { label: "Group by", compact: !vertical, inlineLabel: !vertical, sizeToContent: !vertical, options: groupBy.options, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name, value: groupBy.value, onSelect: (g) => groupBy.setValue(g) }, void 0) }, void 0)) : null;
+    const maybeGroupByField = groupBy ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SelectField_1.SelectField, { label: "Group by", compact: !vertical, inlineLabel: !vertical, sizeToContent: !vertical, options: groupBy.options, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name, value: groupBy.value, onSelect: (g) => g && groupBy.setValue(g) }, void 0) }, void 0)) : null;
     // Return list of filter components. `onSelect` should update the `filter`
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
             ...(vertical ? Css_1.Css.df.fdc.childGap2.$ : Css_1.Css.df.aic.childGap1.$),

package/dist/inputs/MultiSelectField.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 import { Value } from "./";
 import { BeamSelectFieldBaseProps } from "./internal/SelectFieldBase";
 import { HasIdAndName, Optional } from "../types";
-export interface MultiSelectFieldProps<O, V extends Value> extends BeamSelectFieldBaseProps<O, V> {
+export interface MultiSelectFieldProps<O, V extends Value> extends Exclude<BeamSelectFieldBaseProps<O, V>, "unsetLabel"> {
     /** Renders `opt` in the dropdown menu, defaults to the `getOptionLabel` prop. */
     getOptionMenuLabel?: (opt: O) => string | ReactNode;
     getOptionValue: (opt: O) => V;

package/dist/inputs/SelectField.d.ts

@@ -4,7 +4,7 @@ import { HasIdAndName, Optional } from "../types";
 export interface SelectFieldProps<O, V extends Value> extends Omit<BeamSelectFieldBaseProps<O, V>, "values" | "onSelect"> {
     /** The current value; it can be `undefined`, even if `V` cannot be. */
     value: V | undefined;
-    onSelect: (value: V, opt: O) => void;
+    onSelect: (value: V | undefined, opt: O | undefined) => void;
 }
 /**
  * Provides a non-native select/dropdown widget.

package/dist/inputs/SelectField.js

@@ -9,7 +9,8 @@ function SelectField(props) {
     options, onSelect, value, ...otherProps } = props;
     return ((0, jsx_runtime_1.jsx)(SelectFieldBase_1.SelectFieldBase, Object.assign({}, otherProps, { options: options, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, values: [value], onSelect: (values, options) => {
             if (values.length > 0 && options.length > 0) {
-                onSelect && onSelect(values[0], options[0]);
+                const option = options[0];
+                onSelect(values[0], option === SelectFieldBase_1.unsetOption ? undefined : option);
             }
         } }), void 0));
 }

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

@@ -3,8 +3,8 @@ import { PresentationFieldProps } from "../../components/PresentationContext";
 import { Value } from "../Value";
 import { BeamFocusableProps } from "../../interfaces";
 export interface BeamSelectFieldBaseProps<O, V extends Value> extends BeamFocusableProps, PresentationFieldProps {
-    /** Renders `opt` in the dropdown menu, defaults to the `getOptionLabel` prop. */
-    getOptionMenuLabel?: (opt: O) => string | ReactNode;
+    /** 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;
     getOptionValue: (opt: O) => V;
     getOptionLabel: (opt: O) => string;
     /** The current value; it can be `undefined`, even if `V` cannot be. */
@@ -12,12 +12,7 @@ export interface BeamSelectFieldBaseProps<O, V extends Value> extends BeamFocusa
     onSelect: (values: V[], opts: O[]) => void;
     multiselect?: boolean;
     disabledOptions?: V[];
-    options: O[] | {
-        initial: O[];
-        load: () => Promise<{
-            options: O[];
-        }>;
-    };
+    options: OptionsOrLoad<O>;
     /** Whether the field is disabled. If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip. */
     disabled?: boolean | ReactNode;
     required?: boolean;
@@ -39,6 +34,8 @@ export interface BeamSelectFieldBaseProps<O, V extends Value> extends BeamFocusa
     contrast?: boolean;
     /** Placeholder content */
     placeholder?: string;
+    /** Only used for Single Select Fields. If set, prepends an option with a `undefined` value at the top of the list */
+    unsetLabel?: string;
 }
 /**
  * Provides a non-native select/dropdown widget.
@@ -50,3 +47,12 @@ export interface BeamSelectFieldBaseProps<O, V extends Value> extends BeamFocusa
  * and so we cannot easily change them.
  */
 export declare function SelectFieldBase<O, V extends Value>(props: BeamSelectFieldBaseProps<O, V>): JSX.Element;
+declare type OptionsOrLoad<O> = O[] | {
+    initial: O[];
+    load: () => Promise<{
+        options: O[];
+    }>;
+};
+export declare function initializeOptions<O>(options: OptionsOrLoad<O>, unsetLabel: string | undefined): OptionsOrLoad<O>;
+export declare const unsetOption: {};
+export {};

package/dist/inputs/internal/SelectFieldBase.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectFieldBase = void 0;
+exports.unsetOption = exports.initializeOptions = exports.SelectFieldBase = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
@@ -23,7 +23,15 @@ const utils_1 = require("../../utils");
  */
 function SelectFieldBase(props) {
     var _a;
-    const { disabled, readOnly, onSelect, options: maybeOptions, multiselect = false, getOptionLabel, getOptionValue, getOptionMenuLabel = getOptionLabel, values = [], nothingSelectedText = "", contrast, disabledOptions, borderless, ...otherProps } = props;
+    const { disabled, readOnly, onSelect, options, multiselect = false, values = [], nothingSelectedText = "", contrast, disabledOptions, borderless, unsetLabel, ...otherProps } = props;
+    // 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)), [props.getOptionLabel, unsetLabel]);
+    const getOptionValue = (0, react_1.useCallback)((o) => (unsetLabel && o === exports.unsetOption ? undefined : props.getOptionValue(o)), [props.getOptionValue, unsetLabel]);
+    const getOptionMenuLabel = (0, react_1.useCallback)((o) => props.getOptionMenuLabel
+        ? props.getOptionMenuLabel(o, Boolean(unsetLabel) && o === exports.unsetOption)
+        : getOptionLabel(o), [props.getOptionValue, unsetLabel, getOptionLabel]);
     const { contains } = (0, react_aria_1.useFilter)({ sensitivity: "base" });
     const isDisabled = !!disabled;
     const isReadOnly = !!readOnly;
@@ -105,7 +113,9 @@ function SelectFieldBase(props) {
     async function maybeInitLoad() {
         if (!Array.isArray(maybeOptions)) {
             setFieldState((prevState) => ({ ...prevState, optionsLoading: true }));
-            const { options } = await maybeOptions.load();
+            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,
@@ -245,3 +255,17 @@ function getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSele
             ? nothingSelectedText
             : "";
 }
+function initializeOptions(options, unsetLabel) {
+    if (!unsetLabel) {
+        return options;
+    }
+    if (Array.isArray(options)) {
+        return getOptionsWithUnset(unsetLabel, options);
+    }
+    return { ...options, initial: getOptionsWithUnset(unsetLabel, options.initial) };
+}
+exports.initializeOptions = initializeOptions;
+function getOptionsWithUnset(unsetLabel, options) {
+    return [exports.unsetOption, ...options];
+}
+exports.unsetOption = {};

package/package.json

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