import * as React from 'react';
import { MutableRefObject, useEffect } from 'react';

/**
 * Type-safe clone element
 *
 * @param element
 * @param props
 * @param children
 */
declare function cloneValidElement<Props>(element: React.ReactElement<Props> | React.ReactNode, props?: Partial<Props> & React.Attributes, ...children: React.ReactNode[]): React.ReactElement<Props> | React.ReactNode;

/**
 * Passes or assigns an arbitrary value to a ref function or object.
 *
 * @param ref
 * @param value
 */
declare function assignRef<RefValueType = any>(ref: AssignableRef<RefValueType> | null | undefined, value: any): void;
/**
 * Passes or assigns a value to multiple refs (typically a DOM node). Useful for
 * dealing with components that need an explicit ref for DOM calculations but
 * also forwards refs assigned by an app.
 *
 * @param refs Refs to fork
 */
declare function useComposedRefs<RefValueType = any>(...refs: (AssignableRef<RefValueType> | null | undefined)[]): (node: any) => void;
/**
 * React.Ref uses the readonly type `React.RefObject` instead of
 * `React.MutableRefObject`, We pretty much always assume ref objects are
 * mutable (at least when we create them), so this type is a workaround so some
 * of the weird mechanics of using refs with TS.
 */
type AssignableRef<ValueType> = {
    bivarianceHack(instance: ValueType | null): void;
}["bivarianceHack"] | MutableRefObject<ValueType | null>;

declare function createComponentHook<DOMType extends As<any>, Props extends {} = {}>(useProps: (props: PolymorphicProps<Props & AsProps<DOMType>>) => [DOMProps: HTMLProps<Props & AsProps<DOMType>>]): ComponentHook<Props & AsProps<DOMType>>;
declare function createComponentHook<DOMType extends As<any>, Props extends {} = {}, Ctx = any>(useProps: (props: PolymorphicProps<Props & AsProps<DOMType>>) => [DOMProps: HTMLProps<Props & AsProps<DOMType>>, ContextType: Ctx]): ComponentHookWithContext<Props & AsProps<DOMType>, Ctx>;
declare function createPolymorphicComponent<DOMType extends As<any>, Props extends {} = {}>(render: (props: PolymorphicProps<Props & AsProps<DOMType>>) => React.ReactNode | null): PolymorphicComponent<Props & AsProps<DOMType>>;
type As<Props> = React.ElementType<Props>;
type AsProps<DOMType extends As<any>> = {
    as?: DOMType;
};
type RequiredAs<Props extends AsProps<any>> = NonNullable<Props["as"]>;
type HTMLProps<OwnProps extends AsProps<any>> = {
    children?: React.ReactNode;
    render?: (props: React.HTMLAttributes<any> & React.RefAttributes<any>) => React.ReactNode;
    [index: `data-${string}`]: unknown;
} & Omit<React.ComponentPropsWithRef<RequiredAs<OwnProps>>, keyof OwnProps | "children">;
type PolymorphicProps<OwnProps extends AsProps<any>> = OwnProps & HTMLProps<OwnProps>;
type PolymorphicComponent<Props extends AsProps<any>> = {
    <T extends As<any>>(props: Omit<Props, "as"> & Omit<HTMLProps<AsProps<T>>, keyof Props> & Required<AsProps<T>>): JSX.Element | null;
    (props: PolymorphicProps<Props>): JSX.Element | null;
    readonly $$typeof: symbol;
    displayName?: string;
};
type ComponentHook<Props extends AsProps<any>> = {
    <DOMType extends As<any> = RequiredAs<Props>>(props?: Omit<Props, "as"> & Omit<HTMLProps<AsProps<DOMType>>, keyof Props> & AsProps<DOMType>): [DOMProps: Omit<HTMLProps<AsProps<DOMType>>, "render" | "children">];
    displayName?: string;
};
type ComponentHookWithContext<Props extends AsProps<any>, Ctx> = {
    <DOMType extends As<any> = RequiredAs<Props>>(props?: Omit<Props, "as"> & Omit<HTMLProps<AsProps<DOMType>>, keyof Props> & AsProps<DOMType>): [
        DOMProps: Omit<HTMLProps<AsProps<DOMType>>, "render" | "children">,
        ContextType: Ctx
    ];
    displayName?: string;
};

type ContextProvider<T> = React.FC<React.PropsWithChildren<{
    value: T;
}>>;
type ChildContext<T extends {}> = T & {
    contextIndex: number;
    parentContext: T | undefined;
};
declare function createContext<ContextValueType extends {}>(rootName: string, defaultContext?: ContextValueType | null | undefined): [
    ContextProvider<ContextValueType>,
    (childName: string) => ChildContext<ContextValueType>
];

/**
 * React hook for creating a value exactly once.
 * @see https://github.com/Andarist/use-constant
 */
declare function useConstant<ValueType>(fn: () => ValueType): ValueType;

/**
 * Check if a component is controlled or uncontrolled and return the correct
 * state value and setter accordingly. If the component state is controlled by
 * the app, the setter is a noop.
 *
 * @param controlledValue
 * @param defaultValue
 */
declare function useControlledState<T = any>({ controlledValue, defaultValue, calledFrom, }: {
    controlledValue: T | undefined;
    defaultValue: T | (() => T);
    calledFrom?: string;
}): [T, React.Dispatch<React.SetStateAction<T>>];

/**
 * Converts a callback to a ref to avoid triggering re-renders when passed as a
 * prop and exposed as a stable function to avoid executing effects when passed
 * as a dependency.
 */
declare function useEvent<T extends (...args: any[]) => any>(callback: T | null | undefined): T;

/**
 * Adds a DOM event listener
 *
 * @param eventName
 * @param listener
 * @param element
 */
declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, listener: (event: WindowEventMap[K]) => any, element?: HTMLElement | Document | Window | EventTarget): void;

/**
 * Detect when focus changes in our document.
 *
 * @param handleChange
 * @param when
 * @param ownerDocument
 */
declare function useFocusChange(handleChange?: (activeElement: Element | null, previousActiveElement: Element | null, event?: FocusEvent) => void, when?: "focus" | "blur", ownerDocument?: Document): void;

/**
 * Forces a re-render, similar to `forceUpdate` in class components.
 */
declare function useForceUpdate(): () => void;

/**
 * useId
 *
 * Autogenerate IDs to facilitate WAI-ARIA.
 *
 * The returned ID will initially be `null` and will update after a component
 * mounts. Users will need to supply their own ID if they need consistent values
 * for SSR.
 *
 * @see Docs https://TODO.com
 */
declare function useId(): string | null;
declare function useId(idFromProps: string): string;
declare function useId(idFromProps: number): number;
declare function useId(idFromProps: string | number): string | number;
declare function useId(idFromProps: string | undefined | null): string | null;
declare function useId(idFromProps: number | undefined | null): number | null;
declare function useId(idFromProps: string | number | undefined | null): string | number | null;

/**
 * React currently throws a warning when using useLayoutEffect on the server. To
 * get around it, we can conditionally useEffect on the server (no-op) and
 * useLayoutEffect in the browser. We occasionally need useLayoutEffect to
 * ensure we don't get a render flash for certain operations, but we may also
 * need affected components to render on the server. One example is when setting
 * a component's descendants to retrieve their index values.
 *
 * Important to note that using this hook as an escape hatch will break the
 * eslint dependency warnings unless you rename the import to `useLayoutEffect`.
 * Use sparingly only when the effect won't effect the rendered HTML to avoid
 * any server/client mismatch.
 *
 * If a useLayoutEffect is needed and the result would create a mismatch, it's
 * likely that the component in question shouldn't be rendered on the server at
 * all, so a better approach would be to lazily render those in a parent
 * component after client-side hydration.
 *
 * https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
 * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
 *
 * @param effect
 * @param deps
 */
declare const useIsomorphicLayoutEffect: typeof useEffect;

declare function useLazyRef<F extends (...args: any[]) => any>(fn: F): React.MutableRefObject<ReturnType<F>>;

/**
 * Returns the previous value of a reference after a component update.
 *
 * @param value
 */
declare function usePrevious<ValueType = any>(value: ValueType): ValueType | null;

/**
 * Call an effect after a component update, skipping the initial mount.
 *
 * @param effect Effect to call
 * @param deps Effect dependency list
 */
declare function useUpdateEffect(effect: React.EffectCallback, deps?: React.DependencyList): void;

export { As, AsProps, AssignableRef, ComponentHook, ComponentHookWithContext, ContextProvider, PolymorphicComponent, assignRef, cloneValidElement, createComponentHook, createContext, createPolymorphicComponent, useEvent as unstable_useEvent, useComposedRefs, useConstant, useControlledState, useEventListener, useFocusChange, useForceUpdate, useId, useIsomorphicLayoutEffect, useLazyRef, usePrevious, useUpdateEffect };