@homebound/beam 2.187.0 → 2.187.1

package/dist/components/SuperDrawer/ConfirmCloseModal.js

@@ -15,7 +15,7 @@ function ConfirmCloseModal(props) {
         // after a close and could/will cause other close attempts to fail.
         modalState.current = undefined;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.ModalHeader, { children: "Confirm" }, void 0), (0, jsx_runtime_1.jsx)(components_1.ModalBody, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.tc.wPx(400).$ }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.lgSb.gray900.mb2.$ }, { children: "Are you sure you want to cancel?" }), void 0), (0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.base.gray700.$ }, { children: "Any data you've entered so far will be lost." }), void 0)] }), void 0) }, void 0), (0, jsx_runtime_1.jsx)(components_1.ModalFooter, Object.assign({ xss: Css_1.Css.jcc.$ }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.gap1.aic.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { label: continueText, onClick: closeModal }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: discardText, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.ModalBody, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.tc.wPx(400).$ }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.lgSb.gray900.mb1.$ }, { children: "Are you sure you want to cancel?" }), void 0), (0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.base.gray700.$ }, { children: "Any changes you've made so far will be lost." }), void 0)] }), void 0) }, void 0), (0, jsx_runtime_1.jsx)(components_1.ModalFooter, Object.assign({ xss: Css_1.Css.jcc.$ }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.gap1.aic.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { label: continueText, onClick: closeModal }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: discardText, onClick: () => {
                                 // The order of these calls doesn't really matter; close this modal and tell the call to do their close
                                 onClose();
                                 closeModal();

package/dist/components/SuperDrawer/SuperDrawer.js

@@ -37,14 +37,12 @@ function SuperDrawer() {
     var _a, _b;
     const { drawerContentStack: contentStack, modalState, modalBodyDiv, modalFooterDiv, modalHeaderDiv, } = (0, BeamContext_1.useBeamContext)();
     const { closeDrawer } = (0, components_1.useSuperDrawer)();
-    const drawerHeaderRef = (0, react_3.useRef)(null);
     const modalBodyRef = (0, react_3.useRef)(null);
     const modalFooterRef = (0, react_3.useRef)(null);
     const testId = (0, utils_1.useTestIds)({}, "superDrawer");
     // Steal the modal body/footer portals from Modal, if we're open
     (0, react_3.useEffect)(() => {
-        if (modalBodyRef.current && modalFooterRef.current && drawerHeaderRef.current && modalState.current) {
-            drawerHeaderRef.current.appendChild(modalHeaderDiv);
+        if (modalBodyRef.current && modalFooterRef.current && modalState.current) {
             modalBodyRef.current.appendChild(modalBodyDiv);
             modalFooterRef.current.appendChild(modalFooterDiv);
         }
@@ -80,9 +78,7 @@ function SuperDrawer() {
                         // Custom transitions settings for the translateX animation
                         transition: { ease: "linear", duration: 0.2, delay: 0.2 }, exit: { transition: { ease: "linear", duration: 0.2 }, x: width }, 
                         // Preventing clicks from triggering parent onClick
-                        onClick: (e) => e.stopPropagation() }, { children: (0, jsx_runtime_1.jsxs)(form_state_1.AutoSaveStatusProvider, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.bb.bGray200.df.aic.jcsb.gap2.$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.xl2Sb.gray900.mr2.$ }, testId.title, { ref: drawerHeaderRef }, { children: !modalState.current && (title || null) }), void 0), !modalState.current && (titleLeftContent || null)] }), void 0), !modalState.current && (
-                                        // Forcing height to 32px to match title height
-                                        (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap3.aic.hPx(32).fs0.$ }, { children: [titleRightContent || null, !hideControls && ((0, jsx_runtime_1.jsx)(components_1.ButtonGroup, Object.assign({ buttons: [
+                        onClick: (e) => e.stopPropagation() }, { children: (0, jsx_runtime_1.jsxs)(form_state_1.AutoSaveStatusProvider, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.bb.bGray200.df.aic.jcsb.gap2.if(!!modalState.current).bn.$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.xl2Sb.gray900.mr2.$ }, testId.title, { children: title !== null && title !== void 0 ? title : null }), void 0), titleLeftContent !== null && titleLeftContent !== void 0 ? titleLeftContent : null] }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap3.aic.hPx(32).fs0.$ }, { children: [titleRightContent || null, !hideControls && ((0, jsx_runtime_1.jsx)(components_1.ButtonGroup, Object.assign({ buttons: [
                                                         {
                                                             icon: "chevronLeft",
                                                             onClick: () => onPrevClick && onPrevClick(),
@@ -93,10 +89,8 @@ function SuperDrawer() {
                                                             onClick: () => onNextClick && onNextClick(),
                                                             disabled: !onNextClick || isDetail,
                                                         },
-                                                    ] }, testId.headerActions), void 0)), (0, jsx_runtime_1.jsx)(components_1.IconButton, Object.assign({ icon: "x", onClick: closeDrawer }, testId.close), void 0)] }), void 0))] }), void 0), content, modalState.current && (
+                                                    ] }, testId.headerActions), void 0)), (0, jsx_runtime_1.jsx)(components_1.IconButton, Object.assign({ icon: "x", onClick: closeDrawer }, testId.close), void 0)] }), void 0)] }), void 0), content, modalState.current && (
                                 // Forcing some design constraints on the modal component
-                                (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: 
-                                    // topPX(81) is the offset from the header
-                                    Css_1.Css.fg1.topPx(81).left0.right0.bottom0.absolute.bgWhite.df.aic.jcc.fg1.fdc.z5.$ }, { children: [modalState.current.content, (0, jsx_runtime_1.jsx)("div", { ref: modalBodyRef }, void 0), (0, jsx_runtime_1.jsx)("div", { ref: modalFooterRef }, void 0)] }), void 0))] }, void 0) }), "superDrawerContainer"))] }, void 0)) }, void 0), document.body);
+                                (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.fg1.top0.left0.right0.bottom0.absolute.bgWhite.df.aic.jcc.fg1.fdc.z5.$ }, { children: [modalState.current.content, (0, jsx_runtime_1.jsx)("div", { ref: modalBodyRef }, void 0), (0, jsx_runtime_1.jsx)("div", { ref: modalFooterRef }, void 0)] }), void 0))] }, void 0) }), "superDrawerContainer"))] }, void 0)) }, void 0), document.body);
 }
 exports.SuperDrawer = SuperDrawer;

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

@@ -1,65 +1,12 @@
-import { MutableRefObject, ReactElement, ReactNode } from "react";
-import { PresentationContextProps, PresentationFieldProps } from "../PresentationContext";
-import { GridRowLookup } from "./GridRowLookup";
+import { MutableRefObject } from "react";
 import { GridTableApi } from "./GridTableApi";
-import { GridStyleDef } from "./styles";
-import { Margin, Only, Palette, Properties, Typography, Xss } from "../../Css";
-export declare type Kinded = {
-    kind: string;
-};
-export declare type GridTableXss = Xss<Margin>;
-export declare const ASC: "ASC";
-export declare const DESC: "DESC";
-export declare type Direction = "ASC" | "DESC";
-export declare const emptyCell: GridCellContent;
+import { GridStyle, GridStyleDef, RowStyles } from "./TableStyles";
+import { Direction, GridColumn, GridTableXss, Kinded, ParentChildrenTuple, RenderAs } from "./types";
+import { GridRowLookup } from "./utils/GridRowLookup";
+import { Only } from "../../Css";
+import { GridDataRow } from "./components/Row";
 /** Tells GridTable we're running in Jest, which forces as=virtual to be as=div, to work in jsdom. */
 export declare function setRunningInJest(): void;
-/** Completely static look & feel, i.e. nothing that is based on row kinds/content. */
-export interface GridStyle {
-    /** Applied to the base div element. */
-    rootCss?: Properties;
-    /** Applied with the owl operator between rows for rendering border lines. */
-    betweenRowsCss?: Properties;
-    /** Applied to the first non-header row, i.e. if you want to cancel out `betweenRowsCss`. */
-    firstNonHeaderRowCss?: Properties;
-    /** Applied to all cell divs (via a selector off the base div). */
-    cellCss?: Properties;
-    /**
-     * Applied to the header row divs.
-     *
-     * NOTE `as=virtual`: When using a virtual table with the goal of adding space
-     * between the header and the first row use `firstNonHeaderRowCss` with a
-     * margin-top instead. Using `headerCellCss` will not work since the header
-     * rows are wrapper with Chrome rows.
-     */
-    headerCellCss?: Properties;
-    /** Applied to 'kind: "totals"' cells */
-    totalsCellCss?: Properties;
-    /** Applied to the first cell of all rows, i.e. for table-wide padding or left-side borders. */
-    firstCellCss?: Properties;
-    /** Applied to the last cell of all rows, i.e. for table-wide padding or right-side borders. */
-    lastCellCss?: Properties;
-    /** Applied to a cell div when `indent: 1` is used. */
-    indentOneCss?: Properties;
-    /** Applied to a cell div when `indent: 2` is used. */
-    indentTwoCss?: Properties;
-    /** Applied if there is a fallback/overflow message showing. */
-    firstRowMessageCss?: Properties;
-    /** Applied on hover if a row has a rowLink/onClick set. */
-    rowHoverColor?: Palette;
-    /** Default content to put into an empty cell */
-    emptyCell?: ReactNode;
-    presentationSettings?: Pick<PresentationFieldProps, "borderless" | "typeScale"> & Pick<PresentationContextProps, "wrap">;
-    /** Minimum table width in pixels. Used when calculating columns sizes */
-    minWidthPx?: number;
-    /** Css to apply at each level of a parent/child nested table. */
-    levels?: Record<number, {
-        cellCss?: Properties;
-        firstContentColumn?: Properties;
-    }>;
-    /** Allows for customization of the background color used to denote an "active" row */
-    activeBgColor?: Palette;
-}
 export interface GridTableDefaults {
     style: GridStyle | GridStyleDef;
     stickyHeader: boolean;
@@ -68,9 +15,6 @@ export interface GridTableDefaults {
 export declare function setDefaultStyle(style: GridStyle): void;
 /** Configures the default/app-wide GridTable settings. */
 export declare function setGridTableDefaults(opts: Partial<GridTableDefaults>): void;
-declare type RenderAs = "div" | "table" | "virtual";
-/** The GridDataRow is optional b/c the nested card chrome rows only have ReactElements. */
-export declare type RowTuple<R extends Kinded> = [GridDataRow<R> | undefined, ReactElement];
 /**
  * The sort settings for the current table; whether it's client-side or server-side.
  *
@@ -117,7 +61,7 @@ export interface GridTableProps<R extends Kinded, S, X> {
     /** The rows of data (including any header/footer rows), to be rendered by the column definitions. */
     rows: GridDataRow<R>[];
     /** Optional row-kind-level styling / behavior like onClick/rowLinks. */
-    rowStyles?: GridRowStyles<R>;
+    rowStyles?: RowStyles<R>;
     /** Allow looking up prev/next of a row i.e. for SuperDrawer navigation. */
     rowLookup?: MutableRefObject<GridRowLookup<R> | undefined>;
     /** Whether the header row should be sticky. */
@@ -179,161 +123,10 @@ export interface GridTableProps<R extends Kinded, S, X> {
  */
 export declare function GridTable<R extends Kinded, S = {}, X extends Only<GridTableXss, X> = {}>(props: GridTableProps<R, S, X>): import("@emotion/react/jsx-runtime").JSX.Element;
 /**
- * Calculates column widths using a flexible `calc()` definition that allows for consistent column alignment without the use of `<table />`, CSS Grid, etc layouts.
- * Enforces only fixed-sized units (% and px)
- */
-export declare function calcColumnSizes(columns: GridColumn<any>[], tableWidth: number | undefined, tableMinWidthPx?: number): string[];
-/**
- * Given an ADT of type T, performs a look up and returns the type of kind K.
- *
- * See https://stackoverflow.com/a/50125960/355031
- */
-export declare type DiscriminateUnion<T, K extends keyof T, V extends T[K]> = T extends Record<K, V> ? T : never;
-/** A specific kind of row, including the GridDataRow props. */
-declare type GridRowKind<R extends Kinded, P extends R["kind"]> = DiscriminateUnion<R, "kind", P> & {
-    id: string;
-    children: GridDataRow<R>[];
-    selectable?: false;
-};
-/**
- * Defines how a single column will render each given row `kind` in `R`.
- *
- * The `S` generic is either:
- *
- * - For server-side sorting, it's the sortKey to pass back to the server to
- * request "sort by this column".
- *
- * - For client-side sorting, it's type `number`, to represent the current
- * column being sorted, in which case we use the GridCellContent.value.
- */
-export declare type GridColumn<R extends Kinded, S = {}> = {
-    [K in R["kind"]]: string | GridCellContent | (DiscriminateUnion<R, "kind", K> extends {
-        data: infer D;
-    } ? (data: D, opts: {
-        row: GridRowKind<R, K>;
-        api: GridTableApi<R>;
-        level: number;
-    }) => ReactNode | GridCellContent : (data: undefined, opts: {
-        row: GridRowKind<R, K>;
-        api: GridTableApi<R>;
-        level: number;
-    }) => ReactNode | GridCellContent);
-} & {
-    /**
-     * The column's width.
-     * - Only px, percentage, or fr units are supported, due to each GridRow acting as an independent table. This ensures consistent alignment between rows.
-     * - Numbers are treated as `fr` units
-     * - 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. */
-    clientSideSort?: boolean;
-    /** This column's sort by value (if server-side sorting). */
-    serverSideSortKey?: S;
-    /** Allows the column to stay in place when the user scrolls horizontally */
-    sticky?: "left" | "right";
-    /** Prevent column from supporting RowStyle.onClick/rowLink in order to avoid nested interactivity. Defaults to true */
-    wrapAction?: false;
-    /** Used as a signal to defer adding the 'indent' styling */
-    isAction?: true;
-    /** Column name that will be used to generate an unique identifier for every row cell */
-    name?: string;
-    /** Flag that will allow to know which columns are hide-able */
-    canHide?: boolean;
-    /** Flag that will allow to know which hide-able columns are visible on initial load */
-    initVisible?: boolean;
-};
-export declare const nonKindGridColumnKeys: string[];
-/** Allows rendering a specific cell. */
-declare type RenderCellFn<R extends Kinded> = (idx: number, css: Properties, content: ReactNode, row: R, rowStyle: RowStyle<R> | undefined, classNames: string | undefined, onClick: (() => void) | undefined) => ReactNode;
-/** Defines row-specific styling for each given row `kind` in `R` */
-export declare type GridRowStyles<R extends Kinded> = {
-    [P in R["kind"]]?: RowStyle<DiscriminateUnion<R, "kind", P>>;
-};
-export interface RowStyle<R extends Kinded> {
-    /** Applies this css to the wrapper row, i.e. for row-level hovers. */
-    rowCss?: Properties | ((row: R) => Properties);
-    /** Applies this css to each cell in the row. */
-    cellCss?: Properties | ((row: R) => Properties);
-    /** Renders the cell element, i.e. a link to get whole-row links. */
-    renderCell?: RenderCellFn<R>;
-    /** Whether the row should be indented (via a style applied to the 1st cell). */
-    indent?: 1 | 2;
-    /** Whether the row should be a link. */
-    rowLink?: (row: R) => string;
-    /** Fired when the row is clicked, similar to rowLink but for actions that aren't 'go to this link'. */
-    onClick?: (row: GridDataRow<R>, api: GridTableApi<R>) => void;
-}
-export declare type GridCellAlignment = "left" | "right" | "center";
-/**
- * Allows a cell to be more than just a RectNode, i.e. declare its alignment or
- * primitive value for filtering and sorting.
- */
-export declare type GridCellContent = {
-    /** The JSX content of the cell. Virtual tables that client-side sort should use a function to avoid perf overhead. */
-    content: ReactNode | (() => ReactNode);
-    alignment?: GridCellAlignment;
-    /** Allow value to be a function in case it's a dynamic value i.e. reading from an inline-edited proxy. */
-    value?: MaybeFn<number | string | Date | boolean | null | undefined>;
-    /** The value to use specifically for sorting (i.e. if `value` is used for filtering); defaults to `value`. */
-    sortValue?: MaybeFn<number | string | Date | boolean | null | undefined>;
-    /** Whether to indent the cell. */
-    indent?: 1 | 2;
-    colspan?: number;
-    typeScale?: Typography;
-    /** Allows the cell to stay in place when the user scrolls horizontally, i.e. frozen columns. */
-    sticky?: "left" | "right";
-    /** If provided, content of the cell will be wrapped within a <button /> or <a /> tag depending on if the value is a function or a string. */
-    onClick?: () => {} | string;
-    /** Custom css to apply directly to this cell, i.e. cell-specific borders. */
-    css?: Properties;
-    /** Allows cell to reveal content when the user hovers over a row. Content must be wrapped in an element in order to be hidden. IE <div>{value}</div>*/
-    revealOnRowHover?: true;
-};
-declare type MaybeFn<T> = T | (() => T);
-/**
- * The data for any row in the table, marked by `kind` so that each column knows how to render it.
+ * Filters rows given a client-side text `filter.
  *
- * Each `kind` should contain very little presentation logic, i.e. mostly just off-the-wire data from
- * a GraphQL query.
+ * Ensures parent rows remain in the list if any children match the filter.
  *
- * The presentation concerns instead mainly live in each GridColumn definition, which will format/render
- * each kind's data for that specific row+column (i.e. cell) combination.
+ * We return a copy of `[Parent, [Child]]` tuples so that we don't modify the `GridDataRow.children`.
  */
-export declare type GridDataRow<R extends Kinded> = {
-    kind: R["kind"];
-    /** Combined with the `kind` to determine a table wide React key. */
-    id: string;
-    /** A list of parent/grand-parent ids for collapsing parent/child rows. */
-    children?: GridDataRow<R>[];
-    /** * Whether to pin this sort to the first/last of its parent's children.
-     *
-     * By default, pinned rows are always shown/not filtered out, however providing
-     * the pin `filter: true` property will allow pinned rows to be hidden
-     * while filtering.*/
-    pin?: "first" | "last" | Pin;
-    data: unknown;
-    /** Whether to have the row collapsed (children not visible) on initial load. This will be ignore in subsequent re-renders of the table */
-    initCollapsed?: boolean;
-    /** Whether to have the row selected on initial load. This will be ignore in subsequent re-renders of the table */
-    initSelected?: boolean;
-    /** Whether row can be selected */
-    selectable?: false;
-} & IfAny<R, {}, DiscriminateUnion<R, "kind", R["kind"]>>;
-/**
- * Used to indicate where to pin the DataRow and if whether it should be filtered or always visible, setting `filter` to `true` will hide this row
- * if it doesn't match the provided filtering search term
- */
-export declare type Pin = {
-    at: "first" | "last";
-    filter?: boolean;
-};
-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. */
-export declare function applyRowFn<R extends Kinded>(column: GridColumn<R>, row: GridDataRow<R>, api: GridTableApi<R>, level: number): ReactNode | GridCellContent;
-export declare function matchesFilter(maybeContent: ReactNode | GridCellContent, filter: string): boolean;
-export {};
+export declare function filterRows<R extends Kinded>(api: GridTableApi<R>, columns: GridColumn<R>[], rows: GridDataRow<R>[], filter: string | undefined): ParentChildrenTuple<R>[];