Spaces:
Sleeping
Sleeping
File size: 4,452 Bytes
56fda74 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 |
import * as React from 'react';
import { SxProps } from '@mui/system';
import { Theme } from '../styles';
import { TouchRippleActions, TouchRippleProps } from './TouchRipple';
import { OverrideProps, OverridableComponent, OverridableTypeMap } from '../OverridableComponent';
import { ButtonBaseClasses } from './buttonBaseClasses';
export interface ButtonBaseOwnProps {
/**
* A ref for imperative actions.
* It currently only supports `focusVisible()` action.
*/
action?: React.Ref<ButtonBaseActions>;
/**
* If `true`, the ripples are centered.
* They won't start at the cursor interaction position.
* @default false
*/
centerRipple?: boolean;
/**
* The content of the component.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<ButtonBaseClasses>;
/**
* If `true`, the component is disabled.
* @default false
*/
disabled?: boolean;
/**
* If `true`, the ripple effect is disabled.
*
* ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
* to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
* @default false
*/
disableRipple?: boolean;
/**
* If `true`, the touch ripple effect is disabled.
* @default false
*/
disableTouchRipple?: boolean;
/**
* If `true`, the base button will have a keyboard focus ripple.
* @default false
*/
focusRipple?: boolean;
/**
* This prop can help identify which element has keyboard focus.
* The class name will be applied when the element gains the focus through keyboard interaction.
* It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
* The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
* A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
* if needed.
*/
focusVisibleClassName?: string;
/**
* The component used to render a link when the `href` prop is provided.
* @default 'a'
*/
LinkComponent?: React.ElementType;
/**
* Callback fired when the component is focused with a keyboard.
* We trigger a `onFocus` callback too.
*/
onFocusVisible?: React.FocusEventHandler<any>;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* @default 0
*/
tabIndex?: NonNullable<React.HTMLAttributes<any>['tabIndex']>;
/**
* Props applied to the `TouchRipple` element.
*/
TouchRippleProps?: Partial<TouchRippleProps>;
/**
* A ref that points to the `TouchRipple` element.
*/
touchRippleRef?: React.Ref<TouchRippleActions>;
}
export interface ButtonBaseTypeMap<
AdditionalProps = {},
RootComponent extends React.ElementType = 'button',
> {
props: AdditionalProps & ButtonBaseOwnProps;
defaultComponent: RootComponent;
}
/**
* utility to create component types that inherit props from ButtonBase.
* This component has an additional overload if the `href` prop is set which
* can make extension quite tricky
*/
export interface ExtendButtonBaseTypeMap<TypeMap extends OverridableTypeMap> {
props: TypeMap['props'] & Omit<ButtonBaseTypeMap['props'], 'classes'>;
defaultComponent: TypeMap['defaultComponent'];
}
export type ExtendButtonBase<TypeMap extends OverridableTypeMap> = ((
props: { href: string } & OverrideProps<ExtendButtonBaseTypeMap<TypeMap>, 'a'>,
) => React.JSX.Element) &
OverridableComponent<ExtendButtonBaseTypeMap<TypeMap>>;
/**
* `ButtonBase` contains as few styles as possible.
* It aims to be a simple building block for creating a button.
* It contains a load of style reset and some focus/ripple logic.
*
* Demos:
*
* - [Button](https://mui.com/material-ui/react-button/)
*
* API:
*
* - [ButtonBase API](https://mui.com/material-ui/api/button-base/)
*/
declare const ButtonBase: ExtendButtonBase<ButtonBaseTypeMap>;
export type ButtonBaseProps<
RootComponent extends React.ElementType = ButtonBaseTypeMap['defaultComponent'],
AdditionalProps = {},
> = OverrideProps<ButtonBaseTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export interface ButtonBaseActions {
focusVisible(): void;
}
export default ButtonBase;
|