@homebound/beam 2.227.1 → 2.228.0

package/dist/components/Filters/BooleanFilter.js

@@ -14,7 +14,7 @@ class BooleanFilter extends BaseFilter_1.BaseFilter {
         const { options = defaultBooleanOptions, label, defaultValue, ...props } = this.props;
         return ((0, jsx_runtime_1.jsx)(SelectField_1.SelectField, { ...props, compact: !vertical, label: this.label, 
             // We use `String(value)` so that `undefined` becomes "undefined"
-            value: String(value), hideLabel: inModal, inlineLabel: !inModal && !vertical, sizeToContent: !inModal && !vertical, options: options, getOptionValue: (o) => String(o[0]), getOptionLabel: (o) => o[1], onSelect: (value) => {
+            value: String(value), labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above", sizeToContent: !inModal && !vertical, options: options, getOptionValue: (o) => String(o[0]), getOptionLabel: (o) => o[1], onSelect: (value) => {
                 // Change our string "true" / "false" / "undefined" back to boolean | undefined
                 const parsedValue = value === "undefined" ? undefined : value === "true";
                 setValue(parsedValue);

package/dist/components/Filters/DateFilter.js

@@ -22,6 +22,6 @@ class DateFilter extends BaseFilter_1.BaseFilter {
                                 ...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`] }), (0, jsx_runtime_1.jsx)(inputs_1.DateField, { 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`] })] })] }));
+                            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, labelStyle: !inModal && !vertical ? "inline" : inModal || vertical ? "hidden" : "above", nothingSelectedText: "Any", ...tid[`${(0, defaultTestId_1.defaultTestId)(this.label)}_dateOperation`] }), (0, jsx_runtime_1.jsx)(inputs_1.DateField, { compact: true, labelStyle: "inline", 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`] })] })] }));
     }
 }

package/dist/components/Filters/DateRangeFilter.js

@@ -13,7 +13,7 @@ exports.dateRangeFilter = dateRangeFilter;
 class DateRangeFilter extends BaseFilter_1.BaseFilter {
     render(value, setValue, tid, inModal, vertical) {
         const { label, placeholderText, disabledDays, testFieldLabel, defaultValue } = this.props;
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [vertical && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }), (0, jsx_runtime_1.jsx)(inputs_1.DateRangeField, { compact: true, inlineLabel: true, isRangeFilterField: true, placeholder: placeholderText, label: testFieldLabel !== null && testFieldLabel !== void 0 ? testFieldLabel : "Date", 
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [vertical && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }), (0, jsx_runtime_1.jsx)(inputs_1.DateRangeField, { compact: true, labelStyle: "inline", isRangeFilterField: true, placeholder: placeholderText, label: testFieldLabel !== null && testFieldLabel !== void 0 ? testFieldLabel : "Date", 
                     // Making sure that DateRange is Date type and not string before passing. Will never have undefined from/to
                     value: (value === null || value === void 0 ? void 0 : value.value)
                         ? { from: new Date(value.value.from), to: new Date(value.value.to) }

package/dist/components/Filters/Filters.js

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

package/dist/components/Filters/MultiFilter.js

@@ -21,7 +21,7 @@ class MultiFilter extends BaseFilter_1.BaseFilter {
                 }, values: value || [], hideLabel: true, ...tid[(0, defaultTestId_1.defaultTestId)(this.label)] }));
         }
         const { defaultValue, ...props } = this.props;
-        return ((0, jsx_runtime_1.jsx)(MultiSelectField_1.MultiSelectField, { ...props, compact: !vertical, label: this.label, values: value || [], hideLabel: inModal, inlineLabel: !inModal && !vertical, sizeToContent: !inModal && !vertical, onSelect: (values) => {
+        return ((0, jsx_runtime_1.jsx)(MultiSelectField_1.MultiSelectField, { ...props, compact: !vertical, label: this.label, values: value || [], labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above", sizeToContent: !inModal && !vertical, onSelect: (values) => {
                 setValue(values.length === 0 ? undefined : values);
             }, nothingSelectedText: "All", ...this.testId(tid) }));
     }

package/dist/components/Filters/NumberRangeFilter.js

@@ -18,18 +18,18 @@ class NumberRangeFilter extends BaseFilter_1.BaseFilter {
         const { label, numberFieldType } = this.props;
         const min = (_a = value === null || value === void 0 ? void 0 : value.min) !== null && _a !== void 0 ? _a : undefined;
         const max = (_b = value === null || value === void 0 ? void 0 : value.max) !== null && _b !== void 0 ? _b : undefined;
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [vertical && ((0, jsx_runtime_1.jsxs)("div", { ...tid, children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.pb1.$, children: (0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { inlineLabel: true, clearable: true, label: "Min", value: min, type: numberFieldType, onChange: (minVal) => {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [vertical && ((0, jsx_runtime_1.jsxs)("div", { ...tid, children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.pb1.$, children: (0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { labelStyle: "inline", clearable: true, label: "Min", value: min, type: numberFieldType, onChange: (minVal) => {
                                     const maxValue = max ? { max } : {};
                                     setValue(minVal || max ? { min: minVal, ...maxValue } : undefined);
-                                }, ...tid[`${(0, defaultTestId_1.defaultTestId)(label)}_min_vertical`] }) }), (0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { inlineLabel: true, clearable: true, label: "Max", value: max, type: numberFieldType, onChange: (maxVal) => {
+                                }, ...tid[`${(0, defaultTestId_1.defaultTestId)(label)}_min_vertical`] }) }), (0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { labelStyle: "inline", clearable: true, label: "Max", value: max, type: numberFieldType, onChange: (maxVal) => {
                                 const minValue = min ? { min } : {};
                                 setValue(maxVal || min ? { max: maxVal, ...minValue } : undefined);
-                            }, ...tid[`${(0, defaultTestId_1.defaultTestId)(label)}_max_vertical`] })] })), !vertical && ((0, jsx_runtime_1.jsxs)(CompoundField_1.CompoundField, { ...tid, children: [(0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { compact: true, sizeToContent: !inModal, inlineLabel: true, clearable: true, 
+                            }, ...tid[`${(0, defaultTestId_1.defaultTestId)(label)}_max_vertical`] })] })), !vertical && ((0, jsx_runtime_1.jsxs)(CompoundField_1.CompoundField, { ...tid, children: [(0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { compact: true, sizeToContent: !inModal, labelStyle: "inline", clearable: true, 
                             // When in horizontal view, we combine the filter label with the min / max labels as all filter labels are displayed inline
                             label: !inModal ? `${label} Min` : "Min", value: min, type: numberFieldType, onChange: (minVal) => {
                                 const maxValue = max ? { max } : {};
                                 setValue(minVal || max ? { min: minVal, ...maxValue } : undefined);
-                            }, ...tid[`${(0, defaultTestId_1.defaultTestId)(label)}_min`] }), (0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { compact: true, sizeToContent: !inModal, inlineLabel: true, clearable: true, label: !inModal ? `${label} Max` : "Max", value: max, type: numberFieldType, onChange: (maxVal) => {
+                            }, ...tid[`${(0, defaultTestId_1.defaultTestId)(label)}_min`] }), (0, jsx_runtime_1.jsx)(NumberField_1.NumberField, { compact: true, sizeToContent: !inModal, labelStyle: "inline", clearable: true, label: !inModal ? `${label} Max` : "Max", value: max, type: numberFieldType, onChange: (maxVal) => {
                                 const minValue = min ? { min } : {};
                                 setValue(maxVal || min ? { max: maxVal, ...minValue } : undefined);
                             }, ...tid[`${(0, defaultTestId_1.defaultTestId)(label)}_max`] })] }))] }));

package/dist/components/Filters/SingleFilter.js

@@ -16,6 +16,6 @@ class SingleFilter extends BaseFilter_1.BaseFilter {
         const options = Array.isArray(maybeOptions)
             ? [allOption, ...maybeOptions]
             : { ...maybeOptions, initial: [allOption, ...maybeOptions.initial] };
-        return ((0, jsx_runtime_1.jsx)(SelectField_1.SelectField, { ...props, options: options, getOptionValue: (o) => (o === allOption ? undefined : getOptionValue(o)), getOptionLabel: (o) => (o === allOption ? "All" : getOptionLabel(o)), compact: !vertical, value: value, label: this.label, inlineLabel: !inModal && !vertical, hideLabel: inModal, sizeToContent: !inModal && !vertical, nothingSelectedText: "All", onSelect: (value) => setValue(value || undefined), ...this.testId(tid) }));
+        return ((0, jsx_runtime_1.jsx)(SelectField_1.SelectField, { ...props, options: options, getOptionValue: (o) => (o === allOption ? undefined : getOptionValue(o)), getOptionLabel: (o) => (o === allOption ? "All" : getOptionLabel(o)), compact: !vertical, value: value, label: this.label, labelStyle: inModal ? "hidden" : !inModal && !vertical ? "inline" : "above", sizeToContent: !inModal && !vertical, nothingSelectedText: "All", onSelect: (value) => setValue(value || undefined), ...this.testId(tid) }));
     }
 }

package/dist/components/Layout/ScrollableContent.d.ts

@@ -6,6 +6,14 @@ interface ScrollableContentProps {
     omitBottomPadding?: true;
     bgColor?: Palette;
 }
-/** Helper component for placing scrollable content within a `ScrollableParent`. */
+/**
+ * Helper component for placing scrollable content within a `ScrollableParent`.
+ *
+ * See the docs on `ScrollableParent.
+ *
+ * Note that you should not use this "just to get a scrollbar", instead just use `Css.overflowAuto.$`
+ * or what not; this is only for implementing page-level patterns that need multiple stickied
+ * components (page header, tab bar, table filter & actions).
+ */
 export declare function ScrollableContent(props: ScrollableContentProps): ReactPortal | JSX.Element;
 export {};

package/dist/components/Layout/ScrollableContent.js

@@ -6,7 +6,15 @@ const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const ScrollableParent_1 = require("./ScrollableParent");
 const Css_1 = require("../../Css");
-/** Helper component for placing scrollable content within a `ScrollableParent`. */
+/**
+ * Helper component for placing scrollable content within a `ScrollableParent`.
+ *
+ * See the docs on `ScrollableParent.
+ *
+ * Note that you should not use this "just to get a scrollbar", instead just use `Css.overflowAuto.$`
+ * or what not; this is only for implementing page-level patterns that need multiple stickied
+ * components (page header, tab bar, table filter & actions).
+ */
 function ScrollableContent(props) {
     const { children, virtualized = false, omitBottomPadding, bgColor } = props;
     const { scrollableEl, setPortalTick, pl, pr } = (0, ScrollableParent_1.useScrollableParent)();

package/dist/components/Layout/ScrollableParent.d.ts

@@ -10,6 +10,30 @@ interface ScrollableParentContextProviderProps {
     xss?: Properties;
     tagName?: keyof JSX.IntrinsicElements;
 }
+/**
+ * Provides a pattern for implementing "multiple sticky" components.
+ *
+ * In css, `position: sticky` is great for pinning 1 element to the top of a container.
+ *
+ * However, in UX patterns, we're often asked to pin multiple DOM elements that are actually
+ * spread across multiple React components. For example:
+ *
+ * - Sticky a Header (in FooPage)
+ * - Sticky the table filter & actions (in FooTable)
+ * - Sticky the table header row(s) (in GridTable)
+ *
+ * Historically the way we did this was passing `stickyOffset`s around, where the header would be
+ * `top: 0px`, the filter & actions would be `top: ${headerPx}px`, and the table header rows would
+ * be `top: ${headerPx + filterActionsPx}px`.
+ *
+ * However, this is brittle as the `headerPx` / `filterActionsPx` are likely dynamic.
+ *
+ * `ScrollableParent` solves this by putting all the stickied content (except the table header rows)
+ * into a single div, and then having the page use `ScrollableContent` to mark what should actually
+ * scroll, which then we "pull up" to be a sibling div of "everything that was stickied".
+ *
+ * See [this miro](https://miro.com/app/board/o9J_l-FQ-RU=/) and how we need to "cut the component in half".
+ */
 export declare function ScrollableParent(props: PropsWithChildren<ScrollableParentContextProviderProps>): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function useScrollableParent(): ScrollableParentContextProps;
 export declare const scrollContainerBottomPadding: {

package/dist/components/Layout/ScrollableParent.js

@@ -10,6 +10,30 @@ const ScrollableParentContext = (0, react_1.createContext)({
     pl: 0,
     setPortalTick: (v) => { },
 });
+/**
+ * Provides a pattern for implementing "multiple sticky" components.
+ *
+ * In css, `position: sticky` is great for pinning 1 element to the top of a container.
+ *
+ * However, in UX patterns, we're often asked to pin multiple DOM elements that are actually
+ * spread across multiple React components. For example:
+ *
+ * - Sticky a Header (in FooPage)
+ * - Sticky the table filter & actions (in FooTable)
+ * - Sticky the table header row(s) (in GridTable)
+ *
+ * Historically the way we did this was passing `stickyOffset`s around, where the header would be
+ * `top: 0px`, the filter & actions would be `top: ${headerPx}px`, and the table header rows would
+ * be `top: ${headerPx + filterActionsPx}px`.
+ *
+ * However, this is brittle as the `headerPx` / `filterActionsPx` are likely dynamic.
+ *
+ * `ScrollableParent` solves this by putting all the stickied content (except the table header rows)
+ * into a single div, and then having the page use `ScrollableContent` to mark what should actually
+ * scroll, which then we "pull up" to be a sibling div of "everything that was stickied".
+ *
+ * See [this miro](https://miro.com/app/board/o9J_l-FQ-RU=/) and how we need to "cut the component in half".
+ */
 function ScrollableParent(props) {
     const { children, xss, tagName: Tag = "div" } = props;
     const scrollableEl = (0, react_1.useMemo)(() => {

package/dist/components/Modal/TestModalContent.js

@@ -24,7 +24,7 @@ function TestModalContent(props) {
     const [date, setDate] = (0, react_1.useState)(formStateDomain_1.jan1);
     const [internalValue, setValue] = (0, react_1.useState)("");
     const { triggerNotice } = (0, Snackbar_1.useSnackbar)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: props.withTag ? ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.aic.$, children: [(0, jsx_runtime_1.jsx)("span", { children: "Modal Title with Tag" }), (0, jsx_runtime_1.jsx)(Tag_1.Tag, { text: "In progress", type: "info", xss: Css_1.Css.ml1.$ })] })) : props.withTextArea ? ((0, jsx_runtime_1.jsx)(inputs_1.TextAreaField, { label: "Title", placeholder: "Test title", value: internalValue, onChange: (v) => setValue(v), preventNewLines: true, hideLabel: true, borderless: true, xss: Css_1.Css.xl.$ })) : ("The title of the modal that might wrap") }), (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.fdc.aifs.$, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "More", onClick: () => setNumSentences(numSentences + 2) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: () => setNumSentences(0) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Primary", onClick: () => setPrimaryDisabled(!primaryDisabled) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Trigger Snackbar", onClick: () => triggerNotice({ message: "Snackbar message" }) }), showLeftAction && ((0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Left Action", onClick: () => setLeftActionDisabled(!leftActionDisabled) }))] }), (0, jsx_runtime_1.jsx)("p", { children: "The body content of the modal. This content can be anything!".repeat(numSentences) })] }), withDateField && (0, jsx_runtime_1.jsx)(inputs_1.DateField, { value: date, label: "Date", onChange: setDate })] }), (0, jsx_runtime_1.jsxs)(Modal_1.ModalFooter, { xss: showLeftAction ? Css_1.Css.jcsb.$ : undefined, children: [showLeftAction && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: (0, addon_actions_1.action)("Clear Action"), variant: "tertiary", disabled: leftActionDisabled }) })), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", onClick: closeModal, variant: "tertiary" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Apply", onClick: (0, addon_actions_1.action)("Primary action"), disabled: primaryDisabled })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: props.withTag ? ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.aic.$, children: [(0, jsx_runtime_1.jsx)("span", { children: "Modal Title with Tag" }), (0, jsx_runtime_1.jsx)(Tag_1.Tag, { text: "In progress", type: "info", xss: Css_1.Css.ml1.$ })] })) : props.withTextArea ? ((0, jsx_runtime_1.jsx)(inputs_1.TextAreaField, { label: "Title", placeholder: "Test title", value: internalValue, onChange: (v) => setValue(v), preventNewLines: true, labelStyle: "hidden", borderless: true, xss: Css_1.Css.xl.$ })) : ("The title of the modal that might wrap") }), (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.fdc.aifs.$, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "More", onClick: () => setNumSentences(numSentences + 2) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: () => setNumSentences(0) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Primary", onClick: () => setPrimaryDisabled(!primaryDisabled) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Trigger Snackbar", onClick: () => triggerNotice({ message: "Snackbar message" }) }), showLeftAction && ((0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Left Action", onClick: () => setLeftActionDisabled(!leftActionDisabled) }))] }), (0, jsx_runtime_1.jsx)("p", { children: "The body content of the modal. This content can be anything!".repeat(numSentences) })] }), withDateField && (0, jsx_runtime_1.jsx)(inputs_1.DateField, { value: date, label: "Date", onChange: setDate })] }), (0, jsx_runtime_1.jsxs)(Modal_1.ModalFooter, { xss: showLeftAction ? Css_1.Css.jcsb.$ : undefined, children: [showLeftAction && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: (0, addon_actions_1.action)("Clear Action"), variant: "tertiary", disabled: leftActionDisabled }) })), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", onClick: closeModal, variant: "tertiary" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Apply", onClick: (0, addon_actions_1.action)("Primary action"), disabled: primaryDisabled })] })] })] }));
 }
 exports.TestModalContent = TestModalContent;
 function TestModalFilterTable() {

package/dist/components/PresentationContext.d.ts

@@ -3,7 +3,8 @@ import { GridStyle } from "./Table";
 import { Typography } from "../Css";
 export interface PresentationFieldProps {
     numberAlignment?: "left" | "right";
-    hideLabel?: boolean;
+    /** Sets the label position or visibility. Defaults to "above" */
+    labelStyle?: "inline" | "hidden" | "above" | "left";
     labelSuffix?: LabelSuffixStyle;
     borderless?: boolean;
     compact?: boolean;

package/dist/components/Table/GridTable.js

@@ -216,7 +216,7 @@ function GridTable(props) {
     const borderless = (_a = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _a === void 0 ? void 0 : _a.borderless;
     const typeScale = (_b = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _b === void 0 ? void 0 : _b.typeScale;
     const fieldProps = (0, react_1.useMemo)(() => ({
-        hideLabel: true,
+        labelStyle: "hidden",
         numberAlignment: "right",
         compact: true,
         errorInTooltip: true,

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

@@ -37,6 +37,6 @@ function EditColumnsButton(props) {
     return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, { ...props, menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef, ...tid, children: (0, jsx_runtime_1.jsxs)("div", { css: {
                 ...Css_1.Css.bgWhite.py5.px3.maxwPx(380).bshBasic.$,
                 "&:hover": Css_1.Css.bshHover.$,
-            }, children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.gray500.xsSb.mb1.ttu.$, children: title || "Select columns to show" }), (0, jsx_runtime_1.jsx)(inputs_1.CheckboxGroup, { label: title || "Select columns to show", onChange: (values) => setSelectedValues(values), values: selectedValues, options: options, columns: 2, hideLabel: true }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mt1.$, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "tertiary", label: "Clear selections", onClick: () => setSelectedValues([]) }) })] }) }));
+            }, children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.gray500.xsSb.mb1.ttu.$, children: title || "Select columns to show" }), (0, jsx_runtime_1.jsx)(inputs_1.CheckboxGroup, { label: title || "Select columns to show", onChange: (values) => setSelectedValues(values), values: selectedValues, options: options, columns: 2, labelStyle: "hidden" }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.mt1.$, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "tertiary", label: "Clear selections", onClick: () => setSelectedValues([]) }) })] }) }));
 }
 exports.EditColumnsButton = EditColumnsButton;

package/dist/components/internal/Menu.js

@@ -20,7 +20,7 @@ function Menu(props) {
         getChildren: (item) => { var _a; return (_a = item.items) !== null && _a !== void 0 ? _a : []; },
     });
     const [search, setSearch] = (0, react_1.useState)(undefined);
-    let { contains } = (0, react_aria_1.useFilter)({
+    const { contains } = (0, react_aria_1.useFilter)({
         sensitivity: "base",
     });
     // Filter our tree data items based on the search term
@@ -62,6 +62,6 @@ function Menu(props) {
             css: {
                 ...Css_1.Css.df.fdc.myPx(4).bgWhite.outline0.br4.bshBasic.maxh("inherit").overflowAuto.$,
                 "&:hover": Css_1.Css.bshHover.$,
-            }, children: [searchable && ((0, jsx_runtime_1.jsx)(MenuSearchField_1.MenuSearchField, { label: "", value: search, placeholder: "Search...", inlineLabel: true, onChange: setSearch, ...tid })), (0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.$, ...menuProps, ref: menuRef, ...tid.menu, children: [...state.collection].map((item) => ((0, jsx_runtime_1.jsx)(MenuSection_1.MenuSectionImpl, { section: item, state: state, onClose: onClose, ...tid }, item.key))) })] }) }));
+            }, children: [searchable && ((0, jsx_runtime_1.jsx)(MenuSearchField_1.MenuSearchField, { label: "", value: search, placeholder: "Search...", labelStyle: "inline", onChange: setSearch, ...tid })), (0, jsx_runtime_1.jsx)("ul", { css: Css_1.Css.listReset.$, ...menuProps, ref: menuRef, ...tid.menu, children: [...state.collection].map((item) => ((0, jsx_runtime_1.jsx)(MenuSection_1.MenuSectionImpl, { section: item, state: state, onClose: onClose, ...tid }, item.key))) })] }) }));
 }
 exports.Menu = Menu;

package/dist/forms/FormStateApp.js

@@ -68,7 +68,7 @@ function createColumns(formState) {
         { header: "#", data: ({ id }) => (0, jsx_runtime_1.jsx)("span", { children: id.value }) },
         {
             header: "Title",
-            data: ({ title }) => (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { label: "Book Title", hideLabel: true, compact: true, field: title }),
+            data: ({ title }) => (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { label: "Book Title", labelStyle: "hidden", compact: true, field: title }),
         },
         {
             header: "Actions",

package/dist/inputs/CheckboxGroup.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { PresentationFieldProps } from "../components/PresentationContext";
 export interface CheckboxGroupItemOption {
     /** Additional text displayed below label */
     description?: string;
@@ -7,7 +8,7 @@ export interface CheckboxGroupItemOption {
     /** The value of the CheckboxGroup item, stored in value array in state. */
     value: string;
 }
-export interface CheckboxGroupProps {
+export interface CheckboxGroupProps extends Pick<PresentationFieldProps, "labelStyle"> {
     label: string;
     /** Called when a checkbox is selected or deselected */
     onChange: (values: string[]) => void;
@@ -23,7 +24,5 @@ export interface CheckboxGroupProps {
     onFocus?: () => void;
     /** Number of columns to display checkboxes */
     columns?: number;
-    /** Hide label if it is not needed */
-    hideLabel?: boolean;
 }
 export declare function CheckboxGroup(props: CheckboxGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/CheckboxGroup.js

@@ -7,16 +7,19 @@ const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
 const HelperText_1 = require("../components/HelperText");
 const Label_1 = require("../components/Label");
+const PresentationContext_1 = require("../components/PresentationContext");
 const Css_1 = require("../Css");
 const CheckboxBase_1 = require("./CheckboxBase");
 const ErrorMessage_1 = require("./ErrorMessage");
 const utils_1 = require("../utils");
 function CheckboxGroup(props) {
-    const { options, label, values, errorMsg, helperText, onBlur, onFocus, columns = 1, hideLabel = false } = props;
+    var _a;
+    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
+    const { options, label, labelStyle = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelStyle) !== null && _a !== void 0 ? _a : "above", values, errorMsg, helperText, onBlur, onFocus, columns = 1, } = props;
     const state = (0, react_stately_1.useCheckboxGroupState)({ ...props, value: values });
     const { groupProps, labelProps } = (0, react_aria_1.useCheckboxGroup)(props, state);
     const tid = (0, utils_1.useTestIds)(props);
-    return ((0, jsx_runtime_1.jsxs)("div", { ...groupProps, onBlur: onBlur, onFocus: onFocus, ...tid, children: [!hideLabel && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, ...labelProps, ...tid.label }), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.dg.gtc(`repeat(${columns}, auto)`).gap2.$, children: options.map((option) => ((0, jsx_runtime_1.jsx)(CheckboxGroupItem, { ...option, groupState: state, selected: state.value.includes(option.value) }, option.value))) }), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { errorMsg: errorMsg, ...tid.errorMsg }), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText, ...tid.helperText })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...groupProps, css: Css_1.Css.if(labelStyle === "left").df.fdr.$, onBlur: onBlur, onFocus: onFocus, ...tid, children: [labelStyle !== "hidden" && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.if(labelStyle === "left").w50.$, children: (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, ...labelProps, ...tid.label }) })), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.dg.gtc(`repeat(${columns}, auto)`).gap2.$, children: options.map((option) => ((0, jsx_runtime_1.jsx)(CheckboxGroupItem, { ...option, groupState: state, selected: state.value.includes(option.value) }, option.value))) }), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { errorMsg: errorMsg, ...tid.errorMsg }), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText, ...tid.helperText })] }));
 }
 exports.CheckboxGroup = CheckboxGroup;
 function CheckboxGroupItem(props) {

package/dist/inputs/DateFields/DateFieldBase.d.ts

@@ -3,7 +3,7 @@ import { Matcher } from "react-day-picker";
 import { DateFieldMode, dateFormats } from "./utils";
 import { TextFieldBaseProps } from "../TextFieldBase";
 import { DateRange } from "../../types";
-export interface DateFieldBaseProps extends Pick<TextFieldBaseProps<{}>, "borderless" | "visuallyDisabled" | "hideLabel" | "compact"> {
+export interface DateFieldBaseProps extends Pick<TextFieldBaseProps<{}>, "borderless" | "visuallyDisabled" | "labelStyle" | "compact"> {
     label: string;
     /** Called when the component loses focus */
     onBlur?: () => void;
@@ -16,8 +16,6 @@ export interface DateFieldBaseProps extends Pick<TextFieldBaseProps<{}>, "border
     /** Whether the field is readOnly. If a ReactNode, it's treated as a "readOnly reason" that's shown in a tooltip. */
     readOnly?: boolean | ReactNode;
     helperText?: string | ReactNode;
-    /** Renders the label inside the input field, i.e. for filters. */
-    inlineLabel?: boolean;
     placeholder?: string;
     format?: keyof typeof dateFormats;
     iconLeft?: boolean;

package/dist/inputs/DateFields/DateFieldBase.js

@@ -18,7 +18,7 @@ function DateFieldBase(props) {
     var _a;
     const { label, disabled, required, value, onFocus, onBlur, 
     // Pull `onChange` out of the props, but we're not directly using it. Do not want to keep it in `...others`
-    onChange: _onChange, errorMsg, helperText, inlineLabel = false, readOnly, format = "short", iconLeft = false, hideCalendarIcon = false, disabledDays, onEnter, defaultOpen, mode, isRangeFilterField = false, ...others } = props;
+    onChange: _onChange, errorMsg, helperText, readOnly, format = "short", iconLeft = false, hideCalendarIcon = false, disabledDays, onEnter, defaultOpen, mode, isRangeFilterField = false, ...others } = props;
     const isRangeMode = mode === "range";
     const inputRef = (0, react_1.useRef)(null);
     const inputWrapRef = (0, react_1.useRef)(null);
@@ -160,7 +160,7 @@ function DateFieldBase(props) {
             } })) }));
     const calendarButton = ((0, jsx_runtime_1.jsx)("button", { ref: buttonRef, ...buttonProps, disabled: isDisabled, css: Css_1.Css.if(isDisabled).cursorNotAllowed.$, tabIndex: -1, ...tid.calendarButton, children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "calendar", color: isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Gray700 }) }));
     const EndFieldButtons = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRangeFilterField && clearButton, !hideCalendarIcon && calendarButton] }));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...textFieldProps, errorMsg: errorMsg, helperText: helperText, required: required, labelProps: labelProps, inputProps: { ...inputProps, size: inputSize }, inputRef: inputRef, inputWrapRef: inputWrapRef, inlineLabel: inlineLabel, onChange: (v) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...textFieldProps, errorMsg: errorMsg, helperText: helperText, required: required, labelProps: labelProps, inputProps: { ...inputProps, size: inputSize }, inputRef: inputRef, inputWrapRef: inputWrapRef, onChange: (v) => {
                     // hide the calendar if the user is manually entering the date
                     state.close();
                     if (v) {

package/dist/inputs/NumberField.d.ts

@@ -1,10 +1,10 @@
 import { ReactNode } from "react";
+import { PresentationFieldProps } from "../components/PresentationContext";
 import { Xss } from "../Css";
 export type NumberFieldType = "cents" | "dollars" | "percent" | "basisPoints" | "days";
-export interface NumberFieldProps {
+export interface NumberFieldProps extends Pick<PresentationFieldProps, "labelStyle"> {
     label: string;
     /** If set, the label will be defined as 'aria-label` on the input element */
-    hideLabel?: boolean;
     type?: NumberFieldType;
     value: number | undefined;
     onChange: (value: number | undefined) => void;
@@ -33,7 +33,6 @@ export interface NumberFieldProps {
     useGrouping?: boolean;
     hideErrorMessage?: boolean;
     borderless?: boolean;
-    inlineLabel?: boolean;
     sizeToContent?: boolean;
 }
 export declare function NumberField(props: NumberFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/RadioGroupField.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { PresentationFieldProps } from "../components/PresentationContext";
 export interface RadioFieldOption<K extends string> {
     /** The label for a specific option, i.e. "Cheddar". */
     label: string;
@@ -7,10 +8,9 @@ export interface RadioFieldOption<K extends string> {
     /** The undisplayed value, i.e. an id of some sort. */
     value: K;
 }
-export interface RadioGroupFieldProps<K extends string> {
+export interface RadioGroupFieldProps<K extends string> extends Pick<PresentationFieldProps, "labelStyle"> {
     /** The label for the choice itself, i.e. "Favorite Cheese". */
     label: string;
-    hideLabel?: boolean;
     /** The currently selected option value (i.e. an id). */
     value: K | undefined;
     /** Called when an option is selected. We don't support unselecting. */

package/dist/inputs/RadioGroupField.js

@@ -20,7 +20,7 @@ let nextNameId = 0;
  * TODO: Add hover (non selected and selected) styles
  */
 function RadioGroupField(props) {
-    const { label, hideLabel, value, onChange, options, disabled = false, errorMsg, helperText, ...otherProps } = props;
+    const { label, labelStyle, value, onChange, options, disabled = false, errorMsg, helperText, ...otherProps } = props;
     // useRadioGroupState uses a random group name, so use our name
     const name = (0, react_1.useMemo)(() => `radio-group-${++nextNameId}`, []);
     const state = (0, react_stately_1.useRadioGroupState)({
@@ -37,8 +37,8 @@ function RadioGroupField(props) {
     // max-width is dependent on having descriptions
     const anyDescriptions = options.some((o) => !!o.description);
     return (
-    // width of `max-content` is used to limit invisible label clicking
-    (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.w("max-content").maxw(anyDescriptions ? "344px" : "320px").$, children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, ...labelProps, ...tid.label, hidden: hideLabel }), (0, jsx_runtime_1.jsx)("div", { ...radioGroupProps, children: options.map((option) => ((0, jsx_runtime_1.jsx)(Radio, { parentId: name, option: option, state: state, ...otherProps, ...tid[option.value] }, option.value))) }), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { errorMsg: errorMsg, ...tid.errorMsg }), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText })] }));
+    // default styling to position `<Label />` above.
+    (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.gap1.aifs.if(labelStyle === "left").fdr.gap2.jcsb.$, children: [(0, jsx_runtime_1.jsx)(Label_1.Label, { label: label, ...labelProps, ...tid.label, hidden: labelStyle === "hidden" }), (0, jsx_runtime_1.jsxs)("div", { ...radioGroupProps, children: [options.map((option) => ((0, jsx_runtime_1.jsx)(Radio, { parentId: name, option: option, state: state, ...otherProps, ...tid[option.value] }, option.value))), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { errorMsg: errorMsg, ...tid.errorMsg }), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { helperText: helperText })] })] }));
 }
 exports.RadioGroupField = RadioGroupField;
 // Not meant to be standalone, but its own component so it can use hooks

package/dist/inputs/Switch.d.ts

@@ -9,7 +9,7 @@ export interface SwitchProps {
     /** Input label */
     label: string;
     /** Where to put the label. */
-    labelStyle?: "form" | "inline" | "filter";
+    labelStyle?: "form" | "inline" | "filter" | "hidden" | "left";
     /** Whether or not to hide the label */
     hideLabel?: boolean;
     /** Handler when the interactive element state changes. */

package/dist/inputs/Switch.js

@@ -25,10 +25,11 @@ function Switch(props) {
         children: ((0, jsx_runtime_1.jsxs)("label", { ...hoverProps, css: {
                 ...Css_1.Css.relative.cursorPointer.df.w("max-content").smMd.selectNone.$,
                 ...(labelStyle === "form" && Css_1.Css.fdc.$),
+                ...(labelStyle === "left" && Css_1.Css.w100.fdr.$),
                 ...(labelStyle === "inline" && Css_1.Css.gap2.aic.$),
                 ...(labelStyle === "filter" && Css_1.Css.jcsb.gap1.aic.w("auto").sm.$),
                 ...(isDisabled && Css_1.Css.cursorNotAllowed.gray400.$),
-            }, "aria-label": label, children: [!hideLabel && labelStyle === "form" && (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }), !hideLabel && labelStyle === "filter" && (0, jsx_runtime_1.jsx)("span", { children: label }), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", css: {
+            }, "aria-label": label, children: [(labelStyle === "form" || labelStyle === "left") && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.if(labelStyle === "left").w50.$, children: (0, jsx_runtime_1.jsx)(Label_1.Label, { label: label }) })), labelStyle === "filter" && (0, jsx_runtime_1.jsx)("span", { children: label }), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", css: {
                         ...Css_1.Css.wPx(40).hPx(toggleHeight(compact)).bgGray200.br12.relative.transition.$,
                         ...(isHovered && exports.switchHoverStyles),
                         ...(isKeyboardFocus && exports.switchFocusStyles),
@@ -39,7 +40,7 @@ function Switch(props) {
                             ...switchCircleDefaultStyles(compact),
                             ...(isDisabled && Css_1.Css.bgGray100.$),
                             ...(isSelected && switchCircleSelectedStyles(compact)),
-                        }, children: withIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: isSelected ? "check" : "x", color: isSelected ? Css_1.Palette.LightBlue700 : Css_1.Palette.Gray400 })) }) }), !hideLabel && labelStyle === "inline" && ((0, jsx_runtime_1.jsx)("span", { css: {
+                        }, children: withIcon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: isSelected ? "check" : "x", color: isSelected ? Css_1.Palette.LightBlue700 : Css_1.Palette.Gray400 })) }) }), labelStyle === "inline" && ((0, jsx_runtime_1.jsx)("span", { css: {
                         // LineHeight is conditionally applied to handle compact version text alignment
                         ...Css_1.Css.if(compact).add("lineHeight", "1").$,
                     }, children: label })), (0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...inputProps, ...focusProps }) })] })),

package/dist/inputs/TextField.d.ts

@@ -3,7 +3,6 @@ import { Only } from "../Css";
 import { BeamTextFieldProps, TextFieldXss } from "../interfaces";
 export interface TextFieldProps<X> extends BeamTextFieldProps<X> {
     compact?: boolean;
-    inlineLabel?: boolean;
     clearable?: boolean;
     api?: MutableRefObject<TextFieldApi | undefined>;
     onEnter?: VoidFunction;

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 { Only } from "../Css";
 import { BeamTextFieldProps, TextFieldXss } from "../interfaces";
-export interface TextFieldBaseProps<X> extends Pick<BeamTextFieldProps<X>, "label" | "required" | "errorMsg" | "errorInTooltip" | "onBlur" | "onFocus" | "helperText" | "hideLabel" | "placeholder" | "compact" | "borderless" | "visuallyDisabled" | "xss">, Partial<Pick<BeamTextFieldProps<X>, "onChange">> {
+export interface TextFieldBaseProps<X> extends Pick<BeamTextFieldProps<X>, "label" | "required" | "errorMsg" | "errorInTooltip" | "onBlur" | "onFocus" | "helperText" | "labelStyle" | "placeholder" | "compact" | "borderless" | "visuallyDisabled" | "xss">, Partial<Pick<BeamTextFieldProps<X>, "onChange">> {
     labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
     inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>;
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>;
@@ -11,7 +11,6 @@ export interface TextFieldBaseProps<X> extends Pick<BeamTextFieldProps<X>, "labe
     groupProps?: NumberFieldAria["groupProps"];
     endAdornment?: ReactNode;
     startAdornment?: ReactNode;
-    inlineLabel?: boolean;
     contrast?: boolean;
     clearable?: boolean;
     textAreaMinHeight?: number;

package/dist/inputs/TextFieldBase.js

@@ -17,8 +17,8 @@ const useTestIds_1 = require("../utils/useTestIds");
 function TextFieldBase(props) {
     var _a, _b, _c, _d, _e, _f, _g;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const { label, required, labelProps, hideLabel = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.hideLabel) !== null && _a !== void 0 ? _a : false, inputProps, inputRef, inputWrapRef, groupProps, compact = (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact) !== null && _b !== void 0 ? _b : false, errorMsg, helperText, multiline = false, onChange, onBlur, onFocus, xss, endAdornment, startAdornment, inlineLabel, contrast = false, borderless = (_c = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.borderless) !== null && _c !== void 0 ? _c : false, textAreaMinHeight = 96, clearable = false, tooltip, visuallyDisabled = (_d = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.visuallyDisabled) !== null && _d !== void 0 ? _d : true, errorInTooltip = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.errorInTooltip) !== null && _e !== void 0 ? _e : false, hideErrorMessage = false, } = props;
-    const typeScale = (_f = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _f !== void 0 ? _f : (inputProps.readOnly && !hideLabel ? "smMd" : "sm");
+    const { label, required, labelProps, inputProps, inputRef, inputWrapRef, groupProps, compact = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact) !== null && _a !== void 0 ? _a : false, errorMsg, helperText, multiline = false, onChange, onBlur, onFocus, xss, endAdornment, startAdornment, labelStyle = (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelStyle) !== null && _b !== void 0 ? _b : "above", contrast = false, borderless = (_c = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.borderless) !== null && _c !== void 0 ? _c : false, textAreaMinHeight = 96, clearable = false, tooltip, visuallyDisabled = (_d = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.visuallyDisabled) !== null && _d !== void 0 ? _d : true, errorInTooltip = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.errorInTooltip) !== null && _e !== void 0 ? _e : false, hideErrorMessage = false, } = props;
+    const typeScale = (_f = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _f !== void 0 ? _f : (inputProps.readOnly && labelStyle !== "hidden" ? "smMd" : "sm");
     const internalProps = props.internalProps || {};
     const { compound = false, forceFocus = false, forceHover = false } = internalProps;
     const errorMessageId = `${inputProps.id}-error`;
@@ -38,13 +38,15 @@ function TextFieldBase(props) {
             ? [Css_1.Palette.Gray100, Css_1.Palette.Gray200, Css_1.Palette.Gray200]
             : [Css_1.Palette.White, Css_1.Palette.Gray100, Css_1.Palette.Gray100];
     const fieldStyles = {
-        container: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).relative.$,
+        container: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).relative.if(labelStyle === "left").fdr.gap2.jcsb.aic.$,
         inputWrapper: {
             ...Css_1.Css[typeScale].df.aic.br4.px1.w100
                 .hPx(fieldHeight - maybeSmaller)
                 .if(compact)
                 .hPx(compactFieldHeight - maybeSmaller).$,
-            ...Css_1.Css.bgColor(bgColor).gray900.if(contrast).white.$,
+            ...Css_1.Css.bgColor(bgColor)
+                .gray900.if(contrast)
+                .white.if(labelStyle === "left").maxw50.$,
             // When borderless then perceived vertical alignments are misaligned. As there is no longer a border, then the field looks oddly indented.
             // This typically happens in tables when a column has a mix of static text (i.e. "roll up" rows and table headers) and input fields.
             // To remedy this perceived misalignment then we increase the width by the horizontal padding applied (16px), and set a negative margin left margin to re-center the field.
@@ -58,7 +60,7 @@ function TextFieldBase(props) {
         inputWrapperReadOnly: {
             ...Css_1.Css[typeScale].df.aic.w100.gray900.if(contrast).white.$,
             // If we are hiding the label, then we are typically in a table. Keep the `mh` in this case to ensure editable and non-editable fields in a single table row line up properly
-            ...(hideLabel &&
+            ...(labelStyle === "hidden" &&
                 Css_1.Css.mhPx(fieldHeight - maybeSmaller)
                     .if(compact)
                     .mhPx(compactFieldHeight - maybeSmaller).$),
@@ -90,9 +92,7 @@ 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 && !inlineLabel && (
-            // set `hidden` if being rendered as a compound field
-            (0, jsx_runtime_1.jsx)(Label_1.Label, { labelProps: labelProps, hidden: hideLabel || compound, label: label, suffix: labelSuffix, contrast: contrast, ...tid.label })), (0, components_1.maybeTooltip)({
+    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: {
@@ -100,7 +100,7 @@ function TextFieldBase(props) {
                         ...fieldStyles.inputWrapperReadOnly,
                         ...(multiline ? Css_1.Css.fdc.aifs.gap2.$ : Css_1.Css.truncate.$),
                         ...xss,
-                    }, "data-readonly": "true", ...tid, children: [!multiline && inlineLabel && label && !hideLabel && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { labelProps: labelProps, label: label, ...tid.label })), multiline
+                    }, "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,
@@ -110,7 +110,7 @@ function TextFieldBase(props) {
                         // 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 && inlineLabel && label && !hideLabel && ((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), ...(hideLabel ? { "aria-label": label } : {}) }), ...(errorMsg ? { "aria-errormessage": errorMessageId } : {}), ref: fieldRef, rows: multiline ? 1 : undefined, css: {
+                    }, ...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 : {}),

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

@@ -1,7 +1,6 @@
 import { Only } from "../../Css";
 import { BeamTextFieldProps, TextFieldXss } from "../../interfaces";
 interface TextFieldProps<X> extends BeamTextFieldProps<X> {
-    inlineLabel: boolean;
 }
 export declare function MenuSearchField<X extends Only<TextFieldXss, X>>(props: TextFieldProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

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

@@ -25,8 +25,6 @@ export interface BeamSelectFieldBaseProps<O, V extends Value> extends BeamFocusa
     fieldDecoration?: (opt: O) => ReactNode;
     /** Sets the form field label. */
     label: string;
-    /** Renders the label inside the input field, i.e. for filters. */
-    inlineLabel?: boolean;
     readOnly?: boolean | ReactNode;
     onBlur?: () => void;
     onFocus?: () => void;

package/dist/inputs/internal/SelectFieldBase.js

@@ -172,7 +172,7 @@ function SelectFieldBase(props) {
             }
         },
     });
-    //@ts-ignore - `selectionManager.state` exists, but not according to the types
+    // @ts-ignore - `selectionManager.state` exists, but not according to the types
     state.selectionManager.state = (0, react_stately_1.useMultipleSelectionState)({
         selectionMode: multiselect ? "multiple" : "single",
         // Do not allow an empty selection if single select mode

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

@@ -15,7 +15,6 @@ interface SelectFieldInputProps<O, V extends Value> extends PresentationFieldPro
     helperText?: string | ReactNode;
     onBlur?: () => void;
     onFocus?: () => void;
-    inlineLabel?: boolean;
     labelProps: LabelHTMLAttributes<HTMLLabelElement>;
     label: string;
     selectedOptions: O[];

package/dist/inputs/internal/SelectFieldInput.js

@@ -9,13 +9,13 @@ const Css_1 = require("../../Css");
 const TextFieldBase_1 = require("../TextFieldBase");
 const utils_1 = require("../../utils");
 function SelectFieldInput(props) {
-    const { inputProps, buttonProps, buttonRef, errorMsg, state, fieldDecoration, onBlur, onFocus, inlineLabel, selectedOptions, getOptionValue, getOptionLabel, sizeToContent = false, contrast = false, nothingSelectedText, resetField, ...otherProps } = props;
+    const { inputProps, buttonProps, buttonRef, errorMsg, state, fieldDecoration, onBlur, onFocus, selectedOptions, getOptionValue, getOptionLabel, sizeToContent = false, contrast = false, nothingSelectedText, resetField, ...otherProps } = props;
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const isMultiSelect = state.selectionManager.selectionMode === "multiple";
     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, { ...otherProps, inlineLabel: inlineLabel, errorMsg: errorMsg, contrast: contrast, xss: !inlineLabel && !inputProps.readOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinySb.df.aic.jcc.$, children: state.selectionManager.selectedKeys.size }))) ||
+    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, { ...otherProps, errorMsg: errorMsg, contrast: contrast, xss: otherProps.labelStyle !== "inline" && !inputProps.readOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinySb.df.aic.jcc.$, children: state.selectionManager.selectedKeys.size }))) ||
             (showFieldDecoration && fieldDecoration(selectedOptions[0])), endAdornment: !inputProps.readOnly && ((0, jsx_runtime_1.jsx)("button", { ...buttonProps, disabled: inputProps.disabled, ref: buttonRef, css: {
                 ...Css_1.Css.br4.outline0.gray700.if(contrast).gray400.$,
                 ...(inputProps.disabled ? Css_1.Css.cursorNotAllowed.gray400.if(contrast).gray600.$ : {}),

package/package.json

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