@homebound/beam 2.132.4 → 2.134.0

package/dist/components/CssReset.js

@@ -45,6 +45,15 @@ const ourReset = (0, react_1.css) `
       background-color: ${Css_1.Palette.Gray500};
     }
   }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 `;
 // Copy/pasted from TW which uses this as their base reset.
 const modernNormalizeReset = (0, react_1.css) `

package/dist/components/Loader.d.ts

@@ -0,0 +1,6 @@
+interface LoaderProps {
+    size?: "sm" | "md" | "lg";
+    contrast?: boolean;
+}
+export declare function Loader({ size, contrast }: LoaderProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Loader.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loader = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Css_1 = require("../Css");
+function Loader({ size = "lg", contrast = false }) {
+    const [dimensions, borderSize] = sizeToPixels[size];
+    const [bgColor, spinnerColor] = contrast ? [Css_1.Palette.Gray600, Css_1.Palette.Gray200] : [Css_1.Palette.White, Css_1.Palette.LightBlue700];
+    return ((0, jsx_runtime_1.jsx)("div", { "aria-label": "Loading", css: Css_1.Css.br100.ba
+            .hPx(dimensions)
+            .wPx(dimensions)
+            .bc(bgColor)
+            .bw(`${borderSize}px`)
+            .add("borderTopColor", spinnerColor)
+            .add("textIndent", "-999px")
+            .add("animationName", "spin")
+            .add("animationDuration", "800ms")
+            .add("animationIterationCount", "infinite")
+            .add("animationTimingFunction", "linear")
+            .add("transform", "translateZ(0)").$ }, void 0));
+}
+exports.Loader = Loader;
+const sizeToPixels = {
+    sm: [32, 4],
+    md: [64, 8],
+    lg: [96, 12],
+};

package/dist/components/Table/GridTable.js

@@ -92,7 +92,8 @@ function GridTable(props) {
     const { id = "gridTable", as = "div", columns, rows, style: maybeStyle = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = 0, xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, resizeTarget, activeRowId, } = props;
     // We only use this in as=virtual mode, but keep this here for rowLookup to use
     const virtuosoRef = (0, react_1.useRef)(null);
-    const tableRef = (0, react_1.useRef)(null);
+    // Use this ref to watch for changes in the GridTable's container and resize columns accordingly.
+    const resizeRef = (0, react_1.useRef)(null);
     const api = (0, react_1.useMemo)(() => {
         var _a;
         const api = (_a = props.api) !== null && _a !== void 0 ? _a : new GridTableApi_1.GridTableApiImpl();
@@ -111,7 +112,7 @@ function GridTable(props) {
     // (or us) is resetting component state more than necessary, so we track render counts from
     // here instead.
     const { getCount } = (0, useRenderCount_1.useRenderCount)();
-    const columnSizes = (0, columnSizes_1.useSetupColumnSizes)(style, columns, tableRef, resizeTarget);
+    const columnSizes = (0, columnSizes_1.useSetupColumnSizes)(style, columns, resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : resizeRef);
     // Make a single copy of our current collapsed state, so we'll have a single observer.
     const collapsedIds = (0, hooks_1.useComputed)(() => rowState.collapsedIds, [rowState]);
     const [sortState, setSortKey, sortOn, caseSensitive] = (0, useSortState_1.useSortState)(columns, props.sorting);
@@ -122,7 +123,7 @@ function GridTable(props) {
         }
         return rows;
     }, [columns, rows, sortOn, sortState, caseSensitive]);
-    let hasTotalsRow = false;
+    const hasTotalsRow = rows.some((row) => row.id === "totals");
     // Filter rows - ensures parent rows remain in the list if any children match the filter.
     const filterRows = (0, react_1.useCallback)((acc, row) => {
         var _a, _b, _c;
@@ -133,7 +134,6 @@ function GridTable(props) {
             filters.length === 0 ||
             !!row.pin ||
             filters.every((f) => columns.map((c) => applyRowFn(c, row, api, 0)).some((maybeContent) => matchesFilter(maybeContent, f)));
-        hasTotalsRow || (hasTotalsRow = row.kind === "totals");
         // 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 : []]]);
@@ -227,6 +227,7 @@ function GridTable(props) {
         columnSizes,
         collapsedIds,
         getCount,
+        hasTotalsRow,
     ]);
     let tooManyClientSideRows = false;
     if (filterMaxRows && filteredRows.length > filterMaxRows) {
@@ -262,7 +263,7 @@ function GridTable(props) {
     // behave semantically the same as `as=div` did for its tests.
     const _as = as === "virtual" && runningInJest ? "div" : as;
     const rowStateContext = (0, react_1.useMemo)(() => ({ rowState }), [rowState]);
-    return ((0, jsx_runtime_1.jsx)(RowState_1.RowStateContext.Provider, Object.assign({ value: rowStateContext }, { children: (0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: fieldProps, wrap: (_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.wrap }, { children: renders[_as](style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, stickyHeader, (_d = style.nestedCards) === null || _d === void 0 ? void 0 : _d.firstLastColumnWidth, xss, virtuosoRef, tableRef) }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(RowState_1.RowStateContext.Provider, Object.assign({ value: rowStateContext }, { children: (0, jsx_runtime_1.jsxs)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: fieldProps, wrap: (_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.wrap }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: resizeRef, css: Css_1.Css.w100.$ }, void 0), renders[_as](style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, stickyHeader, (_d = style.nestedCards) === null || _d === void 0 ? void 0 : _d.firstLastColumnWidth, xss, virtuosoRef)] }), void 0) }), void 0));
 }
 exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable
@@ -272,8 +273,8 @@ const renders = {
     virtual: renderVirtual,
 };
 /** Renders table using divs with flexbox rows, which is the default render */
-function renderDiv(style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, _stickyHeader, firstLastColumnWidth, xss, _virtuosoRef, tableRef) {
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: tableRef, css: {
+function renderDiv(style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, _stickyHeader, firstLastColumnWidth, xss, _virtuosoRef) {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
             // Use `fit-content` to ensure the width of the table takes up the full width of its content.
             // Otherwise, the table's width would be that of its container, which may not be as wide as the table itself.
             // In cases where we have sticky columns on a very wide table, then the container which the columns "stick" to (which is the table),
@@ -292,8 +293,8 @@ function renderDiv(style, id, columns, headerRows, totalsRows, filteredRows, fir
         }, "data-testid": id }, { children: [totalsRows.map(([, node]) => node), headerRows.map(([, node]) => node), firstRowMessage && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...style.firstRowMessageCss }, "data-gridrow": true }, { children: firstRowMessage }), void 0)), filteredRows.map(([, node]) => node)] }), void 0));
 }
 /** Renders as a table, primarily/solely for good print support. */
-function renderTable(style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, _stickyHeader, _firstLastColumnWidth, xss, _virtuosoRef, tableRef) {
-    return ((0, jsx_runtime_1.jsxs)("table", Object.assign({ ref: tableRef, css: {
+function renderTable(style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, _stickyHeader, _firstLastColumnWidth, xss, _virtuosoRef) {
+    return ((0, jsx_runtime_1.jsxs)("table", Object.assign({ css: {
             ...Css_1.Css.w100.add("borderCollapse", "collapse").$,
             ...Css_1.Css.addIn("& > tbody > tr ", style.betweenRowsCss || {})
                 // removes border between header and second row
@@ -323,19 +324,14 @@ function renderTable(style, id, columns, headerRows, totalsRows, filteredRows, f
  * [2]: https://github.com/tannerlinsley/react-virtual/issues/85
  * [3]: https://github.com/tannerlinsley/react-virtual/issues/108
  */
-function renderVirtual(style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, stickyHeader, firstLastColumnWidth, xss, virtuosoRef, tableRef) {
+function renderVirtual(style, id, columns, headerRows, totalsRows, filteredRows, firstRowMessage, stickyHeader, firstLastColumnWidth, xss, virtuosoRef) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { footerStyle, listStyle } = (0, react_1.useMemo)(() => {
         var _a;
         const { paddingBottom, ...otherRootStyles } = (_a = style.rootCss) !== null && _a !== void 0 ? _a : {};
         return { footerStyle: { paddingBottom }, listStyle: { ...style, rootCss: otherRootStyles } };
     }, [style]);
-    return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { overscan: 5, ref: virtuosoRef, scrollerRef: (ref) => {
-            // This is fired multiple times per render. Only set `tableRef.current` if it has changed
-            if (ref && tableRef.current !== ref) {
-                tableRef.current = ref;
-            }
-        }, components: {
+    return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { overscan: 5, ref: virtuosoRef, components: {
             // Applying a zIndex: 2 to ensure it stays on top of sticky columns
             TopItemList: react_1.default.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { ref: ref, style: { ...props.style, ...{ zIndex: 2 } } }), void 0))),
             List: VirtualRoot(listStyle, columns, id, firstLastColumnWidth, xss),

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

@@ -19,4 +19,4 @@ import { GridColumn, GridStyle } from "./GridTable";
  *
  * Disclaimer that we roll our own `fr` b/c we're not in CSS grid anymore.
  */
-export declare function useSetupColumnSizes(style: GridStyle, columns: GridColumn<any>[], tableRef: MutableRefObject<HTMLElement | null>, resizeTarget: MutableRefObject<HTMLElement | null> | undefined): string[];
+export declare function useSetupColumnSizes(style: GridStyle, columns: GridColumn<any>[], resizeRef: MutableRefObject<HTMLElement | null>): string[];

package/dist/components/Table/columnSizes.js

@@ -24,8 +24,8 @@ const use_debounce_1 = require("use-debounce");
  *
  * Disclaimer that we roll our own `fr` b/c we're not in CSS grid anymore.
  */
-function useSetupColumnSizes(style, columns, tableRef, resizeTarget) {
-    var _a, _b;
+function useSetupColumnSizes(style, columns, resizeRef) {
+    var _a;
     // Calculate the column sizes immediately rather than via the `debounce` method.
     // We do this for Storybook integrations that may use MockDate. MockDate changes the behavior of `new Date()`,
     // which is used internally by `useDebounce`, so the frozen clock means the callback is never called.
@@ -41,8 +41,8 @@ function useSetupColumnSizes(style, columns, tableRef, resizeTarget) {
         setColumnSizes((0, GridTable_1.calcColumnSizes)(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, width, style.minWidthPx));
     }, [setTableWidth, setColumnSizes, columns, style]);
     const setTableAndColumnWidthsDebounced = (0, use_debounce_1.useDebouncedCallback)(setTableAndColumnWidths, 100);
-    const target = (_b = resizeTarget === null || resizeTarget === void 0 ? void 0 : resizeTarget.current) !== null && _b !== void 0 ? _b : tableRef.current;
     const onResize = (0, react_1.useCallback)(() => {
+        const target = resizeRef.current;
         if (target && target.clientWidth !== tableWidth) {
             if (calculateImmediately.current) {
                 calculateImmediately.current = false;
@@ -52,8 +52,8 @@ function useSetupColumnSizes(style, columns, tableRef, resizeTarget) {
                 setTableAndColumnWidthsDebounced(target.clientWidth);
             }
         }
-    }, [target, tableWidth, setTableAndColumnWidths, setTableAndColumnWidthsDebounced]);
-    (0, utils_1.useResizeObserver)({ ref: resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : tableRef, onResize });
+    }, [tableWidth, setTableAndColumnWidths, setTableAndColumnWidthsDebounced]);
+    (0, utils_1.useResizeObserver)({ ref: resizeRef, onResize });
     return columnSizes;
 }
 exports.useSetupColumnSizes = useSetupColumnSizes;

package/dist/components/index.d.ts

@@ -15,6 +15,7 @@ export * from "./Filters";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./Layout";
+export * from "./Loader";
 export * from "./Modal";
 export * from "./Modal/useModal";
 export { NavLink } from "./NavLink";

package/dist/components/index.js

@@ -29,6 +29,7 @@ __exportStar(require("./Filters"), exports);
 __exportStar(require("./Icon"), exports);
 __exportStar(require("./IconButton"), exports);
 __exportStar(require("./Layout"), exports);
+__exportStar(require("./Loader"), exports);
 __exportStar(require("./Modal"), exports);
 __exportStar(require("./Modal/useModal"), exports);
 var NavLink_1 = require("./NavLink");

package/dist/forms/BoundCheckboxGroupField.d.ts

@@ -6,5 +6,6 @@ export declare type BoundCheckboxGroupFieldProps = Omit<CheckboxGroupProps, "val
     onChange?: (values: string[]) => void;
     label?: string;
 };
-/** Wraps `TextField` and binds it to a form field. */
+/** Wraps `CheckboxGroup` and binds it to a form field.
+ * To make the field agnostic to the order of selected values, add `strictOrder: false` to the field's ObjectConfig */
 export declare function BoundCheckboxGroupField(props: BoundCheckboxGroupFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/forms/BoundCheckboxGroupField.js

@@ -6,7 +6,8 @@ const mobx_react_1 = require("mobx-react");
 const inputs_1 = require("../inputs");
 const utils_1 = require("../utils");
 const defaultLabel_1 = require("../utils/defaultLabel");
-/** Wraps `TextField` and binds it to a form field. */
+/** Wraps `CheckboxGroup` and binds it to a form field.
+ * To make the field agnostic to the order of selected values, add `strictOrder: false` to the field's ObjectConfig */
 function BoundCheckboxGroupField(props) {
     const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, ...others } = props;
     const testId = (0, utils_1.useTestIds)(props, field.key);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.132.4",
+  "version": "2.134.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -32,7 +32,7 @@
     "format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md}\""
   },
   "dependencies": {
-    "@homebound/form-state": "2.13.0",
+    "@homebound/form-state": "2.14.0",
     "@internationalized/number": "^3.0.3",
     "@react-aria/utils": "^3.11.3",
     "@react-hook/resize-observer": "^1.2.2",