@homebound/beam 2.120.0 → 2.122.0

package/dist/components/IconButton.d.ts

@@ -14,8 +14,13 @@ export interface IconButtonProps extends BeamButtonProps, BeamFocusableProps {
     buttonRef?: RefObject<HTMLButtonElement>;
     /** Whether to show a 16x16px version of the IconButton */
     compact?: boolean;
+    /** Whether to display the contrast variant */
+    contrast?: boolean;
 }
 export declare function IconButton(props: IconButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const iconButtonStylesHover: {
     backgroundColor: import("csstype").Property.BackgroundColor | undefined;
 };
+export declare const iconButtonContrastStylesHover: {
+    backgroundColor: import("csstype").Property.BackgroundColor | undefined;
+};

package/dist/components/IconButton.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.iconButtonStylesHover = exports.IconButton = void 0;
+exports.iconButtonContrastStylesHover = exports.iconButtonStylesHover = exports.IconButton = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
@@ -10,7 +10,7 @@ const Css_1 = require("../Css");
 const utils_1 = require("../utils");
 const useTestIds_1 = require("../utils/useTestIds");
 function IconButton(props) {
-    const { onClick: onPress, disabled, color, icon, autoFocus, inc, buttonRef, tooltip, menuTriggerProps, openInNew, compact = false, } = props;
+    const { onClick: onPress, disabled, color, icon, autoFocus, inc, buttonRef, tooltip, menuTriggerProps, openInNew, compact = false, contrast = false, } = props;
     const isDisabled = !!disabled;
     const ariaProps = { onPress, isDisabled, autoFocus, ...menuTriggerProps };
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -26,12 +26,13 @@ function IconButton(props) {
     const styles = (0, react_1.useMemo)(() => ({
         ...iconButtonStylesReset,
         ...(compact ? iconButtonCompact : iconButtonNormal),
-        ...(isHovered && exports.iconButtonStylesHover),
+        ...(isHovered && (contrast ? exports.iconButtonContrastStylesHover : exports.iconButtonStylesHover)),
         ...(isFocusVisible && iconButtonStylesFocus),
         ...(isDisabled && iconButtonStylesDisabled),
     }), [isHovered, isFocusVisible, isDisabled, compact]);
+    const iconColor = contrast ? contrastIconColor : defaultIconColor;
     const buttonAttrs = { ...testIds, ...buttonProps, ...focusProps, ...hoverProps, ref: ref, css: styles };
-    const buttonContent = ((0, jsx_runtime_1.jsx)(components_1.Icon, { icon: icon, color: color || (isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Gray900), inc: compact ? 2 : inc }, void 0));
+    const buttonContent = ((0, jsx_runtime_1.jsx)(components_1.Icon, { icon: icon, color: color || (isDisabled ? Css_1.Palette.Gray400 : iconColor), inc: compact ? 2 : inc }, void 0));
     const button = typeof onPress === "string" ? ((0, utils_1.isAbsoluteUrl)(onPress) || openInNew ? ((0, jsx_runtime_1.jsx)("a", Object.assign({}, buttonAttrs, { href: onPress, className: components_1.navLink, target: "_blank", rel: "noreferrer noopener" }, { children: buttonContent }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, buttonAttrs, { to: onPress, className: components_1.navLink }, { children: buttonContent }), void 0))) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonAttrs, { children: buttonContent }), void 0));
     // If we're disabled b/c of a non-boolean ReactNode, or the caller specified tooltip text, then show it in a tooltip
     return (0, components_1.maybeTooltip)({
@@ -41,9 +42,12 @@ function IconButton(props) {
     });
 }
 exports.IconButton = IconButton;
+const defaultIconColor = Css_1.Palette.Gray900;
+const contrastIconColor = Css_1.Palette.White;
 const iconButtonStylesReset = Css_1.Css.bTransparent.bsSolid.bgTransparent.cursorPointer.outline0.dif.aic.jcc.transition.$;
 const iconButtonNormal = Css_1.Css.hPx(28).wPx(28).br8.bw2.$;
 const iconButtonCompact = Css_1.Css.hPx(18).wPx(18).br4.bw1.$;
 exports.iconButtonStylesHover = Css_1.Css.bgGray200.$;
+exports.iconButtonContrastStylesHover = Css_1.Css.bgGray700.$;
 const iconButtonStylesFocus = Css_1.Css.bLightBlue700.$;
 const iconButtonStylesDisabled = Css_1.Css.cursorNotAllowed.$;

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/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

@@ -641,13 +641,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/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/inputs/MultiSelectField.mock.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultiSelectField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const utils_1 = require("../utils");
+const defaultTestId_1 = require("../utils/defaultTestId");
 /** Mocks out `MultiSelectField` as a multiple `<select>` field. */
 function MultiSelectField(props) {
     const { getOptionValue = (o) => o.id, // if unset, assume O implements HasId
     getOptionLabel = (o) => o.name, // if unset, assume O implements HasName
-    values, options, onSelect, readOnly = false, errorMsg, onFocus, onBlur, disabled, } = props;
-    const tid = (0, utils_1.useTestIds)(props, "multiSelect");
+    values, options, onSelect, readOnly = false, errorMsg, onFocus, onBlur, disabled, label, } = props;
+    const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
     return ((0, jsx_runtime_1.jsxs)("select", Object.assign({}, tid, { 
         // We're cheating and assume the values are strings...what we should really do is either:
         // a) use beam's valueToKey mapping to string-encode any Value, or

package/dist/inputs/SelectField.mock.js

@@ -4,12 +4,13 @@ exports.SelectField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../utils");
+const defaultTestId_1 = require("../utils/defaultTestId");
 /** Mocks out `SelectField` as a `<select>` field. */
 function SelectField(props) {
     const { getOptionValue = (o) => o.id, // if unset, assume O implements HasId
     getOptionLabel = (o) => o.name, // if unset, assume O implements HasName
-    value, options: maybeOptions, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, disabledOptions = [], } = props;
-    const tid = (0, utils_1.useTestIds)(props, "select");
+    value, options: maybeOptions, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, disabledOptions = [], label, } = props;
+    const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
     const [options, setOptions] = (0, react_1.useState)(Array.isArray(maybeOptions) ? maybeOptions : maybeOptions.initial);
     const currentOption = options.find((o) => getOptionValue(o) === value) || options[0];
     (0, react_1.useEffect)(() => {

package/package.json

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