@mui/material 5.14.5 → 5.14.7

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 (61) hide show
  1. package/CHANGELOG.md +163 -3
  2. package/Drawer/Drawer.d.ts +2 -0
  3. package/Drawer/Drawer.js +2 -0
  4. package/InputBase/InputBase.js +1 -1
  5. package/Modal/Modal.d.ts +117 -12
  6. package/Modal/Modal.js +97 -36
  7. package/Modal/index.d.ts +3 -0
  8. package/Modal/index.js +2 -1
  9. package/Modal/modalClasses.d.ts +12 -0
  10. package/Modal/modalClasses.js +7 -0
  11. package/Popover/Popover.d.ts +2 -1
  12. package/Popover/Popover.js +20 -6
  13. package/README.md +2 -3
  14. package/Select/Select.js +5 -3
  15. package/Select/selectClasses.d.ts +2 -0
  16. package/Select/selectClasses.js +1 -1
  17. package/Skeleton/Skeleton.js +2 -2
  18. package/Snackbar/Snackbar.d.ts +4 -4
  19. package/Snackbar/Snackbar.js +4 -4
  20. package/TextField/TextField.d.ts +0 -4
  21. package/TextField/TextField.js +2 -17
  22. package/index.js +1 -1
  23. package/legacy/Drawer/Drawer.js +2 -0
  24. package/legacy/InputBase/InputBase.js +1 -1
  25. package/legacy/Modal/Modal.js +93 -43
  26. package/legacy/Modal/index.js +2 -1
  27. package/legacy/Modal/modalClasses.js +7 -0
  28. package/legacy/Popover/Popover.js +22 -5
  29. package/legacy/Select/Select.js +4 -2
  30. package/legacy/Select/selectClasses.js +1 -1
  31. package/legacy/Skeleton/Skeleton.js +2 -2
  32. package/legacy/Snackbar/Snackbar.js +4 -4
  33. package/legacy/TextField/TextField.js +2 -17
  34. package/legacy/index.js +1 -1
  35. package/modern/Drawer/Drawer.js +2 -0
  36. package/modern/InputBase/InputBase.js +1 -1
  37. package/modern/Modal/Modal.js +97 -36
  38. package/modern/Modal/index.js +2 -1
  39. package/modern/Modal/modalClasses.js +7 -0
  40. package/modern/Popover/Popover.js +20 -6
  41. package/modern/Select/Select.js +5 -3
  42. package/modern/Select/selectClasses.js +1 -1
  43. package/modern/Skeleton/Skeleton.js +2 -2
  44. package/modern/Snackbar/Snackbar.js +4 -4
  45. package/modern/TextField/TextField.js +2 -17
  46. package/modern/index.js +1 -1
  47. package/node/Drawer/Drawer.js +2 -0
  48. package/node/InputBase/InputBase.js +1 -1
  49. package/node/Modal/Modal.js +100 -41
  50. package/node/Modal/index.js +14 -5
  51. package/node/Modal/modalClasses.js +16 -0
  52. package/node/Popover/Popover.js +20 -6
  53. package/node/Select/Select.js +5 -3
  54. package/node/Select/selectClasses.js +1 -1
  55. package/node/Skeleton/Skeleton.js +2 -2
  56. package/node/Snackbar/Snackbar.js +4 -4
  57. package/node/TextField/TextField.js +2 -17
  58. package/node/index.js +1 -1
  59. package/package.json +6 -6
  60. package/umd/material-ui.development.js +456 -657
  61. package/umd/material-ui.production.min.js +23 -23
@@ -228,10 +228,10 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes *
228
228
  */
229
229
  disableWindowBlurListener: PropTypes.bool,
230
230
  /**
231
- * When displaying multiple consecutive Snackbars from a parent rendering a single
232
- * <Snackbar/>, add the key prop to ensure independent treatment of each message.
233
- * e.g. <Snackbar key={message} />, otherwise, the message may update-in-place and
234
- * features such as autoHideDuration may be canceled.
231
+ * When displaying multiple consecutive snackbars using a single parent-rendered
232
+ * `<Snackbar/>`, add the `key` prop to ensure independent treatment of each message.
233
+ * For instance, use `<Snackbar key={message} />`. Otherwise, messages might update
234
+ * in place, and features like `autoHideDuration` could be affected.
235
235
  */
236
236
  key: function key() {
237
237
  return null;
@@ -105,7 +105,6 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
105
105
  name = props.name,
106
106
  onBlur = props.onBlur,
107
107
  onChange = props.onChange,
108
- onClick = props.onClick,
109
108
  onFocus = props.onFocus,
110
109
  placeholder = props.placeholder,
111
110
  _props$required = props.required,
@@ -118,7 +117,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
118
117
  value = props.value,
119
118
  _props$variant = props.variant,
120
119
  variant = _props$variant === void 0 ? 'outlined' : _props$variant,
121
- other = _objectWithoutProperties(props, ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"]);
120
+ other = _objectWithoutProperties(props, ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"]);
122
121
  var ownerState = _extends({}, props, {
123
122
  autoFocus: autoFocus,
124
123
  color: color,
@@ -150,14 +149,6 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
150
149
  }
151
150
  InputMore['aria-describedby'] = undefined;
152
151
  }
153
- var handleClick = function handleClick(event) {
154
- if (!disabled && onClick) {
155
- // The `onClick` is registered both on the root and the input elements.
156
- // Without stopping the propagation, the event could be triggered twice.
157
- event.stopPropagation();
158
- onClick(event);
159
- }
160
- };
161
152
  var id = useId(idOverride);
162
153
  var helperTextId = helperText && id ? "".concat(id, "-helper-text") : undefined;
163
154
  var inputLabelId = label && id ? "".concat(id, "-label") : undefined;
@@ -180,7 +171,6 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
180
171
  onBlur: onBlur,
181
172
  onChange: onChange,
182
173
  onFocus: onFocus,
183
- onClick: handleClick,
184
174
  placeholder: placeholder,
185
175
  inputProps: inputProps
186
176
  }, InputMore, InputProps));
@@ -193,8 +183,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
193
183
  required: required,
194
184
  color: color,
195
185
  variant: variant,
196
- ownerState: ownerState,
197
- onClick: handleClick
186
+ ownerState: ownerState
198
187
  }, other, {
199
188
  children: [label != null && label !== '' && /*#__PURE__*/_jsx(InputLabel, _extends({
200
189
  htmlFor: id,
@@ -340,10 +329,6 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
340
329
  * You can pull out the new value by accessing `event.target.value` (string).
341
330
  */
342
331
  onChange: PropTypes.func,
343
- /**
344
- * @ignore
345
- */
346
- onClick: PropTypes.func,
347
332
  /**
348
333
  * @ignore
349
334
  */
package/legacy/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/material v5.14.5
2
+ * @mui/material v5.14.7
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -268,8 +268,10 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */
268
268
  ModalProps: PropTypes.object,
269
269
  /**
270
270
  * Callback fired when the component requests to be closed.
271
+ * The `reason` parameter can optionally be used to control the response to `onClose`.
271
272
  *
272
273
  * @param {object} event The event source of the callback.
274
+ * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
273
275
  */
274
276
  onClose: PropTypes.func,
275
277
  /**
@@ -373,7 +373,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
373
373
  if (inputRef.current && event.currentTarget === event.target) {
374
374
  inputRef.current.focus();
375
375
  }
376
- if (onClick && !fcs.disabled) {
376
+ if (onClick) {
377
377
  onClick(event);
378
378
  }
379
379
  };
@@ -6,14 +6,30 @@ const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className",
6
6
  import * as React from 'react';
7
7
  import PropTypes from 'prop-types';
8
8
  import clsx from 'clsx';
9
- import { Modal as ModalUnstyled, modalClasses as modalUnstyledClasses } from '@mui/base/Modal';
10
- import { isHostComponent, resolveComponentProps } from '@mui/base/utils';
11
9
  import { elementAcceptingRef, HTMLElementType } from '@mui/utils';
10
+ import { useSlotProps } from '@mui/base';
11
+ import { unstable_useModal as useModal } from '@mui/base/unstable_useModal';
12
+ import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
13
+ import FocusTrap from '../Unstable_TrapFocus';
14
+ import Portal from '../Portal';
12
15
  import styled from '../styles/styled';
13
16
  import useThemeProps from '../styles/useThemeProps';
14
17
  import Backdrop from '../Backdrop';
18
+ import { getModalUtilityClass } from './modalClasses';
15
19
  import { jsx as _jsx } from "react/jsx-runtime";
16
- export const modalClasses = modalUnstyledClasses;
20
+ import { jsxs as _jsxs } from "react/jsx-runtime";
21
+ const useUtilityClasses = ownerState => {
22
+ const {
23
+ open,
24
+ exited,
25
+ classes
26
+ } = ownerState;
27
+ const slots = {
28
+ root: ['root', !open && exited && 'hidden'],
29
+ backdrop: ['backdrop']
30
+ };
31
+ return composeClasses(slots, getModalUtilityClass, classes);
32
+ };
17
33
  const ModalRoot = styled('div', {
18
34
  name: 'MuiModal',
19
35
  slot: 'Root',
@@ -67,7 +83,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
67
83
  const {
68
84
  BackdropComponent = ModalBackdrop,
69
85
  BackdropProps,
70
- classes,
71
86
  className,
72
87
  closeAfterTransition = false,
73
88
  children,
@@ -84,17 +99,13 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
84
99
  hideBackdrop = false,
85
100
  keepMounted = false,
86
101
  onBackdropClick,
87
- onClose,
88
102
  open,
89
103
  slotProps,
90
- slots,
104
+ slots
91
105
  // eslint-disable-next-line react/prop-types
92
- theme
93
106
  } = props,
94
107
  other = _objectWithoutPropertiesLoose(props, _excluded);
95
- const [exited, setExited] = React.useState(true);
96
- const commonProps = {
97
- container,
108
+ const propsWithDefaults = _extends({}, props, {
98
109
  closeAfterTransition,
99
110
  disableAutoFocus,
100
111
  disableEnforceFocus,
@@ -103,40 +114,90 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
103
114
  disableRestoreFocus,
104
115
  disableScrollLock,
105
116
  hideBackdrop,
106
- keepMounted,
107
- onBackdropClick,
108
- onClose,
109
- open
110
- };
111
- const ownerState = _extends({}, props, commonProps, {
117
+ keepMounted
118
+ });
119
+ const {
120
+ getRootProps,
121
+ getBackdropProps,
122
+ getTransitionProps,
123
+ portalRef,
124
+ isTopModal,
125
+ exited,
126
+ hasTransition
127
+ } = useModal(_extends({}, propsWithDefaults, {
128
+ rootRef: ref
129
+ }));
130
+ const ownerState = _extends({}, propsWithDefaults, {
112
131
  exited
113
132
  });
133
+ const classes = useUtilityClasses(ownerState);
134
+ const childProps = {};
135
+ if (children.props.tabIndex === undefined) {
136
+ childProps.tabIndex = '-1';
137
+ }
138
+
139
+ // It's a Transition like component
140
+ if (hasTransition) {
141
+ const {
142
+ onEnter,
143
+ onExited
144
+ } = getTransitionProps();
145
+ childProps.onEnter = onEnter;
146
+ childProps.onExited = onExited;
147
+ }
114
148
  const RootSlot = slots?.root ?? components.Root ?? ModalRoot;
115
149
  const BackdropSlot = slots?.backdrop ?? components.Backdrop ?? BackdropComponent;
116
150
  const rootSlotProps = slotProps?.root ?? componentsProps.root;
117
151
  const backdropSlotProps = slotProps?.backdrop ?? componentsProps.backdrop;
118
- return /*#__PURE__*/_jsx(ModalUnstyled, _extends({
119
- slots: {
120
- root: RootSlot,
121
- backdrop: BackdropSlot
152
+ const rootProps = useSlotProps({
153
+ elementType: RootSlot,
154
+ externalSlotProps: rootSlotProps,
155
+ externalForwardedProps: other,
156
+ getSlotProps: getRootProps,
157
+ additionalProps: {
158
+ ref,
159
+ as: component
122
160
  },
123
- slotProps: {
124
- root: () => _extends({}, resolveComponentProps(rootSlotProps, ownerState), !isHostComponent(RootSlot) && {
125
- as: component,
126
- theme
127
- }, {
128
- className: clsx(className, rootSlotProps?.className, classes?.root, !ownerState.open && ownerState.exited && classes?.hidden)
129
- }),
130
- backdrop: () => _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState), {
131
- className: clsx(backdropSlotProps?.className, BackdropProps?.className, classes?.backdrop)
132
- })
161
+ ownerState,
162
+ className: clsx(className, rootSlotProps?.className, classes?.root, !ownerState.open && ownerState.exited && classes?.hidden)
163
+ });
164
+ const backdropProps = useSlotProps({
165
+ elementType: BackdropSlot,
166
+ externalSlotProps: backdropSlotProps,
167
+ additionalProps: BackdropProps,
168
+ getSlotProps: otherHandlers => {
169
+ return getBackdropProps(_extends({}, otherHandlers, {
170
+ onClick: e => {
171
+ if (onBackdropClick) {
172
+ onBackdropClick(e);
173
+ }
174
+ if (otherHandlers?.onClick) {
175
+ otherHandlers.onClick(e);
176
+ }
177
+ }
178
+ }));
133
179
  },
134
- onTransitionEnter: () => setExited(false),
135
- onTransitionExited: () => setExited(true),
136
- ref: ref
137
- }, other, commonProps, {
138
- children: children
139
- }));
180
+ className: clsx(backdropSlotProps?.className, BackdropProps?.className, classes?.backdrop),
181
+ ownerState
182
+ });
183
+ if (!keepMounted && !open && (!hasTransition || exited)) {
184
+ return null;
185
+ }
186
+ return /*#__PURE__*/_jsx(Portal, {
187
+ ref: portalRef,
188
+ container: container,
189
+ disablePortal: disablePortal,
190
+ children: /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, {
191
+ children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/_jsx(BackdropSlot, _extends({}, backdropProps)) : null, /*#__PURE__*/_jsx(FocusTrap, {
192
+ disableEnforceFocus: disableEnforceFocus,
193
+ disableAutoFocus: disableAutoFocus,
194
+ disableRestoreFocus: disableRestoreFocus,
195
+ isEnabled: isTopModal,
196
+ open: open,
197
+ children: /*#__PURE__*/React.cloneElement(children, childProps)
198
+ })]
199
+ }))
200
+ });
140
201
  });
141
202
  process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ = {
142
203
  // ----------------------------- Warning --------------------------------
@@ -2,4 +2,5 @@
2
2
 
3
3
  export { ModalManager } from '@mui/base/unstable_useModal';
4
4
  export { default } from './Modal';
5
- export * from './Modal';
5
+ export { default as modalClasses } from './modalClasses';
6
+ export * from './modalClasses';
@@ -0,0 +1,7 @@
1
+ import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
2
+ import generateUtilityClass from '../generateUtilityClass';
3
+ export function getModalUtilityClass(slot) {
4
+ return generateUtilityClass('MuiModal', slot);
5
+ }
6
+ const modalClasses = generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
7
+ export default modalClasses;
@@ -3,7 +3,7 @@
3
3
  import _extends from "@babel/runtime/helpers/esm/extends";
4
4
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
5
5
  const _excluded = ["onEntering"],
6
- _excluded2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"],
6
+ _excluded2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps", "disableScrollLock"],
7
7
  _excluded3 = ["slotProps"];
8
8
  import * as React from 'react';
9
9
  import PropTypes from 'prop-types';
@@ -112,7 +112,8 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
112
112
  transitionDuration: transitionDurationProp = 'auto',
113
113
  TransitionProps: {
114
114
  onEntering
115
- } = {}
115
+ } = {},
116
+ disableScrollLock = false
116
117
  } = props,
117
118
  TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
118
119
  other = _objectWithoutPropertiesLoose(props, _excluded2);
@@ -200,11 +201,11 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
200
201
  const widthThreshold = containerWindow.innerWidth - marginThreshold;
201
202
 
202
203
  // Check if the vertical axis needs shifting
203
- if (top < marginThreshold) {
204
+ if (marginThreshold !== null && top < marginThreshold) {
204
205
  const diff = top - marginThreshold;
205
206
  top -= diff;
206
207
  elemTransformOrigin.vertical += diff;
207
- } else if (bottom > heightThreshold) {
208
+ } else if (marginThreshold !== null && bottom > heightThreshold) {
208
209
  const diff = bottom - heightThreshold;
209
210
  top -= diff;
210
211
  elemTransformOrigin.vertical += diff;
@@ -216,7 +217,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
216
217
  }
217
218
 
218
219
  // Check if the horizontal axis needs shifting
219
- if (left < marginThreshold) {
220
+ if (marginThreshold !== null && left < marginThreshold) {
220
221
  const diff = left - marginThreshold;
221
222
  left -= diff;
222
223
  elemTransformOrigin.horizontal += diff;
@@ -247,6 +248,12 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
247
248
  element.style.transformOrigin = positioning.transformOrigin;
248
249
  setIsPositioned(true);
249
250
  }, [getPositioningStyle]);
251
+ React.useEffect(() => {
252
+ if (disableScrollLock) {
253
+ window.addEventListener('scroll', setPositioningStyles);
254
+ }
255
+ return () => window.removeEventListener('scroll', setPositioningStyles);
256
+ }, [anchorEl, disableScrollLock, setPositioningStyles]);
250
257
  const handleEntering = (element, isAppearing) => {
251
258
  if (onEntering) {
252
259
  onEntering(element, isAppearing);
@@ -327,7 +334,8 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
327
334
  } = _useSlotProps,
328
335
  rootProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded3);
329
336
  return /*#__PURE__*/_jsx(RootSlot, _extends({}, rootProps, !isHostComponent(RootSlot) && {
330
- slotProps: rootSlotPropsProp
337
+ slotProps: rootSlotPropsProp,
338
+ disableScrollLock
331
339
  }, {
332
340
  children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
333
341
  appear: true,
@@ -422,6 +430,11 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
422
430
  * so it's simply `document.body` most of the time.
423
431
  */
424
432
  container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.func]),
433
+ /**
434
+ * Disable the scroll lock behavior.
435
+ * @default false
436
+ */
437
+ disableScrollLock: PropTypes.bool,
425
438
  /**
426
439
  * The elevation of the popover.
427
440
  * @default 8
@@ -429,6 +442,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
429
442
  elevation: integerPropType,
430
443
  /**
431
444
  * Specifies how close to the edge of the window the popover can appear.
445
+ * If null, the popover will not be constrained by the window.
432
446
  * @default 16
433
447
  */
434
448
  marginThreshold: PropTypes.number,
@@ -2,7 +2,8 @@
2
2
 
3
3
  import _extends from "@babel/runtime/helpers/esm/extends";
4
4
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
5
- const _excluded = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
5
+ const _excluded = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"],
6
+ _excluded2 = ["root"];
6
7
  import * as React from 'react';
7
8
  import PropTypes from 'prop-types';
8
9
  import clsx from 'clsx';
@@ -76,6 +77,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
76
77
  classes: classesProp
77
78
  });
78
79
  const classes = useUtilityClasses(ownerState);
80
+ const restOfClasses = _objectWithoutPropertiesLoose(classes, _excluded2);
79
81
  const InputComponent = input || {
80
82
  standard: /*#__PURE__*/_jsx(StyledInput, {
81
83
  ownerState: ownerState
@@ -118,13 +120,13 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
118
120
  id
119
121
  }, SelectDisplayProps)
120
122
  }, inputProps, {
121
- classes: inputProps ? deepmerge(classes, inputProps.classes) : classes
123
+ classes: inputProps ? deepmerge(restOfClasses, inputProps.classes) : restOfClasses
122
124
  }, input ? input.props.inputProps : {})
123
125
  }, multiple && native && variant === 'outlined' ? {
124
126
  notched: true
125
127
  } : {}, {
126
128
  ref: inputComponentRef,
127
- className: clsx(InputComponent.props.className, className)
129
+ className: clsx(InputComponent.props.className, className, classes.root)
128
130
  }, !input && {
129
131
  variant
130
132
  }, other))
@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
3
3
  export function getSelectUtilityClasses(slot) {
4
4
  return generateUtilityClass('MuiSelect', slot);
5
5
  }
6
- const selectClasses = generateUtilityClasses('MuiSelect', ['select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
6
+ const selectClasses = generateUtilityClasses('MuiSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
7
7
  export default selectClasses;
@@ -100,7 +100,7 @@ const SkeletonRoot = styled('span', {
100
100
  }, ({
101
101
  ownerState
102
102
  }) => ownerState.animation === 'pulse' && css`
103
- animation: ${pulseKeyframe} 1.5s ease-in-out 0.5s infinite;
103
+ animation: ${pulseKeyframe} 2s ease-in-out 0.5s infinite;
104
104
  `, ({
105
105
  ownerState,
106
106
  theme
@@ -112,7 +112,7 @@ const SkeletonRoot = styled('span', {
112
112
  -webkit-mask-image: -webkit-radial-gradient(white, black);
113
113
 
114
114
  &::after {
115
- animation: ${waveKeyframe} 1.6s linear 0.5s infinite;
115
+ animation: ${waveKeyframe} 2s linear 0.5s infinite;
116
116
  background: linear-gradient(
117
117
  90deg,
118
118
  transparent,
@@ -227,10 +227,10 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes *
227
227
  */
228
228
  disableWindowBlurListener: PropTypes.bool,
229
229
  /**
230
- * When displaying multiple consecutive Snackbars from a parent rendering a single
231
- * <Snackbar/>, add the key prop to ensure independent treatment of each message.
232
- * e.g. <Snackbar key={message} />, otherwise, the message may update-in-place and
233
- * features such as autoHideDuration may be canceled.
230
+ * When displaying multiple consecutive snackbars using a single parent-rendered
231
+ * `<Snackbar/>`, add the `key` prop to ensure independent treatment of each message.
232
+ * For instance, use `<Snackbar key={message} />`. Otherwise, messages might update
233
+ * in place, and features like `autoHideDuration` could be affected.
234
234
  */
235
235
  key: () => null,
236
236
  /**
@@ -2,7 +2,7 @@
2
2
 
3
3
  import _extends from "@babel/runtime/helpers/esm/extends";
4
4
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
5
- const _excluded = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
5
+ const _excluded = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"];
6
6
  import * as React from 'react';
7
7
  import PropTypes from 'prop-types';
8
8
  import clsx from 'clsx';
@@ -101,7 +101,6 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
101
101
  name,
102
102
  onBlur,
103
103
  onChange,
104
- onClick,
105
104
  onFocus,
106
105
  placeholder,
107
106
  required = false,
@@ -144,14 +143,6 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
144
143
  }
145
144
  InputMore['aria-describedby'] = undefined;
146
145
  }
147
- const handleClick = event => {
148
- if (!disabled && onClick) {
149
- // The `onClick` is registered both on the root and the input elements.
150
- // Without stopping the propagation, the event could be triggered twice.
151
- event.stopPropagation();
152
- onClick(event);
153
- }
154
- };
155
146
  const id = useId(idOverride);
156
147
  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
157
148
  const inputLabelId = label && id ? `${id}-label` : undefined;
@@ -174,7 +165,6 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
174
165
  onBlur: onBlur,
175
166
  onChange: onChange,
176
167
  onFocus: onFocus,
177
- onClick: handleClick,
178
168
  placeholder: placeholder,
179
169
  inputProps: inputProps
180
170
  }, InputMore, InputProps));
@@ -187,8 +177,7 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
187
177
  required: required,
188
178
  color: color,
189
179
  variant: variant,
190
- ownerState: ownerState,
191
- onClick: handleClick
180
+ ownerState: ownerState
192
181
  }, other, {
193
182
  children: [label != null && label !== '' && /*#__PURE__*/_jsx(InputLabel, _extends({
194
183
  htmlFor: id,
@@ -334,10 +323,6 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
334
323
  * You can pull out the new value by accessing `event.target.value` (string).
335
324
  */
336
325
  onChange: PropTypes.func,
337
- /**
338
- * @ignore
339
- */
340
- onClick: PropTypes.func,
341
326
  /**
342
327
  * @ignore
343
328
  */
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/material v5.14.5
2
+ * @mui/material v5.14.7
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -278,8 +278,10 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */
278
278
  ModalProps: _propTypes.default.object,
279
279
  /**
280
280
  * Callback fired when the component requests to be closed.
281
+ * The `reason` parameter can optionally be used to control the response to `onClose`.
281
282
  *
282
283
  * @param {object} event The event source of the callback.
284
+ * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
283
285
  */
284
286
  onClose: _propTypes.default.func,
285
287
  /**
@@ -384,7 +384,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
384
384
  if (inputRef.current && event.currentTarget === event.target) {
385
385
  inputRef.current.focus();
386
386
  }
387
- if (onClick && !fcs.disabled) {
387
+ if (onClick) {
388
388
  onClick(event);
389
389
  }
390
390
  };