@yamada-ui/use-clickable/dist/index.d.ts

Yamada UI useClickable custom hook

import * as react from 'react';
import { HTMLAttributes, Ref, MouseEvent, KeyboardEvent } from 'react';
import { UIProps } from '@yamada-ui/core';

type Props<Y extends HTMLElement = HTMLElement> = Omit<HTMLAttributes<Y>, "ref" | "size" | keyof UIProps>;
type UseClickableProps<Y extends HTMLElement = HTMLElement, M extends Props<Y> = Props<Y>> = {
    /**
     * The ref for the element.
     */
    ref?: Ref<Y>;
    /**
     * Whether or not trigger click on pressing `Enter`.
     *
     * @default true
     */
    clickOnEnter?: boolean;
    /**
     * Whether or not trigger click on pressing `Space`.
     *
     * @default true
     */
    clickOnSpace?: boolean;
    /**
     * If `true`, the element will be disabled. It will set the `disabled` HTML attribute.
     *
     * @default false
     */
    disabled?: boolean;
    /**
     * Disable the touch device behavior.
     *
     * @default true
     */
    disableTouchBehavior?: boolean;
    /**
     * If `true` and isDisabled, the element will have only `aria-disabled` set to `true`.
     *
     * @default false
     */
    focusable?: boolean;
    /**
     * Whether or not to focus the element when it is clicked.
     * If `true`, the element will receive focus upon click.
     *
     * @default true
     */
    focusOnClick?: boolean;
    /**
     * If `true`, the element will be disabled. It will set the `disabled` HTML attribute.
     *
     * @default false
     *
     * @deprecated Use `disabled` instead.
     */
    isDisabled?: boolean;
    /**
     * If `true` and isDisabled, the element will have only `aria-disabled` set to `true`.
     *
     * @default false
     *
     * @deprecated Use `focusable` instead.
     */
    isFocusable?: boolean;
} & M;
declare const useClickable: <Y extends HTMLElement = HTMLElement, M extends Props<Y> = Props<Y>>({ ref, clickOnEnter, clickOnSpace, isDisabled, disabled, disableTouchBehavior, isFocusable, focusable, focusOnClick, tabIndex: _tabIndex, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseLeave, onMouseOver, onMouseUp, ...props }?: UseClickableProps<Y, M>) => (Omit<UseClickableProps<Y, M>, "ref" | "tabIndex" | "onKeyDown" | "onKeyUp" | "onClick" | "onMouseDown" | "onMouseLeave" | "onMouseOver" | "onMouseUp" | "clickOnEnter" | "clickOnSpace" | "isDisabled" | "disabled" | "disableTouchBehavior" | "isFocusable" | "focusable" | "focusOnClick"> & {
    ref: (node: any) => void;
    type: string;
    "aria-disabled": boolean | undefined;
    disabled: boolean | undefined;
    onClick: (ev: MouseEvent<Y>) => void;
    onKeyDown: react.KeyboardEventHandler<Y> | undefined;
    onKeyUp: react.KeyboardEventHandler<Y> | undefined;
    onMouseDown: react.MouseEventHandler<Y> | undefined;
    onMouseLeave: react.MouseEventHandler<Y> | undefined;
    onMouseOver: react.MouseEventHandler<Y> | undefined;
    onMouseUp: react.MouseEventHandler<Y> | undefined;
}) | (Omit<UseClickableProps<Y, M>, "ref" | "tabIndex" | "onKeyDown" | "onKeyUp" | "onClick" | "onMouseDown" | "onMouseLeave" | "onMouseOver" | "onMouseUp" | "clickOnEnter" | "clickOnSpace" | "isDisabled" | "disabled" | "disableTouchBehavior" | "isFocusable" | "focusable" | "focusOnClick"> & {
    ref: (node: any) => void;
    "aria-disabled": "true" | undefined;
    "data-active": boolean | "true" | "false";
    role: string;
    tabIndex: number | undefined;
    onClick: (ev: MouseEvent<Y>) => void;
    onKeyDown: (ev: KeyboardEvent<Y>) => void;
    onKeyUp: (ev: KeyboardEvent<Y>) => void;
    onMouseDown: (ev: MouseEvent<Y>) => void;
    onMouseLeave: (ev: MouseEvent<Y>) => void;
    onMouseOver: (ev: MouseEvent<Y>) => void;
    onMouseUp: (ev: MouseEvent<Y>) => void;
});
type UseClickableReturn = ReturnType<typeof useClickable>;

export { type UseClickableProps, type UseClickableReturn, useClickable };