@homebound/beam 2.101.2 → 2.102.0

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

@@ -8,7 +8,7 @@ export declare type GridTableXss = Xss<Margin>;
 export declare const ASC: "ASC";
 export declare const DESC: "DESC";
 export declare type Direction = "ASC" | "DESC";
-export declare const emptyCell: () => ReactNode;
+export declare const emptyCell: GridCellContent;
 /** Tells GridTable we're running in Jest, which forces as=virtual to be as=div, to work in jsdom. */
 export declare function setRunningInJest(): void;
 /** Completely static look & feel, i.e. nothing that is based on row kinds/content. */
@@ -212,7 +212,7 @@ declare type GridRowKind<R extends Kinded, P extends R["kind"]> = DiscriminateUn
  * column being sorted, in which case we use the GridCellContent.value.
  */
 export declare type GridColumn<R extends Kinded, S = {}> = {
-    [K in R["kind"]]: string | (DiscriminateUnion<R, "kind", K> extends {
+    [K in R["kind"]]: string | GridCellContent | (DiscriminateUnion<R, "kind", K> extends {
         data: infer D;
     } ? (data: D, row: GridRowKind<R, K>) => ReactNode | GridCellContent : (row: GridRowKind<R, K>) => ReactNode | GridCellContent);
 } & {

package/dist/components/Table/GridTable.js

@@ -42,8 +42,7 @@ const tinycolor2_1 = __importDefault(require("tinycolor2"));
 const _1 = require(".");
 exports.ASC = "ASC";
 exports.DESC = "DESC";
-const emptyCell = () => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
-exports.emptyCell = emptyCell;
+exports.emptyCell = { content: () => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0), value: "" };
 let runningInJest = false;
 /** Tells GridTable we're running in Jest, which forces as=virtual to be as=div, to work in jsdom. */
 function setRunningInJest() {
@@ -493,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,
@@ -513,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),
@@ -554,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
@@ -573,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.
@@ -651,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/dist/inputs/NumberField.d.ts

@@ -19,6 +19,8 @@ export interface NumberFieldProps {
     /** Styles overrides */
     xss?: Xss<"textAlign" | "justifyContent">;
     displayDirection?: boolean;
+    numFractionDigits?: number;
+    truncate?: boolean;
 }
 export declare function NumberField(props: NumberFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function parseRawInput(rawInputValue: string | undefined, factor: number, type?: NumberFieldType): number | undefined;
+export declare function formatValue(value: number, factor: number, numFractionDigits: number | undefined): number | undefined;

package/dist/inputs/NumberField.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseRawInput = exports.NumberField = void 0;
+exports.formatValue = exports.NumberField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const number_1 = require("@internationalized/number");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
@@ -12,34 +13,34 @@ function NumberField(props) {
     // Determine default alignment based on presentation context
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
     const alignment = (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.numberAlignment) === "right" ? Css_1.Css.tr.jcfe.$ : Css_1.Css.tl.jcfs.$;
-    const { disabled = false, required, readOnly = false, type, label, onBlur, onFocus, errorMsg, helperText, value, onChange, xss, displayDirection = false, ...otherProps } = props;
+    const { disabled = false, required, readOnly = false, type, label, onBlur, onFocus, errorMsg, helperText, value, onChange, xss, displayDirection = false, numFractionDigits, truncate = false, ...otherProps } = props;
     const factor = type === "percent" || type === "cents" ? 100 : type === "basisPoints" ? 10000 : 1;
     const signDisplay = displayDirection ? "exceptZero" : "auto";
+    const fractionFormatOptions = { [truncate ? "maximumFractionDigits" : "minimumFractionDigits"]: numFractionDigits };
+    const { locale } = (0, react_aria_1.useLocale)();
     // If formatOptions isn't memo'd, a useEffect in useNumberStateField will cause jank,
     // see: https://github.com/adobe/react-spectrum/issues/1893.
     const formatOptions = (0, react_1.useMemo)(() => {
         return type === "percent"
-            ? { style: "percent", signDisplay }
+            ? { style: "percent", signDisplay, ...fractionFormatOptions }
             : type === "basisPoints"
                 ? { style: "percent", minimumFractionDigits: 2, signDisplay }
                 : type === "cents"
                     ? { style: "currency", currency: "USD", minimumFractionDigits: 2, signDisplay }
                     : type === "days"
                         ? { style: "unit", unit: "day", unitDisplay: "long", maximumFractionDigits: 0, signDisplay }
-                        : undefined;
+                        : fractionFormatOptions;
     }, [type]);
+    const numberParser = (0, react_1.useMemo)(() => new number_1.NumberParser(locale, formatOptions), [locale, formatOptions]);
     const valueRef = (0, react_1.useRef)({ wip: false });
-    const { locale } = (0, react_aria_1.useLocale)();
     // We can use this for both useNumberFieldState + useNumberField
     const useProps = {
         locale,
         // We want percents && cents to be integers, useNumberFieldState excepts them as decimals
         value: valueRef.current.wip ? valueRef.current.value : value === undefined ? Number.NaN : value / factor,
-        // This is called on blur with the final/committed value.
+        // // This is called on blur with the final/committed value.
         onChange: (value) => {
-            // `value` for percentage style inputs will be in a number format, i.e. if input value is 4%, the `value` param will equal `.04`
-            // Reverse the integer/decimal conversion
-            onChange(Number.isNaN(value) ? undefined : factor !== 1 ? Math.round(value * factor) : value);
+            onChange(formatValue(value, factor, numFractionDigits));
         },
         onFocus: () => {
             valueRef.current = { wip: true, value: value === undefined ? Number.NaN : value / factor };
@@ -71,20 +72,17 @@ function NumberField(props) {
     return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({ xss: { ...alignment, ...xss }, groupProps: groupProps, labelProps: labelProps, label: label, required: required, inputProps: inputProps, 
         // This is called on each DOM change, to push the latest value into the field
         onChange: (rawInputValue) => {
-            const changeValue = parseRawInput(rawInputValue, factor, type);
-            onChange(changeValue);
+            const parsedValue = numberParser.parse(rawInputValue || "");
+            onChange(formatValue(parsedValue, factor, numFractionDigits));
         }, inputRef: inputRef, onBlur: onBlur, onFocus: onFocus, errorMsg: errorMsg, helperText: helperText, readOnly: readOnly }, otherProps), void 0));
 }
 exports.NumberField = NumberField;
-function parseRawInput(rawInputValue = "", factor, type) {
-    // If the wip value is invalid, i.e. it's `10b`, don't push that back into the field state
-    const wip = parseFloat(rawInputValue);
-    if (isNaN(wip))
-        return;
-    // For percentage values we need to initially divide by 100 in order to get their "number value" ("4%" = .04) for the factor multiplier to be accurate.
-    // For example, if the using basisPoints and the user enters "4.31%", then we would expect the response to be 431 basisPoints. If only basing off the `factor` value, then 4.31 * 10000 = 43100, which would not be correct.
-    const value = type === "percent" || type === "basisPoints" ? wip / 100 : wip;
-    // Since the values returned is exactly what is in the field
-    return factor !== 1 ? Math.round(value * factor) : value;
+function formatValue(value, factor, numFractionDigits) {
+    // We treat percents & cents as (mostly) integers, while useNumberField wants decimals, so
+    // undo that via `* factor` and `Math.round`, but also keep any specifically-requested `numFractionDigits`,
+    // i.e. for `type=percent value=12.34`, `value` will be `0.1234` that we want turn into `12.34`.
+    const maybeAdjustForDecimals = numFractionDigits ? Math.pow(10, numFractionDigits) : 1;
+    // Reverse the integer/decimal conversion
+    return Number.isNaN(value) ? undefined : Math.round(value * factor * maybeAdjustForDecimals) / maybeAdjustForDecimals;
 }
-exports.parseRawInput = parseRawInput;
+exports.formatValue = formatValue;

package/dist/inputs/TextFieldBase.js

@@ -33,7 +33,7 @@ function TextFieldBase(props) {
     const fieldHeight = 40;
     const compactFieldHeight = 32;
     const fieldStyles = {
-        container: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).$,
+        container: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).relative.$,
         inputWrapper: {
             ...Css_1.Css[typeScale].df.aic.br4.px1.w100
                 .hPx(fieldHeight - maybeSmaller)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.101.2",
+  "version": "2.102.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "@homebound/form-state": "^2.2.13",
+    "@internationalized/number": "^3.0.3",
     "@react-aria/utils": "^3.9.0",
     "@react-hook/resize-observer": "^1.2.2",
     "@types/tinycolor2": "^1.4.2",