@homebound/beam 2.370.1 → 2.371.0

package/dist/components/Banner.d.ts

@@ -3,6 +3,7 @@ export interface BannerProps {
     type: BannerTypes;
     message: ReactNode;
     onClose?: VoidFunction;
+    showIcon?: boolean;
 }
 export declare function Banner(props: BannerProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export type BannerTypes = "error" | "warning" | "success" | "info" | "alert";

package/dist/components/Banner.js

@@ -7,9 +7,9 @@ const IconButton_1 = require("./IconButton");
 const Css_1 = require("../Css");
 const utils_1 = require("../utils");
 function Banner(props) {
-    const { type, message, onClose = false, ...others } = props;
+    const { type, message, onClose = false, showIcon = true, ...others } = props;
     const tid = (0, utils_1.useTestIds)(others, "banner");
-    return ((0, jsx_runtime_1.jsxs)("div", { css: { ...variantStyles[type], ...Css_1.Css.df.aic.w100.gap1.p2.gray900.base.bshBasic.$ }, ...tid, role: "alert", children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: typeToIcon[type], ...tid.type, color: Css_1.Palette.Gray900 }) }), (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fg1.$, ...tid.message, children: message }), onClose && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.lh(0).$, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { icon: "x", onClick: onClose, ...tid.close, color: Css_1.Palette.Gray900 }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: { ...variantStyles[type], ...Css_1.Css.df.aic.w100.gap1.p2.gray900.base.bshBasic.$ }, ...tid, role: "alert", children: [showIcon && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fs0.$, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: typeToIcon[type], ...tid.type, color: Css_1.Palette.Gray900 }) })), (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.fg1.$, ...tid.message, children: message }), onClose && ((0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.lh(0).$, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { icon: "x", onClick: onClose, ...tid.close, color: Css_1.Palette.Gray900 }) }))] }));
 }
 const typeToIcon = {
     success: "checkCircle",

package/dist/components/Icon.d.ts

@@ -39,6 +39,7 @@ export declare const Icons: {
     check: import("@emotion/react/jsx-runtime").JSX.Element;
     search: import("@emotion/react/jsx-runtime").JSX.Element;
     comment: import("@emotion/react/jsx-runtime").JSX.Element;
+    commentFilled: import("@emotion/react/jsx-runtime").JSX.Element;
     plus: import("@emotion/react/jsx-runtime").JSX.Element;
     minus: import("@emotion/react/jsx-runtime").JSX.Element;
     pencil: import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Icon.js

@@ -44,6 +44,7 @@ exports.Icons = {
     check: ((0, jsx_runtime_1.jsx)("path", { d: "M9.99997 15.586L6.70697 12.293L5.29297 13.707L9.99997 18.414L19.707 8.70697L18.293 7.29297L9.99997 15.586Z" })),
     search: ((0, jsx_runtime_1.jsx)("path", { d: "M10 18C11.846 18 13.543 17.365 14.897 16.312L19.293 20.708L20.707 19.294L16.311 14.898C17.365 13.543 18 11.846 18 10C18 5.589 14.411 2 10 2C5.589 2 2 5.589 2 10C2 14.411 5.589 18 10 18ZM10 4C13.309 4 16 6.691 16 10C16 13.309 13.309 16 10 16C6.691 16 4 13.309 4 10C4 6.691 6.691 4 10 4Z" })),
     comment: ((0, jsx_runtime_1.jsx)("path", { d: "M12 2C6.486 2 2 5.589 2 10C2 12.908 3.898 15.516 7 16.934V22L12.34 17.995C17.697 17.852 22 14.32 22 10C22 5.589 17.514 2 12 2ZM12 16H11.667L9 18V15.583L8.359 15.336C5.67 14.301 4 12.256 4 10C4 6.691 7.589 4 12 4C16.411 4 20 6.691 20 10C20 13.309 16.411 16 12 16Z" })),
+    commentFilled: ((0, jsx_runtime_1.jsx)("path", { d: "M10 0C4.486 0 0 3.589 0 8C0 10.908 1.898 13.516 5 14.934V20L10.34 15.995C15.697 15.852 20 12.32 20 8C20 3.589 15.514 0 10 0Z" })),
     plus: (0, jsx_runtime_1.jsx)("path", { d: "M19 11H13V5H11V11H5V13H11V19H13V13H19V11Z" }),
     minus: (0, jsx_runtime_1.jsx)("rect", { x: "6", y: "11", width: "12", height: "2" }),
     pencil: ((0, jsx_runtime_1.jsx)("path", { d: "M4.0031 21.0001C4.0841 21.0001 4.1651 20.9901 4.2451 20.9701L8.2451 19.9701C8.4211 19.9261 8.5821 19.8351 8.7101 19.7071L21.0031 7.41411C21.3811 7.03611 21.5891 6.53411 21.5891 6.00011C21.5891 5.46611 21.3811 4.96411 21.0031 4.58611L19.4171 3.00011C18.6611 2.24411 17.3451 2.24411 16.5891 3.00011L4.2961 15.2931C4.1681 15.4211 4.0771 15.5821 4.0331 15.7571L3.0331 19.7571C2.9471 20.0981 3.0481 20.4581 3.2961 20.7071C3.4851 20.8971 3.7411 21.0001 4.0031 21.0001ZM18.0031 4.41411L19.5891 6.00011L18.0031 7.58611L16.4171 6.00011L18.0031 4.41411ZM5.9061 16.5111L15.0031 7.41411L16.5891 9.00011L7.4911 18.0971L5.3771 18.6251L5.9061 16.5111Z" })),

package/dist/components/PresentationContext.d.ts

@@ -9,6 +9,7 @@ export interface PresentationFieldProps {
     labelLeftFieldWidth?: number | string;
     labelSuffix?: LabelSuffixStyle;
     borderless?: boolean;
+    borderOnHover?: boolean;
     compact?: boolean;
     typeScale?: Typography;
     visuallyDisabled?: false;

package/dist/components/Table/GridTable.js

@@ -87,7 +87,7 @@ function setGridTableDefaults(opts) {
  * https://docs.google.com/document/d/1DFnlkDubK4nG_GLf_hB8yp0flnSNt_3IBh5iOicuaFM/edit#heading=h.9m9cpwgeqfc9
  */
 function GridTable(props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { id = "gridTable", as = "div", columns: _columns, rows, style: maybeStyle = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = 0, xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, persistCollapse, resizeTarget, activeRowId, activeCellId, visibleColumnsStorageKey, infiniteScroll, onRowSelect, onRowDrop: droppedCallback, csvPrefixRows, } = props;
     const columnsWithIds = (0, react_1.useMemo)(() => (0, columns_1.assignDefaultColumnIds)(_columns), [_columns]);
     // We only use this in as=virtual mode, but keep this here for rowLookup to use
@@ -277,6 +277,7 @@ function GridTable(props) {
     const firstRowMessage = (noData && fallbackMessage) || (tooManyClientSideRows && "Hiding some rows, use filter...") || infoMessage;
     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 borderOnHover = (_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.borderOnHover;
     const fieldProps = (0, react_1.useMemo)(() => ({
         labelStyle: "hidden",
         numberAlignment: "right",
@@ -285,14 +286,15 @@ function GridTable(props) {
         // Avoid passing `undefined` as it will unset existing PresentationContext settings
         ...(borderless !== undefined ? { borderless } : {}),
         ...(typeScale !== undefined ? { typeScale } : {}),
-    }), [borderless, typeScale]);
+        ...(borderOnHover !== undefined ? { borderOnHover } : {}),
+    }), [borderOnHover, borderless, typeScale]);
     // If we're running in Jest, force using `as=div` b/c jsdom doesn't support react-virtuoso.
     // This enables still putting the application's business/rendering logic under test, and letting it
     // just trust the GridTable impl that, at runtime, `as=virtual` will (other than being virtualized)
     // behave semantically the same as `as=div` did for its tests.
     const _as = as === "virtual" && runningInJest ? "div" : as;
     const rowStateContext = (0, react_1.useMemo)(() => ({ tableState: tableState }), [tableState]);
-    return ((0, jsx_runtime_1.jsx)(TableState_1.TableStateContext.Provider, { value: rowStateContext, children: (0, jsx_runtime_1.jsxs)(PresentationContext_1.PresentationProvider, { fieldProps: fieldProps, wrap: (_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.wrap, children: [(0, jsx_runtime_1.jsx)("div", { ref: resizeRef, css: (0, components_1.getTableRefWidthStyles)(as === "virtual") }), renders[_as](style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, tableHeadRows, stickyOffset, infiniteScroll)] }) }));
+    return ((0, jsx_runtime_1.jsx)(TableState_1.TableStateContext.Provider, { value: rowStateContext, children: (0, jsx_runtime_1.jsxs)(PresentationContext_1.PresentationProvider, { fieldProps: fieldProps, wrap: (_d = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _d === void 0 ? void 0 : _d.wrap, children: [(0, jsx_runtime_1.jsx)("div", { ref: resizeRef, css: (0, components_1.getTableRefWidthStyles)(as === "virtual") }), renders[_as](style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, tableHeadRows, stickyOffset, infiniteScroll)] }) }));
 }
 // Determine which HTML element to use to build the GridTable
 const renders = {

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

@@ -44,7 +44,7 @@ export interface GridStyle {
     nonHeaderRowHoverCss?: Properties;
     /** Default content to put into an empty cell */
     emptyCell?: ReactNode;
-    presentationSettings?: Pick<PresentationFieldProps, "borderless" | "typeScale"> & Pick<PresentationContextProps, "wrap">;
+    presentationSettings?: Pick<PresentationFieldProps, "borderless" | "borderOnHover" | "typeScale"> & Pick<PresentationContextProps, "wrap">;
     /** Minimum table width in pixels. Used when calculating columns sizes */
     minWidthPx?: number;
     /** Css to apply at each level of a parent/child nested table. */
@@ -84,6 +84,8 @@ export interface GridStyleDef {
     vAlign?: "top" | "center" | "bottom";
     /** Defines the Typography for the table body's cells (not the header). This only applies to rows that are not nested/grouped */
     cellTypography?: Typography;
+    /** Defines if the table should highlight the row on hover. Defaults to true */
+    highlightOnHover?: boolean;
 }
 export declare const getTableStyles: (props?: GridStyleDef) => GridStyle;
 export declare const totalsRowHeight = 40;

package/dist/components/Table/TableStyles.js

@@ -8,7 +8,7 @@ const utils_1 = require("../../utils");
 function memoizedTableStyles() {
     const cache = {};
     return (props = {}) => {
-        const { inlineEditing = false, grouped = false, rowHeight = "flexible", cellHighlight = false, allWhite = false, bordered = false, vAlign = "center", cellTypography = "xs", } = props;
+        const { inlineEditing = false, grouped = false, rowHeight = "flexible", cellHighlight = false, allWhite = false, bordered = false, vAlign = "center", cellTypography = "xs", highlightOnHover = true, } = props;
         const key = (0, utils_1.safeKeys)(props)
             .sort()
             .map((k) => `${k}_${props[k]}`)
@@ -64,9 +64,14 @@ function memoizedTableStyles() {
                 lastRowCss: bordered
                     ? Css_1.Css.addIn("& > *:first-of-type", Css_1.Css.borderRadius("0 0 0 8px").$).addIn("& > *:last-of-type", Css_1.Css.borderRadius("0 0 8px 0").$).$
                     : Css_1.Css.addIn("> *", Css_1.Css.bsh0.$).$,
-                presentationSettings: { borderless: true, typeScale: "xs", wrap: rowHeight === "flexible" },
+                presentationSettings: {
+                    borderless: true,
+                    typeScale: "xs",
+                    wrap: rowHeight === "flexible",
+                    borderOnHover: highlightOnHover,
+                },
                 levels: grouped ? groupedLevels : defaultLevels,
-                rowHoverColor: Css_1.Palette.Blue100,
+                rowHoverColor: Css_1.Palette.Blue50,
                 keptGroupRowCss: Css_1.Css.bgYellow100.gray900.xsMd.df.aic.$,
                 keptLastRowCss: Css_1.Css.boxShadow("inset 0px -14px 8px -11px rgba(63,63,63,.18)").$,
             };
@@ -117,6 +122,7 @@ function resolveStyles(style) {
         rowHover: true,
         vAlign: true,
         cellTypography: true,
+        highlightOnHover: true,
     };
     const keys = (0, utils_1.safeKeys)(style);
     const defKeys = (0, utils_1.safeKeys)(defKeysRecord);

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

@@ -72,4 +72,6 @@ export type GridDataRow<R extends Kinded> = {
     /** Whether this row is draggable, usually to allow drag & drop reordering of rows */
     draggable?: boolean;
 } & IfAny<R, AnyObject, DiscriminateUnion<R, "kind", R["kind"]>>;
+export declare const BorderHoverParent = "BorderHoverParent";
+export declare const BorderHoverChild = "BorderHoverChild";
 export {};

package/dist/components/Table/components/Row.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Row = void 0;
+exports.BorderHoverChild = exports.BorderHoverParent = exports.Row = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const react_1 = require("react");
@@ -75,7 +75,7 @@ function RowImpl(props) {
     const dragOverCallback = (0, react_1.useCallback)((row, evt) => onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(row, evt), [onDragOver]);
     // when the event is not called, we still need to call preventDefault
     const onDragOverDebounced = (0, use_debounce_1.useDebouncedCallback)(dragOverCallback, 100);
-    const RowContent = () => ((0, jsx_runtime_1.jsx)(RowTag, { css: rowCss, ...others, "data-gridrow": true, ...getCount(row.id), ref: ref, children: isKeptGroupRow ? ((0, jsx_runtime_1.jsx)(KeptGroupRow_1.KeptGroupRow, { as: as, style: style, columnSizes: columnSizes, row: row, colSpan: columns.length })) : (columns.map((column, columnIndex) => {
+    const RowContent = () => ((0, jsx_runtime_1.jsx)(RowTag, { css: rowCss, ...others, "data-gridrow": true, ...getCount(row.id), ref: ref, className: exports.BorderHoverParent, children: isKeptGroupRow ? ((0, jsx_runtime_1.jsx)(KeptGroupRow_1.KeptGroupRow, { as: as, style: style, columnSizes: columnSizes, row: row, colSpan: columns.length })) : (columns.map((column, columnIndex) => {
             var _a, _b;
             // If the expandable column was hidden, then we need to look at the previous column to format the `expandHeader` and 'header' kinds correctly.
             const maybeExpandedColumn = expandColumnHidden ? columns[columnIndex - 1] : column;
@@ -251,3 +251,6 @@ function RowImpl(props) {
  */
 // Declared as a const + `as typeof RowImpl` to work with generics, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37087#issuecomment-656596623
 exports.Row = (0, mobx_react_1.observer)(RowImpl);
+// Used by TextFieldBase to set a border when the row is being hovered over
+exports.BorderHoverParent = "BorderHoverParent";
+exports.BorderHoverChild = "BorderHoverChild";

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" | "labelStyle" | "placeholder" | "compact" | "borderless" | "visuallyDisabled" | "fullWidth" | "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" | "borderOnHover" | "visuallyDisabled" | "fullWidth" | "xss">, Partial<Pick<BeamTextFieldProps<X>, "onChange">> {
     labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
     inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>;
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>;

package/dist/inputs/TextFieldBase.js

@@ -8,6 +8,7 @@ const components_1 = require("../components");
 const HelperText_1 = require("../components/HelperText");
 const Label_1 = require("../components/Label");
 const PresentationContext_1 = require("../components/PresentationContext");
+const Row_1 = require("../components/Table/components/Row");
 const Css_1 = require("../Css");
 const labelUtils_1 = require("../forms/labelUtils");
 const useGetRef_1 = require("../hooks/useGetRef");
@@ -17,11 +18,11 @@ 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, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const { fieldProps, wrap = false } = (0, PresentationContext_1.usePresentationContext)();
     const { labelLeftFieldWidth = "50%" } = fieldProps !== null && fieldProps !== void 0 ? fieldProps : {};
-    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, alwaysShowHelperText = false, fullWidth = (_f = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.fullWidth) !== null && _f !== void 0 ? _f : false, unfocusedPlaceholder, selectOnFocus = true, } = props;
-    const typeScale = (_g = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _g !== void 0 ? _g : (inputProps.readOnly && labelStyle !== "hidden" ? "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, borderOnHover = (_d = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.borderOnHover) !== null && _d !== void 0 ? _d : false, textAreaMinHeight = 96, clearable = false, tooltip, visuallyDisabled = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.visuallyDisabled) !== null && _e !== void 0 ? _e : true, errorInTooltip = (_f = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.errorInTooltip) !== null && _f !== void 0 ? _f : false, hideErrorMessage = false, alwaysShowHelperText = false, fullWidth = (_g = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.fullWidth) !== null && _g !== void 0 ? _g : false, unfocusedPlaceholder, selectOnFocus = true, } = props;
+    const typeScale = (_h = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _h !== void 0 ? _h : (inputProps.readOnly && labelStyle !== "hidden" ? "smMd" : "sm");
     const internalProps = props.internalProps || {};
     const { compound = false, forceFocus = false, forceHover = false } = internalProps;
     const errorMessageId = `${inputProps.id}-error`;
@@ -37,9 +38,12 @@ function TextFieldBase(props) {
     const compactFieldHeight = 32;
     const [bgColor, hoverBgColor, disabledBgColor] = contrast
         ? [Css_1.Palette.Gray700, Css_1.Palette.Gray600, Css_1.Palette.Gray700]
-        : borderless && !compound
-            ? [Css_1.Palette.Gray100, Css_1.Palette.Gray200, Css_1.Palette.Gray200]
-            : [Css_1.Palette.White, Css_1.Palette.Gray100, Css_1.Palette.Gray100];
+        : borderOnHover
+            ? // Use transparent backgrounds to blend with the table row hover color
+                [Css_1.Palette.Transparent, Css_1.Palette.Blue100, Css_1.Palette.Gray100]
+            : borderless && !compound
+                ? [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 fieldMaxWidth = (0, utils_1.getFieldWidth)(fullWidth);
     const fieldStyles = {
         container: Css_1.Css.df.fdc.w100.maxw(fieldMaxWidth).relative.if(labelStyle === "left").maxw100.fdr.gap2.jcsb.aic.$,
@@ -58,6 +62,12 @@ function TextFieldBase(props) {
                 : Css_1.Css.bcGray300.if(contrast).bcGray700.$),
             // Do not add borders to compound fields. A compound field is responsible for drawing its own borders
             ...(!compound ? Css_1.Css.ba.$ : {}),
+            ...(borderOnHover && Css_1.Css.br4.ba.bcTransparent.add("transition", "border-color 200ms").$),
+            ...(borderOnHover && Css_1.Css.if(isHovered).bgBlue100.ba.bcBlue300.$),
+            ...{
+                // Highlight the field when hovering over the row in a table, unless some other edit component (including ourselves) is hovered
+                [`.${Row_1.BorderHoverParent}:hover:not(:has(.${Row_1.BorderHoverChild}:hover)) &`]: Css_1.Css.ba.bcBlue300.$,
+            },
             // When multiline is true, then we want to allow the field to grow to the height of the content, but not shrink below the minHeight
             // Otherwise, set fixed heights values accordingly.
             ...(multiline
@@ -83,11 +93,13 @@ function TextFieldBase(props) {
             ...Css_1.Css.w100.mw0.outline0.fg1.bgColor(bgColor).$,
             // Not using Truss's inline `if` statement here because `addIn` properties do not respect the if statement.
             ...(contrast && Css_1.Css.addIn("&::selection", Css_1.Css.bgGray800.$).$),
+            // Make the background transparent when highlighting the field on hover
+            ...(borderOnHover && Css_1.Css.bgTransparent.$),
             // For "multiline" fields we add top and bottom padding of 7px for compact, or 11px for non-compact, to properly match the height of the single line fields
             ...(multiline ? Css_1.Css.br4.pyPx(compact ? 7 : 11).add("resize", "none").$ : Css_1.Css.truncate.$),
         },
         hover: Css_1.Css.bgColor(hoverBgColor).if(contrast).bcGray600.$,
-        focus: Css_1.Css.bcBlue700.if(contrast).bcBlue500.$,
+        focus: Css_1.Css.bcBlue700.if(contrast).bcBlue500.if(borderOnHover).bgBlue100.bcBlue500.$,
         disabled: visuallyDisabled
             ? Css_1.Css.cursorNotAllowed.gray600.bgColor(disabledBgColor).if(contrast).gray500.$
             : Css_1.Css.cursorNotAllowed.$,
@@ -123,8 +135,8 @@ function TextFieldBase(props) {
                                 ...fieldStyles.inputWrapperReadOnly,
                                 ...(multiline ? Css_1.Css.fdc.aifs.gap2.$ : Css_1.Css.if(wrap === false).truncate.$),
                                 ...xss,
-                            }, "data-readonly": "true", ...tid, children: [labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { multiline: multiline, labelProps: labelProps, label: label, ...tid.label })), multiline
-                                    ? (_h = inputProps.value) === null || _h === void 0 ? void 0 : _h.split("\n\n").map((p, i) => ((0, jsx_runtime_1.jsx)("p", { css: Css_1.Css.py1.$, children: p.split("\n").map((sentence, j) => ((0, jsx_runtime_1.jsxs)("span", { children: [sentence, (0, jsx_runtime_1.jsx)("br", {})] }, j))) }, i)))
+                            }, className: Row_1.BorderHoverChild, "data-readonly": "true", ...tid, children: [labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { multiline: multiline, labelProps: labelProps, label: label, ...tid.label })), multiline
+                                    ? (_j = inputProps.value) === null || _j === void 0 ? void 0 : _j.split("\n\n").map((p, i) => ((0, jsx_runtime_1.jsx)("p", { css: Css_1.Css.py1.$, 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 : {}),
@@ -133,7 +145,9 @@ 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.oh.mhPx(textAreaMinHeight).$,
-                            }, ...hoverProps, ref: inputWrapRef, onClick: unfocusedPlaceholder ? handleUnfocusedPlaceholderClick : undefined, children: [labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { multiline: multiline, labelProps: labelProps, label: label, ...tid.label })), startAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.asc.fs0.br4.pr1.$, children: startAdornment }), unfocusedPlaceholder && ((0, jsx_runtime_1.jsx)("div", { 
+                            }, 
+                            // Class name used for the grid table on row hover for highlighting
+                            className: Row_1.BorderHoverChild, ...hoverProps, ref: inputWrapRef, onClick: unfocusedPlaceholder ? handleUnfocusedPlaceholderClick : undefined, children: [labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { multiline: multiline, labelProps: labelProps, label: label, ...tid.label })), startAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.asc.fs0.br4.pr1.$, children: startAdornment }), unfocusedPlaceholder && ((0, jsx_runtime_1.jsx)("div", { 
                                     // Setting -1 tabIndex as this is a scrollable container, which is focusable by default.
                                     // However, we want the user's focus to move to the field element, which will hide this container.
                                     tabIndex: -1, ...tid.unfocusedPlaceholderContainer, css: {

package/package.json

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