@homebound/beam 2.108.0 → 2.111.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/Modal/Modal.d.ts

@@ -21,6 +21,8 @@ export interface ModalProps {
     onClose?: Callback;
     /** Imperative API for interacting with the Modal */
     api?: MutableRefObject<ModalApi | undefined>;
+    /** Adds a border for the header. */
+    drawHeaderBorder?: boolean;
 }
 export declare type ModalApi = {
     setSize: (size: ModalProps["size"]) => void;

package/dist/components/Modal/Modal.js

@@ -20,7 +20,7 @@ const utils_1 = require("../../utils");
  * Provides underlay, modal container, and header. Will disable scrolling of page under the modal.
  */
 function Modal(props) {
-    const { size = "md", content, forceScrolling, api } = props;
+    const { size = "md", content, forceScrolling, api, drawHeaderBorder = false } = props;
     const isFixedHeight = typeof size !== "string";
     const ref = (0, react_1.useRef)(null);
     const { modalBodyDiv, modalFooterDiv, modalHeaderDiv, drawerContentStack } = (0, BeamContext_1.useBeamContext)();
@@ -69,7 +69,7 @@ function Modal(props) {
                         .df.fdc.wPx(width)
                         .mh((0, Css_1.px)(defaultMinHeight))
                         .if(isFixedHeight)
-                        .hPx(height).$, ref: ref }, overlayProps, dialogProps, modalProps, testId, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.fs0.$ }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.fg1.xl2Em.gray900.$, ref: modalHeaderRef }, titleProps, testId.title), void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.pl1.$ }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ icon: "x", onClick: closeModal }, testId.titleClose), void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("main", Object.assign({ ref: contentRef, css: Css_1.Css.fg1.overflowYAuto.if(hasScroll).bb.bGray200.if(!!forceScrolling).overflowYScroll.$ }, { children: [content, (0, jsx_runtime_1.jsx)("div", { ref: modalBodyRef }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)("footer", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)("div", { ref: modalFooterRef }, void 0) }), void 0)] }), void 0) }), void 0) }), void 0) }, void 0));
+                        .hPx(height).$, ref: ref }, overlayProps, dialogProps, modalProps, testId, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.fs0.if(drawHeaderBorder).bb.bGray200.$ }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.fg1.xl2Em.gray900.$, ref: modalHeaderRef }, titleProps, testId.title), void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.pl1.$ }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ icon: "x", onClick: closeModal }, testId.titleClose), void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("main", Object.assign({ ref: contentRef, css: Css_1.Css.fg1.overflowYAuto.if(hasScroll).bb.bGray200.if(!!forceScrolling).overflowYScroll.$ }, { children: [content, (0, jsx_runtime_1.jsx)("div", { ref: modalBodyRef }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)("footer", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)("div", { ref: modalFooterRef }, void 0) }), void 0)] }), void 0) }), void 0) }), void 0) }, void 0));
 }
 exports.Modal = Modal;
 function ModalHeader({ children }) {

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];
@@ -471,7 +478,7 @@ function GridRow(props) {
         ...(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) => {
+    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;
             if (column.mw) {
                 // Validate the column's minWidth definition if set.

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