@homebound/beam 2.122.1 → 2.123.2

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

@@ -1,5 +1,5 @@
-import { GridDataRow } from "..";
-export interface GridTableCollapseToggleProps {
+import { GridDataRow, IconButtonProps } from "..";
+export interface GridTableCollapseToggleProps extends Pick<IconButtonProps, "compact"> {
     row: GridDataRow<any>;
 }
 /** Provides a chevron icons to collapse/un-collapse for parent/child tables. */

package/dist/components/Table/CollapseToggle.js

@@ -7,16 +7,16 @@ const components_1 = require("..");
 const hooks_1 = require("../../hooks");
 /** Provides a chevron icons to collapse/un-collapse for parent/child tables. */
 function CollapseToggle(props) {
-    const { row } = props;
+    const { row, compact } = props;
     const { rowState } = (0, react_1.useContext)(components_1.RowStateContext);
     const isCollapsed = (0, hooks_1.useComputed)(() => rowState.isCollapsed(row.id), [rowState]);
     const iconKey = isCollapsed ? "chevronRight" : "chevronDown";
     const headerIconKey = isCollapsed ? "chevronsRight" : "chevronsDown";
     // If we're not a header, only render a toggle if we have child rows to actually collapse
     const isHeader = row.kind === "header";
-    if (!isHeader && (!props.row.children || props.row.children.length === 0)) {
+    if (!isHeader && (!row.children || row.children.length === 0)) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(components_1.IconButton, { onClick: () => rowState.toggleCollapsed(row.id), icon: isHeader ? headerIconKey : iconKey }, void 0);
+    return ((0, jsx_runtime_1.jsx)(components_1.IconButton, { onClick: () => rowState.toggleCollapsed(row.id), icon: isHeader ? headerIconKey : iconKey, compact: compact }, void 0));
 }
 exports.CollapseToggle = CollapseToggle;

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

@@ -53,7 +53,8 @@ export interface GridStyle {
     minWidthPx?: number;
     /** Css to apply at each level of a parent/child nested table. */
     levels?: Record<number, {
-        cellCss: Properties;
+        cellCss?: Properties;
+        firstContentColumn?: Properties;
     }>;
     /** Allows for customization of the background color used to denote an "active" row */
     activeBgColor?: Palette;
@@ -232,7 +233,15 @@ declare type GridRowKind<R extends Kinded, P extends R["kind"]> = DiscriminateUn
 export declare type GridColumn<R extends Kinded, S = {}> = {
     [K in R["kind"]]: string | GridCellContent | (DiscriminateUnion<R, "kind", K> extends {
         data: infer D;
-    } ? (data: D, row: GridRowKind<R, K>, api: GridTableApi<R>) => ReactNode | GridCellContent : (data: undefined, row: GridRowKind<R, K>, api: GridTableApi<R>) => ReactNode | GridCellContent);
+    } ? (data: D, opts: {
+        row: GridRowKind<R, K>;
+        api: GridTableApi<R>;
+        level: number;
+    }) => ReactNode | GridCellContent : (data: undefined, opts: {
+        row: GridRowKind<R, K>;
+        api: GridTableApi<R>;
+        level: number;
+    }) => ReactNode | GridCellContent);
 } & {
     /**
      * The column's width.
@@ -253,6 +262,8 @@ export declare type GridColumn<R extends Kinded, S = {}> = {
     sticky?: "left" | "right";
     /** Prevent column from supporting RowStyle.onClick/rowLink in order to avoid nested interactivity. Defaults to true */
     wrapAction?: false;
+    /** Used as a signal to defer adding the 'indent' styling */
+    isAction?: true;
 };
 export declare const nonKindGridColumnKeys: string[];
 /** Allows rendering a specific cell. */
@@ -317,6 +328,6 @@ export declare type GridDataRow<R extends Kinded> = {
 } & IfAny<R, {}, DiscriminateUnion<R, "kind", R["kind"]>>;
 declare type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
 /** Return the content for a given column def applied to a given row. */
-export declare function applyRowFn<R extends Kinded>(column: GridColumn<R>, row: GridDataRow<R>, api: GridTableApi<R>): ReactNode | GridCellContent;
+export declare function applyRowFn<R extends Kinded>(column: GridColumn<R>, row: GridDataRow<R>, api: GridTableApi<R>, level: number): ReactNode | GridCellContent;
 export declare function matchesFilter(maybeContent: ReactNode | GridCellContent, filter: string): boolean;
 export {};

package/dist/components/Table/GridTable.js

@@ -125,7 +125,7 @@ function GridTable(props) {
         const matches = row.kind === "header" ||
             filters.length === 0 ||
             !!row.pin ||
-            filters.every((f) => columns.map((c) => applyRowFn(c, row, api)).some((maybeContent) => matchesFilter(maybeContent, f)));
+            filters.every((f) => columns.map((c) => applyRowFn(c, row, api, 0)).some((maybeContent) => matchesFilter(maybeContent, f)));
         // If the row matches, add it in
         if (matches) {
             return acc.concat([[row, (_b = (_a = row.children) === null || _a === void 0 ? void 0 : _a.reduce(filterRows, [])) !== null && _b !== void 0 ? _b : []]]);
@@ -491,9 +491,12 @@ function GridRow(props) {
         ...(0, nestedCards_1.getNestedCardStyles)(row, openCardStyles, style, isActive),
     };
     let currentColspan = 1;
+    let firstContentColumnStylesApplied = false;
     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, _e;
-            const { wrapAction = true } = column;
+            var _a, _b, _c, _d, _e, _f;
+            const { wrapAction = true, isAction = false } = column;
+            const applyFirstContentColumnStyles = !isAction && !firstContentColumnStylesApplied;
+            firstContentColumnStylesApplied || (firstContentColumnStylesApplied = applyFirstContentColumnStyles);
             if (column.mw) {
                 // Validate the column's minWidth definition if set.
                 if (!column.mw.endsWith("px") && !column.mw.endsWith("%")) {
@@ -505,7 +508,7 @@ function GridRow(props) {
                 currentColspan -= 1;
                 return null;
             }
-            const maybeContent = applyRowFn(column, row, api);
+            const maybeContent = applyRowFn(column, row, api, level);
             currentColspan = isGridCellContent(maybeContent) ? (_a = maybeContent.colspan) !== null && _a !== void 0 ? _a : 1 : 1;
             const canSortColumn = (sortOn === "client" && column.clientSideSort !== false) ||
                 (sortOn === "server" && !!column.serverSideSortKey);
@@ -560,11 +563,13 @@ function GridRow(props) {
                 ...(isHeader && style.headerCellCss),
                 // Or level-specific styling
                 ...(!isHeader && !!style.levels && ((_d = style.levels[level]) === null || _d === void 0 ? void 0 : _d.cellCss)),
+                // Level specific styling for the first content column
+                ...(applyFirstContentColumnStyles && !!style.levels && ((_e = style.levels[level]) === null || _e === void 0 ? void 0 : _e.firstContentColumn)),
                 // The specific cell's css (if any from GridCellContent)
                 ...rowStyleCellCss,
                 // Apply active row styling for non-nested card styles.
                 ...(style.nestedCards === undefined && isActive
-                    ? Css_1.Css.bgColor((_e = style.activeBgColor) !== null && _e !== void 0 ? _e : Css_1.Palette.LightBlue50).$
+                    ? Css_1.Css.bgColor((_f = style.activeBgColor) !== null && _f !== void 0 ? _f : Css_1.Palette.LightBlue50).$
                     : {}),
                 // Add any cell specific style overrides
                 ...(isGridCellContent(maybeContent) && maybeContent.typeScale ? Css_1.Css[maybeContent.typeScale].$ : {}),
@@ -638,12 +643,12 @@ function isContentEmpty(content) {
     return emptyValues.includes(content);
 }
 /** Return the content for a given column def applied to a given row. */
-function applyRowFn(column, row, api) {
+function applyRowFn(column, row, api, level) {
     // Usually this is a function to apply against the row, but sometimes it's a hard-coded value, i.e. for headers
     const maybeContent = column[row.kind];
     if (typeof maybeContent === "function") {
         // Auto-destructure data
-        return maybeContent(row["data"], row, api);
+        return maybeContent(row["data"], { row: row, api, level });
     }
     else {
         return maybeContent;

package/dist/components/Table/columns.js

@@ -24,7 +24,7 @@ function numericColumn(columnDef) {
 exports.numericColumn = numericColumn;
 /** Provides default styling for a GridColumn representing an Action. */
 function actionColumn(columnDef) {
-    return { clientSideSort: false, ...columnDef, align: "center" };
+    return { clientSideSort: false, ...columnDef, align: "center", isAction: true };
 }
 exports.actionColumn = actionColumn;
 /**
@@ -42,11 +42,12 @@ function selectColumn(columnDef) {
         // Defining `w: 48px` to accommodate for the `16px` wide checkbox and `16px` of padding on either side.
         w: "48px",
         wrapAction: false,
+        isAction: true,
         // Use any of the user's per-row kind methods if they have them.
         ...columnDef,
     };
     return (0, index_1.newMethodMissingProxy)(base, (key) => {
-        return (data, row) => ({ content: (0, jsx_runtime_1.jsx)(SelectToggle_1.SelectToggle, { id: row.id }, void 0) });
+        return (data, { row }) => ({ content: (0, jsx_runtime_1.jsx)(SelectToggle_1.SelectToggle, { id: row.id }, void 0) });
     });
 }
 exports.selectColumn = selectColumn;
@@ -65,10 +66,13 @@ function collapseColumn(columnDef) {
         // Defining `w: 38px` based on the designs
         w: "38px",
         wrapAction: false,
+        isAction: true,
         ...columnDef,
     };
     return (0, index_1.newMethodMissingProxy)(base, (key) => {
-        return (data, row) => ({ content: (0, jsx_runtime_1.jsx)(CollapseToggle_1.CollapseToggle, { row: row }, void 0) });
+        return (data, { row, level }) => ({
+            content: (0, jsx_runtime_1.jsx)(CollapseToggle_1.CollapseToggle, { row: row, compact: level > 0 }, void 0),
+        });
     });
 }
 exports.collapseColumn = collapseColumn;

package/dist/components/Table/sortRows.js

@@ -21,8 +21,8 @@ function sortBatch(columns, batch, sortState) {
     const invert = direction === "DESC";
     // Make a shallow copy for sorting to avoid mutating the original list
     return [...batch].sort((a, b) => {
-        const v1 = sortValue((0, GridTable_1.applyRowFn)(column, a, {}));
-        const v2 = sortValue((0, GridTable_1.applyRowFn)(column, b, {}));
+        const v1 = sortValue((0, GridTable_1.applyRowFn)(column, a, {}, 0));
+        const v2 = sortValue((0, GridTable_1.applyRowFn)(column, b, {}, 0));
         const v1e = v1 === null || v1 === undefined;
         const v2e = v2 === null || v2 === undefined;
         if (a.pin || b.pin) {

package/dist/components/Table/styles.js

@@ -42,7 +42,7 @@ exports.cardStyle = {
 // Once completely rolled out across all tables in Blueprint, this will change to be the `defaultStyle`.
 exports.beamFixedStyle = {
     headerCellCss: Css_1.Css.gray700.xsEm.bgGray200.aic.nowrap.pxPx(12).hPx(40).$,
-    cellCss: Css_1.Css.gray900.xs.bgWhite.aic.nowrap.pxPx(12).hPx(36).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray100}`).$,
+    cellCss: Css_1.Css.gray900.xs.bgWhite.aic.nowrap.pxPx(12).hPx(36).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$,
     emptyCell: "-",
     presentationSettings: { borderless: true, typeScale: "xs", wrap: false },
     firstRowMessageCss: Css_1.Css.tc.py3.$,
@@ -57,7 +57,7 @@ exports.beamGroupRowStyle = Css_1.Css.xsEm
 exports.beamTotalsRowStyle = Css_1.Css.gray700.smEm.hPx(40).mb1.bgWhite.boxShadow("none").$;
 exports.beamNestedFixedStyle = {
     ...exports.beamFixedStyle,
-    levels: { 0: { cellCss: exports.beamGroupRowStyle } },
+    levels: { 0: { cellCss: exports.beamGroupRowStyle }, 2: { firstContentColumn: Css_1.Css.tiny.pl3.$ } },
 };
 exports.beamTotalsFixedStyle = {
     ...exports.beamFixedStyle,
@@ -70,7 +70,7 @@ exports.beamFlexibleStyle = {
 };
 exports.beamNestedFlexibleStyle = {
     ...exports.beamFlexibleStyle,
-    levels: { 0: { cellCss: exports.beamGroupRowStyle } },
+    levels: { 0: { cellCss: exports.beamGroupRowStyle }, 2: { firstContentColumn: Css_1.Css.tiny.pl3.$ } },
 };
 exports.beamTotalsFlexibleStyle = {
     ...exports.beamFlexibleStyle,

package/dist/components/Tooltip.js

@@ -35,7 +35,12 @@ function Tooltip(props) {
     const { triggerProps, tooltipProps: _tooltipProps } = (0, react_aria_1.useTooltipTrigger)({ isDisabled: disabled }, state, triggerRef);
     const { tooltipProps } = (0, react_aria_1.useTooltip)(_tooltipProps, state);
     const tid = (0, utils_1.useTestIds)(props, "tooltip");
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ ref: triggerRef }, triggerProps, (!state.isOpen && typeof title === "string" ? { title } : {}), tid, { children: children }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(Popper, Object.assign({}, (0, react_aria_1.mergeProps)(_tooltipProps, tooltipProps), { triggerRef: triggerRef, content: title, placement: placement }), void 0))] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ ref: triggerRef }, triggerProps, (!state.isOpen && typeof title === "string" ? { title } : {}), tid, { 
+                // Adding `draggable` as a hack to allow focus to continue through this element and into its children.
+                // This is due to some code in React-Aria that prevents default due ot mobile browser inconsistencies,
+                // and the only way they don't prevent default is if the element is draggable.
+                // See https://github.com/adobe/react-spectrum/discussions/3058 for discussion related to this issue.
+                draggable: true, onDragStart: (e) => e.preventDefault() }, { children: children }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(Popper, Object.assign({}, (0, react_aria_1.mergeProps)(_tooltipProps, tooltipProps), { triggerRef: triggerRef, content: title, placement: placement }), void 0))] }, void 0));
 }
 exports.Tooltip = Tooltip;
 function Popper({ triggerRef, content, placement = "auto" }) {

package/dist/inputs/ChipSelectField.js

@@ -100,11 +100,11 @@ function ChipSelectField(props) {
         items: listData.items,
         children: selectChildren,
         autoFocus: true,
+        disallowEmptySelection: false,
     };
     const state = (0, react_stately_1.useSelectState)({
         ...selectHookProps,
         selectedKey: (0, Value_1.valueToKey)(value),
-        disallowEmptySelection: false,
         onSelectionChange: (key) => {
             if (key === createNewOpt.id) {
                 setShowInput(true);

package/dist/inputs/TextFieldBase.js

@@ -50,6 +50,8 @@ function TextFieldBase(props) {
                 .if(compact)
                 .mhPx(compactFieldHeight - maybeSmaller).$,
             ...Css_1.Css.gray900.if(contrast).white.$,
+            // Make read-only fields vertically line up with editable fields in tables
+            ...(borderless ? Css_1.Css.px1.$ : {}),
         },
         input: {
             ...Css_1.Css.w100.mw0.outline0.fg1.if(multiline).br4.$,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.122.1",
+  "version": "2.123.2",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@homebound/form-state": "2.13.0",
     "@internationalized/number": "^3.0.3",
-    "@react-aria/utils": "^3.9.0",
+    "@react-aria/utils": "^3.11.3",
     "@react-hook/resize-observer": "^1.2.2",
     "change-case": "^4.1.2",
     "date-fns": "^2.21.3",
@@ -42,12 +42,12 @@
     "fast-deep-equal": "^3.1.3",
     "framer-motion": "^4.1.11",
     "memoize-one": "^5.2.1",
-    "react-aria": "^3.10.0",
+    "react-aria": "^3.14.1",
     "react-day-picker": "^7.4.10",
     "react-popper": "^2.2.5",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-stately": "^3.9.0",
+    "react-stately": "^3.12.2",
     "react-virtuoso": "^2.4.0",
     "tributejs": "^5.1.3",
     "trix": "^1.3.1",