@homebound/beam 2.362.2 → 2.364.0

package/dist/components/Modal/TestModalContent.d.ts

@@ -4,6 +4,7 @@ export interface TestModalContentProps {
     withTag?: boolean;
     withDateField?: boolean;
     withTextArea?: boolean;
+    withTextField?: boolean;
 }
 /** A fake modal content component that we share across the modal and superdrawer stories. */
 export declare function TestModalContent(props: TestModalContentProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Modal/TestModalContent.js

@@ -24,7 +24,7 @@ function TestModalContent(props) {
     const [date, setDate] = (0, react_1.useState)(formStateDomain_1.jan1);
     const [internalValue, setValue] = (0, react_1.useState)("");
     const { triggerNotice } = (0, Snackbar_1.useSnackbar)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: props.withTag ? ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.aic.$, children: [(0, jsx_runtime_1.jsx)("span", { children: "Modal Title with Tag" }), (0, jsx_runtime_1.jsx)(Tag_1.Tag, { text: "In progress", type: "info", xss: Css_1.Css.ml1.$ })] })) : props.withTextArea ? ((0, jsx_runtime_1.jsx)(inputs_1.TextAreaField, { label: "Title", placeholder: "Test title", value: internalValue, onChange: (v) => setValue(v), preventNewLines: true, labelStyle: "hidden", borderless: true, xss: Css_1.Css.xl.$ })) : ("The title of the modal that might wrap") }), (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.fdc.aifs.$, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "More", onClick: () => setNumSentences(numSentences + 2) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: () => setNumSentences(0) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Primary", onClick: () => setPrimaryDisabled(!primaryDisabled) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Trigger Snackbar", onClick: () => triggerNotice({ message: "Snackbar message" }) }), showLeftAction && ((0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Left Action", onClick: () => setLeftActionDisabled(!leftActionDisabled) }))] }), (0, jsx_runtime_1.jsx)("p", { children: "The body content of the modal. This content can be anything!".repeat(numSentences) })] }), withDateField && (0, jsx_runtime_1.jsx)(inputs_1.DateField, { value: date, label: "Date", onChange: setDate })] }), (0, jsx_runtime_1.jsxs)(Modal_1.ModalFooter, { xss: showLeftAction ? Css_1.Css.jcsb.$ : undefined, children: [showLeftAction && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: (0, addon_actions_1.action)("Clear Action"), variant: "tertiary", disabled: leftActionDisabled }) })), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", onClick: closeModal, variant: "tertiary" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Apply", onClick: (0, addon_actions_1.action)("Primary action"), disabled: primaryDisabled })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalHeader, { children: props.withTag ? ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.aic.$, children: [(0, jsx_runtime_1.jsx)("span", { children: "Modal Title with Tag" }), (0, jsx_runtime_1.jsx)(Tag_1.Tag, { text: "In progress", type: "info", xss: Css_1.Css.ml1.$ })] })) : props.withTextField ? ((0, jsx_runtime_1.jsx)(inputs_1.TextField, { label: "Title", placeholder: "Test title", value: internalValue, onChange: (v) => setValue(v), labelStyle: "hidden", onEscapeBubble: true, borderless: true, xss: Css_1.Css.xl.$ })) : props.withTextArea ? ((0, jsx_runtime_1.jsx)(inputs_1.TextAreaField, { label: "Title", placeholder: "Test title", value: internalValue, onChange: (v) => setValue(v), preventNewLines: true, labelStyle: "hidden", borderless: true, xss: Css_1.Css.xl.$ })) : ("The title of the modal that might wrap") }), (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.fdc.aifs.$, children: [(0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "More", onClick: () => setNumSentences(numSentences + 2) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: () => setNumSentences(0) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Primary", onClick: () => setPrimaryDisabled(!primaryDisabled) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Trigger Snackbar", onClick: () => triggerNotice({ message: "Snackbar message" }) }), showLeftAction && ((0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Left Action", onClick: () => setLeftActionDisabled(!leftActionDisabled) }))] }), (0, jsx_runtime_1.jsx)("p", { children: "The body content of the modal. This content can be anything!".repeat(numSentences) })] }), withDateField && (0, jsx_runtime_1.jsx)(inputs_1.DateField, { value: date, label: "Date", onChange: setDate })] }), (0, jsx_runtime_1.jsxs)(Modal_1.ModalFooter, { xss: showLeftAction ? Css_1.Css.jcsb.$ : undefined, children: [showLeftAction && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Clear", onClick: (0, addon_actions_1.action)("Clear Action"), variant: "tertiary", disabled: leftActionDisabled }) })), (0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.gap1.$, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Cancel", onClick: closeModal, variant: "tertiary" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { label: "Apply", onClick: (0, addon_actions_1.action)("Primary action"), disabled: primaryDisabled })] })] })] }));
 }
 exports.TestModalContent = TestModalContent;
 function TestModalFilterTable() {

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

@@ -1,6 +1,6 @@
 import { MutableRefObject } from "react";
 import { VirtuosoHandle } from "react-virtuoso";
-import { GridRowLookup } from "../index";
+import { GridRowLookup, MaybeFn } from "../index";
 import { GridDataRow } from "./components/Row";
 import { DiscriminateUnion, Kinded } from "./types";
 import { TableState } from "./utils/TableState";
@@ -51,6 +51,18 @@ export type GridTableApi<R extends Kinded> = {
     deleteRows(ids: string[]): void;
     getVisibleColumnIds(): string[];
     setVisibleColumns(ids: string[]): void;
+    /**
+     * Triggers the table's current content to be downloaded as a CSV file.
+     *
+     * This currently assumes client-side pagination/sorting, i.e. we have the full dataset in memory.
+     */
+    downloadToCsv(fileName: string): void;
+    /**
+     * Copies the table's current content to the clipboard.
+     *
+     * This currently assumes client-side pagination/sorting, i.e. we have the full dataset in memory.
+     */
+    copyToClipboard(): Promise<void>;
 };
 /** Adds per-row methods to the `api`, i.e. for getting currently-visible children. */
 export type GridRowApi<R extends Kinded> = GridTableApi<R> & {
@@ -84,4 +96,8 @@ export declare class GridTableApiImpl<R extends Kinded> implements GridTableApi<
     setVisibleColumns(ids: string[]): void;
     getVisibleColumnIds(): string[];
     deleteRows(ids: string[]): void;
+    downloadToCsv(fileName: string): void;
+    copyToClipboard(): Promise<void>;
+    generateCsvContent(): string[];
 }
+export declare function maybeApply<T>(maybeFn: MaybeFn<T>): T;

package/dist/components/Table/GridTableApi.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridTableApiImpl = exports.useGridTableApi = void 0;
+exports.maybeApply = exports.GridTableApiImpl = exports.useGridTableApi = void 0;
 const mobx_1 = require("mobx");
 const mobx_utils_1 = require("mobx-utils");
 const react_1 = require("react");
@@ -107,11 +107,84 @@ class GridTableApiImpl {
     deleteRows(ids) {
         this.tableState.deleteRows(ids);
     }
+    downloadToCsv(fileName) {
+        // Create a link element, set the download attribute with the provided filename
+        const link = document.createElement("a");
+        if (link.download === undefined)
+            throw new Error("This browser does not support the download attribute.");
+        // Create a Blob from the CSV content
+        const url = URL.createObjectURL(new Blob([this.generateCsvContent().join("\n")], { type: "text/csv;charset=utf-8;" }));
+        link.setAttribute("href", url);
+        link.setAttribute("download", fileName);
+        link.style.visibility = "hidden";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+    copyToClipboard() {
+        // Copy the CSV content to the clipboard
+        const content = this.generateCsvContent().join("\n");
+        return navigator.clipboard.writeText(content).catch((err) => {
+            // Let the user know the copy failed...
+            window.alert("Failed to copy to clipboard, probably due to browser restrictions.");
+            throw err;
+        });
+    }
+    // visibleForTesting, not part of the GridTableApi
+    // ...although maybe it could be public someday, to allow getting the raw the CSV content
+    // and then sending it somewhere else, like directly to a gsheet.
+    generateCsvContent() {
+        // Convert the array of rows into CSV format
+        return this.tableState.visibleRows.map((rs) => {
+            const values = this.tableState.visibleColumns
+                .filter((c) => !c.isAction)
+                .map((c) => {
+                // Just guessing for level=1
+                const maybeContent = (0, index_1.applyRowFn)(c, rs.row, this, 1, true, undefined);
+                if ((0, index_1.isGridCellContent)(maybeContent)) {
+                    const cell = maybeContent;
+                    const content = maybeApply(cell.content);
+                    // Anything not isJSX (like a string) we can put into the CSV directly
+                    if (!(0, index_1.isJSX)(content))
+                        return content;
+                    // Otherwise use the value/sortValue values
+                    return cell.value ? maybeApply(cell.value) : cell.sortValue ? maybeApply(cell.sortValue) : "-";
+                }
+                else {
+                    // ReactNode
+                    return (0, index_1.isJSX)(maybeContent) ? "-" : maybeContent;
+                }
+            });
+            return values.map(toCsvString).map(escapeCsvValue).join(",");
+        });
+    }
 }
 exports.GridTableApiImpl = GridTableApiImpl;
+function toCsvString(value) {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "string")
+        return value;
+    if (typeof value === "number")
+        return value.toString();
+    if (typeof value === "boolean")
+        return value ? "true" : "false";
+    return String(value);
+}
+function escapeCsvValue(value) {
+    // Wrap values with special chars in quotes, and double quotes themselves
+    if (value.includes('"') || value.includes(",") || value.includes("\n")) {
+        return `"${value.replace(/"/g, '""')}"`;
+    }
+    return value;
+}
 function bindMethods(instance) {
     Object.getOwnPropertyNames(Object.getPrototypeOf(instance)).forEach((key) => {
         if (instance[key] instanceof Function && key !== "constructor")
             instance[key] = instance[key].bind(instance);
     });
 }
+function maybeApply(maybeFn) {
+    return typeof maybeFn === "function" ? maybeFn() : maybeFn;
+}
+exports.maybeApply = maybeApply;

package/dist/components/Table/components/Row.js

@@ -119,14 +119,16 @@ function RowImpl(props) {
                 currentColspan -= 1;
                 return null;
             }
-            const maybeContent = (0, utils_1.applyRowFn)(column, row, rowApi, level, isExpanded, {
+            // Combine all our drag stuff into a mini-context/parameter object...
+            const dragData = {
                 rowRenderRef: ref,
                 onDragStart,
                 onDragEnd,
                 onDrop,
                 onDragEnter,
                 onDragOver: onDragOverDebounced,
-            });
+            };
+            const maybeContent = (0, utils_1.applyRowFn)(column, row, rowApi, level, isExpanded, dragData);
             // Only use the `numExpandedColumns` as the `colspan` when rendering the "Expandable Header"
             currentColspan =
                 (0, utils_1.isGridCellContent)(maybeContent) && typeof maybeContent.colspan === "number"

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

@@ -6,10 +6,14 @@ import { Properties, Typography } from "../../../Css";
 /**
  * Allows a cell to be more than just a RectNode, i.e. declare its alignment or
  * primitive value for filtering and sorting.
+ *
+ * For a given column, the `GridColumn` can either return a static `GridCellContent`, or
+ * more likely use a function that returns a per-column/per-row `GridCellContent` that defines
+ * the value (and it's misc alignment/css/etc) for this specific cell.
  */
 export 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);
+    content: MaybeFn<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>;

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

@@ -22,6 +22,8 @@ export declare const ASC: "ASC";
 export declare const DESC: "DESC";
 export declare const emptyCell: GridCellContent;
 export declare function getFirstOrLastCellCss<R extends Kinded>(style: GridStyle, columnIndex: number, columns: GridColumnWithId<R>[]): Properties;
+/** A heuristic to detect the result of `React.createElement` / i.e. JSX. */
+export declare function isJSX(content: any): boolean;
 export declare function getAlignment(column: GridColumnWithId<any>, maybeContent: ReactNode | GridCellContent): GridCellAlignment;
 export declare function getJustification(column: GridColumnWithId<any>, maybeContent: ReactNode | GridCellContent, as: RenderAs, alignment: GridCellAlignment): {
     textAlign: import("csstype").Property.TextAlign | undefined;

package/dist/components/Table/utils/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTableRefWidthStyles = exports.recursivelyGetContainingRow = exports.isCursorBelowMidpoint = exports.insertAtIndex = exports.loadArrayOrUndefined = exports.zIndices = exports.reservedRowKinds = exports.KEPT_GROUP = exports.EXPANDABLE_HEADER = exports.TOTALS = exports.HEADER = exports.matchesFilter = exports.maybeApplyFunction = exports.getJustification = exports.getAlignment = exports.getFirstOrLastCellCss = exports.emptyCell = exports.DESC = exports.ASC = exports.applyRowFn = exports.isGridCellContent = exports.toContent = void 0;
+exports.getTableRefWidthStyles = exports.recursivelyGetContainingRow = exports.isCursorBelowMidpoint = exports.insertAtIndex = exports.loadArrayOrUndefined = exports.zIndices = exports.reservedRowKinds = exports.KEPT_GROUP = exports.EXPANDABLE_HEADER = exports.TOTALS = exports.HEADER = exports.matchesFilter = exports.maybeApplyFunction = exports.getJustification = exports.getAlignment = exports.isJSX = exports.getFirstOrLastCellCss = exports.emptyCell = exports.DESC = exports.ASC = exports.applyRowFn = exports.isGridCellContent = exports.toContent = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Icon_1 = require("../../Icon");
 const ExpandableHeader_1 = require("../components/ExpandableHeader");
@@ -98,6 +98,7 @@ exports.getFirstOrLastCellCss = getFirstOrLastCellCss;
 function isJSX(content) {
     return typeof content === "object" && content && "type" in content && "props" in content;
 }
+exports.isJSX = isJSX;
 const alignmentToJustify = {
     left: "flex-start",
     center: "center",

package/dist/inputs/TextField.d.ts

@@ -6,6 +6,16 @@ export interface TextFieldProps<X> extends BeamTextFieldProps<X> {
     clearable?: boolean;
     api?: MutableRefObject<TextFieldApi | undefined>;
     onEnter?: VoidFunction;
+    /**
+     * Allows a TextField to opt-in to bubbling up the escape key event to its parent.
+     *
+     * Usually this is a bad idea, because escape-in-a-modal might lose the user's WIP (without
+     * sufficient "are you sure" checking), and so instead we let callers opt-in to this.
+     *
+     * Note that react-aria's `useSearchField` / `useComboBox` seems to have this built-in:
+     * https://github.com/adobe/react-spectrum/issues/5480
+     */
+    onEscapeBubble?: boolean;
     endAdornment?: ReactNode;
     startAdornment?: ReactNode;
     hideErrorMessage?: boolean;

package/dist/inputs/TextField.js

@@ -8,7 +8,7 @@ const components_1 = require("../components");
 const TextFieldBase_1 = require("./TextFieldBase");
 const utils_1 = require("../utils");
 function TextField(props) {
-    const { disabled = false, readOnly = false, required, errorMsg, value = "", onBlur, onFocus, api, onEnter, hideErrorMessage, ...otherProps } = props;
+    const { disabled = false, readOnly = false, required, errorMsg, value = "", onBlur, onFocus, api, onEnter, onEscapeBubble, hideErrorMessage, ...otherProps } = props;
     const isDisabled = !!disabled;
     const isReadOnly = !!readOnly;
     const textFieldProps = {
@@ -28,6 +28,10 @@ function TextField(props) {
                 (0, utils_1.maybeCall)(onEnter);
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
             }
+            else if (e.key === "Escape" && onEscapeBubble) {
+                // Allow closing modals from within text fields...
+                e.continuePropagation();
+            }
         },
     }, inputRef);
     // Construct our TextFieldApi to give access to some imperative methods

package/package.json

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