@mui/material 5.11.10 → 5.11.11

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.
Files changed (240) hide show
  1. package/Accordion/accordionClasses.d.ts +18 -18
  2. package/AccordionActions/accordionActionsClasses.d.ts +10 -10
  3. package/AccordionDetails/accordionDetailsClasses.d.ts +8 -8
  4. package/AccordionSummary/accordionSummaryClasses.d.ts +22 -22
  5. package/Alert/alertClasses.d.ts +44 -44
  6. package/AlertTitle/alertTitleClasses.d.ts +8 -8
  7. package/AppBar/appBarClasses.d.ts +28 -28
  8. package/Autocomplete/Autocomplete.d.ts +3 -1
  9. package/Autocomplete/autocompleteClasses.d.ts +54 -54
  10. package/Avatar/avatarClasses.d.ts +20 -20
  11. package/AvatarGroup/avatarGroupClasses.d.ts +10 -10
  12. package/Backdrop/backdropClasses.d.ts +10 -10
  13. package/Badge/Badge.js +1 -1
  14. package/Badge/badgeClasses.d.ts +56 -56
  15. package/BottomNavigation/BottomNavigation.js +0 -0
  16. package/BottomNavigation/bottomNavigationClasses.d.ts +8 -8
  17. package/BottomNavigationAction/bottomNavigationActionClasses.d.ts +14 -14
  18. package/Breadcrumbs/breadcrumbsClasses.d.ts +14 -14
  19. package/Button/buttonClasses.d.ts +100 -100
  20. package/ButtonBase/buttonBaseClasses.d.ts +12 -12
  21. package/ButtonBase/touchRippleClasses.d.ts +20 -20
  22. package/ButtonGroup/ButtonGroupContext.d.ts +18 -18
  23. package/ButtonGroup/buttonGroupClasses.d.ts +58 -58
  24. package/CHANGELOG.md +89 -0
  25. package/Card/cardClasses.d.ts +8 -8
  26. package/CardActionArea/cardActionAreaClasses.d.ts +12 -12
  27. package/CardActions/cardActionsClasses.d.ts +10 -10
  28. package/CardContent/cardContentClasses.d.ts +8 -8
  29. package/CardHeader/cardHeaderClasses.d.ts +18 -18
  30. package/CardMedia/cardMediaClasses.d.ts +12 -12
  31. package/Checkbox/checkboxClasses.d.ts +18 -18
  32. package/Chip/chipClasses.d.ts +96 -96
  33. package/CircularProgress/circularProgressClasses.d.ts +26 -26
  34. package/ClickAwayListener/index.d.ts +2 -2
  35. package/Collapse/collapseClasses.d.ts +18 -18
  36. package/Container/Container.js +0 -1
  37. package/Container/containerClasses.d.ts +6 -6
  38. package/Dialog/DialogContext.d.ts +6 -6
  39. package/Dialog/dialogClasses.d.ts +36 -36
  40. package/DialogActions/dialogActionsClasses.d.ts +10 -10
  41. package/DialogContent/dialogContentClasses.d.ts +10 -10
  42. package/DialogContentText/dialogContentTextClasses.d.ts +8 -8
  43. package/DialogTitle/dialogTitleClasses.d.ts +8 -8
  44. package/Divider/dividerClasses.d.ts +34 -34
  45. package/Drawer/drawerClasses.d.ts +30 -30
  46. package/Fab/fabClasses.d.ts +26 -26
  47. package/FilledInput/filledInputClasses.d.ts +40 -40
  48. package/FormControl/FormControlContext.d.ts +17 -17
  49. package/FormControl/formControlClasses.d.ts +14 -14
  50. package/FormControl/useFormControl.d.ts +2 -2
  51. package/FormControlLabel/formControlLabelClasses.d.ts +20 -20
  52. package/FormGroup/formGroupClasses.d.ts +12 -12
  53. package/FormHelperText/formHelperTextClasses.d.ts +22 -22
  54. package/FormLabel/formLabelClasses.d.ts +22 -22
  55. package/Grid/gridClasses.d.ts +48 -48
  56. package/Icon/iconClasses.d.ts +24 -24
  57. package/IconButton/iconButtonClasses.d.ts +34 -34
  58. package/ImageList/imageListClasses.d.ts +16 -16
  59. package/ImageListItem/imageListItemClasses.d.ts +18 -18
  60. package/ImageListItemBar/imageListItemBarClasses.d.ts +30 -30
  61. package/Input/inputClasses.d.ts +34 -34
  62. package/InputAdornment/inputAdornmentClasses.d.ts +24 -24
  63. package/InputBase/InputBase.js +2 -2
  64. package/InputBase/inputBaseClasses.d.ts +46 -46
  65. package/InputLabel/InputLabel.js +3 -1
  66. package/InputLabel/inputLabelClasses.d.ts +32 -32
  67. package/LinearProgress/linearProgressClasses.d.ts +42 -42
  68. package/Link/getTextDecoration.d.ts +15 -15
  69. package/Link/linkClasses.d.ts +18 -18
  70. package/List/listClasses.d.ts +14 -14
  71. package/ListItem/listItemClasses.d.ts +30 -30
  72. package/ListItemAvatar/listItemAvatarClasses.d.ts +10 -10
  73. package/ListItemButton/listItemButtonClasses.d.ts +22 -22
  74. package/ListItemIcon/listItemIconClasses.d.ts +10 -10
  75. package/ListItemSecondaryAction/listItemSecondaryActionClasses.d.ts +10 -10
  76. package/ListItemText/listItemTextClasses.d.ts +18 -18
  77. package/ListSubheader/ListSubheader.js +1 -0
  78. package/ListSubheader/listSubheaderClasses.d.ts +18 -18
  79. package/Menu/menuClasses.d.ts +12 -12
  80. package/MenuItem/menuItemClasses.d.ts +20 -20
  81. package/MenuList/MenuList.js +7 -0
  82. package/MobileStepper/mobileStepperClasses.d.ts +22 -22
  83. package/Modal/Modal.d.ts +9 -1
  84. package/Modal/Modal.js +14 -9
  85. package/NativeSelect/nativeSelectClasses.d.ts +32 -32
  86. package/OutlinedInput/OutlinedInput.js +1 -1
  87. package/OutlinedInput/outlinedInputClasses.d.ts +36 -36
  88. package/Pagination/paginationClasses.d.ts +14 -14
  89. package/PaginationItem/paginationItemClasses.d.ts +42 -42
  90. package/Paper/paperClasses.d.ts +39 -39
  91. package/Popover/popoverClasses.d.ts +10 -10
  92. package/Popper/Popper.d.ts +55 -55
  93. package/README.md +0 -2
  94. package/Radio/radioClasses.d.ts +16 -16
  95. package/RadioGroup/RadioGroupContext.d.ts +11 -11
  96. package/RadioGroup/useRadioGroup.d.ts +4 -4
  97. package/Rating/Rating.js +2 -2
  98. package/Rating/ratingClasses.d.ts +40 -40
  99. package/ScopedCssBaseline/scopedCssBaselineClasses.d.ts +8 -8
  100. package/Select/SelectInput.js +2 -22
  101. package/Select/selectClasses.d.ts +30 -30
  102. package/Skeleton/skeletonClasses.d.ts +26 -26
  103. package/Slider/Slider.d.ts +5 -1
  104. package/Slider/Slider.js +16 -11
  105. package/Slider/SliderValueLabel.d.ts +15 -15
  106. package/Slider/SliderValueLabel.types.d.ts +24 -24
  107. package/Slider/sliderClasses.d.ts +58 -58
  108. package/Snackbar/Snackbar.js +21 -125
  109. package/Snackbar/snackbarClasses.d.ts +20 -20
  110. package/SnackbarContent/snackbarContentClasses.d.ts +12 -12
  111. package/SpeedDial/speedDialClasses.d.ts +22 -22
  112. package/SpeedDialAction/speedDialActionClasses.d.ts +20 -20
  113. package/SpeedDialIcon/speedDialIconClasses.d.ts +18 -18
  114. package/Stack/Stack.d.ts +0 -1
  115. package/Stack/Stack.js +9 -120
  116. package/Stack/index.d.ts +3 -0
  117. package/Stack/index.js +2 -1
  118. package/Stack/stackClasses.d.ts +6 -0
  119. package/Stack/stackClasses.js +7 -0
  120. package/Step/StepContext.d.ts +20 -20
  121. package/Step/stepClasses.d.ts +16 -16
  122. package/StepButton/stepButtonClasses.d.ts +14 -14
  123. package/StepConnector/stepConnectorClasses.d.ts +26 -26
  124. package/StepContent/stepContentClasses.d.ts +12 -12
  125. package/StepIcon/stepIconClasses.d.ts +16 -16
  126. package/StepLabel/stepLabelClasses.d.ts +28 -28
  127. package/Stepper/StepperContext.d.ts +18 -18
  128. package/Stepper/stepperClasses.d.ts +14 -14
  129. package/SvgIcon/svgIconClasses.d.ts +26 -26
  130. package/Switch/switchClasses.d.ts +32 -32
  131. package/Tab/tabClasses.d.ts +26 -26
  132. package/TabScrollButton/tabScrollButtonClasses.d.ts +12 -12
  133. package/Table/tableClasses.d.ts +10 -10
  134. package/TableBody/tableBodyClasses.d.ts +8 -8
  135. package/TableCell/tableCellClasses.d.ts +32 -32
  136. package/TableContainer/tableContainerClasses.d.ts +8 -8
  137. package/TableFooter/tableFooterClasses.d.ts +8 -8
  138. package/TableHead/tableHeadClasses.d.ts +8 -8
  139. package/TablePagination/tablePaginationClasses.d.ts +28 -28
  140. package/TableRow/tableRowClasses.d.ts +16 -16
  141. package/TableSortLabel/tableSortLabelClasses.d.ts +16 -16
  142. package/Tabs/tabsClasses.d.ts +32 -32
  143. package/TextField/textFieldClasses.d.ts +8 -8
  144. package/ToggleButton/toggleButtonClasses.d.ts +24 -24
  145. package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts +18 -18
  146. package/Toolbar/toolbarClasses.d.ts +14 -14
  147. package/Tooltip/tooltipClasses.d.ts +30 -30
  148. package/Typography/typographyClasses.d.ts +50 -50
  149. package/Unstable_Grid2/Grid2.d.ts +4 -4
  150. package/Unstable_Grid2/Grid2.js +2 -3
  151. package/Unstable_Grid2/Grid2Props.d.ts +15 -15
  152. package/Unstable_Grid2/grid2Classes.d.ts +5 -5
  153. package/Unstable_Grid2/index.d.ts +4 -4
  154. package/className/index.d.ts +1 -1
  155. package/darkScrollbar/index.d.ts +28 -28
  156. package/generateUtilityClass/index.d.ts +2 -2
  157. package/generateUtilityClasses/index.d.ts +1 -1
  158. package/index.js +1 -1
  159. package/internal/switchBaseClasses.d.ts +12 -12
  160. package/legacy/Badge/Badge.js +1 -1
  161. package/legacy/BottomNavigation/BottomNavigation.js +0 -0
  162. package/legacy/Container/Container.js +0 -1
  163. package/legacy/InputBase/InputBase.js +2 -2
  164. package/legacy/InputLabel/InputLabel.js +3 -1
  165. package/legacy/ListSubheader/ListSubheader.js +1 -0
  166. package/legacy/MenuList/MenuList.js +7 -0
  167. package/legacy/Modal/Modal.js +14 -9
  168. package/legacy/OutlinedInput/OutlinedInput.js +1 -1
  169. package/legacy/Rating/Rating.js +2 -2
  170. package/legacy/Select/SelectInput.js +2 -22
  171. package/legacy/Slider/Slider.js +16 -12
  172. package/legacy/Snackbar/Snackbar.js +20 -119
  173. package/legacy/Stack/Stack.js +13 -122
  174. package/legacy/Stack/index.js +2 -1
  175. package/legacy/Stack/stackClasses.js +7 -0
  176. package/legacy/Unstable_Grid2/Grid2.js +2 -3
  177. package/legacy/index.js +1 -1
  178. package/legacy/styles/createTheme.js +1 -0
  179. package/legacy/useAutocomplete/useAutocomplete.js +2 -2
  180. package/locale/index.d.ts +75 -75
  181. package/modern/Badge/Badge.js +1 -1
  182. package/modern/BottomNavigation/BottomNavigation.js +0 -0
  183. package/modern/Container/Container.js +0 -1
  184. package/modern/InputBase/InputBase.js +2 -2
  185. package/modern/InputLabel/InputLabel.js +3 -1
  186. package/modern/ListSubheader/ListSubheader.js +1 -0
  187. package/modern/MenuList/MenuList.js +7 -0
  188. package/modern/Modal/Modal.js +14 -9
  189. package/modern/OutlinedInput/OutlinedInput.js +1 -1
  190. package/modern/Rating/Rating.js +2 -2
  191. package/modern/Select/SelectInput.js +2 -18
  192. package/modern/Slider/Slider.js +16 -11
  193. package/modern/Snackbar/Snackbar.js +21 -125
  194. package/modern/Stack/Stack.js +9 -120
  195. package/modern/Stack/index.js +2 -1
  196. package/modern/Stack/stackClasses.js +7 -0
  197. package/modern/Unstable_Grid2/Grid2.js +2 -3
  198. package/modern/index.js +1 -1
  199. package/modern/styles/createTheme.js +1 -0
  200. package/modern/useAutocomplete/useAutocomplete.js +2 -2
  201. package/node/Badge/Badge.js +2 -2
  202. package/node/BottomNavigation/BottomNavigation.js +0 -0
  203. package/node/Container/Container.js +0 -2
  204. package/node/InputBase/InputBase.js +2 -2
  205. package/node/InputLabel/InputLabel.js +3 -1
  206. package/node/ListSubheader/ListSubheader.js +1 -0
  207. package/node/MenuList/MenuList.js +7 -0
  208. package/node/Modal/Modal.js +14 -9
  209. package/node/OutlinedInput/OutlinedInput.js +1 -1
  210. package/node/Rating/Rating.js +2 -2
  211. package/node/Select/SelectInput.js +2 -22
  212. package/node/Slider/Slider.js +19 -14
  213. package/node/Snackbar/Snackbar.js +20 -124
  214. package/node/Stack/Stack.js +9 -122
  215. package/node/Stack/index.js +8 -1
  216. package/node/Stack/stackClasses.js +16 -0
  217. package/node/Unstable_Grid2/Grid2.js +0 -1
  218. package/node/index.js +1 -1
  219. package/node/styles/createTheme.js +1 -0
  220. package/node/useAutocomplete/useAutocomplete.js +8 -6
  221. package/package.json +6 -6
  222. package/styles/CssVarsProvider.d.ts +16 -16
  223. package/styles/createTheme.js +1 -0
  224. package/styles/excludeVariablesFromRoot.d.ts +5 -5
  225. package/styles/getOverlayAlpha.d.ts +2 -2
  226. package/transitions/index.d.ts +1 -1
  227. package/transitions/transition.d.ts +13 -13
  228. package/transitions/utils.d.ts +23 -23
  229. package/types/OverridableComponentAugmentation.d.ts +31 -31
  230. package/umd/material-ui.development.js +4132 -4060
  231. package/umd/material-ui.production.min.js +21 -21
  232. package/useAutocomplete/useAutocomplete.d.ts +2 -2
  233. package/useAutocomplete/useAutocomplete.js +2 -2
  234. package/useMediaQuery/useMediaQuery.d.ts +46 -46
  235. package/useTouchRipple/index.d.ts +1 -1
  236. package/useTouchRipple/useTouchRipple.d.ts +28 -28
  237. package/utils/getScrollbarSize.d.ts +2 -2
  238. package/utils/ownerDocument.d.ts +2 -2
  239. package/utils/ownerWindow.d.ts +2 -2
  240. package/utils/setRef.d.ts +2 -2
@@ -4,13 +4,12 @@ const _excluded = ["onEnter", "onExited"],
4
4
  _excluded2 = ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"];
5
5
  import * as React from 'react';
6
6
  import PropTypes from 'prop-types';
7
- import clsx from 'clsx';
8
- import { unstable_composeClasses as composeClasses } from '@mui/base';
7
+ import { unstable_composeClasses as composeClasses, useSlotProps } from '@mui/base';
9
8
  import ClickAwayListener from '@mui/base/ClickAwayListener';
9
+ import useSnackbar from '@mui/base/useSnackbar';
10
10
  import styled from '../styles/styled';
11
11
  import useTheme from '../styles/useTheme';
12
12
  import useThemeProps from '../styles/useThemeProps';
13
- import useEventCallback from '../utils/useEventCallback';
14
13
  import capitalize from '../utils/capitalize';
15
14
  import Grow from '../Grow';
16
15
  import SnackbarContent from '../SnackbarContent';
@@ -100,13 +99,7 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
100
99
  ContentProps,
101
100
  disableWindowBlurListener = false,
102
101
  message,
103
- onBlur,
104
- onClose,
105
- onFocus,
106
- onMouseEnter,
107
- onMouseLeave,
108
102
  open,
109
- resumeHideDuration,
110
103
  TransitionComponent = Grow,
111
104
  transitionDuration = defaultTransitionDuration,
112
105
  TransitionProps: {
@@ -120,76 +113,27 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
120
113
  anchorOrigin: {
121
114
  vertical,
122
115
  horizontal
123
- }
116
+ },
117
+ autoHideDuration,
118
+ disableWindowBlurListener,
119
+ TransitionComponent,
120
+ transitionDuration
124
121
  });
125
122
  const classes = useUtilityClasses(ownerState);
126
- const timerAutoHide = React.useRef();
123
+ const {
124
+ getRootProps,
125
+ onClickAway
126
+ } = useSnackbar(_extends({}, ownerState, {
127
+ ref
128
+ }));
127
129
  const [exited, setExited] = React.useState(true);
128
- const handleClose = useEventCallback((...args) => {
129
- if (onClose) {
130
- onClose(...args);
131
- }
130
+ const rootProps = useSlotProps({
131
+ elementType: SnackbarRoot,
132
+ getSlotProps: getRootProps,
133
+ externalForwardedProps: other,
134
+ ownerState,
135
+ className: [classes.root, className]
132
136
  });
133
- const setAutoHideTimer = useEventCallback(autoHideDurationParam => {
134
- if (!onClose || autoHideDurationParam == null) {
135
- return;
136
- }
137
- clearTimeout(timerAutoHide.current);
138
- timerAutoHide.current = setTimeout(() => {
139
- handleClose(null, 'timeout');
140
- }, autoHideDurationParam);
141
- });
142
- React.useEffect(() => {
143
- if (open) {
144
- setAutoHideTimer(autoHideDuration);
145
- }
146
- return () => {
147
- clearTimeout(timerAutoHide.current);
148
- };
149
- }, [open, autoHideDuration, setAutoHideTimer]);
150
-
151
- // Pause the timer when the user is interacting with the Snackbar
152
- // or when the user hide the window.
153
- const handlePause = () => {
154
- clearTimeout(timerAutoHide.current);
155
- };
156
-
157
- // Restart the timer when the user is no longer interacting with the Snackbar
158
- // or when the window is shown back.
159
- const handleResume = React.useCallback(() => {
160
- if (autoHideDuration != null) {
161
- setAutoHideTimer(resumeHideDuration != null ? resumeHideDuration : autoHideDuration * 0.5);
162
- }
163
- }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
164
- const handleFocus = event => {
165
- if (onFocus) {
166
- onFocus(event);
167
- }
168
- handlePause();
169
- };
170
- const handleMouseEnter = event => {
171
- if (onMouseEnter) {
172
- onMouseEnter(event);
173
- }
174
- handlePause();
175
- };
176
- const handleBlur = event => {
177
- if (onBlur) {
178
- onBlur(event);
179
- }
180
- handleResume();
181
- };
182
- const handleMouseLeave = event => {
183
- if (onMouseLeave) {
184
- onMouseLeave(event);
185
- }
186
- handleResume();
187
- };
188
- const handleClickAway = event => {
189
- if (onClose) {
190
- onClose(event, 'clickaway');
191
- }
192
- };
193
137
  const handleExited = node => {
194
138
  setExited(true);
195
139
  if (onExited) {
@@ -202,63 +146,15 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
202
146
  onEnter(node, isAppearing);
203
147
  }
204
148
  };
205
- React.useEffect(() => {
206
- // TODO: window global should be refactored here
207
- if (!disableWindowBlurListener && open) {
208
- window.addEventListener('focus', handleResume);
209
- window.addEventListener('blur', handlePause);
210
- return () => {
211
- window.removeEventListener('focus', handleResume);
212
- window.removeEventListener('blur', handlePause);
213
- };
214
- }
215
- return undefined;
216
- }, [disableWindowBlurListener, handleResume, open]);
217
- React.useEffect(() => {
218
- if (!open) {
219
- return undefined;
220
- }
221
-
222
- /**
223
- * @param {KeyboardEvent} nativeEvent
224
- */
225
- function handleKeyDown(nativeEvent) {
226
- if (!nativeEvent.defaultPrevented) {
227
- // IE11, Edge (prior to using Bink?) use 'Esc'
228
- if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
229
- // not calling `preventDefault` since we don't know if people may ignore this event e.g. a permanently open snackbar
230
- if (onClose) {
231
- onClose(nativeEvent, 'escapeKeyDown');
232
- }
233
- }
234
- }
235
- }
236
- document.addEventListener('keydown', handleKeyDown);
237
- return () => {
238
- document.removeEventListener('keydown', handleKeyDown);
239
- };
240
- }, [exited, open, onClose]);
241
149
 
242
150
  // So we only render active snackbars.
243
151
  if (!open && exited) {
244
152
  return null;
245
153
  }
246
154
  return /*#__PURE__*/_jsx(ClickAwayListener, _extends({
247
- onClickAway: handleClickAway
155
+ onClickAway: onClickAway
248
156
  }, ClickAwayListenerProps, {
249
- children: /*#__PURE__*/_jsx(SnackbarRoot, _extends({
250
- className: clsx(classes.root, className),
251
- onBlur: handleBlur,
252
- onFocus: handleFocus,
253
- onMouseEnter: handleMouseEnter,
254
- onMouseLeave: handleMouseLeave,
255
- ownerState: ownerState,
256
- ref: ref
257
- // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
258
- // See https://github.com/mui/material-ui/issues/29080
259
- ,
260
- role: "presentation"
261
- }, other, {
157
+ children: /*#__PURE__*/_jsx(SnackbarRoot, _extends({}, rootProps, {
262
158
  children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
263
159
  appear: true,
264
160
  in: open,
@@ -1,128 +1,17 @@
1
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
- import _extends from "@babel/runtime/helpers/esm/extends";
3
- const _excluded = ["component", "direction", "spacing", "divider", "children"];
4
- import * as React from 'react';
5
1
  import PropTypes from 'prop-types';
6
- import { createUnarySpacing, getValue, handleBreakpoints, mergeBreakpointsInOrder, unstable_extendSxProp as extendSxProp, unstable_resolveBreakpointValues as resolveBreakpointValues } from '@mui/system';
7
- import { deepmerge } from '@mui/utils';
2
+ import { createStack } from '@mui/system';
8
3
  import styled from '../styles/styled';
9
4
  import useThemeProps from '../styles/useThemeProps';
10
-
11
- /**
12
- * Return an array with the separator React element interspersed between
13
- * each React node of the input children.
14
- *
15
- * > joinChildren([1,2,3], 0)
16
- * [1,0,2,0,3]
17
- */
18
- import { jsx as _jsx } from "react/jsx-runtime";
19
- function joinChildren(children, separator) {
20
- const childrenArray = React.Children.toArray(children).filter(Boolean);
21
- return childrenArray.reduce((output, child, index) => {
22
- output.push(child);
23
- if (index < childrenArray.length - 1) {
24
- output.push( /*#__PURE__*/React.cloneElement(separator, {
25
- key: `separator-${index}`
26
- }));
27
- }
28
- return output;
29
- }, []);
30
- }
31
- const getSideFromDirection = direction => {
32
- return {
33
- row: 'Left',
34
- 'row-reverse': 'Right',
35
- column: 'Top',
36
- 'column-reverse': 'Bottom'
37
- }[direction];
38
- };
39
- export const style = ({
40
- ownerState,
41
- theme
42
- }) => {
43
- let styles = _extends({
44
- display: 'flex',
45
- flexDirection: 'column'
46
- }, handleBreakpoints({
47
- theme
48
- }, resolveBreakpointValues({
49
- values: ownerState.direction,
50
- breakpoints: theme.breakpoints.values
51
- }), propValue => ({
52
- flexDirection: propValue
53
- })));
54
- if (ownerState.spacing) {
55
- const transformer = createUnarySpacing(theme);
56
- const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
57
- if (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null) {
58
- acc[breakpoint] = true;
59
- }
60
- return acc;
61
- }, {});
62
- const directionValues = resolveBreakpointValues({
63
- values: ownerState.direction,
64
- base
65
- });
66
- const spacingValues = resolveBreakpointValues({
67
- values: ownerState.spacing,
68
- base
69
- });
70
- if (typeof directionValues === 'object') {
71
- Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
72
- const directionValue = directionValues[breakpoint];
73
- if (!directionValue) {
74
- const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
75
- directionValues[breakpoint] = previousDirectionValue;
76
- }
77
- });
78
- }
79
- const styleFromPropValue = (propValue, breakpoint) => {
80
- return {
81
- '& > :not(style) + :not(style)': {
82
- margin: 0,
83
- [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue(transformer, propValue)
84
- }
85
- };
86
- };
87
- styles = deepmerge(styles, handleBreakpoints({
88
- theme
89
- }, spacingValues, styleFromPropValue));
90
- }
91
- styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
92
- return styles;
93
- };
94
- const StackRoot = styled('div', {
95
- name: 'MuiStack',
96
- slot: 'Root',
97
- overridesResolver: (props, styles) => {
98
- return [styles.root];
99
- }
100
- })(style);
101
- const Stack = /*#__PURE__*/React.forwardRef(function Stack(inProps, ref) {
102
- const themeProps = useThemeProps({
5
+ const Stack = createStack({
6
+ createStyledComponent: styled('div', {
7
+ name: 'MuiStack',
8
+ slot: 'Root',
9
+ overridesResolver: (props, styles) => styles.root
10
+ }),
11
+ useThemeProps: inProps => useThemeProps({
103
12
  props: inProps,
104
13
  name: 'MuiStack'
105
- });
106
- const props = extendSxProp(themeProps);
107
- const {
108
- component = 'div',
109
- direction = 'column',
110
- spacing = 0,
111
- divider,
112
- children
113
- } = props,
114
- other = _objectWithoutPropertiesLoose(props, _excluded);
115
- const ownerState = {
116
- direction,
117
- spacing
118
- };
119
- return /*#__PURE__*/_jsx(StackRoot, _extends({
120
- as: component,
121
- ownerState: ownerState,
122
- ref: ref
123
- }, other, {
124
- children: divider ? joinChildren(children, divider) : children
125
- }));
14
+ })
126
15
  });
127
16
  process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
128
17
  // ----------------------------- Warning --------------------------------
@@ -1 +1,2 @@
1
- export { default } from './Stack';
1
+ export { default } from './Stack';
2
+ export { default as stackClasses } from './stackClasses';
@@ -0,0 +1,7 @@
1
+ import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
2
+ import generateUtilityClass from '../generateUtilityClass';
3
+ export function getStackUtilityClass(slot) {
4
+ return generateUtilityClass('MuiStack', slot);
5
+ }
6
+ const stackClasses = generateUtilityClasses('MuiStack', ['root']);
7
+ export default stackClasses;
@@ -1,13 +1,12 @@
1
1
  import PropTypes from 'prop-types';
2
- import { createGrid } from '@mui/system/Unstable_Grid';
2
+ import { createGrid as createGrid2 } from '@mui/system/Unstable_Grid';
3
3
  import { styled, useThemeProps } from '../styles';
4
- const Grid2 = createGrid({
4
+ const Grid2 = createGrid2({
5
5
  createStyledComponent: styled('div', {
6
6
  name: 'MuiGrid2',
7
7
  overridesResolver: (props, styles) => styles.root
8
8
  }),
9
9
  componentName: 'MuiGrid2',
10
- // eslint-disable-next-line material-ui/mui-name-matches-component-name
11
10
  useThemeProps: inProps => useThemeProps({
12
11
  props: inProps,
13
12
  name: 'MuiGrid2'
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/material v5.11.10
2
+ * @mui/material v5.11.11
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -37,6 +37,7 @@ Please use another name.` : _formatMuiErrorMessage(18));
37
37
  muiTheme = deepmerge(muiTheme, other);
38
38
  muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
39
39
  if (process.env.NODE_ENV !== 'production') {
40
+ // TODO v6: Refactor to use globalStateClassesMapping from @mui/utils once `readOnly` state class is used in Rating component.
40
41
  const stateClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];
41
42
  const traverse = (node, component) => {
42
43
  let key;
@@ -1,2 +1,2 @@
1
- export { useAutocomplete as default } from '@mui/base/AutocompleteUnstyled';
2
- export * from '@mui/base/AutocompleteUnstyled';
1
+ export { default } from '@mui/base/useAutocomplete';
2
+ export * from '@mui/base/useAutocomplete';
@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
12
12
  var _clsx = _interopRequireDefault(require("clsx"));
13
13
  var _utils = require("@mui/utils");
14
14
  var _composeClasses = _interopRequireDefault(require("@mui/base/composeClasses"));
15
- var _BadgeUnstyled = require("@mui/base/BadgeUnstyled");
15
+ var _useBadge = _interopRequireDefault(require("@mui/base/useBadge"));
16
16
  var _base = require("@mui/base");
17
17
  var _styled = _interopRequireDefault(require("../styles/styled"));
18
18
  var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
@@ -195,7 +195,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
195
195
  invisible: invisibleFromHook,
196
196
  max,
197
197
  displayValue: displayValueFromHook
198
- } = (0, _BadgeUnstyled.useBadge)({
198
+ } = (0, _useBadge.default)({
199
199
  max: maxProp,
200
200
  invisible: invisibleProp,
201
201
  badgeContent: badgeContentProp,
File without changes
@@ -10,8 +10,6 @@ var _system = require("@mui/system");
10
10
  var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
11
11
  var _styled = _interopRequireDefault(require("../styles/styled"));
12
12
  var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
13
- /* eslint-disable material-ui/mui-name-matches-component-name */
14
-
15
13
  const Container = (0, _system.createContainer)({
16
14
  createStyledComponent: (0, _styled.default)('div', {
17
15
  name: 'MuiContainer',
@@ -447,7 +447,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
447
447
  ref: ref,
448
448
  onClick: handleClick
449
449
  }, other, {
450
- className: (0, _clsx.default)(classes.root, rootProps.className, className),
450
+ className: (0, _clsx.default)(classes.root, rootProps.className, className, readOnly && 'MuiInputBase-readOnly'),
451
451
  children: [startAdornment, /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlContext.default.Provider, {
452
452
  value: null,
453
453
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, (0, _extends2.default)({
@@ -474,7 +474,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
474
474
  ownerState: (0, _extends2.default)({}, ownerState, inputProps.ownerState)
475
475
  }, {
476
476
  ref: handleInputRef,
477
- className: (0, _clsx.default)(classes.input, inputProps.className),
477
+ className: (0, _clsx.default)(classes.input, inputProps.className, readOnly && 'MuiInputBase-readOnly'),
478
478
  onBlur: handleBlur,
479
479
  onChange: handleChange,
480
480
  onFocus: handleFocus
@@ -107,7 +107,9 @@ const InputLabelRoot = (0, _styled.default)(_FormLabel.default, {
107
107
  }, ownerState.shrink && {
108
108
  userSelect: 'none',
109
109
  pointerEvents: 'auto',
110
- maxWidth: 'calc(133% - 24px)',
110
+ // Theoretically, we should have (8+5)*2/0.75 = 34px
111
+ // but it feels a better when it bleeds a bit on the left, so 32px.
112
+ maxWidth: 'calc(133% - 32px)',
111
113
  transform: 'translate(14px, -9px) scale(0.75)'
112
114
  })));
113
115
  const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
@@ -96,6 +96,7 @@ const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inPro
96
96
  ownerState: ownerState
97
97
  }, other));
98
98
  });
99
+ ListSubheader.muiSkipListHighlight = true;
99
100
  process.env.NODE_ENV !== "production" ? ListSubheader.propTypes /* remove-proptypes */ = {
100
101
  // ----------------------------- Warning --------------------------------
101
102
  // | These PropTypes are generated from the TypeScript type definitions |
@@ -203,6 +203,13 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
203
203
  activeItemIndex = index;
204
204
  }
205
205
  }
206
+ if (activeItemIndex === index && (child.props.disabled || child.props.muiSkipListHighlight || child.type.muiSkipListHighlight)) {
207
+ activeItemIndex += 1;
208
+ if (activeItemIndex >= children.length) {
209
+ // there are no focusable items within the list.
210
+ activeItemIndex = -1;
211
+ }
212
+ }
206
213
  });
207
214
  const items = React.Children.map(children, (child, index) => {
208
215
  if (index === activeItemIndex) {
@@ -9,6 +9,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
10
  var React = _interopRequireWildcard(require("react"));
11
11
  var _propTypes = _interopRequireDefault(require("prop-types"));
12
+ var _clsx = _interopRequireDefault(require("clsx"));
12
13
  var _ModalUnstyled = _interopRequireWildcard(require("@mui/base/ModalUnstyled"));
13
14
  var _utils = require("@mui/base/utils");
14
15
  var _utils2 = require("@mui/utils");
@@ -16,14 +17,11 @@ var _styled = _interopRequireDefault(require("../styles/styled"));
16
17
  var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
17
18
  var _Backdrop = _interopRequireDefault(require("../Backdrop"));
18
19
  var _jsxRuntime = require("react/jsx-runtime");
19
- const _excluded = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
20
+ const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
20
21
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
22
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
22
23
  const modalClasses = _ModalUnstyled.modalUnstyledClasses;
23
24
  exports.modalClasses = modalClasses;
24
- const extendUtilityClasses = ownerState => {
25
- return ownerState.classes;
26
- };
27
25
  const ModalRoot = (0, _styled.default)('div', {
28
26
  name: 'MuiModal',
29
27
  slot: 'Root',
@@ -78,6 +76,8 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
78
76
  const {
79
77
  BackdropComponent = ModalBackdrop,
80
78
  BackdropProps,
79
+ classes,
80
+ className,
81
81
  closeAfterTransition = false,
82
82
  children,
83
83
  component,
@@ -112,7 +112,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
112
112
  const ownerState = (0, _extends2.default)({}, props, commonProps, {
113
113
  exited
114
114
  });
115
- const classes = extendUtilityClasses(ownerState);
116
115
  const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : ModalRoot;
117
116
  const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
118
117
  const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
@@ -126,15 +125,17 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
126
125
  root: () => (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(rootSlotProps, ownerState), !(0, _utils.isHostComponent)(RootSlot) && {
127
126
  as: component,
128
127
  theme
128
+ }, {
129
+ className: (0, _clsx.default)(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
129
130
  }),
130
- backdrop: () => (0, _extends2.default)({}, BackdropProps, (0, _utils.resolveComponentProps)(backdropSlotProps, ownerState))
131
+ backdrop: () => (0, _extends2.default)({}, BackdropProps, (0, _utils.resolveComponentProps)(backdropSlotProps, ownerState), {
132
+ className: (0, _clsx.default)(backdropSlotProps == null ? void 0 : backdropSlotProps.className, classes == null ? void 0 : classes.backdrop)
133
+ })
131
134
  },
132
135
  onTransitionEnter: () => setExited(false),
133
136
  onTransitionExited: () => setExited(true),
134
137
  ref: ref
135
- }, other, {
136
- classes: classes
137
- }, commonProps, {
138
+ }, other, commonProps, {
138
139
  children: children
139
140
  }));
140
141
  });
@@ -171,6 +172,10 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
171
172
  * Override or extend the styles applied to the component.
172
173
  */
173
174
  classes: _propTypes.default.object,
175
+ /**
176
+ * @ignore
177
+ */
178
+ className: _propTypes.default.string,
174
179
  /**
175
180
  * When set to true the Modal waits until a nested Transition is completed before closing.
176
181
  * @default false
@@ -171,7 +171,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
171
171
  ownerState: ownerState,
172
172
  className: classes.notchedOutline,
173
173
  label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
174
- children: [label, "\xA0", '*']
174
+ children: [label, "\u2009", '*']
175
175
  })) : label,
176
176
  notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)
177
177
  }),
@@ -54,7 +54,7 @@ const useUtilityClasses = ownerState => {
54
54
  focusVisible
55
55
  } = ownerState;
56
56
  const slots = {
57
- root: ['root', `size${(0, _utils2.capitalize)(size)}`, disabled && 'disabled', focusVisible && 'focusVisible', readOnly && 'readyOnly'],
57
+ root: ['root', `size${(0, _utils2.capitalize)(size)}`, disabled && 'disabled', focusVisible && 'focusVisible', readOnly && 'readOnly'],
58
58
  label: ['label', 'pristine'],
59
59
  labelEmptyValue: [emptyValueFocused && 'labelEmptyValueActive'],
60
60
  icon: ['icon'],
@@ -452,7 +452,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
452
452
  ref: handleRef,
453
453
  onMouseMove: handleMouseMove,
454
454
  onMouseLeave: handleMouseLeave,
455
- className: (0, _clsx.default)(classes.root, className),
455
+ className: (0, _clsx.default)(classes.root, className, readOnly && 'MuiRating-readOnly'),
456
456
  ownerState: ownerState,
457
457
  role: readOnly ? 'img' : null,
458
458
  "aria-label": readOnly ? getLabelText(value) : null
@@ -336,8 +336,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
336
336
  computeDisplay = true;
337
337
  }
338
338
  }
339
- const items = childrenArray.map((child, index, arr) => {
340
- var _arr$, _arr$$props, _arr$2, _arr$2$props;
339
+ const items = childrenArray.map(child => {
341
340
  if (! /*#__PURE__*/React.isValidElement(child)) {
342
341
  return null;
343
342
  }
@@ -364,25 +363,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
364
363
  if (selected) {
365
364
  foundMatch = true;
366
365
  }
367
- if (child.props.value === undefined) {
368
- return /*#__PURE__*/React.cloneElement(child, {
369
- 'aria-readonly': true,
370
- role: 'option'
371
- });
372
- }
373
- const isFirstSelectableElement = () => {
374
- if (value) {
375
- return selected;
376
- }
377
- const firstSelectableElement = arr.find(item => {
378
- var _item$props;
379
- return (item == null ? void 0 : (_item$props = item.props) == null ? void 0 : _item$props.value) !== undefined && item.props.disabled !== true;
380
- });
381
- if (child === firstSelectableElement) {
382
- return true;
383
- }
384
- return selected;
385
- };
386
366
  return /*#__PURE__*/React.cloneElement(child, {
387
367
  'aria-selected': selected ? 'true' : 'false',
388
368
  onClick: handleItemClick(child),
@@ -398,7 +378,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
398
378
  }
399
379
  },
400
380
  role: 'option',
401
- selected: ((_arr$ = arr[0]) == null ? void 0 : (_arr$$props = _arr$.props) == null ? void 0 : _arr$$props.value) === undefined || ((_arr$2 = arr[0]) == null ? void 0 : (_arr$2$props = _arr$2.props) == null ? void 0 : _arr$2$props.disabled) === true ? isFirstSelectableElement() : selected,
381
+ selected,
402
382
  value: undefined,
403
383
  // The value is most likely not a valid HTML attribute.
404
384
  'data-value': child.props.value // Instead, we provide it as a data attribute.