@homebound/beam 2.121.0 → 2.122.1

package/dist/components/Modal/TestModalContent.js

@@ -42,7 +42,7 @@ const users = [
     { id: "9", name: "Captain Marvel", role: "Does it all" },
     { id: "10", name: "Doctor Strange", role: "Doctor" },
 ];
-const rows = [Table_1.simpleHeader, ...users.map((u) => ({ kind: "data", ...u }))];
+const rows = [Table_1.simpleHeader, ...users.map((u) => ({ kind: "data", id: u.id, data: u }))];
 const columns = [
     { header: () => "Name", data: ({ name }) => name },
     { header: () => "Role", data: ({ role }) => role },

package/dist/components/PresentationContext.d.ts

@@ -9,6 +9,7 @@ export interface PresentationFieldProps {
     compact?: boolean;
     typeScale?: Typography;
     visuallyDisabled?: false;
+    errorInTooltip?: true;
 }
 export declare type PresentationContextProps = {
     fieldProps?: PresentationFieldProps;

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

@@ -232,7 +232,7 @@ declare type GridRowKind<R extends Kinded, P extends R["kind"]> = DiscriminateUn
 export declare type GridColumn<R extends Kinded, S = {}> = {
     [K in R["kind"]]: string | GridCellContent | (DiscriminateUnion<R, "kind", K> extends {
         data: infer D;
-    } ? (data: D, row: GridRowKind<R, K>, api: GridTableApi<R>) => ReactNode | GridCellContent : (row: GridRowKind<R, K>, api: GridTableApi<R>) => ReactNode | GridCellContent);
+    } ? (data: D, row: GridRowKind<R, K>, api: GridTableApi<R>) => ReactNode | GridCellContent : (data: undefined, row: GridRowKind<R, K>, api: GridTableApi<R>) => ReactNode | GridCellContent);
 } & {
     /**
      * The column's width.
@@ -313,6 +313,7 @@ export declare type GridDataRow<R extends Kinded> = {
     children?: GridDataRow<R>[];
     /** Whether to pin this sort to the first/last of its parent's children. */
     pin?: "first" | "last";
+    data: unknown;
 } & IfAny<R, {}, DiscriminateUnion<R, "kind", R["kind"]>>;
 declare type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
 /** Return the content for a given column def applied to a given row. */

package/dist/components/Table/GridTable.js

@@ -237,6 +237,7 @@ function GridTable(props) {
         hideLabel: true,
         numberAlignment: "right",
         compact: true,
+        errorInTooltip: true,
         // Avoid passing `undefined` as it will unset existing PresentationContext settings
         ...(borderless !== undefined ? { borderless } : {}),
         ...(typeScale !== undefined ? { typeScale } : {}),
@@ -641,13 +642,8 @@ function applyRowFn(column, row, api) {
     // Usually this is a function to apply against the row, but sometimes it's a hard-coded value, i.e. for headers
     const maybeContent = column[row.kind];
     if (typeof maybeContent === "function") {
-        if ("data" in row && "id" in row) {
-            // Auto-destructure data
-            return maybeContent(row["data"], row["id"], api);
-        }
-        else {
-            return maybeContent(row, api);
-        }
+        // Auto-destructure data
+        return maybeContent(row["data"], row, api);
     }
     else {
         return maybeContent;

package/dist/components/Table/columns.js

@@ -46,7 +46,7 @@ function selectColumn(columnDef) {
         ...columnDef,
     };
     return (0, index_1.newMethodMissingProxy)(base, (key) => {
-        return (row) => ({ content: (0, jsx_runtime_1.jsx)(SelectToggle_1.SelectToggle, { id: row.id }, void 0) });
+        return (data, row) => ({ content: (0, jsx_runtime_1.jsx)(SelectToggle_1.SelectToggle, { id: row.id }, void 0) });
     });
 }
 exports.selectColumn = selectColumn;
@@ -68,7 +68,7 @@ function collapseColumn(columnDef) {
         ...columnDef,
     };
     return (0, index_1.newMethodMissingProxy)(base, (key) => {
-        return (row) => ({ content: (0, jsx_runtime_1.jsx)(CollapseToggle_1.CollapseToggle, { row: row }, void 0) });
+        return (data, row) => ({ content: (0, jsx_runtime_1.jsx)(CollapseToggle_1.CollapseToggle, { row: row }, void 0) });
     });
 }
 exports.collapseColumn = collapseColumn;

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

@@ -8,7 +8,7 @@ export { useGridTableApi } from "./GridTableApi";
 export type { GridTableApi } from "./GridTableApi";
 export { RowState, RowStateContext } from "./RowState";
 export * from "./SelectToggle";
-export { simpleDataRows, simpleHeader, simpleRows } from "./simpleHelpers";
-export type { SimpleHeaderAndDataOf, SimpleHeaderAndDataWith } from "./simpleHelpers";
+export { simpleDataRows, simpleHeader } from "./simpleHelpers";
+export type { SimpleHeaderAndData } from "./simpleHelpers";
 export { SortHeader } from "./SortHeader";
 export { beamFixedStyle, beamFlexibleStyle, beamNestedFixedStyle, beamNestedFlexibleStyle, beamTotalsFixedStyle, beamTotalsFlexibleStyle, cardStyle, condensedStyle, defaultStyle, } from "./styles";

package/dist/components/Table/index.js

@@ -10,7 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.beamTotalsFlexibleStyle = exports.beamTotalsFixedStyle = exports.beamNestedFlexibleStyle = exports.beamNestedFixedStyle = exports.beamFlexibleStyle = exports.beamFixedStyle = exports.SortHeader = exports.simpleRows = exports.simpleHeader = exports.simpleDataRows = exports.RowStateContext = exports.RowState = exports.useGridTableApi = exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.DESC = exports.ASC = exports.GridSortContext = void 0;
+exports.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.beamTotalsFlexibleStyle = exports.beamTotalsFixedStyle = exports.beamNestedFlexibleStyle = exports.beamNestedFixedStyle = exports.beamFlexibleStyle = exports.beamFixedStyle = exports.SortHeader = exports.simpleHeader = exports.simpleDataRows = exports.RowStateContext = exports.RowState = exports.useGridTableApi = exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.DESC = exports.ASC = exports.GridSortContext = void 0;
 __exportStar(require("./CollapseToggle"), exports);
 __exportStar(require("./columns"), exports);
 var GridSortContext_1 = require("./GridSortContext");
@@ -30,7 +30,6 @@ __exportStar(require("./SelectToggle"), exports);
 var simpleHelpers_1 = require("./simpleHelpers");
 Object.defineProperty(exports, "simpleDataRows", { enumerable: true, get: function () { return simpleHelpers_1.simpleDataRows; } });
 Object.defineProperty(exports, "simpleHeader", { enumerable: true, get: function () { return simpleHelpers_1.simpleHeader; } });
-Object.defineProperty(exports, "simpleRows", { enumerable: true, get: function () { return simpleHelpers_1.simpleRows; } });
 var SortHeader_1 = require("./SortHeader");
 Object.defineProperty(exports, "SortHeader", { enumerable: true, get: function () { return SortHeader_1.SortHeader; } });
 var styles_1 = require("./styles");

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

@@ -1,10 +1,4 @@
 import { GridDataRow } from "./GridTable";
-/** A helper for making `Row` type aliases of simple/flat tables that are just header + data. */
-export declare type SimpleHeaderAndDataOf<T> = {
-    kind: "header";
-} | ({
-    kind: "data";
-} & T);
 /**
  * A helper for making `Row` type aliases of simple/flat tables that are just header + data.
  *
@@ -12,7 +6,7 @@ export declare type SimpleHeaderAndDataOf<T> = {
  * when rows are mobx proxies and we need proxy accesses to happen within the column
  * rendering.
  */
-export declare type SimpleHeaderAndDataWith<T> = {
+export declare type SimpleHeaderAndData<T> = {
     kind: "header";
 } | {
     kind: "data";
@@ -23,11 +17,9 @@ export declare type SimpleHeaderAndDataWith<T> = {
 export declare const simpleHeader: {
     kind: "header";
     id: string;
+    data: {};
 };
-export declare function simpleRows<R extends SimpleHeaderAndDataOf<D>, D>(data?: Array<D & {
-    id: string;
-}> | undefined): GridDataRow<R>[];
-/** Like `simpleRows` but for `SimpleHeaderAndDataWith`. */
-export declare function simpleDataRows<R extends SimpleHeaderAndDataWith<D>, D>(data?: Array<D & {
+/** Like `simpleRows` but for `SimpleHeaderAndData`. */
+export declare function simpleDataRows<R extends SimpleHeaderAndData<D>, D>(data?: Array<D & {
     id: string;
 }> | undefined): GridDataRow<R>[];

package/dist/components/Table/simpleHelpers.js

@@ -1,14 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.simpleDataRows = exports.simpleRows = exports.simpleHeader = void 0;
+exports.simpleDataRows = exports.simpleHeader = void 0;
 /** A const for a marker header row. */
-exports.simpleHeader = { kind: "header", id: "header" };
-function simpleRows(data = []) {
-    // @ts-ignore
-    return [exports.simpleHeader, ...data.map((c) => ({ kind: "data", ...c }))];
-}
-exports.simpleRows = simpleRows;
-/** Like `simpleRows` but for `SimpleHeaderAndDataWith`. */
+exports.simpleHeader = { kind: "header", id: "header", data: {} };
+/** Like `simpleRows` but for `SimpleHeaderAndData`. */
 function simpleDataRows(data = []) {
     // @ts-ignore Not sure why this doesn't type-check, something esoteric with the DiscriminateUnion type
     return [exports.simpleHeader, ...data.map((data) => ({ kind: "data", data, id: data.id }))];

package/dist/components/Table/styles.js

@@ -66,7 +66,7 @@ exports.beamTotalsFixedStyle = {
 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 },
+    presentationSettings: { borderless: true, typeScale: "xs", wrap: true },
 };
 exports.beamNestedFlexibleStyle = {
     ...exports.beamFlexibleStyle,

package/dist/components/internal/OverlayTrigger.d.ts

@@ -5,7 +5,7 @@ import { ButtonProps } from "../Button";
 import { IconButtonProps } from "../IconButton";
 interface TextButtonTriggerProps extends Pick<ButtonProps, "label" | "variant" | "size" | "icon"> {
 }
-interface IconButtonTriggerProps extends Pick<IconButtonProps, "icon" | "color"> {
+interface IconButtonTriggerProps extends Pick<IconButtonProps, "icon" | "color" | "compact" | "contrast"> {
 }
 export interface OverlayTriggerProps {
     trigger: TextButtonTriggerProps | IconButtonTriggerProps;

package/dist/forms/formStateDomain.d.ts

@@ -1,6 +1,7 @@
 export declare const jan1: Date;
 export declare const jan2: Date;
 export declare const jan10: Date;
+export declare const jan29: Date;
 export declare const dd100: DeweyDecimalClassification;
 export declare const dd200: DeweyDecimalClassification;
 export interface AuthorInput {
@@ -18,6 +19,7 @@ export interface AuthorInput {
     favoriteShapes?: string[] | null;
     isAvailable?: boolean | null;
     animals?: string[] | null;
+    bio?: string | null;
 }
 export interface AuthorAddress {
     street?: string | null;

package/dist/forms/formStateDomain.js

@@ -3,10 +3,11 @@
 // by a GraphQL schema for a `saveAuthor` mutation that takes an author
 // plus the author's books.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateOnly = exports.dd200 = exports.dd100 = exports.jan10 = exports.jan2 = exports.jan1 = void 0;
+exports.DateOnly = exports.dd200 = exports.dd100 = exports.jan29 = exports.jan10 = exports.jan2 = exports.jan1 = void 0;
 exports.jan1 = new Date(2020, 0, 1);
 exports.jan2 = new Date(2020, 0, 2);
 exports.jan10 = new Date(2020, 0, 10);
+exports.jan29 = new Date(2020, 0, 29);
 exports.dd100 = { number: "100", category: "Philosophy" };
 exports.dd200 = { number: "200", category: "Religion" };
 class DateOnly {

package/dist/inputs/TextFieldBase.js

@@ -15,12 +15,13 @@ const defaultTestId_1 = require("../utils/defaultTestId");
 const useTestIds_1 = require("../utils/useTestIds");
 // Used by both TextField and TextArea
 function TextFieldBase(props) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
     const { label, required, labelProps, hideLabel = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.hideLabel) !== null && _a !== void 0 ? _a : false, inputProps, inputRef, inputWrapRef, groupProps, compact = (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact) !== null && _b !== void 0 ? _b : false, errorMsg, helperText, multiline = false, onChange, onBlur, onFocus, xss, endAdornment, startAdornment, inlineLabel, contrast = false, borderless = (_c = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.borderless) !== null && _c !== void 0 ? _c : false, textAreaMinHeight = 96, clearable = false, tooltip, visuallyDisabled = (_d = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.visuallyDisabled) !== null && _d !== void 0 ? _d : true, } = props;
     const typeScale = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _e !== void 0 ? _e : "sm";
+    const errorInTooltip = (_f = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.errorInTooltip) !== null && _f !== void 0 ? _f : false;
     const internalProps = props.internalProps || {};
-    const { compound = false } = internalProps;
+    const { compound = false, forceFocus = false, forceHover = false } = internalProps;
     const errorMessageId = `${inputProps.id}-error`;
     const labelSuffix = (0, labelUtils_1.getLabelSuffix)(required);
     const ElementType = multiline ? "textarea" : "input";
@@ -51,12 +52,12 @@ function TextFieldBase(props) {
             ...Css_1.Css.gray900.if(contrast).white.$,
         },
         input: {
-            ...Css_1.Css.w100.mw0.outline0.br4.fg1.$,
+            ...Css_1.Css.w100.mw0.outline0.fg1.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.$).$),
         },
         hover: Css_1.Css.bgGray100.if(contrast).bgGray600.bGray600.$,
-        focus: borderless ? Css_1.Css.bshFocus.z1.$ : Css_1.Css.bLightBlue700.if(contrast).bLightBlue500.$,
+        focus: Css_1.Css.bLightBlue700.if(contrast).bLightBlue500.$,
         disabled: visuallyDisabled
             ? Css_1.Css.cursorNotAllowed.gray400.bgGray100.if(contrast).gray500.bgGray700.$
             : Css_1.Css.cursorNotAllowed.$,
@@ -75,10 +76,12 @@ function TextFieldBase(props) {
     const onFocusChained = (0, react_aria_1.chain)((e) => {
         e.target.select();
     }, onFocus);
+    const showFocus = (isFocused && !inputProps.readOnly) || forceFocus;
+    const showHover = (isHovered && !inputProps.disabled && !inputProps.readOnly && !isFocused) || forceHover;
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: fieldStyles.container }, groupProps, focusWithinProps, { children: [label && !inlineLabel && (
             // set `hidden` if being rendered as a compound field
             (0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ labelProps: labelProps, hidden: hideLabel || compound, label: label, suffix: labelSuffix, contrast: contrast }, tid.label), void 0)), (0, components_1.maybeTooltip)({
-                title: tooltip,
+                title: (errorInTooltip && errorMsg) || tooltip,
                 placement: "top",
                 children: inputProps.readOnly ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
                         // Use input wrapper to get common styles, but then we need to override some
@@ -86,19 +89,19 @@ function TextFieldBase(props) {
                         ...(multiline ? Css_1.Css.fdc.aifs.childGap2.$ : Css_1.Css.truncate.$),
                         ...xss,
                     }, "data-readonly": "true" }, tid, { children: [!multiline && inlineLabel && label && !hideLabel && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, Object.assign({ labelProps: labelProps, label: label }, tid.label), void 0)), multiline
-                            ? (_f = inputProps.value) === null || _f === void 0 ? void 0 : _f.split("\n\n").map((p, i) => ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.my1.$ }, { children: p.split("\n").map((sentence, j) => ((0, jsx_runtime_1.jsxs)("span", { children: [sentence, (0, jsx_runtime_1.jsx)("br", {}, void 0)] }, j))) }), i)))
+                            ? (_g = inputProps.value) === null || _g === void 0 ? void 0 : _g.split("\n\n").map((p, i) => ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.my1.$ }, { children: p.split("\n").map((sentence, j) => ((0, jsx_runtime_1.jsxs)("span", { children: [sentence, (0, jsx_runtime_1.jsx)("br", {}, void 0)] }, j))) }), i)))
                             : inputProps.value] }), void 0)) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
                         ...fieldStyles.inputWrapper,
                         ...(inputProps.disabled ? fieldStyles.disabled : {}),
-                        ...(isFocused && !inputProps.readOnly ? fieldStyles.focus : {}),
-                        ...(isHovered && !inputProps.disabled && !inputProps.readOnly && !isFocused ? fieldStyles.hover : {}),
+                        ...(showFocus ? fieldStyles.focus : {}),
+                        ...(showHover ? fieldStyles.hover : {}),
                         ...(errorMsg ? fieldStyles.error : {}),
                         ...Css_1.Css.if(multiline).aifs.px0.mhPx(textAreaMinHeight).$,
                     } }, hoverProps, { ref: inputWrapRef }, { children: [!multiline && inlineLabel && label && !hideLabel && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, Object.assign({ labelProps: labelProps, label: label }, tid.label), void 0)), !multiline && startAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.df.aic.fs0.br4.pr1.$ }, { children: startAdornment }), void 0), (0, jsx_runtime_1.jsx)(ElementType, Object.assign({}, (0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(hideLabel ? { "aria-label": label } : {}) }), (errorMsg ? { "aria-errormessage": errorMessageId } : {}), { ref: fieldRef, rows: multiline ? 1 : undefined, css: {
                                 ...fieldStyles.input,
                                 ...(inputProps.disabled ? fieldStyles.disabled : {}),
-                                ...(isHovered && !inputProps.disabled && !inputProps.readOnly && !isFocused ? fieldStyles.hover : {}),
-                                ...(multiline ? Css_1.Css.h100.p1.add("resize", "none").if(borderless).pPx(4).$ : Css_1.Css.truncate.$),
+                                ...(showHover ? fieldStyles.hover : {}),
+                                ...(multiline ? Css_1.Css.h100.p1.add("resize", "none").$ : Css_1.Css.truncate.$),
                                 ...xss,
                             } }, tid), void 0), isFocused && clearable && onChange && inputProps.value && ((0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "xCircle", color: Css_1.Palette.Gray700, onClick: () => {
                                 var _a;
@@ -106,6 +109,6 @@ function TextFieldBase(props) {
                                 // Reset focus to input element
                                 (_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                             } }, void 0)), !multiline && endAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.df.aic.pl1.fs0.$ }, { children: endAdornment }), void 0)] }), void 0)),
-            }), errorMsg && !compound && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ id: errorMessageId, errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && !compound && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0));
+            }), errorMsg && !compound && !errorInTooltip && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ id: errorMessageId, errorMsg: errorMsg }, tid.errorMsg), void 0)), helperText && !compound && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0));
 }
 exports.TextFieldBase = TextFieldBase;

package/dist/interfaces.d.ts

@@ -52,4 +52,8 @@ export interface TextFieldInternalProps {
      * This is explicitly an internal property that is not exposed to any field's API.
      */
     compound?: boolean;
+    /** Forces focus styles for storybook purposes */
+    forceFocus?: true;
+    /** Forces hover styles for storybook purposes */
+    forceHover?: boolean;
 }

package/package.json

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