@toolbox-web/grid-react 0.0.2

package/lib/data-grid.d.ts

@@ -0,0 +1,155 @@
+import { ColumnConfig, DataGridElement, GridConfig } from '../../../../dist/libs/grid/index.d.ts';
+import { ReactNode } from 'react';
+import { ReactGridConfig } from './react-column-config';
+/**
+ * Props for the DataGrid component.
+ */
+export interface DataGridProps<TRow = unknown> {
+    /** Row data to display */
+    rows: TRow[];
+    /**
+     * Grid configuration. Supports React renderers/editors via `reactRenderer` and `reactEditor` properties.
+     * @example
+     * ```tsx
+     * gridConfig={{
+     *   columns: [
+     *     {
+     *       field: 'status',
+     *       reactRenderer: (ctx) => <StatusBadge value={ctx.value} />,
+     *       reactEditor: (ctx) => <StatusEditor value={ctx.value} onCommit={ctx.commit} />,
+     *     },
+     *   ],
+     * }}
+     * ```
+     */
+    gridConfig?: ReactGridConfig<TRow>;
+    /** Column definitions (alternative to gridConfig.columns) */
+    columns?: ColumnConfig<TRow>[];
+    /** Fit mode for column sizing */
+    fitMode?: 'stretch' | 'fit-columns' | 'auto-fit';
+    /** Edit trigger mode */
+    editOn?: 'click' | 'dblclick' | 'none';
+    /** Custom CSS styles to inject into grid shadow DOM */
+    customStyles?: string;
+    /** Class name for the grid element */
+    className?: string;
+    /** Inline styles for the grid element */
+    style?: React.CSSProperties;
+    /** Children (GridColumn components for custom renderers/editors) */
+    children?: ReactNode;
+    /** Fired when rows change (sorting, editing, etc.) */
+    onRowsChange?: (rows: TRow[]) => void;
+    /** Fired when a cell value is edited */
+    onCellEdit?: (event: CustomEvent<{
+        row: TRow;
+        field: string;
+        oldValue: unknown;
+        newValue: unknown;
+    }>) => void;
+    /** Fired when a row is clicked */
+    onRowClick?: (event: CustomEvent<{
+        row: TRow;
+        rowIndex: number;
+    }>) => void;
+    /** Fired when column state changes (resize, reorder, visibility) */
+    onColumnStateChange?: (event: CustomEvent<{
+        columns: ColumnConfig<TRow>[];
+    }>) => void;
+    /** Fired when sort changes */
+    onSortChange?: (event: CustomEvent<{
+        field: string;
+        direction: 'asc' | 'desc';
+    } | null>) => void;
+}
+/**
+ * Ref handle for the DataGrid component.
+ */
+export interface DataGridRef<TRow = unknown> {
+    /** The underlying grid DOM element */
+    element: DataGridElement | null;
+    /** Get the effective configuration */
+    getConfig: () => Promise<Readonly<GridConfig<TRow>>>;
+    /** Wait for the grid to be ready */
+    ready: () => Promise<void>;
+    /** Force a layout recalculation */
+    forceLayout: () => Promise<void>;
+    /** Toggle a group row */
+    toggleGroup: (key: string) => Promise<void>;
+    /** Register custom styles */
+    registerStyles: (id: string, css: string) => void;
+    /** Unregister custom styles */
+    unregisterStyles: (id: string) => void;
+}
+/**
+ * React wrapper component for the tbw-grid web component.
+ *
+ * ## Basic Usage
+ *
+ * ```tsx
+ * import { DataGrid } from '@toolbox-web/grid-react';
+ *
+ * function MyComponent() {
+ *   const [rows, setRows] = useState([...]);
+ *
+ *   return (
+ *     <DataGrid
+ *       rows={rows}
+ *       columns={[
+ *         { field: 'name', header: 'Name' },
+ *         { field: 'age', header: 'Age', type: 'number' },
+ *       ]}
+ *       onRowsChange={setRows}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ## With Custom Renderers
+ *
+ * ```tsx
+ * import { DataGrid, GridColumn } from '@toolbox-web/grid-react';
+ *
+ * function MyComponent() {
+ *   return (
+ *     <DataGrid rows={rows}>
+ *       <GridColumn field="status">
+ *         {(ctx) => <StatusBadge status={ctx.value} />}
+ *       </GridColumn>
+ *       <GridColumn
+ *         field="name"
+ *         editable
+ *         editor={(ctx) => (
+ *           <input
+ *             defaultValue={ctx.value}
+ *             onBlur={(e) => ctx.commit(e.target.value)}
+ *             onKeyDown={(e) => e.key === 'Escape' && ctx.cancel()}
+ *           />
+ *         )}
+ *       />
+ *     </DataGrid>
+ *   );
+ * }
+ * ```
+ *
+ * ## With Ref
+ *
+ * ```tsx
+ * import { DataGrid, DataGridRef } from '@toolbox-web/grid-react';
+ * import { useRef } from 'react';
+ *
+ * function MyComponent() {
+ *   const gridRef = useRef<DataGridRef>(null);
+ *
+ *   const handleClick = async () => {
+ *     const config = await gridRef.current?.getConfig();
+ *     console.log('Current columns:', config?.columns);
+ *   };
+ *
+ *   return <DataGrid ref={gridRef} rows={rows} />;
+ * }
+ * ```
+ */
+export declare const DataGrid: <TRow = unknown>(props: DataGridProps<TRow> & {
+    ref?: React.Ref<DataGridRef<TRow>>;
+}) => React.ReactElement;
+//# sourceMappingURL=data-grid.d.ts.map

package/lib/data-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/data-grid.tsx"],"names":[],"mappings":"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"}

package/lib/grid-column.d.ts

@@ -0,0 +1,117 @@
+import { CellRenderContext, ColumnEditorContext } from '../../../../dist/libs/grid/index.d.ts';
+import { ReactNode } from 'react';
+/**
+ * Props for the GridColumn component.
+ */
+export interface GridColumnProps<TRow = unknown, TValue = unknown> {
+    /** Field key in the row object */
+    field: keyof TRow & string;
+    /** Column header text (defaults to capitalized field) */
+    header?: string;
+    /** Column data type */
+    type?: 'string' | 'number' | 'date' | 'boolean' | 'select' | 'typeahead';
+    /** Whether the column is editable */
+    editable?: boolean;
+    /** Whether the column is sortable */
+    sortable?: boolean;
+    /** Whether the column is resizable */
+    resizable?: boolean;
+    /** Column width (e.g., "100px", "10%") */
+    width?: string | number;
+    /** Minimum width for stretch mode */
+    minWidth?: number;
+    /** Whether the column is hidden */
+    hidden?: boolean;
+    /** Prevent column from being hidden */
+    lockVisible?: boolean;
+    /**
+     * Custom cell renderer (render prop pattern).
+     * Receives cell context and returns React node.
+     *
+     * @example
+     * ```tsx
+     * <GridColumn field="status">
+     *   {(ctx) => <StatusBadge status={ctx.value} />}
+     * </GridColumn>
+     * ```
+     */
+    children?: (ctx: CellRenderContext<TRow, TValue>) => ReactNode;
+    /**
+     * Custom cell editor.
+     * Receives editor context with commit/cancel functions.
+     *
+     * @example
+     * ```tsx
+     * <GridColumn
+     *   field="name"
+     *   editable
+     *   editor={(ctx) => (
+     *     <input
+     *       defaultValue={ctx.value}
+     *       onBlur={(e) => ctx.commit(e.target.value)}
+     *       onKeyDown={(e) => e.key === 'Escape' && ctx.cancel()}
+     *     />
+     *   )}
+     * />
+     * ```
+     */
+    editor?: (ctx: ColumnEditorContext<TRow, TValue>) => ReactNode;
+    /** Select/typeahead options */
+    options?: Array<{
+        label: string;
+        value: unknown;
+    }>;
+    /** Allow multiple selection (for select/typeahead) */
+    multi?: boolean;
+    /** Custom formatter function */
+    format?: (value: TValue, row: TRow) => string;
+}
+/**
+ * Column configuration component for use with DataGrid.
+ *
+ * Renders a `<tbw-grid-column>` custom element in the light DOM
+ * and registers React renderers/editors with the adapter.
+ *
+ * ## Basic Usage
+ *
+ * ```tsx
+ * <DataGrid rows={rows}>
+ *   <GridColumn field="name" header="Full Name" />
+ *   <GridColumn field="age" type="number" sortable />
+ * </DataGrid>
+ * ```
+ *
+ * ## Custom Renderer
+ *
+ * ```tsx
+ * <GridColumn field="status">
+ *   {(ctx) => (
+ *     <span className={`status-${ctx.value}`}>
+ *       {ctx.value}
+ *     </span>
+ *   )}
+ * </GridColumn>
+ * ```
+ *
+ * ## Custom Editor
+ *
+ * ```tsx
+ * <GridColumn
+ *   field="price"
+ *   editable
+ *   editor={(ctx) => (
+ *     <input
+ *       type="number"
+ *       defaultValue={ctx.value}
+ *       onBlur={(e) => ctx.commit(Number(e.target.value))}
+ *       onKeyDown={(e) => {
+ *         if (e.key === 'Enter') ctx.commit(Number(e.currentTarget.value));
+ *         if (e.key === 'Escape') ctx.cancel();
+ *       }}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+export declare function GridColumn<TRow = unknown, TValue = unknown>(props: GridColumnProps<TRow, TValue>): React.ReactElement;
+//# sourceMappingURL=grid-column.d.ts.map

package/lib/grid-column.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-column.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/grid-column.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAChF,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,aAAa,CAAC;AAGrB;;GAEG;AACH,MAAM,WAAW,eAAe,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO;IAC/D,kCAAkC;IAClC,KAAK,EAAE,MAAM,IAAI,GAAG,MAAM,CAAC;IAC3B,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAC;IACzE,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,iBAAiB,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,SAAS,CAAC;IAC/D;;;;;;;;;;;;;;;;;;OAkBG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,mBAAmB,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,SAAS,CAAC;IAC/D,+BAA+B;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IACnD,sDAAsD;IACtD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gCAAgC;IAChC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,KAAK,MAAM,CAAC;CAC/C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAAgB,UAAU,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE,eAAe,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,YAAY,CAyErH"}

package/lib/grid-detail-panel.d.ts

@@ -0,0 +1,88 @@
+import { ReactNode, ReactElement } from 'react';
+/**
+ * Context object passed to the detail panel render function.
+ */
+export interface DetailPanelContext<TRow = unknown> {
+    /** The row data for this detail panel */
+    row: TRow;
+    /** The row index */
+    rowIndex: number;
+}
+/**
+ * Get the detail renderer for a grid element.
+ * @internal
+ */
+export declare function getDetailRenderer(gridElement: HTMLElement): ((ctx: DetailPanelContext<unknown>) => ReactNode) | undefined;
+/**
+ * Props for the GridDetailPanel component.
+ */
+export interface GridDetailPanelProps<TRow = unknown> {
+    /**
+     * Render function for the detail panel content.
+     * Receives the row data and row index.
+     *
+     * @example
+     * ```tsx
+     * <GridDetailPanel>
+     *   {({ row }) => <EmployeeDetails employee={row} />}
+     * </GridDetailPanel>
+     * ```
+     */
+    children: (ctx: DetailPanelContext<TRow>) => ReactNode;
+    /**
+     * Whether to show the expand/collapse column.
+     * @default true
+     */
+    showExpandColumn?: boolean;
+    /**
+     * Animation style for expand/collapse.
+     * - 'slide': Smooth height animation (default)
+     * - 'fade': Opacity transition
+     * - false: No animation
+     * @default 'slide'
+     */
+    animation?: 'slide' | 'fade' | false;
+}
+/**
+ * Component for defining a master-detail panel within a DataGrid.
+ *
+ * Renders a `<tbw-grid-detail>` custom element in the light DOM that the
+ * MasterDetailPlugin picks up to render expandable row details.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import { DataGrid, GridDetailPanel } from '@toolbox-web/grid-react';
+ * import { MasterDetailPlugin } from '@toolbox-web/grid/all';
+ *
+ * function EmployeeGrid() {
+ *   const config = {
+ *     plugins: [new MasterDetailPlugin()],
+ *     // ... other config
+ *   };
+ *
+ *   return (
+ *     <DataGrid rows={employees} gridConfig={config}>
+ *       <GridDetailPanel showExpandColumn animation="slide">
+ *         {({ row }) => (
+ *           <div className="detail-panel">
+ *             <h3>{row.firstName} {row.lastName}</h3>
+ *             <p>Department: {row.department}</p>
+ *             <p>Email: {row.email}</p>
+ *           </div>
+ *         )}
+ *       </GridDetailPanel>
+ *     </DataGrid>
+ *   );
+ * }
+ * ```
+ *
+ * ## How it works
+ *
+ * 1. This component renders a `<tbw-grid-detail>` element in the grid's light DOM
+ * 2. The ReactGridAdapter detects this element and creates a detail renderer
+ * 3. When a row is expanded, the adapter calls your render function
+ * 4. The React component is rendered into the detail row container
+ */
+export declare function GridDetailPanel<TRow = unknown>(props: GridDetailPanelProps<TRow>): ReactElement;
+//# sourceMappingURL=grid-detail-panel.d.ts.map

package/lib/grid-detail-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-detail-panel.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/grid-detail-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,aAAa,CAAC;AAErB;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,IAAI,GAAG,OAAO;IAChD,yCAAyC;IACzC,GAAG,EAAE,IAAI,CAAC;IACV,oBAAoB;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAUD;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,WAAW,EAAE,WAAW,GACvB,CAAC,CAAC,GAAG,EAAE,kBAAkB,CAAC,OAAO,CAAC,KAAK,SAAS,CAAC,GAAG,SAAS,CAe/D;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB,CAAC,IAAI,GAAG,OAAO;IAClD;;;;;;;;;;OAUG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,kBAAkB,CAAC,IAAI,CAAC,KAAK,SAAS,CAAC;IAEvD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,eAAe,CAAC,IAAI,GAAG,OAAO,EAAE,KAAK,EAAE,oBAAoB,CAAC,IAAI,CAAC,GAAG,YAAY,CAqC/F"}

package/lib/grid-tool-button.d.ts

@@ -0,0 +1,31 @@
+import { ReactElement, ReactNode } from 'react';
+/**
+ * Props for the GridToolButtons container component.
+ */
+export interface GridToolButtonsProps {
+    /** Child buttons to render inside the container */
+    children: ReactNode;
+}
+/**
+ * Container component for toolbar buttons in DataGrid shell header.
+ *
+ * This component renders a `<tbw-grid-tool-buttons>` element that gets
+ * slotted into the shell toolbar. Place your buttons inside.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * <DataGrid rows={rows} gridConfig={config}>
+ *   <GridToolButtons>
+ *     <button className="tbw-toolbar-btn" title="Export CSV" onClick={handleExport}>
+ *       📄
+ *     </button>
+ *     <button className="tbw-toolbar-btn" title="Print" onClick={window.print}>
+ *       🖨️
+ *     </button>
+ *   </GridToolButtons>
+ * </DataGrid>
+ * ```
+ */
+export declare function GridToolButtons({ children }: GridToolButtonsProps): ReactElement;
+//# sourceMappingURL=grid-tool-button.d.ts.map

package/lib/grid-tool-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-tool-button.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/grid-tool-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,mDAAmD;IACnD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,oBAAoB,GAAG,YAAY,CAEhF"}

package/lib/grid-tool-panel.d.ts

@@ -0,0 +1,98 @@
+import { ReactNode, ReactElement } from 'react';
+/**
+ * Context object passed to the tool panel render function.
+ */
+export interface ToolPanelContext {
+    /** Reference to the grid element */
+    grid: HTMLElement;
+}
+/**
+ * Get the tool panel renderer for a panel element.
+ * @internal
+ */
+export declare function getToolPanelRenderer(panelElement: HTMLElement): ((ctx: ToolPanelContext) => ReactNode) | undefined;
+/**
+ * Get all registered tool panel elements within a grid.
+ * @internal
+ */
+export declare function getToolPanelElements(gridElement: HTMLElement): HTMLElement[];
+/**
+ * Props for the GridToolPanel component.
+ */
+export interface GridToolPanelProps {
+    /**
+     * Unique identifier for this panel.
+     * Required for the shell plugin to track the panel.
+     */
+    id: string;
+    /**
+     * Panel title shown in the accordion header.
+     */
+    title: string;
+    /**
+     * Icon for the accordion section header.
+     * Can be an emoji or text.
+     */
+    icon?: string;
+    /**
+     * Tooltip text for the accordion header.
+     */
+    tooltip?: string;
+    /**
+     * Panel order priority. Lower values appear first.
+     * @default 100
+     */
+    order?: number;
+    /**
+     * Render function for the panel content.
+     * Receives a context with the grid element reference.
+     *
+     * @example
+     * ```tsx
+     * <GridToolPanel id="filters" title="Quick Filters" icon="🔍">
+     *   {({ grid }) => <QuickFilters gridRef={grid} />}
+     * </GridToolPanel>
+     * ```
+     */
+    children: (ctx: ToolPanelContext) => ReactNode;
+}
+/**
+ * Component for defining a custom tool panel within a DataGrid.
+ *
+ * Renders a `<tbw-grid-tool-panel>` custom element in the light DOM that the
+ * ShellPlugin picks up and displays in the side panel accordion.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import { DataGrid, GridToolPanel } from '@toolbox-web/grid-react';
+ *
+ * function EmployeeGrid() {
+ *   return (
+ *     <DataGrid rows={employees} gridConfig={config}>
+ *       <GridToolPanel id="quick-filters" title="Quick Filters" icon="🔍" order={10}>
+ *         {({ grid }) => (
+ *           <div className="filters">
+ *             <button onClick={() => applyFilter(grid, 'active')}>Active</button>
+ *             <button onClick={() => applyFilter(grid, 'inactive')}>Inactive</button>
+ *           </div>
+ *         )}
+ *       </GridToolPanel>
+ *
+ *       <GridToolPanel id="stats" title="Statistics" icon="📊" order={20}>
+ *         {() => <StatsPanel data={employees} />}
+ *       </GridToolPanel>
+ *     </DataGrid>
+ *   );
+ * }
+ * ```
+ *
+ * ## How it works
+ *
+ * 1. This component renders a `<tbw-grid-tool-panel>` element in the grid's light DOM
+ * 2. The ReactGridAdapter detects this element and creates a panel renderer
+ * 3. When the shell plugin initializes, it finds these panels and renders them
+ * 4. The React component is rendered into the accordion panel container
+ */
+export declare function GridToolPanel(props: GridToolPanelProps): ReactElement;
+//# sourceMappingURL=grid-tool-panel.d.ts.map

package/lib/grid-tool-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-tool-panel.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/grid-tool-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,aAAa,CAAC;AAErB;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,oCAAoC;IACpC,IAAI,EAAE,WAAW,CAAC;CACnB;AAUD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,WAAW,GAAG,CAAC,CAAC,GAAG,EAAE,gBAAgB,KAAK,SAAS,CAAC,GAAG,SAAS,CAYlH;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,WAAW,GAAG,WAAW,EAAE,CAO5E;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;;;OAUG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,SAAS,CAAC;CAChD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAiCrE"}

package/lib/react-column-config.d.ts

@@ -0,0 +1,71 @@
+import { CellRenderContext, ColumnConfig, ColumnEditorContext, GridConfig } from '../../../../dist/libs/grid/index.d.ts';
+import { ReactNode } from 'react';
+/**
+ * Extended column config that supports React components for renderers/editors.
+ *
+ * Use `renderer` and `editor` properties to define React-based cell renderers
+ * and editors directly in your gridConfig. These accept React render functions
+ * that return ReactNode (JSX).
+ *
+ * @example
+ * ```tsx
+ * const gridConfig: ReactGridConfig<Employee> = {
+ *   columns: [
+ *     {
+ *       field: 'status',
+ *       header: 'Status',
+ *       // React renderer - same property name as vanilla, but returns JSX
+ *       renderer: (ctx) => <StatusBadge value={ctx.value} />,
+ *       // React editor - same property name as vanilla, but returns JSX
+ *       editor: (ctx) => (
+ *         <StatusSelect
+ *           value={ctx.value}
+ *           onCommit={ctx.commit}
+ *           onCancel={ctx.cancel}
+ *         />
+ *       ),
+ *     },
+ *   ],
+ * };
+ * ```
+ */
+export interface ReactColumnConfig<TRow = unknown> extends Omit<ColumnConfig<TRow>, 'renderer' | 'viewRenderer' | 'editor'> {
+    /**
+     * React component renderer for cell display.
+     * Receives cell context and returns a React node (JSX).
+     *
+     * Same property name as vanilla JS, but accepts React components.
+     */
+    renderer?: (ctx: CellRenderContext<TRow>) => ReactNode;
+    /**
+     * React component editor for cell editing.
+     * Receives editor context with commit/cancel functions and returns a React node (JSX).
+     *
+     * Same property name as vanilla JS, but accepts React components.
+     */
+    editor?: (ctx: ColumnEditorContext<TRow>) => ReactNode;
+}
+/**
+ * Grid config with React-enhanced column definitions.
+ */
+export type ReactGridConfig<TRow = unknown> = Omit<GridConfig<TRow>, 'columns'> & {
+    columns?: ReactColumnConfig<TRow>[];
+};
+/**
+ * Wraps a React renderer function into a DOM-returning viewRenderer.
+ * Used internally by DataGrid to process reactRenderer properties.
+ */
+export declare function wrapReactRenderer<TRow>(renderFn: (ctx: CellRenderContext<TRow>) => ReactNode): (ctx: CellRenderContext<TRow>) => HTMLElement;
+/**
+ * Wraps a React editor function into a DOM-returning editor spec.
+ * Used internally by DataGrid to process reactEditor properties.
+ */
+export declare function wrapReactEditor<TRow>(editorFn: (ctx: ColumnEditorContext<TRow>) => ReactNode): (ctx: ColumnEditorContext<TRow>) => HTMLElement;
+/**
+ * Processes a ReactGridConfig, converting React renderer/editor functions
+ * to DOM-returning functions that the grid core understands.
+ *
+ * @internal Used by DataGrid component
+ */
+export declare function processReactGridConfig<TRow>(config: ReactGridConfig<TRow> | undefined): GridConfig<TRow> | undefined;
+//# sourceMappingURL=react-column-config.d.ts.map

package/lib/react-column-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-column-config.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/react-column-config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC1G,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,WAAW,iBAAiB,CAAC,IAAI,GAAG,OAAO,CAAE,SAAQ,IAAI,CAC7D,YAAY,CAAC,IAAI,CAAC,EAClB,UAAU,GAAG,cAAc,GAAG,QAAQ,CACvC;IACC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,SAAS,CAAC;IAEvD;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,mBAAmB,CAAC,IAAI,CAAC,KAAK,SAAS,CAAC;CACxD;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,CAAC,IAAI,GAAG,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,GAAG;IAChF,OAAO,CAAC,EAAE,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC;CACrC,CAAC;AAKF;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EACpC,QAAQ,EAAE,CAAC,GAAG,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,SAAS,GACpD,CAAC,GAAG,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,WAAW,CAiC/C;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAClC,QAAQ,EAAE,CAAC,GAAG,EAAE,mBAAmB,CAAC,IAAI,CAAC,KAAK,SAAS,GACtD,CAAC,GAAG,EAAE,mBAAmB,CAAC,IAAI,CAAC,KAAK,WAAW,CAcjD;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,GAAG,SAAS,CAyBpH"}