@homebound/beam 2.232.0 → 2.233.0

package/dist/forms/BoundMultiLineSelectField.d.ts

@@ -0,0 +1,13 @@
+import { FieldState } from "@homebound/form-state";
+import { MultiLineSelectFieldProps, Value } from "../inputs";
+import { HasIdAndName, Optional } from "../types";
+export type BoundMultiLineSelectFieldProps<O, V extends Value> = Omit<MultiLineSelectFieldProps<O, V>, "values" | "onSelect" | "label"> & {
+    onSelect?: (values: V[], opts: O[]) => void;
+    field: FieldState<any, V[] | null | undefined>;
+    label?: string;
+};
+/**
+ * Wraps `MultiLineSelectField` and binds it to a form field.
+ */
+export declare function BoundMultiLineSelectField<O, V extends Value>(props: BoundMultiLineSelectFieldProps<O, V>): JSX.Element;
+export declare function BoundMultiLineSelectField<O extends HasIdAndName<V>, V extends Value>(props: Optional<BoundMultiLineSelectFieldProps<O, V>, "getOptionLabel" | "getOptionValue">): JSX.Element;

package/dist/forms/BoundMultiLineSelectField.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoundMultiLineSelectField = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_1 = require("mobx-react");
+const inputs_1 = require("../inputs");
+const utils_1 = require("../utils");
+const defaultLabel_1 = require("../utils/defaultLabel");
+const useTestIds_1 = require("../utils/useTestIds");
+function BoundMultiLineSelectField(props) {
+    const { field, options, readOnly, getOptionValue = (opt) => opt.id, // if unset, assume O implements HasId
+    getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
+    onSelect = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, ...others } = props;
+    const testId = (0, useTestIds_1.useTestIds)(props, field.key);
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
+            var _a;
+            return ((0, jsx_runtime_1.jsx)(inputs_1.MultiLineSelectField, { label: label, values: (_a = field.value) !== null && _a !== void 0 ? _a : [], onSelect: (values, options) => {
+                    onSelect(values, options);
+                    field.maybeAutoSave();
+                }, options: options, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, onBlur: () => {
+                    field.blur();
+                    (0, utils_1.maybeCall)(onBlur);
+                }, onFocus: () => {
+                    field.focus();
+                    (0, utils_1.maybeCall)(onFocus);
+                }, ...others, ...testId }));
+        } }));
+}
+exports.BoundMultiLineSelectField = BoundMultiLineSelectField;

package/dist/forms/index.d.ts

@@ -3,6 +3,7 @@ export * from "./BoundCheckboxGroupField";
 export * from "./BoundChipSelectField";
 export * from "./BoundDateField";
 export * from "./BoundDateRangeField";
+export * from "./BoundMultiLineSelectField";
 export * from "./BoundMultiSelectField";
 export * from "./BoundNumberField";
 export * from "./BoundRadioGroupField";

package/dist/forms/index.js

@@ -19,6 +19,7 @@ __exportStar(require("./BoundCheckboxGroupField"), exports);
 __exportStar(require("./BoundChipSelectField"), exports);
 __exportStar(require("./BoundDateField"), exports);
 __exportStar(require("./BoundDateRangeField"), exports);
+__exportStar(require("./BoundMultiLineSelectField"), exports);
 __exportStar(require("./BoundMultiSelectField"), exports);
 __exportStar(require("./BoundNumberField"), exports);
 __exportStar(require("./BoundRadioGroupField"), exports);

package/dist/inputs/MultiLineSelectField.d.ts

@@ -0,0 +1,11 @@
+import { Value } from "./";
+import { BeamSelectFieldBaseProps } from "./internal/SelectFieldBase";
+import { Optional } from "../types";
+export interface MultiLineSelectFieldProps<O, V extends Value> extends Exclude<BeamSelectFieldBaseProps<O, V>, "unsetLabel"> {
+    values: V[];
+    options: O[];
+    getOptionValue: (opt: O) => V;
+    getOptionLabel: (opt: O) => string;
+    onSelect: (values: V[], opts: O[]) => void;
+}
+export declare function MultiLineSelectField<O, V extends Value>(props: Optional<MultiLineSelectFieldProps<O, V>, "getOptionLabel" | "getOptionValue">): JSX.Element;

package/dist/inputs/MultiLineSelectField.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiLineSelectField = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../components/Button");
+const Label_1 = require("../components/Label");
+const inputs_1 = require("./");
+const __1 = require("..");
+function MultiLineSelectField(props) {
+    const { options, values, onSelect, getOptionValue = (opt) => opt.id, getOptionLabel = (opt) => opt.name, labelStyle, ...otherProps } = props;
+    const tid = (0, __1.useTestIds)(props, "");
+    const [isDisplayed, setIsDisplayed] = (0, react_1.useState)(true);
+    // Set the available options by filtering already selected options
+    const currentOptions = options.filter((o) => !values.includes(getOptionValue(o)));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: __1.Css.mt1.if(labelStyle === "left").df.$, children: [labelStyle !== "hidden" && ((0, jsx_runtime_1.jsx)("div", { css: __1.Css.if(labelStyle === "left").w50.$, children: (0, jsx_runtime_1.jsx)(Label_1.Label, { ...tid.label, label: props.label }) })), (0, jsx_runtime_1.jsxs)("div", { css: __1.Css.if(labelStyle === "left").w50.$, children: [values.map((value, index) => {
+                        return ((0, jsx_runtime_1.jsxs)("div", { css: __1.Css.mb1.pl1.df.$, children: [(0, jsx_runtime_1.jsx)("div", { css: __1.Css.truncate.w100.$, children: (0, jsx_runtime_1.jsx)(inputs_1.SelectField, { ...otherProps, ...tid.selectField, labelStyle: "hidden", value: value, onSelect: () => { }, options: options, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, compact: true, readOnly: true }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...tid.deleteSelected, variant: "tertiary", label: "", "aria-label": `Delete selected ${otherProps.label}`, icon: "x", onClick: () => {
+                                        const selectedOptions = options.filter((o) => values.includes(getOptionValue(o)) && getOptionValue(o) !== value);
+                                        const selectedValues = selectedOptions.map((o) => getOptionValue(o));
+                                        onSelect(selectedValues, selectedOptions);
+                                        // Display the input field if there are no selected values
+                                        if (selectedOptions.length === 0)
+                                            setIsDisplayed(true);
+                                    } })] }, index));
+                    }), isDisplayed && ((0, jsx_runtime_1.jsx)("div", { css: __1.Css.mb1.$, children: (0, jsx_runtime_1.jsx)(inputs_1.SelectField, { ...tid.selectField, label: otherProps.label, labelStyle: "hidden", getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, value: "", onSelect: (value) => {
+                                onSelect([...values, value], options);
+                                setIsDisplayed(false);
+                            }, options: currentOptions, disabled: otherProps.disabled }) })), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...tid.addAnother, label: "Add Another", variant: "tertiary", onClick: () => setIsDisplayed(true), disabled: isDisplayed || currentOptions.length === 0 })] })] }));
+}
+exports.MultiLineSelectField = MultiLineSelectField;

package/dist/inputs/index.d.ts

@@ -2,6 +2,7 @@ export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./ChipSelectField";
 export * from "./DateFields";
+export * from "./MultiLineSelectField";
 export * from "./MultiSelectField";
 export * from "./NumberField";
 export type { NumberFieldProps } from "./NumberField";

package/dist/inputs/index.js

@@ -19,6 +19,7 @@ __exportStar(require("./Checkbox"), exports);
 __exportStar(require("./CheckboxGroup"), exports);
 __exportStar(require("./ChipSelectField"), exports);
 __exportStar(require("./DateFields"), exports);
+__exportStar(require("./MultiLineSelectField"), exports);
 __exportStar(require("./MultiSelectField"), exports);
 __exportStar(require("./NumberField"), exports);
 var RadioGroupField_1 = require("./RadioGroupField");

package/package.json

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