@homebound/beam 2.365.1 → 2.366.0

package/dist/inputs/MultiSelectField.d.ts

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

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

@@ -5,7 +5,7 @@ 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;
+    getOptionMenuLabel?: (opt: O, isUnsetOpt?: boolean, isAddNewOption?: boolean) => string | ReactNode;
     getOptionValue: (opt: O) => V;
     getOptionLabel: (opt: O) => string;
     /** The current value; it can be `undefined`, even if `V` cannot be. */
@@ -53,6 +53,7 @@ export interface ComboBoxBaseProps<O, V extends Value> extends BeamFocusableProp
     hideErrorMessage?: boolean;
     multiline?: boolean;
     onSearch?: (search: string) => void;
+    onAddNew?: (v: string) => void;
 }
 /**
  * Provides a non-native select/dropdown widget that allows the user to type to filter the options.
@@ -74,9 +75,13 @@ export type OptionsOrLoad<O> = O[] | {
     options: O[] | undefined;
 };
 /** 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[];
+export declare function initializeOptions<O, V extends Value>(optionsOrLoad: OptionsOrLoad<O>, getOptionValue: (opt: O) => V, unsetLabel: string | undefined, addNew: boolean): O[];
 /** A marker option to automatically add an "Unset" option to the start of options. */
 export declare const unsetOption: {};
+export declare const addNewOption: {
+    id: string;
+    name: string;
+};
 export declare function disabledOptionToKeyedTuple(disabledOption: Value | {
     value: Value;
     reason: string;

package/dist/inputs/internal/ComboBoxBase.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.disabledOptionToKeyedTuple = exports.unsetOption = exports.initializeOptions = exports.ComboBoxBase = void 0;
+exports.disabledOptionToKeyedTuple = exports.addNewOption = exports.unsetOption = exports.initializeOptions = exports.ComboBoxBase = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
@@ -30,27 +30,39 @@ const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 function ComboBoxBase(props) {
     var _a, _b, _c, _d, _e;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const { disabled, readOnly, onSelect, options: propOptions, multiselect = false, values: propValues, nothingSelectedText = "", contrast, disabledOptions, borderless, unsetLabel, getOptionLabel: propOptionLabel, getOptionValue: propOptionValue, getOptionMenuLabel: propOptionMenuLabel, fullWidth = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.fullWidth) !== null && _a !== void 0 ? _a : false, onSearch, ...otherProps } = props;
+    const { disabled, readOnly, onSelect, options: propOptions, multiselect = false, values: propValues, nothingSelectedText = "", contrast, disabledOptions, borderless, unsetLabel, getOptionLabel: propOptionLabel, getOptionValue: propOptionValue, getOptionMenuLabel: propOptionMenuLabel, fullWidth = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.fullWidth) !== null && _a !== void 0 ? _a : false, onSearch, onAddNew, ...otherProps } = props;
     const labelStyle = (_c = (_b = otherProps.labelStyle) !== null && _b !== void 0 ? _b : fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelStyle) !== null && _c !== void 0 ? _c : "above";
     // 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)), 
+    const getOptionLabel = (0, react_1.useCallback)((o) => unsetLabel && o === exports.unsetOption
+        ? unsetLabel
+        : onAddNew && o === exports.addNewOption
+            ? exports.addNewOption.name
+            : propOptionLabel(o), 
     // propOptionLabel is basically always a lambda, so don't dep on it
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [unsetLabel]);
-    const getOptionValue = (0, react_1.useCallback)((o) => (unsetLabel && o === exports.unsetOption ? undefined : propOptionValue(o)), 
+    const getOptionValue = (0, react_1.useCallback)((o) => unsetLabel && o === exports.unsetOption
+        ? undefined
+        : onAddNew && o === exports.addNewOption
+            ? exports.addNewOption.id
+            : propOptionValue(o), 
     // propOptionValue is basically always a lambda, so don't dep on it
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [unsetLabel]);
-    const getOptionMenuLabel = (0, react_1.useCallback)((o) => propOptionMenuLabel ? propOptionMenuLabel(o, Boolean(unsetLabel) && o === exports.unsetOption) : getOptionLabel(o), 
+    const getOptionMenuLabel = (0, react_1.useCallback)((o) => propOptionMenuLabel
+        ? propOptionMenuLabel(o, Boolean(unsetLabel) && o === exports.unsetOption, Boolean(onAddNew) && o === exports.addNewOption)
+        : getOptionLabel(o), 
     // propOptionMenuLabel is basically always a lambda, so don't dep on it
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [unsetLabel, getOptionLabel]);
     // Call `initializeOptions` to prepend the `unset` option if the `unsetLabel` was provided.
-    const options = (0, react_1.useMemo)(() => initializeOptions(propOptions, getOptionValue, unsetLabel), 
+    const options = (0, react_1.useMemo)(() => initializeOptions(propOptions, getOptionValue, unsetLabel, !!onAddNew), 
     // 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]);
+    Array.isArray(propOptions)
+        ? [propOptions, unsetLabel, onAddNew]
+        : [propOptions.current, propOptions.options, unsetLabel, onAddNew]);
     const values = (0, react_1.useMemo)(() => propValues !== null && propValues !== void 0 ? propValues : [], [propValues]);
     const selectedOptionsRef = (0, react_1.useRef)(options.filter((o) => values.includes(getOptionValue(o))));
     const selectedOptions = (0, react_1.useMemo)(() => {
@@ -77,7 +89,9 @@ function ComboBoxBase(props) {
     });
     const { searchValue } = fieldState;
     const filteredOptions = (0, react_1.useMemo)(() => {
-        return !searchValue ? options : options.filter((o) => contains(getOptionLabel(o), searchValue));
+        return !searchValue
+            ? options
+            : options.filter((o) => contains(getOptionLabel(o), searchValue) || o === exports.addNewOption);
     }, [options, searchValue, getOptionLabel, contains]);
     /** Resets field's input value and filtered options list for cases where the user exits the field without making changes (on Escape, or onBlur) */
     function resetField() {
@@ -99,6 +113,11 @@ function ComboBoxBase(props) {
         }
         const selectedKeys = [...keys.values()];
         const selectedOptions = options.filter((o) => selectedKeys.includes((0, Value_1.valueToKey)(getOptionValue(o))));
+        if (!multiselect && selectedOptions[0] === exports.addNewOption && onAddNew) {
+            onAddNew(fieldState.inputValue);
+            state.close();
+            return;
+        }
         selectionChanged && onSelect(selectedKeys.map(Value_1.keyToValue), selectedOptions);
         if (!multiselect) {
             // Close menu upon selection change only for Single selection mode
@@ -243,7 +262,7 @@ function getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSele
                 : "";
 }
 /** Transforms/simplifies `optionsOrLoad` into just options, with unsetLabel maybe added. */
-function initializeOptions(optionsOrLoad, getOptionValue, unsetLabel) {
+function initializeOptions(optionsOrLoad, getOptionValue, unsetLabel, addNew) {
     const opts = [];
     if (unsetLabel) {
         opts.push(exports.unsetOption);
@@ -268,11 +287,15 @@ function initializeOptions(optionsOrLoad, getOptionValue, unsetLabel) {
             });
         }
     }
+    if (addNew) {
+        opts.push(exports.addNewOption);
+    }
     return opts;
 }
 exports.initializeOptions = initializeOptions;
 /** A marker option to automatically add an "Unset" option to the start of options. */
 exports.unsetOption = {};
+exports.addNewOption = { id: "new", name: "Add New" };
 function disabledOptionToKeyedTuple(disabledOption) {
     if (typeof disabledOption === "object" && disabledOption !== null) {
         return [(0, Value_1.valueToKey)(disabledOption.value), disabledOption.reason];

package/package.json

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