/**
 * Helpers to make a component with customizable root element.
 *
 * ------------------------------------------------------------
 * I. Prepare a component to accept custom root elements
 * ------------------------------------------------------------
 *
 * ```
 * import {
 *     CustomRootComponentProps,
 *     ICustomizableRootComponent,
 *     renameRef
 * } from '@tradingview/ui-lib/core/customizable-root-component';
 *
 * interface RootComponentOwnProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {}
 * ```
 *
 * Use `CustomRootComponentProps<>` to create the final type of the props that will be passed to the custom root component.
 *
 * ```
 * type RootComponentProps = CustomRootComponentProps<RootComponentOwnProps>;
 * ```
 *
 * Use `ICustomizableRootComponent<>` to create the final type of the props of the main component.
 *
 * ```
 * interface Props extends ICustomizableRootComponent<RootComponentProps> {
 *     reference?: React.RefCallback<HTMLElement>;
 * }
 * ```
 *
 * Create a main component.
 * It render customizable root. If no custom root provided (using renderComponent props), it uses DefaultRoot.
 *
 * ```
 * const Component(props: Props): JSX.Element {
 *     const Root = props.renderComponent ?? DefaultRoot;
 *     return (
 *         <Root { ...props } />
 *             { props.children }
 *         </Root>
 *     );
 * }
 * ```
 *
 * Create fallback root component that will be used in the default case when `renderComponent` is not provided.
 * Root component props MUST be of `RootComponentProps` type that was created above.
 * `renameRef` helper is used to rename `reference` into `ref`.
 *
 * ```
 * function DefaultRoot(props: RootComponentProps): JSX.Element {
 *     return <a { ...renameRef(props) } />
 * }
 * ```
 *
 * ------------------------------------------------------------
 * II. Usage of the component
 * ------------------------------------------------------------
 *
 * ```
 * import { renameRef } from '@tradingview/ui-lib/core/customizable-root-component';
 * import { Component, RootComponentProps } from 'component';
 * ```
 *
 * 1. Custom root component is passed via `renderComponent` props, and can be either anonymous function (shown below),
 *    or a regular react component.
 * 2. Custom root component props MUST be of `RootComponentProps` type that was created above.
 * 3. `renameRef` helper is used to rename `reference` into `ref`.
 *
 * ```
 * <Component
 *     reference={ someRefCallback }
 *     renderComponent={ (props: RootComponentProps) => <Link { ...renameRef(props) } to="/" /> }
 * />
 * ```
 */
import { RefCallback } from 'react';
/**
 * Customizable root component can only accept the ref callback function.
 * Ref object are not supported due to typings difficulties.
 */
export interface ICustomizableRootComponentReference {
    reference?: RefCallback<HTMLElement>;
}
/** Helper generic type that creates final customizable root component props type. */
export declare type CustomRootComponentProps<TCustomRootProps = {}> = TCustomRootProps & ICustomizableRootComponentReference;
/** Type of the customizable root component or render function that will be passed to `renderComponent` prop */
export declare type RenderCustomComponent<TCustomRootProps extends ICustomizableRootComponentReference> = React.JSXElementConstructor<TCustomRootProps>;
/** Interface that a component MUST extend to be able to receive and render custom root components */
export interface ICustomizableRootComponent<TCustomRootProps extends ICustomizableRootComponentReference> {
    renderComponent?: RenderCustomComponent<TCustomRootProps>;
}
/** Props interface with `reference` prop renamed into `ref` */
export declare type ConvertedRefProps<TProps extends ICustomizableRootComponentReference> = Omit<TProps, 'reference'> & {
    ref?: TProps['reference'];
};
/** Rename `reference` prop to `ref` */
export declare function renameRef<TProps extends ICustomizableRootComponentReference>(props: TProps): ConvertedRefProps<TProps>;