@homebound/beam 2.146.2 → 2.148.0

package/dist/components/BeamContext.js

@@ -31,7 +31,12 @@ function BeamProvider({ children, ...presentationProps }) {
     const [, tick] = (0, react_1.useReducer)((prev) => prev + 1, 0);
     const modalRef = (0, react_1.useRef)();
     const modalHeaderDiv = (0, react_1.useMemo)(() => document.createElement("div"), []);
-    const modalBodyDiv = (0, react_1.useMemo)(() => document.createElement("div"), []);
+    const modalBodyDiv = (0, react_1.useMemo)(() => {
+        const el = document.createElement("div");
+        // Ensure this wrapping div takes up the full height of its container in the case of a virtualized table within.
+        el.style.height = "100%";
+        return el;
+    }, []);
     const modalCanCloseChecksRef = (0, react_1.useRef)([]);
     const modalFooterDiv = (0, react_1.useMemo)(() => document.createElement("div"), []);
     const drawerContentStackRef = (0, react_1.useRef)([]);

package/dist/components/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, ReactNode } from "react";
+import { MutableRefObject, PropsWithChildren, ReactNode } from "react";
 import { Only, Xss } from "../../Css";
 export declare type ModalSize = "sm" | "md" | "lg" | "xl";
 export interface ModalProps {
@@ -36,9 +36,9 @@ export declare function ModalHeader({ children }: {
     children: ReactNode;
 }): JSX.Element;
 /** Provides consistent styling and the scrolling behavior for a modal's primary content. */
-export declare function ModalBody({ children }: {
-    children: ReactNode;
-}): JSX.Element;
+export declare function ModalBody({ children, virtualized, }: PropsWithChildren<{
+    virtualized?: boolean;
+}>): JSX.Element;
 declare type ModalFooterXss = Xss<"justifyContent" | "alignItems">;
 /** Provides consistent styling for modal footers, i.e. where actions are placed. */
 export declare function ModalFooter<X extends Only<ModalFooterXss, X>>({ children, xss, }: {

package/dist/components/Modal/Modal.js

@@ -39,7 +39,6 @@ function Modal(props) {
     const { modalProps } = (0, react_aria_1.useModal)();
     const { dialogProps, titleProps } = (0, react_aria_1.useDialog)({ role: "dialog" }, ref);
     const [[width, height], setSize] = (0, react_1.useState)(getSize(size));
-    const contentRef = (0, react_1.useRef)(null);
     const modalBodyRef = (0, react_1.useRef)(null);
     const modalFooterRef = (0, react_1.useRef)(null);
     const modalHeaderRef = (0, react_1.useRef)(null);
@@ -49,7 +48,7 @@ function Modal(props) {
         api.current = { setSize: (size = "md") => setSize(getSize(size)) };
     }
     const [hasScroll, setHasScroll] = (0, react_1.useState)(forceScrolling !== null && forceScrolling !== void 0 ? forceScrolling : false);
-    (0, resize_observer_1.default)(contentRef, ({ target }) => {
+    (0, resize_observer_1.default)(modalBodyRef, ({ target }) => {
         if (forceScrolling === undefined && !isFixedHeight) {
             setHasScroll(target.scrollHeight > target.clientHeight);
         }
@@ -68,9 +67,9 @@ function Modal(props) {
     return ((0, jsx_runtime_1.jsx)(react_aria_1.OverlayContainer, { children: (0, jsx_runtime_1.jsx)(form_state_1.AutoSaveStatusProvider, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.underlay.z4.$ }, underlayProps, testId.underlay, { children: (0, jsx_runtime_1.jsx)(react_aria_1.FocusScope, Object.assign({ contain: true, restoreFocus: true, autoFocus: true }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.br24.bgWhite.bshModal.overflowHidden
                             .maxh("90vh")
                             .df.fdc.wPx(width)
-                            .mh((0, Css_1.px)(defaultMinHeight))
+                            .mhPx(defaultMinHeight)
                             .if(isFixedHeight)
-                            .hPx(height).$, ref: ref }, overlayProps, dialogProps, modalProps, testId, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.fs0.if(drawHeaderBorder).bb.bGray200.$ }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.fg1.xl2Em.gray900.$, ref: modalHeaderRef }, titleProps, testId.title), void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.pl1.$ }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ icon: "x", onClick: closeModal }, testId.titleClose), void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("main", Object.assign({ ref: contentRef, css: Css_1.Css.fg1.overflowYAuto.if(hasScroll).bb.bGray200.if(!!forceScrolling).overflowYScroll.$ }, { children: [content, (0, jsx_runtime_1.jsx)("div", { ref: modalBodyRef }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)("footer", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)("div", { ref: modalFooterRef }, void 0) }), void 0)] }), void 0) }), void 0) }), void 0) }, void 0) }, void 0));
+                            .hPx(height).$, ref: ref }, overlayProps, dialogProps, modalProps, testId, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.fs0.if(drawHeaderBorder).bb.bGray200.$ }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.fg1.xl2Em.gray900.$, ref: modalHeaderRef }, titleProps, testId.title), void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.pl1.$ }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ icon: "x", onClick: closeModal }, testId.titleClose), void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("main", Object.assign({ ref: modalBodyRef, css: Css_1.Css.fg1.overflowYAuto.if(hasScroll).bb.bGray200.if(!!forceScrolling).overflowYScroll.$ }, { children: content }), void 0), (0, jsx_runtime_1.jsx)("footer", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)("div", { ref: modalFooterRef }, void 0) }), void 0)] }), void 0) }), void 0) }), void 0) }, void 0) }, void 0));
 }
 exports.Modal = Modal;
 function ModalHeader({ children }) {
@@ -79,10 +78,12 @@ function ModalHeader({ children }) {
 }
 exports.ModalHeader = ModalHeader;
 /** Provides consistent styling and the scrolling behavior for a modal's primary content. */
-function ModalBody({ children }) {
+function ModalBody({ children, virtualized = false, }) {
     const { modalBodyDiv } = (0, BeamContext_1.useBeamContext)();
     const testId = (0, utils_1.useTestIds)({}, testIdPrefix);
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.px3.$ }, testId.content, { children: children }), void 0), modalBodyDiv);
+    return (0, react_dom_1.createPortal)(
+    // If `virtualized`, then we are expecting the `children` will handle their own scrollbar, so have the overflow hidden and adjust padding
+    (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.h100.if(virtualized).overflowHidden.pl3.else.px3.$ }, testId.content, { children: children }), void 0), modalBodyDiv);
 }
 exports.ModalBody = ModalBody;
 /** Provides consistent styling for modal footers, i.e. where actions are placed. */

package/dist/components/Modal/TestModalContent.d.ts

@@ -8,3 +8,4 @@ export interface TestModalContentProps {
 /** A fake modal content component that we share across the modal and superdrawer stories. */
 export declare function TestModalContent(props: TestModalContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function TestModalFilterTable(): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function VirtualizedTable(): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Modal/TestModalContent.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TestModalFilterTable = exports.TestModalContent = void 0;
+exports.VirtualizedTable = exports.TestModalFilterTable = exports.TestModalContent = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const addon_actions_1 = require("@storybook/addon-actions");
 const react_1 = require("react");
 const Button_1 = require("../Button");
+const Layout_1 = require("../Layout");
 const Modal_1 = require("./Modal");
 const useModal_1 = require("./useModal");
 const Table_1 = require("../Table");
@@ -30,6 +31,12 @@ function TestModalFilterTable() {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: "Filterable table" }, void 0), (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { children: [(0, jsx_runtime_1.jsx)(inputs_1.TextField, { label: "Search", value: filter, onChange: setFilter }, void 0), (0, jsx_runtime_1.jsx)(Table_1.GridTable, { columns: columns, rows: rows, filter: filter, xss: Css_1.Css.mt1.$ }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", onClick: closeModal, variant: "tertiary" }, void 0) }, void 0)] }, void 0));
 }
 exports.TestModalFilterTable = TestModalFilterTable;
+function VirtualizedTable() {
+    const [filter, setFilter] = (0, react_1.useState)();
+    const { closeModal } = (0, useModal_1.useModal)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: "Filterable table" }, void 0), (0, jsx_runtime_1.jsx)(Modal_1.ModalBody, Object.assign({ virtualized: true }, { children: (0, jsx_runtime_1.jsxs)(Layout_1.ScrollableParent, Object.assign({ xss: Css_1.Css.h100.$ }, { children: [(0, jsx_runtime_1.jsx)(inputs_1.TextField, { label: "Search", value: filter, onChange: setFilter }, void 0), (0, jsx_runtime_1.jsx)(Layout_1.ScrollableContent, Object.assign({ virtualized: true }, { children: (0, jsx_runtime_1.jsx)(Table_1.GridTable, { as: "virtual", columns: columns, rows: rows, filter: filter, xss: Css_1.Css.mt1.$ }, void 0) }), void 0)] }), void 0) }), void 0), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", onClick: closeModal, variant: "tertiary" }, void 0) }, void 0)] }, void 0));
+}
+exports.VirtualizedTable = VirtualizedTable;
 const users = [
     { id: "1", name: "Iron Man", role: "Leader" },
     { id: "2", name: "Captain America", role: "Carries the cool shield" },

package/dist/components/Table/GridTable.js

@@ -243,7 +243,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.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, visibleDataRows, firstRowMessage, stickyHeader, (_d = style.nestedCards) === null || _d === void 0 ? void 0 : _d.firstLastColumnWidth, xss, virtuosoRef)] }), 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.if(as === "virtual").w("calc(100% - 20px)").$ }, void 0), renders[_as](style, id, columns, headerRows, totalsRows, visibleDataRows, 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
@@ -802,25 +802,31 @@ function resolveStyles(style) {
  * We return a copy of `[Parent, [Child]]` tuples so that we don't modify the `GridDataRow.children`.
  */
 function filterRows(api, columns, rows, filter) {
-    // Make a function to do recursion
-    function filterFn(acc, row) {
+    // Make a functions to do recursion
+    function acceptAll(acc, row) {
         var _a, _b;
+        return acc.concat([[row, (_b = (_a = row.children) === null || _a === void 0 ? void 0 : _a.reduce(acceptAll, [])) !== null && _b !== void 0 ? _b : []]]);
+    }
+    function filterFn(acc, row) {
+        var _a, _b, _c, _d;
         // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
         const filters = (filter && filter.split(/ +/)) || [];
         const matches = row.kind === "header" ||
             row.kind === "totals" ||
             filters.length === 0 ||
-            !!row.pin ||
             filters.every((f) => columns.map((c) => applyRowFn(c, row, api, 0)).some((maybeContent) => matchesFilter(maybeContent, f)));
-        const matchedChildren = (_b = (_a = row.children) === null || _a === void 0 ? void 0 : _a.reduce(filterFn, [])) !== null && _b !== void 0 ? _b : [];
-        // If row or any children match, add the parent (and its matched children)
-        if (matches || matchedChildren.length > 0) {
-            return acc.concat([[row, matchedChildren]]);
+        if (matches) {
+            return acc.concat([[row, (_b = (_a = row.children) === null || _a === void 0 ? void 0 : _a.reduce(acceptAll, [])) !== null && _b !== void 0 ? _b : []]]);
         }
         else {
-            return acc;
+            const matchedChildren = (_d = (_c = row.children) === null || _c === void 0 ? void 0 : _c.reduce(filterFn, [])) !== null && _d !== void 0 ? _d : [];
+            if (matchedChildren.length > 0 || row.pin) {
+                return acc.concat([[row, matchedChildren]]);
+            }
+            else {
+                return acc;
+            }
         }
     }
-    ;
     return rows.reduce(filterFn, []);
 }

package/dist/components/Table/sortRows.js

@@ -25,9 +25,9 @@ function sortBatch(columns, batch, sortState, caseSensitive) {
         const v2 = sortValue((0, GridTable_1.applyRowFn)(column, b, {}, 0), caseSensitive);
         const v1e = v1 === null || v1 === undefined;
         const v2e = v2 === null || v2 === undefined;
-        if (a.pin || b.pin) {
+        if ((a.pin || b.pin) && !(a.pin === b.pin)) {
             const ap = a.pin === "first" ? -1 : a.pin === "last" ? 1 : 0;
-            const bp = b.pin === "first" ? -1 : a.pin === "last" ? 1 : 0;
+            const bp = b.pin === "first" ? -1 : b.pin === "last" ? 1 : 0;
             return ap === bp ? 0 : ap < bp ? -1 : 1;
         }
         else if ((v1e && v2e) || v1 === v2) {

package/package.json

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