import { DataGridElement } from '@toolbox-web/grid';
import { ReactNode, ReactElement } from 'react';
/**
 * Context object passed to the tool panel render function.
 */
export interface ToolPanelContext {
    /** Reference to the grid element */
    grid: DataGridElement;
}
/**
 * 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.
     *
     * Optional — omit it when the panel's rendered content already provides its
     * own heading. With a single title-less panel the accordion header row is
     * skipped entirely; with multiple panels a title-less header still renders
     * (empty title) so the expand/collapse control stays available.
     *
     * @since 3.1.0 (previously required)
     */
    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
 *
 * @category Component
 */
export declare function GridToolPanel(props: GridToolPanelProps): ReactElement;
//# sourceMappingURL=grid-tool-panel.d.ts.map