@homebound/beam 2.105.1 → 2.105.5

package/dist/components/Layout/ScrollableParent.js

@@ -31,10 +31,7 @@ function ScrollableParent(props) {
     (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)(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)
-                        .if(!hasScrollableContent)
-                        .h100.overflowAuto.addIn("&", Css_1.Css.if(!hasScrollableContent).add("overflow", "overlay").$).$ }, { children: children }), void 0), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.fg1.overflowAuto.pl(context.pl).pr(context.pr).addIn("&", Css_1.Css.add("overflow", "overlay").$).$, 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.fg1.df.fdc.$, ...otherXss } }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.pl(context.pl).pr(context.pr).if(!hasScrollableContent).h100.overflowAuto.$ }, { 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/Table/GridTable.d.ts

@@ -1,7 +1,7 @@
 import React, { MutableRefObject, ReactElement, ReactNode } from "react";
 import { PresentationContextProps, PresentationFieldProps } from "../PresentationContext";
 import { GridRowLookup } from "./GridRowLookup";
-import { Margin, Only, Properties, Xss } from "../../Css";
+import { Margin, Only, Properties, Typography, Xss } from "../../Css";
 export declare type Kinded = {
     kind: string;
 };
@@ -225,6 +225,8 @@ export declare type GridColumn<R extends Kinded, S = {}> = {
      * - The default value is `1fr`
      */
     w?: number | string;
+    /** The minimum width the column can shrink to */
+    mw?: string;
     /** The column's default alignment for each cell. */
     align?: GridCellAlignment;
     /** Whether the column can be sorted (if client-side sorting). Defaults to true if sorting client-side. */
@@ -268,6 +270,7 @@ export declare type GridCellContent = {
     /** Whether to indent the cell. */
     indent?: 1 | 2;
     colspan?: number;
+    typeScale?: Typography;
 };
 declare type MaybeFn<T> = T | (() => T);
 /**

package/dist/components/Table/GridTable.js

@@ -438,6 +438,12 @@ function GridRow(props) {
     let currentColspan = 1;
     const rowNode = ((0, jsx_runtime_1.jsx)(Row, Object.assign({ css: rowCss }, others, { "data-gridrow": true }, { children: columns.map((column, columnIndex) => {
             var _a;
+            if (column.mw) {
+                // Validate the column's minWidth definition if set.
+                if (!column.mw.endsWith("px") && !column.mw.endsWith("%")) {
+                    throw new Error("Beam Table column min-width definition only supports px or percentage values");
+                }
+            }
             // Decrement colspan count and skip if greater than 1.
             if (currentColspan > 1) {
                 currentColspan -= 1;
@@ -473,13 +479,16 @@ function GridRow(props) {
                 ...getIndentationCss(style, rowStyle, columnIndex, maybeContent),
                 // Then apply any header-specific override
                 ...(isHeader && style.headerCellCss),
-                // And finally the specific cell's css (if any from GridCellContent)
+                // The specific cell's css (if any from GridCellContent)
                 ...rowStyleCellCss,
+                // Add any cell specific style overrides
+                ...(isGridCellContent(maybeContent) && maybeContent.typeScale ? Css_1.Css[maybeContent.typeScale].$ : {}),
                 // Define the width of the column on each cell. Supports col spans.
                 ...(columnSizes && {
                     width: `calc(${columnSizes
                         .slice(maybeNestedCardColumnIndex, maybeNestedCardColumnIndex + currentColspan)
                         .join(" + ")})`,
+                    ...(column.mw ? Css_1.Css.mw(column.mw).$ : {}),
                 }),
             };
             const renderFn = (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.renderCell) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink)

package/dist/components/Table/styles.js

@@ -52,7 +52,7 @@ exports.beamFlexibleStyle = {
     cellCss: Css_1.Css.xs.bgWhite.aic.p2.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray100}`).$,
     presentationSettings: { borderless: false, typeScale: "xs", wrap: true },
 };
-exports.beamGroupRowStyle = Css_1.Css.smEm
+exports.beamGroupRowStyle = Css_1.Css.xsEm
     .mhPx(56)
     .gray700.bgGray100.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$;
 exports.beamTotalsRowStyle = Css_1.Css.gray700.smEm.hPx(40).mb1.bgWhite.boxShadow("none").$;

package/dist/components/Tooltip.d.ts

@@ -2,13 +2,15 @@ import { ReactElement, ReactNode } from "react";
 interface TooltipProps {
     /** The content that shows up when hovered */
     title: ReactNode;
-    children: ReactElement;
+    children: ReactNode;
     placement?: Placement;
     delay?: number;
     disabled?: boolean;
 }
 export declare function Tooltip(props: TooltipProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare type Placement = "top" | "bottom" | "left" | "right" | "auto";
-export declare function maybeTooltip(props: TooltipProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function maybeTooltip(props: Omit<TooltipProps, "children"> & {
+    children: ReactElement;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function resolveTooltip(disabled?: boolean | ReactNode, tooltip?: ReactNode, readOnly?: boolean | ReactNode): ReactNode | undefined;
 export {};

package/dist/components/Tooltip.js

@@ -27,13 +27,15 @@ const react_dom_1 = require("react-dom");
 const react_popper_1 = require("react-popper");
 const react_stately_1 = require("react-stately");
 const Css_1 = require("../Css");
+const utils_1 = require("../utils");
 function Tooltip(props) {
     const { placement, children, title, disabled, delay = 0 } = props;
     const state = (0, react_stately_1.useTooltipTriggerState)({ delay, isDisabled: disabled });
     const triggerRef = react_1.default.useRef(null);
     const { triggerProps, tooltipProps: _tooltipProps } = (0, react_aria_1.useTooltipTrigger)({ isDisabled: disabled }, state, triggerRef);
     const { tooltipProps } = (0, react_aria_1.useTooltip)(_tooltipProps, state);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ ref: triggerRef }, triggerProps, { children: children }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(Popper, Object.assign({}, (0, react_aria_1.mergeProps)(_tooltipProps, tooltipProps), { triggerRef: triggerRef, content: title, placement: placement }), void 0))] }, void 0));
+    const tid = (0, utils_1.useTestIds)(props, "tooltip");
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ ref: triggerRef }, triggerProps, (!state.isOpen && typeof title === "string" ? { title } : {}), tid, { children: children }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(Popper, Object.assign({}, (0, react_aria_1.mergeProps)(_tooltipProps, tooltipProps), { triggerRef: triggerRef, content: title, placement: placement }), void 0))] }, void 0));
 }
 exports.Tooltip = Tooltip;
 function Popper({ triggerRef, content, placement = "auto" }) {
@@ -49,6 +51,7 @@ function Popper({ triggerRef, content, placement = "auto" }) {
     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);
 }
 // Helper function to conditionally wrap component with Tooltip if necessary.
+// `maybeTooltip` requires that the `children` prop be a ReactElement, even though <Tooltip /> allows for ReactNode.
 function maybeTooltip(props) {
     return props.title ? (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({}, props), void 0) : props.children;
 }

package/dist/inputs/TextField.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from "react";
+import { MutableRefObject, ReactNode } from "react";
 import { Only } from "../Css";
 import { BeamTextFieldProps, TextFieldXss } from "../interfaces";
 import { Callback } from "../types";
@@ -8,6 +8,8 @@ export interface TextFieldProps<X> extends BeamTextFieldProps<X> {
     clearable?: boolean;
     api?: MutableRefObject<TextFieldApi | undefined>;
     onEnter?: Callback;
+    endAdornment?: ReactNode;
+    startAdornment?: ReactNode;
 }
 export declare function TextField<X extends Only<TextFieldXss, X>>(props: TextFieldProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare type TextFieldApi = {

package/package.json

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