@rocket.chat/fuselage-hooks/dist/useButtonPattern.d.ts

React hooks for Fuselage, Rocket.Chat's design system and UI toolkit

import type { MouseEvent, KeyboardEvent } from 'react';
/**
 * A React hook to make any HTML element behave like an accessible button,
 * allowing it to be activated by both mouse clicks and keyboard (Enter/Spacebar).
 *
 * This hook is particularly useful when you need to use a non-button element (like a div or span)
 * but still want it to be fully accessible to screen readers and keyboard users,
 * adhering to WCAG guidelines.
 *
 * @param onPress The function to call when the element is clicked or activated by keyboard.
 * @returns An object containing props (onClick, onKeyDown, role, tabIndex)
 * to be spread onto the target HTML element.
 *
 * @example
 * // Example for a div acting as a button
 * const handleDivAction = () => console.log('Div button activated!');
 * const divButtonProps = useAccessibleClick(handleDivAction);
 * <div {...divButtonProps} className="my-accessible-div">Click Me</div>
 */
export declare const useButtonPattern: (onPress: (e: MouseEvent<Element> | KeyboardEvent<Element>) => void) => {
    onClick: (e: MouseEvent<Element> | KeyboardEvent<Element>) => void;
    onKeyDown: (event: KeyboardEvent<Element>) => void;
    role: string;
    tabIndex: number;
};
//# sourceMappingURL=useButtonPattern.d.ts.map