@homebound/beam 2.183.2 → 2.184.0

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.pr(pr).pl(pl).if(virtualized).pr0.h100.$,
+            ...(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/dist/inputs/DateFields/DateFieldBase.js

@@ -158,7 +158,7 @@ function DateFieldBase(props) {
                 setInputValue("");
                 onChange(undefined);
             } }, void 0)) }, void 0));
-    const calendarButton = ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: buttonRef }, buttonProps, { disabled: isDisabled, css: Css_1.Css.if(isDisabled).cursorNotAllowed.$, tabIndex: -1 }, tid.calendarButton, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "calendar", color: Css_1.Palette.Gray700 }, void 0) }), void 0));
+    const calendarButton = ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: buttonRef }, buttonProps, { disabled: isDisabled, css: Css_1.Css.if(isDisabled).cursorNotAllowed.$, tabIndex: -1 }, tid.calendarButton, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "calendar", color: isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Gray700 }, void 0) }), void 0));
     const EndFieldButtons = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRangeFilterField && clearButton, !hideCalendarIcon && calendarButton] }, void 0));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, textFieldProps, { errorMsg: errorMsg, helperText: helperText, required: required, labelProps: labelProps, inputProps: { ...triggerProps, ...inputProps, size: inputSize }, inputRef: inputRef, inputWrapRef: inputWrapRef, inlineLabel: inlineLabel, onChange: (v) => {
                     // hide the calendar if the user is manually entering the date

package/dist/inputs/TextFieldBase.js

@@ -33,6 +33,11 @@ function TextFieldBase(props) {
     const maybeSmaller = compound ? 2 : 0;
     const fieldHeight = 40;
     const compactFieldHeight = 32;
+    const [bgColor, hoverBgColor, disabledBgColor] = contrast
+        ? [Css_1.Palette.Gray700, Css_1.Palette.Gray600, Css_1.Palette.Gray700]
+        : borderless && !compound
+            ? [Css_1.Palette.Gray100, Css_1.Palette.Gray200, Css_1.Palette.Gray200]
+            : [Css_1.Palette.White, Css_1.Palette.Gray100, Css_1.Palette.Gray100];
     const fieldStyles = {
         container: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).relative.$,
         inputWrapper: {
@@ -40,7 +45,7 @@ function TextFieldBase(props) {
                 .hPx(fieldHeight - maybeSmaller)
                 .if(compact)
                 .hPx(compactFieldHeight - maybeSmaller).$,
-            ...Css_1.Css.bgWhite.gray900.if(contrast).bgGray700.white.$,
+            ...Css_1.Css.bgColor(bgColor).gray900.if(contrast).white.$,
             // When borderless then perceived vertical alignments are misaligned. As there is no longer a border, then the field looks oddly indented.
             // This typically happens in tables when a column has a mix of static text (i.e. "roll up" rows and table headers) and input fields.
             // To remedy this perceived misalignment then we increase the width by the horizontal padding applied (16px), and set a negative margin left margin to re-center the field.
@@ -60,14 +65,14 @@ function TextFieldBase(props) {
                     .mhPx(compactFieldHeight - maybeSmaller).$),
         },
         input: {
-            ...Css_1.Css.w100.mw0.outline0.fg1.if(multiline).br4.$,
+            ...Css_1.Css.w100.mw0.outline0.fg1.bgColor(bgColor).if(multiline).br4.$,
             // Not using Truss's inline `if` statement here because `addIn` properties do not respect the if statement.
-            ...(!contrast ? Css_1.Css.bgWhite.$ : Css_1.Css.bgGray700.addIn("&::selection", Css_1.Css.bgGray800.$).$),
+            ...(contrast && Css_1.Css.addIn("&::selection", Css_1.Css.bgGray800.$).$),
         },
-        hover: Css_1.Css.bgGray100.if(contrast).bgGray600.bGray600.$,
+        hover: Css_1.Css.bgColor(hoverBgColor).if(contrast).bGray600.$,
         focus: Css_1.Css.bLightBlue700.if(contrast).bLightBlue500.$,
         disabled: visuallyDisabled
-            ? Css_1.Css.cursorNotAllowed.gray400.bgGray100.if(contrast).gray500.bgGray700.$
+            ? Css_1.Css.cursorNotAllowed.gray600.bgColor(disabledBgColor).if(contrast).gray500.$
             : Css_1.Css.cursorNotAllowed.$,
         error: Css_1.Css.bRed600.if(contrast).bRed400.$,
     };

package/package.json

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