@homebound/beam 2.189.0 → 2.190.1

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

@@ -101,7 +101,7 @@ export interface GridTableProps<R extends Kinded, S, X> {
     activeRowId?: string;
     /**
      * Defines which cell in the table should be provided with an "active" styling.
-     * Expected format is `${row.kind}_${row.id}_${column.name}`.
+     * Expected format is `${row.kind}_${row.id}_${column.id}`.
      */
     activeCellId?: string;
 }

package/dist/components/Table/components/EditColumnsButton.js

@@ -21,17 +21,17 @@ function EditColumnsButton(props) {
             // Only include options that can be hidden and have the `name` property defined.
             if (!column.canHide)
                 return acc;
-            if (!column.name || column.name.length === 0) {
+            if (!column.id || column.id.length === 0) {
                 console.warn("Column is missing 'name' property required by the Edit Columns button", column);
                 return acc;
             }
             // Add current column as an option
-            return { ...acc, options: acc.options.concat({ label: column.name, value: column.name }) };
+            return { ...acc, options: acc.options.concat({ label: column.id, value: column.id }) };
         }, { options: [] });
     }, [allColumns]);
-    const selectedValues = selectedColumns.map((column) => column.name);
+    const selectedValues = selectedColumns.map((column) => column.id);
     const setSelectedValues = (0, react_1.useCallback)((values) => {
-        setSelectedColumns(allColumns.filter((column) => (column.canHide ? values.includes(column.name) : true)));
+        setSelectedColumns(allColumns.filter((column) => (column.canHide ? values.includes(column.id) : true)));
     }, [allColumns, setSelectedColumns]);
     return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, Object.assign({}, props, { menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef }, tid, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
                 ...Css_1.Css.bgWhite.py5.px3.maxwPx(380).bshBasic.$,

package/dist/components/Table/components/Row.js

@@ -100,8 +100,8 @@ function RowImpl(props) {
                         : {}),
                 }
                 : {};
-            const cellId = `${row.kind}_${row.id}_${column.name}`;
-            const applyCellHighlight = cellHighlight && !!column.name && !isHeader && !isTotals;
+            const cellId = `${row.kind}_${row.id}_${column.id}`;
+            const applyCellHighlight = cellHighlight && !!column.id && !isHeader && !isTotals;
             const isCellActive = rowState.activeCellId === cellId;
             // 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

package/dist/components/Table/hooks/useColumns.js

@@ -6,27 +6,27 @@ const react_1 = require("react");
 const useSessionStorage_1 = require("../../../hooks/useSessionStorage");
 function useColumns(tableColumns, maybeStorageKey) {
     const { selectedColumns, hideColumns } = tableColumns.reduce((acc, column) => {
-        // Only include options that can be hidden and have the `name` property defined.
-        if (!column.name || column.name.length === 0) {
-            console.warn("Column is missing 'name' property required by the Edit Columns button", column);
+        // Only include options that can be hidden and have the `id` property defined.
+        if (!column.id || column.id.length === 0) {
+            console.warn("Column is missing 'id' property required by the Edit Columns button", column);
             return acc;
         }
         // Add hide-able columns
         if (column.canHide) {
-            acc.hideColumns.push(column.name);
+            acc.hideColumns.push(column.id);
         }
         // Add selected columns
         if (!column.canHide || (column.canHide && column.initVisible)) {
-            acc.selectedColumns.push(column.name);
+            acc.selectedColumns.push(column.id);
         }
         return { ...acc };
     }, { selectedColumns: [], hideColumns: [] });
     const storageKey = maybeStorageKey !== null && maybeStorageKey !== void 0 ? maybeStorageKey : (0, change_case_1.camelCase)(hideColumns.map((c) => c).join(""));
     const [storageNames, setStorageNames] = (0, useSessionStorage_1.useSessionStorage)(storageKey, selectedColumns);
-    const storageColumns = storageNames && storageNames.map((sc) => tableColumns.find((column) => column.name === sc));
+    const storageColumns = storageNames && storageNames.map((sc) => tableColumns.find((column) => column.id === sc));
     const [columns, setColumns] = (0, react_1.useState)(storageColumns);
     (0, react_1.useEffect)(() => {
-        setStorageNames(columns.map((column) => column.name));
+        setStorageNames(columns.map((column) => column.id));
     }, [columns]);
     return [columns, setColumns];
 }

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

@@ -64,8 +64,8 @@ export declare type GridColumn<R extends Kinded, S = {}> = {
     wrapAction?: false;
     /** Used as a signal to defer adding the 'indent' styling */
     isAction?: true;
-    /** Column name that will be used to generate an unique identifier for every row cell */
-    name?: string;
+    /** Column id that will be used to generate an unique identifier for every row cell */
+    id?: string;
     /** Flag that will allow to know which columns are hide-able */
     canHide?: boolean;
     /** Flag that will allow to know which hide-able columns are visible on initial load */

package/dist/inputs/NumberField.d.ts

@@ -28,6 +28,9 @@ export interface NumberFieldProps {
     onEnter?: VoidFunction;
     placeholder?: string;
     errorInTooltip?: true;
+    /** Whether to show comma separation for group numbers.
+     * @default true */
+    useGrouping?: boolean;
 }
 export declare function NumberField(props: NumberFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function formatValue(value: number, factor: number, numFractionDigits: number | undefined, numIntegerDigits: number | undefined): number | undefined;

package/dist/inputs/NumberField.js

@@ -15,7 +15,7 @@ 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, required, readOnly, type, label, onBlur, onFocus, errorMsg, helperText, value, onChange, xss, displayDirection = false, numFractionDigits = type === "dollars" ? 2 : undefined, truncate = false, onEnter, numberFormatOptions, numIntegerDigits, ...otherProps } = props;
+    const { disabled, required, readOnly, type, label, onBlur, onFocus, errorMsg, helperText, value, onChange, xss, displayDirection = false, numFractionDigits = type === "dollars" ? 2 : undefined, truncate = false, onEnter, numberFormatOptions, numIntegerDigits, useGrouping = true, ...otherProps } = props;
     const isDisabled = !!disabled;
     const isReadOnly = !!readOnly;
     const factor = type === "percent" || type === "cents" ? 100 : type === "basisPoints" ? 10000 : 1;
@@ -23,7 +23,9 @@ function NumberField(props) {
     const defaultFormatOptions = (0, react_1.useMemo)(() => ({
         [truncate ? "maximumFractionDigits" : "minimumFractionDigits"]: numFractionDigits,
         ...(numIntegerDigits !== undefined && { minimumIntegerDigits: numIntegerDigits }),
-    }), [truncate, numIntegerDigits]);
+        useGrouping,
+        signDisplay,
+    }), [truncate, numIntegerDigits, useGrouping, signDisplay]);
     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.
@@ -31,17 +33,18 @@ function NumberField(props) {
         if (numberFormatOptions !== undefined) {
             return numberFormatOptions;
         }
-        return type === "percent"
-            ? { style: "percent", signDisplay, ...defaultFormatOptions }
+        const typeFormat = type === "percent"
+            ? { style: "percent" }
             : type === "basisPoints"
-                ? { style: "percent", minimumFractionDigits: 2, signDisplay }
+                ? { style: "percent", minimumFractionDigits: 2 }
                 : type === "cents"
-                    ? { style: "currency", currency: "USD", minimumFractionDigits: 2, signDisplay }
+                    ? { style: "currency", currency: "USD", minimumFractionDigits: 2 }
                     : type === "dollars"
-                        ? { style: "currency", currency: "USD", minimumFractionDigits: numFractionDigits !== null && numFractionDigits !== void 0 ? numFractionDigits : 2, signDisplay }
+                        ? { style: "currency", currency: "USD", minimumFractionDigits: numFractionDigits !== null && numFractionDigits !== void 0 ? numFractionDigits : 2 }
                         : type === "days"
-                            ? { style: "unit", unit: "day", unitDisplay: "long", maximumFractionDigits: 0, signDisplay }
-                            : defaultFormatOptions;
+                            ? { style: "unit", unit: "day", unitDisplay: "long", maximumFractionDigits: 0 }
+                            : {};
+        return { ...defaultFormatOptions, ...typeFormat };
     }, [type, numberFormatOptions]);
     const numberParser = (0, react_1.useMemo)(() => new number_1.NumberParser(locale, formatOptions), [locale, formatOptions]);
     const valueRef = (0, react_1.useRef)({ wip: false });

package/package.json

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