import React from "react";
import { Graph } from "../graph";
import { TComponentState } from "../lib/Component";
import { Layer, LayerContext, LayerProps } from "../services/Layer";
/**
 * Properties for creating internal GraphPortal layer
 */
export interface GraphPortalLayerProps extends LayerProps {
    /**
     * Additional CSS classes for HTML element
     */
    className?: string;
    /**
     * Layer position on Z axis
     */
    zIndex?: number;
    /**
     * Whether HTML element should follow camera position
     */
    transformByCameraPosition?: boolean;
}
/**
 * Internal Layer class for GraphPortal
 * Creates HTML element and provides it through portal
 */
declare class GraphPortalLayer extends Layer<GraphPortalLayerProps, LayerContext, TComponentState> {
    constructor(props: GraphPortalLayerProps);
    /**
     * Get HTML element for creating portal
     */
    getPortalTarget(): HTMLElement | null;
}
/**
 * GraphPortal component properties
 */
export interface GraphPortalProps {
    /**
     * Additional CSS classes for layer
     */
    className?: string;
    /**
     * Layer position on Z axis
     */
    zIndex?: number;
    /**
     * Whether HTML element should follow camera position
     * @default false
     */
    transformByCameraPosition?: boolean;
    /**
     * Function for rendering portal content
     */
    children: React.ReactNode | ((layer: GraphPortalLayer, graph: Graph) => React.ReactNode);
}
/**
 * Declarative component for creating HTML layers using render prop pattern.
 *
 * Creates internal Layer with HTML element and renders passed
 * React components through React Portal without need to create
 * separate Layer class.
 *
 * @example
 * ```tsx
 * function MyGraph() {
 *   const { graph } = useGraph();
 *   const portalRef = useRef<GraphPortalLayer>(null);
 *
 *   return (
 *     <GraphCanvas graph={graph} renderBlock={renderBlock}>
 *       <GraphPortal
 *         ref={portalRef}
 *         className="my-custom-layer"
 *         zIndex={200}
 *         transformByCameraPosition={true}
 *       >
 *         <div style={{ position: 'absolute', top: 10, left: 10 }}>
 *           <h3>Custom UI Layer</h3>
 *           <button onClick={() => portalRef.current?.hide()}>
 *             Hide layer
 *           </button>
 *         </div>
 *       </GraphPortal>
 *     </GraphCanvas>
 *   );
 * }
 * ```
 *
 * @example
 * ```tsx
 * // With render prop for accessing layer and graph
 * <GraphPortal>
 *   {(layer, graph) => (
 *     <div onClick={() => layer.hide()}>
 *       Graph blocks count: {graph.api.getBlocks().length}
 *     </div>
 *   )}
 * </GraphPortal>
 * ```
 */
export declare const GraphPortal: React.ForwardRefExoticComponent<GraphPortalProps & React.RefAttributes<GraphPortalLayer>>;
export {};