import { BaseGridPlugin, ColumnInferenceMode, DataGridElement, FitMode } from '@toolbox-web/grid';
import { ReactNode } from 'react';
import { ColumnShorthand } from './column-shorthand';
import { EventProps } from './event-props';
import { AllFeatureProps } from './feature-props';
import { ColumnConfig, GridConfig } from './react-column-config';
import { GridElementContext } from './grid-element-context';
export { GridElementContext };
/**
 * Props for the DataGrid component.
 *
 * @template TRow - The row data type
 *
 * Combines:
 * - Core props (rows, columns, gridConfig)
 * - Feature props (selection, editing, filtering, etc.) - plugins loaded via side-effect imports
 * - Event props (onCellClick, onSelectionChange, etc.)
 */
export interface DataGridProps<TRow = unknown> extends AllFeatureProps<TRow>, EventProps<TRow> {
    /** 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?: GridConfig<TRow>;
    /**
     * Column definitions. Supports shorthand syntax for quick definitions.
     *
     * @example
     * ```tsx
     * // Shorthand strings (auto-generate headers from field names)
     * columns={['id:number', 'name', 'email', 'salary:currency']}
     *
     * // Mixed: shorthand + full config
     * columns={['id:number', 'name', { field: 'status', editable: true }]}
     *
     * // Full config objects (standard usage)
     * columns={[{ field: 'id', type: 'number' }, { field: 'name' }]}
     * ```
     */
    columns?: ColumnShorthand<TRow>[];
    /**
     * Default column properties applied to all columns.
     * Individual column definitions override these defaults.
     *
     * @example
     * ```tsx
     * <DataGrid
     *   columnDefaults={{ sortable: true, resizable: true }}
     *   columns={[
     *     { field: 'id', sortable: false }, // Override: not sortable
     *     { field: 'name' }, // Inherits: sortable, resizable
     *   ]}
     * />
     * ```
     */
    columnDefaults?: Partial<ColumnConfig<TRow>>;
    /** Fit mode for column sizing. Defaults to `'stretch'`. */
    fitMode?: FitMode;
    /**
     * How automatic column inference combines with explicitly provided columns.
     *
     * - `'auto'` (default): infer only when no columns are provided.
     * - `'merge'`: always infer from data, then overlay provided columns by `field`.
     */
    columnInference?: ColumnInferenceMode;
    /**
     * Grid-wide sorting toggle.
     * When false, disables sorting for all columns regardless of their individual `sortable` setting.
     * When true (default), columns with `sortable: true` can be sorted.
     *
     * For multi-column sorting, also add the `multiSort` prop.
     *
     * @default true
     *
     * @example
     * ```tsx
     * // Disable all sorting
     * <DataGrid sortable={false} />
     *
     * // Enable sorting with multi-sort
     * <DataGrid sortable multiSort />
     * ```
     */
    sortable?: boolean;
    /**
     * Grid-wide filtering toggle.
     * When false, disables filtering for all columns regardless of their individual `filterable` setting.
     * When true (default), columns with `filterable: true` can be filtered.
     *
     * Requires the FilteringPlugin to be loaded (via `filtering` prop or feature import).
     *
     * @default true
     *
     * @example
     * ```tsx
     * // Disable all filtering
     * <DataGrid filterable={false} filtering />
     *
     * // Enable filtering (default)
     * <DataGrid filterable filtering />
     * ```
     */
    filterable?: boolean;
    /**
     * Grid-wide selection toggle.
     * When false, disables selection for all rows/cells.
     * When true (default), selection is enabled based on plugin mode.
     *
     * Requires the SelectionPlugin to be loaded (via `selection` prop or feature import).
     *
     * @default true
     *
     * @example
     * ```tsx
     * // Disable all selection
     * <DataGrid selectable={false} selection="range" />
     *
     * // Enable selection (default)
     * <DataGrid selectable selection="range" />
     * ```
     */
    selectable?: boolean;
    /**
     * Show a loading overlay on the grid.
     * Use this during initial data fetch or refresh operations.
     *
     * For row/cell loading states, use the ref to access methods:
     * - `ref.element.setRowLoading(rowId, true/false)`
     * - `ref.element.setCellLoading(rowId, field, true/false)`
     *
     * @default false
     *
     * @example
     * ```tsx
     * const [loading, setLoading] = useState(true);
     *
     * useEffect(() => {
     *   fetchData().then(data => {
     *     setRows(data);
     *     setLoading(false);
     *   });
     * }, []);
     *
     * <DataGrid loading={loading} rows={rows} />
     * ```
     */
    loading?: boolean;
    /** Custom CSS styles to inject into the grid via `document.adoptedStyleSheets` */
    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;
    /**
     * Escape hatch: manually provide plugin instances.
     * When provided, feature props for those plugins are ignored.
     * Useful for advanced configurations not covered by feature props.
     *
     * @example
     * ```tsx
     * import { SelectionPlugin } from '@toolbox-web/grid/plugins/selection';
     *
     * <DataGrid
     *   plugins={[new SelectionPlugin({ mode: 'range', checkbox: true })]}
     * />
     * ```
     */
    plugins?: BaseGridPlugin[];
    /** Fired when rows change (sorting, editing, etc.) */
    onRowsChange?: (rows: TRow[]) => void;
}
/**
 * Ref handle for the DataGrid component.
 */
export interface DataGridRef<TRow = unknown> {
    /** The underlying grid DOM element with proper typing */
    element: DataGridElement<TRow> | 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;
    /** Set loading state for a specific row */
    setRowLoading: (rowId: string, loading: boolean) => void;
    /** Set loading state for a specific cell */
    setCellLoading: (rowId: string, field: string, loading: boolean) => void;
    /** Check if a row is in loading state */
    isRowLoading: (rowId: string) => boolean;
    /** Check if a cell is in loading state */
    isCellLoading: (rowId: string, field: string) => boolean;
    /** Clear all loading states (grid, rows, and cells) */
    clearAllLoading: () => 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} />;
 * }
 * ```
 *
 * @category Component
 */
export declare const DataGrid: <TRow = unknown>(props: DataGridProps<TRow> & {
    ref?: React.Ref<DataGridRef<TRow>>;
}) => React.ReactElement;
//# sourceMappingURL=data-grid.d.ts.map