@homebound/beam 2.173.0 → 2.175.0

package/dist/components/Chip.d.ts

@@ -3,6 +3,7 @@ declare type ChipType = "caution" | "warning" | "success" | "light" | "dark" | "
 export declare const ChipTypes: Record<ChipType, ChipType>;
 export interface ChipProps<X> {
     text: string;
+    title?: string;
     xss?: X;
     type?: ChipType;
 }

package/dist/components/Chip.js

@@ -16,7 +16,7 @@ exports.ChipTypes = {
 };
 /** Kinda like a chip, but read-only, so no `onClick` or `hover`. */
 function Chip({ type = exports.ChipTypes.neutral, ...props }) {
-    const { text, xss = {} } = props;
+    const { text, title = text, xss = {} } = props;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
     const compact = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact;
     const tid = (0, useTestIds_1.useTestIds)(props, "chip");
@@ -24,7 +24,7 @@ function Chip({ type = exports.ChipTypes.neutral, ...props }) {
             ...Css_1.Css[compact ? "xs" : "sm"].dif.aic.br16.pl1.px1.pyPx(2).gray900.$,
             ...typeStyles[type],
             ...xss,
-        } }, tid, { title: text }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp1.breakAll.$ }, { children: text }), void 0) }), void 0));
+        } }, tid, { title: title }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp1.breakAll.$ }, { children: text }), void 0) }), void 0));
 }
 exports.Chip = Chip;
 const typeStyles = {

package/dist/components/Chips.d.ts

@@ -1,7 +1,11 @@
 import { Margin, Only, Xss } from "../Css";
 declare type ChipsXss = Xss<Margin>;
+export interface ChipValue {
+    text: string;
+    title: string;
+}
 export interface ChipsProps<X> {
-    values: string[];
+    values: string[] | ChipValue[];
     xss?: X;
 }
 /** Renders a list of `Chip`s, with wrapping & appropriate margin between each `Chip`. */

package/dist/components/Chips.js

@@ -13,6 +13,9 @@ function Chips(props) {
             ...Css_1.Css.df.aifs.gap1.whiteSpace("normal").$,
             ...(wrap !== false ? Css_1.Css.add({ flexWrap: "wrap" }).$ : {}),
             ...xss,
-        } }, { children: values.map((value, i) => ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: value }, i))) }), void 0));
+        } }, { children: values.map((value, i) => {
+            const { text, title } = (value.hasOwnProperty("text") ? value : { text: value });
+            return (0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: text, title: title }, i);
+        }) }), void 0));
 }
 exports.Chips = Chips;

package/dist/components/Layout/ScrollableContent.js

@@ -22,7 +22,7 @@ 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 ? (children) : (
+    return (0, react_dom_1.createPortal)(!virtualized ? ((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);
 }

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

@@ -12,4 +12,11 @@ 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;
+};
 export {};

package/dist/components/Layout/ScrollableParent.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useScrollableParent = exports.ScrollableParent = void 0;
+exports.scrollContainerBottomPadding = exports.useScrollableParent = exports.ScrollableParent = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const Css_1 = require("../../Css");
@@ -31,10 +31,15 @@ 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.$ }, { 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.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));
 }
 exports.ScrollableParent = ScrollableParent;
 function useScrollableParent() {
     return (0, react_1.useContext)(ScrollableParentContext);
 }
 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.$).$;

package/dist/components/Table/columnSizes.js

@@ -32,14 +32,20 @@ function useSetupColumnSizes(style, columns, resizeRef) {
     const calculateImmediately = (0, react_1.useRef)(true);
     const [tableWidth, setTableWidth] = (0, react_1.useState)();
     // Calc our initial/first render sizes where we won't have a width yet
-    const [columnSizes, setColumnSizes] = (0, react_1.useState)(
-    // TODO Add a useEffect to re-calc this on change
-    (0, GridTable_1.calcColumnSizes)(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, tableWidth, style.minWidthPx));
+    const [columnSizes, setColumnSizes] = (0, react_1.useState)((0, GridTable_1.calcColumnSizes)(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, tableWidth, style.minWidthPx));
     const setTableAndColumnWidths = (0, react_1.useCallback)((width) => {
         var _a;
         setTableWidth(width);
         setColumnSizes((0, GridTable_1.calcColumnSizes)(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, width, style.minWidthPx));
     }, [setTableWidth, setColumnSizes, columns, style]);
+    // Used to recalculate our columns sizes when columns change
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!calculateImmediately.current) {
+            const width = (_a = resizeRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+            width && setTableAndColumnWidths(width);
+        }
+    }, [columns, setTableAndColumnWidths]);
     const setTableAndColumnWidthsDebounced = (0, use_debounce_1.useDebouncedCallback)(setTableAndColumnWidths, 100);
     const onResize = (0, react_1.useCallback)(() => {
         const target = resizeRef.current;

package/package.json

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