@marinoscar/platform-web 0.1.0-next.3 → 0.1.0-next.4

package/dist/datatable/ui/desktop/cells.d.ts

@@ -0,0 +1,48 @@
+/**
+ * DataTable — shared desktop cell primitives.
+ *
+ * Kept separate from `columnAdapter.ts` so that file can stay a pure,
+ * JSX-free mapping module (it builds elements with `createElement`).
+ */
+import type { ReactNode } from 'react';
+/**
+ * Props of {@link TruncatedCell}.
+ *
+ * @stability experimental
+ */
+export interface TruncatedCellProps {
+    /** Full text revealed on hover/focus. Omitted when there is nothing to reveal. */
+    title?: string;
+    /** The cell content. */
+    children: ReactNode;
+}
+/**
+ * Single-line cell that clips overflowing content with an ellipsis and reveals
+ * the full value in a tooltip. Used for any column declaring `truncate: true`.
+ *
+ * The tooltip is what "expand" means on desktop: the row height stays fixed
+ * (which is what keeps a wide table scannable) and the full value is one hover
+ * or keyboard focus away.
+ *
+ * @stability experimental
+ */
+export declare function TruncatedCell({ title, children }: TruncatedCellProps): import("react").JSX.Element;
+/**
+ * The grid's empty-state overlay.
+ *
+ * @returns the overlay element.
+ *
+ * @stability experimental
+ */
+export declare function DataTableEmptyOverlay({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * The grid's loading overlay.
+ *
+ * @returns the overlay element.
+ *
+ * @stability experimental
+ */
+export declare function DataTableLoadingOverlay(): import("react").JSX.Element;
+//# sourceMappingURL=cells.d.ts.map

package/dist/datatable/ui/desktop/cells.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cells.d.ts","sourceRoot":"","sources":["../../../../src/datatable/ui/desktop/cells.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,kFAAkF;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BAqBpE;AAMD;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAoB3E;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,gCAwBtC"}

package/dist/datatable/ui/desktop/cells.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Tooltip, Typography, CircularProgress } from '@mui/material';
+/**
+ * Single-line cell that clips overflowing content with an ellipsis and reveals
+ * the full value in a tooltip. Used for any column declaring `truncate: true`.
+ *
+ * The tooltip is what "expand" means on desktop: the row height stays fixed
+ * (which is what keeps a wide table scannable) and the full value is one hover
+ * or keyboard focus away.
+ *
+ * @stability experimental
+ */
+export function TruncatedCell({ title, children }) {
+    const hasTitle = typeof title === 'string' && title.length > 0;
+    return (_jsx(Tooltip, { title: hasTitle ? title : '', enterDelay: 400, disableHoverListener: !hasTitle, children: _jsx(Box, { component: "span", "data-testid": "datatable-truncated-cell", tabIndex: hasTitle ? 0 : -1, sx: {
+                display: 'block',
+                width: '100%',
+                minWidth: 0,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+            }, children: children }) }));
+}
+// ---------------------------------------------------------------------------
+// Overlays
+// ---------------------------------------------------------------------------
+/**
+ * The grid's empty-state overlay.
+ *
+ * @returns the overlay element.
+ *
+ * @stability experimental
+ */
+export function DataTableEmptyOverlay({ children }) {
+    return (_jsx(Box, { "data-testid": "datatable-empty-overlay", sx: {
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            p: 3,
+            textAlign: 'center',
+        }, children: children ?? (_jsx(Typography, { variant: "body2", color: "text.secondary", children: "No results" })) }));
+}
+/**
+ * The grid's loading overlay.
+ *
+ * @returns the overlay element.
+ *
+ * @stability experimental
+ */
+export function DataTableLoadingOverlay() {
+    return (_jsxs(Box, { "data-testid": "datatable-loading-overlay", role: "status", "aria-live": "polite", "aria-label": "Loading", sx: {
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 1.5,
+            // Sits on top of any already-rendered rows.
+            bgcolor: (theme) => theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.45)' : 'rgba(255, 255, 255, 0.6)',
+        }, children: [_jsx(CircularProgress, { size: 24 }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: "Loading\u2026" })] }));
+}
+//# sourceMappingURL=cells.js.map

package/dist/datatable/ui/desktop/cells.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cells.js","sourceRoot":"","sources":["../../../../src/datatable/ui/desktop/cells.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAkB3E;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAsB;IACnE,MAAM,QAAQ,GAAG,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/D,OAAO,CACL,KAAC,OAAO,IAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,oBAAoB,EAAE,CAAC,QAAQ,YACrF,KAAC,GAAG,IACF,SAAS,EAAC,MAAM,iBACJ,0BAA0B,EACtC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,EAAE,EAAE;gBACF,OAAO,EAAE,OAAO;gBAChB,KAAK,EAAE,MAAM;gBACb,QAAQ,EAAE,CAAC;gBACX,QAAQ,EAAE,QAAQ;gBAClB,YAAY,EAAE,UAAU;gBACxB,UAAU,EAAE,QAAQ;aACrB,YAEA,QAAQ,GACL,GACE,CACX,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,WAAW;AACX,8EAA8E;AAE9E;;;;;;GAMG;AACH,MAAM,UAAU,qBAAqB,CAAC,EAAE,QAAQ,EAA4B;IAC1E,OAAO,CACL,KAAC,GAAG,mBACU,yBAAyB,EACrC,EAAE,EAAE;YACF,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,CAAC,EAAE,CAAC;YACJ,SAAS,EAAE,QAAQ;SACpB,YAEA,QAAQ,IAAI,CACX,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,gBAAgB,2BAErC,CACd,GACG,CACP,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,uBAAuB;IACrC,OAAO,CACL,MAAC,GAAG,mBACU,2BAA2B,EACvC,IAAI,EAAC,QAAQ,eACH,QAAQ,gBACP,SAAS,EACpB,EAAE,EAAE;YACF,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,GAAG,EAAE,GAAG;YACR,4CAA4C;YAC5C,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CACjB,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,0BAA0B;SACrF,aAED,KAAC,gBAAgB,IAAC,IAAI,EAAE,EAAE,GAAI,EAC9B,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,gBAAgB,8BAErC,IACT,CACP,CAAC;AACJ,CAAC"}

package/dist/datatable/ui/desktop/columnAdapter.d.ts

@@ -0,0 +1,67 @@
+/**
+ * DataTable — desktop column adapter.
+ *
+ * Maps the renderer-agnostic {@link DataTableColumn} contract onto MUI X
+ * `GridColDef`. This is the ONLY place that knows about DataGrid's column
+ * shape: the mobile card renderer (#253) reads the same `DataTableColumn`
+ * objects directly and never sees a `GridColDef`.
+ *
+ * Deliberately JSX-free (`createElement`) so it stays a `.ts` mapping module —
+ * cell components live in `./cells.tsx`.
+ */
+import type { GridColDef, GridColumnVisibilityModel } from '@mui/x-data-grid';
+import type { DataTableColumn } from '../../headless/types.js';
+/**
+ * Minimum width applied to a flexing column that declares no `minWidth`.
+ *
+ * @stability experimental
+ */
+export declare const DEFAULT_COLUMN_MIN_WIDTH = 120;
+/**
+ * Map one {@link DataTableColumn} to a `GridColDef`.
+ *
+ * Notable mapping decisions:
+ * - `render` becomes `renderCell`, `value` becomes `valueGetter`, so DataGrid's
+ *   own machinery (sort indicators, aria, copy-to-clipboard) sees the scalar
+ *   while the user sees the rich cell.
+ * - `sortable` defaults to **false**. Sorting is server-side, so an interactive
+ *   header that nobody wired up would silently do nothing.
+ * - `filterable` is hard-set to `false` on the grid side: DataGrid's built-in
+ *   filtering is client-side and would only ever filter the current page. The
+ *   `DataTableColumn.filterable` declaration is consumed by the server-backed
+ *   filter UI in issue #254.
+ *
+ * @stability experimental
+ */
+export declare function toGridColDef<Row>(column: DataTableColumn<Row>): GridColDef;
+/**
+ * Map a whole column set, preserving declaration order.
+ *
+ * @stability experimental
+ */
+export declare function toGridColumns<Row>(columns: DataTableColumn<Row>[]): GridColDef[];
+/**
+ * Column visibility for the grid.
+ *
+ * Two modes, and the difference is which question has already been answered:
+ *
+ * - `hideDetailColumns` — the LAYOUT baseline derived from `priority`: `detail`
+ *   columns fold away once the grid is too narrow to show everything
+ *   comfortably (they stay reachable through the row expander), while
+ *   `primary`/`secondary` always stay.
+ * - `visibleColumns` — the USER's persisted choice (#255), layout-independent.
+ *   Omitted means "the user has hidden nothing", which is what a renderer used
+ *   directly, outside `DataTable`, gets.
+ *
+ * The two are AND-ed, never overridden one by the other. A user's "hide this"
+ * must win at every width; the tablet fold must survive a stored layout made on
+ * a desktop, or a `detail` column marked visible there would reintroduce at
+ * 800px exactly the horizontal scroll the fold exists to remove.
+ *
+ * @stability experimental
+ */
+export declare function buildColumnVisibilityModel<Row>(columns: DataTableColumn<Row>[], options: {
+    hideDetailColumns: boolean;
+    visibleColumns?: ReadonlySet<string>;
+}): GridColumnVisibilityModel;
+//# sourceMappingURL=columnAdapter.d.ts.map

package/dist/datatable/ui/desktop/columnAdapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnAdapter.d.ts","sourceRoot":"","sources":["../../../../src/datatable/ui/desktop/columnAdapter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,OAAO,KAAK,EAAE,UAAU,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAC9E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAI/D;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAK5C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,eAAe,CAAC,GAAG,CAAC,GAAG,UAAU,CAyC1E;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,OAAO,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,GAAG,UAAU,EAAE,CAEhF;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,0BAA0B,CAAC,GAAG,EAC5C,OAAO,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,EAC/B,OAAO,EAAE;IAAE,iBAAiB,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;CAAE,GAC5E,yBAAyB,CAQ3B"}

package/dist/datatable/ui/desktop/columnAdapter.js

@@ -0,0 +1,116 @@
+/**
+ * DataTable — desktop column adapter.
+ *
+ * Maps the renderer-agnostic {@link DataTableColumn} contract onto MUI X
+ * `GridColDef`. This is the ONLY place that knows about DataGrid's column
+ * shape: the mobile card renderer (#253) reads the same `DataTableColumn`
+ * objects directly and never sees a `GridColDef`.
+ *
+ * Deliberately JSX-free (`createElement`) so it stays a `.ts` mapping module —
+ * cell components live in `./cells.tsx`.
+ */
+import { createElement } from 'react';
+import { extractColumnValue, formatColumnValue } from '../../headless/columns.js';
+import { TruncatedCell } from './cells.js';
+/**
+ * Minimum width applied to a flexing column that declares no `minWidth`.
+ *
+ * @stability experimental
+ */
+export const DEFAULT_COLUMN_MIN_WIDTH = 120;
+/** @deprecated internal alias kept for readability inside this module. */
+const displayText = formatColumnValue;
+/**
+ * Map one {@link DataTableColumn} to a `GridColDef`.
+ *
+ * Notable mapping decisions:
+ * - `render` becomes `renderCell`, `value` becomes `valueGetter`, so DataGrid's
+ *   own machinery (sort indicators, aria, copy-to-clipboard) sees the scalar
+ *   while the user sees the rich cell.
+ * - `sortable` defaults to **false**. Sorting is server-side, so an interactive
+ *   header that nobody wired up would silently do nothing.
+ * - `filterable` is hard-set to `false` on the grid side: DataGrid's built-in
+ *   filtering is client-side and would only ever filter the current page. The
+ *   `DataTableColumn.filterable` declaration is consumed by the server-backed
+ *   filter UI in issue #254.
+ *
+ * @stability experimental
+ */
+export function toGridColDef(column) {
+    const align = column.align ?? 'left';
+    const def = {
+        field: column.id,
+        headerName: column.label,
+        align,
+        headerAlign: align,
+        sortable: column.sortable ?? false,
+        hideable: column.hideable ?? true,
+        // Grid-side (client) filtering is intentionally off — see #254.
+        filterable: false,
+        disableColumnMenu: true,
+        valueGetter: (_value, row) => extractColumnValue(column, row),
+    };
+    // Sizing: an explicit width wins; otherwise the column flexes.
+    if (column.width != null) {
+        def.width = column.width;
+        if (column.minWidth != null)
+            def.minWidth = column.minWidth;
+    }
+    else {
+        def.flex = column.flex ?? 1;
+        def.minWidth = column.minWidth ?? DEFAULT_COLUMN_MIN_WIDTH;
+    }
+    const needsCustomCell = Boolean(column.render) || Boolean(column.truncate);
+    if (needsCustomCell) {
+        def.renderCell = (params) => {
+            const row = params.row;
+            const scalar = extractColumnValue(column, row);
+            const content = column.render ? column.render(row) : displayText(scalar);
+            if (!column.truncate)
+                return content;
+            return createElement(TruncatedCell, {
+                title: scalar === null ? undefined : String(scalar),
+                children: content,
+            });
+        };
+    }
+    return def;
+}
+/**
+ * Map a whole column set, preserving declaration order.
+ *
+ * @stability experimental
+ */
+export function toGridColumns(columns) {
+    return columns.map((column) => toGridColDef(column));
+}
+/**
+ * Column visibility for the grid.
+ *
+ * Two modes, and the difference is which question has already been answered:
+ *
+ * - `hideDetailColumns` — the LAYOUT baseline derived from `priority`: `detail`
+ *   columns fold away once the grid is too narrow to show everything
+ *   comfortably (they stay reachable through the row expander), while
+ *   `primary`/`secondary` always stay.
+ * - `visibleColumns` — the USER's persisted choice (#255), layout-independent.
+ *   Omitted means "the user has hidden nothing", which is what a renderer used
+ *   directly, outside `DataTable`, gets.
+ *
+ * The two are AND-ed, never overridden one by the other. A user's "hide this"
+ * must win at every width; the tablet fold must survive a stored layout made on
+ * a desktop, or a `detail` column marked visible there would reintroduce at
+ * 800px exactly the horizontal scroll the fold exists to remove.
+ *
+ * @stability experimental
+ */
+export function buildColumnVisibilityModel(columns, options) {
+    const model = {};
+    for (const column of columns) {
+        const layoutShows = !(options.hideDetailColumns && column.priority === 'detail');
+        const userShows = options.visibleColumns ? options.visibleColumns.has(column.id) : true;
+        model[column.id] = layoutShows && userShows;
+    }
+    return model;
+}
+//# sourceMappingURL=columnAdapter.js.map

package/dist/datatable/ui/desktop/columnAdapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnAdapter.js","sourceRoot":"","sources":["../../../../src/datatable/ui/desktop/columnAdapter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAClF,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C;;;;GAIG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAC;AAE5C,0EAA0E;AAC1E,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAEtC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,YAAY,CAAM,MAA4B;IAC5D,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC;IAErC,MAAM,GAAG,GAAe;QACtB,KAAK,EAAE,MAAM,CAAC,EAAE;QAChB,UAAU,EAAE,MAAM,CAAC,KAAK;QACxB,KAAK;QACL,WAAW,EAAE,KAAK;QAClB,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAI,KAAK;QAClC,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAI,IAAI;QACjC,gEAAgE;QAChE,UAAU,EAAE,KAAK;QACjB,iBAAiB,EAAE,IAAI;QACvB,WAAW,EAAE,CAAC,MAAe,EAAE,GAAY,EAAE,EAAE,CAC7C,kBAAkB,CAAC,MAAM,EAAE,GAAU,CAAC;KACzC,CAAC;IAEF,+DAA+D;IAC/D,IAAI,MAAM,CAAC,KAAK,IAAI,IAAI,EAAE,CAAC;QACzB,GAAG,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QACzB,IAAI,MAAM,CAAC,QAAQ,IAAI,IAAI;YAAE,GAAG,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;IAC9D,CAAC;SAAM,CAAC;QACN,GAAG,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC;QAC5B,GAAG,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,IAAI,wBAAwB,CAAC;IAC7D,CAAC;IAED,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC3E,IAAI,eAAe,EAAE,CAAC;QACpB,GAAG,CAAC,UAAU,GAAG,CAAC,MAAM,EAAE,EAAE;YAC1B,MAAM,GAAG,GAAG,MAAM,CAAC,GAAU,CAAC;YAC9B,MAAM,MAAM,GAAG,kBAAkB,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YAC/C,MAAM,OAAO,GAAc,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;YACpF,IAAI,CAAC,MAAM,CAAC,QAAQ;gBAAE,OAAO,OAAO,CAAC;YACrC,OAAO,aAAa,CAAC,aAAa,EAAE;gBAClC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC;gBACnD,QAAQ,EAAE,OAAO;aAClB,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC;IAED,OAAO,GAAG,CAAC;AACb,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAAM,OAA+B;IAChE,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;AACvD,CAAC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,0BAA0B,CACxC,OAA+B,EAC/B,OAA6E;IAE7E,MAAM,KAAK,GAA8B,EAAE,CAAC;IAC5C,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;QAC7B,MAAM,WAAW,GAAG,CAAC,CAAC,OAAO,CAAC,iBAAiB,IAAI,MAAM,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC;QACjF,MAAM,SAAS,GAAG,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACxF,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,WAAW,IAAI,SAAS,CAAC;IAC9C,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC"}

package/dist/datatable/ui/desktop/detailRow.d.ts

@@ -0,0 +1,110 @@
+/**
+ * DataTable — tablet row expansion.
+ *
+ * The intermediate case, and the one that is easiest to skip: between the
+ * mobile and desktop breakpoints the grid is still the right control (rows are
+ * scannable at 800px in a way cards are not), but it cannot show every column,
+ * so `detail`-priority columns fold away. Folding them away with no way back
+ * makes them *unreachable* rather than *deprioritised* — which is a data-loss
+ * bug dressed up as responsive design.
+ *
+ * ## Why synthetic rows rather than a detail panel
+ *
+ * MUI X's `getDetailPanelContent` is declared on the community `DataGrid`'s
+ * prop types but is **not implemented** in the MIT package (grep the built
+ * package: the only occurrence is in `propTypes`). It is a Pro feature.
+ *
+ * So expansion is built from two primitives the MIT grid *does* implement:
+ *
+ *   1. A synthetic row is spliced in directly after its parent when that
+ *      parent is expanded. It carries the parent row on a symbol-ish key so
+ *      nothing in the caller's `Row` type can collide with it.
+ *   2. The leading expander column declares `colSpan` covering every visible
+ *      column for that synthetic row, so one cell renders the whole panel.
+ *
+ * `paginationMode="server"` is what makes this safe: the grid never slices the
+ * `rows` array in server mode (`gridPaginationRowRangeSelector` short-circuits
+ * unless client-side pagination is enabled), so injecting a row cannot push a
+ * real row onto a phantom next page.
+ */
+import type { DataTableColumn } from '../../headless/types.js';
+/**
+ * Field name of the synthetic leading expander column.
+ *
+ * @stability experimental
+ */
+export declare const EXPANDER_FIELD = "__datatable_expander__";
+/**
+ * Class applied to a synthetic detail row.
+ *
+ * Used to suppress the grid's own selection checkbox on that row. `colSpan`
+ * only ever spans *forward*, and DataGrid injects `__check__` ahead of every
+ * user column, so the one cell the panel cannot absorb has to be dealt with in
+ * CSS. It is removed with `display: none` — not `opacity: 0` — precisely so it
+ * leaves the accessibility tree and stops being hit-testable, rather than
+ * becoming the invisible-but-tappable control issue #243 was filed about.
+ */
+export declare const DETAIL_ROW_CLASS = "datatable-detail-row";
+/** Key marking a synthetic detail row; also holds the parent's row id. */
+export declare const DETAIL_ROW_KEY = "__datatableDetailFor";
+/** Key holding the parent row object on a synthetic detail row. */
+export declare const DETAIL_ROW_SOURCE = "__datatableDetailSource";
+/**
+ * The synthetic grid row that holds an expanded row's detail panel.
+ *
+ * @stability experimental
+ */
+export interface DetailRow<Row> {
+    /** The id of the row this panel belongs to. */
+    [DETAIL_ROW_KEY]: string;
+    /** The row this panel belongs to. */
+    [DETAIL_ROW_SOURCE]: Row;
+}
+/**
+ * Whether a grid row is the synthetic row that holds an expanded row's detail panel.
+ *
+ * @param row - a grid row.
+ * @returns `true` for a detail row.
+ *
+ * @stability experimental
+ */
+export declare function isDetailRow<Row>(row: unknown): row is DetailRow<Row>;
+export declare function makeDetailRow<Row>(parentId: string, row: Row): DetailRow<Row>;
+/**
+ * The grid row id for a synthetic detail row — namespaced so it cannot clash.
+ *
+ * @stability experimental
+ */
+export declare function detailRowId(parentId: string): string;
+/**
+ * Row height for an expanded detail row.
+ *
+ * Computed rather than `getRowHeight: () => 'auto'` on purpose: auto-height
+ * rows depend on a measurement pass, and a panel that measures 0px in a
+ * layout-free environment (jsdom, a `display: none` ancestor) would clip its
+ * own content. An arithmetic height is deterministic everywhere, and the panel
+ * scrolls internally if a value is longer than the estimate.
+ *
+ * @stability experimental
+ */
+export declare function detailRowHeight(fieldCount: number): number;
+/**
+ * Props of {@link DetailRowPanel}.
+ *
+ * @stability experimental
+ */
+export interface DetailRowPanelProps<Row> {
+    /** The row whose details to draw. */
+    row: Row;
+    /** The columns to draw in the panel. */
+    columns: DataTableColumn<Row>[];
+}
+/**
+ * The expanded region's content: the hidden `detail` columns as label/value
+ * pairs, in declaration order — the same shape the card renderer's collapsed
+ * region uses, so a value looks the same wherever it was folded away to.
+ *
+ * @stability experimental
+ */
+export declare function DetailRowPanel<Row>({ row, columns }: DetailRowPanelProps<Row>): import("react").JSX.Element;
+//# sourceMappingURL=detailRow.d.ts.map

package/dist/datatable/ui/desktop/detailRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detailRow.d.ts","sourceRoot":"","sources":["../../../../src/datatable/ui/desktop/detailRow.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAIH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG/D;;;;GAIG;AACH,eAAO,MAAM,cAAc,2BAA2B,CAAC;AAEvD;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,yBAAyB,CAAC;AAEvD,0EAA0E;AAC1E,eAAO,MAAM,cAAc,yBAAyB,CAAC;AACrD,mEAAmE;AACnE,eAAO,MAAM,iBAAiB,4BAA4B,CAAC;AAE3D;;;;GAIG;AACH,MAAM,WAAW,SAAS,CAAC,GAAG;IAC5B,+CAA+C;IAC/C,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IACzB,qCAAqC;IACrC,CAAC,iBAAiB,CAAC,EAAE,GAAG,CAAC;CAC1B;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,SAAS,CAAC,GAAG,CAAC,CAMpE;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,SAAS,CAAC,GAAG,CAAC,CAE7E;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAEpD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAI1D;AAED;;;;GAIG;AACH,MAAM,WAAW,mBAAmB,CAAC,GAAG;IACtC,qCAAqC;IACrC,GAAG,EAAE,GAAG,CAAC;IACT,wCAAwC;IACxC,OAAO,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;CACjC;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,mBAAmB,CAAC,GAAG,CAAC,+BA2C7E"}

package/dist/datatable/ui/desktop/detailRow.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Stack, Typography } from '@mui/material';
+import { extractColumnValue, formatColumnValue } from '../../headless/columns.js';
+/**
+ * Field name of the synthetic leading expander column.
+ *
+ * @stability experimental
+ */
+export const EXPANDER_FIELD = '__datatable_expander__';
+/**
+ * Class applied to a synthetic detail row.
+ *
+ * Used to suppress the grid's own selection checkbox on that row. `colSpan`
+ * only ever spans *forward*, and DataGrid injects `__check__` ahead of every
+ * user column, so the one cell the panel cannot absorb has to be dealt with in
+ * CSS. It is removed with `display: none` — not `opacity: 0` — precisely so it
+ * leaves the accessibility tree and stops being hit-testable, rather than
+ * becoming the invisible-but-tappable control issue #243 was filed about.
+ */
+export const DETAIL_ROW_CLASS = 'datatable-detail-row';
+/** Key marking a synthetic detail row; also holds the parent's row id. */
+export const DETAIL_ROW_KEY = '__datatableDetailFor';
+/** Key holding the parent row object on a synthetic detail row. */
+export const DETAIL_ROW_SOURCE = '__datatableDetailSource';
+/**
+ * Whether a grid row is the synthetic row that holds an expanded row's detail panel.
+ *
+ * @param row - a grid row.
+ * @returns `true` for a detail row.
+ *
+ * @stability experimental
+ */
+export function isDetailRow(row) {
+    return (typeof row === 'object' &&
+        row !== null &&
+        typeof row[DETAIL_ROW_KEY] === 'string');
+}
+export function makeDetailRow(parentId, row) {
+    return { [DETAIL_ROW_KEY]: parentId, [DETAIL_ROW_SOURCE]: row };
+}
+/**
+ * The grid row id for a synthetic detail row — namespaced so it cannot clash.
+ *
+ * @stability experimental
+ */
+export function detailRowId(parentId) {
+    return `__datatable_detail__${parentId}`;
+}
+/**
+ * Row height for an expanded detail row.
+ *
+ * Computed rather than `getRowHeight: () => 'auto'` on purpose: auto-height
+ * rows depend on a measurement pass, and a panel that measures 0px in a
+ * layout-free environment (jsdom, a `display: none` ancestor) would clip its
+ * own content. An arithmetic height is deterministic everywhere, and the panel
+ * scrolls internally if a value is longer than the estimate.
+ *
+ * @stability experimental
+ */
+export function detailRowHeight(fieldCount) {
+    const HEADER_AND_PADDING = 24;
+    const PER_FIELD = 46;
+    return HEADER_AND_PADDING + Math.max(1, fieldCount) * PER_FIELD;
+}
+/**
+ * The expanded region's content: the hidden `detail` columns as label/value
+ * pairs, in declaration order — the same shape the card renderer's collapsed
+ * region uses, so a value looks the same wherever it was folded away to.
+ *
+ * @stability experimental
+ */
+export function DetailRowPanel({ row, columns }) {
+    return (_jsx(Box, { "data-testid": "datatable-row-detail-panel", sx: {
+            width: '100%',
+            height: '100%',
+            minWidth: 0,
+            overflow: 'auto',
+            px: 2,
+            py: 1.5,
+            bgcolor: (theme) => theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.04)' : 'rgba(0, 0, 0, 0.025)',
+        }, children: _jsx(Stack, { spacing: 1.25, sx: { minWidth: 0 }, children: columns.map((column) => {
+                const content = column.render
+                    ? column.render(row)
+                    : formatColumnValue(extractColumnValue(column, row));
+                return (_jsxs(Box, { "data-testid": `datatable-detail-field-${column.id}`, sx: { minWidth: 0 }, children: [_jsx(Typography, { variant: "caption", component: "div", color: "text.secondary", sx: { fontWeight: 600 }, children: column.label }), _jsx(Typography, { variant: "body2", component: "div", sx: { minWidth: 0, overflowWrap: 'anywhere' }, children: content })] }, column.id));
+            }) }) }));
+}
+//# sourceMappingURL=detailRow.js.map

package/dist/datatable/ui/desktop/detailRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"detailRow.js","sourceRoot":"","sources":["../../../../src/datatable/ui/desktop/detailRow.tsx"],"names":[],"mappings":"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"}

package/dist/datatable/ui/export/DataTableExportControl.d.ts

@@ -0,0 +1,64 @@
+/**
+ * DataTable — the CSV export control (issue #256, epic #238).
+ *
+ * Lives in the view bar next to the column picker and the density toggle, for
+ * the same reason those do: its SHAPE is decided by the layout, not by how
+ * rows are presented.
+ *
+ * | layout    | surface                                                        |
+ * | --------- | -------------------------------------------------------------- |
+ * | `desktop` | an "Export" button — a menu when an all-rows fetch is supplied  |
+ * | `tablet`  | identical                                                       |
+ * | `mobile`  | a `MoreVert` **overflow menu** ("Table actions")                |
+ *
+ * The phone gets an overflow menu rather than a third button because the view
+ * bar there already holds "View" and the filter surface's "Filters"; a fourth
+ * labelled control at 360px is what pushes a row into a horizontal scroller.
+ *
+ * ## Two scopes, one of them optional
+ *
+ * - **Current page** — always available. Serializes the rows the table was
+ *   handed, which are already filtered/sorted/paginated by the server.
+ * - **All matching rows** — only when the page supplies `fetchAllRows`. The
+ *   component cannot know the endpoint, so it replays the page's OWN callback
+ *   with the page's OWN active filters, bounded at
+ *   {@link DATA_TABLE_EXPORT_MAX_ROWS} and cancellable.
+ *
+ * Neither scope ever re-queries with elevated access: the second one is the
+ * first one's fetch, run more times.
+ *
+ * Touch rules apply as everywhere else: ≥44px, nothing hover-revealed,
+ * and the menu/dialog are mounted only while open.
+ */
+import type { DataTableColumn, DataTableExportConfig, DataTableLayout } from '../../headless/types.js';
+/**
+ * Props of {@link DataTableExportControl}.
+ *
+ * @stability experimental
+ */
+export interface DataTableExportControlProps<Row> {
+    /** The resolved layout. */
+    layout: DataTableLayout;
+    /** The table's columns. */
+    columns: DataTableColumn<Row>[];
+    /** The currently loaded page of rows. */
+    rows: Row[];
+    /** The user's resolved column visibility (#255), layout-independent. */
+    visibleColumnIds?: ReadonlySet<string>;
+    /** The export config of the table. */
+    config?: DataTableExportConfig<Row>;
+    /** Seed for the download filename — the page's `tableId` or `ariaLabel`. */
+    filenameBase?: string;
+    /** Total matching rows, when the page knows it. Drives the progress bar. */
+    total?: number;
+}
+/**
+ * The CSV export control: export the rows on screen, or every row the server holds.
+ *
+ * @param props - the columns, the export config and the layout.
+ * @returns the control element.
+ *
+ * @stability experimental
+ */
+export declare function DataTableExportControl<Row>({ layout, columns, rows, visibleColumnIds, config, filenameBase, total, }: DataTableExportControlProps<Row>): import("react").JSX.Element;
+//# sourceMappingURL=DataTableExportControl.d.ts.map

package/dist/datatable/ui/export/DataTableExportControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableExportControl.d.ts","sourceRoot":"","sources":["../../../../src/datatable/ui/export/DataTableExportControl.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAuBH,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAsBvG;;;;GAIG;AACH,MAAM,WAAW,2BAA2B,CAAC,GAAG;IAC9C,2BAA2B;IAC3B,MAAM,EAAE,eAAe,CAAC;IACxB,2BAA2B;IAC3B,OAAO,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;IAChC,yCAAyC;IACzC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,sCAAsC;IACtC,MAAM,CAAC,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAC;IACpC,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,GAAG,EAAE,EAC1C,MAAM,EACN,OAAO,EACP,IAAI,EACJ,gBAAgB,EAChB,MAAM,EACN,YAAY,EACZ,KAAK,GACN,EAAE,2BAA2B,CAAC,GAAG,CAAC,+BA0NlC"}