@dynostack/react-grid 0.2.0 → 0.3.0

package/dist/index.d.cts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { RowData, ColumnDef, SortingState, ColumnFiltersState, ColumnPinningState, VisibilityState, Column, Table, CellContext, FilterFn } from '@tanstack/react-table';
+import { Column, RowData, ColumnDef, SortingState, ColumnFiltersState, ColumnPinningState, VisibilityState, Table, CellContext, FilterFn } from '@tanstack/react-table';
+import * as React$1 from 'react';
 import { CSSProperties } from 'react';
 
 type RowActionId = "view" | "edit" | "duplicate" | "delete" | string;
@@ -140,6 +141,57 @@ type DataTableThemeName = keyof typeof themePresets;
 declare const ISOLATE_LIGHT_TOKENS: DataTableTokens;
 declare const ISOLATE_DARK_TOKENS: DataTableTokens;
 
+type SheetSide = "right" | "left" | "top" | "bottom";
+
+type ViewSheetDensity = "compact" | "relaxed" | "comfy";
+type ViewSheetLabels = {
+    title?: (row: any) => React.ReactNode;
+    description?: (row: any) => React.ReactNode;
+    emptyValue?: string;
+    density?: {
+        compact?: string;
+        relaxed?: string;
+        comfy?: string;
+    };
+};
+type ViewSheetConfig<TData> = {
+    /** Side of the screen to slide in from. Defaults to "right". */
+    side?: SheetSide;
+    /** Initial column count. Defaults to "compact" (1 column). */
+    defaultDensity?: ViewSheetDensity;
+    /** Hide the density tabs entirely if you want a fixed layout. */
+    hideDensityTabs?: boolean;
+    /** Override how a field's value is rendered. */
+    renderField?: (args: {
+        column: Column<TData, unknown>;
+        value: unknown;
+        row: TData;
+    }) => React.ReactNode;
+    /** Custom header for the sheet. */
+    renderHeader?: (row: TData) => React.ReactNode;
+    /** Filter / reorder which columns appear. Defaults to all visible columns. */
+    fields?: string[];
+    /** Override label / placeholder strings. */
+    labels?: ViewSheetLabels;
+};
+
+type ConfirmDeleteContext<TData> = {
+    /** The rows being deleted. Single-row delete passes one row; bulk passes many. */
+    rows: TData[];
+    /** "single" when triggered from the row actions menu; "bulk" from the toolbar. */
+    source: "single" | "bulk";
+};
+type ConfirmDeleteConfig<TData> = {
+    /** Modal title. Receives the same context the resolver receives. */
+    title?: (ctx: ConfirmDeleteContext<TData>) => React.ReactNode;
+    /** Modal description / body. */
+    description?: (ctx: ConfirmDeleteContext<TData>) => React.ReactNode;
+    /** Confirm button label. Defaults to "Delete". */
+    confirmLabel?: string;
+    /** Cancel button label. Defaults to "Cancel". */
+    cancelLabel?: string;
+};
+
 type CellEditorType = "text" | "number" | "currency" | "date" | "select" | "switch" | "checkbox";
 type FilterType = "text" | "number" | "select" | "multi-select" | "boolean" | "date";
 type SelectOption = {
@@ -269,6 +321,30 @@ type DataTableProps<TData extends {
     rowActions?: ("view" | "edit" | "duplicate" | "delete")[];
     customRowActions?: CustomRowAction<TData>[];
     onRowAction?: (action: RowActionId, row: TData) => void;
+    /**
+     * Handler for the built-in "View" action. If omitted, the grid still opens
+     * the View sheet (unless `viewSheet={false}`). Use this to also log,
+     * navigate, or fetch detail data when a user opens View.
+     */
+    onView?: (row: TData) => void;
+    /**
+     * Handler for the built-in "Delete" action. Fires *after* the user confirms
+     * in the delete modal (or immediately if `confirmDelete={false}`).
+     * If omitted, the grid only emits via `onRowAction("delete", row)`.
+     */
+    onDelete?: (row: TData) => void;
+    /**
+     * Configure the built-in View sheet — side, density, custom renderers.
+     * Pass `false` to disable; clicking "View" will then only fire
+     * `onView` / `onRowAction` without opening a sheet.
+     */
+    viewSheet?: ViewSheetConfig<TData> | false;
+    /**
+     * Configure the delete confirmation modal. Pass `false` to disable it and
+     * fire delete handlers immediately. Pass an object to customize title,
+     * description, and button labels. Defaults to enabled with built-in copy.
+     */
+    confirmDelete?: ConfirmDeleteConfig<TData> | boolean;
     /** Commit a single edited cell. Receives the row, column id and new value. */
     onCellEdit?: (row: TData, columnId: string, value: unknown) => void;
     /** Commit an entire row in row-edit mode. */
@@ -320,7 +396,31 @@ type DataTableProps<TData extends {
 };
 declare function DataTable<TData extends {
     id: string | number;
-}>({ data, columns, dataSource, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, isolate, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+}>({ data, columns, dataSource, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, isolate, onView, onDelete, viewSheet, confirmDelete, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Shared portal container for every overlay inside a DataTable (popover,
+ * dropdown, select, sheet, alert-dialog, …).
+ *
+ * `<DataTable>` provides a ref pointing to a `<div>` rendered *inside* the
+ * themed grid root. When the value is non-null, every overlay primitive
+ * mounts its portal into that div instead of `document.body`.
+ *
+ * Why this matters
+ * ----------------
+ * CSS variables cascade only down the DOM tree. The grid's `theme` prop
+ * applies inline tokens to the grid root — if a popover portals to
+ * `document.body` (Radix default), those tokens never reach the popover and
+ * its `bg-primary` / `bg-popover` / `border` etc. resolve from `:root`
+ * instead. That's why a `theme={themePresets.rose}` table can show a black
+ * "Apply" button on a white popover surrounded by a rose grid.
+ *
+ * Mounting overlays inside the themed root fixes this cleanly with no global
+ * CSS pollution.
+ */
+declare const PortalContainerContext: React$1.Context<HTMLElement | null>;
+/** Read the current grid's portal container, or `null` when outside a DataTable. */
+declare function usePortalContainer(): HTMLElement | null;
 
 type Props$2<TData, TValue> = {
     column: Column<TData, TValue>;
@@ -412,4 +512,4 @@ declare function ColumnFilterPanel<TData, TValue>(props: CommonProps<TData, TVal
 declare function exportToCsv<TData>(table: Table<TData>, fileName?: string): void;
 declare function exportToExcel<TData>(table: Table<TData>, fileName?: string): void;
 
-export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDataSource, type DataTableDataSourceResult, type DataTableDensity, type DataTableErrorContext, type DataTableFeatures, type DataTableFetchParams, type DataTableLabels, type DataTableModedTheme, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, type DataTableTokens, DataTableToolbar, type DateOp, EditableCell, type FilterType, ISOLATE_DARK_TOKENS, ISOLATE_LIGHT_TOKENS, type NumberOp, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, booleanFilterFn, buildPreset, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, splitTheme, textFilterFn, themePresets, themeToStyle, tokensToCssBlock, tokensToStyle };
+export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type ConfirmDeleteConfig, type ConfirmDeleteContext, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDataSource, type DataTableDataSourceResult, type DataTableDensity, type DataTableErrorContext, type DataTableFeatures, type DataTableFetchParams, type DataTableLabels, type DataTableModedTheme, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, type DataTableTokens, DataTableToolbar, type DateOp, EditableCell, type FilterType, ISOLATE_DARK_TOKENS, ISOLATE_LIGHT_TOKENS, type NumberOp, PortalContainerContext, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, type ViewSheetConfig, type ViewSheetDensity, type ViewSheetLabels, booleanFilterFn, buildPreset, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, splitTheme, textFilterFn, themePresets, themeToStyle, tokensToCssBlock, tokensToStyle, usePortalContainer };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { RowData, ColumnDef, SortingState, ColumnFiltersState, ColumnPinningState, VisibilityState, Column, Table, CellContext, FilterFn } from '@tanstack/react-table';
+import { Column, RowData, ColumnDef, SortingState, ColumnFiltersState, ColumnPinningState, VisibilityState, Table, CellContext, FilterFn } from '@tanstack/react-table';
+import * as React$1 from 'react';
 import { CSSProperties } from 'react';
 
 type RowActionId = "view" | "edit" | "duplicate" | "delete" | string;
@@ -140,6 +141,57 @@ type DataTableThemeName = keyof typeof themePresets;
 declare const ISOLATE_LIGHT_TOKENS: DataTableTokens;
 declare const ISOLATE_DARK_TOKENS: DataTableTokens;
 
+type SheetSide = "right" | "left" | "top" | "bottom";
+
+type ViewSheetDensity = "compact" | "relaxed" | "comfy";
+type ViewSheetLabels = {
+    title?: (row: any) => React.ReactNode;
+    description?: (row: any) => React.ReactNode;
+    emptyValue?: string;
+    density?: {
+        compact?: string;
+        relaxed?: string;
+        comfy?: string;
+    };
+};
+type ViewSheetConfig<TData> = {
+    /** Side of the screen to slide in from. Defaults to "right". */
+    side?: SheetSide;
+    /** Initial column count. Defaults to "compact" (1 column). */
+    defaultDensity?: ViewSheetDensity;
+    /** Hide the density tabs entirely if you want a fixed layout. */
+    hideDensityTabs?: boolean;
+    /** Override how a field's value is rendered. */
+    renderField?: (args: {
+        column: Column<TData, unknown>;
+        value: unknown;
+        row: TData;
+    }) => React.ReactNode;
+    /** Custom header for the sheet. */
+    renderHeader?: (row: TData) => React.ReactNode;
+    /** Filter / reorder which columns appear. Defaults to all visible columns. */
+    fields?: string[];
+    /** Override label / placeholder strings. */
+    labels?: ViewSheetLabels;
+};
+
+type ConfirmDeleteContext<TData> = {
+    /** The rows being deleted. Single-row delete passes one row; bulk passes many. */
+    rows: TData[];
+    /** "single" when triggered from the row actions menu; "bulk" from the toolbar. */
+    source: "single" | "bulk";
+};
+type ConfirmDeleteConfig<TData> = {
+    /** Modal title. Receives the same context the resolver receives. */
+    title?: (ctx: ConfirmDeleteContext<TData>) => React.ReactNode;
+    /** Modal description / body. */
+    description?: (ctx: ConfirmDeleteContext<TData>) => React.ReactNode;
+    /** Confirm button label. Defaults to "Delete". */
+    confirmLabel?: string;
+    /** Cancel button label. Defaults to "Cancel". */
+    cancelLabel?: string;
+};
+
 type CellEditorType = "text" | "number" | "currency" | "date" | "select" | "switch" | "checkbox";
 type FilterType = "text" | "number" | "select" | "multi-select" | "boolean" | "date";
 type SelectOption = {
@@ -269,6 +321,30 @@ type DataTableProps<TData extends {
     rowActions?: ("view" | "edit" | "duplicate" | "delete")[];
     customRowActions?: CustomRowAction<TData>[];
     onRowAction?: (action: RowActionId, row: TData) => void;
+    /**
+     * Handler for the built-in "View" action. If omitted, the grid still opens
+     * the View sheet (unless `viewSheet={false}`). Use this to also log,
+     * navigate, or fetch detail data when a user opens View.
+     */
+    onView?: (row: TData) => void;
+    /**
+     * Handler for the built-in "Delete" action. Fires *after* the user confirms
+     * in the delete modal (or immediately if `confirmDelete={false}`).
+     * If omitted, the grid only emits via `onRowAction("delete", row)`.
+     */
+    onDelete?: (row: TData) => void;
+    /**
+     * Configure the built-in View sheet — side, density, custom renderers.
+     * Pass `false` to disable; clicking "View" will then only fire
+     * `onView` / `onRowAction` without opening a sheet.
+     */
+    viewSheet?: ViewSheetConfig<TData> | false;
+    /**
+     * Configure the delete confirmation modal. Pass `false` to disable it and
+     * fire delete handlers immediately. Pass an object to customize title,
+     * description, and button labels. Defaults to enabled with built-in copy.
+     */
+    confirmDelete?: ConfirmDeleteConfig<TData> | boolean;
     /** Commit a single edited cell. Receives the row, column id and new value. */
     onCellEdit?: (row: TData, columnId: string, value: unknown) => void;
     /** Commit an entire row in row-edit mode. */
@@ -320,7 +396,31 @@ type DataTableProps<TData extends {
 };
 declare function DataTable<TData extends {
     id: string | number;
-}>({ data, columns, dataSource, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, isolate, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+}>({ data, columns, dataSource, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, isolate, onView, onDelete, viewSheet, confirmDelete, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Shared portal container for every overlay inside a DataTable (popover,
+ * dropdown, select, sheet, alert-dialog, …).
+ *
+ * `<DataTable>` provides a ref pointing to a `<div>` rendered *inside* the
+ * themed grid root. When the value is non-null, every overlay primitive
+ * mounts its portal into that div instead of `document.body`.
+ *
+ * Why this matters
+ * ----------------
+ * CSS variables cascade only down the DOM tree. The grid's `theme` prop
+ * applies inline tokens to the grid root — if a popover portals to
+ * `document.body` (Radix default), those tokens never reach the popover and
+ * its `bg-primary` / `bg-popover` / `border` etc. resolve from `:root`
+ * instead. That's why a `theme={themePresets.rose}` table can show a black
+ * "Apply" button on a white popover surrounded by a rose grid.
+ *
+ * Mounting overlays inside the themed root fixes this cleanly with no global
+ * CSS pollution.
+ */
+declare const PortalContainerContext: React$1.Context<HTMLElement | null>;
+/** Read the current grid's portal container, or `null` when outside a DataTable. */
+declare function usePortalContainer(): HTMLElement | null;
 
 type Props$2<TData, TValue> = {
     column: Column<TData, TValue>;
@@ -412,4 +512,4 @@ declare function ColumnFilterPanel<TData, TValue>(props: CommonProps<TData, TVal
 declare function exportToCsv<TData>(table: Table<TData>, fileName?: string): void;
 declare function exportToExcel<TData>(table: Table<TData>, fileName?: string): void;
 
-export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDataSource, type DataTableDataSourceResult, type DataTableDensity, type DataTableErrorContext, type DataTableFeatures, type DataTableFetchParams, type DataTableLabels, type DataTableModedTheme, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, type DataTableTokens, DataTableToolbar, type DateOp, EditableCell, type FilterType, ISOLATE_DARK_TOKENS, ISOLATE_LIGHT_TOKENS, type NumberOp, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, booleanFilterFn, buildPreset, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, splitTheme, textFilterFn, themePresets, themeToStyle, tokensToCssBlock, tokensToStyle };
+export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type ConfirmDeleteConfig, type ConfirmDeleteContext, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDataSource, type DataTableDataSourceResult, type DataTableDensity, type DataTableErrorContext, type DataTableFeatures, type DataTableFetchParams, type DataTableLabels, type DataTableModedTheme, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, type DataTableTokens, DataTableToolbar, type DateOp, EditableCell, type FilterType, ISOLATE_DARK_TOKENS, ISOLATE_LIGHT_TOKENS, type NumberOp, PortalContainerContext, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, type ViewSheetConfig, type ViewSheetDensity, type ViewSheetLabels, booleanFilterFn, buildPreset, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, splitTheme, textFilterFn, themePresets, themeToStyle, tokensToCssBlock, tokensToStyle, usePortalContainer };