@homebound/beam 2.104.0 → 2.105.3

package/dist/components/Chip.js

@@ -2,14 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chip = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const PresentationContext_1 = require("./PresentationContext");
 const Css_1 = require("../Css");
 const useTestIds_1 = require("../utils/useTestIds");
 /** Kinda like a chip, but read-only, so no `onClick` or `hover`. */
 function Chip(props) {
+    var _a;
     const { text, xss = {} } = props;
+    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
+    const typeScale = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _a !== void 0 ? _a : "sm";
     const tid = (0, useTestIds_1.useTestIds)(props, "chip");
     return ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: {
-            ...Css_1.Css.dif.aic.br16.sm.pl1.px1.pyPx(2).gray900.bgGray200.$,
+            ...Css_1.Css[typeScale].dif.aic.br16.pl1.px1.pyPx(2).gray900.bgGray200.$,
             ...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));
 }

package/dist/components/Chips.js

@@ -3,10 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chips = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Chip_1 = require("./Chip");
+const PresentationContext_1 = require("./PresentationContext");
 const Css_1 = require("../Css");
 /** Renders a list of `Chip`s, with wrapping & appropriate margin between each `Chip`. */
 function Chips(props) {
+    const { wrap } = (0, PresentationContext_1.usePresentationContext)();
     const { values, xss = {} } = props;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...Css_1.Css.df.add({ flexWrap: "wrap" }).my1.$, ...xss } }, { children: values.map((value, i) => ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { text: value, xss: Css_1.Css.mr1.mb1.$ }, i))) }), void 0));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+            ...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));
 }
 exports.Chips = Chips;

package/dist/components/PresentationContext.d.ts

@@ -13,6 +13,7 @@ export interface PresentationFieldProps {
 export declare type PresentationContextProps = {
     fieldProps?: PresentationFieldProps;
     gridTableStyle?: GridStyle;
+    wrap?: boolean;
 };
 export declare const PresentationContext: import("react").Context<PresentationContextProps>;
 export declare function PresentationProvider(props: PropsWithChildren<PresentationContextProps>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Table/GridTable.d.ts

@@ -1,4 +1,5 @@
 import React, { MutableRefObject, ReactElement, ReactNode } from "react";
+import { PresentationContextProps, PresentationFieldProps } from "../PresentationContext";
 import { GridRowLookup } from "./GridRowLookup";
 import { Margin, Only, Properties, Xss } from "../../Css";
 export declare type Kinded = {
@@ -46,6 +47,7 @@ export interface GridStyle {
     nestedCards?: NestedCardsStyle;
     /** Default content to put into an empty cell */
     emptyCell?: ReactNode;
+    presentationSettings?: Pick<PresentationFieldProps, "borderless" | "typeScale"> & Pick<PresentationContextProps, "wrap">;
 }
 export declare type NestedCardStyleByKind = Record<string, NestedCardStyle>;
 export interface NestedCardsStyle {

package/dist/components/Table/GridTable.js

@@ -80,7 +80,7 @@ exports.setGridTableDefaults = setGridTableDefaults;
  * special styling to the row that uses `kind: "header"`.)
  */
 function GridTable(props) {
-    var _a;
+    var _a, _b, _c, _d, _e;
     const { id = "gridTable", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, sorting, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, api, } = props;
     const [collapsedIds, collapseAllContext, collapseRowContext] = useToggleIds(rows, persistCollapse);
     // We only use this in as=virtual mode, but keep this here for rowLookup to use
@@ -98,12 +98,11 @@ function GridTable(props) {
         }
         return rows;
     }, [columns, rows, sorting, sortState]);
+    const columnSizes = (0, react_1.useMemo)(() => { var _a; return calcColumnSizes(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth); }, [columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth]);
     // Filter + flatten + component-ize the sorted rows.
     let [headerRows, filteredRows] = (0, react_1.useMemo)(() => {
-        var _a;
         // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
         const filters = (filter && filter.split(/ +/)) || [];
-        const columnSizes = calcColumnSizes(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth);
         function makeRowComponent(row) {
             // We only pass sortState to header rows, b/c non-headers rows shouldn't have to re-render on sorting
             // changes, and so by not passing the sortProps, it means the data rows' React.memo will still cache them.
@@ -194,12 +193,22 @@ function GridTable(props) {
     }, [filteredRows === null || filteredRows === void 0 ? void 0 : filteredRows.length, setRowCount]);
     const noData = filteredRows.length === 0;
     const firstRowMessage = (noData && fallbackMessage) || (tooManyClientSideRows && "Hiding some rows, use filter...") || infoMessage;
+    const borderless = (_b = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _b === void 0 ? void 0 : _b.borderless;
+    const typeScale = (_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.typeScale;
+    const fieldProps = (0, react_1.useMemo)(() => ({
+        hideLabel: true,
+        numberAlignment: "right",
+        compact: true,
+        // Avoid passing `undefined` as it will unset existing PresentationContext settings
+        ...(borderless !== undefined ? { borderless } : {}),
+        ...(typeScale !== undefined ? { typeScale } : {}),
+    }), [borderless, typeScale]);
     // If we're running in Jest, force using `as=div` b/c jsdom doesn't support react-virtuoso.
     // This enables still putting the application's business/rendering logic under test, and letting it
     // just trust the GridTable impl that, at runtime, `as=virtual` will (other than being virtualized)
     // behave semantically the same as `as=div` did for its tests.
     const _as = as === "virtual" && runningInJest ? "div" : as;
-    return ((0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: { hideLabel: true, numberAlignment: "right", compact: true } }, { children: renders[_as](style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, xss, virtuosoRef) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: fieldProps, wrap: (_d = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _d === void 0 ? void 0 : _d.wrap }, { children: renders[_as](style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, (_e = style.nestedCards) === null || _e === void 0 ? void 0 : _e.firstLastColumnWidth, xss, virtuosoRef) }), void 0));
 }
 exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable
@@ -497,6 +506,7 @@ function isJSX(content) {
 }
 /** If a column def return just string text for a given row, apply some default styling. */
 function toContent(content, isHeader, canSortColumn, isClientSideSorting, style, as, alignment) {
+    var _a;
     content = isGridCellContent(content) ? content.content : content;
     if (typeof content === "function") {
         // Actually create the JSX by calling `content()` here (which should be as late as
@@ -517,6 +527,9 @@ function toContent(content, isHeader, canSortColumn, isClientSideSorting, style,
     if (content && typeof content === "string" && isHeader && canSortColumn) {
         return (0, jsx_runtime_1.jsx)(SortHeader_1.SortHeader, { content: content, iconOnLeft: alignment === "right" }, void 0);
     }
+    else if (content && typeof content === "string" && ((_a = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _a === void 0 ? void 0 : _a.wrap) === false) {
+        return ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.mw0.truncate.$, title: content }, { children: content }), void 0));
+    }
     else if (style.emptyCell && isContentEmpty(content)) {
         // If the content is empty and the user specified an `emptyCell` node, return that.
         return style.emptyCell;

package/dist/components/Table/columns.d.ts

@@ -10,3 +10,5 @@ export declare function numericColumn<T extends Kinded, S = {}>(columnDef: GridC
 export declare function actionColumn<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;
 /** Provides default styling for a GridColumn containing a checkbox. */
 export declare function selectColumn<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;
+/** Provides default styling for a GridColumn containing the CollapseToggle component. */
+export declare function collapseColumn<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;

package/dist/components/Table/columns.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.selectColumn = exports.actionColumn = exports.numericColumn = exports.dateColumn = exports.column = void 0;
+exports.collapseColumn = exports.selectColumn = exports.actionColumn = exports.numericColumn = exports.dateColumn = exports.column = void 0;
 /** Provides default styling for a GridColumn representing a Date. */
 function column(columnDef) {
     return { ...columnDef };
@@ -28,3 +28,9 @@ function selectColumn(columnDef) {
     return { clientSideSort: false, ...columnDef, align: "center", w: "48px" };
 }
 exports.selectColumn = selectColumn;
+/** Provides default styling for a GridColumn containing the CollapseToggle component. */
+function collapseColumn(columnDef) {
+    // Defining `w: 38px` based on the designs
+    return { ...columnDef, clientSideSort: false, align: "center", w: "38px" };
+}
+exports.collapseColumn = collapseColumn;

package/dist/components/Table/styles.d.ts

@@ -1,3 +1,4 @@
+import { Properties } from "../../Css";
 import { GridStyle } from ".";
 /** Our original table look & feel/style. */
 export declare const defaultStyle: GridStyle;
@@ -7,3 +8,5 @@ export declare const condensedStyle: GridStyle;
 export declare const cardStyle: GridStyle;
 export declare const beamFixedStyle: GridStyle;
 export declare const beamFlexibleStyle: GridStyle;
+export declare const beamGroupRowStyle: Properties;
+export declare const beamTotalsRowStyle: Properties;

package/dist/components/Table/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.beamFlexibleStyle = exports.beamFixedStyle = exports.cardStyle = exports.condensedStyle = exports.defaultStyle = void 0;
+exports.beamTotalsRowStyle = exports.beamGroupRowStyle = exports.beamFlexibleStyle = exports.beamFixedStyle = exports.cardStyle = exports.condensedStyle = exports.defaultStyle = void 0;
 const Css_1 = require("../../Css");
 /** Our original table look & feel/style. */
 exports.defaultStyle = {
@@ -41,11 +41,18 @@ exports.cardStyle = {
 };
 // Once completely rolled out across all tables in Blueprint, this will change to be the `defaultStyle`.
 exports.beamFixedStyle = {
-    rootCss: Css_1.Css.gray700.$,
-    // Doing a mix of `min` and `max` height of 40 as each cell is currently defining `h100`.
-    headerCellCss: Css_1.Css.xsEm.bgGray200.aic.nowrap.px2.mhPx(40).maxhPx(40).$,
-    // TODO: `cellCss` has incomplete styling at the moment. Will be done as part of SC-8145
-    cellCss: Css_1.Css.xs.bgWhite.aic.nowrap.px2.hPx(40).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray100}`).$,
+    headerCellCss: Css_1.Css.gray700.xsEm.bgGray200.aic.nowrap.pxPx(12).hPx(40).$,
+    cellCss: Css_1.Css.gray900.xs.bgWhite.aic.nowrap.pxPx(12).hPx(36).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray100}`).$,
+    emptyCell: "-",
+    presentationSettings: { borderless: true, typeScale: "xs", wrap: false },
+    rowHoverColor: Css_1.Palette.Gray200,
+};
+exports.beamFlexibleStyle = {
+    ...exports.beamFixedStyle,
+    cellCss: Css_1.Css.xs.bgWhite.aic.p2.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray100}`).$,
+    presentationSettings: { borderless: false, typeScale: "xs", wrap: true },
 };
-// TODO: `cellCss` has incomplete styling at the moment. Will be done as part of SC-8145
-exports.beamFlexibleStyle = { ...exports.beamFixedStyle, cellCss: Css_1.Css.p2.$ };
+exports.beamGroupRowStyle = Css_1.Css.smEm
+    .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/dist/inputs/TextFieldBase.js

@@ -56,7 +56,7 @@ function TextFieldBase(props) {
             ...(!contrast ? Css_1.Css.bgWhite.$ : Css_1.Css.bgGray700.addIn("&::selection", Css_1.Css.bgGray800.$).$),
         },
         hover: Css_1.Css.bgGray100.if(contrast).bgGray600.bGray600.$,
-        focus: borderless ? Css_1.Css.bshFocus.$ : Css_1.Css.bLightBlue700.if(contrast).bLightBlue500.$,
+        focus: borderless ? Css_1.Css.bshFocus.z1.$ : Css_1.Css.bLightBlue700.if(contrast).bLightBlue500.$,
         disabled: visuallyDisabled
             ? Css_1.Css.cursorNotAllowed.gray400.bgGray100.if(contrast).gray500.bgGray700.$
             : Css_1.Css.cursorNotAllowed.$,

package/package.json

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