@mui/material 9.0.0-beta.0 → 9.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Accordion/Accordion.d.mts +4 -4
- package/Accordion/Accordion.d.ts +4 -4
- package/AccordionActions/AccordionActions.d.mts +2 -2
- package/AccordionActions/AccordionActions.d.ts +2 -2
- package/AccordionDetails/AccordionDetails.d.mts +2 -2
- package/AccordionDetails/AccordionDetails.d.ts +2 -2
- package/AccordionSummary/AccordionSummary.d.mts +3 -3
- package/AccordionSummary/AccordionSummary.d.ts +3 -3
- package/AccordionSummary/AccordionSummary.js +1 -0
- package/AccordionSummary/AccordionSummary.mjs +1 -0
- package/Alert/Alert.d.mts +3 -3
- package/Alert/Alert.d.ts +3 -3
- package/AlertTitle/AlertTitle.d.mts +3 -3
- package/AlertTitle/AlertTitle.d.ts +3 -3
- package/AppBar/AppBar.d.mts +3 -3
- package/AppBar/AppBar.d.ts +3 -3
- package/Autocomplete/Autocomplete.d.mts +2 -2
- package/Autocomplete/Autocomplete.d.ts +2 -2
- package/Avatar/Avatar.d.mts +2 -2
- package/Avatar/Avatar.d.ts +2 -2
- package/AvatarGroup/AvatarGroup.d.mts +2 -2
- package/AvatarGroup/AvatarGroup.d.ts +2 -2
- package/Backdrop/Backdrop.d.mts +4 -4
- package/Backdrop/Backdrop.d.ts +4 -4
- package/Badge/Badge.d.mts +3 -3
- package/Badge/Badge.d.ts +3 -3
- package/BottomNavigation/BottomNavigation.d.mts +2 -2
- package/BottomNavigation/BottomNavigation.d.ts +2 -2
- package/BottomNavigationAction/BottomNavigationAction.d.mts +3 -3
- package/BottomNavigationAction/BottomNavigationAction.d.ts +3 -3
- package/BottomNavigationAction/BottomNavigationAction.js +1 -0
- package/BottomNavigationAction/BottomNavigationAction.mjs +1 -0
- package/Box/Box.d.mts +3 -3
- package/Box/Box.d.ts +3 -3
- package/Breadcrumbs/BreadcrumbCollapsed.js +5 -1
- package/Breadcrumbs/BreadcrumbCollapsed.mjs +5 -1
- package/Breadcrumbs/Breadcrumbs.d.mts +3 -3
- package/Breadcrumbs/Breadcrumbs.d.ts +3 -3
- package/Button/Button.d.mts +6 -6
- package/Button/Button.d.ts +6 -6
- package/Button/Button.js +1 -0
- package/Button/Button.mjs +1 -0
- package/ButtonBase/ButtonBase.d.mts +7 -2
- package/ButtonBase/ButtonBase.d.ts +7 -2
- package/ButtonBase/ButtonBase.js +84 -85
- package/ButtonBase/ButtonBase.mjs +84 -85
- package/ButtonBase/useButtonBase.d.mts +91 -0
- package/ButtonBase/useButtonBase.d.ts +91 -0
- package/ButtonBase/useButtonBase.js +174 -0
- package/ButtonBase/useButtonBase.mjs +167 -0
- package/ButtonGroup/ButtonGroup.d.mts +2 -2
- package/ButtonGroup/ButtonGroup.d.ts +2 -2
- package/CHANGELOG.md +76 -0
- package/Card/Card.d.mts +3 -3
- package/Card/Card.d.ts +3 -3
- package/CardActionArea/CardActionArea.d.mts +3 -3
- package/CardActionArea/CardActionArea.d.ts +3 -3
- package/CardActionArea/CardActionArea.js +1 -0
- package/CardActionArea/CardActionArea.mjs +1 -0
- package/CardActions/CardActions.d.mts +2 -2
- package/CardActions/CardActions.d.ts +2 -2
- package/CardContent/CardContent.d.mts +2 -2
- package/CardContent/CardContent.d.ts +2 -2
- package/CardHeader/CardHeader.d.mts +2 -2
- package/CardHeader/CardHeader.d.ts +2 -2
- package/CardMedia/CardMedia.d.mts +2 -2
- package/CardMedia/CardMedia.d.ts +2 -2
- package/Checkbox/Checkbox.d.mts +4 -4
- package/Checkbox/Checkbox.d.ts +4 -4
- package/Chip/Chip.d.mts +9 -2
- package/Chip/Chip.d.ts +9 -2
- package/Chip/Chip.js +18 -1
- package/Chip/Chip.mjs +18 -1
- package/CircularProgress/CircularProgress.d.mts +2 -2
- package/CircularProgress/CircularProgress.d.ts +2 -2
- package/ClickAwayListener/ClickAwayListener.d.mts +3 -3
- package/ClickAwayListener/ClickAwayListener.d.ts +3 -3
- package/ClickAwayListener/ClickAwayListener.js +3 -3
- package/ClickAwayListener/ClickAwayListener.mjs +3 -3
- package/Collapse/Collapse.d.mts +5 -5
- package/Collapse/Collapse.d.ts +5 -5
- package/Collapse/Collapse.js +6 -18
- package/Collapse/Collapse.mjs +7 -19
- package/Container/Container.d.mts +2 -2
- package/Container/Container.d.ts +2 -2
- package/CssBaseline/CssBaseline.d.mts +2 -2
- package/CssBaseline/CssBaseline.d.ts +2 -2
- package/Dialog/Dialog.d.mts +11 -4
- package/Dialog/Dialog.d.ts +11 -4
- package/Dialog/Dialog.js +9 -1
- package/Dialog/Dialog.mjs +9 -1
- package/DialogActions/DialogActions.d.mts +2 -2
- package/DialogActions/DialogActions.d.ts +2 -2
- package/DialogContent/DialogContent.d.mts +2 -2
- package/DialogContent/DialogContent.d.ts +2 -2
- package/DialogContentText/DialogContentText.d.mts +3 -3
- package/DialogContentText/DialogContentText.d.ts +3 -3
- package/DialogTitle/DialogTitle.d.mts +3 -3
- package/DialogTitle/DialogTitle.d.ts +3 -3
- package/Divider/Divider.d.mts +4 -4
- package/Divider/Divider.d.ts +4 -4
- package/Divider/Divider.js +0 -8
- package/Divider/Divider.mjs +0 -8
- package/Drawer/Drawer.d.mts +4 -4
- package/Drawer/Drawer.d.ts +4 -4
- package/Drawer/Drawer.js +1 -4
- package/Drawer/Drawer.mjs +1 -4
- package/Fab/Fab.d.mts +3 -3
- package/Fab/Fab.d.ts +3 -3
- package/Fab/Fab.js +1 -0
- package/Fab/Fab.mjs +1 -0
- package/Fade/Fade.d.mts +3 -3
- package/Fade/Fade.d.ts +3 -3
- package/Fade/Fade.js +28 -32
- package/Fade/Fade.mjs +29 -33
- package/FilledInput/FilledInput.d.mts +3 -3
- package/FilledInput/FilledInput.d.ts +3 -3
- package/FilledInput/FilledInput.js +1 -1
- package/FilledInput/FilledInput.mjs +1 -1
- package/FormControl/FormControl.d.mts +7 -7
- package/FormControl/FormControl.d.ts +7 -7
- package/FormControlLabel/FormControlLabel.d.mts +4 -4
- package/FormControlLabel/FormControlLabel.d.ts +4 -4
- package/FormGroup/FormGroup.d.mts +3 -3
- package/FormGroup/FormGroup.d.ts +3 -3
- package/FormHelperText/FormHelperText.d.mts +3 -3
- package/FormHelperText/FormHelperText.d.ts +3 -3
- package/FormLabel/FormLabel.d.mts +5 -5
- package/FormLabel/FormLabel.d.ts +5 -5
- package/GlobalStyles/GlobalStyles.d.mts +2 -2
- package/GlobalStyles/GlobalStyles.d.ts +2 -2
- package/Grid/Grid.d.mts +10 -5
- package/Grid/Grid.d.ts +10 -5
- package/Grid/Grid.js +10 -5
- package/Grid/Grid.mjs +10 -5
- package/Grid/gridClasses.js +1 -1
- package/Grid/gridClasses.mjs +1 -1
- package/Grow/Grow.d.mts +5 -5
- package/Grow/Grow.d.ts +5 -5
- package/Grow/Grow.js +30 -38
- package/Grow/Grow.mjs +31 -39
- package/Icon/Icon.d.mts +3 -3
- package/Icon/Icon.d.ts +3 -3
- package/IconButton/IconButton.d.mts +5 -5
- package/IconButton/IconButton.d.ts +5 -5
- package/IconButton/IconButton.js +1 -0
- package/IconButton/IconButton.mjs +1 -0
- package/ImageList/ImageList.d.mts +2 -2
- package/ImageList/ImageList.d.ts +2 -2
- package/ImageListItem/ImageListItem.d.mts +2 -2
- package/ImageListItem/ImageListItem.d.ts +2 -2
- package/ImageListItemBar/ImageListItemBar.d.mts +2 -2
- package/ImageListItemBar/ImageListItemBar.d.ts +2 -2
- package/InitColorSchemeScript/InitColorSchemeScript.d.mts +2 -2
- package/InitColorSchemeScript/InitColorSchemeScript.d.ts +2 -2
- package/InitColorSchemeScript/InitColorSchemeScript.js +2 -2
- package/InitColorSchemeScript/InitColorSchemeScript.mjs +2 -2
- package/Input/Input.d.mts +3 -3
- package/Input/Input.d.ts +3 -3
- package/Input/Input.js +1 -1
- package/Input/Input.mjs +1 -1
- package/InputAdornment/InputAdornment.d.mts +2 -2
- package/InputAdornment/InputAdornment.d.ts +2 -2
- package/InputAdornment/inputAdornmentClasses.d.mts +2 -2
- package/InputAdornment/inputAdornmentClasses.d.ts +2 -2
- package/InputBase/InputBase.d.mts +2 -2
- package/InputBase/InputBase.d.ts +2 -2
- package/InputLabel/InputLabel.d.mts +4 -4
- package/InputLabel/InputLabel.d.ts +4 -4
- package/LinearProgress/LinearProgress.d.mts +2 -2
- package/LinearProgress/LinearProgress.d.ts +2 -2
- package/Link/Link.d.mts +4 -4
- package/Link/Link.d.ts +4 -4
- package/List/List.d.mts +4 -4
- package/List/List.d.ts +4 -4
- package/ListItem/ListItem.d.mts +3 -3
- package/ListItem/ListItem.d.ts +3 -3
- package/ListItem/ListItem.js +1 -2
- package/ListItem/ListItem.mjs +1 -2
- package/ListItemAvatar/ListItemAvatar.d.mts +2 -2
- package/ListItemAvatar/ListItemAvatar.d.ts +2 -2
- package/ListItemButton/ListItemButton.d.mts +4 -4
- package/ListItemButton/ListItemButton.d.ts +4 -4
- package/ListItemButton/ListItemButton.js +1 -0
- package/ListItemButton/ListItemButton.mjs +1 -0
- package/ListItemIcon/ListItemIcon.d.mts +3 -3
- package/ListItemIcon/ListItemIcon.d.ts +3 -3
- package/ListItemIcon/ListItemIcon.js +1 -1
- package/ListItemIcon/ListItemIcon.mjs +1 -1
- package/ListItemSecondaryAction/ListItemSecondaryAction.d.mts +2 -2
- package/ListItemSecondaryAction/ListItemSecondaryAction.d.ts +2 -2
- package/ListItemText/ListItemText.d.mts +3 -3
- package/ListItemText/ListItemText.d.ts +3 -3
- package/ListSubheader/ListSubheader.d.mts +3 -3
- package/ListSubheader/ListSubheader.d.ts +3 -3
- package/ListSubheader/ListSubheader.js +0 -3
- package/ListSubheader/ListSubheader.mjs +0 -3
- package/Menu/Menu.d.mts +5 -5
- package/Menu/Menu.d.ts +5 -5
- package/Menu/Menu.js +15 -32
- package/Menu/Menu.mjs +15 -32
- package/MenuItem/MenuItem.d.mts +3 -3
- package/MenuItem/MenuItem.d.ts +3 -3
- package/MenuItem/MenuItem.js +36 -26
- package/MenuItem/MenuItem.mjs +34 -26
- package/MenuList/MenuList.d.mts +4 -4
- package/MenuList/MenuList.d.ts +4 -4
- package/MenuList/MenuList.js +136 -101
- package/MenuList/MenuList.mjs +135 -100
- package/MenuList/MenuListContext.d.mts +11 -0
- package/MenuList/MenuListContext.d.ts +11 -0
- package/MenuList/MenuListContext.js +25 -0
- package/MenuList/MenuListContext.mjs +19 -0
- package/MobileStepper/MobileStepper.d.mts +3 -3
- package/MobileStepper/MobileStepper.d.ts +3 -3
- package/Modal/Modal.d.mts +7 -7
- package/Modal/Modal.d.ts +7 -7
- package/NativeSelect/NativeSelect.d.mts +3 -3
- package/NativeSelect/NativeSelect.d.ts +3 -3
- package/NoSsr/NoSsr.d.mts +2 -2
- package/NoSsr/NoSsr.d.ts +2 -2
- package/NoSsr/NoSsr.js +2 -2
- package/NoSsr/NoSsr.mjs +2 -2
- package/OutlinedInput/OutlinedInput.d.mts +4 -4
- package/OutlinedInput/OutlinedInput.d.ts +4 -4
- package/Pagination/Pagination.d.mts +2 -2
- package/Pagination/Pagination.d.ts +2 -2
- package/PaginationItem/PaginationItem.d.mts +8 -3
- package/PaginationItem/PaginationItem.d.ts +8 -3
- package/PaginationItem/PaginationItem.js +6 -0
- package/PaginationItem/PaginationItem.mjs +6 -0
- package/Paper/Paper.d.mts +4 -4
- package/Paper/Paper.d.ts +4 -4
- package/PigmentContainer/PigmentContainer.d.mts +2 -2
- package/PigmentContainer/PigmentContainer.d.ts +2 -2
- package/PigmentContainer/PigmentContainer.js +2 -2
- package/PigmentContainer/PigmentContainer.mjs +2 -2
- package/PigmentGrid/PigmentGrid.d.mts +3 -3
- package/PigmentGrid/PigmentGrid.d.ts +3 -3
- package/PigmentGrid/PigmentGrid.js +3 -3
- package/PigmentGrid/PigmentGrid.mjs +3 -3
- package/PigmentStack/PigmentStack.d.mts +2 -2
- package/PigmentStack/PigmentStack.d.ts +2 -2
- package/PigmentStack/PigmentStack.js +2 -2
- package/PigmentStack/PigmentStack.mjs +2 -2
- package/Popover/Popover.d.mts +5 -5
- package/Popover/Popover.d.ts +5 -5
- package/Popover/Popover.js +19 -7
- package/Popover/Popover.mjs +18 -6
- package/Popper/Popper.d.mts +4 -4
- package/Popper/Popper.d.ts +4 -4
- package/Popper/Popper.js +4 -4
- package/Popper/Popper.mjs +4 -4
- package/Portal/Portal.d.mts +2 -2
- package/Portal/Portal.d.ts +2 -2
- package/Portal/Portal.js +2 -2
- package/Portal/Portal.mjs +2 -2
- package/README.md +3 -3
- package/Radio/Radio.d.mts +3 -3
- package/Radio/Radio.d.ts +3 -3
- package/RadioGroup/RadioGroup.d.mts +3 -3
- package/RadioGroup/RadioGroup.d.ts +3 -3
- package/Rating/Rating.d.mts +2 -2
- package/Rating/Rating.d.ts +2 -2
- package/ScopedCssBaseline/ScopedCssBaseline.d.mts +2 -2
- package/ScopedCssBaseline/ScopedCssBaseline.d.ts +2 -2
- package/Select/Select.d.mts +3 -3
- package/Select/Select.d.ts +3 -3
- package/Skeleton/Skeleton.d.mts +2 -2
- package/Skeleton/Skeleton.d.ts +2 -2
- package/Slide/Slide.d.mts +4 -4
- package/Slide/Slide.d.ts +4 -4
- package/Slide/Slide.js +43 -42
- package/Slide/Slide.mjs +44 -44
- package/Slider/Slider.d.mts +4 -4
- package/Slider/Slider.d.ts +4 -4
- package/Slider/Slider.js +1 -1
- package/Slider/Slider.mjs +1 -1
- package/Slider/useSlider.d.mts +1 -1
- package/Slider/useSlider.d.ts +1 -1
- package/Slider/useSlider.js +235 -209
- package/Slider/useSlider.mjs +235 -209
- package/Slider/useSlider.types.d.mts +2 -2
- package/Slider/useSlider.types.d.ts +2 -2
- package/Snackbar/Snackbar.d.mts +3 -3
- package/Snackbar/Snackbar.d.ts +3 -3
- package/SnackbarContent/SnackbarContent.d.mts +3 -3
- package/SnackbarContent/SnackbarContent.d.ts +3 -3
- package/SpeedDial/SpeedDial.d.mts +3 -3
- package/SpeedDial/SpeedDial.d.ts +3 -3
- package/SpeedDialAction/SpeedDialAction.d.mts +3 -3
- package/SpeedDialAction/SpeedDialAction.d.ts +3 -3
- package/SpeedDialIcon/SpeedDialIcon.d.mts +2 -2
- package/SpeedDialIcon/SpeedDialIcon.d.ts +2 -2
- package/Stack/Stack.d.mts +2 -2
- package/Stack/Stack.d.ts +2 -2
- package/Step/Step.d.mts +2 -2
- package/Step/Step.d.ts +2 -2
- package/StepButton/StepButton.d.mts +3 -3
- package/StepButton/StepButton.d.ts +3 -3
- package/StepButton/StepButton.js +44 -14
- package/StepButton/StepButton.mjs +44 -14
- package/StepConnector/StepConnector.d.mts +2 -2
- package/StepConnector/StepConnector.d.ts +2 -2
- package/StepConnector/StepConnector.js +1 -2
- package/StepConnector/StepConnector.mjs +1 -2
- package/StepContent/StepContent.d.mts +3 -3
- package/StepContent/StepContent.d.ts +3 -3
- package/StepIcon/StepIcon.d.mts +3 -3
- package/StepIcon/StepIcon.d.ts +3 -3
- package/StepLabel/StepLabel.d.mts +2 -2
- package/StepLabel/StepLabel.d.ts +2 -2
- package/Stepper/Stepper.d.mts +2 -2
- package/Stepper/Stepper.d.ts +2 -2
- package/Stepper/Stepper.js +54 -22
- package/Stepper/Stepper.mjs +54 -22
- package/Stepper/StepperContext.d.mts +0 -5
- package/Stepper/StepperContext.d.ts +0 -5
- package/Stepper/StepperContext.js +1 -2
- package/Stepper/StepperContext.mjs +0 -1
- package/SvgIcon/SvgIcon.d.mts +3 -3
- package/SvgIcon/SvgIcon.d.ts +3 -3
- package/SwipeableDrawer/SwipeableDrawer.d.mts +3 -3
- package/SwipeableDrawer/SwipeableDrawer.d.ts +3 -3
- package/SwipeableDrawer/SwipeableDrawer.js +0 -3
- package/SwipeableDrawer/SwipeableDrawer.mjs +0 -3
- package/Switch/Switch.d.mts +4 -4
- package/Switch/Switch.d.ts +4 -4
- package/Switch/Switch.js +4 -0
- package/Switch/Switch.mjs +4 -0
- package/Tab/Tab.d.mts +3 -3
- package/Tab/Tab.d.ts +3 -3
- package/Tab/Tab.js +17 -1
- package/Tab/Tab.mjs +17 -1
- package/TabScrollButton/TabScrollButton.d.mts +3 -3
- package/TabScrollButton/TabScrollButton.d.ts +3 -3
- package/TabScrollButton/TabScrollButton.js +6 -2
- package/TabScrollButton/TabScrollButton.mjs +6 -2
- package/Table/Table.d.mts +2 -2
- package/Table/Table.d.ts +2 -2
- package/TableBody/TableBody.d.mts +2 -2
- package/TableBody/TableBody.d.ts +2 -2
- package/TableCell/TableCell.d.mts +2 -2
- package/TableCell/TableCell.d.ts +2 -2
- package/TableContainer/TableContainer.d.mts +2 -2
- package/TableContainer/TableContainer.d.ts +2 -2
- package/TableFooter/TableFooter.d.mts +2 -2
- package/TableFooter/TableFooter.d.ts +2 -2
- package/TableHead/TableHead.d.mts +2 -2
- package/TableHead/TableHead.d.ts +2 -2
- package/TablePagination/TablePagination.d.mts +4 -4
- package/TablePagination/TablePagination.d.ts +4 -4
- package/TablePaginationActions/TablePaginationActions.d.mts +2 -2
- package/TablePaginationActions/TablePaginationActions.d.ts +2 -2
- package/TableRow/TableRow.d.mts +2 -2
- package/TableRow/TableRow.d.ts +2 -2
- package/TableSortLabel/TableSortLabel.d.mts +3 -3
- package/TableSortLabel/TableSortLabel.d.ts +3 -3
- package/TableSortLabel/TableSortLabel.js +5 -3
- package/TableSortLabel/TableSortLabel.mjs +5 -3
- package/Tabs/Tabs.d.mts +2 -2
- package/Tabs/Tabs.d.ts +2 -2
- package/Tabs/Tabs.js +30 -21
- package/Tabs/Tabs.mjs +29 -20
- package/TextField/TextField.d.mts +10 -10
- package/TextField/TextField.d.ts +10 -10
- package/TextareaAutosize/TextareaAutosize.d.mts +2 -2
- package/TextareaAutosize/TextareaAutosize.d.ts +2 -2
- package/TextareaAutosize/TextareaAutosize.js +2 -2
- package/TextareaAutosize/TextareaAutosize.mjs +2 -2
- package/ToggleButton/ToggleButton.d.mts +3 -3
- package/ToggleButton/ToggleButton.d.ts +3 -3
- package/ToggleButton/ToggleButton.js +1 -0
- package/ToggleButton/ToggleButton.mjs +1 -0
- package/ToggleButtonGroup/ToggleButtonGroup.d.mts +2 -2
- package/ToggleButtonGroup/ToggleButtonGroup.d.ts +2 -2
- package/Toolbar/Toolbar.d.mts +2 -2
- package/Toolbar/Toolbar.d.ts +2 -2
- package/Tooltip/Tooltip.d.mts +3 -3
- package/Tooltip/Tooltip.d.ts +3 -3
- package/Typography/Typography.d.mts +4 -4
- package/Typography/Typography.d.ts +4 -4
- package/Zoom/Zoom.d.mts +3 -3
- package/Zoom/Zoom.d.ts +3 -3
- package/Zoom/Zoom.js +24 -30
- package/Zoom/Zoom.mjs +25 -31
- package/index.js +1 -1
- package/index.mjs +1 -1
- package/internal/SwitchBase.d.mts +2 -2
- package/internal/SwitchBase.d.ts +2 -2
- package/internal/SwitchBase.js +5 -1
- package/internal/SwitchBase.mjs +5 -1
- package/locale/psAF.js +1 -1
- package/locale/psAF.mjs +1 -1
- package/package.json +51 -51
- package/styles/createThemeNoVars.js +1 -1
- package/styles/createThemeNoVars.mjs +1 -1
- package/styles/createThemeWithVars.js +9 -9
- package/styles/createThemeWithVars.mjs +9 -9
- package/transitions/utils.d.mts +7 -0
- package/transitions/utils.d.ts +7 -0
- package/transitions/utils.js +27 -0
- package/transitions/utils.mjs +25 -0
- package/useAutocomplete/useAutocomplete.js +8 -0
- package/useAutocomplete/useAutocomplete.mjs +8 -0
- package/utils/focusWithVisible.js +24 -0
- package/utils/focusWithVisible.mjs +19 -0
- package/utils/index.d.mts +0 -1
- package/utils/index.d.ts +0 -1
- package/utils/index.js +0 -7
- package/utils/index.mjs +0 -1
- package/utils/useFocusableWhenDisabled.d.mts +30 -0
- package/utils/useFocusableWhenDisabled.d.ts +30 -0
- package/utils/useFocusableWhenDisabled.js +47 -0
- package/utils/useFocusableWhenDisabled.mjs +41 -0
- package/utils/useRovingTabIndex.d.mts +1 -2
- package/utils/useRovingTabIndex.d.ts +1 -2
- package/utils/useRovingTabIndex.js +25 -4
- package/utils/useRovingTabIndex.mjs +1 -2
- package/version/index.js +2 -2
- package/version/index.mjs +2 -2
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export interface UseButtonBaseParameters {
|
|
3
|
+
/**
|
|
4
|
+
* Whether the root should be treated as a native `<button>` for render-time semantics.
|
|
5
|
+
*/
|
|
6
|
+
nativeButton: boolean;
|
|
7
|
+
/**
|
|
8
|
+
* The explicit `nativeButton` value provided by the caller, if any.
|
|
9
|
+
*/
|
|
10
|
+
nativeButtonProp?: boolean | undefined;
|
|
11
|
+
/**
|
|
12
|
+
* Whether the default rendered element is expected to be a native button when
|
|
13
|
+
* `nativeButton` was not explicitly provided.
|
|
14
|
+
* @default nativeButton
|
|
15
|
+
*/
|
|
16
|
+
internalNativeButton?: boolean | undefined;
|
|
17
|
+
/**
|
|
18
|
+
* Whether to perform additional checks in dev mode on whether the resolved element
|
|
19
|
+
* matches the default native or non-native button expectation.
|
|
20
|
+
* Set to `true` to allow hook callers bypass this check, e.g. when the `component`
|
|
21
|
+
* prop is a string.
|
|
22
|
+
* @default false
|
|
23
|
+
*/
|
|
24
|
+
allowInferredHostMismatch?: boolean | undefined;
|
|
25
|
+
/**
|
|
26
|
+
* The disabled state of the component.
|
|
27
|
+
*/
|
|
28
|
+
disabled: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* The `type` attribute for the element.
|
|
31
|
+
*/
|
|
32
|
+
type?: string | undefined;
|
|
33
|
+
/**
|
|
34
|
+
* Whether the element has a `formAction` attribute. When true, the hook
|
|
35
|
+
* will not default `type` to `'button'` for native buttons so the browser
|
|
36
|
+
* can use its natural submit behaviour.
|
|
37
|
+
* @default false
|
|
38
|
+
*/
|
|
39
|
+
hasFormAction?: boolean | undefined;
|
|
40
|
+
/**
|
|
41
|
+
* The `tabIndex` attribute for the element.
|
|
42
|
+
* @default 0
|
|
43
|
+
*/
|
|
44
|
+
tabIndex?: number | undefined;
|
|
45
|
+
/**
|
|
46
|
+
* When `true`, a disabled root can remain focusable.
|
|
47
|
+
* When `undefined`, the feature is not enabled.
|
|
48
|
+
*/
|
|
49
|
+
focusableWhenDisabled?: boolean | undefined;
|
|
50
|
+
/**
|
|
51
|
+
* When `true`, calls `event.stopPropagation()` on click before the disabled guard runs.
|
|
52
|
+
* @default false
|
|
53
|
+
*/
|
|
54
|
+
stopEventPropagation?: boolean | undefined;
|
|
55
|
+
/**
|
|
56
|
+
* An additional function that will run before the user's `onKeyDown`, e.g.
|
|
57
|
+
* to trigger the ripple effect in `<ButtonBase>`.
|
|
58
|
+
*/
|
|
59
|
+
onBeforeKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined;
|
|
60
|
+
/**
|
|
61
|
+
* An additional function that will run before the user's `onKeyUp`, e.g.
|
|
62
|
+
* to control the ripple effect in `<ButtonBase>`.
|
|
63
|
+
*/
|
|
64
|
+
onBeforeKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined;
|
|
65
|
+
}
|
|
66
|
+
export interface ButtonBaseButtonProps {
|
|
67
|
+
role?: string | undefined;
|
|
68
|
+
'aria-disabled'?: boolean | undefined;
|
|
69
|
+
type?: string | undefined;
|
|
70
|
+
disabled?: boolean | undefined;
|
|
71
|
+
tabIndex: number;
|
|
72
|
+
}
|
|
73
|
+
export interface ButtonBaseExternalProps extends React.HTMLAttributes<any> {
|
|
74
|
+
'aria-disabled'?: boolean | undefined;
|
|
75
|
+
disabled?: boolean | undefined;
|
|
76
|
+
type?: string | undefined;
|
|
77
|
+
}
|
|
78
|
+
export interface ButtonBaseEventHandlers {
|
|
79
|
+
onClick: React.MouseEventHandler<HTMLElement>;
|
|
80
|
+
onKeyDown: React.KeyboardEventHandler<HTMLElement>;
|
|
81
|
+
onKeyUp: React.KeyboardEventHandler<HTMLElement>;
|
|
82
|
+
}
|
|
83
|
+
export interface UseButtonBaseReturnValue {
|
|
84
|
+
/**
|
|
85
|
+
* @param externalProps additional props for the button
|
|
86
|
+
* @returns props that should be spread on the button
|
|
87
|
+
*/
|
|
88
|
+
getButtonProps: <ExternalProps extends ButtonBaseExternalProps = ButtonBaseExternalProps>(externalProps?: ExternalProps) => Omit<ExternalProps, keyof ButtonBaseEventHandlers> & ButtonBaseButtonProps & ButtonBaseEventHandlers;
|
|
89
|
+
rootRef: React.RefObject<HTMLElement | null>;
|
|
90
|
+
}
|
|
91
|
+
export default function useButtonBase(parameters: UseButtonBaseParameters): UseButtonBaseReturnValue;
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export interface UseButtonBaseParameters {
|
|
3
|
+
/**
|
|
4
|
+
* Whether the root should be treated as a native `<button>` for render-time semantics.
|
|
5
|
+
*/
|
|
6
|
+
nativeButton: boolean;
|
|
7
|
+
/**
|
|
8
|
+
* The explicit `nativeButton` value provided by the caller, if any.
|
|
9
|
+
*/
|
|
10
|
+
nativeButtonProp?: boolean | undefined;
|
|
11
|
+
/**
|
|
12
|
+
* Whether the default rendered element is expected to be a native button when
|
|
13
|
+
* `nativeButton` was not explicitly provided.
|
|
14
|
+
* @default nativeButton
|
|
15
|
+
*/
|
|
16
|
+
internalNativeButton?: boolean | undefined;
|
|
17
|
+
/**
|
|
18
|
+
* Whether to perform additional checks in dev mode on whether the resolved element
|
|
19
|
+
* matches the default native or non-native button expectation.
|
|
20
|
+
* Set to `true` to allow hook callers bypass this check, e.g. when the `component`
|
|
21
|
+
* prop is a string.
|
|
22
|
+
* @default false
|
|
23
|
+
*/
|
|
24
|
+
allowInferredHostMismatch?: boolean | undefined;
|
|
25
|
+
/**
|
|
26
|
+
* The disabled state of the component.
|
|
27
|
+
*/
|
|
28
|
+
disabled: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* The `type` attribute for the element.
|
|
31
|
+
*/
|
|
32
|
+
type?: string | undefined;
|
|
33
|
+
/**
|
|
34
|
+
* Whether the element has a `formAction` attribute. When true, the hook
|
|
35
|
+
* will not default `type` to `'button'` for native buttons so the browser
|
|
36
|
+
* can use its natural submit behaviour.
|
|
37
|
+
* @default false
|
|
38
|
+
*/
|
|
39
|
+
hasFormAction?: boolean | undefined;
|
|
40
|
+
/**
|
|
41
|
+
* The `tabIndex` attribute for the element.
|
|
42
|
+
* @default 0
|
|
43
|
+
*/
|
|
44
|
+
tabIndex?: number | undefined;
|
|
45
|
+
/**
|
|
46
|
+
* When `true`, a disabled root can remain focusable.
|
|
47
|
+
* When `undefined`, the feature is not enabled.
|
|
48
|
+
*/
|
|
49
|
+
focusableWhenDisabled?: boolean | undefined;
|
|
50
|
+
/**
|
|
51
|
+
* When `true`, calls `event.stopPropagation()` on click before the disabled guard runs.
|
|
52
|
+
* @default false
|
|
53
|
+
*/
|
|
54
|
+
stopEventPropagation?: boolean | undefined;
|
|
55
|
+
/**
|
|
56
|
+
* An additional function that will run before the user's `onKeyDown`, e.g.
|
|
57
|
+
* to trigger the ripple effect in `<ButtonBase>`.
|
|
58
|
+
*/
|
|
59
|
+
onBeforeKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined;
|
|
60
|
+
/**
|
|
61
|
+
* An additional function that will run before the user's `onKeyUp`, e.g.
|
|
62
|
+
* to control the ripple effect in `<ButtonBase>`.
|
|
63
|
+
*/
|
|
64
|
+
onBeforeKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined;
|
|
65
|
+
}
|
|
66
|
+
export interface ButtonBaseButtonProps {
|
|
67
|
+
role?: string | undefined;
|
|
68
|
+
'aria-disabled'?: boolean | undefined;
|
|
69
|
+
type?: string | undefined;
|
|
70
|
+
disabled?: boolean | undefined;
|
|
71
|
+
tabIndex: number;
|
|
72
|
+
}
|
|
73
|
+
export interface ButtonBaseExternalProps extends React.HTMLAttributes<any> {
|
|
74
|
+
'aria-disabled'?: boolean | undefined;
|
|
75
|
+
disabled?: boolean | undefined;
|
|
76
|
+
type?: string | undefined;
|
|
77
|
+
}
|
|
78
|
+
export interface ButtonBaseEventHandlers {
|
|
79
|
+
onClick: React.MouseEventHandler<HTMLElement>;
|
|
80
|
+
onKeyDown: React.KeyboardEventHandler<HTMLElement>;
|
|
81
|
+
onKeyUp: React.KeyboardEventHandler<HTMLElement>;
|
|
82
|
+
}
|
|
83
|
+
export interface UseButtonBaseReturnValue {
|
|
84
|
+
/**
|
|
85
|
+
* @param externalProps additional props for the button
|
|
86
|
+
* @returns props that should be spread on the button
|
|
87
|
+
*/
|
|
88
|
+
getButtonProps: <ExternalProps extends ButtonBaseExternalProps = ButtonBaseExternalProps>(externalProps?: ExternalProps) => Omit<ExternalProps, keyof ButtonBaseEventHandlers> & ButtonBaseButtonProps & ButtonBaseEventHandlers;
|
|
89
|
+
rootRef: React.RefObject<HTMLElement | null>;
|
|
90
|
+
}
|
|
91
|
+
export default function useButtonBase(parameters: UseButtonBaseParameters): UseButtonBaseReturnValue;
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
|
7
|
+
value: true
|
|
8
|
+
});
|
|
9
|
+
exports.default = useButtonBase;
|
|
10
|
+
var React = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _useFocusableWhenDisabled = _interopRequireDefault(require("../utils/useFocusableWhenDisabled"));
|
|
12
|
+
const EMPTY = {};
|
|
13
|
+
function useButtonBase(parameters) {
|
|
14
|
+
const {
|
|
15
|
+
nativeButton,
|
|
16
|
+
nativeButtonProp,
|
|
17
|
+
internalNativeButton = nativeButton,
|
|
18
|
+
allowInferredHostMismatch = false,
|
|
19
|
+
disabled,
|
|
20
|
+
type,
|
|
21
|
+
hasFormAction = false,
|
|
22
|
+
tabIndex = 0,
|
|
23
|
+
focusableWhenDisabled: focusableWhenDisabledParam,
|
|
24
|
+
stopEventPropagation = false,
|
|
25
|
+
onBeforeKeyDown,
|
|
26
|
+
onBeforeKeyUp
|
|
27
|
+
} = parameters;
|
|
28
|
+
const rootRef = React.useRef(null);
|
|
29
|
+
const focusableWhenDisabled = focusableWhenDisabledParam === true;
|
|
30
|
+
const focusableWhenDisabledProps = (0, _useFocusableWhenDisabled.default)({
|
|
31
|
+
focusableWhenDisabled,
|
|
32
|
+
disabled,
|
|
33
|
+
isNativeButton: nativeButton,
|
|
34
|
+
tabIndex
|
|
35
|
+
});
|
|
36
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
37
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
38
|
+
React.useEffect(() => {
|
|
39
|
+
const root = rootRef.current;
|
|
40
|
+
if (root == null) {
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
const isButtonTag = root.tagName === 'BUTTON';
|
|
44
|
+
if (nativeButtonProp !== undefined) {
|
|
45
|
+
if (nativeButtonProp && !isButtonTag) {
|
|
46
|
+
const message = 'MUI: A component that acts as a button expected a native <button> because the ' + '`nativeButton` prop is true. Rendering a non-<button> removes native button ' + 'semantics, which can impact forms and accessibility. Render a real <button> ' + 'or set `nativeButton` to `false`.';
|
|
47
|
+
console.error(message);
|
|
48
|
+
}
|
|
49
|
+
if (!nativeButtonProp && isButtonTag) {
|
|
50
|
+
const message = 'MUI: A component that acts as a button expected a non-<button> because the `nativeButton` ' + 'prop is false. Rendering a <button> keeps native behavior while additionally applies ' + 'non-native attributes and handlers, which can add unintended extra attributes (such ' + 'as `role` or `aria-disabled`). Render a non-<button> such as <div>, or set ' + '`nativeButton` to `true`.';
|
|
51
|
+
console.error(message);
|
|
52
|
+
}
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
if (allowInferredHostMismatch) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// warn when expecting a native <button> element but a non-string `component` prop resolved to a non-button element
|
|
60
|
+
if (internalNativeButton && !isButtonTag) {
|
|
61
|
+
const message = 'MUI: A component rendering a native <button> resolved to a non-<button> element, ' + 'but `nativeButton={false}` was not specified and the resolved root is a non-<button>. ' + 'When rendering a custom component, set `nativeButton={false}` explicitly or render a <button> element.';
|
|
62
|
+
console.error(message);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// warn when expecting a non-button but a non-string `component` prop resolved to a native <button> element
|
|
66
|
+
if (!internalNativeButton && isButtonTag) {
|
|
67
|
+
const message = 'MUI: A component that acts as a non-native button resolved to a native <button> element, ' + 'but `nativeButton={true}` was not specified. ' + 'When rendering a custom component, set `nativeButton={true}` explicitly or render a non-<button> element.';
|
|
68
|
+
console.error(message);
|
|
69
|
+
}
|
|
70
|
+
}, [allowInferredHostMismatch, internalNativeButton, nativeButtonProp]);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
// A helper for event handlers to determine whether to use browser-defined keyboard activation
|
|
74
|
+
// for native elements like <button> and <a href>, or synthesize Enter/Space clicks for non-native
|
|
75
|
+
// elements like `<div role="button">`.
|
|
76
|
+
// This is UNSAFE TO USE outside of event handers, e.g. in render.
|
|
77
|
+
const hasNativeKeyboardActivation = React.useCallback(() => {
|
|
78
|
+
const root = rootRef.current;
|
|
79
|
+
if (root == null) {
|
|
80
|
+
return nativeButton;
|
|
81
|
+
}
|
|
82
|
+
if (root.tagName === 'BUTTON') {
|
|
83
|
+
return true;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// Although this hook is not intended for links, this check is for
|
|
87
|
+
// backward compatibility with `<ButtonBase href="#" />` since ButtonBase
|
|
88
|
+
// uses the returned event handlers.
|
|
89
|
+
return Boolean(root.tagName === 'A' && root.href);
|
|
90
|
+
}, [nativeButton]);
|
|
91
|
+
const buttonProps = React.useMemo(() => {
|
|
92
|
+
const resolvedButtonProps = focusableWhenDisabled ? {} : {
|
|
93
|
+
tabIndex: disabled ? -1 : tabIndex
|
|
94
|
+
};
|
|
95
|
+
if (nativeButton) {
|
|
96
|
+
resolvedButtonProps.type = type === undefined && !hasFormAction ? 'button' : type;
|
|
97
|
+
if (!focusableWhenDisabled) {
|
|
98
|
+
resolvedButtonProps.disabled = disabled;
|
|
99
|
+
}
|
|
100
|
+
} else {
|
|
101
|
+
resolvedButtonProps.role = 'button';
|
|
102
|
+
if (!focusableWhenDisabled && disabled) {
|
|
103
|
+
resolvedButtonProps['aria-disabled'] = disabled;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
if (focusableWhenDisabled) {
|
|
107
|
+
return {
|
|
108
|
+
...resolvedButtonProps,
|
|
109
|
+
...focusableWhenDisabledProps
|
|
110
|
+
};
|
|
111
|
+
}
|
|
112
|
+
return resolvedButtonProps;
|
|
113
|
+
}, [disabled, focusableWhenDisabled, focusableWhenDisabledProps, hasFormAction, nativeButton, tabIndex, type]);
|
|
114
|
+
const getButtonProps = React.useCallback((externalProps = EMPTY) => {
|
|
115
|
+
const {
|
|
116
|
+
onClick: externalOnClick,
|
|
117
|
+
onKeyDown: externalOnKeyDown,
|
|
118
|
+
onKeyUp: externalOnKeyUp,
|
|
119
|
+
...otherExternalProps
|
|
120
|
+
} = externalProps;
|
|
121
|
+
const handleClick = event => {
|
|
122
|
+
if (stopEventPropagation) {
|
|
123
|
+
event.stopPropagation();
|
|
124
|
+
}
|
|
125
|
+
if (disabled) {
|
|
126
|
+
event.preventDefault();
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
externalOnClick?.(event);
|
|
130
|
+
};
|
|
131
|
+
const handleKeyDown = event => {
|
|
132
|
+
if (focusableWhenDisabled) {
|
|
133
|
+
focusableWhenDisabledProps.onKeyDown(event);
|
|
134
|
+
}
|
|
135
|
+
if (disabled) {
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
onBeforeKeyDown?.(event);
|
|
139
|
+
externalOnKeyDown?.(event);
|
|
140
|
+
if (event.target !== event.currentTarget || hasNativeKeyboardActivation()) {
|
|
141
|
+
return;
|
|
142
|
+
}
|
|
143
|
+
if (event.key === ' ') {
|
|
144
|
+
event.preventDefault();
|
|
145
|
+
return;
|
|
146
|
+
}
|
|
147
|
+
if (event.key === 'Enter') {
|
|
148
|
+
event.preventDefault();
|
|
149
|
+
event.currentTarget.click();
|
|
150
|
+
}
|
|
151
|
+
};
|
|
152
|
+
const handleKeyUp = event => {
|
|
153
|
+
if (disabled) {
|
|
154
|
+
return;
|
|
155
|
+
}
|
|
156
|
+
onBeforeKeyUp?.(event);
|
|
157
|
+
externalOnKeyUp?.(event);
|
|
158
|
+
if (event.target === event.currentTarget && !hasNativeKeyboardActivation() && event.key === ' ' && !event.defaultPrevented) {
|
|
159
|
+
event.currentTarget.click();
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
return {
|
|
163
|
+
...buttonProps,
|
|
164
|
+
...otherExternalProps,
|
|
165
|
+
onClick: handleClick,
|
|
166
|
+
onKeyDown: handleKeyDown,
|
|
167
|
+
onKeyUp: handleKeyUp
|
|
168
|
+
};
|
|
169
|
+
}, [buttonProps, disabled, focusableWhenDisabled, focusableWhenDisabledProps, hasNativeKeyboardActivation, onBeforeKeyDown, onBeforeKeyUp, stopEventPropagation]);
|
|
170
|
+
return {
|
|
171
|
+
getButtonProps,
|
|
172
|
+
rootRef
|
|
173
|
+
};
|
|
174
|
+
}
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import useFocusableWhenDisabled from "../utils/useFocusableWhenDisabled.mjs";
|
|
5
|
+
const EMPTY = {};
|
|
6
|
+
export default function useButtonBase(parameters) {
|
|
7
|
+
const {
|
|
8
|
+
nativeButton,
|
|
9
|
+
nativeButtonProp,
|
|
10
|
+
internalNativeButton = nativeButton,
|
|
11
|
+
allowInferredHostMismatch = false,
|
|
12
|
+
disabled,
|
|
13
|
+
type,
|
|
14
|
+
hasFormAction = false,
|
|
15
|
+
tabIndex = 0,
|
|
16
|
+
focusableWhenDisabled: focusableWhenDisabledParam,
|
|
17
|
+
stopEventPropagation = false,
|
|
18
|
+
onBeforeKeyDown,
|
|
19
|
+
onBeforeKeyUp
|
|
20
|
+
} = parameters;
|
|
21
|
+
const rootRef = React.useRef(null);
|
|
22
|
+
const focusableWhenDisabled = focusableWhenDisabledParam === true;
|
|
23
|
+
const focusableWhenDisabledProps = useFocusableWhenDisabled({
|
|
24
|
+
focusableWhenDisabled,
|
|
25
|
+
disabled,
|
|
26
|
+
isNativeButton: nativeButton,
|
|
27
|
+
tabIndex
|
|
28
|
+
});
|
|
29
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
30
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
31
|
+
React.useEffect(() => {
|
|
32
|
+
const root = rootRef.current;
|
|
33
|
+
if (root == null) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
const isButtonTag = root.tagName === 'BUTTON';
|
|
37
|
+
if (nativeButtonProp !== undefined) {
|
|
38
|
+
if (nativeButtonProp && !isButtonTag) {
|
|
39
|
+
const message = 'MUI: A component that acts as a button expected a native <button> because the ' + '`nativeButton` prop is true. Rendering a non-<button> removes native button ' + 'semantics, which can impact forms and accessibility. Render a real <button> ' + 'or set `nativeButton` to `false`.';
|
|
40
|
+
console.error(message);
|
|
41
|
+
}
|
|
42
|
+
if (!nativeButtonProp && isButtonTag) {
|
|
43
|
+
const message = 'MUI: A component that acts as a button expected a non-<button> because the `nativeButton` ' + 'prop is false. Rendering a <button> keeps native behavior while additionally applies ' + 'non-native attributes and handlers, which can add unintended extra attributes (such ' + 'as `role` or `aria-disabled`). Render a non-<button> such as <div>, or set ' + '`nativeButton` to `true`.';
|
|
44
|
+
console.error(message);
|
|
45
|
+
}
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
if (allowInferredHostMismatch) {
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// warn when expecting a native <button> element but a non-string `component` prop resolved to a non-button element
|
|
53
|
+
if (internalNativeButton && !isButtonTag) {
|
|
54
|
+
const message = 'MUI: A component rendering a native <button> resolved to a non-<button> element, ' + 'but `nativeButton={false}` was not specified and the resolved root is a non-<button>. ' + 'When rendering a custom component, set `nativeButton={false}` explicitly or render a <button> element.';
|
|
55
|
+
console.error(message);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// warn when expecting a non-button but a non-string `component` prop resolved to a native <button> element
|
|
59
|
+
if (!internalNativeButton && isButtonTag) {
|
|
60
|
+
const message = 'MUI: A component that acts as a non-native button resolved to a native <button> element, ' + 'but `nativeButton={true}` was not specified. ' + 'When rendering a custom component, set `nativeButton={true}` explicitly or render a non-<button> element.';
|
|
61
|
+
console.error(message);
|
|
62
|
+
}
|
|
63
|
+
}, [allowInferredHostMismatch, internalNativeButton, nativeButtonProp]);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// A helper for event handlers to determine whether to use browser-defined keyboard activation
|
|
67
|
+
// for native elements like <button> and <a href>, or synthesize Enter/Space clicks for non-native
|
|
68
|
+
// elements like `<div role="button">`.
|
|
69
|
+
// This is UNSAFE TO USE outside of event handers, e.g. in render.
|
|
70
|
+
const hasNativeKeyboardActivation = React.useCallback(() => {
|
|
71
|
+
const root = rootRef.current;
|
|
72
|
+
if (root == null) {
|
|
73
|
+
return nativeButton;
|
|
74
|
+
}
|
|
75
|
+
if (root.tagName === 'BUTTON') {
|
|
76
|
+
return true;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// Although this hook is not intended for links, this check is for
|
|
80
|
+
// backward compatibility with `<ButtonBase href="#" />` since ButtonBase
|
|
81
|
+
// uses the returned event handlers.
|
|
82
|
+
return Boolean(root.tagName === 'A' && root.href);
|
|
83
|
+
}, [nativeButton]);
|
|
84
|
+
const buttonProps = React.useMemo(() => {
|
|
85
|
+
const resolvedButtonProps = focusableWhenDisabled ? {} : {
|
|
86
|
+
tabIndex: disabled ? -1 : tabIndex
|
|
87
|
+
};
|
|
88
|
+
if (nativeButton) {
|
|
89
|
+
resolvedButtonProps.type = type === undefined && !hasFormAction ? 'button' : type;
|
|
90
|
+
if (!focusableWhenDisabled) {
|
|
91
|
+
resolvedButtonProps.disabled = disabled;
|
|
92
|
+
}
|
|
93
|
+
} else {
|
|
94
|
+
resolvedButtonProps.role = 'button';
|
|
95
|
+
if (!focusableWhenDisabled && disabled) {
|
|
96
|
+
resolvedButtonProps['aria-disabled'] = disabled;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
if (focusableWhenDisabled) {
|
|
100
|
+
return {
|
|
101
|
+
...resolvedButtonProps,
|
|
102
|
+
...focusableWhenDisabledProps
|
|
103
|
+
};
|
|
104
|
+
}
|
|
105
|
+
return resolvedButtonProps;
|
|
106
|
+
}, [disabled, focusableWhenDisabled, focusableWhenDisabledProps, hasFormAction, nativeButton, tabIndex, type]);
|
|
107
|
+
const getButtonProps = React.useCallback((externalProps = EMPTY) => {
|
|
108
|
+
const {
|
|
109
|
+
onClick: externalOnClick,
|
|
110
|
+
onKeyDown: externalOnKeyDown,
|
|
111
|
+
onKeyUp: externalOnKeyUp,
|
|
112
|
+
...otherExternalProps
|
|
113
|
+
} = externalProps;
|
|
114
|
+
const handleClick = event => {
|
|
115
|
+
if (stopEventPropagation) {
|
|
116
|
+
event.stopPropagation();
|
|
117
|
+
}
|
|
118
|
+
if (disabled) {
|
|
119
|
+
event.preventDefault();
|
|
120
|
+
return;
|
|
121
|
+
}
|
|
122
|
+
externalOnClick?.(event);
|
|
123
|
+
};
|
|
124
|
+
const handleKeyDown = event => {
|
|
125
|
+
if (focusableWhenDisabled) {
|
|
126
|
+
focusableWhenDisabledProps.onKeyDown(event);
|
|
127
|
+
}
|
|
128
|
+
if (disabled) {
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
onBeforeKeyDown?.(event);
|
|
132
|
+
externalOnKeyDown?.(event);
|
|
133
|
+
if (event.target !== event.currentTarget || hasNativeKeyboardActivation()) {
|
|
134
|
+
return;
|
|
135
|
+
}
|
|
136
|
+
if (event.key === ' ') {
|
|
137
|
+
event.preventDefault();
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
if (event.key === 'Enter') {
|
|
141
|
+
event.preventDefault();
|
|
142
|
+
event.currentTarget.click();
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
const handleKeyUp = event => {
|
|
146
|
+
if (disabled) {
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
149
|
+
onBeforeKeyUp?.(event);
|
|
150
|
+
externalOnKeyUp?.(event);
|
|
151
|
+
if (event.target === event.currentTarget && !hasNativeKeyboardActivation() && event.key === ' ' && !event.defaultPrevented) {
|
|
152
|
+
event.currentTarget.click();
|
|
153
|
+
}
|
|
154
|
+
};
|
|
155
|
+
return {
|
|
156
|
+
...buttonProps,
|
|
157
|
+
...otherExternalProps,
|
|
158
|
+
onClick: handleClick,
|
|
159
|
+
onKeyDown: handleKeyDown,
|
|
160
|
+
onKeyUp: handleKeyUp
|
|
161
|
+
};
|
|
162
|
+
}, [buttonProps, disabled, focusableWhenDisabled, focusableWhenDisabledProps, hasNativeKeyboardActivation, onBeforeKeyDown, onBeforeKeyUp, stopEventPropagation]);
|
|
163
|
+
return {
|
|
164
|
+
getButtonProps,
|
|
165
|
+
rootRef
|
|
166
|
+
};
|
|
167
|
+
}
|
|
@@ -78,11 +78,11 @@ export interface ButtonGroupTypeMap<AdditionalProps = {}, RootComponent extends
|
|
|
78
78
|
*
|
|
79
79
|
* Demos:
|
|
80
80
|
*
|
|
81
|
-
* - [Button Group](https://
|
|
81
|
+
* - [Button Group](https://mui.com/material-ui/react-button-group/)
|
|
82
82
|
*
|
|
83
83
|
* API:
|
|
84
84
|
*
|
|
85
|
-
* - [ButtonGroup API](https://
|
|
85
|
+
* - [ButtonGroup API](https://mui.com/material-ui/api/button-group/)
|
|
86
86
|
*/
|
|
87
87
|
declare const ButtonGroup: OverridableComponent<ButtonGroupTypeMap>;
|
|
88
88
|
export type ButtonGroupProps<RootComponent extends React.ElementType = ButtonGroupTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ButtonGroupTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
|
|
@@ -78,11 +78,11 @@ export interface ButtonGroupTypeMap<AdditionalProps = {}, RootComponent extends
|
|
|
78
78
|
*
|
|
79
79
|
* Demos:
|
|
80
80
|
*
|
|
81
|
-
* - [Button Group](https://
|
|
81
|
+
* - [Button Group](https://mui.com/material-ui/react-button-group/)
|
|
82
82
|
*
|
|
83
83
|
* API:
|
|
84
84
|
*
|
|
85
|
-
* - [ButtonGroup API](https://
|
|
85
|
+
* - [ButtonGroup API](https://mui.com/material-ui/api/button-group/)
|
|
86
86
|
*/
|
|
87
87
|
declare const ButtonGroup: OverridableComponent<ButtonGroupTypeMap>;
|
|
88
88
|
export type ButtonGroupProps<RootComponent extends React.ElementType = ButtonGroupTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ButtonGroupTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,81 @@
|
|
|
1
1
|
# [Versions](https://mui.com/versions/)
|
|
2
2
|
|
|
3
|
+
## 9.0.0
|
|
4
|
+
|
|
5
|
+
<!-- generated comparing v9.0.0-beta.1..master -->
|
|
6
|
+
|
|
7
|
+
_Apr 7, 2026_
|
|
8
|
+
|
|
9
|
+
A big thanks to the 7 contributors who made this release possible.
|
|
10
|
+
|
|
11
|
+
🥳 We're excited to announce the stable release of Material UI v9! This major release focus on accessibility improvements, sx prop performance, and cleanup of deprecated APIs.
|
|
12
|
+
|
|
13
|
+
For more details, check out the [upgrade guide](https://mui.com/material-ui/migration/upgrade-to-v9/).
|
|
14
|
+
|
|
15
|
+
### `@mui/material@9.0.0`
|
|
16
|
+
|
|
17
|
+
- [slider] Use pointer events instead of mouse events (#48164) @mj12albert
|
|
18
|
+
- [switch] Add border to make it visible in high contrast mode (#48180) @silviuaavram
|
|
19
|
+
- [transitions] Performance improvements & misc fixes (#48151) @mj12albert
|
|
20
|
+
- Remove unnecessary overridesResolvers from styled components (#48204) @sai6855
|
|
21
|
+
|
|
22
|
+
### Core
|
|
23
|
+
|
|
24
|
+
- [code-infra] Setup workflow to publish internal packages (#47952) @brijeshb42
|
|
25
|
+
- [core-docs] Add `x-scheduler` to `MuiProductId` type (#48185) @rita-codes
|
|
26
|
+
- [docs-infra] Add scheduler to product switcher (#48208) @rita-codes
|
|
27
|
+
- [internal] Prepare libraries for v9 stable release (#48206) @siriwatknp
|
|
28
|
+
|
|
29
|
+
All contributors of this release in alphabetical order: @brijeshb42, @mj12albert, @noraleonte, @rita-codes, @sai6855, @silviuaavram, @siriwatknp
|
|
30
|
+
|
|
31
|
+
## 9.0.0-beta.1
|
|
32
|
+
|
|
33
|
+
<!-- generated comparing v9.0.0-beta.0..master -->
|
|
34
|
+
|
|
35
|
+
_Apr 2, 2026_
|
|
36
|
+
|
|
37
|
+
A big thanks to the 11 contributors who made this release possible.
|
|
38
|
+
|
|
39
|
+
### `@mui/material@9.0.0-beta.1`
|
|
40
|
+
|
|
41
|
+
#### Breaking Changes
|
|
42
|
+
|
|
43
|
+
- [grid] Remove 'column' and 'column-reverse' options from `direction` prop (#47564) @sai6855
|
|
44
|
+
- [icons] Remove legacy `*Outline` icons (#48116) @mj12albert
|
|
45
|
+
- [list-item-icon] Use theme spacing instead of hardcoded minWidth (#46597) @adiitxa
|
|
46
|
+
|
|
47
|
+
#### Changes
|
|
48
|
+
|
|
49
|
+
- [all components] Fix `slotProps.transition` types (#48153) @mj12albert
|
|
50
|
+
- [alert][dialog] Accessibility improvements (#48113) @silviuaavram
|
|
51
|
+
- [autocomplete] Fix helper text focusing input when clicked (#48156) @mj12albert
|
|
52
|
+
- [button-base] Add `nativeButton` prop (#47989) @mj12albert
|
|
53
|
+
- [input] Fix high contrast cutoff on first character (#48150) @silviuaavram
|
|
54
|
+
- [menu] Fix empty roving focus container (#48114) @mj12albert
|
|
55
|
+
- [utils] Explicitly register roving tab items with parent (#48122) @mj12albert
|
|
56
|
+
|
|
57
|
+
### Docs
|
|
58
|
+
|
|
59
|
+
- Fix HTML validation errors (#48107) @Janpot
|
|
60
|
+
- Fix duplicate IDs and HTML validation issues (#48095) @Janpot
|
|
61
|
+
- Fix the dark mode footer row shadow for the Data Grid on the advanced components page (#48149) @arminmeh
|
|
62
|
+
- Improve jsdom section (#48098) @oliviertassinari
|
|
63
|
+
- Update "Deprecated APIs removed" section to h2 in "Upgrade to v9" docs (#48115) @ZeeshanTamboli
|
|
64
|
+
- [docs][progress] Label all demo components (#48143) @mj12albert
|
|
65
|
+
- [docs-infra] Add x-scheduler to component API URL resolver (#48097) @rita-codes
|
|
66
|
+
- [docs-infra] Resolve some redirects (#48165) @Janpot
|
|
67
|
+
- [docs-infra] Update v9 Search Index (#48028) @dav-is
|
|
68
|
+
|
|
69
|
+
### Core
|
|
70
|
+
|
|
71
|
+
- [code-infra] Discover exports for bundle size report (#48170) @Janpot
|
|
72
|
+
- [internal] Fix use of ellipsis (#48096) @oliviertassinari
|
|
73
|
+
- [test] Add screenshot test for Virtualized Table (#47947) @mnajdova
|
|
74
|
+
- [test] Remove `componentsProp` from `describeConformance` tests (#48142) @ZeeshanTamboli
|
|
75
|
+
- [theme] Do not create channel tokens for custom colors when `nativeColor` is used (#47765) @ZeeshanTamboli
|
|
76
|
+
|
|
77
|
+
All contributors of this release in alphabetical order: @adiitxa, @arminmeh, @dav-is, @Janpot, @mj12albert, @mnajdova, @oliviertassinari, @rita-codes, @sai6855, @silviuaavram, @ZeeshanTamboli
|
|
78
|
+
|
|
3
79
|
## 9.0.0-beta.0
|
|
4
80
|
|
|
5
81
|
<!-- generated comparing v9.0.0-alpha.4..master -->
|
package/Card/Card.d.mts
CHANGED
|
@@ -32,12 +32,12 @@ export interface CardTypeMap<AdditionalProps = {}, RootComponent extends React.E
|
|
|
32
32
|
*
|
|
33
33
|
* Demos:
|
|
34
34
|
*
|
|
35
|
-
* - [Card](https://
|
|
35
|
+
* - [Card](https://mui.com/material-ui/react-card/)
|
|
36
36
|
*
|
|
37
37
|
* API:
|
|
38
38
|
*
|
|
39
|
-
* - [Card API](https://
|
|
40
|
-
* - inherits [Paper API](https://
|
|
39
|
+
* - [Card API](https://mui.com/material-ui/api/card/)
|
|
40
|
+
* - inherits [Paper API](https://mui.com/material-ui/api/paper/)
|
|
41
41
|
*/
|
|
42
42
|
|
|
43
43
|
declare const Card: OverridableComponent<CardTypeMap>;
|
package/Card/Card.d.ts
CHANGED
|
@@ -32,12 +32,12 @@ export interface CardTypeMap<AdditionalProps = {}, RootComponent extends React.E
|
|
|
32
32
|
*
|
|
33
33
|
* Demos:
|
|
34
34
|
*
|
|
35
|
-
* - [Card](https://
|
|
35
|
+
* - [Card](https://mui.com/material-ui/react-card/)
|
|
36
36
|
*
|
|
37
37
|
* API:
|
|
38
38
|
*
|
|
39
|
-
* - [Card API](https://
|
|
40
|
-
* - inherits [Paper API](https://
|
|
39
|
+
* - [Card API](https://mui.com/material-ui/api/card/)
|
|
40
|
+
* - inherits [Paper API](https://mui.com/material-ui/api/paper/)
|
|
41
41
|
*/
|
|
42
42
|
|
|
43
43
|
declare const Card: OverridableComponent<CardTypeMap>;
|