@homebound/beam 2.71.7 → 2.71.8

package/dist/components/Layout/ScrollableContent.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode, ReactPortal } from "react";
 /** Helper component for placing scrollable content within a `NestedScrollProvider`. */
-export declare function ScrollableContent({ children }: {
+export declare function ScrollableContent({ children, virtualized, }: {
     children: ReactNode;
+    virtualized?: boolean;
 }): ReactPortal;

package/dist/components/Layout/ScrollableContent.js

@@ -1,11 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScrollableContent = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_dom_1 = require("react-dom");
+const FullBleed_1 = require("./FullBleed");
 const ScrollableParent_1 = require("./ScrollableParent");
+const Css_1 = require("../../Css");
 /** Helper component for placing scrollable content within a `NestedScrollProvider`. */
-function ScrollableContent({ children }) {
-    const { scrollableEl } = (0, ScrollableParent_1.useScrollableParent)();
-    return (0, react_dom_1.createPortal)(children, scrollableEl);
+function ScrollableContent({ children, virtualized = false, }) {
+    const { scrollableEl, pl } = (0, ScrollableParent_1.useScrollableParent)();
+    return (0, react_dom_1.createPortal)(!virtualized ? (children) : (
+    // To prevent Virtuoso's scrollbar from being set in based on the Layout's padding, we will use the FullBleed component w/o padding to push it back over
+    (0, jsx_runtime_1.jsx)(FullBleed_1.FullBleed, Object.assign({ omitPadding: true }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.h100.pl(pl).$ }, { children: children }), void 0) }), void 0)), scrollableEl);
 }
 exports.ScrollableContent = ScrollableContent;

package/dist/components/Layout/ScrollableParent.js

@@ -10,14 +10,19 @@ const ScrollableParentContext = (0, react_1.createContext)({
     pl: 0,
 });
 function ScrollableParent({ children, xss }) {
-    const scrollableEl = (0, react_1.useMemo)(() => document.createElement("div"), []);
+    const scrollableEl = (0, react_1.useMemo)(() => {
+        const el = document.createElement("div");
+        // Ensure this wrapping div takes up the full height of its container
+        el.style.height = "100%";
+        return el;
+    }, []);
     const scrollableRef = (0, react_1.useRef)(null);
     const { paddingLeft, paddingRight, ...otherXss } = xss || {};
     const context = { scrollableEl, pl: paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : 0, pr: paddingRight !== null && paddingRight !== void 0 ? paddingRight : 0 };
     (0, react_1.useEffect)(() => {
         scrollableRef.current.appendChild(scrollableEl);
     }, [scrollableEl]);
-    return ((0, jsx_runtime_1.jsx)(ScrollableParentContext.Provider, Object.assign({ value: context }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: { ...Css_1.Css.mh0.mw0.df.fdc.$, ...otherXss } }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.pl(context.pl).pr(context.pr).$ }, { children: children }), void 0), (0, jsx_runtime_1.jsx)("div", { css: { ...Css_1.Css.overflowAuto.$, ...Css_1.Css.pl(context.pl).pr(context.pr).$ }, ref: scrollableRef }, void 0)] }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(ScrollableParentContext.Provider, Object.assign({ value: context }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: { ...Css_1.Css.mh0.mw0.df.fdc.$, ...otherXss } }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.pl(context.pl).pr(context.pr).$ }, { children: children }), void 0), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fg1.overflowAuto.pl(context.pl).pr(context.pr).$, ref: scrollableRef }, void 0)] }), void 0) }), void 0));
 }
 exports.ScrollableParent = ScrollableParent;
 function useScrollableParent() {

package/dist/components/Layout/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./FullBleed";
 export * from "./PreventBrowserScroll";
 export * from "./ScrollableContent";
 export * from "./ScrollableParent";

package/dist/components/Layout/index.js

@@ -10,6 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FullBleed"), exports);
 __exportStar(require("./PreventBrowserScroll"), exports);
 __exportStar(require("./ScrollableContent"), exports);
 __exportStar(require("./ScrollableParent"), exports);

package/package.json

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