@homebound/beam 2.71.9 → 2.71.13

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

@@ -3,4 +3,4 @@ import { ReactNode, ReactPortal } from "react";
 export declare function ScrollableContent({ children, virtualized, }: {
     children: ReactNode;
     virtualized?: boolean;
-}): ReactPortal;
+}): ReactPortal | JSX.Element;

package/dist/components/Layout/ScrollableContent.js

@@ -9,6 +9,10 @@ const Css_1 = require("../../Css");
 /** Helper component for placing scrollable content within a `NestedScrollProvider`. */
 function ScrollableContent({ children, virtualized = false, }) {
     const { scrollableEl, pl } = (0, ScrollableParent_1.useScrollableParent)();
+    // Escape hatch specifically for tests where a "ScrollableParent" context may not be present.
+    if (!scrollableEl) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }, void 0);
+    }
     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);

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

@@ -1,13 +1,14 @@
 import { PropsWithChildren } from "react";
 import { Properties } from "../../Css";
 interface ScrollableParentContextProps {
-    scrollableEl: HTMLElement;
+    scrollableEl: HTMLElement | null;
     pr: string | number;
     pl: string | number;
 }
 interface ScrollableParentContextProviderProps {
     xss?: Properties;
+    tagName?: keyof JSX.IntrinsicElements;
 }
-export declare function ScrollableParent({ children, xss }: PropsWithChildren<ScrollableParentContextProviderProps>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ScrollableParent(props: PropsWithChildren<ScrollableParentContextProviderProps>): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function useScrollableParent(): ScrollableParentContextProps;
 export {};

package/dist/components/Layout/ScrollableParent.js

@@ -5,11 +5,12 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const Css_1 = require("../../Css");
 const ScrollableParentContext = (0, react_1.createContext)({
-    scrollableEl: document.createElement("div"),
+    scrollableEl: null,
     pr: 0,
     pl: 0,
 });
-function ScrollableParent({ children, xss }) {
+function ScrollableParent(props) {
+    const { children, xss, tagName: Tag = "div" } = props;
     const scrollableEl = (0, react_1.useMemo)(() => {
         const el = document.createElement("div");
         // Ensure this wrapping div takes up the full height of its container
@@ -22,7 +23,7 @@ function ScrollableParent({ children, xss }) {
     (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.fg1.overflowAuto.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)(Tag, 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/NavLink.js

@@ -39,7 +39,7 @@ exports.getNavLinkStyles = getNavLinkStyles;
 const baseStyles = Css_1.Css.df.aic.hPx(32).pyPx(6).px1.br4.smEm.outline0.$;
 const navLinkVariantStyles = {
     side: {
-        baseStyles: { ...baseStyles, ...Css_1.Css.wPx(184).gray700.$ },
+        baseStyles: { ...baseStyles, ...Css_1.Css.gray700.$ },
         activeStyles: Css_1.Css.lightBlue700.bgLightBlue50.$,
         disabledStyles: Css_1.Css.gray400.cursorNotAllowed.$,
         focusRingStyles: Css_1.Css.bgLightBlue50.bshFocus.$,

package/dist/components/Tooltip.js

@@ -46,5 +46,5 @@ function Popper({ triggerRef, content, placement = "auto" }) {
         ],
         placement,
     });
-    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: popperRef, style: { ...styles.popper, maxWidth: "320px" } }, attributes.popper, { css: Css_1.Css.bgGray900.white.px1.py("4px").br4.xs.$ }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setArrowRef, style: { ...styles.arrow }, id: "arrow" }, void 0), content] }), void 0), document.body);
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: popperRef, style: styles.popper }, attributes.popper, { css: Css_1.Css.maxw("320px").bgGray900.white.px1.py("4px").br4.xs.z999.$ }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setArrowRef, style: { ...styles.arrow }, id: "arrow" }, void 0), content] }), void 0), document.body);
 }

package/package.json

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