@homebound/beam 2.78.2 → 2.79.2

package/dist/components/BeamContext.d.ts

@@ -1,7 +1,7 @@
 import { MutableRefObject, ReactNode } from "react";
 import { ModalProps } from "./Modal/Modal";
 import { ContentStack } from "./SuperDrawer/useSuperDrawer";
-import { CheckFn } from "../types";
+import { CanCloseCheck, CheckFn } from "../types";
 /** The internal state of our Beam context; see useModal and useSuperDrawer for the public APIs. */
 export interface BeamContextState {
     modalState: MutableRefObject<ModalProps | undefined>;
@@ -15,9 +15,9 @@ export interface BeamContextState {
     /** SuperDrawer contentStack, i.e. the main/non-detail content + 0-N detail contents. */
     drawerContentStack: MutableRefObject<readonly ContentStack[]>;
     /** Checks when closing SuperDrawer, for the main/non-detail drawer content. */
-    drawerCanCloseChecks: MutableRefObject<CheckFn[]>;
+    drawerCanCloseChecks: MutableRefObject<CanCloseCheck[]>;
     /** Checks when closing SuperDrawer Details, a double array to keep per-detail lists. */
-    drawerCanCloseDetailsChecks: MutableRefObject<CheckFn[][]>;
+    drawerCanCloseDetailsChecks: MutableRefObject<CanCloseCheck[][]>;
     /** The ref for defining the portal element's location for Tab actions */
     tabActionsRef: MutableRefObject<HTMLDivElement | null>;
     /** The div for Tab actions to portal into */

package/dist/components/Filters/DateFilter.d.ts

@@ -0,0 +1,15 @@
+import { Key } from "react";
+import { Filter } from "./types";
+import { Value } from "../../inputs";
+export declare type DateFilterProps<O, V extends Value, DV extends DateFilterValue<V>> = {
+    label: string;
+    operations: O[];
+    getOperationValue: (o: O) => V;
+    getOperationLabel: (o: O) => string;
+    defaultValue?: DV;
+};
+export declare type DateFilterValue<V extends Value> = {
+    op: V;
+    value: Date;
+};
+export declare function dateFilter<O, V extends Key>(props: DateFilterProps<O, V, DateFilterValue<V>>): (key: string) => Filter<DateFilterValue<V>>;

package/dist/components/Filters/DateFilter.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dateFilter = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const BaseFilter_1 = require("./BaseFilter");
+const Label_1 = require("../Label");
+const Css_1 = require("../../Css");
+const inputs_1 = require("../../inputs");
+const defaultTestId_1 = require("../../utils/defaultTestId");
+function dateFilter(props) {
+    return (key) => new DateFilter(key, props);
+}
+exports.dateFilter = dateFilter;
+// Custom option that allows for not selecting an operation
+const anyOption = {};
+class DateFilter extends BaseFilter_1.BaseFilter {
+    render(value, setValue, tid, inModal, vertical) {
+        const { label, operations, getOperationValue, getOperationLabel } = this.props;
+        const [focusedEl, setFocusedEl] = (0, react_1.useState)();
+        const commonStyles = Css_1.Css.df.aic.fs1.maxwPx(550).bt.bb.bGray300.$;
+        // TODO: Maybe make a `CompoundField` component, which could handle the `display: flex` and any sizing requirements per field and focus states.
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [vertical && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({}, this.testId(tid), { css: Css_1.Css.df.$ }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+                                ...commonStyles,
+                                ...Css_1.Css.bl.borderRadius("4px 0 0 4px").if(focusedEl === "op").bLightBlue700.$,
+                            } }, { children: (0, jsx_runtime_1.jsx)(inputs_1.SelectField, Object.assign({ compact: true, borderless: true, sizeToContent: true, options: [
+                                    // Always show the 'Any' option
+                                    anyOption,
+                                    ...operations,
+                                ], getOptionValue: (o) => (o === anyOption ? undefined : getOperationValue(o)), getOptionLabel: (o) => (o === anyOption ? "Any" : getOperationLabel(o)), value: value === null || value === void 0 ? void 0 : value.op, onSelect: (op) => 
+                                // default the selected date to today if it doesn't exist in the filter's value
+                                setValue(op ? { op, value: (value === null || value === void 0 ? void 0 : value.value) ? new Date(value.value) : new Date() } : undefined), label: inModal ? `${label} date filter operation` : label, inlineLabel: !inModal && !vertical, hideLabel: inModal || vertical, nothingSelectedText: "Any" }, tid[`${(0, defaultTestId_1.defaultTestId)(this.label)}_dateOperation`], { onFocus: () => setFocusedEl("op"), onBlur: () => setFocusedEl(undefined) }), void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(1).flexNone.bgGray300.if(focusedEl !== undefined).bgLightBlue700.$ }, void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+                                ...commonStyles,
+                                ...Css_1.Css.fg1.br.borderRadius("0 4px 4px 0").if(focusedEl === "date").bLightBlue700.$,
+                            } }, { children: (0, jsx_runtime_1.jsx)(inputs_1.DateField, Object.assign({ borderless: true, compact: true, inlineLabel: true, value: (value === null || value === void 0 ? void 0 : value.value) ? new Date(value.value) : new Date(), label: "Date", onChange: (d) => setValue({ ...value, value: d }), disabled: !value }, tid[`${(0, defaultTestId_1.defaultTestId)(this.label)}_dateField`], { onFocus: () => setFocusedEl("date"), onBlur: () => setFocusedEl(undefined) }), void 0) }), void 0)] }), void 0)] }, void 0));
+    }
+}

package/dist/components/Filters/MultiFilter.d.ts

@@ -2,7 +2,8 @@ import { Key } from "react";
 import { Filter } from "./types";
 import { MultiSelectFieldProps } from "../../inputs/MultiSelectField";
 import { Value } from "../../inputs/Value";
-export declare type MultiFilterProps<O, V extends Value> = Omit<MultiSelectFieldProps<O, V>, "values" | "onSelect"> & {
+export declare type MultiFilterProps<O, V extends Value> = Omit<MultiSelectFieldProps<O, V>, "values" | "onSelect" | "label"> & {
     defaultValue?: V[];
+    label?: string;
 };
 export declare function multiFilter<O, V extends Key>(props: MultiFilterProps<O, V>): (key: string) => Filter<V[]>;

package/dist/components/Filters/SingleFilter.d.ts

@@ -2,7 +2,8 @@ import { Key } from "react";
 import { Filter } from "./types";
 import { SelectFieldProps } from "../../inputs/SelectField";
 import { Value } from "../../inputs/Value";
-export declare type SingleFilterProps<O, V extends Value> = Omit<SelectFieldProps<O, V>, "value" | "onSelect"> & {
+export declare type SingleFilterProps<O, V extends Value> = Omit<SelectFieldProps<O, V>, "value" | "onSelect" | "label"> & {
     defaultValue?: V;
+    label?: string;
 };
 export declare function singleFilter<O, V extends Key>(props: SingleFilterProps<O, V>): (key: string) => Filter<V>;

package/dist/components/Filters/index.d.ts

@@ -1,3 +1,5 @@
+export { dateFilter } from "./DateFilter";
+export type { DateFilterValue } from "./DateFilter";
 export { multiFilter } from "./MultiFilter";
 export { singleFilter } from "./SingleFilter";
 export { booleanFilter } from "./BooleanFilter";

package/dist/components/Filters/index.js

@@ -10,7 +10,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toggleFilter = exports.booleanFilter = exports.singleFilter = exports.multiFilter = void 0;
+exports.toggleFilter = exports.booleanFilter = exports.singleFilter = exports.multiFilter = exports.dateFilter = void 0;
+var DateFilter_1 = require("./DateFilter");
+Object.defineProperty(exports, "dateFilter", { enumerable: true, get: function () { return DateFilter_1.dateFilter; } });
 var MultiFilter_1 = require("./MultiFilter");
 Object.defineProperty(exports, "multiFilter", { enumerable: true, get: function () { return MultiFilter_1.multiFilter; } });
 var SingleFilter_1 = require("./SingleFilter");

package/dist/components/Filters/testDomain.d.ts

@@ -1,3 +1,4 @@
+import { DateFilterValue } from "./DateFilter";
 import { FilterDefs } from "./types";
 export declare enum Stage {
     StageOne = "ONE",
@@ -35,8 +36,11 @@ export declare type ProjectFilter = {
     status?: string[] | null;
     isTest?: boolean | null;
     doNotUse?: boolean | null;
+    date?: DateFilterValue<string>;
 };
 export declare type StageFilter = NonNullable<FilterDefs<ProjectFilter>["stage"]>;
 export declare type StageSingleFilter = NonNullable<FilterDefs<ProjectFilter>["stageSingle"]>;
+export declare type DateFilter = NonNullable<FilterDefs<ProjectFilter>["date"]>;
 export declare const stageFilter: StageFilter;
 export declare const stageSingleFilter: StageSingleFilter;
+export declare const taskDueFilter: DateFilter;

package/dist/components/Filters/testDomain.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.stageSingleFilter = exports.stageFilter = exports.Stage = void 0;
+exports.taskDueFilter = exports.stageSingleFilter = exports.stageFilter = exports.Stage = void 0;
+const DateFilter_1 = require("./DateFilter");
 const MultiFilter_1 = require("./MultiFilter");
 const SingleFilter_1 = require("./SingleFilter");
 var Stage;
@@ -22,3 +23,13 @@ exports.stageSingleFilter = (0, SingleFilter_1.singleFilter)({
     getOptionValue: (s) => s.code,
     getOptionLabel: (s) => s.name,
 });
+exports.taskDueFilter = (0, DateFilter_1.dateFilter)({
+    operations: [
+        { label: "On", value: "ON" },
+        { label: "Before", value: "BEFORE" },
+        { label: "After", value: "AFTER" },
+    ],
+    label: "Task Due",
+    getOperationLabel: (o) => o.label,
+    getOperationValue: (o) => o.value,
+});

package/dist/components/Label.d.ts

@@ -9,5 +9,5 @@ interface LabelProps {
 /** An internal helper component for rendering form labels. */
 export declare function Label(props: LabelProps): import("@emotion/react/jsx-runtime").JSX.Element;
 /** Used for showing labels within text fields. */
-export declare function InlineLabel({ labelProps, label, ...others }: LabelProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function InlineLabel({ labelProps, label, contrast, ...others }: LabelProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Label.js

@@ -12,7 +12,7 @@ function Label(props) {
 }
 exports.Label = Label;
 /** Used for showing labels within text fields. */
-function InlineLabel({ labelProps, label, ...others }) {
+function InlineLabel({ labelProps, label, contrast, ...others }) {
     return ((0, jsx_runtime_1.jsxs)("label", Object.assign({}, labelProps, others, { css: Css_1.Css.smEm.nowrap.gray900.prPx(4).add("color", "currentColor").$ }, { children: [label, ":"] }), void 0));
 }
 exports.InlineLabel = InlineLabel;

package/dist/components/SuperDrawer/ConfirmCloseModal.d.ts

@@ -1,6 +1,8 @@
 interface ConfirmCloseModalProps {
     onClose: () => void;
+    discardText?: string;
+    continueText?: string;
 }
 /** Modal content to appear when a close checks fails */
-export declare function ConfirmCloseModal({ onClose }: ConfirmCloseModalProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ConfirmCloseModal(props: ConfirmCloseModalProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SuperDrawer/ConfirmCloseModal.js

@@ -5,7 +5,8 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const src_1 = require("../..");
 const BeamContext_1 = require("../BeamContext");
 /** Modal content to appear when a close checks fails */
-function ConfirmCloseModal({ onClose }) {
+function ConfirmCloseModal(props) {
+    const { onClose, discardText = "Discard Changes", continueText = "Continue Editing" } = props;
     const { modalState } = (0, BeamContext_1.useBeamContext)();
     // TODO: Change to closeModal from useModal when canCloseChecks are reset
     function closeModal() {
@@ -13,10 +14,10 @@ function ConfirmCloseModal({ onClose }) {
         // after a close and could/will cause other close attempts to fail.
         modalState.current = undefined;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(src_1.ModalHeader, { children: "Confirm" }, void 0), (0, jsx_runtime_1.jsx)(src_1.ModalBody, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: src_1.Css.tc.wPx(400).$ }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ css: src_1.Css.lgEm.gray900.mb2.$ }, { children: "Are you sure you want to cancel without saving your changes?" }), void 0), (0, jsx_runtime_1.jsx)("p", Object.assign({ css: src_1.Css.base.gray700.$ }, { children: "Any changes you've made so far will be lost." }), void 0)] }), void 0) }, void 0), (0, jsx_runtime_1.jsxs)(src_1.ModalFooter, { children: [(0, jsx_runtime_1.jsx)(src_1.Button, { variant: "tertiary", label: "Cancel", onClick: closeModal }, void 0), (0, jsx_runtime_1.jsx)(src_1.Button, { label: "Close", onClick: () => {
-                            // The order of these calls doesn't really matter; close this modal and tell the call to do their close
-                            onClose();
-                            closeModal();
-                        } }, void 0)] }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(src_1.ModalHeader, { children: "Confirm" }, void 0), (0, jsx_runtime_1.jsx)(src_1.ModalBody, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: src_1.Css.tc.wPx(400).$ }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ css: src_1.Css.lgEm.gray900.mb2.$ }, { children: "Are you sure you want to cancel?" }), void 0), (0, jsx_runtime_1.jsx)("p", Object.assign({ css: src_1.Css.base.gray700.$ }, { children: "Any data you've entered so far will be lost." }), void 0)] }), void 0) }, void 0), (0, jsx_runtime_1.jsx)(src_1.ModalFooter, Object.assign({ xss: src_1.Css.jcc.$ }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: src_1.Css.df.fdc.childGap1.aic.$ }, { children: [(0, jsx_runtime_1.jsx)(src_1.Button, { label: continueText, onClick: closeModal }, void 0), (0, jsx_runtime_1.jsx)(src_1.Button, { variant: "tertiary", label: discardText, onClick: () => {
+                                // The order of these calls doesn't really matter; close this modal and tell the call to do their close
+                                onClose();
+                                closeModal();
+                            } }, void 0)] }), void 0) }), void 0)] }, void 0));
 }
 exports.ConfirmCloseModal = ConfirmCloseModal;

package/dist/components/SuperDrawer/useSuperDrawer.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { CanCloseCheck } from "../../types";
 export interface OpenInDrawerOpts {
     /** Title of the SuperDrawer */
     title: string;
@@ -44,13 +45,13 @@ export interface UseSuperDrawerHook {
      * false, a confirmation modal will appear allowing the user to confirm
      * the action.
      */
-    addCanCloseDrawerCheck: (canCloseCheck: () => boolean) => void;
+    addCanCloseDrawerCheck: (canCloseCheck: CanCloseCheck) => void;
     /**
      * Adds a check when attempting to close a SuperDrawer detail by clicking the
      * "back" button or calling `closeDrawerDetail()`. If any checks returns
      * false, a confirmation modal will appear allowing the user to confirm
      * the action.
      */
-    addCanCloseDrawerDetailCheck: (canCloseCheck: () => boolean) => void;
+    addCanCloseDrawerDetailCheck: (canCloseCheck: CanCloseCheck) => void;
 }
 export declare function useSuperDrawer(): UseSuperDrawerHook;

package/dist/components/SuperDrawer/useSuperDrawer.js

@@ -12,8 +12,8 @@ function useSuperDrawer() {
     function canCloseDrawerDetails(i, doChange) {
         var _a;
         for (const canCloseDrawerDetail of (_a = canCloseDetailsChecks.current[i]) !== null && _a !== void 0 ? _a : []) {
-            if (!canCloseDrawerDetail()) {
-                openModal({ content: (0, jsx_runtime_1.jsx)(ConfirmCloseModal_1.ConfirmCloseModal, { onClose: doChange }, void 0) });
+            if (!canClose(canCloseDrawerDetail)) {
+                openModal({ content: (0, jsx_runtime_1.jsx)(ConfirmCloseModal_1.ConfirmCloseModal, Object.assign({ onClose: doChange }, canCloseDrawerDetail), void 0) });
                 return false;
             }
         }
@@ -40,9 +40,9 @@ function useSuperDrawer() {
         }
         // Attempt to close the drawer
         for (const canCloseDrawer of canCloseChecks.current) {
-            if (!canCloseDrawer()) {
+            if (!canClose(canCloseDrawer)) {
                 openModal({
-                    content: (0, jsx_runtime_1.jsx)(ConfirmCloseModal_1.ConfirmCloseModal, { onClose: doChange }, void 0),
+                    content: (0, jsx_runtime_1.jsx)(ConfirmCloseModal_1.ConfirmCloseModal, Object.assign({ onClose: doChange }, canCloseDrawer), void 0),
                 });
                 return;
             }
@@ -139,3 +139,7 @@ function useSuperDrawer() {
     };
 }
 exports.useSuperDrawer = useSuperDrawer;
+function canClose(canCloseCheck) {
+    return ((typeof canCloseCheck === "function" && canCloseCheck()) ||
+        (typeof canCloseCheck !== "function" && canCloseCheck.check()));
+}

package/dist/forms/BoundMultiSelectField.d.ts

@@ -1,9 +1,10 @@
 import { FieldState } from "@homebound/form-state/dist/formState";
 import { MultiSelectFieldProps, Value } from "../inputs";
 import { HasIdAndName, Optional } from "../types";
-export declare type BoundMultiSelectFieldProps<O, V extends Value> = Omit<MultiSelectFieldProps<O, V>, "values" | "onSelect" | "onBlur" | "onFocus"> & {
+export declare type BoundMultiSelectFieldProps<O, V extends Value> = Omit<MultiSelectFieldProps<O, V>, "values" | "onSelect" | "onBlur" | "onFocus" | "label"> & {
     onSelect?: (values: V[], opts: O[]) => void;
     field: FieldState<any, V[] | null | undefined>;
+    label?: string;
 };
 /**
  * Wraps `MultiSelectField` and binds it to a form field.

package/dist/forms/BoundSelectField.d.ts

@@ -1,9 +1,10 @@
 import { FieldState } from "@homebound/form-state/dist/formState";
 import { SelectFieldProps, Value } from "../inputs";
 import { HasIdAndName, Optional } from "../types";
-export declare type BoundSelectFieldProps<T, V extends Value> = Omit<SelectFieldProps<T, V>, "value" | "onSelect" | "onBlur" | "onFocus"> & {
+export declare type BoundSelectFieldProps<T, V extends Value> = Omit<SelectFieldProps<T, V>, "value" | "onSelect" | "onBlur" | "onFocus" | "label"> & {
     onSelect?: (option: V | undefined) => void;
     field: FieldState<any, V | null | undefined>;
+    label?: string;
 };
 /**
  * Wraps `SelectField` and binds it to a form field.

package/dist/inputs/DateField.d.ts

@@ -18,5 +18,8 @@ export interface DateFieldProps {
     /** Renders the label inside the input field, i.e. for filters. */
     inlineLabel?: boolean;
     placeholder?: string;
+    /** If the field should be rendered without a border - This could happen if rendering within a table or as part of a CompoundField */
+    borderless?: boolean;
+    compact?: boolean;
 }
 export declare function DateField(props: DateFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/DateField.js

@@ -23,16 +23,17 @@ function DateField(props) {
     const inputWrapRef = (0, react_1.useRef)(null);
     const buttonRef = (0, react_1.useRef)(null);
     const overlayRef = (0, react_1.useRef)(null);
-    const [inputValue, setInputValue] = (0, react_1.useState)(value ? (long && readOnly ? (0, date_fns_1.format)(value, longFormat) : formatDate(value)) : "");
+    const showLongFormat = long && readOnly;
+    const [inputValue, setInputValue] = (0, react_1.useState)(value ? (showLongFormat ? (0, date_fns_1.format)(value, longFormat) : formatDate(value)) : "");
     const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
     (0, react_1.useEffect)(() => {
-        setInputValue(value ? (long && readOnly ? (0, date_fns_1.format)(value, longFormat) : formatDate(value)) : "");
+        setInputValue(value ? (showLongFormat ? (0, date_fns_1.format)(value, longFormat) : formatDate(value)) : "");
     }, [value]);
     const textFieldProps = {
         ...others,
         label,
         isDisabled: disabled,
-        isReadOnly: false,
+        isReadOnly: readOnly,
         "aria-haspopup": "dialog",
         value: inputValue,
     };
@@ -77,7 +78,10 @@ function DateField(props) {
         placement: "bottom left",
         shouldUpdatePosition: true,
     });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, textFieldProps, { readOnly: readOnly, errorMsg: errorMsg, helperText: helperText, required: required, labelProps: labelProps, inputProps: { ...triggerProps, ...inputProps }, inputRef: inputRef, inputWrapRef: inputWrapRef, inlineLabel: inlineLabel, onChange: (v) => {
+    // If showing the long format of the date, then leave size undefined. Otherwise we're showing it as "01/01/20", so set size to 8.
+    // (Setting the size 8 will currently only impact view of the DateField when placed on the "in page" filters. This is due to other styles set within TextFieldBase)
+    const inputSize = showLongFormat ? undefined : 8;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, textFieldProps, { readOnly: readOnly, errorMsg: errorMsg, helperText: helperText, required: required, labelProps: labelProps, inputProps: { ...triggerProps, ...inputProps, size: inputSize }, inputRef: inputRef, inputWrapRef: inputWrapRef, inlineLabel: inlineLabel, onChange: (v) => {
                     // hide the calendar if the user is manually entering the date
                     state.close();
                     if (v) {

package/dist/inputs/TextFieldBase.d.ts

@@ -2,7 +2,7 @@ import type { NumberFieldAria } from "@react-aria/numberfield";
 import { InputHTMLAttributes, LabelHTMLAttributes, MutableRefObject, ReactNode, TextareaHTMLAttributes } from "react";
 import { Xss } from "../Css";
 import { BeamTextFieldProps } from "../interfaces";
-interface TextFieldBaseProps extends Pick<BeamTextFieldProps, "label" | "required" | "readOnly" | "errorMsg" | "onBlur" | "onFocus" | "helperText" | "hideLabel" | "placeholder">, Partial<Pick<BeamTextFieldProps, "onChange">> {
+interface TextFieldBaseProps extends Pick<BeamTextFieldProps, "label" | "required" | "readOnly" | "errorMsg" | "onBlur" | "onFocus" | "helperText" | "hideLabel" | "placeholder" | "borderless">, Partial<Pick<BeamTextFieldProps, "onChange">> {
     labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
     inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>;
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>;
@@ -12,9 +12,11 @@ interface TextFieldBaseProps extends Pick<BeamTextFieldProps, "label" | "require
     /** TextField specific */
     compact?: boolean;
     /** Styles overrides */
-    xss?: Xss<"textAlign">;
+    xss?: Xss<"textAlign" | "fontWeight">;
     endAdornment?: ReactNode;
+    startAdornment?: ReactNode;
     inlineLabel?: boolean;
+    contrast?: boolean;
 }
 export declare function TextFieldBase(props: TextFieldBaseProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/inputs/TextFieldBase.js

@@ -14,13 +14,44 @@ const useTestIds_1 = require("../utils/useTestIds");
 // Used by both TextField and TextArea
 function TextFieldBase(props) {
     var _a;
-    const { label, required, labelProps, hideLabel, inputProps, inputRef, inputWrapRef, groupProps, compact = false, errorMsg, helperText, multiline = false, readOnly, onChange, onBlur, onFocus, xss, endAdornment, inlineLabel, } = props;
+    const { label, required, labelProps, hideLabel, inputProps, inputRef, inputWrapRef, groupProps, compact = false, errorMsg, helperText, multiline = false, readOnly, onChange, onBlur, onFocus, xss, endAdornment, startAdornment, inlineLabel, borderless = false, contrast = false, } = props;
     const errorMessageId = `${inputProps.id}-error`;
     const labelSuffix = (0, labelUtils_1.getLabelSuffix)(required);
     const ElementType = multiline ? "textarea" : "input";
-    const tid = (0, useTestIds_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label || "textField"));
+    const tid = (0, useTestIds_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const { hoverProps, isHovered } = (0, react_aria_1.useHover)({});
     const { focusWithinProps } = (0, react_aria_1.useFocusWithin)({ onFocusWithinChange: setIsFocused });
+    const maybeSmaller = borderless ? 2 : 0;
+    const fieldHeight = 40;
+    const compactFieldHeight = 32;
+    const fieldStyles = {
+        container: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).$,
+        inputWrapper: {
+            ...Css_1.Css.sm.df.aic.br4.px1.w100
+                .hPx(fieldHeight - maybeSmaller)
+                .if(compact)
+                .hPx(compactFieldHeight - maybeSmaller).$,
+            ...Css_1.Css.bgWhite.bGray300.gray900.if(contrast).bgGray700.bGray700.white.$,
+            ...(!borderless ? Css_1.Css.ba.$ : {}),
+        },
+        inputWrapperReadOnly: {
+            ...Css_1.Css.sm.df.aic.w100
+                .mhPx(fieldHeight - maybeSmaller)
+                .if(compact)
+                .mhPx(compactFieldHeight - maybeSmaller).$,
+            ...Css_1.Css.gray900.if(contrast).white.$,
+        },
+        input: {
+            ...Css_1.Css.w100.mw0.outline0.br4.fg1.$,
+            // Not using Truss's inline `if` statement here because `addIn` properties do not respect the if statement.
+            ...(!contrast ? Css_1.Css.bgWhite.$ : Css_1.Css.bgGray700.addIn("&::selection", Css_1.Css.bgGray800.$).$),
+        },
+        hover: Css_1.Css.bgGray100.if(contrast).bgGray600.bGray600.$,
+        focus: Css_1.Css.bLightBlue700.if(contrast).bLightBlue500.$,
+        disabled: Css_1.Css.cursorNotAllowed.gray400.bgGray100.if(contrast).gray500.bgGray700.$,
+        error: Css_1.Css.bRed600.if(contrast).bRed400.$,
+    };
     // Watch for each WIP change, convert empty to undefined, and call the user's onChange
     function onDomChange(e) {
         if (onChange) {
@@ -34,25 +65,26 @@ function TextFieldBase(props) {
     const onFocusChained = (0, react_aria_1.chain)((e) => {
         e.target.select();
     }, onFocus);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).$ }, groupProps, focusWithinProps, { children: [label && !hideLabel && !inlineLabel && ((0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ labelProps: labelProps, label: label, suffix: labelSuffix }, tid.label), void 0)), readOnly && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
-                    // Copy/pasted from StaticField, maybe we should combine?
-                    ...Css_1.Css.sm.gray900.df.aic.mh((0, Css_1.px)(40)).$,
-                    ...Css_1.Css.maxw((0, Css_1.px)(500)).$,
-                    ...(multiline ? Css_1.Css.fdc.aifs.childGap2.$ : Css_1.Css.add({ overflow: "hidden", whiteSpace: "nowrap" }).$),
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: fieldStyles.container }, groupProps, focusWithinProps, { children: [label && !inlineLabel && ((0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ labelProps: labelProps, hidden: hideLabel, label: label, suffix: labelSuffix, contrast: contrast }, tid.label), void 0)), readOnly && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
+                    // Use input wrapper to get common styles, but then we need to override some
+                    ...fieldStyles.inputWrapperReadOnly,
+                    ...(multiline ? Css_1.Css.fdc.aifs.childGap2.$ : Css_1.Css.truncate.$),
                     ...xss,
-                } }, tid, { "data-readonly": "true" }, { children: [!multiline && inlineLabel && label && !hideLabel && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, Object.assign({ labelProps: labelProps, label: label }, tid.label), void 0)), multiline
+                }, "data-readonly": "true" }, tid, { children: [!multiline && inlineLabel && label && !hideLabel && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, Object.assign({ labelProps: labelProps, label: label }, tid.label), void 0)), multiline
                         ? (_a = inputProps.value) === null || _a === void 0 ? void 0 : _a.split("\n\n").map((p, i) => ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.my1.$ }, { children: p.split("\n").map((sentence, j) => ((0, jsx_runtime_1.jsxs)("span", { children: [sentence, (0, jsx_runtime_1.jsx)("br", {}, void 0)] }, j))) }), i)))
                         : inputProps.value] }), void 0)), !readOnly && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
-                    ...Css_1.Css.df.aic.bgWhite.sm.px1.w100.hPx(40).gray900.br4.ba.bGray300.overflowHidden.if(compact).hPx(32).$,
-                    ...(inputProps.disabled ? Css_1.Css.gray400.bgGray100.cursorNotAllowed.$ : {}),
-                    ...(isFocused ? Css_1.Css.bLightBlue700.$ : {}),
-                    ...(errorMsg ? Css_1.Css.bRed600.$ : {}),
+                    ...fieldStyles.inputWrapper,
+                    ...(inputProps.disabled ? fieldStyles.disabled : {}),
+                    ...(isFocused && !readOnly ? fieldStyles.focus : {}),
+                    ...(isHovered && !inputProps.disabled && !readOnly && !isFocused ? fieldStyles.hover : {}),
+                    ...(errorMsg ? fieldStyles.error : {}),
                     ...Css_1.Css.if(multiline).aifs.px0.mh((0, Css_1.px)(96)).$,
-                }, ref: inputWrapRef }, { children: [!multiline && inlineLabel && label && !hideLabel && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, Object.assign({ labelProps: labelProps, label: label }, tid.label), void 0)), (0, jsx_runtime_1.jsx)(ElementType, Object.assign({}, (0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(hideLabel ? { "aria-label": label } : {}) }), (errorMsg ? { "aria-errormessage": errorMessageId } : {}), { ref: inputRef, rows: multiline ? 1 : undefined, css: {
-                            ...Css_1.Css.add("resize", "none").sm.w100.gray900.outline0.$,
-                            ...(inputProps.disabled ? Css_1.Css.gray400.bgGray100.cursorNotAllowed.$ : {}),
+                } }, hoverProps, { ref: inputWrapRef }, { children: [!multiline && inlineLabel && label && !hideLabel && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, Object.assign({ labelProps: labelProps, label: label }, tid.label), void 0)), !multiline && startAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.df.aic.fs0.br4.pr1.$ }, { children: startAdornment }), void 0), (0, jsx_runtime_1.jsx)(ElementType, Object.assign({}, (0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(hideLabel ? { "aria-label": label } : {}) }), (errorMsg ? { "aria-errormessage": errorMessageId } : {}), { ref: inputRef, rows: multiline ? 1 : undefined, css: {
+                            ...fieldStyles.input,
+                            ...(inputProps.disabled ? fieldStyles.disabled : {}),
+                            ...(isHovered && !inputProps.disabled && !readOnly && !isFocused ? fieldStyles.hover : {}),
+                            ...(multiline ? Css_1.Css.h100.p1.add("resize", "none").$ : Css_1.Css.truncate.$),
                             ...xss,
-                            ...Css_1.Css.if(multiline).h100.p1.$,
-                        } }, tid), void 0), !multiline && endAdornment && (0, jsx_runtime_1.jsx)("span", { children: endAdornment }, void 0)] }), void 0)), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ id: errorMessageId, errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0));
+                        } }, tid), void 0), !multiline && endAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.df.aic.pl1.fs0.$ }, { children: endAdornment }), void 0)] }), void 0)), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ id: errorMessageId, errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0));
 }
 exports.TextFieldBase = TextFieldBase;

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

@@ -32,7 +32,7 @@ export interface BeamSelectFieldBaseProps<T, V extends Value> extends BeamFocusa
     /** Allow placing an icon/decoration within the input field. */
     fieldDecoration?: (opt: T) => ReactNode;
     /** Sets the form field label. */
-    label?: string;
+    label: string;
     hideLabel?: boolean;
     /** Renders the label inside the input field, i.e. for filters. */
     inlineLabel?: boolean;
@@ -44,4 +44,6 @@ export interface BeamSelectFieldBaseProps<T, V extends Value> extends BeamFocusa
     nothingSelectedText?: string;
     /** When set the SelectField is expected to be put on a darker background */
     contrast?: boolean;
+    /** If the field should be rendered without a border - This could happen if rendering within a table or as part of a CompoundField */
+    borderless?: boolean;
 }

package/dist/inputs/internal/SelectFieldBase.js

@@ -21,7 +21,7 @@ const Value_1 = require("../Value");
  */
 function SelectFieldBase(props) {
     var _a;
-    const { compact = false, disabled: isDisabled = false, errorMsg, helperText, label, hideLabel, required, inlineLabel, readOnly: isReadOnly = false, onSelect, fieldDecoration, options, onBlur, onFocus, multiselect = false, getOptionLabel, getOptionValue, getOptionMenuLabel = getOptionLabel, sizeToContent = false, values, nothingSelectedText = "", contrast, disabledOptions, ...otherProps } = props;
+    const { compact = false, disabled: isDisabled = false, errorMsg, helperText, label, hideLabel, required, inlineLabel, readOnly: isReadOnly = false, onSelect, fieldDecoration, options, onBlur, onFocus, multiselect = false, getOptionLabel, getOptionValue, getOptionMenuLabel = getOptionLabel, sizeToContent = false, values, nothingSelectedText = "", contrast, disabledOptions, borderless, ...otherProps } = props;
     const { contains } = (0, react_aria_1.useFilter)({ sensitivity: "base" });
     function onSelectionChange(keys) {
         // Close menu upon selection change only for Single selection mode
@@ -177,6 +177,6 @@ function SelectFieldBase(props) {
         ...positionProps.style,
         width: (_a = comboBoxRef === null || comboBoxRef === void 0 ? void 0 : comboBoxRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).$, ref: comboBoxRef }, { children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, { buttonProps: buttonProps, buttonRef: triggerRef, compact: compact, errorMsg: errorMsg, helperText: helperText, fieldDecoration: fieldDecoration, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, isDisabled: isDisabled, required: required, isReadOnly: isReadOnly, state: state, onBlur: onBlur, onFocus: onFocus, inlineLabel: inlineLabel, label: label, hideLabel: hideLabel, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, sizeToContent: sizeToContent, contrast: contrast, nothingSelectedText: nothingSelectedText }, void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, listBoxProps, { positionProps: positionProps, state: state, compact: compact, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast }), void 0) }), void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).$, ref: comboBoxRef }, { children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, Object.assign({}, otherProps, { buttonProps: buttonProps, buttonRef: triggerRef, compact: compact, errorMsg: errorMsg, helperText: helperText, fieldDecoration: fieldDecoration, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, isDisabled: isDisabled, required: required, isReadOnly: isReadOnly, state: state, onBlur: onBlur, onFocus: onFocus, inlineLabel: inlineLabel, label: label, hideLabel: hideLabel, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, sizeToContent: sizeToContent, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, listBoxProps, { positionProps: positionProps, state: state, compact: compact, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast }), void 0) }), void 0))] }), void 0));
 }
 exports.SelectFieldBase = SelectFieldBase;

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

@@ -19,7 +19,7 @@ interface SelectFieldInputProps<O, V extends Value> {
     onFocus?: () => void;
     inlineLabel?: boolean;
     labelProps: LabelHTMLAttributes<HTMLLabelElement>;
-    label?: string;
+    label: string;
     hideLabel?: boolean;
     selectedOptions: O[];
     getOptionValue: (opt: O) => V;
@@ -27,6 +27,8 @@ interface SelectFieldInputProps<O, V extends Value> {
     sizeToContent: boolean;
     contrast?: boolean;
     nothingSelectedText: string;
+    /** If the field should be rendered without a border - This could happen if rendering within a table or as part of a CompoundField */
+    borderless?: boolean;
 }
 export declare function SelectFieldInput<O, V extends Value>(props: SelectFieldInputProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/inputs/internal/SelectFieldInput.js

@@ -5,121 +5,94 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const components_1 = require("../../components");
-const HelperText_1 = require("../../components/HelperText");
-const Label_1 = require("../../components/Label");
 const Css_1 = require("../../Css");
-const labelUtils_1 = require("../../forms/labelUtils");
-const ErrorMessage_1 = require("../ErrorMessage");
+const TextFieldBase_1 = require("../TextFieldBase");
 const Value_1 = require("../Value");
 const utils_1 = require("../../utils");
 function SelectFieldInput(props) {
-    const { inputProps, inputRef, inputWrapRef, buttonProps, buttonRef, compact = false, errorMsg, required, helperText, state, fieldDecoration, isDisabled, isReadOnly, onBlur, onFocus, inlineLabel, label, labelProps, hideLabel, selectedOptions, getOptionValue, getOptionLabel, sizeToContent, contrast = false, nothingSelectedText, } = props;
-    const themeStyles = {
-        wrapper: Css_1.Css.bgWhite.bGray300.gray900.if(contrast).bgGray700.bGray700.white.$,
-        hover: Css_1.Css.bgGray100.if(contrast).bgGray600.bGray600.$,
-        focus: Css_1.Css.bLightBlue700.if(contrast).bLightBlue500.$,
-        // Not using Truss's inline `if` statement here because `addIn` properties are applied regardless.
-        input: !contrast ? Css_1.Css.bgWhite.$ : Css_1.Css.bgGray700.addIn("&::selection", Css_1.Css.bgGray800.$).$,
-        disabled: Css_1.Css.cursorNotAllowed.gray400.bgGray100.if(contrast).gray500.bgGray700.$,
-        error: Css_1.Css.bRed500.if(contrast).bRed400.$,
-    };
-    const errorMessageId = `${inputProps.id}-error`;
+    const { inputProps, inputRef, inputWrapRef, buttonProps, buttonRef, compact = false, errorMsg, required, helperText, state, fieldDecoration, isDisabled, isReadOnly, onBlur, onFocus, inlineLabel, label, labelProps, hideLabel, selectedOptions, getOptionValue, getOptionLabel, sizeToContent, contrast = false, nothingSelectedText, borderless, ...otherProps } = props;
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
-    const { hoverProps, isHovered } = (0, react_aria_1.useHover)({});
-    const hoverStyles = isHovered && !isReadOnly && !isFocused ? themeStyles.hover : {};
-    const focusStyles = isFocused && !isReadOnly ? themeStyles.focus : {};
-    const errorStyles = errorMsg ? themeStyles.error : {};
-    const disabledStyles = isDisabled ? themeStyles.disabled : {};
-    const readOnlyStyles = isReadOnly ? Css_1.Css.bn.pl0.pt0.add("backgroundColor", "unset").$ : {};
-    const tid = (0, utils_1.useTestIds)(inputProps); // data-testid comes in through here
     const isMultiSelect = state.selectionManager.selectionMode === "multiple";
-    const labelSuffix = (0, labelUtils_1.getLabelSuffix)(required);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!inlineLabel && label && ((0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ labelProps: labelProps, label: label, suffix: labelSuffix, contrast: contrast }, tid.label, { hidden: hideLabel }), void 0)), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
-                    ...Css_1.Css.df.ba.br4.px1.aic.hPx(40).if(compact).hPx(32).$,
-                    ...themeStyles.wrapper,
-                    ...hoverStyles,
-                    ...errorStyles,
-                    ...focusStyles,
-                    ...disabledStyles,
-                    ...readOnlyStyles,
-                } }, hoverProps, { ref: inputWrapRef }, { children: [inlineLabel && label && (0, jsx_runtime_1.jsx)(Label_1.InlineLabel, Object.assign({ labelProps: labelProps, label: label }, tid.label), void 0), isMultiSelect && state.selectionManager.selectedKeys.size > 1 && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.wPx(16).hPx(16).mr1.fs0.br100.bgLightBlue700.white.tinyEm.df.aic.jcc.$ }, { children: state.selectionManager.selectedKeys.size }), void 0)), (!isMultiSelect || (isMultiSelect && !isFocused)) && fieldDecoration && selectedOptions.length === 1 && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: {
-                            ...Css_1.Css.df.aic.br4.fs0.pr1.$,
-                            ...errorStyles,
-                            ...hoverStyles,
-                        } }, { children: fieldDecoration(selectedOptions[0]) }), void 0)), (0, jsx_runtime_1.jsx)("input", Object.assign({}, (0, react_aria_1.mergeProps)(inputProps, { "aria-invalid": Boolean(errorMsg), onInput: () => state.open() }), (errorMsg ? { "aria-errormessage": errorMessageId } : {}), { ref: inputRef, css: {
-                            ...Css_1.Css.mw0.fg1.pr1.br4.outline0.truncate.w100.sm.if(!inlineLabel).smEm.$,
-                            ...themeStyles.input,
-                            ...hoverStyles,
-                            ...disabledStyles,
-                            ...readOnlyStyles,
-                        }, onKeyDown: (e) => {
-                            // We need to do some custom logic when using MultiSelect, as react-aria/stately Combobox doesn't support multiselect out of the box.
-                            if (isMultiSelect) {
-                                // Enter should toggle the focused item.
-                                if (e.key === "Enter") {
-                                    // Prevent form submissions if menu is open.
-                                    if (state.isOpen) {
-                                        e.preventDefault();
-                                    }
-                                    state.selectionManager.toggleSelection(state.selectionManager.focusedKey);
-                                    return;
-                                }
-                                // By default, the Escape key would "revert" changes,
-                                // but we just want to close the menu and leave the selections as is
-                                if (e.key === "Escape") {
-                                    state.close();
-                                    return;
-                                }
+    const showNumSelection = isMultiSelect && state.selectionManager.selectedKeys.size > 1;
+    // For MultiSelect only show the `fieldDecoration` when input is not in focus.
+    const showFieldDecoration = (!isMultiSelect || (isMultiSelect && !isFocused)) && fieldDecoration && selectedOptions.length === 1;
+    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, otherProps, { inputRef: inputRef, inputWrapRef: inputWrapRef, label: label, readOnly: isReadOnly, hideLabel: hideLabel, labelProps: labelProps, inlineLabel: inlineLabel, compact: compact, required: required, errorMsg: errorMsg, helperText: helperText, contrast: contrast, xss: !inlineLabel ? Css_1.Css.fw5.$ : {}, borderless: borderless, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinyEm.df.aic.jcc.$ }, { children: state.selectionManager.selectedKeys.size }), void 0))) ||
+            (showFieldDecoration && fieldDecoration(selectedOptions[0])), endAdornment: !isReadOnly && ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonProps, { disabled: isDisabled, ref: buttonRef, css: {
+                ...Css_1.Css.br4.outline0.gray700.if(contrast).gray400.$,
+                ...(isDisabled ? Css_1.Css.cursorNotAllowed.gray400.if(contrast).gray600.$ : {}),
+            } }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }, void 0) }), void 0)), inputProps: {
+            ...(0, react_aria_1.mergeProps)(inputProps, { "aria-invalid": Boolean(errorMsg), onInput: () => state.open() }),
+            // Not merging the following as we want them to overwrite existing events
+            ...{
+                onKeyDown: (e) => {
+                    // We need to do some custom logic when using MultiSelect, as react-aria/stately Combobox doesn't support multiselect out of the box.
+                    if (isMultiSelect) {
+                        // Enter should toggle the focused item.
+                        if (e.key === "Enter") {
+                            // Prevent form submissions if menu is open.
+                            if (state.isOpen) {
+                                e.preventDefault();
                             }
-                            // Handle single selection Escape key press
-                            // When a user hits `Escape`, then react-aria calls `state.revert`, which uses `state.selectedKey` to
-                            // reset the field to its previous value. However, because we use a the Multiple Selection State manager,
-                            // then our `state.selectedKey` isn't set. So we need to properly reset the state ourselves.
-                            if (e.key === "Escape") {
-                                // Triggering `Escape` is basically like re-selecting currently selected option, so do that if there is one.
-                                state.selectionManager.setSelectedKeys(selectedOptions.length > 0 ? [(0, Value_1.valueToKey)(getOptionValue(selectedOptions[0]))] : []);
-                                return;
-                            }
-                            inputProps.onKeyDown && inputProps.onKeyDown(e);
-                        }, onBlur: () => {
-                            // We purposefully override onBlur here instead of using mergeProps, b/c inputProps.onBlur
-                            // goes into useComboBox's onBlur, which calls setFocused(false), which in useComboBoxState
-                            // detects a) there is no props.selectedKey (b/c we don't pass it), and b) there is an
-                            // `inputValue`, so it thinks it needs to call `resetInputValue()`.
-                            //
-                            // I assume we don't pass `selectedKey` b/c we support multiple keys.
-                            if (isReadOnly) {
-                                return;
-                            }
-                            (0, utils_1.maybeCall)(onBlur);
+                            state.selectionManager.toggleSelection(state.selectionManager.focusedKey);
+                            return;
+                        }
+                        // By default, the Escape key would "revert" changes,
+                        // but we just want to close the menu and leave the selections as is
+                        if (e.key === "Escape") {
                             state.close();
-                            setIsFocused(false);
-                            // Always call `setSelectedKeys` onBlur with its existing selected keys..
-                            // This ensures the field's `input.value` resets to what it should be in case it doesn't currently match.
-                            state.selectionManager.setSelectedKeys(state.selectionManager.selectedKeys);
-                        }, onFocus: (e) => {
-                            if (isReadOnly)
-                                return;
-                            (0, utils_1.maybeCall)(onFocus);
-                            e.target.select();
-                            state.open();
-                            setIsFocused(true);
-                        }, size: 
-                        // If sizeToContent, then, in order of precedence, base it of from:
-                        // 1. input's value if any
-                        // 2. If is MultiSelect and only one option is chosen, then use the length of that option to define the width to avoid size jumping on blur.
-                        // 3. Use `nothingSelectedText`
-                        // 4. Default to "1"
-                        // And do not allow it to grow past a size of 20.
-                        // TODO: Combine logic to determine the input's value. Similar logic is used in SelectFieldBase, though it is intertwined with other state logic. Such as when to open/close menu, or filter the options within that menu, etc...
-                        sizeToContent
-                            ? Math.min(String(inputProps.value ||
-                                (isMultiSelect && selectedOptions.length === 1 && getOptionLabel(selectedOptions[0])) ||
-                                nothingSelectedText ||
-                                "").length || 1, 20)
-                            : undefined }), void 0), !isReadOnly && ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonProps, { disabled: isDisabled, ref: buttonRef, css: {
-                            ...Css_1.Css.br4.outline0.$,
-                            ...disabledStyles,
-                        } }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown", color: contrast ? Css_1.Palette.Gray400 : Css_1.Palette.Gray700 }, void 0) }), void 0))] }), void 0), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ id: errorMessageId, errorMsg: errorMsg, contrast: contrast }, tid.errorMsg), void 0), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText, contrast: contrast }, tid.helperText), void 0)] }, void 0));
+                            return;
+                        }
+                    }
+                    // Handle single selection Escape key press
+                    // When a user hits `Escape`, then react-aria calls `state.revert`, which uses `state.selectedKey` to
+                    // reset the field to its previous value. However, because we use a the Multiple Selection State manager,
+                    // then our `state.selectedKey` isn't set. So we need to properly reset the state ourselves.
+                    if (e.key === "Escape") {
+                        // Triggering `Escape` is basically like re-selecting currently selected option, so do that if there is one.
+                        state.selectionManager.setSelectedKeys(selectedOptions.length > 0 ? [(0, Value_1.valueToKey)(getOptionValue(selectedOptions[0]))] : []);
+                        return;
+                    }
+                    inputProps.onKeyDown && inputProps.onKeyDown(e);
+                },
+                onBlur: () => {
+                    // We purposefully override onBlur here instead of using mergeProps, b/c inputProps.onBlur
+                    // goes into useComboBox's onBlur, which calls setFocused(false), which in useComboBoxState
+                    // detects a) there is no props.selectedKey (b/c we don't pass it), and b) there is an
+                    // `inputValue`, so it thinks it needs to call `resetInputValue()`.
+                    //
+                    // I assume we don't pass `selectedKey` b/c we support multiple keys.
+                    if (isReadOnly) {
+                        return;
+                    }
+                    setIsFocused(false);
+                    (0, utils_1.maybeCall)(onBlur);
+                    state.close();
+                    // Always call `setSelectedKeys` onBlur with its existing selected keys..
+                    // This ensures the field's `input.value` resets to what it should be in case it doesn't currently match.
+                    state.selectionManager.setSelectedKeys(state.selectionManager.selectedKeys);
+                },
+                onFocus: () => {
+                    if (isReadOnly)
+                        return;
+                    setIsFocused(true);
+                    (0, utils_1.maybeCall)(onFocus);
+                    state.open();
+                },
+                size: 
+                // If sizeToContent, then, in order of precedence, base it of from:
+                // 1. input's value if any
+                // 2. If is MultiSelect and only one option is chosen, then use the length of that option to define the width to avoid size jumping on blur.
+                // 3. Use `nothingSelectedText`
+                // 4. Default to "1"
+                // And do not allow it to grow past a size of 20.
+                // TODO: Combine logic to determine the input's value. Similar logic is used in SelectFieldBase, though it is intertwined with other state logic. Such as when to open/close menu, or filter the options within that menu, etc...
+                sizeToContent
+                    ? Math.min(String(inputProps.value ||
+                        (isMultiSelect && selectedOptions.length === 1 && getOptionLabel(selectedOptions[0])) ||
+                        nothingSelectedText ||
+                        "").length || 1, 20)
+                    : undefined,
+            },
+        } }), void 0));
 }
 exports.SelectFieldInput = SelectFieldInput;

package/dist/interfaces.d.ts

@@ -38,4 +38,6 @@ export interface BeamTextFieldProps extends BeamFocusableProps {
     onFocus?: () => void;
     readOnly?: boolean;
     placeholder?: string;
+    /** If the field should be rendered without a border - This could happen if rendering within a table or as part of a CompoundField */
+    borderless?: boolean;
 }

package/dist/types.d.ts

@@ -5,3 +5,8 @@ export declare type HasIdAndName<V = string> = {
 export declare type Optional<T, K extends keyof T> = Omit<T, K> & Partial<T>;
 export declare type Callback = () => void;
 export declare type CheckFn = () => boolean;
+export declare type CanCloseCheck = {
+    check: CheckFn;
+    discardText?: string;
+    continueText?: string;
+} | CheckFn;

package/package.json

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