@mui/material 6.4.4 → 7.0.0-alpha.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.ts +3 -3
- package/AccordionActions/AccordionActions.d.ts +2 -2
- package/AccordionDetails/AccordionDetails.d.ts +2 -2
- package/AccordionSummary/AccordionSummary.d.ts +3 -3
- package/Alert/Alert.d.ts +3 -3
- package/AlertTitle/AlertTitle.d.ts +3 -3
- package/AppBar/AppBar.d.ts +3 -3
- package/Autocomplete/Autocomplete.d.ts +2 -2
- package/Avatar/Avatar.d.ts +2 -2
- package/AvatarGroup/AvatarGroup.d.ts +2 -2
- package/Backdrop/Backdrop.d.ts +3 -3
- package/Badge/Badge.d.ts +3 -3
- package/BottomNavigation/BottomNavigation.d.ts +2 -2
- package/BottomNavigationAction/BottomNavigationAction.d.ts +3 -3
- package/Box/Box.d.ts +2 -2
- package/Breadcrumbs/Breadcrumbs.d.ts +3 -3
- package/Button/Button.d.ts +4 -4
- package/ButtonBase/ButtonBase.d.ts +2 -2
- package/ButtonGroup/ButtonGroup.d.ts +2 -2
- package/CHANGELOG.md +24 -2272
- package/Card/Card.d.ts +3 -3
- package/CardActionArea/CardActionArea.d.ts +3 -3
- package/CardActions/CardActions.d.ts +2 -2
- package/CardContent/CardContent.d.ts +2 -2
- package/CardHeader/CardHeader.d.ts +2 -2
- package/CardMedia/CardMedia.d.ts +2 -2
- package/Checkbox/Checkbox.d.ts +4 -4
- package/Chip/Chip.d.ts +2 -2
- package/CircularProgress/CircularProgress.d.ts +3 -7
- package/ClickAwayListener/ClickAwayListener.d.ts +3 -3
- package/ClickAwayListener/ClickAwayListener.js +3 -3
- package/Collapse/Collapse.d.ts +5 -5
- package/Container/Container.d.ts +2 -2
- package/CssBaseline/CssBaseline.d.ts +2 -2
- package/Dialog/Dialog.d.ts +3 -3
- package/DialogActions/DialogActions.d.ts +2 -2
- package/DialogContent/DialogContent.d.ts +2 -2
- package/DialogContentText/DialogContentText.d.ts +3 -3
- package/DialogTitle/DialogTitle.d.ts +3 -3
- package/Divider/Divider.d.ts +3 -3
- package/Drawer/Drawer.d.ts +3 -3
- package/Fab/Fab.d.ts +3 -3
- package/Fade/Fade.d.ts +3 -3
- package/FilledInput/FilledInput.d.ts +3 -3
- package/FormControl/FormControl.d.ts +6 -6
- package/FormControlLabel/FormControlLabel.d.ts +4 -4
- package/FormGroup/FormGroup.d.ts +3 -3
- package/FormHelperText/FormHelperText.d.ts +2 -2
- package/FormLabel/FormLabel.d.ts +4 -4
- package/GlobalStyles/GlobalStyles.d.ts +2 -2
- package/Grid/Grid.d.ts +2 -2
- package/Grid2/Grid2.d.ts +2 -2
- package/Grid2/Grid2.js +2 -2
- package/Grow/Grow.d.ts +5 -5
- package/Hidden/Hidden.d.ts +2 -2
- package/Icon/Icon.d.ts +3 -3
- package/IconButton/IconButton.d.ts +4 -4
- package/ImageList/ImageList.d.ts +2 -2
- package/ImageListItem/ImageListItem.d.ts +2 -2
- package/ImageListItemBar/ImageListItemBar.d.ts +2 -2
- package/Input/Input.d.ts +3 -3
- package/InputAdornment/InputAdornment.d.ts +2 -2
- package/InputBase/InputBase.d.ts +2 -2
- package/InputLabel/InputLabel.d.ts +3 -3
- package/LinearProgress/LinearProgress.d.ts +3 -7
- package/Link/Link.d.ts +4 -4
- package/List/List.d.ts +3 -3
- package/ListItem/ListItem.d.ts +3 -3
- package/ListItemAvatar/ListItemAvatar.d.ts +2 -2
- package/ListItemButton/ListItemButton.d.ts +3 -3
- package/ListItemIcon/ListItemIcon.d.ts +2 -2
- package/ListItemSecondaryAction/ListItemSecondaryAction.d.ts +2 -2
- package/ListItemText/ListItemText.d.ts +2 -2
- package/ListSubheader/ListSubheader.d.ts +2 -2
- package/Menu/Menu.d.ts +4 -4
- package/Menu/Menu.js +6 -2
- package/MenuItem/MenuItem.d.ts +3 -3
- package/MenuList/MenuList.d.ts +4 -4
- package/MobileStepper/MobileStepper.d.ts +4 -72
- package/MobileStepper/MobileStepper.js +18 -76
- package/Modal/Modal.d.ts +7 -7
- package/Modal/Modal.js +9 -10
- package/NativeSelect/NativeSelect.d.ts +3 -3
- package/NoSsr/NoSsr.d.ts +2 -2
- package/NoSsr/NoSsr.js +2 -2
- package/OutlinedInput/OutlinedInput.d.ts +3 -3
- package/Pagination/Pagination.d.ts +2 -2
- package/PaginationItem/PaginationItem.d.ts +2 -2
- package/Paper/Paper.d.ts +3 -3
- package/PigmentContainer/PigmentContainer.d.ts +2 -2
- package/PigmentContainer/PigmentContainer.js +2 -2
- package/PigmentGrid/PigmentGrid.d.ts +2 -2
- package/PigmentGrid/PigmentGrid.js +2 -2
- package/PigmentHidden/PigmentHidden.d.ts +2 -2
- package/PigmentHidden/PigmentHidden.js +2 -2
- package/PigmentStack/PigmentStack.d.ts +2 -2
- package/PigmentStack/PigmentStack.js +2 -2
- package/Popover/Popover.d.ts +64 -10
- package/Popover/Popover.js +78 -51
- package/Popper/Popper.d.ts +4 -4
- package/Popper/Popper.js +4 -4
- package/Portal/Portal.d.ts +2 -2
- package/Portal/Portal.js +2 -2
- package/README.md +4 -3
- package/Radio/Radio.d.ts +3 -3
- package/RadioGroup/RadioGroup.d.ts +3 -3
- package/Rating/Rating.d.ts +2 -2
- package/ScopedCssBaseline/ScopedCssBaseline.d.ts +2 -2
- package/Select/Select.d.ts +3 -3
- package/Skeleton/Skeleton.d.ts +2 -2
- package/Slide/Slide.d.ts +4 -4
- package/Slider/Slider.d.ts +20 -11
- package/Slider/Slider.js +2 -2
- package/Slider/sliderClasses.d.ts +7 -21
- package/Snackbar/Snackbar.d.ts +80 -3
- package/Snackbar/Snackbar.js +122 -32
- package/SnackbarContent/SnackbarContent.d.ts +3 -3
- package/SpeedDial/SpeedDial.d.ts +2 -2
- package/SpeedDialAction/SpeedDialAction.d.ts +3 -3
- package/SpeedDialIcon/SpeedDialIcon.d.ts +2 -2
- package/Stack/Stack.d.ts +2 -2
- package/Step/Step.d.ts +2 -2
- package/StepButton/StepButton.d.ts +3 -3
- package/StepConnector/StepConnector.d.ts +2 -2
- package/StepContent/StepContent.d.ts +2 -2
- package/StepIcon/StepIcon.d.ts +3 -3
- package/StepLabel/StepLabel.d.ts +2 -2
- package/Stepper/Stepper.d.ts +2 -2
- package/SvgIcon/SvgIcon.d.ts +3 -3
- package/SwipeableDrawer/SwipeableDrawer.d.ts +3 -3
- package/Switch/Switch.d.ts +4 -4
- package/Tab/Tab.d.ts +3 -3
- package/TabScrollButton/TabScrollButton.d.ts +2 -2
- package/Table/Table.d.ts +2 -2
- package/TableBody/TableBody.d.ts +2 -2
- package/TableCell/TableCell.d.ts +2 -2
- package/TableContainer/TableContainer.d.ts +2 -2
- package/TableFooter/TableFooter.d.ts +2 -2
- package/TableHead/TableHead.d.ts +2 -2
- package/TablePagination/TablePagination.d.ts +4 -4
- package/TableRow/TableRow.d.ts +2 -2
- package/TableSortLabel/TableSortLabel.d.ts +3 -3
- package/Tabs/Tabs.d.ts +2 -2
- package/TextField/TextField.d.ts +10 -10
- package/TextareaAutosize/TextareaAutosize.d.ts +2 -2
- package/TextareaAutosize/TextareaAutosize.js +2 -2
- package/ToggleButton/ToggleButton.d.ts +3 -3
- package/ToggleButtonGroup/ToggleButtonGroup.d.ts +2 -2
- package/Toolbar/Toolbar.d.ts +2 -2
- package/Tooltip/Tooltip.d.ts +2 -2
- package/Typography/Typography.d.ts +3 -3
- package/Zoom/Zoom.d.ts +3 -3
- package/index.js +1 -1
- package/internal/SwitchBase.d.ts +33 -1
- package/internal/SwitchBase.js +84 -30
- package/modern/ClickAwayListener/ClickAwayListener.js +3 -3
- package/modern/Grid2/Grid2.js +2 -2
- package/modern/Menu/Menu.js +6 -2
- package/modern/MobileStepper/MobileStepper.js +18 -76
- package/modern/Modal/Modal.js +9 -10
- package/modern/NoSsr/NoSsr.js +2 -2
- package/modern/PigmentContainer/PigmentContainer.js +2 -2
- package/modern/PigmentGrid/PigmentGrid.js +2 -2
- package/modern/PigmentHidden/PigmentHidden.js +2 -2
- package/modern/PigmentStack/PigmentStack.js +2 -2
- package/modern/Popover/Popover.js +78 -51
- package/modern/Popper/Popper.js +4 -4
- package/modern/Portal/Portal.js +2 -2
- package/modern/Slider/Slider.js +2 -2
- package/modern/Snackbar/Snackbar.js +122 -32
- package/modern/TextareaAutosize/TextareaAutosize.js +2 -2
- package/modern/index.js +1 -1
- package/modern/internal/SwitchBase.js +84 -30
- package/modern/version/index.js +5 -5
- package/node/ClickAwayListener/ClickAwayListener.js +3 -3
- package/node/Grid2/Grid2.js +2 -2
- package/node/Menu/Menu.js +6 -2
- package/node/MobileStepper/MobileStepper.js +18 -76
- package/node/Modal/Modal.js +9 -10
- package/node/NoSsr/NoSsr.js +2 -2
- package/node/PigmentContainer/PigmentContainer.js +2 -2
- package/node/PigmentGrid/PigmentGrid.js +2 -2
- package/node/PigmentHidden/PigmentHidden.js +2 -2
- package/node/PigmentStack/PigmentStack.js +2 -2
- package/node/Popover/Popover.js +78 -51
- package/node/Popper/Popper.js +4 -4
- package/node/Portal/Portal.js +2 -2
- package/node/Slider/Slider.js +2 -2
- package/node/Snackbar/Snackbar.js +122 -32
- package/node/TextareaAutosize/TextareaAutosize.js +2 -2
- package/node/index.js +1 -1
- package/node/internal/SwitchBase.js +84 -30
- package/node/version/index.js +5 -5
- package/package.json +7 -7
- package/version/index.js +5 -5
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import composeClasses from '@mui/utils/composeClasses';
|
|
6
|
-
import useSlotProps from '@mui/utils/useSlotProps';
|
|
7
6
|
import useSnackbar from "./useSnackbar.js";
|
|
8
7
|
import ClickAwayListener from "../ClickAwayListener/index.js";
|
|
9
8
|
import { styled, useTheme } from "../zero-styled/index.js";
|
|
@@ -13,6 +12,7 @@ import capitalize from "../utils/capitalize.js";
|
|
|
13
12
|
import Grow from "../Grow/index.js";
|
|
14
13
|
import SnackbarContent from "../SnackbarContent/index.js";
|
|
15
14
|
import { getSnackbarUtilityClass } from "./snackbarClasses.js";
|
|
15
|
+
import useSlot from "../utils/useSlot.js";
|
|
16
16
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
17
17
|
const useUtilityClasses = ownerState => {
|
|
18
18
|
const {
|
|
@@ -120,8 +120,8 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
|
|
|
120
120
|
autoHideDuration = null,
|
|
121
121
|
children,
|
|
122
122
|
className,
|
|
123
|
-
ClickAwayListenerProps,
|
|
124
|
-
ContentProps,
|
|
123
|
+
ClickAwayListenerProps: ClickAwayListenerPropsProp,
|
|
124
|
+
ContentProps: ContentPropsProp,
|
|
125
125
|
disableWindowBlurListener = false,
|
|
126
126
|
message,
|
|
127
127
|
onBlur,
|
|
@@ -131,12 +131,14 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
|
|
|
131
131
|
onMouseLeave,
|
|
132
132
|
open,
|
|
133
133
|
resumeHideDuration,
|
|
134
|
-
|
|
134
|
+
slots = {},
|
|
135
|
+
slotProps = {},
|
|
136
|
+
TransitionComponent: TransitionComponentProp,
|
|
135
137
|
transitionDuration = defaultTransitionDuration,
|
|
136
138
|
TransitionProps: {
|
|
137
139
|
onEnter,
|
|
138
140
|
onExited,
|
|
139
|
-
...
|
|
141
|
+
...TransitionPropsProp
|
|
140
142
|
} = {},
|
|
141
143
|
...other
|
|
142
144
|
} = props;
|
|
@@ -148,7 +150,7 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
|
|
|
148
150
|
},
|
|
149
151
|
autoHideDuration,
|
|
150
152
|
disableWindowBlurListener,
|
|
151
|
-
TransitionComponent,
|
|
153
|
+
TransitionComponent: TransitionComponentProp,
|
|
152
154
|
transitionDuration
|
|
153
155
|
};
|
|
154
156
|
const classes = useUtilityClasses(ownerState);
|
|
@@ -159,16 +161,6 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
|
|
|
159
161
|
...ownerState
|
|
160
162
|
});
|
|
161
163
|
const [exited, setExited] = React.useState(true);
|
|
162
|
-
const rootProps = useSlotProps({
|
|
163
|
-
elementType: SnackbarRoot,
|
|
164
|
-
getSlotProps: getRootProps,
|
|
165
|
-
externalForwardedProps: other,
|
|
166
|
-
ownerState,
|
|
167
|
-
additionalProps: {
|
|
168
|
-
ref
|
|
169
|
-
},
|
|
170
|
-
className: [classes.root, className]
|
|
171
|
-
});
|
|
172
164
|
const handleExited = node => {
|
|
173
165
|
setExited(true);
|
|
174
166
|
if (onExited) {
|
|
@@ -181,28 +173,84 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
|
|
|
181
173
|
onEnter(node, isAppearing);
|
|
182
174
|
}
|
|
183
175
|
};
|
|
176
|
+
const externalForwardedProps = {
|
|
177
|
+
slots: {
|
|
178
|
+
transition: TransitionComponentProp,
|
|
179
|
+
...slots
|
|
180
|
+
},
|
|
181
|
+
slotProps: {
|
|
182
|
+
content: ContentPropsProp,
|
|
183
|
+
clickAwayListener: ClickAwayListenerPropsProp,
|
|
184
|
+
transition: TransitionPropsProp,
|
|
185
|
+
...slotProps
|
|
186
|
+
}
|
|
187
|
+
};
|
|
188
|
+
const [Root, rootProps] = useSlot('root', {
|
|
189
|
+
ref,
|
|
190
|
+
className: [classes.root, className],
|
|
191
|
+
elementType: SnackbarRoot,
|
|
192
|
+
getSlotProps: getRootProps,
|
|
193
|
+
externalForwardedProps: {
|
|
194
|
+
...externalForwardedProps,
|
|
195
|
+
...other
|
|
196
|
+
},
|
|
197
|
+
ownerState
|
|
198
|
+
});
|
|
199
|
+
const [ClickAwaySlot, clickAwayListenerProps] = useSlot('clickAwayListener', {
|
|
200
|
+
elementType: ClickAwayListener,
|
|
201
|
+
externalForwardedProps,
|
|
202
|
+
getSlotProps: handlers => ({
|
|
203
|
+
onClickAway: (...params) => {
|
|
204
|
+
handlers.onClickAway?.(...params);
|
|
205
|
+
onClickAway(...params);
|
|
206
|
+
}
|
|
207
|
+
}),
|
|
208
|
+
ownerState
|
|
209
|
+
});
|
|
210
|
+
const [ContentSlot, contentSlotProps] = useSlot('content', {
|
|
211
|
+
elementType: SnackbarContent,
|
|
212
|
+
shouldForwardComponentProp: true,
|
|
213
|
+
externalForwardedProps,
|
|
214
|
+
additionalProps: {
|
|
215
|
+
message,
|
|
216
|
+
action
|
|
217
|
+
},
|
|
218
|
+
ownerState
|
|
219
|
+
});
|
|
220
|
+
const [TransitionSlot, transitionProps] = useSlot('transition', {
|
|
221
|
+
elementType: Grow,
|
|
222
|
+
externalForwardedProps,
|
|
223
|
+
getSlotProps: handlers => ({
|
|
224
|
+
onEnter: (...params) => {
|
|
225
|
+
handlers.onEnter?.(...params);
|
|
226
|
+
handleEnter(...params);
|
|
227
|
+
},
|
|
228
|
+
onExited: (...params) => {
|
|
229
|
+
handlers.onExited?.(...params);
|
|
230
|
+
handleExited(...params);
|
|
231
|
+
}
|
|
232
|
+
}),
|
|
233
|
+
additionalProps: {
|
|
234
|
+
appear: true,
|
|
235
|
+
in: open,
|
|
236
|
+
timeout: transitionDuration,
|
|
237
|
+
direction: vertical === 'top' ? 'down' : 'up'
|
|
238
|
+
},
|
|
239
|
+
ownerState
|
|
240
|
+
});
|
|
184
241
|
|
|
185
242
|
// So we only render active snackbars.
|
|
186
243
|
if (!open && exited) {
|
|
187
244
|
return null;
|
|
188
245
|
}
|
|
189
|
-
return /*#__PURE__*/_jsx(
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
children: /*#__PURE__*/_jsx(SnackbarRoot, {
|
|
246
|
+
return /*#__PURE__*/_jsx(ClickAwaySlot, {
|
|
247
|
+
...clickAwayListenerProps,
|
|
248
|
+
children: /*#__PURE__*/_jsx(Root, {
|
|
193
249
|
...rootProps,
|
|
194
|
-
children: /*#__PURE__*/_jsx(
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
direction: vertical === 'top' ? 'down' : 'up',
|
|
199
|
-
onEnter: handleEnter,
|
|
200
|
-
onExited: handleExited,
|
|
201
|
-
...TransitionProps,
|
|
202
|
-
children: children || /*#__PURE__*/_jsx(SnackbarContent, {
|
|
203
|
-
message: message,
|
|
204
|
-
action: action,
|
|
205
|
-
...ContentProps
|
|
250
|
+
children: /*#__PURE__*/_jsx(TransitionSlot, {
|
|
251
|
+
...transitionProps,
|
|
252
|
+
children: children || /*#__PURE__*/_jsx(ContentSlot, {
|
|
253
|
+
...contentSlotProps
|
|
206
254
|
})
|
|
207
255
|
})
|
|
208
256
|
})
|
|
@@ -249,10 +297,12 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes *
|
|
|
249
297
|
className: PropTypes.string,
|
|
250
298
|
/**
|
|
251
299
|
* Props applied to the `ClickAwayListener` element.
|
|
300
|
+
* @deprecated Use `slotProps.clickAwayListener` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
|
|
252
301
|
*/
|
|
253
302
|
ClickAwayListenerProps: PropTypes.object,
|
|
254
303
|
/**
|
|
255
304
|
* Props applied to the [`SnackbarContent`](https://mui.com/material-ui/api/snackbar-content/) element.
|
|
305
|
+
* @deprecated Use `slotProps.content` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
|
|
256
306
|
*/
|
|
257
307
|
ContentProps: PropTypes.object,
|
|
258
308
|
/**
|
|
@@ -309,6 +359,44 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes *
|
|
|
309
359
|
* we default to `autoHideDuration / 2` ms.
|
|
310
360
|
*/
|
|
311
361
|
resumeHideDuration: PropTypes.number,
|
|
362
|
+
/**
|
|
363
|
+
* The props used for each slot inside.
|
|
364
|
+
* @default {}
|
|
365
|
+
*/
|
|
366
|
+
slotProps: PropTypes.shape({
|
|
367
|
+
clickAwayListener: PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.shape({
|
|
368
|
+
children: PropTypes.element.isRequired,
|
|
369
|
+
disableReactTree: PropTypes.bool,
|
|
370
|
+
mouseEvent: PropTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', 'onPointerDown', 'onPointerUp', false]),
|
|
371
|
+
onClickAway: PropTypes.func,
|
|
372
|
+
touchEvent: PropTypes.oneOf(['onTouchEnd', 'onTouchStart', false])
|
|
373
|
+
}), PropTypes.shape({
|
|
374
|
+
children: PropTypes.element.isRequired,
|
|
375
|
+
disableReactTree: PropTypes.bool,
|
|
376
|
+
key: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
|
|
377
|
+
'__@toStringTag@9059': PropTypes.oneOf(['BigInt']).isRequired,
|
|
378
|
+
toLocaleString: PropTypes.func.isRequired,
|
|
379
|
+
toString: PropTypes.func.isRequired,
|
|
380
|
+
valueOf: PropTypes.func.isRequired
|
|
381
|
+
}), PropTypes.string]),
|
|
382
|
+
mouseEvent: PropTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', 'onPointerDown', 'onPointerUp', false]),
|
|
383
|
+
onClickAway: PropTypes.func,
|
|
384
|
+
touchEvent: PropTypes.oneOf(['onTouchEnd', 'onTouchStart', false])
|
|
385
|
+
})]),
|
|
386
|
+
content: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
|
387
|
+
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
|
388
|
+
transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
|
|
389
|
+
}),
|
|
390
|
+
/**
|
|
391
|
+
* The components used for each slot inside.
|
|
392
|
+
* @default {}
|
|
393
|
+
*/
|
|
394
|
+
slots: PropTypes.shape({
|
|
395
|
+
clickAwayListener: PropTypes.elementType,
|
|
396
|
+
content: PropTypes.elementType,
|
|
397
|
+
root: PropTypes.elementType,
|
|
398
|
+
transition: PropTypes.elementType
|
|
399
|
+
}),
|
|
312
400
|
/**
|
|
313
401
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
314
402
|
*/
|
|
@@ -316,6 +404,7 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes *
|
|
|
316
404
|
/**
|
|
317
405
|
* The component used for the transition.
|
|
318
406
|
* [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
|
|
407
|
+
* @deprecated Use `slots.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
|
|
319
408
|
* @default Grow
|
|
320
409
|
*/
|
|
321
410
|
TransitionComponent: PropTypes.elementType,
|
|
@@ -335,6 +424,7 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes *
|
|
|
335
424
|
/**
|
|
336
425
|
* Props applied to the transition element.
|
|
337
426
|
* By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
|
|
427
|
+
* @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
|
|
338
428
|
* @default {}
|
|
339
429
|
*/
|
|
340
430
|
TransitionProps: PropTypes.object
|
|
@@ -37,11 +37,11 @@ function isEmpty(obj) {
|
|
|
37
37
|
*
|
|
38
38
|
* Demos:
|
|
39
39
|
*
|
|
40
|
-
* - [Textarea Autosize](https://mui.com/material-ui/react-textarea-autosize/)
|
|
40
|
+
* - [Textarea Autosize](https://next.mui.com/material-ui/react-textarea-autosize/)
|
|
41
41
|
*
|
|
42
42
|
* API:
|
|
43
43
|
*
|
|
44
|
-
* - [TextareaAutosize API](https://mui.com/material-ui/api/textarea-autosize/)
|
|
44
|
+
* - [TextareaAutosize API](https://next.mui.com/material-ui/api/textarea-autosize/)
|
|
45
45
|
*/
|
|
46
46
|
const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, forwardedRef) {
|
|
47
47
|
const {
|
package/modern/index.js
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
|
-
import clsx from 'clsx';
|
|
6
5
|
import refType from '@mui/utils/refType';
|
|
7
6
|
import composeClasses from '@mui/utils/composeClasses';
|
|
8
7
|
import capitalize from "../utils/capitalize.js";
|
|
@@ -12,6 +11,7 @@ import useControlled from "../utils/useControlled.js";
|
|
|
12
11
|
import useFormControl from "../FormControl/useFormControl.js";
|
|
13
12
|
import ButtonBase from "../ButtonBase/index.js";
|
|
14
13
|
import { getSwitchBaseUtilityClass } from "./switchBaseClasses.js";
|
|
14
|
+
import useSlot from "../utils/useSlot.js";
|
|
15
15
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
16
|
const useUtilityClasses = ownerState => {
|
|
17
17
|
const {
|
|
@@ -86,7 +86,6 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
|
|
|
86
86
|
autoFocus,
|
|
87
87
|
checked: checkedProp,
|
|
88
88
|
checkedIcon,
|
|
89
|
-
className,
|
|
90
89
|
defaultChecked,
|
|
91
90
|
disabled: disabledProp,
|
|
92
91
|
disableFocusRipple = false,
|
|
@@ -104,6 +103,8 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
|
|
|
104
103
|
tabIndex,
|
|
105
104
|
type,
|
|
106
105
|
value,
|
|
106
|
+
slots = {},
|
|
107
|
+
slotProps = {},
|
|
107
108
|
...other
|
|
108
109
|
} = props;
|
|
109
110
|
const [checked, setCheckedState] = useControlled({
|
|
@@ -156,38 +157,75 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
|
|
|
156
157
|
edge
|
|
157
158
|
};
|
|
158
159
|
const classes = useUtilityClasses(ownerState);
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
160
|
+
const externalForwardedProps = {
|
|
161
|
+
slots,
|
|
162
|
+
slotProps: {
|
|
163
|
+
input: inputProps,
|
|
164
|
+
...slotProps
|
|
165
|
+
}
|
|
166
|
+
};
|
|
167
|
+
const [RootSlot, rootSlotProps] = useSlot('root', {
|
|
168
|
+
ref,
|
|
169
|
+
elementType: SwitchBaseRoot,
|
|
170
|
+
className: classes.root,
|
|
171
|
+
shouldForwardComponentProp: true,
|
|
172
|
+
externalForwardedProps: {
|
|
173
|
+
...externalForwardedProps,
|
|
174
|
+
component: 'span',
|
|
175
|
+
...other
|
|
176
|
+
},
|
|
177
|
+
getSlotProps: handlers => ({
|
|
178
|
+
...handlers,
|
|
179
|
+
onFocus: event => {
|
|
180
|
+
handlers.onFocus?.(event);
|
|
181
|
+
handleFocus(event);
|
|
182
|
+
},
|
|
183
|
+
onBlur: event => {
|
|
184
|
+
handlers.onBlur?.(event);
|
|
185
|
+
handleBlur(event);
|
|
186
|
+
}
|
|
187
|
+
}),
|
|
188
|
+
ownerState,
|
|
189
|
+
additionalProps: {
|
|
190
|
+
centerRipple: true,
|
|
191
|
+
focusRipple: !disableFocusRipple,
|
|
192
|
+
disabled,
|
|
193
|
+
role: undefined,
|
|
194
|
+
tabIndex: null
|
|
195
|
+
}
|
|
196
|
+
});
|
|
197
|
+
const [InputSlot, inputSlotProps] = useSlot('input', {
|
|
198
|
+
ref: inputRef,
|
|
199
|
+
elementType: SwitchBaseInput,
|
|
200
|
+
className: classes.input,
|
|
201
|
+
externalForwardedProps,
|
|
202
|
+
getSlotProps: handlers => ({
|
|
203
|
+
onChange: event => {
|
|
204
|
+
handlers.onChange?.(event);
|
|
205
|
+
handleInputChange(event);
|
|
206
|
+
}
|
|
207
|
+
}),
|
|
208
|
+
ownerState,
|
|
209
|
+
additionalProps: {
|
|
210
|
+
autoFocus,
|
|
174
211
|
checked: checkedProp,
|
|
175
|
-
defaultChecked
|
|
176
|
-
|
|
177
|
-
disabled: disabled,
|
|
212
|
+
defaultChecked,
|
|
213
|
+
disabled,
|
|
178
214
|
id: hasLabelFor ? id : undefined,
|
|
179
|
-
name
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
ownerState: ownerState,
|
|
185
|
-
tabIndex: tabIndex,
|
|
186
|
-
type: type,
|
|
215
|
+
name,
|
|
216
|
+
readOnly,
|
|
217
|
+
required,
|
|
218
|
+
tabIndex,
|
|
219
|
+
type,
|
|
187
220
|
...(type === 'checkbox' && value === undefined ? {} : {
|
|
188
221
|
value
|
|
189
|
-
})
|
|
190
|
-
|
|
222
|
+
})
|
|
223
|
+
}
|
|
224
|
+
});
|
|
225
|
+
return /*#__PURE__*/_jsxs(RootSlot, {
|
|
226
|
+
...rootSlotProps,
|
|
227
|
+
children: [/*#__PURE__*/_jsx(InputSlot, {
|
|
228
|
+
...inputSlotProps
|
|
191
229
|
}), checked ? checkedIcon : icon]
|
|
192
230
|
});
|
|
193
231
|
});
|
|
@@ -280,6 +318,22 @@ process.env.NODE_ENV !== "production" ? SwitchBase.propTypes = {
|
|
|
280
318
|
* If `true`, the `input` element is required.
|
|
281
319
|
*/
|
|
282
320
|
required: PropTypes.bool,
|
|
321
|
+
/**
|
|
322
|
+
* The props used for each slot inside.
|
|
323
|
+
* @default {}
|
|
324
|
+
*/
|
|
325
|
+
slotProps: PropTypes.shape({
|
|
326
|
+
input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
|
327
|
+
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
|
|
328
|
+
}),
|
|
329
|
+
/**
|
|
330
|
+
* The components used for each slot inside.
|
|
331
|
+
* @default {}
|
|
332
|
+
*/
|
|
333
|
+
slots: PropTypes.shape({
|
|
334
|
+
input: PropTypes.elementType,
|
|
335
|
+
root: PropTypes.elementType
|
|
336
|
+
}),
|
|
283
337
|
/**
|
|
284
338
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
285
339
|
*/
|
package/modern/version/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export const version = "
|
|
2
|
-
export const major = Number("
|
|
3
|
-
export const minor = Number("
|
|
4
|
-
export const patch = Number("
|
|
5
|
-
export const prerelease =
|
|
1
|
+
export const version = "7.0.0-alpha.0";
|
|
2
|
+
export const major = Number("7");
|
|
3
|
+
export const minor = Number("0");
|
|
4
|
+
export const patch = Number("0");
|
|
5
|
+
export const prerelease = "alpha.0";
|
|
6
6
|
export default version;
|
|
@@ -24,12 +24,12 @@ function clickedRootScrollbar(event, doc) {
|
|
|
24
24
|
*
|
|
25
25
|
* Demos:
|
|
26
26
|
*
|
|
27
|
-
* - [Click-Away Listener](https://mui.com/material-ui/react-click-away-listener/)
|
|
28
|
-
* - [Menu](https://mui.com/material-ui/react-menu/)
|
|
27
|
+
* - [Click-Away Listener](https://next.mui.com/material-ui/react-click-away-listener/)
|
|
28
|
+
* - [Menu](https://next.mui.com/material-ui/react-menu/)
|
|
29
29
|
*
|
|
30
30
|
* API:
|
|
31
31
|
*
|
|
32
|
-
* - [ClickAwayListener API](https://mui.com/material-ui/api/click-away-listener/)
|
|
32
|
+
* - [ClickAwayListener API](https://next.mui.com/material-ui/api/click-away-listener/)
|
|
33
33
|
*/
|
|
34
34
|
function ClickAwayListener(props) {
|
|
35
35
|
const {
|
package/node/Grid2/Grid2.js
CHANGED
|
@@ -16,11 +16,11 @@ var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
|
|
|
16
16
|
*
|
|
17
17
|
* Demos:
|
|
18
18
|
*
|
|
19
|
-
* - [Grid version 2](https://mui.com/material-ui/react-grid2/)
|
|
19
|
+
* - [Grid version 2](https://next.mui.com/material-ui/react-grid2/)
|
|
20
20
|
*
|
|
21
21
|
* API:
|
|
22
22
|
*
|
|
23
|
-
* - [Grid2 API](https://mui.com/material-ui/api/grid-2/)
|
|
23
|
+
* - [Grid2 API](https://next.mui.com/material-ui/api/grid-2/)
|
|
24
24
|
*/
|
|
25
25
|
const Grid2 = (0, _Grid.createGrid)({
|
|
26
26
|
createStyledComponent: (0, _styles.styled)('div', {
|
package/node/Menu/Menu.js
CHANGED
|
@@ -270,16 +270,20 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
|
|
|
270
270
|
* @default {}
|
|
271
271
|
*/
|
|
272
272
|
slotProps: _propTypes.default.shape({
|
|
273
|
+
backdrop: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
|
273
274
|
paper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
|
274
|
-
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
|
|
275
|
+
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
|
276
|
+
transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
|
|
275
277
|
}),
|
|
276
278
|
/**
|
|
277
279
|
* The components used for each slot inside.
|
|
278
280
|
* @default {}
|
|
279
281
|
*/
|
|
280
282
|
slots: _propTypes.default.shape({
|
|
283
|
+
backdrop: _propTypes.default.elementType,
|
|
281
284
|
paper: _propTypes.default.elementType,
|
|
282
|
-
root: _propTypes.default.elementType
|
|
285
|
+
root: _propTypes.default.elementType,
|
|
286
|
+
transition: _propTypes.default.elementType
|
|
283
287
|
}),
|
|
284
288
|
/**
|
|
285
289
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
@@ -20,7 +20,6 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
|
|
|
20
20
|
var _DefaultPropsProvider = require("../DefaultPropsProvider");
|
|
21
21
|
var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
|
|
22
22
|
var _mobileStepperClasses = require("./mobileStepperClasses");
|
|
23
|
-
var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
|
|
24
23
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
25
24
|
const useUtilityClasses = ownerState => {
|
|
26
25
|
const {
|
|
@@ -160,8 +159,6 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
|
|
|
160
159
|
position = 'bottom',
|
|
161
160
|
steps,
|
|
162
161
|
variant = 'dots',
|
|
163
|
-
slots = {},
|
|
164
|
-
slotProps = {},
|
|
165
162
|
...other
|
|
166
163
|
} = props;
|
|
167
164
|
const ownerState = {
|
|
@@ -179,63 +176,29 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
|
|
|
179
176
|
}
|
|
180
177
|
}
|
|
181
178
|
const classes = useUtilityClasses(ownerState);
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
progress: LinearProgressProps,
|
|
186
|
-
...slotProps
|
|
187
|
-
}
|
|
188
|
-
};
|
|
189
|
-
const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
|
|
190
|
-
ref,
|
|
191
|
-
elementType: MobileStepperRoot,
|
|
192
|
-
shouldForwardComponentProp: true,
|
|
179
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MobileStepperRoot, {
|
|
180
|
+
square: true,
|
|
181
|
+
elevation: 0,
|
|
193
182
|
className: (0, _clsx.default)(classes.root, className),
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
},
|
|
198
|
-
ownerState,
|
|
199
|
-
additionalProps: {
|
|
200
|
-
square: true,
|
|
201
|
-
elevation: 0
|
|
202
|
-
}
|
|
203
|
-
});
|
|
204
|
-
const [DotsSlot, dotsSlotProps] = (0, _useSlot.default)('dots', {
|
|
205
|
-
className: classes.dots,
|
|
206
|
-
elementType: MobileStepperDots,
|
|
207
|
-
externalForwardedProps,
|
|
208
|
-
ownerState
|
|
209
|
-
});
|
|
210
|
-
const [DotSlot, dotSlotProps] = (0, _useSlot.default)('dot', {
|
|
211
|
-
elementType: MobileStepperDot,
|
|
212
|
-
externalForwardedProps,
|
|
213
|
-
ownerState
|
|
214
|
-
});
|
|
215
|
-
const [ProgressSlot, progressSlotProps] = (0, _useSlot.default)('progress', {
|
|
216
|
-
className: classes.progress,
|
|
217
|
-
elementType: MobileStepperProgress,
|
|
218
|
-
shouldForwardComponentProp: true,
|
|
219
|
-
externalForwardedProps,
|
|
220
|
-
ownerState,
|
|
221
|
-
additionalProps: {
|
|
222
|
-
value,
|
|
223
|
-
variant: 'determinate'
|
|
224
|
-
}
|
|
225
|
-
});
|
|
226
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
|
|
227
|
-
...rootSlotProps,
|
|
183
|
+
ref: ref,
|
|
184
|
+
ownerState: ownerState,
|
|
185
|
+
...other,
|
|
228
186
|
children: [backButton, variant === 'text' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
|
|
229
187
|
children: [activeStep + 1, " / ", steps]
|
|
230
|
-
}), variant === 'dots' && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
className: (0, _clsx.default)(classes.dot,
|
|
188
|
+
}), variant === 'dots' && /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileStepperDots, {
|
|
189
|
+
ownerState: ownerState,
|
|
190
|
+
className: classes.dots,
|
|
191
|
+
children: [...new Array(steps)].map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileStepperDot, {
|
|
192
|
+
className: (0, _clsx.default)(classes.dot, index === activeStep && classes.dotActive),
|
|
193
|
+
ownerState: ownerState,
|
|
235
194
|
dotActive: index === activeStep
|
|
236
195
|
}, index))
|
|
237
|
-
}), variant === 'progress' && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
238
|
-
|
|
196
|
+
}), variant === 'progress' && /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileStepperProgress, {
|
|
197
|
+
ownerState: ownerState,
|
|
198
|
+
className: classes.progress,
|
|
199
|
+
variant: "determinate",
|
|
200
|
+
value: value,
|
|
201
|
+
...LinearProgressProps
|
|
239
202
|
}), nextButton]
|
|
240
203
|
});
|
|
241
204
|
});
|
|
@@ -264,7 +227,6 @@ process.env.NODE_ENV !== "production" ? MobileStepper.propTypes /* remove-propty
|
|
|
264
227
|
className: _propTypes.default.string,
|
|
265
228
|
/**
|
|
266
229
|
* Props applied to the `LinearProgress` element.
|
|
267
|
-
* @deprecated Use `slotProps.progress` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
|
|
268
230
|
*/
|
|
269
231
|
LinearProgressProps: _propTypes.default.object,
|
|
270
232
|
/**
|
|
@@ -276,26 +238,6 @@ process.env.NODE_ENV !== "production" ? MobileStepper.propTypes /* remove-propty
|
|
|
276
238
|
* @default 'bottom'
|
|
277
239
|
*/
|
|
278
240
|
position: _propTypes.default.oneOf(['bottom', 'static', 'top']),
|
|
279
|
-
/**
|
|
280
|
-
* The props used for each slot inside.
|
|
281
|
-
* @default {}
|
|
282
|
-
*/
|
|
283
|
-
slotProps: _propTypes.default.shape({
|
|
284
|
-
dot: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
|
285
|
-
dots: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
|
286
|
-
progress: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
|
287
|
-
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
|
|
288
|
-
}),
|
|
289
|
-
/**
|
|
290
|
-
* The components used for each slot inside.
|
|
291
|
-
* @default {}
|
|
292
|
-
*/
|
|
293
|
-
slots: _propTypes.default.shape({
|
|
294
|
-
dot: _propTypes.default.elementType,
|
|
295
|
-
dots: _propTypes.default.elementType,
|
|
296
|
-
progress: _propTypes.default.elementType,
|
|
297
|
-
root: _propTypes.default.elementType
|
|
298
|
-
}),
|
|
299
241
|
/**
|
|
300
242
|
* The total steps.
|
|
301
243
|
*/
|