@homebound/beam 2.370.2 → 2.371.0

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.2",
+  "version": "2.371.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",