gridsmith-ui 0.20.0 → 0.22.0

package/dist/data-grid.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColumnDef } from '@tanstack/react-table';
-import { B as BreakpointKey, C as ColumnKind } from './table-utils-GounRE6s.js';
+import { B as BreakpointKey, C as ColumnKind } from './table-utils-BkjNEWts.js';
+import { P as Pager } from './use-pagination-DiJo0aW5.js';
 import 'react';
 
 /** Column meta for opt-in truncation. Set on ColumnDef.meta. */
@@ -19,17 +20,50 @@ interface DataGridColumnMeta {
     kind?: ColumnKind;
     /** Horizontal alignment of the header and the cells; a block element (a Checkbox, a Button) is laid out with flex so it follows too (round 14). Default: numbers right, everything else left. */
     align?: "left" | "center" | "right";
+    /** In an editable grid, whether this column's cells edit (default true); false for a column that shows (a status, actions). */
+    editable?: boolean;
+    /**
+     * In an editable grid, the value onCellEdit gets from the text typed (default the text itself): a number column's
+     * `(text) => Number(text)`, so a salary stays a number (the review of 30 September).
+     */
+    parse?: (text: string) => unknown;
 }
 interface DataGridProps<T> {
     data: T[];
     columns: ColumnDef<T, any>[];
+    /**
+     * Rows a page, over the project's (dataDisplay.itemsPerPage), for a grid the user asked to page differently. Leave it
+     * out: the grid pages as the project says, with the project's control (Sprint 25.13 A5; it was 10).
+     */
     pageSize?: number;
+    /**
+     * Cells edit in place, as the APG's grid (Sprint 25.13 A5): the grid is one Tab stop and the arrow keys move between
+     * cells; Enter or F2 (or a double-click) opens a cell's editor, Enter or leaving it saves and Escape cancels, and a
+     * brief tick, announced as "Saved", shows the save. A grid saves as you go, so it never marks a form around it.
+     */
     editable?: boolean;
-    onCellEdit?: (rowIndex: number, columnId: string, value: unknown) => void;
-    /** Breakpoint at which the grid switches to card layout. Defaults to "md" (768px). */
+    /**
+     * A saved edit: the row's index in `data`, the column's id and the new value (the text typed, or the column's
+     * `meta.parse` of it). Called only when the value changed. Return a promise to have the tick and "Saved" wait for it:
+     * a rejection is announced as "Not saved", and the page says why and keeps the old value.
+     */
+    onCellEdit?: (rowIndex: number, columnId: string, value: unknown) => void | Promise<unknown>;
+    /** The screen width below which the grid shows cards: the project's responsive.tableToCardsBreakpoint, else "md". */
     mobileBreakpoint?: BreakpointKey;
+    /**
+     * The grid's own width below which it shows cards when it doesn't fit, in px (Sprint 25.13 A35): about a phone's; 0
+     * never switches by width. An editable grid never shows cards: it stays the APG's grid, scrolling sideways.
+     */
+    cardsBelow?: number;
+    /**
+     * The list's pager (Sprint 25.13 A3), from `usePagination(data)` over the same rows: pass it when the page also shows
+     * the count (TableToolbar). Without it the grid pages itself the same way.
+     */
+    pager?: Pager<unknown>;
+    /** The grid's name for assistive tech. */
+    "aria-label"?: string;
     className?: string;
 }
-declare function DataGrid<T>({ data, columns, pageSize, editable, onCellEdit, mobileBreakpoint: mobileBreakpointProp, className, }: DataGridProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataGrid<T>({ data, columns, pageSize, editable, onCellEdit, mobileBreakpoint: mobileBreakpointProp, cardsBelow, pager: pagerProp, "aria-label": ariaLabel, className, }: DataGridProps<T>): react_jsx_runtime.JSX.Element;
 
 export { DataGrid, type DataGridColumnMeta };