@mui/material 5.13.1 → 5.13.3
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.js +43 -44
- package/AccordionActions/AccordionActions.js +18 -18
- package/AccordionDetails/AccordionDetails.js +9 -7
- package/AccordionSummary/AccordionSummary.js +32 -32
- package/Alert/Alert.js +60 -64
- package/AlertTitle/AlertTitle.js +9 -7
- package/AppBar/AppBar.js +73 -89
- package/Autocomplete/Autocomplete.d.ts +1 -0
- package/Autocomplete/Autocomplete.js +153 -171
- package/Avatar/Avatar.js +38 -42
- package/AvatarGroup/AvatarGroup.js +33 -34
- package/Backdrop/Backdrop.js +31 -33
- package/Badge/Badge.js +107 -119
- package/BottomNavigation/BottomNavigation.js +17 -15
- package/BottomNavigationAction/BottomNavigationAction.js +31 -29
- package/Breadcrumbs/BreadcrumbCollapsed.js +34 -35
- package/Breadcrumbs/Breadcrumbs.js +21 -19
- package/Button/Button.js +133 -168
- package/ButtonBase/ButtonBase.js +42 -43
- package/ButtonBase/TouchRipple.js +12 -9
- package/ButtonGroup/ButtonGroup.js +89 -111
- package/CHANGELOG.md +93 -0
- package/Card/Card.js +12 -11
- package/CardActionArea/CardActionArea.js +12 -9
- package/CardActions/CardActions.js +18 -18
- package/CardContent/CardContent.js +12 -11
- package/CardHeader/CardHeader.js +31 -30
- package/CardMedia/CardMedia.js +27 -28
- package/Checkbox/Checkbox.js +39 -44
- package/Chip/Chip.js +129 -146
- package/CircularProgress/CircularProgress.js +36 -43
- package/Collapse/Collapse.js +65 -73
- package/CssBaseline/CssBaseline.js +14 -17
- package/Dialog/Dialog.js +94 -103
- package/DialogActions/DialogActions.js +18 -18
- package/DialogContent/DialogContent.js +22 -22
- package/DialogContentText/DialogContentText.js +11 -13
- package/DialogTitle/DialogTitle.js +10 -8
- package/Divider/Divider.js +84 -99
- package/Drawer/Drawer.js +76 -85
- package/Fab/Fab.js +60 -71
- package/Fade/Fade.js +30 -31
- package/FilledInput/FilledInput.js +117 -135
- package/FilledInput/filledInputClasses.js +2 -4
- package/FormControl/FormControl.js +35 -41
- package/FormControlLabel/FormControlLabel.js +38 -43
- package/FormGroup/FormGroup.js +16 -16
- package/FormHelperText/FormHelperText.js +23 -30
- package/FormLabel/FormLabel.js +18 -26
- package/GlobalStyles/GlobalStyles.js +3 -3
- package/Grid/Grid.js +41 -50
- package/Grow/Grow.js +30 -31
- package/Hidden/Hidden.js +32 -31
- package/Hidden/HiddenCss.js +29 -29
- package/Hidden/withWidth.js +20 -20
- package/Icon/Icon.js +15 -14
- package/IconButton/IconButton.js +52 -59
- package/ImageList/ImageList.js +29 -30
- package/ImageListItem/ImageListItem.js +39 -40
- package/ImageListItemBar/ImageListItemBar.js +41 -47
- package/Input/Input.js +74 -77
- package/Input/inputClasses.js +2 -4
- package/InputAdornment/InputAdornment.js +34 -36
- package/InputBase/InputBase.js +92 -116
- package/InputLabel/InputLabel.js +68 -83
- package/LinearProgress/LinearProgress.js +58 -64
- package/Link/Link.js +64 -69
- package/List/List.js +24 -24
- package/ListItem/ListItem.js +96 -113
- package/ListItemAvatar/ListItemAvatar.js +15 -15
- package/ListItemButton/ListItemButton.js +35 -40
- package/ListItemIcon/ListItemIcon.js +15 -15
- package/ListItemSecondaryAction/ListItemSecondaryAction.js +15 -15
- package/ListItemText/ListItemText.js +34 -34
- package/ListSubheader/ListSubheader.js +32 -36
- package/Menu/Menu.js +39 -38
- package/MenuItem/MenuItem.js +45 -50
- package/MenuList/MenuList.js +20 -17
- package/MobileStepper/MobileStepper.js +53 -61
- package/Modal/Modal.js +46 -51
- package/NativeSelect/NativeSelect.js +22 -26
- package/NativeSelect/NativeSelectInput.js +43 -50
- package/OutlinedInput/NotchedOutline.js +51 -55
- package/OutlinedInput/OutlinedInput.js +59 -72
- package/OutlinedInput/outlinedInputClasses.js +2 -4
- package/Pagination/Pagination.js +31 -35
- package/PaginationItem/PaginationItem.js +93 -105
- package/Paper/Paper.js +28 -32
- package/Popover/Popover.js +51 -49
- package/Popper/Popper.js +27 -25
- package/Radio/Radio.js +33 -36
- package/Radio/RadioButtonIcon.js +10 -11
- package/RadioGroup/RadioGroup.js +17 -14
- package/Rating/Rating.js +73 -88
- package/ScopedCssBaseline/ScopedCssBaseline.js +15 -18
- package/Select/Select.js +55 -59
- package/Select/SelectInput.js +57 -58
- package/Skeleton/Skeleton.js +46 -51
- package/Slide/Slide.js +33 -37
- package/Slider/Slider.js +216 -281
- package/Snackbar/Snackbar.js +67 -81
- package/SnackbarContent/SnackbarContent.js +15 -13
- package/SpeedDial/SpeedDial.js +83 -85
- package/SpeedDialAction/SpeedDialAction.js +52 -57
- package/SpeedDialIcon/SpeedDialIcon.js +24 -25
- package/Step/Step.js +26 -27
- package/StepButton/StepButton.js +24 -23
- package/StepConnector/StepConnector.js +31 -34
- package/StepContent/StepContent.js +24 -23
- package/StepIcon/StepIcon.js +22 -22
- package/StepLabel/StepLabel.js +33 -34
- package/Stepper/Stepper.js +31 -33
- package/SvgIcon/SvgIcon.js +20 -19
- package/SwipeableDrawer/SwipeArea.js +30 -33
- package/SwipeableDrawer/SwipeableDrawer.js +43 -49
- package/Switch/Switch.js +52 -59
- package/Tab/Tab.js +83 -93
- package/TabScrollButton/TabScrollButton.js +25 -30
- package/Table/Table.js +19 -20
- package/TableBody/TableBody.js +12 -11
- package/TableCell/TableCell.js +59 -70
- package/TableContainer/TableContainer.js +12 -11
- package/TableFooter/TableFooter.js +12 -11
- package/TableHead/TableHead.js +12 -11
- package/TablePagination/TablePagination.js +49 -53
- package/TablePagination/TablePaginationActions.js +25 -22
- package/TableRow/TableRow.js +14 -13
- package/TableSortLabel/TableSortLabel.js +23 -23
- package/Tabs/ScrollbarSize.js +9 -7
- package/Tabs/Tabs.js +92 -107
- package/TextField/TextField.js +57 -57
- package/ToggleButton/ToggleButton.js +35 -36
- package/ToggleButtonGroup/ToggleButtonGroup.js +59 -60
- package/Toolbar/Toolbar.js +25 -26
- package/Tooltip/Tooltip.js +147 -177
- package/Typography/Typography.js +32 -37
- package/Zoom/Zoom.js +30 -31
- package/index.js +1 -1
- package/internal/SwitchBase.js +43 -45
- package/legacy/Accordion/Accordion.js +8 -9
- package/legacy/AccordionActions/AccordionActions.js +4 -6
- package/legacy/AccordionDetails/AccordionDetails.js +2 -4
- package/legacy/AccordionSummary/AccordionSummary.js +11 -12
- package/legacy/Alert/Alert.js +10 -11
- package/legacy/AlertTitle/AlertTitle.js +2 -4
- package/legacy/AppBar/AppBar.js +16 -18
- package/legacy/Autocomplete/Autocomplete.js +54 -45
- package/legacy/Avatar/Avatar.js +9 -11
- package/legacy/AvatarGroup/AvatarGroup.js +9 -10
- package/legacy/Backdrop/Backdrop.js +8 -10
- package/legacy/Badge/Badge.js +15 -16
- package/legacy/BottomNavigation/BottomNavigation.js +4 -6
- package/legacy/BottomNavigationAction/BottomNavigationAction.js +8 -9
- package/legacy/Breadcrumbs/BreadcrumbCollapsed.js +8 -10
- package/legacy/Breadcrumbs/Breadcrumbs.js +4 -5
- package/legacy/Button/Button.js +36 -37
- package/legacy/ButtonBase/ButtonBase.js +5 -6
- package/legacy/ButtonBase/TouchRipple.js +3 -5
- package/legacy/ButtonGroup/ButtonGroup.js +27 -28
- package/legacy/Card/Card.js +3 -5
- package/legacy/CardActionArea/CardActionArea.js +3 -4
- package/legacy/CardActions/CardActions.js +4 -6
- package/legacy/CardContent/CardContent.js +3 -5
- package/legacy/CardHeader/CardHeader.js +10 -11
- package/legacy/CardMedia/CardMedia.js +7 -9
- package/legacy/Checkbox/Checkbox.js +8 -9
- package/legacy/Chip/Chip.js +25 -26
- package/legacy/CircularProgress/CircularProgress.js +10 -12
- package/legacy/Collapse/Collapse.js +16 -17
- package/legacy/CssBaseline/CssBaseline.js +7 -9
- package/legacy/Dialog/Dialog.js +18 -19
- package/legacy/DialogActions/DialogActions.js +4 -6
- package/legacy/DialogContent/DialogContent.js +4 -5
- package/legacy/DialogContentText/DialogContentText.js +4 -6
- package/legacy/DialogTitle/DialogTitle.js +2 -4
- package/legacy/Divider/Divider.js +17 -19
- package/legacy/Drawer/Drawer.js +21 -23
- package/legacy/Fab/Fab.js +12 -13
- package/legacy/Fade/Fade.js +6 -8
- package/legacy/FilledInput/FilledInput.js +23 -24
- package/legacy/FilledInput/filledInputClasses.js +2 -4
- package/legacy/FormControl/FormControl.js +8 -10
- package/legacy/FormControlLabel/FormControlLabel.js +10 -11
- package/legacy/FormGroup/FormGroup.js +4 -6
- package/legacy/FormHelperText/FormHelperText.js +11 -12
- package/legacy/FormLabel/FormLabel.js +12 -13
- package/legacy/GlobalStyles/GlobalStyles.js +2 -4
- package/legacy/Grid/Grid.js +11 -13
- package/legacy/Grow/Grow.js +6 -8
- package/legacy/Hidden/Hidden.js +13 -15
- package/legacy/Hidden/HiddenCss.js +3 -4
- package/legacy/Hidden/withWidth.js +5 -7
- package/legacy/Icon/Icon.js +3 -5
- package/legacy/IconButton/IconButton.js +14 -15
- package/legacy/ImageList/ImageList.js +7 -9
- package/legacy/ImageListItem/ImageListItem.js +8 -9
- package/legacy/ImageListItemBar/ImageListItemBar.js +11 -13
- package/legacy/Input/Input.js +7 -8
- package/legacy/Input/inputClasses.js +2 -4
- package/legacy/InputAdornment/InputAdornment.js +8 -9
- package/legacy/InputBase/InputBase.js +27 -28
- package/legacy/InputLabel/InputLabel.js +13 -14
- package/legacy/LinearProgress/LinearProgress.js +15 -17
- package/legacy/Link/Link.js +8 -9
- package/legacy/List/List.js +6 -8
- package/legacy/ListItem/ListItem.js +24 -25
- package/legacy/ListItemAvatar/ListItemAvatar.js +4 -6
- package/legacy/ListItemButton/ListItemButton.js +15 -16
- package/legacy/ListItemIcon/ListItemIcon.js +4 -6
- package/legacy/ListItemSecondaryAction/ListItemSecondaryAction.js +4 -6
- package/legacy/ListItemText/ListItemText.js +10 -11
- package/legacy/ListSubheader/ListSubheader.js +8 -10
- package/legacy/Menu/Menu.js +10 -12
- package/legacy/MenuItem/MenuItem.js +21 -22
- package/legacy/MenuList/MenuList.js +3 -5
- package/legacy/MobileStepper/MobileStepper.js +10 -12
- package/legacy/Modal/Modal.js +9 -11
- package/legacy/NativeSelect/NativeSelect.js +6 -8
- package/legacy/NativeSelect/NativeSelectInput.js +16 -17
- package/legacy/OutlinedInput/NotchedOutline.js +6 -8
- package/legacy/OutlinedInput/OutlinedInput.js +22 -23
- package/legacy/OutlinedInput/outlinedInputClasses.js +2 -4
- package/legacy/Pagination/Pagination.js +7 -9
- package/legacy/PaginationItem/PaginationItem.js +23 -24
- package/legacy/Paper/Paper.js +7 -9
- package/legacy/Popover/Popover.js +10 -12
- package/legacy/Popper/Popper.js +4 -6
- package/legacy/Radio/Radio.js +7 -8
- package/legacy/Radio/RadioButtonIcon.js +3 -5
- package/legacy/RadioGroup/RadioGroup.js +3 -5
- package/legacy/Rating/Rating.js +23 -24
- package/legacy/ScopedCssBaseline/ScopedCssBaseline.js +4 -6
- package/legacy/Select/Select.js +8 -10
- package/legacy/Select/SelectInput.js +10 -11
- package/legacy/Skeleton/Skeleton.js +11 -13
- package/legacy/Slide/Slide.js +8 -10
- package/legacy/Slider/Slider.js +65 -66
- package/legacy/Snackbar/Snackbar.js +15 -16
- package/legacy/SnackbarContent/SnackbarContent.js +4 -5
- package/legacy/SpeedDial/SpeedDial.js +14 -15
- package/legacy/SpeedDialAction/SpeedDialAction.js +15 -16
- package/legacy/SpeedDialIcon/SpeedDialIcon.js +6 -7
- package/legacy/Step/Step.js +6 -8
- package/legacy/StepButton/StepButton.js +7 -8
- package/legacy/StepConnector/StepConnector.js +8 -10
- package/legacy/StepContent/StepContent.js +7 -9
- package/legacy/StepIcon/StepIcon.js +6 -7
- package/legacy/StepLabel/StepLabel.js +19 -20
- package/legacy/Stepper/Stepper.js +8 -10
- package/legacy/SvgIcon/SvgIcon.js +4 -6
- package/legacy/SwipeableDrawer/SwipeArea.js +8 -9
- package/legacy/SwipeableDrawer/SwipeableDrawer.js +8 -10
- package/legacy/Switch/Switch.js +10 -11
- package/legacy/Tab/Tab.js +15 -16
- package/legacy/TabScrollButton/TabScrollButton.js +6 -7
- package/legacy/Table/Table.js +5 -7
- package/legacy/TableBody/TableBody.js +3 -5
- package/legacy/TableCell/TableCell.js +14 -15
- package/legacy/TableContainer/TableContainer.js +3 -5
- package/legacy/TableFooter/TableFooter.js +3 -5
- package/legacy/TableHead/TableHead.js +3 -5
- package/legacy/TablePagination/TablePagination.js +14 -15
- package/legacy/TablePagination/TablePaginationActions.js +7 -9
- package/legacy/TableRow/TableRow.js +3 -4
- package/legacy/TableSortLabel/TableSortLabel.js +6 -7
- package/legacy/Tabs/ScrollbarSize.js +2 -4
- package/legacy/Tabs/Tabs.js +22 -23
- package/legacy/TextField/TextField.js +12 -14
- package/legacy/ToggleButton/ToggleButton.js +11 -12
- package/legacy/ToggleButtonGroup/ToggleButtonGroup.js +7 -8
- package/legacy/Toolbar/Toolbar.js +5 -6
- package/legacy/Tooltip/Tooltip.js +33 -34
- package/legacy/Typography/Typography.js +9 -11
- package/legacy/Zoom/Zoom.js +6 -8
- package/legacy/index.js +1 -1
- package/legacy/internal/SwitchBase.js +8 -10
- package/legacy/styles/CssVarsProvider.js +2 -4
- package/legacy/styles/ThemeProvider.js +2 -4
- package/legacy/styles/adaptV4Theme.js +6 -7
- package/legacy/styles/createMixins.js +2 -3
- package/legacy/styles/createPalette.js +4 -6
- package/legacy/styles/createTheme.js +3 -4
- package/legacy/styles/createTransitions.js +5 -7
- package/legacy/styles/createTypography.js +4 -6
- package/legacy/styles/experimental_extendTheme.js +10 -12
- package/legacy/styles/responsiveFontSizes.js +4 -6
- package/legacy/usePagination/usePagination.js +2 -4
- package/legacy/useScrollTrigger/useScrollTrigger.js +2 -4
- package/legacy/utils/createSvgIcon.js +3 -5
- package/modern/Accordion/Accordion.js +43 -44
- package/modern/AccordionActions/AccordionActions.js +18 -18
- package/modern/AccordionDetails/AccordionDetails.js +9 -7
- package/modern/AccordionSummary/AccordionSummary.js +32 -32
- package/modern/Alert/Alert.js +60 -64
- package/modern/AlertTitle/AlertTitle.js +9 -7
- package/modern/AppBar/AppBar.js +73 -89
- package/modern/Autocomplete/Autocomplete.js +150 -168
- package/modern/Avatar/Avatar.js +38 -42
- package/modern/AvatarGroup/AvatarGroup.js +33 -34
- package/modern/Backdrop/Backdrop.js +31 -33
- package/modern/Badge/Badge.js +107 -119
- package/modern/BottomNavigation/BottomNavigation.js +17 -15
- package/modern/BottomNavigationAction/BottomNavigationAction.js +31 -29
- package/modern/Breadcrumbs/BreadcrumbCollapsed.js +34 -35
- package/modern/Breadcrumbs/Breadcrumbs.js +21 -19
- package/modern/Button/Button.js +133 -168
- package/modern/ButtonBase/ButtonBase.js +42 -43
- package/modern/ButtonBase/TouchRipple.js +12 -9
- package/modern/ButtonGroup/ButtonGroup.js +89 -111
- package/modern/Card/Card.js +12 -11
- package/modern/CardActionArea/CardActionArea.js +12 -9
- package/modern/CardActions/CardActions.js +18 -18
- package/modern/CardContent/CardContent.js +12 -11
- package/modern/CardHeader/CardHeader.js +31 -30
- package/modern/CardMedia/CardMedia.js +27 -28
- package/modern/Checkbox/Checkbox.js +39 -44
- package/modern/Chip/Chip.js +129 -146
- package/modern/CircularProgress/CircularProgress.js +36 -43
- package/modern/Collapse/Collapse.js +65 -73
- package/modern/CssBaseline/CssBaseline.js +14 -17
- package/modern/Dialog/Dialog.js +94 -103
- package/modern/DialogActions/DialogActions.js +18 -18
- package/modern/DialogContent/DialogContent.js +22 -22
- package/modern/DialogContentText/DialogContentText.js +11 -13
- package/modern/DialogTitle/DialogTitle.js +10 -8
- package/modern/Divider/Divider.js +84 -99
- package/modern/Drawer/Drawer.js +76 -85
- package/modern/Fab/Fab.js +59 -70
- package/modern/Fade/Fade.js +30 -31
- package/modern/FilledInput/FilledInput.js +117 -135
- package/modern/FilledInput/filledInputClasses.js +2 -4
- package/modern/FormControl/FormControl.js +35 -41
- package/modern/FormControlLabel/FormControlLabel.js +38 -43
- package/modern/FormGroup/FormGroup.js +16 -16
- package/modern/FormHelperText/FormHelperText.js +23 -30
- package/modern/FormLabel/FormLabel.js +18 -26
- package/modern/GlobalStyles/GlobalStyles.js +3 -3
- package/modern/Grid/Grid.js +41 -50
- package/modern/Grow/Grow.js +30 -31
- package/modern/Hidden/Hidden.js +32 -31
- package/modern/Hidden/HiddenCss.js +29 -29
- package/modern/Hidden/withWidth.js +20 -20
- package/modern/Icon/Icon.js +15 -14
- package/modern/IconButton/IconButton.js +52 -59
- package/modern/ImageList/ImageList.js +29 -30
- package/modern/ImageListItem/ImageListItem.js +39 -40
- package/modern/ImageListItemBar/ImageListItemBar.js +41 -47
- package/modern/Input/Input.js +74 -77
- package/modern/Input/inputClasses.js +2 -4
- package/modern/InputAdornment/InputAdornment.js +34 -36
- package/modern/InputBase/InputBase.js +92 -116
- package/modern/InputLabel/InputLabel.js +68 -83
- package/modern/LinearProgress/LinearProgress.js +58 -64
- package/modern/Link/Link.js +64 -69
- package/modern/List/List.js +24 -24
- package/modern/ListItem/ListItem.js +96 -113
- package/modern/ListItemAvatar/ListItemAvatar.js +15 -15
- package/modern/ListItemButton/ListItemButton.js +35 -40
- package/modern/ListItemIcon/ListItemIcon.js +15 -15
- package/modern/ListItemSecondaryAction/ListItemSecondaryAction.js +15 -15
- package/modern/ListItemText/ListItemText.js +34 -34
- package/modern/ListSubheader/ListSubheader.js +32 -36
- package/modern/Menu/Menu.js +39 -38
- package/modern/MenuItem/MenuItem.js +45 -50
- package/modern/MenuList/MenuList.js +20 -17
- package/modern/MobileStepper/MobileStepper.js +53 -61
- package/modern/Modal/Modal.js +46 -51
- package/modern/NativeSelect/NativeSelect.js +22 -26
- package/modern/NativeSelect/NativeSelectInput.js +43 -50
- package/modern/OutlinedInput/NotchedOutline.js +51 -55
- package/modern/OutlinedInput/OutlinedInput.js +59 -72
- package/modern/OutlinedInput/outlinedInputClasses.js +2 -4
- package/modern/Pagination/Pagination.js +31 -35
- package/modern/PaginationItem/PaginationItem.js +93 -105
- package/modern/Paper/Paper.js +28 -32
- package/modern/Popover/Popover.js +51 -49
- package/modern/Popper/Popper.js +27 -25
- package/modern/Radio/Radio.js +33 -36
- package/modern/Radio/RadioButtonIcon.js +10 -11
- package/modern/RadioGroup/RadioGroup.js +17 -14
- package/modern/Rating/Rating.js +73 -88
- package/modern/ScopedCssBaseline/ScopedCssBaseline.js +15 -18
- package/modern/Select/Select.js +55 -59
- package/modern/Select/SelectInput.js +57 -58
- package/modern/Skeleton/Skeleton.js +46 -51
- package/modern/Slide/Slide.js +33 -37
- package/modern/Slider/Slider.js +216 -281
- package/modern/Snackbar/Snackbar.js +67 -81
- package/modern/SnackbarContent/SnackbarContent.js +15 -13
- package/modern/SpeedDial/SpeedDial.js +83 -85
- package/modern/SpeedDialAction/SpeedDialAction.js +52 -57
- package/modern/SpeedDialIcon/SpeedDialIcon.js +24 -25
- package/modern/Step/Step.js +26 -27
- package/modern/StepButton/StepButton.js +24 -23
- package/modern/StepConnector/StepConnector.js +31 -34
- package/modern/StepContent/StepContent.js +24 -23
- package/modern/StepIcon/StepIcon.js +22 -22
- package/modern/StepLabel/StepLabel.js +33 -34
- package/modern/Stepper/Stepper.js +31 -33
- package/modern/SvgIcon/SvgIcon.js +20 -19
- package/modern/SwipeableDrawer/SwipeArea.js +30 -33
- package/modern/SwipeableDrawer/SwipeableDrawer.js +43 -49
- package/modern/Switch/Switch.js +52 -59
- package/modern/Tab/Tab.js +83 -93
- package/modern/TabScrollButton/TabScrollButton.js +25 -30
- package/modern/Table/Table.js +19 -20
- package/modern/TableBody/TableBody.js +12 -11
- package/modern/TableCell/TableCell.js +59 -70
- package/modern/TableContainer/TableContainer.js +12 -11
- package/modern/TableFooter/TableFooter.js +12 -11
- package/modern/TableHead/TableHead.js +12 -11
- package/modern/TablePagination/TablePagination.js +49 -53
- package/modern/TablePagination/TablePaginationActions.js +25 -22
- package/modern/TableRow/TableRow.js +14 -13
- package/modern/TableSortLabel/TableSortLabel.js +23 -23
- package/modern/Tabs/ScrollbarSize.js +9 -7
- package/modern/Tabs/Tabs.js +92 -107
- package/modern/TextField/TextField.js +57 -57
- package/modern/ToggleButton/ToggleButton.js +35 -36
- package/modern/ToggleButtonGroup/ToggleButtonGroup.js +59 -60
- package/modern/Toolbar/Toolbar.js +25 -26
- package/modern/Tooltip/Tooltip.js +147 -177
- package/modern/Typography/Typography.js +32 -37
- package/modern/Zoom/Zoom.js +30 -31
- package/modern/index.js +1 -1
- package/modern/internal/SwitchBase.js +43 -45
- package/modern/styles/CssVarsProvider.js +3 -3
- package/modern/styles/ThemeProvider.js +10 -7
- package/modern/styles/adaptV4Theme.js +31 -31
- package/modern/styles/createMixins.js +4 -4
- package/modern/styles/createPalette.js +13 -16
- package/modern/styles/createTheme.js +11 -16
- package/modern/styles/createTransitions.js +14 -17
- package/modern/styles/createTypography.js +29 -31
- package/modern/styles/experimental_extendTheme.js +33 -41
- package/modern/styles/responsiveFontSizes.js +11 -17
- package/modern/usePagination/usePagination.js +20 -18
- package/modern/useScrollTrigger/useScrollTrigger.js +10 -8
- package/modern/utils/createSvgIcon.js +5 -4
- package/node/Accordion/Accordion.js +43 -44
- package/node/AccordionActions/AccordionActions.js +18 -18
- package/node/AccordionDetails/AccordionDetails.js +9 -7
- package/node/AccordionSummary/AccordionSummary.js +32 -32
- package/node/Alert/Alert.js +60 -64
- package/node/AlertTitle/AlertTitle.js +9 -7
- package/node/AppBar/AppBar.js +73 -89
- package/node/Autocomplete/Autocomplete.js +153 -171
- package/node/Avatar/Avatar.js +38 -42
- package/node/AvatarGroup/AvatarGroup.js +33 -34
- package/node/Backdrop/Backdrop.js +31 -33
- package/node/Badge/Badge.js +107 -119
- package/node/BottomNavigation/BottomNavigation.js +17 -15
- package/node/BottomNavigationAction/BottomNavigationAction.js +31 -29
- package/node/Breadcrumbs/BreadcrumbCollapsed.js +34 -35
- package/node/Breadcrumbs/Breadcrumbs.js +21 -19
- package/node/Button/Button.js +133 -168
- package/node/ButtonBase/ButtonBase.js +42 -43
- package/node/ButtonBase/TouchRipple.js +12 -9
- package/node/ButtonGroup/ButtonGroup.js +89 -111
- package/node/Card/Card.js +12 -11
- package/node/CardActionArea/CardActionArea.js +12 -9
- package/node/CardActions/CardActions.js +18 -18
- package/node/CardContent/CardContent.js +12 -11
- package/node/CardHeader/CardHeader.js +31 -30
- package/node/CardMedia/CardMedia.js +27 -28
- package/node/Checkbox/Checkbox.js +39 -44
- package/node/Chip/Chip.js +129 -146
- package/node/CircularProgress/CircularProgress.js +36 -43
- package/node/Collapse/Collapse.js +65 -73
- package/node/CssBaseline/CssBaseline.js +14 -17
- package/node/Dialog/Dialog.js +94 -103
- package/node/DialogActions/DialogActions.js +18 -18
- package/node/DialogContent/DialogContent.js +22 -22
- package/node/DialogContentText/DialogContentText.js +11 -13
- package/node/DialogTitle/DialogTitle.js +10 -8
- package/node/Divider/Divider.js +84 -99
- package/node/Drawer/Drawer.js +76 -85
- package/node/Fab/Fab.js +60 -71
- package/node/Fade/Fade.js +30 -31
- package/node/FilledInput/FilledInput.js +117 -135
- package/node/FilledInput/filledInputClasses.js +2 -4
- package/node/FormControl/FormControl.js +35 -41
- package/node/FormControlLabel/FormControlLabel.js +38 -43
- package/node/FormGroup/FormGroup.js +16 -16
- package/node/FormHelperText/FormHelperText.js +23 -30
- package/node/FormLabel/FormLabel.js +18 -26
- package/node/GlobalStyles/GlobalStyles.js +3 -3
- package/node/Grid/Grid.js +43 -54
- package/node/Grow/Grow.js +30 -31
- package/node/Hidden/Hidden.js +36 -34
- package/node/Hidden/HiddenCss.js +29 -29
- package/node/Hidden/withWidth.js +20 -20
- package/node/Icon/Icon.js +15 -14
- package/node/IconButton/IconButton.js +52 -59
- package/node/ImageList/ImageList.js +29 -30
- package/node/ImageListItem/ImageListItem.js +39 -40
- package/node/ImageListItemBar/ImageListItemBar.js +41 -47
- package/node/Input/Input.js +74 -77
- package/node/Input/inputClasses.js +2 -4
- package/node/InputAdornment/InputAdornment.js +34 -36
- package/node/InputBase/InputBase.js +92 -116
- package/node/InputLabel/InputLabel.js +68 -83
- package/node/LinearProgress/LinearProgress.js +58 -64
- package/node/Link/Link.js +64 -69
- package/node/List/List.js +24 -24
- package/node/ListItem/ListItem.js +96 -113
- package/node/ListItemAvatar/ListItemAvatar.js +15 -15
- package/node/ListItemButton/ListItemButton.js +35 -40
- package/node/ListItemIcon/ListItemIcon.js +15 -15
- package/node/ListItemSecondaryAction/ListItemSecondaryAction.js +15 -15
- package/node/ListItemText/ListItemText.js +34 -34
- package/node/ListSubheader/ListSubheader.js +32 -36
- package/node/Menu/Menu.js +39 -38
- package/node/MenuItem/MenuItem.js +45 -50
- package/node/MenuList/MenuList.js +20 -17
- package/node/MobileStepper/MobileStepper.js +53 -61
- package/node/Modal/Modal.js +46 -51
- package/node/NativeSelect/NativeSelect.js +22 -26
- package/node/NativeSelect/NativeSelectInput.js +43 -50
- package/node/OutlinedInput/NotchedOutline.js +51 -55
- package/node/OutlinedInput/OutlinedInput.js +59 -72
- package/node/OutlinedInput/outlinedInputClasses.js +2 -4
- package/node/Pagination/Pagination.js +31 -35
- package/node/PaginationItem/PaginationItem.js +93 -105
- package/node/Paper/Paper.js +28 -32
- package/node/Popover/Popover.js +51 -49
- package/node/Popper/Popper.js +27 -25
- package/node/Radio/Radio.js +33 -36
- package/node/Radio/RadioButtonIcon.js +10 -11
- package/node/RadioGroup/RadioGroup.js +17 -14
- package/node/Rating/Rating.js +73 -88
- package/node/ScopedCssBaseline/ScopedCssBaseline.js +15 -18
- package/node/Select/Select.js +55 -59
- package/node/Select/SelectInput.js +57 -58
- package/node/Skeleton/Skeleton.js +46 -51
- package/node/Slide/Slide.js +34 -39
- package/node/Slider/Slider.js +216 -281
- package/node/Snackbar/Snackbar.js +67 -81
- package/node/SnackbarContent/SnackbarContent.js +15 -13
- package/node/SpeedDial/SpeedDial.js +83 -85
- package/node/SpeedDialAction/SpeedDialAction.js +52 -59
- package/node/SpeedDialIcon/SpeedDialIcon.js +24 -25
- package/node/Step/Step.js +26 -27
- package/node/StepButton/StepButton.js +24 -23
- package/node/StepConnector/StepConnector.js +31 -34
- package/node/StepContent/StepContent.js +24 -23
- package/node/StepIcon/StepIcon.js +22 -22
- package/node/StepLabel/StepLabel.js +33 -34
- package/node/Stepper/Stepper.js +31 -33
- package/node/SvgIcon/SvgIcon.js +20 -19
- package/node/SwipeableDrawer/SwipeArea.js +30 -33
- package/node/SwipeableDrawer/SwipeableDrawer.js +44 -51
- package/node/Switch/Switch.js +52 -61
- package/node/Tab/Tab.js +83 -93
- package/node/TabScrollButton/TabScrollButton.js +26 -32
- package/node/Table/Table.js +19 -20
- package/node/TableBody/TableBody.js +12 -11
- package/node/TableCell/TableCell.js +59 -70
- package/node/TableContainer/TableContainer.js +12 -11
- package/node/TableFooter/TableFooter.js +12 -11
- package/node/TableHead/TableHead.js +12 -11
- package/node/TablePagination/TablePagination.js +49 -53
- package/node/TablePagination/TablePaginationActions.js +25 -22
- package/node/TableRow/TableRow.js +14 -13
- package/node/TableSortLabel/TableSortLabel.js +23 -23
- package/node/Tabs/ScrollbarSize.js +9 -7
- package/node/Tabs/Tabs.js +92 -107
- package/node/TextField/TextField.js +57 -57
- package/node/ToggleButton/ToggleButton.js +35 -38
- package/node/ToggleButtonGroup/ToggleButtonGroup.js +59 -60
- package/node/Toolbar/Toolbar.js +25 -26
- package/node/Tooltip/Tooltip.js +147 -177
- package/node/Typography/Typography.js +32 -37
- package/node/Zoom/Zoom.js +30 -31
- package/node/index.js +1 -1
- package/node/internal/SwitchBase.js +43 -45
- package/node/styles/CssVarsProvider.js +3 -3
- package/node/styles/ThemeProvider.js +10 -7
- package/node/styles/adaptV4Theme.js +32 -31
- package/node/styles/createMixins.js +5 -4
- package/node/styles/createPalette.js +13 -16
- package/node/styles/createTheme.js +11 -16
- package/node/styles/createTransitions.js +15 -17
- package/node/styles/createTypography.js +30 -31
- package/node/styles/experimental_extendTheme.js +33 -41
- package/node/styles/responsiveFontSizes.js +12 -17
- package/node/usePagination/usePagination.js +21 -18
- package/node/useScrollTrigger/useScrollTrigger.js +11 -8
- package/node/utils/createSvgIcon.js +5 -4
- package/package.json +4 -4
- package/styles/CssVarsProvider.js +3 -3
- package/styles/ThemeProvider.js +10 -7
- package/styles/adaptV4Theme.js +31 -31
- package/styles/createMixins.js +4 -4
- package/styles/createPalette.js +13 -16
- package/styles/createTheme.js +11 -16
- package/styles/createTransitions.js +14 -17
- package/styles/createTypography.js +29 -31
- package/styles/experimental_extendTheme.js +33 -41
- package/styles/responsiveFontSizes.js +11 -17
- package/umd/material-ui.development.js +6066 -7085
- package/umd/material-ui.production.min.js +21 -21
- package/usePagination/usePagination.js +20 -18
- package/useScrollTrigger/useScrollTrigger.js +10 -8
- package/utils/createSvgIcon.js +5 -4
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
2
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
+
const _excluded = ["slots", "slotProps"];
|
|
1
4
|
import * as React from 'react';
|
|
2
5
|
import PropTypes from 'prop-types';
|
|
3
6
|
import { emphasize } from '@mui/system';
|
|
@@ -7,33 +10,30 @@ import ButtonBase from '../ButtonBase';
|
|
|
7
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
11
|
const BreadcrumbCollapsedButton = styled(ButtonBase)(({
|
|
9
12
|
theme
|
|
10
|
-
}) => ({
|
|
13
|
+
}) => _extends({
|
|
11
14
|
display: 'flex',
|
|
12
15
|
marginLeft: `calc(${theme.spacing(1)} * 0.5)`,
|
|
13
|
-
marginRight: `calc(${theme.spacing(1)} * 0.5)
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
marginRight: `calc(${theme.spacing(1)} * 0.5)`
|
|
17
|
+
}, theme.palette.mode === 'light' ? {
|
|
18
|
+
backgroundColor: theme.palette.grey[100],
|
|
19
|
+
color: theme.palette.grey[700]
|
|
20
|
+
} : {
|
|
21
|
+
backgroundColor: theme.palette.grey[700],
|
|
22
|
+
color: theme.palette.grey[100]
|
|
23
|
+
}, {
|
|
24
|
+
borderRadius: 2,
|
|
25
|
+
'&:hover, &:focus': _extends({}, theme.palette.mode === 'light' ? {
|
|
26
|
+
backgroundColor: theme.palette.grey[200]
|
|
17
27
|
} : {
|
|
18
|
-
backgroundColor: theme.palette.grey[
|
|
19
|
-
color: theme.palette.grey[100]
|
|
28
|
+
backgroundColor: theme.palette.grey[600]
|
|
20
29
|
}),
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
},
|
|
29
|
-
'&:active': {
|
|
30
|
-
boxShadow: theme.shadows[0],
|
|
31
|
-
...(theme.palette.mode === 'light' ? {
|
|
32
|
-
backgroundColor: emphasize(theme.palette.grey[200], 0.12)
|
|
33
|
-
} : {
|
|
34
|
-
backgroundColor: emphasize(theme.palette.grey[600], 0.12)
|
|
35
|
-
})
|
|
36
|
-
}
|
|
30
|
+
'&:active': _extends({
|
|
31
|
+
boxShadow: theme.shadows[0]
|
|
32
|
+
}, theme.palette.mode === 'light' ? {
|
|
33
|
+
backgroundColor: emphasize(theme.palette.grey[200], 0.12)
|
|
34
|
+
} : {
|
|
35
|
+
backgroundColor: emphasize(theme.palette.grey[600], 0.12)
|
|
36
|
+
})
|
|
37
37
|
}));
|
|
38
38
|
const BreadcrumbCollapsedIcon = styled(MoreHorizIcon)({
|
|
39
39
|
width: 24,
|
|
@@ -45,22 +45,21 @@ const BreadcrumbCollapsedIcon = styled(MoreHorizIcon)({
|
|
|
45
45
|
*/
|
|
46
46
|
function BreadcrumbCollapsed(props) {
|
|
47
47
|
const {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
slots = {},
|
|
49
|
+
slotProps = {}
|
|
50
|
+
} = props,
|
|
51
|
+
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
|
52
52
|
const ownerState = props;
|
|
53
53
|
return /*#__PURE__*/_jsx("li", {
|
|
54
|
-
children: /*#__PURE__*/_jsx(BreadcrumbCollapsedButton, {
|
|
55
|
-
focusRipple: true
|
|
56
|
-
|
|
54
|
+
children: /*#__PURE__*/_jsx(BreadcrumbCollapsedButton, _extends({
|
|
55
|
+
focusRipple: true
|
|
56
|
+
}, otherProps, {
|
|
57
57
|
ownerState: ownerState,
|
|
58
|
-
children: /*#__PURE__*/_jsx(BreadcrumbCollapsedIcon, {
|
|
58
|
+
children: /*#__PURE__*/_jsx(BreadcrumbCollapsedIcon, _extends({
|
|
59
59
|
as: slots.CollapsedIcon,
|
|
60
|
-
ownerState: ownerState
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
})
|
|
60
|
+
ownerState: ownerState
|
|
61
|
+
}, slotProps.collapsedIcon))
|
|
62
|
+
}))
|
|
64
63
|
});
|
|
65
64
|
}
|
|
66
65
|
process.env.NODE_ENV !== "production" ? BreadcrumbCollapsed.propTypes = {
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
const _excluded = ["children", "className", "component", "slots", "slotProps", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
|
|
1
4
|
import * as React from 'react';
|
|
2
5
|
import { isFragment } from 'react-is';
|
|
3
6
|
import PropTypes from 'prop-types';
|
|
@@ -74,21 +77,20 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
|
|
|
74
77
|
name: 'MuiBreadcrumbs'
|
|
75
78
|
});
|
|
76
79
|
const {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
80
|
+
children,
|
|
81
|
+
className,
|
|
82
|
+
component = 'nav',
|
|
83
|
+
slots = {},
|
|
84
|
+
slotProps = {},
|
|
85
|
+
expandText = 'Show path',
|
|
86
|
+
itemsAfterCollapse = 1,
|
|
87
|
+
itemsBeforeCollapse = 1,
|
|
88
|
+
maxItems = 8,
|
|
89
|
+
separator = '/'
|
|
90
|
+
} = props,
|
|
91
|
+
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
89
92
|
const [expanded, setExpanded] = React.useState(false);
|
|
90
|
-
const ownerState = {
|
|
91
|
-
...props,
|
|
93
|
+
const ownerState = _extends({}, props, {
|
|
92
94
|
component,
|
|
93
95
|
expanded,
|
|
94
96
|
expandText,
|
|
@@ -96,7 +98,7 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
|
|
|
96
98
|
itemsBeforeCollapse,
|
|
97
99
|
maxItems,
|
|
98
100
|
separator
|
|
99
|
-
};
|
|
101
|
+
});
|
|
100
102
|
const classes = useUtilityClasses(ownerState);
|
|
101
103
|
const collapsedIconSlotProps = useSlotProps({
|
|
102
104
|
elementType: slots.CollapsedIcon,
|
|
@@ -148,20 +150,20 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
|
|
|
148
150
|
className: classes.li,
|
|
149
151
|
children: child
|
|
150
152
|
}, `child-${index}`));
|
|
151
|
-
return /*#__PURE__*/_jsx(BreadcrumbsRoot, {
|
|
153
|
+
return /*#__PURE__*/_jsx(BreadcrumbsRoot, _extends({
|
|
152
154
|
ref: ref,
|
|
153
155
|
component: component,
|
|
154
156
|
color: "text.secondary",
|
|
155
157
|
className: clsx(classes.root, className),
|
|
156
|
-
ownerState: ownerState
|
|
157
|
-
|
|
158
|
+
ownerState: ownerState
|
|
159
|
+
}, other, {
|
|
158
160
|
children: /*#__PURE__*/_jsx(BreadcrumbsOl, {
|
|
159
161
|
className: classes.ol,
|
|
160
162
|
ref: listRef,
|
|
161
163
|
ownerState: ownerState,
|
|
162
164
|
children: insertSeparators(expanded || maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems), classes.separator, separator, ownerState)
|
|
163
165
|
})
|
|
164
|
-
});
|
|
166
|
+
}));
|
|
165
167
|
});
|
|
166
168
|
process.env.NODE_ENV !== "production" ? Breadcrumbs.propTypes /* remove-proptypes */ = {
|
|
167
169
|
// ----------------------------- Warning --------------------------------
|
package/Button/Button.js
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
2
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
+
const _excluded = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
|
|
1
4
|
import * as React from 'react';
|
|
2
5
|
import PropTypes from 'prop-types';
|
|
3
6
|
import clsx from 'clsx';
|
|
@@ -28,28 +31,20 @@ const useUtilityClasses = ownerState => {
|
|
|
28
31
|
endIcon: ['endIcon', `iconSize${capitalize(size)}`]
|
|
29
32
|
};
|
|
30
33
|
const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
|
|
31
|
-
return {
|
|
32
|
-
...classes,
|
|
33
|
-
// forward the focused, disabled, etc. classes to the ButtonBase
|
|
34
|
-
...composedClasses
|
|
35
|
-
};
|
|
34
|
+
return _extends({}, classes, composedClasses);
|
|
36
35
|
};
|
|
37
|
-
const commonIconStyles = ownerState => ({
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
'& > *:nth-of-type(1)': {
|
|
50
|
-
fontSize: 22
|
|
51
|
-
}
|
|
52
|
-
})
|
|
36
|
+
const commonIconStyles = ownerState => _extends({}, ownerState.size === 'small' && {
|
|
37
|
+
'& > *:nth-of-type(1)': {
|
|
38
|
+
fontSize: 18
|
|
39
|
+
}
|
|
40
|
+
}, ownerState.size === 'medium' && {
|
|
41
|
+
'& > *:nth-of-type(1)': {
|
|
42
|
+
fontSize: 20
|
|
43
|
+
}
|
|
44
|
+
}, ownerState.size === 'large' && {
|
|
45
|
+
'& > *:nth-of-type(1)': {
|
|
46
|
+
fontSize: 22
|
|
47
|
+
}
|
|
53
48
|
});
|
|
54
49
|
const ButtonRoot = styled(ButtonBase, {
|
|
55
50
|
shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
|
|
@@ -68,131 +63,106 @@ const ButtonRoot = styled(ButtonBase, {
|
|
|
68
63
|
var _theme$palette$getCon, _theme$palette;
|
|
69
64
|
const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
|
|
70
65
|
const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
|
|
71
|
-
return {
|
|
72
|
-
...theme.typography.button,
|
|
66
|
+
return _extends({}, theme.typography.button, {
|
|
73
67
|
minWidth: 64,
|
|
74
68
|
padding: '6px 16px',
|
|
75
69
|
borderRadius: (theme.vars || theme).shape.borderRadius,
|
|
76
70
|
transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
|
|
77
71
|
duration: theme.transitions.duration.short
|
|
78
72
|
}),
|
|
79
|
-
'&:hover': {
|
|
73
|
+
'&:hover': _extends({
|
|
80
74
|
textDecoration: 'none',
|
|
81
75
|
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
|
|
82
76
|
// Reset on touch devices, it doesn't add specificity
|
|
83
77
|
'@media (hover: none)': {
|
|
84
78
|
backgroundColor: 'transparent'
|
|
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
|
-
backgroundColor: (theme.vars || theme).palette[ownerState.color].
|
|
112
|
-
|
|
113
|
-
'@media (hover: none)': {
|
|
114
|
-
backgroundColor: (theme.vars || theme).palette[ownerState.color].main
|
|
115
|
-
}
|
|
116
|
-
})
|
|
117
|
-
},
|
|
118
|
-
'&:active': {
|
|
119
|
-
...(ownerState.variant === 'contained' && {
|
|
120
|
-
boxShadow: (theme.vars || theme).shadows[8]
|
|
121
|
-
})
|
|
122
|
-
},
|
|
123
|
-
[`&.${buttonClasses.focusVisible}`]: {
|
|
124
|
-
...(ownerState.variant === 'contained' && {
|
|
125
|
-
boxShadow: (theme.vars || theme).shadows[6]
|
|
126
|
-
})
|
|
127
|
-
},
|
|
128
|
-
[`&.${buttonClasses.disabled}`]: {
|
|
129
|
-
color: (theme.vars || theme).palette.action.disabled,
|
|
130
|
-
...(ownerState.variant === 'outlined' && {
|
|
131
|
-
border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
|
|
132
|
-
}),
|
|
133
|
-
...(ownerState.variant === 'contained' && {
|
|
134
|
-
color: (theme.vars || theme).palette.action.disabled,
|
|
135
|
-
boxShadow: (theme.vars || theme).shadows[0],
|
|
136
|
-
backgroundColor: (theme.vars || theme).palette.action.disabledBackground
|
|
137
|
-
})
|
|
138
|
-
},
|
|
139
|
-
...(ownerState.variant === 'text' && {
|
|
140
|
-
padding: '6px 8px'
|
|
141
|
-
}),
|
|
142
|
-
...(ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
|
|
143
|
-
color: (theme.vars || theme).palette[ownerState.color].main
|
|
144
|
-
}),
|
|
145
|
-
...(ownerState.variant === 'outlined' && {
|
|
146
|
-
padding: '5px 15px',
|
|
147
|
-
border: '1px solid currentColor'
|
|
148
|
-
}),
|
|
149
|
-
...(ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
|
|
150
|
-
color: (theme.vars || theme).palette[ownerState.color].main,
|
|
151
|
-
border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
|
|
152
|
-
}),
|
|
153
|
-
...(ownerState.variant === 'contained' && {
|
|
154
|
-
color: theme.vars ?
|
|
155
|
-
// this is safe because grey does not change between default light/dark mode
|
|
156
|
-
theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
|
|
157
|
-
backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
|
|
158
|
-
boxShadow: (theme.vars || theme).shadows[2]
|
|
159
|
-
}),
|
|
160
|
-
...(ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
|
|
161
|
-
color: (theme.vars || theme).palette[ownerState.color].contrastText,
|
|
162
|
-
backgroundColor: (theme.vars || theme).palette[ownerState.color].main
|
|
163
|
-
}),
|
|
164
|
-
...(ownerState.color === 'inherit' && {
|
|
165
|
-
color: 'inherit',
|
|
166
|
-
borderColor: 'currentColor'
|
|
167
|
-
}),
|
|
168
|
-
...(ownerState.size === 'small' && ownerState.variant === 'text' && {
|
|
169
|
-
padding: '4px 5px',
|
|
170
|
-
fontSize: theme.typography.pxToRem(13)
|
|
171
|
-
}),
|
|
172
|
-
...(ownerState.size === 'large' && ownerState.variant === 'text' && {
|
|
173
|
-
padding: '8px 11px',
|
|
174
|
-
fontSize: theme.typography.pxToRem(15)
|
|
175
|
-
}),
|
|
176
|
-
...(ownerState.size === 'small' && ownerState.variant === 'outlined' && {
|
|
177
|
-
padding: '3px 9px',
|
|
178
|
-
fontSize: theme.typography.pxToRem(13)
|
|
179
|
-
}),
|
|
180
|
-
...(ownerState.size === 'large' && ownerState.variant === 'outlined' && {
|
|
181
|
-
padding: '7px 21px',
|
|
182
|
-
fontSize: theme.typography.pxToRem(15)
|
|
79
|
+
}
|
|
80
|
+
}, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
|
|
81
|
+
backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
|
|
82
|
+
// Reset on touch devices, it doesn't add specificity
|
|
83
|
+
'@media (hover: none)': {
|
|
84
|
+
backgroundColor: 'transparent'
|
|
85
|
+
}
|
|
86
|
+
}, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
|
|
87
|
+
border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
|
|
88
|
+
backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
|
|
89
|
+
// Reset on touch devices, it doesn't add specificity
|
|
90
|
+
'@media (hover: none)': {
|
|
91
|
+
backgroundColor: 'transparent'
|
|
92
|
+
}
|
|
93
|
+
}, ownerState.variant === 'contained' && {
|
|
94
|
+
backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
|
|
95
|
+
boxShadow: (theme.vars || theme).shadows[4],
|
|
96
|
+
// Reset on touch devices, it doesn't add specificity
|
|
97
|
+
'@media (hover: none)': {
|
|
98
|
+
boxShadow: (theme.vars || theme).shadows[2],
|
|
99
|
+
backgroundColor: (theme.vars || theme).palette.grey[300]
|
|
100
|
+
}
|
|
101
|
+
}, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
|
|
102
|
+
backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
|
|
103
|
+
// Reset on touch devices, it doesn't add specificity
|
|
104
|
+
'@media (hover: none)': {
|
|
105
|
+
backgroundColor: (theme.vars || theme).palette[ownerState.color].main
|
|
106
|
+
}
|
|
183
107
|
}),
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
fontSize: theme.typography.pxToRem(13)
|
|
108
|
+
'&:active': _extends({}, ownerState.variant === 'contained' && {
|
|
109
|
+
boxShadow: (theme.vars || theme).shadows[8]
|
|
187
110
|
}),
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
fontSize: theme.typography.pxToRem(15)
|
|
111
|
+
[`&.${buttonClasses.focusVisible}`]: _extends({}, ownerState.variant === 'contained' && {
|
|
112
|
+
boxShadow: (theme.vars || theme).shadows[6]
|
|
191
113
|
}),
|
|
192
|
-
|
|
193
|
-
|
|
114
|
+
[`&.${buttonClasses.disabled}`]: _extends({
|
|
115
|
+
color: (theme.vars || theme).palette.action.disabled
|
|
116
|
+
}, ownerState.variant === 'outlined' && {
|
|
117
|
+
border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
|
|
118
|
+
}, ownerState.variant === 'contained' && {
|
|
119
|
+
color: (theme.vars || theme).palette.action.disabled,
|
|
120
|
+
boxShadow: (theme.vars || theme).shadows[0],
|
|
121
|
+
backgroundColor: (theme.vars || theme).palette.action.disabledBackground
|
|
194
122
|
})
|
|
195
|
-
}
|
|
123
|
+
}, ownerState.variant === 'text' && {
|
|
124
|
+
padding: '6px 8px'
|
|
125
|
+
}, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
|
|
126
|
+
color: (theme.vars || theme).palette[ownerState.color].main
|
|
127
|
+
}, ownerState.variant === 'outlined' && {
|
|
128
|
+
padding: '5px 15px',
|
|
129
|
+
border: '1px solid currentColor'
|
|
130
|
+
}, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
|
|
131
|
+
color: (theme.vars || theme).palette[ownerState.color].main,
|
|
132
|
+
border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
|
|
133
|
+
}, ownerState.variant === 'contained' && {
|
|
134
|
+
color: theme.vars ?
|
|
135
|
+
// this is safe because grey does not change between default light/dark mode
|
|
136
|
+
theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
|
|
137
|
+
backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
|
|
138
|
+
boxShadow: (theme.vars || theme).shadows[2]
|
|
139
|
+
}, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
|
|
140
|
+
color: (theme.vars || theme).palette[ownerState.color].contrastText,
|
|
141
|
+
backgroundColor: (theme.vars || theme).palette[ownerState.color].main
|
|
142
|
+
}, ownerState.color === 'inherit' && {
|
|
143
|
+
color: 'inherit',
|
|
144
|
+
borderColor: 'currentColor'
|
|
145
|
+
}, ownerState.size === 'small' && ownerState.variant === 'text' && {
|
|
146
|
+
padding: '4px 5px',
|
|
147
|
+
fontSize: theme.typography.pxToRem(13)
|
|
148
|
+
}, ownerState.size === 'large' && ownerState.variant === 'text' && {
|
|
149
|
+
padding: '8px 11px',
|
|
150
|
+
fontSize: theme.typography.pxToRem(15)
|
|
151
|
+
}, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
|
|
152
|
+
padding: '3px 9px',
|
|
153
|
+
fontSize: theme.typography.pxToRem(13)
|
|
154
|
+
}, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
|
|
155
|
+
padding: '7px 21px',
|
|
156
|
+
fontSize: theme.typography.pxToRem(15)
|
|
157
|
+
}, ownerState.size === 'small' && ownerState.variant === 'contained' && {
|
|
158
|
+
padding: '4px 10px',
|
|
159
|
+
fontSize: theme.typography.pxToRem(13)
|
|
160
|
+
}, ownerState.size === 'large' && ownerState.variant === 'contained' && {
|
|
161
|
+
padding: '8px 22px',
|
|
162
|
+
fontSize: theme.typography.pxToRem(15)
|
|
163
|
+
}, ownerState.fullWidth && {
|
|
164
|
+
width: '100%'
|
|
165
|
+
});
|
|
196
166
|
}, ({
|
|
197
167
|
ownerState
|
|
198
168
|
}) => ownerState.disableElevation && {
|
|
@@ -221,15 +191,13 @@ const ButtonStartIcon = styled('span', {
|
|
|
221
191
|
}
|
|
222
192
|
})(({
|
|
223
193
|
ownerState
|
|
224
|
-
}) => ({
|
|
194
|
+
}) => _extends({
|
|
225
195
|
display: 'inherit',
|
|
226
196
|
marginRight: 8,
|
|
227
|
-
marginLeft: -4
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
...commonIconStyles(ownerState)
|
|
232
|
-
}));
|
|
197
|
+
marginLeft: -4
|
|
198
|
+
}, ownerState.size === 'small' && {
|
|
199
|
+
marginLeft: -2
|
|
200
|
+
}, commonIconStyles(ownerState)));
|
|
233
201
|
const ButtonEndIcon = styled('span', {
|
|
234
202
|
name: 'MuiButton',
|
|
235
203
|
slot: 'EndIcon',
|
|
@@ -241,15 +209,13 @@ const ButtonEndIcon = styled('span', {
|
|
|
241
209
|
}
|
|
242
210
|
})(({
|
|
243
211
|
ownerState
|
|
244
|
-
}) => ({
|
|
212
|
+
}) => _extends({
|
|
245
213
|
display: 'inherit',
|
|
246
214
|
marginRight: -4,
|
|
247
|
-
marginLeft: 8
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
...commonIconStyles(ownerState)
|
|
252
|
-
}));
|
|
215
|
+
marginLeft: 8
|
|
216
|
+
}, ownerState.size === 'small' && {
|
|
217
|
+
marginRight: -2
|
|
218
|
+
}, commonIconStyles(ownerState)));
|
|
253
219
|
const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
|
|
254
220
|
// props priority: `inProps` > `contextProps` > `themeDefaultProps`
|
|
255
221
|
const contextProps = React.useContext(ButtonGroupContext);
|
|
@@ -259,24 +225,23 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
|
|
|
259
225
|
name: 'MuiButton'
|
|
260
226
|
});
|
|
261
227
|
const {
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
const ownerState = {
|
|
279
|
-
...props,
|
|
228
|
+
children,
|
|
229
|
+
color = 'primary',
|
|
230
|
+
component = 'button',
|
|
231
|
+
className,
|
|
232
|
+
disabled = false,
|
|
233
|
+
disableElevation = false,
|
|
234
|
+
disableFocusRipple = false,
|
|
235
|
+
endIcon: endIconProp,
|
|
236
|
+
focusVisibleClassName,
|
|
237
|
+
fullWidth = false,
|
|
238
|
+
size = 'medium',
|
|
239
|
+
startIcon: startIconProp,
|
|
240
|
+
type,
|
|
241
|
+
variant = 'text'
|
|
242
|
+
} = props,
|
|
243
|
+
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
244
|
+
const ownerState = _extends({}, props, {
|
|
280
245
|
color,
|
|
281
246
|
component,
|
|
282
247
|
disabled,
|
|
@@ -286,7 +251,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
|
|
|
286
251
|
size,
|
|
287
252
|
type,
|
|
288
253
|
variant
|
|
289
|
-
};
|
|
254
|
+
});
|
|
290
255
|
const classes = useUtilityClasses(ownerState);
|
|
291
256
|
const startIcon = startIconProp && /*#__PURE__*/_jsx(ButtonStartIcon, {
|
|
292
257
|
className: classes.startIcon,
|
|
@@ -298,7 +263,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
|
|
|
298
263
|
ownerState: ownerState,
|
|
299
264
|
children: endIconProp
|
|
300
265
|
});
|
|
301
|
-
return /*#__PURE__*/_jsxs(ButtonRoot, {
|
|
266
|
+
return /*#__PURE__*/_jsxs(ButtonRoot, _extends({
|
|
302
267
|
ownerState: ownerState,
|
|
303
268
|
className: clsx(contextProps.className, classes.root, className),
|
|
304
269
|
component: component,
|
|
@@ -306,11 +271,11 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
|
|
|
306
271
|
focusRipple: !disableFocusRipple,
|
|
307
272
|
focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
|
|
308
273
|
ref: ref,
|
|
309
|
-
type: type
|
|
310
|
-
|
|
274
|
+
type: type
|
|
275
|
+
}, other, {
|
|
311
276
|
classes: classes,
|
|
312
277
|
children: [startIcon, children, endIcon]
|
|
313
|
-
});
|
|
278
|
+
}));
|
|
314
279
|
});
|
|
315
280
|
process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */ = {
|
|
316
281
|
// ----------------------------- Warning --------------------------------
|