@homebound/beam 2.148.0 → 2.150.0

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

@@ -222,6 +222,7 @@ export declare type DiscriminateUnion<T, K extends keyof T, V extends T[K]> = T
 declare type GridRowKind<R extends Kinded, P extends R["kind"]> = DiscriminateUnion<R, "kind", P> & {
     id: string;
     children: GridDataRow<R>[];
+    selectable?: false;
 };
 /**
  * Defines how a single column will render each given row `kind` in `R`.
@@ -307,10 +308,12 @@ export declare type GridCellContent = {
     indent?: 1 | 2;
     colspan?: number;
     typeScale?: Typography;
-    /** Allows the cell to stay in place when the user scrolls horizontally */
+    /** Allows the cell to stay in place when the user scrolls horizontally, i.e. frozen columns. */
     sticky?: "left" | "right";
     /** If provided, content of the cell will be wrapped within a <button /> or <a /> tag depending on if the value is a function or a string. */
     onClick?: () => {} | string;
+    /** Custom css to apply directly to this cell, i.e. cell-specific borders. */
+    css?: Properties;
 };
 declare type MaybeFn<T> = T | (() => T);
 /**
@@ -333,6 +336,8 @@ export declare type GridDataRow<R extends Kinded> = {
     data: unknown;
     /** Whether to have the row collapsed (children not visible) on initial load. This will be ignore in subsequent re-renders of the table */
     initCollapsed?: boolean;
+    /** Whether row can be selected */
+    selectable?: false;
 } & 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. */

package/dist/components/Table/GridTable.js

@@ -588,6 +588,8 @@ function GridRow(props) {
                     : {}),
                 // Add any cell specific style overrides
                 ...(isGridCellContent(maybeContent) && maybeContent.typeScale ? Css_1.Css[maybeContent.typeScale].$ : {}),
+                // And any cell specific css
+                ...(isGridCellContent(maybeContent) && maybeContent.css ? maybeContent.css : {}),
                 // Define the width of the column on each cell. Supports col spans.
                 ...{
                     width: `calc(${columnSizes

package/dist/components/Table/GridTableApi.js

@@ -39,19 +39,14 @@ class GridTableApiImpl {
         this.virtuosoRef.current && this.virtuosoRef.current.scrollToIndex(index);
     }
     getSelectedRowIds(kind) {
-        if (kind === undefined) {
-            return this.rowState.selectedIds;
-        }
-        else {
-            return this.getSelectedRows(kind).map((row) => row.id);
-        }
+        return this.getSelectedRows(kind).map((row) => row.id);
     }
     // The any is not great, but getting the overload to handle the optional kind is annoying
     getSelectedRows(kind) {
         const ids = this.rowState.selectedIds;
         const selected = [];
         (0, visitor_1.visit)(this.rowState.rows, (row) => {
-            if (ids.includes(row.id) && (!kind || row.kind === kind)) {
+            if (row.selectable !== false && ids.includes(row.id) && (!kind || row.kind === kind)) {
                 selected.push(row);
             }
         });

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

@@ -1,4 +1,7 @@
-/** Provides a checkbox to show/drive this row's selected state. */
-export declare function SelectToggle({ id }: {
+interface SelectToggleProps {
     id: string;
-}): import("@emotion/react/jsx-runtime").JSX.Element;
+    disabled?: boolean;
+}
+/** Provides a checkbox to show/drive this row's selected state. */
+export declare function SelectToggle({ id, disabled }: SelectToggleProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/SelectToggle.js

@@ -7,12 +7,12 @@ const RowState_1 = require("./RowState");
 const index_1 = require("../../hooks/index");
 const index_2 = require("../../inputs/index");
 /** Provides a checkbox to show/drive this row's selected state. */
-function SelectToggle({ id }) {
+function SelectToggle({ id, disabled }) {
     const { rowState } = (0, react_1.useContext)(RowState_1.RowStateContext);
     const state = (0, index_1.useComputed)(() => rowState.getSelected(id), [rowState]);
     const selected = state === "checked" ? true : state === "unchecked" ? false : "indeterminate";
-    return ((0, jsx_runtime_1.jsx)(index_2.Checkbox, { label: "Select", checkboxOnly: true, selected: selected, onChange: (selected) => {
+    return ((0, jsx_runtime_1.jsx)(index_2.Checkbox, { checkboxOnly: true, disabled: disabled, label: "Select", onChange: (selected) => {
             rowState.selectRow(id, selected);
-        } }, void 0));
+        }, selected: selected }, void 0));
 }
 exports.SelectToggle = SelectToggle;

package/dist/components/Table/columns.js

@@ -47,7 +47,9 @@ function selectColumn(columnDef) {
         ...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, disabled: row.selectable === false }, void 0),
+        });
     });
 }
 exports.selectColumn = selectColumn;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./Css";
-export type { HasIdAndName, CheckFn } from "./types";
+export type { HasIdAndName, CheckFn, DateRange } from "./types";
 export * from "./components";
 export * from "./forms";
 export * from "./hooks";

package/dist/inputs/CheckboxBase.js

@@ -25,9 +25,10 @@ function CheckboxBase(props) {
             .maxw((0, Css_1.px)(344))
             .if(isDisabled).cursorNotAllowed.$, "aria-label": label }, { children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref }, (0, react_aria_1.mergeProps)(inputProps, focusProps), tid), void 0) }, void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({}, hoverProps, { css: {
                     ...baseStyles,
-                    ...((isSelected || isIndeterminate) && filledBoxStyles),
-                    ...((isSelected || isIndeterminate) && isHovered && filledBoxHoverStyles),
+                    ...(((isSelected && !isDisabled) || isIndeterminate) && filledBoxStyles),
+                    ...(((isSelected && !isDisabled) || isIndeterminate) && isHovered && filledBoxHoverStyles),
                     ...(isDisabled && disabledBoxStyles),
+                    ...(isDisabled && isSelected && disabledSelectedBoxStyles),
                     ...(isFocusVisible && focusRingStyles),
                     ...(isHovered && hoverBorderStyles),
                     ...markStyles,
@@ -40,7 +41,8 @@ exports.CheckboxBase = CheckboxBase;
 const baseStyles = Css_1.Css.hPx(16).mw((0, Css_1.px)(16)).relative.ba.bGray300.br4.bgWhite.transition.$;
 const filledBoxStyles = Css_1.Css.bLightBlue700.bgLightBlue700.$;
 const filledBoxHoverStyles = Css_1.Css.bgLightBlue900.$;
-const disabledBoxStyles = Css_1.Css.bGray400.bGray100.$;
+const disabledBoxStyles = Css_1.Css.bgGray50.bGray100.$;
+const disabledSelectedBoxStyles = Css_1.Css.bgGray400.bGray400.$;
 const disabledColor = Css_1.Css.gray300.$;
 const focusRingStyles = Css_1.Css.bshFocus.$;
 const hoverBorderStyles = Css_1.Css.bLightBlue900.$;

package/package.json

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