@homebound/beam 2.183.3 → 2.184.1

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

@@ -1,8 +1,10 @@
 import { ReactNode, ReactPortal } from "react";
+import { Palette } from "../../Css";
 interface ScrollableContentProps {
     children: ReactNode;
     virtualized?: boolean;
     omitBottomPadding?: true;
+    bgColor?: Palette;
 }
 /** Helper component for placing scrollable content within a `ScrollableParent`. */
 export declare function ScrollableContent(props: ScrollableContentProps): ReactPortal | JSX.Element;

package/dist/components/Layout/ScrollableContent.js

@@ -4,13 +4,12 @@ exports.ScrollableContent = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 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 `ScrollableParent`. */
 function ScrollableContent(props) {
-    const { children, virtualized = false, omitBottomPadding } = props;
-    const { scrollableEl, setPortalTick, pl } = (0, ScrollableParent_1.useScrollableParent)();
+    const { children, virtualized = false, omitBottomPadding, bgColor } = props;
+    const { scrollableEl, setPortalTick, pl, pr } = (0, ScrollableParent_1.useScrollableParent)();
     (0, react_1.useEffect)(() => {
         // The below `tick` logic is a way to detect whether the ScrollableContent is being used.
         // The ScrollableParent sets scrolling style based on whether or not there are children inside of the `scrollableEl` portal.
@@ -22,8 +21,10 @@ function ScrollableContent(props) {
     if (!scrollableEl) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }, void 0);
     }
-    return (0, react_dom_1.createPortal)(!virtualized ? (omitBottomPadding ? (children) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: ScrollableParent_1.scrollContainerBottomPadding }, { children: children }), void 0))) : (
-    // 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);
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+            ...Css_1.Css.h100.pr(pr).pl(pl).if(virtualized).pr0.$,
+            ...(bgColor && Css_1.Css.bgColor(bgColor).$),
+            ...(!omitBottomPadding && !virtualized && ScrollableParent_1.scrollContainerBottomPadding),
+        } }, { children: children }), void 0), scrollableEl);
 }
 exports.ScrollableContent = ScrollableContent;

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

@@ -13,10 +13,10 @@ interface ScrollableParentContextProviderProps {
 export declare function ScrollableParent(props: PropsWithChildren<ScrollableParentContextProviderProps>): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function useScrollableParent(): ScrollableParentContextProps;
 export declare const scrollContainerBottomPadding: {
-    height: import("csstype").Property.Height<0 | (string & {})> | undefined;
-} & {
     content: import("csstype").Property.Content | undefined;
 } & {
     display: import("csstype").Property.Display | undefined;
+} & {
+    height: import("csstype").Property.Height<0 | (string & {})> | undefined;
 };
 export {};

package/dist/components/Layout/ScrollableParent.js

@@ -33,8 +33,8 @@ function ScrollableParent(props) {
     }, [scrollableEl]);
     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.fg1.df.fdc.$, ...otherXss } }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
                         ...Css_1.Css.pl(context.pl).pr(context.pr).$,
-                        ...(!hasScrollableContent ? { ...Css_1.Css.overflowAuto.$, ...exports.scrollContainerBottomPadding } : undefined),
-                    } }, { 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));
+                        ...(!hasScrollableContent ? { ...Css_1.Css.overflowAuto.h100.$, ...exports.scrollContainerBottomPadding } : undefined),
+                    } }, { children: children }), void 0), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fg1.overflowAuto.$, ref: scrollableRef }, void 0)] }), void 0) }), void 0));
 }
 exports.ScrollableParent = ScrollableParent;
 function useScrollableParent() {
@@ -42,4 +42,4 @@ function useScrollableParent() {
 }
 exports.useScrollableParent = useScrollableParent;
 // Styles to wrap around the scrollable content in order to give padding beneath the content within the scrollable container.
-exports.scrollContainerBottomPadding = Css_1.Css.h100.addIn("&:after", Css_1.Css.contentEmpty.db.h2.$).$;
+exports.scrollContainerBottomPadding = Css_1.Css.addIn("&:after", Css_1.Css.contentEmpty.db.h2.$).$;

package/dist/components/Tabs.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import type { IconKey } from "./";
-import { Margin, Only, Xss } from "../Css";
+import { Margin, Only, Padding, Xss } from "../Css";
 export interface Tab<V extends string = string> {
     name: string;
     value: V;
@@ -8,7 +8,7 @@ export interface Tab<V extends string = string> {
     endAdornment?: ReactNode;
     disabled?: boolean;
 }
-declare type TabsContentXss = Xss<Margin>;
+declare type TabsContentXss = Xss<Margin | Padding | "backgroundColor">;
 export interface TabsProps<V extends string, X> {
     ariaLabel?: string;
     selected: V;

package/dist/components/Tabs.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const react_router_1 = require("react-router");
 const react_router_dom_1 = require("react-router-dom");
+const components_1 = require("./");
 const Css_1 = require("../Css");
 const utils_1 = require("../utils");
 const defaultTestId_1 = require("../utils/defaultTestId");
@@ -21,7 +22,9 @@ const Icon_1 = require("./Icon");
  * and `TabContent` components directly.
  */
 function TabsWithContent(props) {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Tabs, Object.assign({}, props), void 0), (0, jsx_runtime_1.jsx)(TabContent, Object.assign({}, props), void 0)] }, void 0));
+    // Do not apply default top padding styles if the tabs are being hidden. This avoids unnecessary white space being added
+    const styles = hideTabs(props) ? {} : Css_1.Css.pt3.$;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Tabs, Object.assign({}, props), void 0), (0, jsx_runtime_1.jsx)(TabContent, Object.assign({}, props, { contentXss: { ...styles, ...props.contentXss } }), void 0)] }, void 0));
 }
 exports.TabsWithContent = TabsWithContent;
 function TabContent(props) {
@@ -35,9 +38,9 @@ function TabContent(props) {
         }) || tabs[0]
         : props.tabs.find((tab) => tab.value === props.selected) || tabs[0];
     const uniqueValue = uniqueTabValue(selectedTab);
-    // Do not apply default top margin styles if the tabs are being hidden. This avoids unnecessary white space being added
-    const styles = hideTabs(props) ? {} : Css_1.Css.mt3.$;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0 }, tid.panel, { css: { ...styles, ...contentXss } }, { children: isRouteTab(selectedTab) ? (0, jsx_runtime_1.jsx)(react_router_1.Route, { path: selectedTab.path, render: selectedTab.render }, void 0) : selectedTab.render() }), void 0));
+    return (
+    // Using FullBleed to allow the tab's bgColor to extend to the edges of the <ScrollableContent /> element.
+    (0, jsx_runtime_1.jsx)(components_1.FullBleed, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0 }, tid.panel, { css: contentXss }, { children: isRouteTab(selectedTab) ? (0, jsx_runtime_1.jsx)(react_router_1.Route, { path: selectedTab.path, render: selectedTab.render }, void 0) : selectedTab.render() }), void 0) }, void 0));
 }
 exports.TabContent = TabContent;
 /** The top list of tabs. */

package/package.json

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