@homebound/beam 2.101.5 → 2.102.0

package/dist/components/Table/GridTable.js

@@ -492,7 +492,9 @@ function GridRow(props) {
                 currentColspan = isGridCellContent(maybeContent) ? (_a = maybeContent.colspan) !== null && _a !== void 0 ? _a : 1 : 1;
                 const canSortColumn = ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" && column.clientSideSort !== false) ||
                     ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "server" && !!column.serverSideSortKey);
-                const content = toContent(maybeContent, isHeader, canSortColumn, (sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client", style, as);
+                const alignment = getAlignment(column, maybeContent);
+                const justificationCss = getJustification(column, maybeContent, as, alignment);
+                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);
                 // Note that it seems expensive to calc a per-cell class name/CSS-in-JS output,
@@ -512,7 +514,7 @@ function GridRow(props) {
                     // Then override with first/last cell styling
                     ...getFirstOrLastCellCss(style, columnIndex, columns),
                     // Then override with per-cell/per-row justification/indentation
-                    ...getJustification(column, maybeContent, as),
+                    ...justificationCss,
                     ...getIndentationCss(style, rowStyle, columnIndex, maybeContent),
                     // Then apply any header-specific override
                     ...(isHeader && style.headerCellCss),
@@ -553,7 +555,7 @@ function isJSX(content) {
     return typeof content === "object" && content && "type" in content && "props" in content;
 }
 /** If a column def return just string text for a given row, apply some default styling. */
-function toContent(content, isHeader, canSortColumn, isClientSideSorting, style, as) {
+function toContent(content, isHeader, canSortColumn, isClientSideSorting, style, as, alignment) {
     content = isGridCellContent(content) ? content.content : content;
     if (typeof content === "function") {
         // Actually create the JSX by calling `content()` here (which should be as late as
@@ -572,7 +574,7 @@ function toContent(content, isHeader, canSortColumn, isClientSideSorting, style,
         throw new Error("GridTables with as=virtual & sortable columns should use functions that return JSX, instead of JSX");
     }
     if (content && typeof content === "string" && isHeader && canSortColumn) {
-        return (0, jsx_runtime_1.jsx)(SortHeader_1.SortHeader, { content: content }, void 0);
+        return (0, jsx_runtime_1.jsx)(SortHeader_1.SortHeader, { content: content, iconOnLeft: alignment === "right" }, void 0);
     }
     else if (style.emptyCell && isContentEmpty(content)) {
         // If the content is empty and the user specified an `emptyCell` node, return that.
@@ -650,9 +652,11 @@ const alignmentToTextAlign = {
     center: "center",
     right: "right",
 };
+function getAlignment(column, maybeContent) {
+    return (isGridCellContent(maybeContent) && maybeContent.alignment) || column.align || "left";
+}
 // For alignment, use: 1) cell def, else 2) column def, else 3) left.
-function getJustification(column, maybeContent, as) {
-    const alignment = (isGridCellContent(maybeContent) && maybeContent.alignment) || column.align || "left";
+function getJustification(column, maybeContent, as, alignment) {
     // Always apply text alignment.
     const textAlign = Css_1.Css.add("textAlign", alignmentToTextAlign[alignment]).$;
     if (as === "table") {

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

@@ -13,4 +13,5 @@ import { Properties } from "../../Css";
 export declare function SortHeader(props: {
     content: string;
     xss?: Properties;
+    iconOnLeft?: boolean;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Table/SortHeader.js

@@ -20,13 +20,16 @@ const useTestIds_1 = require("../../utils/useTestIds");
  *   current sort state + `toggleSort` function
  */
 function SortHeader(props) {
-    const { content, xss } = props;
+    const { content, xss, iconOnLeft = false } = props;
     const { isHovered, hoverProps } = (0, hooks_1.useHover)({});
     const { sorted, toggleSort } = (0, react_1.useContext)(GridSortContext_1.GridSortContext);
     const tid = (0, useTestIds_1.useTestIds)(props, "sortHeader");
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, tid, { css: { ...Css_1.Css.df.aic.h100.cursorPointer.selectNone.$, ...xss } }, hoverProps, { onClick: toggleSort }, { children: [content, (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ icon: sorted === "DESC" ? "sortDown" : "sortUp", color: sorted !== undefined ? Css_1.Palette.LightBlue700 : Css_1.Palette.Gray400, xss: Css_1.Css.ml1
-                        .visibility("hidden")
-                        .if(isHovered || sorted !== undefined)
-                        .visibility("visible").$, inc: 2 }, tid.icon), void 0) }), void 0)] }), void 0));
+    const icon = ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ icon: sorted === "DESC" ? "sortDown" : "sortUp", color: sorted !== undefined ? Css_1.Palette.LightBlue700 : Css_1.Palette.Gray400, xss: {
+                ...Css_1.Css.ml1.if(iconOnLeft).mr1.ml0.$,
+                ...Css_1.Css.visibility("hidden")
+                    .if(isHovered || sorted !== undefined)
+                    .visibility("visible").$,
+            }, inc: 2 }, tid.icon), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, tid, { css: { ...Css_1.Css.df.aic.h100.cursorPointer.selectNone.$, ...xss } }, hoverProps, { onClick: toggleSort }, { children: [iconOnLeft && icon, content, !iconOnLeft && icon] }), void 0));
 }
 exports.SortHeader = SortHeader;

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

@@ -8,3 +8,5 @@ export declare function dateColumn<T extends Kinded, S = {}>(columnDef: GridColu
 export declare function numericColumn<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;
 /** Provides default styling for a GridColumn representing an Action. */
 export declare function actionColumn<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;
+/** Provides default styling for a GridColumn containing a checkbox. */
+export declare function selectColumn<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;

package/dist/components/Table/columns.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.actionColumn = exports.numericColumn = exports.dateColumn = exports.column = void 0;
+exports.selectColumn = exports.actionColumn = exports.numericColumn = exports.dateColumn = exports.column = void 0;
 /** Provides default styling for a GridColumn representing a Date. */
 function column(columnDef) {
     return { ...columnDef };
@@ -22,3 +22,9 @@ function actionColumn(columnDef) {
     return { clientSideSort: false, ...columnDef, align: "center" };
 }
 exports.actionColumn = actionColumn;
+/** Provides default styling for a GridColumn containing a checkbox. */
+function selectColumn(columnDef) {
+    // Defining `w: 48px` to accommodate for the `16px` wide checkbox and `16px` of padding on either side.
+    return { clientSideSort: false, ...columnDef, align: "center", w: "48px" };
+}
+exports.selectColumn = selectColumn;

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

@@ -5,3 +5,5 @@ export declare const defaultStyle: GridStyle;
 export declare const condensedStyle: GridStyle;
 /** Renders each row as a card. */
 export declare const cardStyle: GridStyle;
+export declare const beamFixedStyle: GridStyle;
+export declare const beamFlexibleStyle: GridStyle;

package/dist/components/Table/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cardStyle = exports.condensedStyle = exports.defaultStyle = void 0;
+exports.beamFlexibleStyle = exports.beamFixedStyle = exports.cardStyle = exports.condensedStyle = exports.defaultStyle = void 0;
 const Css_1 = require("../../Css");
 /** Our original table look & feel/style. */
 exports.defaultStyle = {
@@ -39,3 +39,13 @@ exports.cardStyle = {
         }).p1.m0.xsEm.gray700.$,
     },
 };
+// Once completely rolled out across all tables in Blueprint, this will change to be the `defaultStyle`.
+exports.beamFixedStyle = {
+    rootCss: Css_1.Css.gray700.$,
+    // Doing a mix of `min` and `max` height of 40 as each cell is currently defining `h100`.
+    headerCellCss: Css_1.Css.xsEm.bgGray200.aic.nowrap.px2.mhPx(40).maxhPx(40).$,
+    // TODO: `cellCss` has incomplete styling at the moment. Will be done as part of SC-8145
+    cellCss: Css_1.Css.xs.bgWhite.aic.nowrap.px2.hPx(40).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray100}`).$,
+};
+// TODO: `cellCss` has incomplete styling at the moment. Will be done as part of SC-8145
+exports.beamFlexibleStyle = { ...exports.beamFixedStyle, cellCss: Css_1.Css.p2.$ };

package/dist/inputs/Checkbox.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 export interface CheckboxProps {
     label: string;
+    checkboxOnly?: boolean;
     /** Handler that is called when the element's selection state changes. */
     onChange: (selected: boolean) => void;
     /** Additional text displayed below label */

package/dist/inputs/CheckboxBase.d.ts

@@ -16,6 +16,7 @@ export interface CheckboxBaseProps extends BeamFocusableProps {
     inputProps: InputHTMLAttributes<HTMLInputElement>;
     isSelected?: boolean;
     label: string;
+    checkboxOnly?: boolean;
     errorMsg?: string;
     helperText?: string | ReactNode;
 }

package/dist/inputs/CheckboxBase.js

@@ -10,7 +10,7 @@ const ErrorMessage_1 = require("./ErrorMessage");
 const utils_1 = require("../utils");
 const defaultTestId_1 = require("../utils/defaultTestId");
 function CheckboxBase(props) {
-    const { ariaProps, description, isDisabled = false, isIndeterminate = false, isSelected, inputProps, label, errorMsg, helperText, } = props;
+    const { ariaProps, description, isDisabled = false, isIndeterminate = false, isSelected, inputProps, label, errorMsg, helperText, checkboxOnly = false, } = props;
     const ref = (0, react_1.useRef)(null);
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)(ariaProps);
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
@@ -23,7 +23,7 @@ function CheckboxBase(props) {
             .maxw((0, Css_1.px)(320))
             .if(description !== undefined)
             .maxw((0, Css_1.px)(344))
-            .if(isDisabled).cursorNotAllowed.$ }, { 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: {
+            .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),
@@ -31,7 +31,10 @@ function CheckboxBase(props) {
                     ...(isFocusVisible && focusRingStyles),
                     ...(isHovered && hoverBorderStyles),
                     ...markStyles,
-                }, "aria-hidden": "true" }, { children: markIcon }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.ml1.mtPx(-2).$ }, { children: [label && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...labelStyles, ...(isDisabled && disabledColor) } }, { children: label }), void 0), description && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...descStyles, ...(isDisabled && disabledColor) } }, { children: description }), void 0), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0)] }), void 0));
+                }, "aria-hidden": "true" }, { children: markIcon }), void 0), !checkboxOnly && (
+            // Use a mtPx(-2) to better align the label with the checkbox.
+            // Not using align-items: center as the checkbox would align with all content below, where we really want it to stay only aligned with the label
+            (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.ml1.mtPx(-2).$ }, { children: [label && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...labelStyles, ...(isDisabled && disabledColor) } }, { children: label }), void 0), description && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...descStyles, ...(isDisabled && disabledColor) } }, { children: description }), void 0), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0))] }), void 0));
 }
 exports.CheckboxBase = CheckboxBase;
 const baseStyles = Css_1.Css.hPx(16).mw((0, Css_1.px)(16)).relative.ba.bGray300.br4.bgWhite.transition.$;

package/package.json

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