@homebound/beam 2.110.0 → 2.113.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

@@ -1,7 +1,7 @@
 import { MutableRefObject, ReactElement, ReactNode } from "react";
 import { PresentationContextProps, PresentationFieldProps } from "../PresentationContext";
 import { GridRowLookup } from "./GridRowLookup";
-import { Margin, Only, Properties, Typography, Xss } from "../../Css";
+import { Margin, Only, Palette, Properties, Typography, Xss } from "../../Css";
 export declare type Kinded = {
     kind: string;
 };
@@ -42,7 +42,7 @@ export interface GridStyle {
     /** Applied if there is a fallback/overflow message showing. */
     firstRowMessageCss?: Properties;
     /** Applied on hover if a row has a rowLink/onClick set. */
-    rowHoverColor?: string;
+    rowHoverColor?: Palette;
     /** Styling for our special "nested card" output mode. */
     nestedCards?: NestedCardsStyle;
     /** Default content to put into an empty cell */
@@ -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

@@ -43,7 +43,6 @@ 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";
 exports.DESC = "DESC";
@@ -452,6 +451,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) {
+    var _a;
     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";
@@ -467,19 +467,18 @@ function GridRow(props) {
     const rowCss = {
         // For virtual tables use `display: flex` to keep all cells on the same row. For each cell in the row use `flexNone` to ensure they stay their defined widths
         ...(as === "table" ? {} : Css_1.Css.relative.df.fg1.fs1.addIn("&>*", Css_1.Css.flexNone.$).$),
-        ...(((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick)) &&
-            style.rowHoverColor && {
-            // Even though backgroundColor is set on the cellCss (due to display: content), the hover target is the row.
-            "&:hover > *": Css_1.Css.cursorPointer.bgColor(maybeDarken(rowStyleCellCss === null || rowStyleCellCss === void 0 ? void 0 : rowStyleCellCss.backgroundColor, style.rowHoverColor)).$,
+        ...(((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick)) && {
+            // Even though backgroundColor is set on the cellCss, the hover target is the row.
+            "&:hover > *": Css_1.Css.cursorPointer.bgColor((_a = style.rowHoverColor) !== null && _a !== void 0 ? _a : Css_1.Palette.LightBlue100).$,
         }),
         ...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 }, getCount(row.id), { children: columns.map((column, columnIndex) => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             if (column.mw) {
                 // Validate the column's minWidth definition if set.
                 if (!column.mw.endsWith("px") && !column.mw.endsWith("%")) {
@@ -500,6 +499,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
@@ -512,6 +532,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
@@ -522,7 +544,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
@@ -697,9 +719,6 @@ function matchesFilter(maybeContent, filter) {
     return false;
 }
 exports.matchesFilter = matchesFilter;
-function maybeDarken(color, defaultColor) {
-    return color ? (0, tinycolor2_1.default)(color).darken(4).toString() : defaultColor;
-}
 /** GridTable as Table utility to apply <tr> element override styles. */
 function tableRowStyles(as, column) {
     const thWidth = column === null || column === void 0 ? void 0 : column.w;

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/components/Table/styles.js

@@ -14,7 +14,6 @@ exports.defaultStyle = {
     indentTwoCss: Css_1.Css.pl7.$,
     headerCellCss: Css_1.Css.nowrap.py1.bgGray100.aife.$,
     firstRowMessageCss: Css_1.Css.px1.py2.$,
-    rowHoverColor: Css_1.Palette.Gray200,
 };
 /** Tightens up the padding of rows, great for rows that have form elements in them. */
 exports.condensedStyle = {
@@ -45,7 +44,6 @@ exports.beamFixedStyle = {
     cellCss: Css_1.Css.gray900.xs.bgWhite.aic.nowrap.pxPx(12).hPx(36).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray100}`).$,
     emptyCell: "-",
     presentationSettings: { borderless: true, typeScale: "xs", wrap: false },
-    rowHoverColor: Css_1.Palette.Gray200,
     // Included as a hacky "treat indent as deprecated for this table" hint to GridTable
     levels: {},
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.110.0",
+  "version": "2.113.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -37,7 +37,6 @@
     "@internationalized/number": "^3.0.3",
     "@react-aria/utils": "^3.9.0",
     "@react-hook/resize-observer": "^1.2.2",
-    "@types/tinycolor2": "^1.4.2",
     "change-case": "^4.1.2",
     "date-fns": "^2.21.3",
     "dompurify": "^2.3.0",
@@ -50,7 +49,6 @@
     "react-router-dom": "^5.2.0",
     "react-stately": "^3.9.0",
     "react-virtuoso": "^2.4.0",
-    "tinycolor2": "^1.4.2",
     "tributejs": "^5.1.3",
     "trix": "^1.3.1",
     "use-query-params": "^1.2.2",