@patreon/studio/module/components/ClickArea/index.d.ts

Patreon Studio Design System

import React from 'react';
import type { BaseProps, ChildrenProps, StylableProps } from '~/types/component';
export type ClickAreaProps = BaseProps & StylableProps & Required<ChildrenProps>;
export type AbsorbClickProps = StylableProps & ChildrenProps;
/**
 * When using `ClickArea`, the `AbsorbClick` can be used to absorb events bubbling which should
 * trigger the ClickArea target element. This is useful to nest a link or button inside of a click
 * area which should not trigger the ClickArea.
 */
export declare function AbsorbClick({ style, className, children }: AbsorbClickProps): React.JSX.Element;
/**
 * The useClickArea hook can be used to provide an accessible click area
 * which automatically focuses and clicks a provided element without
 * adding unnecessary elements to the accessbility tree.
 */
export declare function useClickArea<TargetElementType extends HTMLButtonElement>(): {
    /**
     * An element to wrap around full clickable area which will
     * forward click events to the targetElement
     */
    ClickArea: React.FunctionComponent<ClickAreaProps>;
    /**
     * Ref to the element which the ClickArea should forward
     * click events when activated
     */
    targetElementRef: React.Ref<TargetElementType>;
};