1 | import * as React from 'react';
|
2 | import { TouchRippleProps } from './TouchRipple';
|
3 | import { OverrideProps, OverridableComponent, OverridableTypeMap } from '../OverridableComponent';
|
4 |
|
5 | export interface ButtonBaseTypeMap<P = {}, D extends React.ElementType = 'button'> {
|
6 | props: P & {
|
7 | /**
|
8 | * A ref for imperative actions.
|
9 | * It currently only supports `focusVisible()` action.
|
10 | */
|
11 | action?: React.Ref<ButtonBaseActions>;
|
12 | /**
|
13 | * @ignore
|
14 | *
|
15 | * Use that prop to pass a ref to the native button component.
|
16 | * @deprecated Use `ref` instead.
|
17 | */
|
18 | buttonRef?: React.Ref<unknown>;
|
19 | /**
|
20 | * If `true`, the ripples will be centered.
|
21 | * They won't start at the cursor interaction position.
|
22 | */
|
23 | centerRipple?: boolean;
|
24 | /**
|
25 | * The content of the component.
|
26 | */
|
27 | children?: React.ReactNode;
|
28 | /**
|
29 | * If `true`, the base button will be disabled.
|
30 | */
|
31 | disabled?: boolean;
|
32 | /**
|
33 | * If `true`, the ripple effect will be disabled.
|
34 | *
|
35 | * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
|
36 | * to highlight the element by applying separate styles with the `focusVisibleClassName`.
|
37 | */
|
38 | disableRipple?: boolean;
|
39 | /**
|
40 | * If `true`, the touch ripple effect will be disabled.
|
41 | */
|
42 | disableTouchRipple?: boolean;
|
43 | /**
|
44 | * If `true`, the base button will have a keyboard focus ripple.
|
45 | */
|
46 | focusRipple?: boolean;
|
47 | /**
|
48 | * This prop can help identify which element has keyboard focus.
|
49 | * The class name will be applied when the element gains the focus through keyboard interaction.
|
50 | * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
|
51 | * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md).
|
52 | * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
|
53 | * if needed.
|
54 | */
|
55 | focusVisibleClassName?: string;
|
56 | /**
|
57 | * Callback fired when the component is focused with a keyboard.
|
58 | * We trigger a `onFocus` callback too.
|
59 | */
|
60 | onFocusVisible?: React.FocusEventHandler<any>;
|
61 | // @types/react is stricter
|
62 | tabIndex?: string | number;
|
63 | /**
|
64 | * Props applied to the `TouchRipple` element.
|
65 | */
|
66 | TouchRippleProps?: Partial<TouchRippleProps>;
|
67 | };
|
68 | defaultComponent: D;
|
69 | classKey: ButtonBaseClassKey;
|
70 | }
|
71 |
|
72 | /**
|
73 | * utility to create component types that inherit props from ButtonBase.
|
74 | * This component has an additional overload if the `href` prop is set which
|
75 | * can make extension quite tricky
|
76 | */
|
77 | export interface ExtendButtonBaseTypeMap<M extends OverridableTypeMap> {
|
78 | props: M['props'] & ButtonBaseTypeMap['props'];
|
79 | defaultComponent: M['defaultComponent'];
|
80 | classKey: M['classKey'];
|
81 | }
|
82 |
|
83 | export type ExtendButtonBase<M extends OverridableTypeMap> = ((
|
84 | props: { href: string } & OverrideProps<ExtendButtonBaseTypeMap<M>, 'a'>
|
85 | ) => JSX.Element) &
|
86 | OverridableComponent<ExtendButtonBaseTypeMap<M>>;
|
87 |
|
88 | /**
|
89 | * `ButtonBase` contains as few styles as possible.
|
90 | * It aims to be a simple building block for creating a button.
|
91 | * It contains a load of style reset and some focus/ripple logic.
|
92 | * Demos:
|
93 | *
|
94 | * - [Buttons](https://mui.com/components/buttons/)
|
95 | *
|
96 | * API:
|
97 | *
|
98 | * - [ButtonBase API](https://mui.com/api/button-base/)
|
99 | */
|
100 | declare const ButtonBase: ExtendButtonBase<ButtonBaseTypeMap>;
|
101 |
|
102 | export type ButtonBaseProps<
|
103 | D extends React.ElementType = ButtonBaseTypeMap['defaultComponent'],
|
104 | P = {}
|
105 | > = OverrideProps<ButtonBaseTypeMap<P, D>, D>;
|
106 |
|
107 | export type ButtonBaseClassKey = 'root' | 'disabled' | 'focusVisible';
|
108 |
|
109 | export interface ButtonBaseActions {
|
110 | focusVisible(): void;
|
111 | }
|
112 |
|
113 | export default ButtonBase;
|