@mui/material 5.2.6 → 5.3.1
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/Autocomplete/Autocomplete.d.ts +2 -0
- package/Autocomplete/Autocomplete.js +11 -7
- package/Avatar/Avatar.d.ts +3 -1
- package/Backdrop/Backdrop.js +3 -1
- package/Badge/Badge.d.ts +10 -10
- package/Badge/Badge.js +6 -7
- package/Button/buttonClasses.d.ts +1 -1
- package/CHANGELOG.md +240 -33
- package/FilledInput/FilledInput.js +4 -1
- package/FormControlLabel/FormControlLabel.js +3 -1
- package/Input/Input.js +4 -1
- package/InputBase/InputBase.js +4 -1
- package/InputLabel/InputLabel.js +4 -0
- package/ListItem/ListItem.js +3 -1
- package/Modal/Modal.js +3 -1
- package/README.md +5 -4
- package/Select/Select.d.ts +9 -1
- package/Select/Select.js +10 -1
- package/Select/SelectInput.d.ts +1 -0
- package/Select/SelectInput.js +25 -4
- package/Slider/Slider.d.ts +2 -0
- package/Slider/Slider.js +126 -53
- package/StepLabel/StepLabel.js +3 -1
- package/SvgIcon/SvgIcon.d.ts +8 -0
- package/SvgIcon/SvgIcon.js +28 -12
- package/TextField/TextField.d.ts +1 -0
- package/TextField/TextField.js +1 -0
- package/Tooltip/Tooltip.js +6 -1
- package/index.js +1 -1
- package/legacy/Autocomplete/Autocomplete.js +11 -7
- package/legacy/Backdrop/Backdrop.js +3 -1
- package/legacy/Badge/Badge.js +6 -7
- package/legacy/FilledInput/FilledInput.js +4 -1
- package/legacy/FormControlLabel/FormControlLabel.js +3 -1
- package/legacy/Input/Input.js +4 -1
- package/legacy/InputBase/InputBase.js +4 -1
- package/legacy/InputLabel/InputLabel.js +4 -0
- package/legacy/ListItem/ListItem.js +3 -1
- package/legacy/Modal/Modal.js +3 -1
- package/legacy/Select/Select.js +11 -1
- package/legacy/Select/SelectInput.js +29 -7
- package/legacy/Slider/Slider.js +127 -54
- package/legacy/StepLabel/StepLabel.js +3 -1
- package/legacy/SvgIcon/SvgIcon.js +29 -12
- package/legacy/TextField/TextField.js +1 -0
- package/legacy/Tooltip/Tooltip.js +6 -1
- package/legacy/index.js +1 -1
- package/legacy/locale/index.js +139 -128
- package/legacy/utils/shouldSpreadAdditionalProps.js +7 -0
- package/locale/index.js +54 -44
- package/modern/Autocomplete/Autocomplete.js +10 -6
- package/modern/Backdrop/Backdrop.js +3 -1
- package/modern/Badge/Badge.js +6 -7
- package/modern/FilledInput/FilledInput.js +4 -1
- package/modern/FormControlLabel/FormControlLabel.js +3 -1
- package/modern/Input/Input.js +4 -1
- package/modern/InputBase/InputBase.js +4 -1
- package/modern/InputLabel/InputLabel.js +4 -0
- package/modern/ListItem/ListItem.js +3 -1
- package/modern/Modal/Modal.js +3 -1
- package/modern/Select/Select.js +10 -1
- package/modern/Select/SelectInput.js +25 -4
- package/modern/Slider/Slider.js +126 -53
- package/modern/StepLabel/StepLabel.js +3 -1
- package/modern/SvgIcon/SvgIcon.js +27 -11
- package/modern/TextField/TextField.js +1 -0
- package/modern/Tooltip/Tooltip.js +6 -1
- package/modern/index.js +1 -1
- package/modern/locale/index.js +54 -44
- package/modern/utils/shouldSpreadAdditionalProps.js +7 -0
- package/node/Autocomplete/Autocomplete.js +11 -7
- package/node/Backdrop/Backdrop.js +3 -1
- package/node/Badge/Badge.js +8 -8
- package/node/FilledInput/FilledInput.js +4 -1
- package/node/FormControlLabel/FormControlLabel.js +3 -1
- package/node/Input/Input.js +4 -1
- package/node/InputBase/InputBase.js +4 -1
- package/node/InputLabel/InputLabel.js +4 -0
- package/node/ListItem/ListItem.js +3 -1
- package/node/Modal/Modal.js +3 -1
- package/node/Select/Select.js +10 -1
- package/node/Select/SelectInput.js +25 -4
- package/node/Slider/Slider.js +112 -45
- package/node/StepLabel/StepLabel.js +3 -1
- package/node/SvgIcon/SvgIcon.js +28 -12
- package/node/TextField/TextField.js +1 -0
- package/node/Tooltip/Tooltip.js +6 -1
- package/node/index.js +1 -1
- package/node/locale/index.js +54 -44
- package/node/utils/shouldSpreadAdditionalProps.js +15 -0
- package/package.json +7 -7
- package/styles/components.d.ts +452 -113
- package/styles/createTheme.d.ts +12 -6
- package/styles/overrides.d.ts +16 -4
- package/styles/useThemeProps.d.ts +2 -1
- package/umd/material-ui.development.js +619 -289
- package/umd/material-ui.production.min.js +21 -21
- package/utils/shouldSpreadAdditionalProps.js +7 -0
package/Select/Select.js
CHANGED
|
@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
|
|
|
3
3
|
|
|
4
4
|
var _Input, _FilledInput;
|
|
5
5
|
|
|
6
|
-
const _excluded = ["autoWidth", "children", "classes", "className", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
|
|
6
|
+
const _excluded = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
|
|
7
7
|
import * as React from 'react';
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
9
|
import clsx from 'clsx';
|
|
@@ -38,6 +38,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
|
|
|
38
38
|
children,
|
|
39
39
|
classes: classesProp = {},
|
|
40
40
|
className,
|
|
41
|
+
defaultOpen = false,
|
|
41
42
|
displayEmpty = false,
|
|
42
43
|
IconComponent = ArrowDropDownIcon,
|
|
43
44
|
id,
|
|
@@ -94,6 +95,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
|
|
|
94
95
|
id
|
|
95
96
|
} : {
|
|
96
97
|
autoWidth,
|
|
98
|
+
defaultOpen,
|
|
97
99
|
displayEmpty,
|
|
98
100
|
labelId,
|
|
99
101
|
MenuProps,
|
|
@@ -148,6 +150,13 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
|
|
|
148
150
|
*/
|
|
149
151
|
className: PropTypes.string,
|
|
150
152
|
|
|
153
|
+
/**
|
|
154
|
+
* If `true`, the component is initially open. Use when the component open state is not controlled (i.e. the `open` prop is not defined).
|
|
155
|
+
* You can only use it when the `native` prop is `false` (default).
|
|
156
|
+
* @default false
|
|
157
|
+
*/
|
|
158
|
+
defaultOpen: PropTypes.bool,
|
|
159
|
+
|
|
151
160
|
/**
|
|
152
161
|
* The default value. Use when the component is not controlled.
|
|
153
162
|
*/
|
package/Select/SelectInput.d.ts
CHANGED
package/Select/SelectInput.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
3
|
import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
|
|
4
|
-
const _excluded = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
|
|
4
|
+
const _excluded = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import { isFragment } from 'react-is';
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
@@ -113,6 +113,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
|
|
|
113
113
|
autoWidth,
|
|
114
114
|
children,
|
|
115
115
|
className,
|
|
116
|
+
defaultOpen,
|
|
116
117
|
defaultValue,
|
|
117
118
|
disabled,
|
|
118
119
|
displayEmpty,
|
|
@@ -142,6 +143,11 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
|
|
|
142
143
|
default: defaultValue,
|
|
143
144
|
name: 'Select'
|
|
144
145
|
});
|
|
146
|
+
const [openState, setOpenState] = useControlled({
|
|
147
|
+
controlled: openProp,
|
|
148
|
+
default: defaultOpen,
|
|
149
|
+
name: 'Select'
|
|
150
|
+
});
|
|
145
151
|
const inputRef = React.useRef(null);
|
|
146
152
|
const displayRef = React.useRef(null);
|
|
147
153
|
const [displayNode, setDisplayNode] = React.useState(null);
|
|
@@ -149,7 +155,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
|
|
|
149
155
|
current: isOpenControlled
|
|
150
156
|
} = React.useRef(openProp != null);
|
|
151
157
|
const [menuMinWidthState, setMenuMinWidthState] = React.useState();
|
|
152
|
-
const [openState, setOpenState] = React.useState(false);
|
|
153
158
|
const handleRef = useForkRef(ref, inputRefProp);
|
|
154
159
|
const handleDisplayRef = React.useCallback(node => {
|
|
155
160
|
displayRef.current = node;
|
|
@@ -164,7 +169,17 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
|
|
|
164
169
|
},
|
|
165
170
|
node: inputRef.current,
|
|
166
171
|
value
|
|
167
|
-
}), [value]);
|
|
172
|
+
}), [value]); // Resize menu on `defaultOpen` automatic toggle.
|
|
173
|
+
|
|
174
|
+
React.useEffect(() => {
|
|
175
|
+
if (defaultOpen && openState && displayNode && !isOpenControlled) {
|
|
176
|
+
setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
|
|
177
|
+
displayRef.current.focus();
|
|
178
|
+
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
179
|
+
|
|
180
|
+
}, [displayNode, autoWidth]); // `isOpenControlled` is ignored because the component should never switch between controlled and uncontrolled modes.
|
|
181
|
+
// `defaultOpen` and `openState` are ignored to avoid unnecessary callbacks.
|
|
182
|
+
|
|
168
183
|
React.useEffect(() => {
|
|
169
184
|
if (autoFocus) {
|
|
170
185
|
displayRef.current.focus();
|
|
@@ -300,7 +315,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
|
|
|
300
315
|
}
|
|
301
316
|
};
|
|
302
317
|
|
|
303
|
-
const open = displayNode !== null &&
|
|
318
|
+
const open = displayNode !== null && openState;
|
|
304
319
|
|
|
305
320
|
const handleBlur = event => {
|
|
306
321
|
// if open event.stopImmediatePropagation
|
|
@@ -559,6 +574,12 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
|
|
|
559
574
|
*/
|
|
560
575
|
className: PropTypes.string,
|
|
561
576
|
|
|
577
|
+
/**
|
|
578
|
+
* If `true`, the component is toggled on mount. Use when the component open state is not controlled.
|
|
579
|
+
* You can only use it when the `native` prop is `false` (default).
|
|
580
|
+
*/
|
|
581
|
+
defaultOpen: PropTypes.bool,
|
|
582
|
+
|
|
562
583
|
/**
|
|
563
584
|
* The default value. Use when the component is not controlled.
|
|
564
585
|
*/
|
package/Slider/Slider.d.ts
CHANGED
|
@@ -60,6 +60,7 @@ type SliderRailProps = NonNullable<SliderTypeMap['props']['componentsProps']>['r
|
|
|
60
60
|
type SliderTrackProps = NonNullable<SliderTypeMap['props']['componentsProps']>['track'];
|
|
61
61
|
type SliderThumbProps = NonNullable<SliderTypeMap['props']['componentsProps']>['thumb'];
|
|
62
62
|
type SliderValueLabelProps = NonNullable<SliderTypeMap['props']['componentsProps']>['valueLabel'];
|
|
63
|
+
type SliderInputProps = NonNullable<SliderTypeMap['props']['componentsProps']>['input'];
|
|
63
64
|
|
|
64
65
|
export const SliderRoot: React.FC<SliderRootProps>;
|
|
65
66
|
export const SliderMark: React.FC<SliderMarkProps>;
|
|
@@ -68,6 +69,7 @@ export const SliderRail: React.FC<SliderRailProps>;
|
|
|
68
69
|
export const SliderTrack: React.FC<SliderTrackProps>;
|
|
69
70
|
export const SliderThumb: React.FC<SliderThumbProps>;
|
|
70
71
|
export const SliderValueLabel: React.FC<SliderValueLabelProps>;
|
|
72
|
+
export const SliderInput: React.FC<SliderInputProps>;
|
|
71
73
|
|
|
72
74
|
/**
|
|
73
75
|
*
|
package/Slider/Slider.js
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
2
2
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
-
const _excluded = ["components", "componentsProps", "color", "size"];
|
|
3
|
+
const _excluded = ["component", "components", "componentsProps", "color", "size"];
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import clsx from 'clsx';
|
|
7
7
|
import { chainPropTypes } from '@mui/utils';
|
|
8
|
-
import { generateUtilityClasses
|
|
8
|
+
import { generateUtilityClasses } from '@mui/base';
|
|
9
9
|
import SliderUnstyled, { SliderValueLabelUnstyled, sliderUnstyledClasses, getSliderUtilityClass } from '@mui/base/SliderUnstyled';
|
|
10
10
|
import { alpha, lighten, darken } from '@mui/system';
|
|
11
11
|
import useThemeProps from '../styles/useThemeProps';
|
|
12
12
|
import styled, { slotShouldForwardProp } from '../styles/styled';
|
|
13
13
|
import useTheme from '../styles/useTheme';
|
|
14
|
+
import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
|
|
14
15
|
import capitalize from '../utils/capitalize';
|
|
15
16
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
17
|
export const sliderClasses = _extends({}, sliderUnstyledClasses, generateUtilityClasses('MuiSlider', ['colorPrimary', 'colorSecondary', 'thumbColorPrimary', 'thumbColorSecondary', 'sizeSmall', 'thumbSizeSmall']));
|
|
17
|
-
|
|
18
|
+
const SliderRoot = styled('span', {
|
|
18
19
|
name: 'MuiSlider',
|
|
19
20
|
slot: 'Root',
|
|
20
21
|
overridesResolver: (props, styles) => {
|
|
@@ -80,7 +81,21 @@ export const SliderRoot = styled('span', {
|
|
|
80
81
|
}
|
|
81
82
|
}
|
|
82
83
|
}));
|
|
83
|
-
|
|
84
|
+
process.env.NODE_ENV !== "production" ? SliderRoot.propTypes
|
|
85
|
+
/* remove-proptypes */
|
|
86
|
+
= {
|
|
87
|
+
// ----------------------------- Warning --------------------------------
|
|
88
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
89
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
90
|
+
// ----------------------------------------------------------------------
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* @ignore
|
|
94
|
+
*/
|
|
95
|
+
children: PropTypes.node
|
|
96
|
+
} : void 0;
|
|
97
|
+
export { SliderRoot };
|
|
98
|
+
const SliderRail = styled('span', {
|
|
84
99
|
name: 'MuiSlider',
|
|
85
100
|
slot: 'Rail',
|
|
86
101
|
overridesResolver: (props, styles) => styles.rail
|
|
@@ -105,7 +120,21 @@ export const SliderRail = styled('span', {
|
|
|
105
120
|
}, ownerState.track === 'inverted' && {
|
|
106
121
|
opacity: 1
|
|
107
122
|
}));
|
|
108
|
-
|
|
123
|
+
process.env.NODE_ENV !== "production" ? SliderRail.propTypes
|
|
124
|
+
/* remove-proptypes */
|
|
125
|
+
= {
|
|
126
|
+
// ----------------------------- Warning --------------------------------
|
|
127
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
128
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
129
|
+
// ----------------------------------------------------------------------
|
|
130
|
+
|
|
131
|
+
/**
|
|
132
|
+
* @ignore
|
|
133
|
+
*/
|
|
134
|
+
children: PropTypes.node
|
|
135
|
+
} : void 0;
|
|
136
|
+
export { SliderRail };
|
|
137
|
+
const SliderTrack = styled('span', {
|
|
109
138
|
name: 'MuiSlider',
|
|
110
139
|
slot: 'Track',
|
|
111
140
|
overridesResolver: (props, styles) => styles.track
|
|
@@ -141,7 +170,21 @@ export const SliderTrack = styled('span', {
|
|
|
141
170
|
borderColor: color
|
|
142
171
|
});
|
|
143
172
|
});
|
|
144
|
-
|
|
173
|
+
process.env.NODE_ENV !== "production" ? SliderTrack.propTypes
|
|
174
|
+
/* remove-proptypes */
|
|
175
|
+
= {
|
|
176
|
+
// ----------------------------- Warning --------------------------------
|
|
177
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
178
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
179
|
+
// ----------------------------------------------------------------------
|
|
180
|
+
|
|
181
|
+
/**
|
|
182
|
+
* @ignore
|
|
183
|
+
*/
|
|
184
|
+
children: PropTypes.node
|
|
185
|
+
} : void 0;
|
|
186
|
+
export { SliderTrack };
|
|
187
|
+
const SliderThumb = styled('span', {
|
|
145
188
|
name: 'MuiSlider',
|
|
146
189
|
slot: 'Thumb',
|
|
147
190
|
overridesResolver: (props, styles) => {
|
|
@@ -213,7 +256,21 @@ export const SliderThumb = styled('span', {
|
|
|
213
256
|
}
|
|
214
257
|
}
|
|
215
258
|
}));
|
|
216
|
-
|
|
259
|
+
process.env.NODE_ENV !== "production" ? SliderThumb.propTypes
|
|
260
|
+
/* remove-proptypes */
|
|
261
|
+
= {
|
|
262
|
+
// ----------------------------- Warning --------------------------------
|
|
263
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
264
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
265
|
+
// ----------------------------------------------------------------------
|
|
266
|
+
|
|
267
|
+
/**
|
|
268
|
+
* @ignore
|
|
269
|
+
*/
|
|
270
|
+
children: PropTypes.node
|
|
271
|
+
} : void 0;
|
|
272
|
+
export { SliderThumb };
|
|
273
|
+
const SliderValueLabel = styled(SliderValueLabelUnstyled, {
|
|
217
274
|
name: 'MuiSlider',
|
|
218
275
|
slot: 'ValueLabel',
|
|
219
276
|
overridesResolver: (props, styles) => styles.valueLabel
|
|
@@ -257,7 +314,21 @@ export const SliderValueLabel = styled(SliderValueLabelUnstyled, {
|
|
|
257
314
|
backgroundColor: 'inherit'
|
|
258
315
|
}
|
|
259
316
|
}));
|
|
260
|
-
|
|
317
|
+
process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes
|
|
318
|
+
/* remove-proptypes */
|
|
319
|
+
= {
|
|
320
|
+
// ----------------------------- Warning --------------------------------
|
|
321
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
322
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
323
|
+
// ----------------------------------------------------------------------
|
|
324
|
+
|
|
325
|
+
/**
|
|
326
|
+
* @ignore
|
|
327
|
+
*/
|
|
328
|
+
children: PropTypes.node
|
|
329
|
+
} : void 0;
|
|
330
|
+
export { SliderValueLabel };
|
|
331
|
+
const SliderMark = styled('span', {
|
|
261
332
|
name: 'MuiSlider',
|
|
262
333
|
slot: 'Mark',
|
|
263
334
|
shouldForwardProp: prop => slotShouldForwardProp(prop) && prop !== 'markActive',
|
|
@@ -282,7 +353,21 @@ export const SliderMark = styled('span', {
|
|
|
282
353
|
backgroundColor: theme.palette.background.paper,
|
|
283
354
|
opacity: 0.8
|
|
284
355
|
}));
|
|
285
|
-
|
|
356
|
+
process.env.NODE_ENV !== "production" ? SliderMark.propTypes
|
|
357
|
+
/* remove-proptypes */
|
|
358
|
+
= {
|
|
359
|
+
// ----------------------------- Warning --------------------------------
|
|
360
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
361
|
+
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
362
|
+
// ----------------------------------------------------------------------
|
|
363
|
+
|
|
364
|
+
/**
|
|
365
|
+
* @ignore
|
|
366
|
+
*/
|
|
367
|
+
children: PropTypes.node
|
|
368
|
+
} : void 0;
|
|
369
|
+
export { SliderMark };
|
|
370
|
+
const SliderMarkLabel = styled('span', {
|
|
286
371
|
name: 'MuiSlider',
|
|
287
372
|
slot: 'MarkLabel',
|
|
288
373
|
shouldForwardProp: prop => slotShouldForwardProp(prop) && prop !== 'markLabelActive',
|
|
@@ -310,7 +395,9 @@ export const SliderMarkLabel = styled('span', {
|
|
|
310
395
|
}, markLabelActive && {
|
|
311
396
|
color: theme.palette.text.primary
|
|
312
397
|
}));
|
|
313
|
-
|
|
398
|
+
process.env.NODE_ENV !== "production" ? SliderMarkLabel.propTypes
|
|
399
|
+
/* remove-proptypes */
|
|
400
|
+
= {
|
|
314
401
|
// ----------------------------- Warning --------------------------------
|
|
315
402
|
// | These PropTypes are generated from the TypeScript type definitions |
|
|
316
403
|
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
@@ -319,40 +406,9 @@ SliderRoot.propTypes = {
|
|
|
319
406
|
/**
|
|
320
407
|
* @ignore
|
|
321
408
|
*/
|
|
322
|
-
children: PropTypes.node
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
* @ignore
|
|
326
|
-
*/
|
|
327
|
-
ownerState: PropTypes.shape({
|
|
328
|
-
'aria-label': PropTypes.string,
|
|
329
|
-
'aria-labelledby': PropTypes.string,
|
|
330
|
-
'aria-valuetext': PropTypes.string,
|
|
331
|
-
classes: PropTypes.object,
|
|
332
|
-
color: PropTypes.oneOf(['primary', 'secondary']),
|
|
333
|
-
defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
|
|
334
|
-
disabled: PropTypes.bool,
|
|
335
|
-
getAriaLabel: PropTypes.func,
|
|
336
|
-
getAriaValueText: PropTypes.func,
|
|
337
|
-
isRtl: PropTypes.bool,
|
|
338
|
-
marks: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
|
|
339
|
-
label: PropTypes.node,
|
|
340
|
-
value: PropTypes.number.isRequired
|
|
341
|
-
})), PropTypes.bool]),
|
|
342
|
-
max: PropTypes.number,
|
|
343
|
-
min: PropTypes.number,
|
|
344
|
-
name: PropTypes.string,
|
|
345
|
-
onChange: PropTypes.func,
|
|
346
|
-
onChangeCommitted: PropTypes.func,
|
|
347
|
-
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
|
|
348
|
-
scale: PropTypes.func,
|
|
349
|
-
step: PropTypes.number,
|
|
350
|
-
track: PropTypes.oneOf(['inverted', 'normal', false]),
|
|
351
|
-
value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
|
|
352
|
-
valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']),
|
|
353
|
-
valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
|
|
354
|
-
})
|
|
355
|
-
};
|
|
409
|
+
children: PropTypes.node
|
|
410
|
+
} : void 0;
|
|
411
|
+
export { SliderMarkLabel };
|
|
356
412
|
|
|
357
413
|
const extendUtilityClasses = ownerState => {
|
|
358
414
|
const {
|
|
@@ -366,10 +422,6 @@ const extendUtilityClasses = ownerState => {
|
|
|
366
422
|
});
|
|
367
423
|
};
|
|
368
424
|
|
|
369
|
-
const shouldSpreadOwnerState = Component => {
|
|
370
|
-
return !Component || !isHostComponent(Component);
|
|
371
|
-
};
|
|
372
|
-
|
|
373
425
|
const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
|
|
374
426
|
var _componentsProps$root, _componentsProps$thum, _componentsProps$trac, _componentsProps$valu;
|
|
375
427
|
|
|
@@ -381,6 +433,8 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
|
|
|
381
433
|
const isRtl = theme.direction === 'rtl';
|
|
382
434
|
|
|
383
435
|
const {
|
|
436
|
+
// eslint-disable-next-line react/prop-types
|
|
437
|
+
component = 'span',
|
|
384
438
|
components = {},
|
|
385
439
|
componentsProps = {},
|
|
386
440
|
color = 'primary',
|
|
@@ -406,25 +460,26 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
|
|
|
406
460
|
MarkLabel: SliderMarkLabel
|
|
407
461
|
}, components),
|
|
408
462
|
componentsProps: _extends({}, componentsProps, {
|
|
409
|
-
root: _extends({}, componentsProps.root,
|
|
463
|
+
root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
|
|
464
|
+
as: component,
|
|
410
465
|
ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
|
|
411
466
|
color,
|
|
412
467
|
size
|
|
413
468
|
})
|
|
414
469
|
}),
|
|
415
|
-
thumb: _extends({}, componentsProps.thumb,
|
|
470
|
+
thumb: _extends({}, componentsProps.thumb, shouldSpreadAdditionalProps(components.Thumb) && {
|
|
416
471
|
ownerState: _extends({}, (_componentsProps$thum = componentsProps.thumb) == null ? void 0 : _componentsProps$thum.ownerState, {
|
|
417
472
|
color,
|
|
418
473
|
size
|
|
419
474
|
})
|
|
420
475
|
}),
|
|
421
|
-
track: _extends({}, componentsProps.track,
|
|
476
|
+
track: _extends({}, componentsProps.track, shouldSpreadAdditionalProps(components.Track) && {
|
|
422
477
|
ownerState: _extends({}, (_componentsProps$trac = componentsProps.track) == null ? void 0 : _componentsProps$trac.ownerState, {
|
|
423
478
|
color,
|
|
424
479
|
size
|
|
425
480
|
})
|
|
426
481
|
}),
|
|
427
|
-
valueLabel: _extends({}, componentsProps.valueLabel,
|
|
482
|
+
valueLabel: _extends({}, componentsProps.valueLabel, shouldSpreadAdditionalProps(components.ValueLabel) && {
|
|
428
483
|
ownerState: _extends({}, (_componentsProps$valu = componentsProps.valueLabel) == null ? void 0 : _componentsProps$valu.ownerState, {
|
|
429
484
|
color,
|
|
430
485
|
size
|
|
@@ -498,6 +553,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
|
|
|
498
553
|
* @default {}
|
|
499
554
|
*/
|
|
500
555
|
components: PropTypes.shape({
|
|
556
|
+
Input: PropTypes.elementType,
|
|
501
557
|
Mark: PropTypes.elementType,
|
|
502
558
|
MarkLabel: PropTypes.elementType,
|
|
503
559
|
Rail: PropTypes.elementType,
|
|
@@ -511,7 +567,24 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
|
|
|
511
567
|
* The props used for each slot inside the Slider.
|
|
512
568
|
* @default {}
|
|
513
569
|
*/
|
|
514
|
-
componentsProps: PropTypes.
|
|
570
|
+
componentsProps: PropTypes.shape({
|
|
571
|
+
input: PropTypes.object,
|
|
572
|
+
mark: PropTypes.object,
|
|
573
|
+
markLabel: PropTypes.object,
|
|
574
|
+
rail: PropTypes.object,
|
|
575
|
+
root: PropTypes.object,
|
|
576
|
+
thumb: PropTypes.object,
|
|
577
|
+
track: PropTypes.object,
|
|
578
|
+
valueLabel: PropTypes.shape({
|
|
579
|
+
className: PropTypes.string,
|
|
580
|
+
components: PropTypes.shape({
|
|
581
|
+
Root: PropTypes.elementType
|
|
582
|
+
}),
|
|
583
|
+
style: PropTypes.object,
|
|
584
|
+
value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
|
|
585
|
+
valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
|
|
586
|
+
})
|
|
587
|
+
}),
|
|
515
588
|
|
|
516
589
|
/**
|
|
517
590
|
* The default value. Use when the component is not controlled.
|
package/StepLabel/StepLabel.js
CHANGED
|
@@ -205,7 +205,9 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes
|
|
|
205
205
|
* The props used for each slot inside.
|
|
206
206
|
* @default {}
|
|
207
207
|
*/
|
|
208
|
-
componentsProps: PropTypes.
|
|
208
|
+
componentsProps: PropTypes.shape({
|
|
209
|
+
label: PropTypes.object
|
|
210
|
+
}),
|
|
209
211
|
|
|
210
212
|
/**
|
|
211
213
|
* If `true`, the step is marked as failed.
|
package/SvgIcon/SvgIcon.d.ts
CHANGED
|
@@ -48,6 +48,14 @@ export interface SvgIconTypeMap<P = {}, D extends React.ElementType = 'svg'> {
|
|
|
48
48
|
* Applies a color attribute to the SVG element.
|
|
49
49
|
*/
|
|
50
50
|
htmlColor?: string;
|
|
51
|
+
/**
|
|
52
|
+
* If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
|
|
53
|
+
* prop will be ignored.
|
|
54
|
+
* Useful when you want to reference a custom `component` and have `SvgIcon` pass that
|
|
55
|
+
* `component`'s viewBox to the root node.
|
|
56
|
+
* @default false
|
|
57
|
+
*/
|
|
58
|
+
inheritViewBox?: boolean;
|
|
51
59
|
/**
|
|
52
60
|
* The shape-rendering attribute. The behavior of the different options is described on the
|
|
53
61
|
* [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
|
package/SvgIcon/SvgIcon.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
const _excluded = ["children", "className", "color", "component", "fontSize", "htmlColor", "titleAccess", "viewBox"];
|
|
3
|
+
const _excluded = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import clsx from 'clsx';
|
|
@@ -37,7 +37,7 @@ const SvgIconRoot = styled('svg', {
|
|
|
37
37
|
theme,
|
|
38
38
|
ownerState
|
|
39
39
|
}) => {
|
|
40
|
-
var _theme$palette$ownerS, _theme$palette$ownerS2;
|
|
40
|
+
var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _theme$palette$ownerS, _theme$palette, _theme$palette$ownerS2, _theme$palette2, _theme$palette2$actio, _theme$palette3, _theme$palette3$actio;
|
|
41
41
|
|
|
42
42
|
return {
|
|
43
43
|
userSelect: 'none',
|
|
@@ -46,19 +46,19 @@ const SvgIconRoot = styled('svg', {
|
|
|
46
46
|
display: 'inline-block',
|
|
47
47
|
fill: 'currentColor',
|
|
48
48
|
flexShrink: 0,
|
|
49
|
-
transition: theme.transitions.create('fill', {
|
|
50
|
-
duration: theme.transitions.duration.shorter
|
|
49
|
+
transition: (_theme$transitions = theme.transitions) == null ? void 0 : (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
|
|
50
|
+
duration: (_theme$transitions2 = theme.transitions) == null ? void 0 : (_theme$transitions2$d = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2$d.shorter
|
|
51
51
|
}),
|
|
52
52
|
fontSize: {
|
|
53
53
|
inherit: 'inherit',
|
|
54
|
-
small: theme.typography.pxToRem(20),
|
|
55
|
-
medium: theme.typography.pxToRem(24),
|
|
56
|
-
large: theme.typography.pxToRem(35)
|
|
54
|
+
small: ((_theme$typography = theme.typography) == null ? void 0 : (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
|
|
55
|
+
medium: ((_theme$typography2 = theme.typography) == null ? void 0 : (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
|
|
56
|
+
large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875'
|
|
57
57
|
}[ownerState.fontSize],
|
|
58
58
|
// TODO v5 deprecate, v6 remove for sx
|
|
59
|
-
color: (_theme$palette$ownerS = (_theme$palette
|
|
60
|
-
action: theme.palette.action.active,
|
|
61
|
-
disabled: theme.palette.action.disabled,
|
|
59
|
+
color: (_theme$palette$ownerS = (_theme$palette = theme.palette) == null ? void 0 : (_theme$palette$ownerS2 = _theme$palette[ownerState.color]) == null ? void 0 : _theme$palette$ownerS2.main) != null ? _theme$palette$ownerS : {
|
|
60
|
+
action: (_theme$palette2 = theme.palette) == null ? void 0 : (_theme$palette2$actio = _theme$palette2.action) == null ? void 0 : _theme$palette2$actio.active,
|
|
61
|
+
disabled: (_theme$palette3 = theme.palette) == null ? void 0 : (_theme$palette3$actio = _theme$palette3.action) == null ? void 0 : _theme$palette3$actio.disabled,
|
|
62
62
|
inherit: undefined
|
|
63
63
|
}[ownerState.color]
|
|
64
64
|
};
|
|
@@ -76,6 +76,7 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
|
|
|
76
76
|
component = 'svg',
|
|
77
77
|
fontSize = 'medium',
|
|
78
78
|
htmlColor,
|
|
79
|
+
inheritViewBox = false,
|
|
79
80
|
titleAccess,
|
|
80
81
|
viewBox = '0 0 24 24'
|
|
81
82
|
} = props,
|
|
@@ -85,21 +86,27 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
|
|
|
85
86
|
color,
|
|
86
87
|
component,
|
|
87
88
|
fontSize,
|
|
89
|
+
inheritViewBox,
|
|
88
90
|
viewBox
|
|
89
91
|
});
|
|
90
92
|
|
|
93
|
+
const more = {};
|
|
94
|
+
|
|
95
|
+
if (!inheritViewBox) {
|
|
96
|
+
more.viewBox = viewBox;
|
|
97
|
+
}
|
|
98
|
+
|
|
91
99
|
const classes = useUtilityClasses(ownerState);
|
|
92
100
|
return /*#__PURE__*/_jsxs(SvgIconRoot, _extends({
|
|
93
101
|
as: component,
|
|
94
102
|
className: clsx(classes.root, className),
|
|
95
103
|
ownerState: ownerState,
|
|
96
104
|
focusable: "false",
|
|
97
|
-
viewBox: viewBox,
|
|
98
105
|
color: htmlColor,
|
|
99
106
|
"aria-hidden": titleAccess ? undefined : true,
|
|
100
107
|
role: titleAccess ? 'img' : undefined,
|
|
101
108
|
ref: ref
|
|
102
|
-
}, other, {
|
|
109
|
+
}, more, other, {
|
|
103
110
|
children: [children, titleAccess ? /*#__PURE__*/_jsx("title", {
|
|
104
111
|
children: titleAccess
|
|
105
112
|
}) : null]
|
|
@@ -156,6 +163,15 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes
|
|
|
156
163
|
*/
|
|
157
164
|
htmlColor: PropTypes.string,
|
|
158
165
|
|
|
166
|
+
/**
|
|
167
|
+
* If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
|
|
168
|
+
* prop will be ignored.
|
|
169
|
+
* Useful when you want to reference a custom `component` and have `SvgIcon` pass that
|
|
170
|
+
* `component`'s viewBox to the root node.
|
|
171
|
+
* @default false
|
|
172
|
+
*/
|
|
173
|
+
inheritViewBox: PropTypes.bool,
|
|
174
|
+
|
|
159
175
|
/**
|
|
160
176
|
* The shape-rendering attribute. The behavior of the different options is described on the
|
|
161
177
|
* [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
|
package/TextField/TextField.d.ts
CHANGED
|
@@ -83,6 +83,7 @@ export interface BaseTextFieldProps
|
|
|
83
83
|
id?: string;
|
|
84
84
|
/**
|
|
85
85
|
* Props applied to the [`InputLabel`](/api/input-label/) element.
|
|
86
|
+
* Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
|
|
86
87
|
*/
|
|
87
88
|
InputLabelProps?: Partial<InputLabelProps>;
|
|
88
89
|
/**
|
package/TextField/TextField.js
CHANGED
|
@@ -296,6 +296,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes
|
|
|
296
296
|
|
|
297
297
|
/**
|
|
298
298
|
* Props applied to the [`InputLabel`](/api/input-label/) element.
|
|
299
|
+
* Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
|
|
299
300
|
*/
|
|
300
301
|
InputLabelProps: PropTypes.object,
|
|
301
302
|
|
package/Tooltip/Tooltip.js
CHANGED
|
@@ -681,7 +681,12 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
|
|
|
681
681
|
* and `componentsProps.transition` prop values win over `TransitionProps` if both are applied.
|
|
682
682
|
* @default {}
|
|
683
683
|
*/
|
|
684
|
-
componentsProps: PropTypes.
|
|
684
|
+
componentsProps: PropTypes.shape({
|
|
685
|
+
arrow: PropTypes.object,
|
|
686
|
+
popper: PropTypes.object,
|
|
687
|
+
tooltip: PropTypes.object,
|
|
688
|
+
transition: PropTypes.object
|
|
689
|
+
}),
|
|
685
690
|
|
|
686
691
|
/**
|
|
687
692
|
* Set to `true` if the `title` acts as an accessible description.
|
package/index.js
CHANGED
|
@@ -316,7 +316,7 @@ var AutocompleteGroupUl = styled('ul', {
|
|
|
316
316
|
}));
|
|
317
317
|
export { createFilterOptions };
|
|
318
318
|
var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps, ref) {
|
|
319
|
-
var _componentsProps$clea;
|
|
319
|
+
var _componentsProps$clea, _componentsProps$pape;
|
|
320
320
|
|
|
321
321
|
var props = useThemeProps({
|
|
322
322
|
props: inProps,
|
|
@@ -596,10 +596,11 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
|
|
|
596
596
|
role: "presentation",
|
|
597
597
|
anchorEl: anchorEl,
|
|
598
598
|
open: true,
|
|
599
|
-
children: /*#__PURE__*/_jsxs(AutocompletePaper, {
|
|
600
|
-
as: PaperComponent,
|
|
601
|
-
className: classes.paper,
|
|
599
|
+
children: /*#__PURE__*/_jsxs(AutocompletePaper, _extends({
|
|
602
600
|
ownerState: ownerState,
|
|
601
|
+
as: PaperComponent
|
|
602
|
+
}, componentsProps.paper, {
|
|
603
|
+
className: clsx(classes.paper, (_componentsProps$pape = componentsProps.paper) == null ? void 0 : _componentsProps$pape.className),
|
|
603
604
|
children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
|
|
604
605
|
className: classes.loading,
|
|
605
606
|
ownerState: ownerState,
|
|
@@ -632,7 +633,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
|
|
|
632
633
|
return renderListOption(option, index);
|
|
633
634
|
})
|
|
634
635
|
})) : null]
|
|
635
|
-
})
|
|
636
|
+
}))
|
|
636
637
|
}) : null]
|
|
637
638
|
});
|
|
638
639
|
});
|
|
@@ -702,7 +703,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
|
|
|
702
703
|
* If `true`, the input's text is cleared on blur if no value is selected.
|
|
703
704
|
*
|
|
704
705
|
* Set to `true` if you want to help the user enter a new value.
|
|
705
|
-
* Set to `false` if you want to help the user resume
|
|
706
|
+
* Set to `false` if you want to help the user resume their search.
|
|
706
707
|
* @default !props.freeSolo
|
|
707
708
|
*/
|
|
708
709
|
clearOnBlur: PropTypes.bool,
|
|
@@ -733,7 +734,10 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
|
|
|
733
734
|
* The props used for each slot inside.
|
|
734
735
|
* @default {}
|
|
735
736
|
*/
|
|
736
|
-
componentsProps: PropTypes.
|
|
737
|
+
componentsProps: PropTypes.shape({
|
|
738
|
+
clearIndicator: PropTypes.object,
|
|
739
|
+
paper: PropTypes.object
|
|
740
|
+
}),
|
|
737
741
|
|
|
738
742
|
/**
|
|
739
743
|
* The default value. Use when the component is not controlled.
|