matrix-react-sdk/lib/src/components/views/elements/AccessibleButton.d.ts

SDK for matrix.org using React

import React, { ComponentProps, HTMLAttributes, InputHTMLAttributes } from "react";
import { Tooltip } from "@vector-im/compound-web";
export type ButtonEvent = React.MouseEvent<Element> | React.KeyboardEvent<Element> | React.FormEvent<Element>;
/**
 * The kind of button, similar to how Bootstrap works.
 */
export type AccessibleButtonKind = "primary" | "primary_outline" | "primary_sm" | "secondary" | "secondary_content" | "content_inline" | "danger" | "danger_outline" | "danger_sm" | "danger_inline" | "link" | "link_inline" | "link_sm" | "confirm_sm" | "cancel_sm" | "icon" | "icon_primary" | "icon_primary_outline";
/**
 * This type construct allows us to specifically pass those props down to the element we’re creating that the element
 * actually supports.
 *
 * e.g., if element is set to "a", we’ll support href and target, if it’s set to "input", we support type.
 *
 * To remain compatible with existing code, we’ll continue to support InputHTMLAttributes<Element>
 */
type DynamicHtmlElementProps<T extends keyof JSX.IntrinsicElements> = JSX.IntrinsicElements[T] extends HTMLAttributes<{}> ? DynamicElementProps<T> : DynamicElementProps<"div">;
type DynamicElementProps<T extends keyof JSX.IntrinsicElements> = Partial<Omit<JSX.IntrinsicElements[T], "ref" | "onClick" | "onMouseDown" | "onKeyUp" | "onKeyDown">> & Omit<InputHTMLAttributes<Element>, "onClick">;
type TooltipProps = ComponentProps<typeof Tooltip>;
/**
 * Type of props accepted by {@link AccessibleButton}.
 *
 * Extends props accepted by the underlying element specified using the `element` prop.
 */
type Props<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T> & {
    /**
     * The base element type. "div" by default.
     */
    element?: T;
    /**
     * The kind of button, similar to how Bootstrap works.
     */
    kind?: AccessibleButtonKind;
    /**
     * Whether the button should be disabled.
     */
    disabled?: boolean;
    /**
     * Whether the button should trigger on mousedown event instead of on click event. Defaults to false (click event).
     */
    triggerOnMouseDown?: boolean;
    /**
     * Event handler for button activation. Should be implemented exactly like a normal `onClick` handler.
     */
    onClick: ((e: ButtonEvent) => void | Promise<void>) | null;
    /**
     * The tooltip to show on hover or focus.
     */
    title?: TooltipProps["label"];
    /**
     * The caption is a secondary text displayed under the `title` of the tooltip.
     * Only valid when used in conjunction with `title`.
     */
    caption?: TooltipProps["caption"];
    /**
     * The placement of the tooltip.
     */
    placement?: TooltipProps["placement"];
    /**
     * Callback for when the tooltip is opened or closed.
     */
    onTooltipOpenChange?: TooltipProps["onOpenChange"];
    /**
     * Whether the tooltip should be disabled.
     */
    disableTooltip?: TooltipProps["disabled"];
};
export type ButtonProps<T extends keyof JSX.IntrinsicElements> = Props<T>;
/**
 * AccessibleButton is a generic wrapper for any element that should be treated
 * as a button.  Identifies the element as a button, setting proper tab
 * indexing and keyboard activation behavior.
 *
 * If a ref is passed, it will be forwarded to the rendered element as specified using the `element` prop.
 *
 * @param {Object} props  react element properties
 * @returns {Object} rendered react
 */
declare const AccessibleButton: <T extends keyof JSX.IntrinsicElements>(props: DynamicHtmlElementProps<T> & {
    /**
     * The base element type. "div" by default.
     */
    element?: T | undefined;
    /**
     * The kind of button, similar to how Bootstrap works.
     */
    kind?: AccessibleButtonKind;
    /**
     * Whether the button should be disabled.
     */
    disabled?: boolean;
    /**
     * Whether the button should trigger on mousedown event instead of on click event. Defaults to false (click event).
     */
    triggerOnMouseDown?: boolean;
    /**
     * Event handler for button activation. Should be implemented exactly like a normal `onClick` handler.
     */
    onClick: ((e: ButtonEvent) => void | Promise<void>) | null;
    /**
     * The tooltip to show on hover or focus.
     */
    title?: TooltipProps["label"];
    /**
     * The caption is a secondary text displayed under the `title` of the tooltip.
     * Only valid when used in conjunction with `title`.
     */
    caption?: TooltipProps["caption"];
    /**
     * The placement of the tooltip.
     */
    placement?: TooltipProps["placement"];
    /**
     * Callback for when the tooltip is opened or closed.
     */
    onTooltipOpenChange?: TooltipProps["onOpenChange"];
    /**
     * Whether the tooltip should be disabled.
     */
    disableTooltip?: TooltipProps["disabled"];
} & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
export default AccessibleButton;