import { type MouseEvent } from "react"; import { type UseStateInitializer, type UseStateSetter } from "../types.js"; import { type SimpleHoverModeContext } from "./useHoverModeProvider.js"; /** * @since 6.0.0 */ export interface HoverModeConfigurationOptions extends SimpleHoverModeContext { /** @defaultValue `false` */ disabled?: boolean; /** * This can be used to override the `HoverModeContext`'s hover time. */ hoverTimeout?: number; /** * This can be used to override the `HoverModeContext`'s leave time. */ leaveTimeout?: number; } /** * @since 6.0.0 */ export interface ControlledHoverModeOptions extends HoverModeConfigurationOptions { setVisible: UseStateSetter; } /** * @since 6.0.0 */ export interface ControlledHoverModeImplementation { startShowFlow: (id?: string | MouseEvent) => void; startHideFlow: () => void; clearVisibilityTimeout: () => void; } /** * @since 6.0.0 */ export interface UncontrolledHoverModeOptions extends HoverModeConfigurationOptions { defaultVisible?: UseStateInitializer; } /** * @since 6.0.0 */ export interface UncontrolledHoverModeImplementation extends ControlledHoverModeImplementation { visible: boolean; setVisible: UseStateSetter; } /** * @since 6.0.0 */ export interface HoverModeImplementation extends ControlledHoverModeImplementation { visible?: boolean; setVisible?: UseStateSetter; } /** * The `useHoverMode` hook is used to implement an immediate hover state after * hovering related elements for a short duration. The main use-case is for * showing tooltips immediately after hovering another tooltipped element. * * This relies on creating a context provider using {@link useHoverModeProvider} * to link related elements together. * * @example Example Usage * ```ts * import { type MouseEvent } from "react"; * * import { * type CustomHoverContext, * useCustomHoverContext, * } from "./useCustomHoverContext.jsx"; * * interface CustomHoverModeImplementation { * onMouseEnter: (event: MouseEvent) => void; * onMouseLeave: (event: MouseEvent) => void; * } * * function useCustomHoverMode(): CustomHoverModeImplementation { * const { * animatedOnceRef, * hoverTimeoutRef, * leaveTimeoutRef, * enableHoverMode, * disableHoverMode, * startDisableTimer, * clearDisableTimer, * } = useCustomHoverContext(); * const { * visible, * setVisible, * startShowFlow, * startHideFlow, * clearVisibilityTimeout, * } = useHoverMode({ * hoverTimeout, * hoverTimeoutRef, * leaveTimeout, * leaveTimeoutRef, * enableHoverMode, * disableHoverMode, * startDisableTimer, * clearDisableTimer, * }); * * return { * onMouseEnter(event) { * startShowFlow(event.currentTarget.id); * }, * onMouseLeave(event) { * startHideFlow(); * }, * }; * } * ``` * * @see The `useTooltip` source code for a real world example. * * @since 2.8.0 * @since 5.0.0 This hook no longer returns `handlers` or * `stickyHandlers` and does not hide when an element on the page is clicked. * @since 6.0.0 Requires passing the custom hover mode context to * work. */ export declare function useHoverMode(options: ControlledHoverModeOptions): ControlledHoverModeImplementation; export declare function useHoverMode(options: UncontrolledHoverModeOptions): UncontrolledHoverModeImplementation;