@homebound/beam 2.230.1 → 2.231.0

package/dist/components/Button.d.ts

@@ -3,7 +3,7 @@ import { ButtonHTMLAttributes, ReactNode, RefObject } from "react";
 import { IconProps } from "./";
 import { BeamButtonProps, BeamFocusableProps } from "../interfaces";
 export interface ButtonProps extends BeamButtonProps, BeamFocusableProps {
-    label: string;
+    label: ReactNode;
     variant?: ButtonVariant;
     size?: ButtonSize;
     icon?: IconProps["icon"] | null;

package/dist/components/Button.js

@@ -9,6 +9,7 @@ const Css_1 = require("../Css");
 const utils_1 = require("../utils");
 const getInteractiveElement_1 = require("../utils/getInteractiveElement");
 const useTestIds_1 = require("../utils/useTestIds");
+const OverlayTrigger_1 = require("./internal/OverlayTrigger");
 function Button(props) {
     const { onClick: onPress, disabled, endAdornment, menuTriggerProps, tooltip, openInNew, download, contrast = false, forceFocusStyles = false, labelInFlight, ...otherProps } = props;
     const asLink = typeof onPress === "string";
@@ -20,7 +21,7 @@ function Button(props) {
     // Default the icon based on other properties.
     icon = download ? "download" : showExternalLinkIcon ? "linkExternal" : undefined, variant = "primary", size = "sm", buttonRef, } = ariaProps;
     const ref = buttonRef || (0, react_1.useRef)(null);
-    const tid = (0, useTestIds_1.useTestIds)(props, label);
+    const tid = (0, useTestIds_1.useTestIds)(props, (0, OverlayTrigger_1.labelOr)(ariaProps, "button"));
     const { buttonProps, isPressed } = (0, react_aria_1.useButton)({
         ...ariaProps,
         onPress: asLink

package/dist/components/ButtonDatePicker.js

@@ -15,7 +15,11 @@ function ButtonDatePicker(props) {
     const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: defaultOpen });
     const buttonRef = (0, react_1.useRef)(null);
     const { menuTriggerProps, menuProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
-    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? (0, defaultTestId_1.defaultTestId)(trigger.label) : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
+    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger)
+        ? (0, defaultTestId_1.defaultTestId)((0, OverlayTrigger_1.labelOr)(trigger, "buttonDatePicker"))
+        : (0, OverlayTrigger_1.isIconButton)(trigger)
+            ? trigger.icon
+            : trigger.name);
     return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, { ...props, menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef, ...tid, children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, { overlayProps: menuProps, children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { ...datePickerProps, onSelect: (d) => {
                     onSelect(d);
                     state.close();

package/dist/components/ButtonMenu.js

@@ -13,7 +13,7 @@ function ButtonMenu(props) {
     const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: defaultOpen });
     const buttonRef = (0, react_1.useRef)(null);
     const { menuTriggerProps, menuProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
-    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? trigger.label : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
+    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? (0, OverlayTrigger_1.labelOr)(trigger, "buttonMenu") : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
     return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, { ...props, menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef, ...tid, children: (0, jsx_runtime_1.jsx)(Menu_1.Menu, { ariaMenuProps: menuProps, onClose: () => state.close(), items: items, persistentItems: persistentItems, searchable: searchable, ...tid }) }));
 }
 exports.ButtonMenu = ButtonMenu;

package/dist/components/ButtonModal.js

@@ -13,7 +13,7 @@ function ButtonModal(props) {
     const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: storybookDefaultOpen });
     const buttonRef = (0, react_1.useRef)(null);
     const { menuTriggerProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
-    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? trigger.label : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
+    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? (0, OverlayTrigger_1.labelOr)(trigger, "buttonModal") : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
     return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, { ...props, menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef, ...tid, children: (0, jsx_runtime_1.jsx)(ContextualModal_1.ContextualModal, { content: content, title: title, close: state.close }) }));
 }
 exports.ButtonModal = ButtonModal;

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

@@ -2,8 +2,8 @@ export { dateFilter } from "./DateFilter";
 export type { DateFilterValue } from "./DateFilter";
 export { dateRangeFilter } from "./DateRangeFilter";
 export type { DateRangeFilterValue } from "./DateRangeFilter";
-export { numberRangeFilter } from "./NumberRangeFilter";
 export { multiFilter } from "./MultiFilter";
+export { numberRangeFilter } from "./NumberRangeFilter";
 export { singleFilter } from "./SingleFilter";
 export { booleanFilter } from "./BooleanFilter";
 export { checkboxFilter } from "./CheckboxFilter";

package/dist/components/Filters/index.js

@@ -14,15 +14,15 @@ 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.checkboxFilter = exports.booleanFilter = exports.singleFilter = exports.multiFilter = exports.numberRangeFilter = exports.dateRangeFilter = exports.dateFilter = void 0;
+exports.toggleFilter = exports.checkboxFilter = exports.booleanFilter = exports.singleFilter = exports.numberRangeFilter = exports.multiFilter = exports.dateRangeFilter = exports.dateFilter = void 0;
 var DateFilter_1 = require("./DateFilter");
 Object.defineProperty(exports, "dateFilter", { enumerable: true, get: function () { return DateFilter_1.dateFilter; } });
 var DateRangeFilter_1 = require("./DateRangeFilter");
 Object.defineProperty(exports, "dateRangeFilter", { enumerable: true, get: function () { return DateRangeFilter_1.dateRangeFilter; } });
-var NumberRangeFilter_1 = require("./NumberRangeFilter");
-Object.defineProperty(exports, "numberRangeFilter", { enumerable: true, get: function () { return NumberRangeFilter_1.numberRangeFilter; } });
 var MultiFilter_1 = require("./MultiFilter");
 Object.defineProperty(exports, "multiFilter", { enumerable: true, get: function () { return MultiFilter_1.multiFilter; } });
+var NumberRangeFilter_1 = require("./NumberRangeFilter");
+Object.defineProperty(exports, "numberRangeFilter", { enumerable: true, get: function () { return NumberRangeFilter_1.numberRangeFilter; } });
 var SingleFilter_1 = require("./SingleFilter");
 Object.defineProperty(exports, "singleFilter", { enumerable: true, get: function () { return SingleFilter_1.singleFilter; } });
 var BooleanFilter_1 = require("./BooleanFilter");

package/dist/components/SuperDrawer/utils.js

@@ -6,4 +6,3 @@ var SuperDrawerWidth;
     SuperDrawerWidth[SuperDrawerWidth["Small"] = 560] = "Small";
     SuperDrawerWidth[SuperDrawerWidth["Normal"] = 1040] = "Normal";
 })(SuperDrawerWidth = exports.SuperDrawerWidth || (exports.SuperDrawerWidth = {}));
-;

package/dist/components/Table/components/EditColumnsButton.js

@@ -16,7 +16,7 @@ function EditColumnsButton(props) {
     const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: defaultOpen });
     const buttonRef = (0, react_1.useRef)(null);
     const { menuTriggerProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
-    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? trigger.label : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
+    const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? (0, OverlayTrigger_1.labelOr)(trigger, "editColumnsButton") : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
     const { options } = (0, react_1.useMemo)(() => {
         return columns.reduce((acc, column) => {
             // Only include options that can be hidden and have the `name` property defined.

package/dist/components/internal/DatePicker/DatePicker.css

@@ -2,7 +2,7 @@
   /* Modified by Beam (40 -> 32) */
   --rdp-cell-size: 32px;
   /* Modified by Beam (#0000ff -> LightBlue700) */
-  --rdp-accent-color: rgba(3,105,161,1);
+  --rdp-accent-color: rgba(3, 105, 161, 1);
   --rdp-background-color: #e7edff;
   /* Switch to dark colors for dark themes */
   --rdp-accent-color-dark: #3003e1;
@@ -11,7 +11,7 @@
   --rdp-outline: 2px solid var(--rdp-accent-color);
   /* Outline border for focused and selected elements */
   /* Modified by Beam (rgba(0, 0, 0, 0.75) -> LightBlue700) */
-  --rdp-outline-selected: 2px solid rgba(3,105,161,1);
+  --rdp-outline-selected: 2px solid rgba(3, 105, 161, 1);
 }
 
 /* Added in By Beam */
@@ -64,12 +64,12 @@
   border: 2px solid transparent;
 }
 
-.rdp-button[aria-disabled='true'] {
+.rdp-button[aria-disabled="true"] {
   opacity: 0.25;
   pointer-events: none;
 }
 
-.rdp-button:not([aria-disabled='true']) {
+.rdp-button:not([aria-disabled="true"]) {
   cursor: pointer;
 }
 
@@ -80,7 +80,7 @@
   background-color: var(--rdp-background-color);
 }
 
-.rdp-button:hover:not([aria-disabled='true']) {
+.rdp-button:hover:not([aria-disabled="true"]) {
   background-color: var(--rdp-background-color);
 }
 
@@ -279,34 +279,34 @@
   font-weight: bold;
 }
 
-.rdp-day_selected:not([aria-disabled='true']),
-.rdp-day_selected:focus:not([aria-disabled='true']),
-.rdp-day_selected:active:not([aria-disabled='true']),
-.rdp-day_selected:hover:not([aria-disabled='true']) {
+.rdp-day_selected:not([aria-disabled="true"]),
+.rdp-day_selected:focus:not([aria-disabled="true"]),
+.rdp-day_selected:active:not([aria-disabled="true"]),
+.rdp-day_selected:hover:not([aria-disabled="true"]) {
   color: white;
   background-color: var(--rdp-accent-color);
 }
 
-.rdp-day_selected:focus:not([aria-disabled='true']) {
+.rdp-day_selected:focus:not([aria-disabled="true"]) {
   border: var(--rdp-outline-selected);
 }
 
-.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {
+.rdp:not([dir="rtl"]) .rdp-day_range_start:not(.rdp-day_range_end) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {
+.rdp:not([dir="rtl"]) .rdp-day_range_end:not(.rdp-day_range_start) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {
+.rdp[dir="rtl"] .rdp-day_range_start:not(.rdp-day_range_end) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {
+.rdp[dir="rtl"] .rdp-day_range_end:not(.rdp-day_range_start) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }

package/dist/components/internal/OverlayTrigger.d.ts

@@ -34,4 +34,7 @@ export interface OverlayTriggerProps {
 export declare function OverlayTrigger(props: OverlayTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function isTextButton(trigger: TextButtonTriggerProps | IconButtonTriggerProps | AvatarButtonTriggerProps): trigger is TextButtonTriggerProps;
 export declare function isIconButton(trigger: TextButtonTriggerProps | IconButtonTriggerProps | AvatarButtonTriggerProps): trigger is IconButtonTriggerProps;
+export declare function labelOr(trigger: {
+    label: unknown;
+}, fallback: string): string;
 export {};

package/dist/components/internal/OverlayTrigger.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isIconButton = exports.isTextButton = exports.OverlayTrigger = void 0;
+exports.labelOr = exports.isIconButton = exports.isTextButton = exports.OverlayTrigger = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
@@ -24,7 +24,11 @@ function OverlayTrigger(props) {
         placement: (placement ? `bottom ${placement}` : "bottom left"),
         offset: showActiveBorder ? 4 : undefined,
     });
-    const tid = (0, utils_1.useTestIds)(props, isTextButton(trigger) ? (0, defaultTestId_1.defaultTestId)(trigger.label) : isIconButton(trigger) ? trigger.icon : trigger.name);
+    const tid = (0, utils_1.useTestIds)(props, isTextButton(trigger)
+        ? (0, defaultTestId_1.defaultTestId)(labelOr(trigger, "overlayTrigger"))
+        : isIconButton(trigger)
+            ? trigger.icon
+            : trigger.name);
     return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.relative.dib.$, children: [isTextButton(trigger) ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant ? variant : "secondary", ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, endAdornment: !hideEndAdornment ? (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }) : null, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen, ...tid })) : isIconButton(trigger) ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, ...tid, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen })) : ((0, jsx_runtime_1.jsx)(AvatarButton_1.AvatarButton, { ...trigger, menuTriggerProps: menuTriggerProps, buttonRef: buttonRef, ...tid, disabled: disabled, tooltip: tooltip, onClick: utils_1.noop, forceFocusStyles: showActiveBorder && state.isOpen })), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: buttonRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, children: children }))] }));
 }
 exports.OverlayTrigger = OverlayTrigger;
@@ -36,3 +40,7 @@ function isIconButton(trigger) {
     return trigger && typeof trigger === "object" && "icon" in trigger;
 }
 exports.isIconButton = isIconButton;
+function labelOr(trigger, fallback) {
+    return typeof trigger.label === "string" ? trigger.label : fallback;
+}
+exports.labelOr = labelOr;

package/dist/inputs/TextFieldBase.js

@@ -92,36 +92,42 @@ function TextFieldBase(props) {
     }, onFocus);
     const showFocus = (isFocused && !inputProps.readOnly) || forceFocus;
     const showHover = (isHovered && !inputProps.disabled && !inputProps.readOnly && !isFocused) || forceHover;
-    return ((0, jsx_runtime_1.jsxs)("div", { css: fieldStyles.container, ...groupProps, ...focusWithinProps, children: [label && labelStyle !== "inline" && ((0, jsx_runtime_1.jsx)(Label_1.Label, { labelProps: labelProps, hidden: labelStyle === "hidden" || compound, label: label, suffix: labelSuffix, contrast: contrast, ...tid.label })), (0, components_1.maybeTooltip)({
-                title: tooltip,
-                placement: "top",
-                children: inputProps.readOnly ? ((0, jsx_runtime_1.jsxs)("div", { css: {
-                        // Use input wrapper to get common styles, but then we need to override some
-                        ...fieldStyles.inputWrapperReadOnly,
-                        ...(multiline ? Css_1.Css.fdc.aifs.gap2.$ : Css_1.Css.truncate.$),
-                        ...xss,
-                    }, "data-readonly": "true", ...tid, children: [!multiline && labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { labelProps: labelProps, label: label, ...tid.label })), multiline
-                            ? (_g = inputProps.value) === null || _g === void 0 ? void 0 : _g.split("\n\n").map((p, i) => ((0, jsx_runtime_1.jsx)("p", { 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", {})] }, j))) }, i)))
-                            : inputProps.value] })) : ((0, jsx_runtime_1.jsxs)("div", { css: {
-                        ...fieldStyles.inputWrapper,
-                        ...(inputProps.disabled ? fieldStyles.disabled : {}),
-                        ...(showFocus ? fieldStyles.focus : {}),
-                        ...(showHover ? fieldStyles.hover : {}),
-                        // Only show error styles if the field is not disabled, following the pattern that the error message is also hidden
-                        ...(errorMsg && !inputProps.disabled ? fieldStyles.error : {}),
-                        ...Css_1.Css.if(multiline).aifs.px0.mhPx(textAreaMinHeight).$,
-                    }, ...hoverProps, ref: inputWrapRef, children: [!multiline && labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { labelProps: labelProps, label: label, ...tid.label })), !multiline && startAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.fs0.br4.pr1.$, children: startAdornment }), (0, jsx_runtime_1.jsx)(ElementType, { ...(0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(labelStyle === "hidden" ? { "aria-label": label } : {}) }), ...(errorMsg ? { "aria-errormessage": errorMessageId } : {}), ref: fieldRef, rows: multiline ? 1 : undefined, css: {
-                                ...fieldStyles.input,
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { css: fieldStyles.container, ...groupProps, ...focusWithinProps, children: [label && labelStyle !== "inline" && ((0, jsx_runtime_1.jsx)(Label_1.Label, { labelProps: labelProps, hidden: labelStyle === "hidden" || compound, label: label, suffix: labelSuffix, contrast: contrast, ...tid.label })), (0, components_1.maybeTooltip)({
+                        title: tooltip,
+                        placement: "top",
+                        children: inputProps.readOnly ? ((0, jsx_runtime_1.jsxs)("div", { css: {
+                                // Use input wrapper to get common styles, but then we need to override some
+                                ...fieldStyles.inputWrapperReadOnly,
+                                ...(multiline ? Css_1.Css.fdc.aifs.gap2.$ : Css_1.Css.truncate.$),
+                                ...xss,
+                            }, "data-readonly": "true", ...tid, children: [!multiline && labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { labelProps: labelProps, label: label, ...tid.label })), multiline
+                                    ? (_g = inputProps.value) === null || _g === void 0 ? void 0 : _g.split("\n\n").map((p, i) => ((0, jsx_runtime_1.jsx)("p", { 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", {})] }, j))) }, i)))
+                                    : inputProps.value] })) : ((0, jsx_runtime_1.jsxs)("div", { css: {
+                                ...fieldStyles.inputWrapper,
                                 ...(inputProps.disabled ? fieldStyles.disabled : {}),
+                                ...(showFocus ? fieldStyles.focus : {}),
                                 ...(showHover ? fieldStyles.hover : {}),
-                                ...(multiline ? Css_1.Css.h100.p1.add("resize", "none").$ : Css_1.Css.truncate.$),
-                                ...xss,
-                            }, ...tid }), isFocused && clearable && onChange && inputProps.value && ((0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "xCircle", color: Css_1.Palette.Gray700, onClick: () => {
-                                var _a;
-                                onChange(undefined);
-                                // Reset focus to input element
-                                (_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                            } })), errorInTooltip && errorMsg && !hideErrorMessage && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.pl1.fs0.$, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "error", color: Css_1.Palette.Red600, tooltip: errorMsg }) })), !multiline && endAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.pl1.fs0.$, children: endAdornment })] })),
-            }), !compound && !inputProps.disabled && !inputProps.readOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [errorMsg && !errorInTooltip && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { id: errorMessageId, errorMsg: errorMsg, hidden: hideErrorMessage, ...tid.errorMsg })), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText, ...tid.helperText })] }))] }));
+                                // Only show error styles if the field is not disabled, following the pattern that the error message is also hidden
+                                ...(errorMsg && !inputProps.disabled ? fieldStyles.error : {}),
+                                ...Css_1.Css.if(multiline).aifs.px0.mhPx(textAreaMinHeight).$,
+                            }, ...hoverProps, ref: inputWrapRef, children: [!multiline && labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { labelProps: labelProps, label: label, ...tid.label })), !multiline && startAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.fs0.br4.pr1.$, children: startAdornment }), (0, jsx_runtime_1.jsx)(ElementType, { ...(0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(labelStyle === "hidden" ? { "aria-label": label } : {}) }), ...(errorMsg ? { "aria-errormessage": errorMessageId } : {}), ref: fieldRef, rows: multiline ? 1 : undefined, css: {
+                                        ...fieldStyles.input,
+                                        ...(inputProps.disabled ? fieldStyles.disabled : {}),
+                                        ...(showHover ? fieldStyles.hover : {}),
+                                        ...(multiline ? Css_1.Css.h100.p1.add("resize", "none").$ : Css_1.Css.truncate.$),
+                                        ...xss,
+                                    }, ...tid }), isFocused && clearable && onChange && inputProps.value && ((0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "xCircle", color: Css_1.Palette.Gray700, onClick: () => {
+                                        var _a;
+                                        onChange(undefined);
+                                        // Reset focus to input element
+                                        (_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                    } })), errorInTooltip && errorMsg && !hideErrorMessage && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.pl1.fs0.$, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "error", color: Css_1.Palette.Red600, tooltip: errorMsg }) })), !multiline && endAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.pl1.fs0.$, children: endAdornment })] })),
+                    }), labelStyle !== "left" && !compound && !inputProps.disabled && !inputProps.readOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [errorMsg && !errorInTooltip && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { id: errorMessageId, errorMsg: errorMsg, hidden: hideErrorMessage, ...tid.errorMsg })), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText, ...tid.helperText })] }))] }), labelStyle === "left" &&
+                !compound &&
+                !inputProps.disabled &&
+                !inputProps.readOnly &&
+                ((errorMsg && !errorInTooltip) || helperText) && (
+            // Reduces the margin between the error/helper text and input field
+            (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.mtPx(-8).$, children: [errorMsg && !errorInTooltip && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { id: errorMessageId, errorMsg: errorMsg, hidden: hideErrorMessage, ...tid.errorMsg })), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText, ...tid.helperText })] }))] }));
 }
 exports.TextFieldBase = TextFieldBase;

package/dist/inputs/index.d.ts

@@ -13,6 +13,6 @@ export * from "./Switch";
 export * from "./TextAreaField";
 export * from "./TextField";
 export type { TextFieldApi } from "./TextField";
+export * from "./ToggleButton";
 export * from "./ToggleChipGroup";
 export type { Value } from "./Value";
-export * from "./ToggleButton";

package/dist/inputs/index.js

@@ -28,5 +28,5 @@ __exportStar(require("./SelectField"), exports);
 __exportStar(require("./Switch"), exports);
 __exportStar(require("./TextAreaField"), exports);
 __exportStar(require("./TextField"), exports);
-__exportStar(require("./ToggleChipGroup"), exports);
 __exportStar(require("./ToggleButton"), exports);
+__exportStar(require("./ToggleChipGroup"), exports);

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

@@ -7,6 +7,7 @@ interface ListBoxProps<O, V extends Key> {
     getOptionLabel: (opt: O) => string;
     getOptionValue: (opt: O) => V;
     contrast?: boolean;
+    horizontalLayout?: boolean;
     positionProps: React.HTMLAttributes<Element>;
     loading?: boolean | (() => JSX.Element);
     disabledOptionsWithReasons?: Record<string, string | undefined>;

package/dist/inputs/internal/ListBox.js

@@ -12,7 +12,7 @@ const VirtualizedOptions_1 = require("./VirtualizedOptions");
 /** A ListBox is an internal component used by SelectField and MultiSelectField to display the list of options */
 function ListBox(props) {
     var _a;
-    const { state, listBoxRef, selectedOptions = [], getOptionLabel, getOptionValue, contrast = false, positionProps, loading, disabledOptionsWithReasons = {}, } = props;
+    const { state, listBoxRef, selectedOptions = [], getOptionLabel, getOptionValue, contrast = false, positionProps, horizontalLayout = false, loading, disabledOptionsWithReasons = {}, } = props;
     const { listBoxProps } = (0, react_aria_1.useListBox)({ disallowEmptySelection: true, ...props }, state, listBoxRef);
     const positionMaxHeight = (_a = positionProps.style) === null || _a === void 0 ? void 0 : _a.maxHeight;
     // The popoverMaxHeight will be based on the value defined by the positionProps returned from `useOverlayPosition` (which will always be a defined as a `number` based on React-Aria's `calculatePosition`).
@@ -53,7 +53,7 @@ function ListBox(props) {
         firstRender.current = false;
     }, [state.selectionManager.selectedKeys.size]);
     return ((0, jsx_runtime_1.jsxs)("div", { css: {
-            ...Css_1.Css.bgWhite.br4.w100.bshBasic.hPx(popoverHeight).df.fdc.if(contrast).bgGray700.$,
+            ...Css_1.Css.bgWhite.br4.w100.bshBasic.hPx(popoverHeight).df.fdc.if(contrast).bgGray700.if(horizontalLayout).w50.$,
             "&:hover": Css_1.Css.bshHover.$,
         }, ref: listBoxRef, ...listBoxProps, children: [isMultiSelect && state.selectionManager.selectedKeys.size > 0 && ((0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.pt2.pl2.pb1.pr1.df.bb.bGray200.add("flexWrap", "wrap").$, ref: selectedList, children: selectedOptions.map((o) => ((0, jsx_runtime_1.jsx)(ListBoxToggleChip_1.ListBoxToggleChip, { state: state, option: o, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o)))) })), (0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.fg1.$, children: hasSections ? ([...state.collection].map((section) => ((0, jsx_runtime_1.jsx)(ListBoxSection_1.ListBoxSection, { section: section, state: state, contrast: contrast, onListHeightChange: onListHeightChange, popoverHeight: popoverHeight, 
                     // Only scroll on focus if using VirtualFocus (used for ComboBoxState (SelectField), but not SelectState (ChipSelectField))

package/dist/inputs/internal/SelectFieldBase.js

@@ -247,7 +247,7 @@ function SelectFieldBase(props) {
         // Ensures the menu never gets too small.
         minWidth: 200,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).if(otherProps.labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, { ...otherProps, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, state: state, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200, children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, { ...listBoxProps, positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, loading: fieldState.optionsLoading, disabledOptionsWithReasons: disabledOptionsWithReasons }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).if(otherProps.labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, { ...otherProps, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, state: state, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200, children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, { ...listBoxProps, positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, horizontalLayout: otherProps.labelStyle === "left", loading: fieldState.optionsLoading, disabledOptionsWithReasons: disabledOptionsWithReasons }) }))] }));
 }
 exports.SelectFieldBase = SelectFieldBase;
 function getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.230.1",
+  "version": "2.231.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -115,8 +115,8 @@
     "jest-watch-typeahead": "^0.6.5",
     "mobx": "^6.3.2",
     "mobx-react": "^7.2.0",
-    "prettier": "^2.2.1",
-    "prettier-plugin-organize-imports": "^1.1.1",
+    "prettier": "^2.8.1",
+    "prettier-plugin-organize-imports": "^3.2.1",
     "react": "^16.14.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^16.14.0",