import { default as React, PropsWithChildren, ReactNode } from 'react';
export type GraphiQLToolbarConfig = {
    /**
     * This content will be rendered after the built-in buttons of the toolbar.
     * Note that this will not apply if you provide a completely custom toolbar
     * (by passing `GraphiQL.Toolbar` as child to the `GraphiQL` component).
     */
    additionalContent?: React.ReactNode;
    /**
     * same as above, except a component with access to context
     */
    additionalComponent?: React.JSXElementConstructor<any>;
};
export type GraphiQLInterfaceProps = {
    /** Editor theme name (e.g. 'ibm-code'). */
    editorTheme?: string;
    /** CodeMirror/Monaco keymap (e.g. 'sublime'). */
    keyMap?: string;
    /** Called when the query editor value changes. */
    onEditQuery?: (value: string) => void;
    /** Called when the user copies the query. */
    onCopyQuery?: (query: string) => void;
    /** Called when the variables editor value changes. */
    onEditVariables?: (value: string) => void;
    /** Called when the headers editor value changes. */
    onEditHeaders?: (value: string) => void;
    /** Custom tooltip component shown inside the response editor. */
    responseTooltip?: React.ComponentType;
    children?: ReactNode;
    /**
     * Set the default state for the editor tools.
     * - `false` hides the editor tools
     * - `true` shows the editor tools
     * - `'variables'` specifically shows the variables editor
     * - `'headers'` specifically shows the headers editor
     * By default the editor tools are initially shown when at least one of the
     * editors has contents.
     */
    defaultEditorToolsVisibility?: boolean | 'variables' | 'headers';
    /**
     * Toggle if the headers editor should be shown inside the editor tools.
     * @default true
     */
    isHeadersEditorEnabled?: boolean;
    /**
     * An object that allows configuration of the toolbar next to the query
     * editor.
     */
    toolbar?: GraphiQLToolbarConfig;
    /**
     * Indicates if settings for persisting headers should appear in the
     * settings modal.
     */
    showPersistHeadersSettings?: boolean;
    /**
     * CSS class to set on the graphiql-container element.
     * @addedBy IBM
     */
    className?: string;
    /**
     * Theme configuration to override the default Carbon theme.
     * Accepts values like 'white', 'g10', 'g90', 'g100'.
     * Light themes ('white', 'g10') will use the 'light' GraphiQL theme.
     * Dark themes ('g90', 'g100') will use the 'dark' GraphiQL theme.
     */
    configTheme?: string;
};
export declare function GraphiQLInterface(props: GraphiQLInterfaceProps): React.JSX.Element;
export declare function GraphiQLToolbar<TProps>(props: PropsWithChildren<TProps>): React.JSX.Element;
export declare namespace GraphiQLToolbar {
    var displayName: string;
}
export declare function GraphiQLFooter<TProps>(props: PropsWithChildren<TProps>): React.JSX.Element;
export declare namespace GraphiQLFooter {
    var displayName: string;
}