@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.
- package/CHANGELOG.md +163 -3
- package/Drawer/Drawer.d.ts +2 -0
- package/Drawer/Drawer.js +2 -0
- package/InputBase/InputBase.js +1 -1
- package/Modal/Modal.d.ts +117 -12
- package/Modal/Modal.js +97 -36
- package/Modal/index.d.ts +3 -0
- package/Modal/index.js +2 -1
- package/Modal/modalClasses.d.ts +12 -0
- package/Modal/modalClasses.js +7 -0
- package/Popover/Popover.d.ts +2 -1
- package/Popover/Popover.js +20 -6
- package/README.md +2 -3
- package/Select/Select.js +5 -3
- package/Select/selectClasses.d.ts +2 -0
- package/Select/selectClasses.js +1 -1
- package/Skeleton/Skeleton.js +2 -2
- package/Snackbar/Snackbar.d.ts +4 -4
- package/Snackbar/Snackbar.js +4 -4
- package/TextField/TextField.d.ts +0 -4
- package/TextField/TextField.js +2 -17
- package/index.js +1 -1
- package/legacy/Drawer/Drawer.js +2 -0
- package/legacy/InputBase/InputBase.js +1 -1
- package/legacy/Modal/Modal.js +93 -43
- package/legacy/Modal/index.js +2 -1
- package/legacy/Modal/modalClasses.js +7 -0
- package/legacy/Popover/Popover.js +22 -5
- package/legacy/Select/Select.js +4 -2
- package/legacy/Select/selectClasses.js +1 -1
- package/legacy/Skeleton/Skeleton.js +2 -2
- package/legacy/Snackbar/Snackbar.js +4 -4
- package/legacy/TextField/TextField.js +2 -17
- package/legacy/index.js +1 -1
- package/modern/Drawer/Drawer.js +2 -0
- package/modern/InputBase/InputBase.js +1 -1
- package/modern/Modal/Modal.js +97 -36
- package/modern/Modal/index.js +2 -1
- package/modern/Modal/modalClasses.js +7 -0
- package/modern/Popover/Popover.js +20 -6
- package/modern/Select/Select.js +5 -3
- package/modern/Select/selectClasses.js +1 -1
- package/modern/Skeleton/Skeleton.js +2 -2
- package/modern/Snackbar/Snackbar.js +4 -4
- package/modern/TextField/TextField.js +2 -17
- package/modern/index.js +1 -1
- package/node/Drawer/Drawer.js +2 -0
- package/node/InputBase/InputBase.js +1 -1
- package/node/Modal/Modal.js +100 -41
- package/node/Modal/index.js +14 -5
- package/node/Modal/modalClasses.js +16 -0
- package/node/Popover/Popover.js +20 -6
- package/node/Select/Select.js +5 -3
- package/node/Select/selectClasses.js +1 -1
- package/node/Skeleton/Skeleton.js +2 -2
- package/node/Snackbar/Snackbar.js +4 -4
- package/node/TextField/TextField.js +2 -17
- package/node/index.js +1 -1
- package/package.json +6 -6
- package/umd/material-ui.development.js +456 -657
- 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
|
|
232
|
-
*
|
|
233
|
-
*
|
|
234
|
-
* features
|
|
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", "
|
|
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
package/modern/Drawer/Drawer.js
CHANGED
|
@@ -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
|
|
376
|
+
if (onClick) {
|
|
377
377
|
onClick(event);
|
|
378
378
|
}
|
|
379
379
|
};
|
package/modern/Modal/Modal.js
CHANGED
|
@@ -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
|
-
|
|
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
|
|
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
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
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
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
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
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
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
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
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 --------------------------------
|
package/modern/Modal/index.js
CHANGED
|
@@ -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,
|
package/modern/Select/Select.js
CHANGED
|
@@ -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(
|
|
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}
|
|
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}
|
|
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
|
|
231
|
-
*
|
|
232
|
-
*
|
|
233
|
-
* features
|
|
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", "
|
|
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
package/node/Drawer/Drawer.js
CHANGED
|
@@ -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
|
|
387
|
+
if (onClick) {
|
|
388
388
|
onClick(event);
|
|
389
389
|
}
|
|
390
390
|
};
|