@homebound/beam 2.109.0 → 2.112.0

package/dist/components/IconButton.d.ts

@@ -12,6 +12,8 @@ export interface IconButtonProps extends BeamButtonProps, BeamFocusableProps {
     /** HTML attributes to apply to the button element when it is being used to trigger a menu. */
     menuTriggerProps?: AriaButtonProps;
     buttonRef?: RefObject<HTMLButtonElement>;
+    /** Whether to show a 16x16px version of the IconButton */
+    compact?: boolean;
 }
 export declare function IconButton(props: IconButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const iconButtonStylesHover: {

package/dist/components/IconButton.js

@@ -10,7 +10,7 @@ const Css_1 = require("../Css");
 const utils_1 = require("../utils");
 const useTestIds_1 = require("../utils/useTestIds");
 function IconButton(props) {
-    const { onClick: onPress, disabled, color, icon, autoFocus, inc, buttonRef, tooltip, menuTriggerProps, openInNew, } = props;
+    const { onClick: onPress, disabled, color, icon, autoFocus, inc, buttonRef, tooltip, menuTriggerProps, openInNew, compact = false, } = props;
     const isDisabled = !!disabled;
     const ariaProps = { onPress, isDisabled, autoFocus, ...menuTriggerProps };
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -25,12 +25,13 @@ function IconButton(props) {
     const testIds = (0, useTestIds_1.useTestIds)(props, icon);
     const styles = (0, react_1.useMemo)(() => ({
         ...iconButtonStylesReset,
+        ...(compact ? iconButtonCompact : iconButtonNormal),
         ...(isHovered && exports.iconButtonStylesHover),
         ...(isFocusVisible && iconButtonStylesFocus),
         ...(isDisabled && iconButtonStylesDisabled),
-    }), [isHovered, isFocusVisible, isDisabled]);
+    }), [isHovered, isFocusVisible, isDisabled, compact]);
     const buttonAttrs = { ...testIds, ...buttonProps, ...focusProps, ...hoverProps, ref: ref, css: styles };
-    const buttonContent = ((0, jsx_runtime_1.jsx)(components_1.Icon, { icon: icon, color: color || (isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Gray900), inc: inc }, void 0));
+    const buttonContent = ((0, jsx_runtime_1.jsx)(components_1.Icon, { icon: icon, color: color || (isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Gray900), inc: compact ? 2 : inc }, void 0));
     const button = typeof onPress === "string" ? ((0, utils_1.isAbsoluteUrl)(onPress) || openInNew ? ((0, jsx_runtime_1.jsx)("a", Object.assign({}, buttonAttrs, { href: onPress, className: components_1.navLink, target: "_blank", rel: "noreferrer noopener" }, { children: buttonContent }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, buttonAttrs, { to: onPress, className: components_1.navLink }, { children: buttonContent }), void 0))) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonAttrs, { children: buttonContent }), void 0));
     // If we're disabled b/c of a non-boolean ReactNode, or the caller specified tooltip text, then show it in a tooltip
     return (0, components_1.maybeTooltip)({
@@ -40,7 +41,9 @@ function IconButton(props) {
     });
 }
 exports.IconButton = IconButton;
-const iconButtonStylesReset = Css_1.Css.hPx(28).wPx(28).br8.bTransparent.bsSolid.bw2.bgTransparent.cursorPointer.outline0.p0.dif.aic.jcc.transition.$;
+const iconButtonStylesReset = Css_1.Css.bTransparent.bsSolid.bgTransparent.cursorPointer.outline0.dif.aic.jcc.transition.$;
+const iconButtonNormal = Css_1.Css.hPx(28).wPx(28).br8.bw2.$;
+const iconButtonCompact = Css_1.Css.hPx(18).wPx(18).br4.bw1.$;
 exports.iconButtonStylesHover = Css_1.Css.bgGray200.$;
 const iconButtonStylesFocus = Css_1.Css.bLightBlue700.$;
 const iconButtonStylesDisabled = Css_1.Css.cursorNotAllowed.$;

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

@@ -245,6 +245,8 @@ export declare type GridColumn<R extends Kinded, S = {}> = {
     clientSideSort?: boolean;
     /** This column's sort by value (if server-side sorting). */
     serverSideSortKey?: S;
+    /** Allows the column to stay in place when the user scrolls horizontally */
+    sticky?: "left" | "right";
 };
 export declare const nonKindGridColumnKeys: string[];
 /** Allows rendering a specific cell. */
@@ -284,6 +286,8 @@ export declare type GridCellContent = {
     indent?: 1 | 2;
     colspan?: number;
     typeScale?: Typography;
+    /** Allows the cell to stay in place when the user scrolls horizontally */
+    sticky?: "left" | "right";
 };
 declare type MaybeFn<T> = T | (() => T);
 /**

package/dist/components/Table/GridTable.js

@@ -42,6 +42,7 @@ const useSortState_1 = require("./useSortState");
 const visitor_1 = require("./visitor");
 const Css_1 = require("../../Css");
 const hooks_1 = require("../../hooks");
+const useRenderCount_1 = require("../../hooks/useRenderCount");
 const tinycolor2_1 = __importDefault(require("tinycolor2"));
 const _1 = require(".");
 exports.ASC = "ASC";
@@ -109,6 +110,11 @@ function GridTable(props) {
             },
         };
     }
+    // We track render count at the table level, which seems odd (we should be able to track this
+    // internally within each GridRow using a useRef), but we have suspicions that react-virtuoso
+    // (or us) is resetting component state more than necessary, so we track render counts from
+    // here instead.
+    const { getCount } = (0, useRenderCount_1.useRenderCount)();
     const [sortState, setSortKey] = (0, useSortState_1.useSortState)(columns, sorting);
     const maybeSorted = (0, react_1.useMemo)(() => {
         if ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" && sortState) {
@@ -140,6 +146,7 @@ function GridTable(props) {
                 openCards: nestedCards ? nestedCards.currentOpenCards() : undefined,
                 columnSizes,
                 level,
+                getCount,
                 ...sortProps,
             }), `${row.kind}-${row.id}`));
         }
@@ -445,7 +452,7 @@ function getFirstOrLastCellCss(style, columnIndex, columns) {
 }
 // We extract GridRow to its own mini-component primarily so we can React.memo'ize it.
 function GridRow(props) {
-    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sorting, sortState, setSortKey, openCards, columnSizes, level, ...others } = props;
+    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sorting, sortState, setSortKey, openCards, columnSizes, level, getCount, ...others } = props;
     // We treat the "header" kind as special for "good defaults" styling
     const isHeader = row.kind === "header";
     const rowStyle = rowStyles === null || rowStyles === void 0 ? void 0 : rowStyles[row.kind];
@@ -467,12 +474,12 @@ function GridRow(props) {
         }),
         ...maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowCss),
         // Maybe add the sticky header styles
-        ...(isHeader && stickyHeader ? Css_1.Css.sticky.top(stickyOffset).z1.$ : undefined),
+        ...(isHeader && stickyHeader ? Css_1.Css.sticky.top(stickyOffset).z2.$ : undefined),
         ...(0, nestedCards_1.getNestedCardStyles)(row, openCardStyles, style),
     };
     let currentColspan = 1;
-    const rowNode = ((0, jsx_runtime_1.jsx)(Row, Object.assign({ css: rowCss }, others, { "data-gridrow": true }, { children: columns.map((column, columnIndex) => {
-            var _a, _b;
+    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;
             if (column.mw) {
                 // Validate the column's minWidth definition if set.
                 if (!column.mw.endsWith("px") && !column.mw.endsWith("%")) {
@@ -493,6 +500,27 @@ function GridRow(props) {
             const content = toContent(maybeContent, isHeader, canSortColumn, (sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client", style, as, alignment);
             (0, sortRows_1.ensureClientSideSortValueIsSortable)(sorting, isHeader, column, columnIndex, maybeContent);
             const maybeNestedCardColumnIndex = columnIndex + (style.nestedCards ? 1 : 0);
+            const maybeSticky = (_b = ((isGridCellContent(maybeContent) && maybeContent.sticky) || column.sticky)) !== null && _b !== void 0 ? _b : undefined;
+            const maybeStickyColumnStyles = maybeSticky && columnSizes
+                ? {
+                    ...Css_1.Css.sticky.z1.$,
+                    // Need to apply a background to this cell to avoid content beneath it being shown when sticky.
+                    // Assumes background is white for non-nestedCard styles. This can be overridden via cellCss.
+                    ...(((_c = style.nestedCards) === null || _c === void 0 ? void 0 : _c.kinds)
+                        ? Css_1.Css.bgColor((0, nestedCards_1.getCurrentBgColor)(row, openCardStyles, style.nestedCards.kinds)).$
+                        : Css_1.Css.bgWhite.$),
+                    ...(maybeSticky === "left"
+                        ? Css_1.Css.left(maybeNestedCardColumnIndex === 0
+                            ? 0
+                            : `calc(${columnSizes.slice(0, maybeNestedCardColumnIndex).join(" + ")})`).$
+                        : {}),
+                    ...(maybeSticky === "right"
+                        ? Css_1.Css.right(maybeNestedCardColumnIndex + 1 === columnSizes.length
+                            ? 0
+                            : `calc(${columnSizes.slice(maybeNestedCardColumnIndex + 1 - columnSizes.length).join(" + ")})`).$
+                        : {}),
+                }
+                : {};
             // Note that it seems expensive to calc a per-cell class name/CSS-in-JS output,
             // vs. setting global/table-wide CSS like `style.cellCss` on the root grid div with
             // a few descendent selectors. However, that approach means the root grid-applied
@@ -505,6 +533,8 @@ function GridRow(props) {
             const cellCss = {
                 // Adding display flex so we can align content within the cells
                 ...Css_1.Css.df.$,
+                // Apply sticky column/cell styles
+                ...maybeStickyColumnStyles,
                 // Apply any static/all-cell styling
                 ...style.cellCss,
                 // Then override with first/last cell styling
@@ -515,7 +545,7 @@ function GridRow(props) {
                 // Then apply any header-specific override
                 ...(isHeader && style.headerCellCss),
                 // Or level-specific styling
-                ...(!isHeader && !!style.levels && ((_b = style.levels[level]) === null || _b === void 0 ? void 0 : _b.cellCss)),
+                ...(!isHeader && !!style.levels && ((_d = style.levels[level]) === null || _d === void 0 ? void 0 : _d.cellCss)),
                 // The specific cell's css (if any from GridCellContent)
                 ...rowStyleCellCss,
                 // Add any cell specific style overrides

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

@@ -88,6 +88,12 @@ export declare function getNestedCardStyles(row: GridDataRow<any>, openCardStyle
     paddingLeft?: import("csstype").Property.PaddingLeft<0 | (string & {})> | undefined;
     paddingRight?: import("csstype").Property.PaddingRight<0 | (string & {})> | undefined;
 };
+/**
+ * Returns the background color for the row.
+ * Either based on the current row's card having a defined background color, or the last opened card's background color
+ * Defaults to White.
+ */
+export declare function getCurrentBgColor(row: GridDataRow<any>, openCardStyles: NestedCardStyle[] | undefined, nestedKinds: NestedCardStyleByKind): string;
 /**
  * Create a spacer between rows of children.
  *

package/dist/components/Table/nestedCards.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isLeafRow = exports.dropChromeRows = exports.ChromeRow = exports.makeSpacer = exports.getNestedCardStyles = exports.wrapCard = exports.makeOpenOrCloseCard = exports.NestedCards = void 0;
+exports.isLeafRow = exports.dropChromeRows = exports.ChromeRow = exports.makeSpacer = exports.getCurrentBgColor = exports.getNestedCardStyles = exports.wrapCard = exports.makeOpenOrCloseCard = exports.NestedCards = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const Css_1 = require("../../Css");
@@ -176,6 +176,21 @@ function getNestedCardStyles(row, openCardStyles, style) {
     };
 }
 exports.getNestedCardStyles = getNestedCardStyles;
+/**
+ * Returns the background color for the row.
+ * Either based on the current row's card having a defined background color, or the last opened card's background color
+ * Defaults to White.
+ */
+function getCurrentBgColor(row, openCardStyles, nestedKinds) {
+    if (nestedKinds[row.kind]) {
+        return nestedKinds[row.kind].bgColor;
+    }
+    if (openCardStyles && openCardStyles.length > 0) {
+        return openCardStyles[openCardStyles.length - 1].bgColor;
+    }
+    return Css_1.Palette.White;
+}
+exports.getCurrentBgColor = getCurrentBgColor;
 /**
  * Create a spacer between rows of children.
  *

package/dist/hooks/useRenderCount.d.ts

@@ -0,0 +1,17 @@
+/**
+ * A hook to add `data-render=${count}` to an element.
+ *
+ * This will output even in production mode, which in theory is not necessary
+ * and we could/should avoid, but it should also be np.
+ *
+ * The intent is to leave it "always on" for dev & tests, so that engineers
+ * and test suites can very easily grab "what was the render count of that?"
+ * w/o bringing in one-off modes/tools.
+ *
+ * (One-off modes/tools are more appropriate for truly adhoc performance
+ * but the intent is to use this in GridTable where "what's the render count?"
+ * will be a common question.)
+ */
+export declare function useRenderCount(): {
+    getCount: (id: string) => object;
+};

package/dist/hooks/useRenderCount.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRenderCount = void 0;
+const react_1 = require("react");
+/**
+ * A hook to add `data-render=${count}` to an element.
+ *
+ * This will output even in production mode, which in theory is not necessary
+ * and we could/should avoid, but it should also be np.
+ *
+ * The intent is to leave it "always on" for dev & tests, so that engineers
+ * and test suites can very easily grab "what was the render count of that?"
+ * w/o bringing in one-off modes/tools.
+ *
+ * (One-off modes/tools are more appropriate for truly adhoc performance
+ * but the intent is to use this in GridTable where "what's the render count?"
+ * will be a common question.)
+ */
+function useRenderCount() {
+    const ref = (0, react_1.useRef)(new Map());
+    const getCount = (0, react_1.useCallback)((id) => {
+        const count = ref.current.get(id) || 1;
+        ref.current.set(id, count + 1);
+        return { "data-render": count };
+    }, []);
+    return { getCount };
+}
+exports.useRenderCount = useRenderCount;

package/package.json

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