@homebound/beam 2.121.1 → 2.123.0

package/dist/components/Modal/TestModalContent.js

@@ -42,7 +42,7 @@ const users = [
     { id: "9", name: "Captain Marvel", role: "Does it all" },
     { id: "10", name: "Doctor Strange", role: "Doctor" },
 ];
-const rows = [Table_1.simpleHeader, ...users.map((u) => ({ kind: "data", ...u }))];
+const rows = [Table_1.simpleHeader, ...users.map((u) => ({ kind: "data", id: u.id, data: u }))];
 const columns = [
     { header: () => "Name", data: ({ name }) => name },
     { header: () => "Role", data: ({ role }) => role },

package/dist/components/PresentationContext.d.ts

@@ -9,6 +9,7 @@ export interface PresentationFieldProps {
     compact?: boolean;
     typeScale?: Typography;
     visuallyDisabled?: false;
+    errorInTooltip?: true;
 }
 export declare type PresentationContextProps = {
     fieldProps?: PresentationFieldProps;

package/dist/components/Table/CollapseToggle.d.ts

@@ -1,5 +1,5 @@
-import { GridDataRow } from "..";
-export interface GridTableCollapseToggleProps {
+import { GridDataRow, IconButtonProps } from "..";
+export interface GridTableCollapseToggleProps extends Pick<IconButtonProps, "compact"> {
     row: GridDataRow<any>;
 }
 /** Provides a chevron icons to collapse/un-collapse for parent/child tables. */

package/dist/components/Table/CollapseToggle.js

@@ -7,16 +7,16 @@ const components_1 = require("..");
 const hooks_1 = require("../../hooks");
 /** Provides a chevron icons to collapse/un-collapse for parent/child tables. */
 function CollapseToggle(props) {
-    const { row } = props;
+    const { row, compact } = props;
     const { rowState } = (0, react_1.useContext)(components_1.RowStateContext);
     const isCollapsed = (0, hooks_1.useComputed)(() => rowState.isCollapsed(row.id), [rowState]);
     const iconKey = isCollapsed ? "chevronRight" : "chevronDown";
     const headerIconKey = isCollapsed ? "chevronsRight" : "chevronsDown";
     // If we're not a header, only render a toggle if we have child rows to actually collapse
     const isHeader = row.kind === "header";
-    if (!isHeader && (!props.row.children || props.row.children.length === 0)) {
+    if (!isHeader && (!row.children || row.children.length === 0)) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(components_1.IconButton, { onClick: () => rowState.toggleCollapsed(row.id), icon: isHeader ? headerIconKey : iconKey }, void 0);
+    return ((0, jsx_runtime_1.jsx)(components_1.IconButton, { onClick: () => rowState.toggleCollapsed(row.id), icon: isHeader ? headerIconKey : iconKey, compact: compact }, void 0));
 }
 exports.CollapseToggle = CollapseToggle;

package/dist/components/Table/GridTable.d.ts

@@ -53,7 +53,8 @@ export interface GridStyle {
     minWidthPx?: number;
     /** Css to apply at each level of a parent/child nested table. */
     levels?: Record<number, {
-        cellCss: Properties;
+        cellCss?: Properties;
+        firstContentColumn?: Properties;
     }>;
     /** Allows for customization of the background color used to denote an "active" row */
     activeBgColor?: Palette;
@@ -232,7 +233,15 @@ declare type GridRowKind<R extends Kinded, P extends R["kind"]> = DiscriminateUn
 export declare type GridColumn<R extends Kinded, S = {}> = {
     [K in R["kind"]]: string | GridCellContent | (DiscriminateUnion<R, "kind", K> extends {
         data: infer D;
-    } ? (data: D, row: GridRowKind<R, K>, api: GridTableApi<R>) => ReactNode | GridCellContent : (row: GridRowKind<R, K>, api: GridTableApi<R>) => ReactNode | GridCellContent);
+    } ? (data: D, opts: {
+        row: GridRowKind<R, K>;
+        api: GridTableApi<R>;
+        level: number;
+    }) => ReactNode | GridCellContent : (data: undefined, opts: {
+        row: GridRowKind<R, K>;
+        api: GridTableApi<R>;
+        level: number;
+    }) => ReactNode | GridCellContent);
 } & {
     /**
      * The column's width.
@@ -253,6 +262,8 @@ export declare type GridColumn<R extends Kinded, S = {}> = {
     sticky?: "left" | "right";
     /** Prevent column from supporting RowStyle.onClick/rowLink in order to avoid nested interactivity. Defaults to true */
     wrapAction?: false;
+    /** Used as a signal to defer adding the 'indent' styling */
+    isAction?: true;
 };
 export declare const nonKindGridColumnKeys: string[];
 /** Allows rendering a specific cell. */
@@ -313,9 +324,10 @@ export declare type GridDataRow<R extends Kinded> = {
     children?: GridDataRow<R>[];
     /** Whether to pin this sort to the first/last of its parent's children. */
     pin?: "first" | "last";
+    data: unknown;
 } & IfAny<R, {}, DiscriminateUnion<R, "kind", R["kind"]>>;
 declare type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
 /** Return the content for a given column def applied to a given row. */
-export declare function applyRowFn<R extends Kinded>(column: GridColumn<R>, row: GridDataRow<R>, api: GridTableApi<R>): ReactNode | GridCellContent;
+export declare function applyRowFn<R extends Kinded>(column: GridColumn<R>, row: GridDataRow<R>, api: GridTableApi<R>, level: number): ReactNode | GridCellContent;
 export declare function matchesFilter(maybeContent: ReactNode | GridCellContent, filter: string): boolean;
 export {};

package/dist/components/Table/GridTable.js

@@ -125,7 +125,7 @@ function GridTable(props) {
         const matches = row.kind === "header" ||
             filters.length === 0 ||
             !!row.pin ||
-            filters.every((f) => columns.map((c) => applyRowFn(c, row, api)).some((maybeContent) => matchesFilter(maybeContent, f)));
+            filters.every((f) => columns.map((c) => applyRowFn(c, row, api, 0)).some((maybeContent) => matchesFilter(maybeContent, f)));
         // If the row matches, add it in
         if (matches) {
             return acc.concat([[row, (_b = (_a = row.children) === null || _a === void 0 ? void 0 : _a.reduce(filterRows, [])) !== null && _b !== void 0 ? _b : []]]);
@@ -237,6 +237,7 @@ function GridTable(props) {
         hideLabel: true,
         numberAlignment: "right",
         compact: true,
+        errorInTooltip: true,
         // Avoid passing `undefined` as it will unset existing PresentationContext settings
         ...(borderless !== undefined ? { borderless } : {}),
         ...(typeScale !== undefined ? { typeScale } : {}),
@@ -490,9 +491,12 @@ function GridRow(props) {
         ...(0, nestedCards_1.getNestedCardStyles)(row, openCardStyles, style, isActive),
     };
     let currentColspan = 1;
+    let firstContentColumnStylesApplied = false;
     const rowNode = ((0, jsx_runtime_1.jsx)(Row, Object.assign({ css: rowCss }, others, { "data-gridrow": true }, getCount(row.id), { children: columns.map((column, columnIndex) => {
-            var _a, _b, _c, _d, _e;
-            const { wrapAction = true } = column;
+            var _a, _b, _c, _d, _e, _f;
+            const { wrapAction = true, isAction = false } = column;
+            const applyFirstContentColumnStyles = !isAction && !firstContentColumnStylesApplied;
+            firstContentColumnStylesApplied || (firstContentColumnStylesApplied = applyFirstContentColumnStyles);
             if (column.mw) {
                 // Validate the column's minWidth definition if set.
                 if (!column.mw.endsWith("px") && !column.mw.endsWith("%")) {
@@ -504,7 +508,7 @@ function GridRow(props) {
                 currentColspan -= 1;
                 return null;
             }
-            const maybeContent = applyRowFn(column, row, api);
+            const maybeContent = applyRowFn(column, row, api, level);
             currentColspan = isGridCellContent(maybeContent) ? (_a = maybeContent.colspan) !== null && _a !== void 0 ? _a : 1 : 1;
             const canSortColumn = (sortOn === "client" && column.clientSideSort !== false) ||
                 (sortOn === "server" && !!column.serverSideSortKey);
@@ -559,11 +563,13 @@ function GridRow(props) {
                 ...(isHeader && style.headerCellCss),
                 // Or level-specific styling
                 ...(!isHeader && !!style.levels && ((_d = style.levels[level]) === null || _d === void 0 ? void 0 : _d.cellCss)),
+                // Level specific styling for the first content column
+                ...(applyFirstContentColumnStyles && !!style.levels && ((_e = style.levels[level]) === null || _e === void 0 ? void 0 : _e.firstContentColumn)),
                 // The specific cell's css (if any from GridCellContent)
                 ...rowStyleCellCss,
                 // Apply active row styling for non-nested card styles.
                 ...(style.nestedCards === undefined && isActive
-                    ? Css_1.Css.bgColor((_e = style.activeBgColor) !== null && _e !== void 0 ? _e : Css_1.Palette.LightBlue50).$
+                    ? Css_1.Css.bgColor((_f = style.activeBgColor) !== null && _f !== void 0 ? _f : Css_1.Palette.LightBlue50).$
                     : {}),
                 // Add any cell specific style overrides
                 ...(isGridCellContent(maybeContent) && maybeContent.typeScale ? Css_1.Css[maybeContent.typeScale].$ : {}),
@@ -637,17 +643,12 @@ function isContentEmpty(content) {
     return emptyValues.includes(content);
 }
 /** Return the content for a given column def applied to a given row. */
-function applyRowFn(column, row, api) {
+function applyRowFn(column, row, api, level) {
     // Usually this is a function to apply against the row, but sometimes it's a hard-coded value, i.e. for headers
     const maybeContent = column[row.kind];
     if (typeof maybeContent === "function") {
-        if ("data" in row && "id" in row) {
-            // Auto-destructure data
-            return maybeContent(row["data"], row["id"], api);
-        }
-        else {
-            return maybeContent(row, api);
-        }
+        // Auto-destructure data
+        return maybeContent(row["data"], { row: row, api, level });
     }
     else {
         return maybeContent;

package/dist/components/Table/columns.js

@@ -24,7 +24,7 @@ function numericColumn(columnDef) {
 exports.numericColumn = numericColumn;
 /** Provides default styling for a GridColumn representing an Action. */
 function actionColumn(columnDef) {
-    return { clientSideSort: false, ...columnDef, align: "center" };
+    return { clientSideSort: false, ...columnDef, align: "center", isAction: true };
 }
 exports.actionColumn = actionColumn;
 /**
@@ -42,11 +42,12 @@ function selectColumn(columnDef) {
         // Defining `w: 48px` to accommodate for the `16px` wide checkbox and `16px` of padding on either side.
         w: "48px",
         wrapAction: false,
+        isAction: true,
         // Use any of the user's per-row kind methods if they have them.
         ...columnDef,
     };
     return (0, index_1.newMethodMissingProxy)(base, (key) => {
-        return (row) => ({ content: (0, jsx_runtime_1.jsx)(SelectToggle_1.SelectToggle, { id: row.id }, void 0) });
+        return (data, { row }) => ({ content: (0, jsx_runtime_1.jsx)(SelectToggle_1.SelectToggle, { id: row.id }, void 0) });
     });
 }
 exports.selectColumn = selectColumn;
@@ -65,10 +66,13 @@ function collapseColumn(columnDef) {
         // Defining `w: 38px` based on the designs
         w: "38px",
         wrapAction: false,
+        isAction: true,
         ...columnDef,
     };
     return (0, index_1.newMethodMissingProxy)(base, (key) => {
-        return (row) => ({ content: (0, jsx_runtime_1.jsx)(CollapseToggle_1.CollapseToggle, { row: row }, void 0) });
+        return (data, { row, level }) => ({
+            content: (0, jsx_runtime_1.jsx)(CollapseToggle_1.CollapseToggle, { row: row, compact: level > 0 }, void 0),
+        });
     });
 }
 exports.collapseColumn = collapseColumn;

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

@@ -8,7 +8,7 @@ export { useGridTableApi } from "./GridTableApi";
 export type { GridTableApi } from "./GridTableApi";
 export { RowState, RowStateContext } from "./RowState";
 export * from "./SelectToggle";
-export { simpleDataRows, simpleHeader, simpleRows } from "./simpleHelpers";
-export type { SimpleHeaderAndDataOf, SimpleHeaderAndDataWith } from "./simpleHelpers";
+export { simpleDataRows, simpleHeader } from "./simpleHelpers";
+export type { SimpleHeaderAndData } from "./simpleHelpers";
 export { SortHeader } from "./SortHeader";
 export { beamFixedStyle, beamFlexibleStyle, beamNestedFixedStyle, beamNestedFlexibleStyle, beamTotalsFixedStyle, beamTotalsFlexibleStyle, cardStyle, condensedStyle, defaultStyle, } from "./styles";

package/dist/components/Table/index.js

@@ -10,7 +10,7 @@ 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.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.beamTotalsFlexibleStyle = exports.beamTotalsFixedStyle = exports.beamNestedFlexibleStyle = exports.beamNestedFixedStyle = exports.beamFlexibleStyle = exports.beamFixedStyle = exports.SortHeader = exports.simpleRows = exports.simpleHeader = exports.simpleDataRows = exports.RowStateContext = exports.RowState = exports.useGridTableApi = exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.DESC = exports.ASC = exports.GridSortContext = void 0;
+exports.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.beamTotalsFlexibleStyle = exports.beamTotalsFixedStyle = exports.beamNestedFlexibleStyle = exports.beamNestedFixedStyle = exports.beamFlexibleStyle = exports.beamFixedStyle = exports.SortHeader = exports.simpleHeader = exports.simpleDataRows = exports.RowStateContext = exports.RowState = exports.useGridTableApi = exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.DESC = exports.ASC = exports.GridSortContext = void 0;
 __exportStar(require("./CollapseToggle"), exports);
 __exportStar(require("./columns"), exports);
 var GridSortContext_1 = require("./GridSortContext");
@@ -30,7 +30,6 @@ __exportStar(require("./SelectToggle"), exports);
 var simpleHelpers_1 = require("./simpleHelpers");
 Object.defineProperty(exports, "simpleDataRows", { enumerable: true, get: function () { return simpleHelpers_1.simpleDataRows; } });
 Object.defineProperty(exports, "simpleHeader", { enumerable: true, get: function () { return simpleHelpers_1.simpleHeader; } });
-Object.defineProperty(exports, "simpleRows", { enumerable: true, get: function () { return simpleHelpers_1.simpleRows; } });
 var SortHeader_1 = require("./SortHeader");
 Object.defineProperty(exports, "SortHeader", { enumerable: true, get: function () { return SortHeader_1.SortHeader; } });
 var styles_1 = require("./styles");

package/dist/components/Table/simpleHelpers.d.ts

@@ -1,10 +1,4 @@
 import { GridDataRow } from "./GridTable";
-/** A helper for making `Row` type aliases of simple/flat tables that are just header + data. */
-export declare type SimpleHeaderAndDataOf<T> = {
-    kind: "header";
-} | ({
-    kind: "data";
-} & T);
 /**
  * A helper for making `Row` type aliases of simple/flat tables that are just header + data.
  *
@@ -12,7 +6,7 @@ export declare type SimpleHeaderAndDataOf<T> = {
  * when rows are mobx proxies and we need proxy accesses to happen within the column
  * rendering.
  */
-export declare type SimpleHeaderAndDataWith<T> = {
+export declare type SimpleHeaderAndData<T> = {
     kind: "header";
 } | {
     kind: "data";
@@ -23,11 +17,9 @@ export declare type SimpleHeaderAndDataWith<T> = {
 export declare const simpleHeader: {
     kind: "header";
     id: string;
+    data: {};
 };
-export declare function simpleRows<R extends SimpleHeaderAndDataOf<D>, D>(data?: Array<D & {
-    id: string;
-}> | undefined): GridDataRow<R>[];
-/** Like `simpleRows` but for `SimpleHeaderAndDataWith`. */
-export declare function simpleDataRows<R extends SimpleHeaderAndDataWith<D>, D>(data?: Array<D & {
+/** Like `simpleRows` but for `SimpleHeaderAndData`. */
+export declare function simpleDataRows<R extends SimpleHeaderAndData<D>, D>(data?: Array<D & {
     id: string;
 }> | undefined): GridDataRow<R>[];

package/dist/components/Table/simpleHelpers.js

@@ -1,14 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.simpleDataRows = exports.simpleRows = exports.simpleHeader = void 0;
+exports.simpleDataRows = exports.simpleHeader = void 0;
 /** A const for a marker header row. */
-exports.simpleHeader = { kind: "header", id: "header" };
-function simpleRows(data = []) {
-    // @ts-ignore
-    return [exports.simpleHeader, ...data.map((c) => ({ kind: "data", ...c }))];
-}
-exports.simpleRows = simpleRows;
-/** Like `simpleRows` but for `SimpleHeaderAndDataWith`. */
+exports.simpleHeader = { kind: "header", id: "header", data: {} };
+/** Like `simpleRows` but for `SimpleHeaderAndData`. */
 function simpleDataRows(data = []) {
     // @ts-ignore Not sure why this doesn't type-check, something esoteric with the DiscriminateUnion type
     return [exports.simpleHeader, ...data.map((data) => ({ kind: "data", data, id: data.id }))];

package/dist/components/Table/sortRows.js

@@ -21,8 +21,8 @@ function sortBatch(columns, batch, sortState) {
     const invert = direction === "DESC";
     // Make a shallow copy for sorting to avoid mutating the original list
     return [...batch].sort((a, b) => {
-        const v1 = sortValue((0, GridTable_1.applyRowFn)(column, a, {}));
-        const v2 = sortValue((0, GridTable_1.applyRowFn)(column, b, {}));
+        const v1 = sortValue((0, GridTable_1.applyRowFn)(column, a, {}, 0));
+        const v2 = sortValue((0, GridTable_1.applyRowFn)(column, b, {}, 0));
         const v1e = v1 === null || v1 === undefined;
         const v2e = v2 === null || v2 === undefined;
         if (a.pin || b.pin) {

package/dist/components/Table/styles.js

@@ -42,7 +42,7 @@ exports.cardStyle = {
 // Once completely rolled out across all tables in Blueprint, this will change to be the `defaultStyle`.
 exports.beamFixedStyle = {
     headerCellCss: Css_1.Css.gray700.xsEm.bgGray200.aic.nowrap.pxPx(12).hPx(40).$,
-    cellCss: Css_1.Css.gray900.xs.bgWhite.aic.nowrap.pxPx(12).hPx(36).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray100}`).$,
+    cellCss: Css_1.Css.gray900.xs.bgWhite.aic.nowrap.pxPx(12).hPx(36).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$,
     emptyCell: "-",
     presentationSettings: { borderless: true, typeScale: "xs", wrap: false },
     firstRowMessageCss: Css_1.Css.tc.py3.$,
@@ -57,7 +57,7 @@ exports.beamGroupRowStyle = Css_1.Css.xsEm
 exports.beamTotalsRowStyle = Css_1.Css.gray700.smEm.hPx(40).mb1.bgWhite.boxShadow("none").$;
 exports.beamNestedFixedStyle = {
     ...exports.beamFixedStyle,
-    levels: { 0: { cellCss: exports.beamGroupRowStyle } },
+    levels: { 0: { cellCss: exports.beamGroupRowStyle }, 2: { firstContentColumn: Css_1.Css.tiny.pl3.$ } },
 };
 exports.beamTotalsFixedStyle = {
     ...exports.beamFixedStyle,
@@ -66,11 +66,11 @@ exports.beamTotalsFixedStyle = {
 exports.beamFlexibleStyle = {
     ...exports.beamFixedStyle,
     cellCss: Css_1.Css.xs.bgWhite.aic.p2.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray100}`).$,
-    presentationSettings: { borderless: false, typeScale: "xs", wrap: true },
+    presentationSettings: { borderless: true, typeScale: "xs", wrap: true },
 };
 exports.beamNestedFlexibleStyle = {
     ...exports.beamFlexibleStyle,
-    levels: { 0: { cellCss: exports.beamGroupRowStyle } },
+    levels: { 0: { cellCss: exports.beamGroupRowStyle }, 2: { firstContentColumn: Css_1.Css.tiny.pl3.$ } },
 };
 exports.beamTotalsFlexibleStyle = {
     ...exports.beamFlexibleStyle,

package/dist/forms/formStateDomain.d.ts

@@ -1,6 +1,7 @@
 export declare const jan1: Date;
 export declare const jan2: Date;
 export declare const jan10: Date;
+export declare const jan29: Date;
 export declare const dd100: DeweyDecimalClassification;
 export declare const dd200: DeweyDecimalClassification;
 export interface AuthorInput {
@@ -18,6 +19,7 @@ export interface AuthorInput {
     favoriteShapes?: string[] | null;
     isAvailable?: boolean | null;
     animals?: string[] | null;
+    bio?: string | null;
 }
 export interface AuthorAddress {
     street?: string | null;

package/dist/forms/formStateDomain.js

@@ -3,10 +3,11 @@
 // by a GraphQL schema for a `saveAuthor` mutation that takes an author
 // plus the author's books.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateOnly = exports.dd200 = exports.dd100 = exports.jan10 = exports.jan2 = exports.jan1 = void 0;
+exports.DateOnly = exports.dd200 = exports.dd100 = exports.jan29 = exports.jan10 = exports.jan2 = exports.jan1 = void 0;
 exports.jan1 = new Date(2020, 0, 1);
 exports.jan2 = new Date(2020, 0, 2);
 exports.jan10 = new Date(2020, 0, 10);
+exports.jan29 = new Date(2020, 0, 29);
 exports.dd100 = { number: "100", category: "Philosophy" };
 exports.dd200 = { number: "200", category: "Religion" };
 class DateOnly {

package/dist/inputs/TextFieldBase.js

@@ -15,12 +15,13 @@ const defaultTestId_1 = require("../utils/defaultTestId");
 const useTestIds_1 = require("../utils/useTestIds");
 // Used by both TextField and TextArea
 function TextFieldBase(props) {
-    var _a, _b, _c, _d, _e, _f;
+    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, } = props;
     const typeScale = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _e !== void 0 ? _e : "sm";
+    const errorInTooltip = (_f = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.errorInTooltip) !== null && _f !== void 0 ? _f : false;
     const internalProps = props.internalProps || {};
-    const { compound = false } = internalProps;
+    const { compound = false, forceFocus = false, forceHover = false } = internalProps;
     const errorMessageId = `${inputProps.id}-error`;
     const labelSuffix = (0, labelUtils_1.getLabelSuffix)(required);
     const ElementType = multiline ? "textarea" : "input";
@@ -51,12 +52,12 @@ function TextFieldBase(props) {
             ...Css_1.Css.gray900.if(contrast).white.$,
         },
         input: {
-            ...Css_1.Css.w100.mw0.outline0.br4.fg1.$,
+            ...Css_1.Css.w100.mw0.outline0.fg1.if(multiline).br4.$,
             // 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: borderless ? Css_1.Css.bshFocus.z1.$ : Css_1.Css.bLightBlue700.if(contrast).bLightBlue500.$,
+        focus: Css_1.Css.bLightBlue700.if(contrast).bLightBlue500.$,
         disabled: visuallyDisabled
             ? Css_1.Css.cursorNotAllowed.gray400.bgGray100.if(contrast).gray500.bgGray700.$
             : Css_1.Css.cursorNotAllowed.$,
@@ -75,10 +76,12 @@ function TextFieldBase(props) {
     const onFocusChained = (0, react_aria_1.chain)((e) => {
         e.target.select();
     }, onFocus);
+    const showFocus = (isFocused && !inputProps.readOnly) || forceFocus;
+    const showHover = (isHovered && !inputProps.disabled && !inputProps.readOnly && !isFocused) || forceHover;
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ 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, Object.assign({ labelProps: labelProps, hidden: hideLabel || compound, label: label, suffix: labelSuffix, contrast: contrast }, tid.label), void 0)), (0, components_1.maybeTooltip)({
-                title: tooltip,
+                title: (errorInTooltip && errorMsg) || tooltip,
                 placement: "top",
                 children: inputProps.readOnly ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
                         // Use input wrapper to get common styles, but then we need to override some
@@ -86,19 +89,19 @@ function TextFieldBase(props) {
                         ...(multiline ? Css_1.Css.fdc.aifs.childGap2.$ : Css_1.Css.truncate.$),
                         ...xss,
                     }, "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
-                            ? (_f = inputProps.value) === null || _f === void 0 ? void 0 : _f.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)))
+                            ? (_g = inputProps.value) === null || _g === void 0 ? void 0 : _g.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)) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
                         ...fieldStyles.inputWrapper,
                         ...(inputProps.disabled ? fieldStyles.disabled : {}),
-                        ...(isFocused && !inputProps.readOnly ? fieldStyles.focus : {}),
-                        ...(isHovered && !inputProps.disabled && !inputProps.readOnly && !isFocused ? fieldStyles.hover : {}),
+                        ...(showFocus ? fieldStyles.focus : {}),
+                        ...(showHover ? fieldStyles.hover : {}),
                         ...(errorMsg ? 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, 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: fieldRef, rows: multiline ? 1 : undefined, css: {
                                 ...fieldStyles.input,
                                 ...(inputProps.disabled ? fieldStyles.disabled : {}),
-                                ...(isHovered && !inputProps.disabled && !inputProps.readOnly && !isFocused ? fieldStyles.hover : {}),
-                                ...(multiline ? Css_1.Css.h100.p1.add("resize", "none").if(borderless).pPx(4).$ : Css_1.Css.truncate.$),
+                                ...(showHover ? fieldStyles.hover : {}),
+                                ...(multiline ? Css_1.Css.h100.p1.add("resize", "none").$ : Css_1.Css.truncate.$),
                                 ...xss,
                             } }, tid), void 0), isFocused && clearable && onChange && inputProps.value && ((0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "xCircle", color: Css_1.Palette.Gray700, onClick: () => {
                                 var _a;
@@ -106,6 +109,6 @@ function TextFieldBase(props) {
                                 // Reset focus to input element
                                 (_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                             } }, 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 && !compound && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ id: errorMessageId, errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && !compound && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0));
+            }), errorMsg && !compound && !errorInTooltip && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ id: errorMessageId, errorMsg: errorMsg }, tid.errorMsg), void 0)), helperText && !compound && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0));
 }
 exports.TextFieldBase = TextFieldBase;

package/dist/interfaces.d.ts

@@ -52,4 +52,8 @@ export interface TextFieldInternalProps {
      * This is explicitly an internal property that is not exposed to any field's API.
      */
     compound?: boolean;
+    /** Forces focus styles for storybook purposes */
+    forceFocus?: true;
+    /** Forces hover styles for storybook purposes */
+    forceHover?: boolean;
 }

package/package.json

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