@mui/material 6.0.0-alpha.12 → 6.0.0-alpha.14
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/Alert/Alert.d.ts +12 -3
- package/ButtonBase/ButtonBase.js +4 -12
- package/CHANGELOG.md +91 -0
- package/Dialog/Dialog.js +2 -1
- package/Hidden/hiddenCssClasses.d.ts +3 -0
- package/Link/Link.js +4 -14
- package/Modal/Modal.js +27 -17
- package/PigmentContainer/PigmentContainer.d.ts +55 -0
- package/PigmentContainer/PigmentContainer.js +98 -0
- package/PigmentContainer/index.d.ts +3 -0
- package/PigmentContainer/index.js +3 -0
- package/PigmentContainer/package.json +6 -0
- package/PigmentGrid/PigmentGrid.d.ts +108 -0
- package/PigmentGrid/PigmentGrid.js +149 -0
- package/PigmentGrid/index.d.ts +3 -0
- package/PigmentGrid/index.js +3 -0
- package/PigmentGrid/package.json +6 -0
- package/PigmentHidden/PigmentHidden.d.ts +97 -0
- package/PigmentHidden/PigmentHidden.js +278 -0
- package/PigmentHidden/index.d.ts +2 -0
- package/PigmentHidden/index.js +2 -0
- package/PigmentHidden/package.json +6 -0
- package/PigmentStack/PigmentStack.d.ts +51 -0
- package/PigmentStack/PigmentStack.js +81 -0
- package/PigmentStack/index.d.ts +3 -0
- package/PigmentStack/index.js +3 -0
- package/PigmentStack/package.json +6 -0
- package/Rating/Rating.js +5 -12
- package/Tooltip/Tooltip.js +4 -14
- package/index.js +1 -1
- package/modern/ButtonBase/ButtonBase.js +4 -12
- package/modern/Dialog/Dialog.js +2 -1
- package/modern/Link/Link.js +4 -14
- package/modern/Modal/Modal.js +27 -17
- package/modern/PigmentContainer/PigmentContainer.js +98 -0
- package/modern/PigmentContainer/index.js +3 -0
- package/modern/PigmentGrid/PigmentGrid.js +149 -0
- package/modern/PigmentGrid/index.js +3 -0
- package/modern/PigmentHidden/PigmentHidden.js +278 -0
- package/modern/PigmentHidden/index.js +2 -0
- package/modern/PigmentStack/PigmentStack.js +81 -0
- package/modern/PigmentStack/index.js +3 -0
- package/modern/Rating/Rating.js +5 -12
- package/modern/Tooltip/Tooltip.js +4 -14
- package/modern/index.js +1 -1
- package/modern/utils/index.js +0 -1
- package/node/ButtonBase/ButtonBase.js +4 -12
- package/node/Dialog/Dialog.js +2 -1
- package/node/Link/Link.js +4 -14
- package/node/Modal/Modal.js +27 -18
- package/node/PigmentContainer/PigmentContainer.js +108 -0
- package/node/PigmentContainer/index.js +36 -0
- package/node/PigmentGrid/PigmentGrid.js +159 -0
- package/node/PigmentGrid/index.js +36 -0
- package/node/PigmentHidden/PigmentHidden.js +287 -0
- package/node/PigmentHidden/index.js +26 -0
- package/node/PigmentStack/PigmentStack.js +91 -0
- package/node/PigmentStack/index.js +36 -0
- package/node/Rating/Rating.js +4 -11
- package/node/Tooltip/Tooltip.js +4 -14
- package/node/index.js +1 -1
- package/node/utils/index.js +0 -7
- package/package.json +10 -6
- package/styles/responsiveFontSizes.d.ts +3 -4
- package/utils/index.d.ts +0 -1
- package/utils/index.js +0 -1
- package/modern/utils/useIsFocusVisible.js +0 -4
- package/node/utils/useIsFocusVisible.js +0 -10
- package/utils/useIsFocusVisible.d.ts +0 -3
- package/utils/useIsFocusVisible.js +0 -4
|
@@ -0,0 +1,287 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var React = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
var _clsx = _interopRequireDefault(require("clsx"));
|
|
12
|
+
var _Hidden = _interopRequireDefault(require("@pigment-css/react/Hidden"));
|
|
13
|
+
var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
|
|
14
|
+
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
|
|
15
|
+
var _HiddenJs = _interopRequireDefault(require("../Hidden/HiddenJs"));
|
|
16
|
+
var _hiddenCssClasses = require("../Hidden/hiddenCssClasses");
|
|
17
|
+
var _zeroStyled = require("../zero-styled");
|
|
18
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
19
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
20
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
21
|
+
// @ts-ignore
|
|
22
|
+
|
|
23
|
+
const useUtilityClasses = ownerState => {
|
|
24
|
+
const {
|
|
25
|
+
classes,
|
|
26
|
+
breakpoints
|
|
27
|
+
} = ownerState;
|
|
28
|
+
const slots = {
|
|
29
|
+
root: ['root', ...breakpoints.map(({
|
|
30
|
+
breakpoint,
|
|
31
|
+
dir
|
|
32
|
+
}) => {
|
|
33
|
+
return dir === 'only' ? `${dir}${(0, _capitalize.default)(breakpoint)}` : `${breakpoint}${(0, _capitalize.default)(dir)}`;
|
|
34
|
+
})]
|
|
35
|
+
};
|
|
36
|
+
return (0, _composeClasses.default)(slots, _hiddenCssClasses.getHiddenCssUtilityClass, classes);
|
|
37
|
+
};
|
|
38
|
+
function HiddenCss(props) {
|
|
39
|
+
const theme = (0, _zeroStyled.useTheme)();
|
|
40
|
+
const {
|
|
41
|
+
children,
|
|
42
|
+
className,
|
|
43
|
+
only,
|
|
44
|
+
...other
|
|
45
|
+
} = props;
|
|
46
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
47
|
+
const unknownProps = Object.keys(other).filter(propName => {
|
|
48
|
+
const isUndeclaredBreakpoint = !theme.breakpoints.keys.some(breakpoint => {
|
|
49
|
+
return `${breakpoint}Up` === propName || `${breakpoint}Down` === propName;
|
|
50
|
+
});
|
|
51
|
+
return !['classes', 'theme', 'isRtl', 'sx'].includes(propName) && isUndeclaredBreakpoint;
|
|
52
|
+
});
|
|
53
|
+
if (unknownProps.length > 0) {
|
|
54
|
+
console.error(`MUI: Unsupported props received by \`<Hidden implementation="css" />\`: ${unknownProps.join(', ')}. Did you forget to wrap this component in a ThemeProvider declaring these breakpoints?`);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
const breakpoints = [];
|
|
58
|
+
for (let i = 0; i < theme.breakpoints.keys.length; i += 1) {
|
|
59
|
+
const breakpoint = theme.breakpoints.keys[i];
|
|
60
|
+
const breakpointUp = other[`${breakpoint}Up`];
|
|
61
|
+
const breakpointDown = other[`${breakpoint}Down`];
|
|
62
|
+
if (breakpointUp) {
|
|
63
|
+
breakpoints.push({
|
|
64
|
+
breakpoint,
|
|
65
|
+
dir: 'up'
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
if (breakpointDown) {
|
|
69
|
+
breakpoints.push({
|
|
70
|
+
breakpoint,
|
|
71
|
+
dir: 'down'
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
if (only) {
|
|
76
|
+
const onlyBreakpoints = Array.isArray(only) ? only : [only];
|
|
77
|
+
onlyBreakpoints.forEach(breakpoint => {
|
|
78
|
+
breakpoints.push({
|
|
79
|
+
breakpoint,
|
|
80
|
+
dir: 'only'
|
|
81
|
+
});
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
const ownerState = {
|
|
85
|
+
...props,
|
|
86
|
+
classes: {},
|
|
87
|
+
breakpoints
|
|
88
|
+
};
|
|
89
|
+
const classes = useUtilityClasses(ownerState);
|
|
90
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Hidden.default, {
|
|
91
|
+
className: (0, _clsx.default)(classes.root, className),
|
|
92
|
+
...props
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
process.env.NODE_ENV !== "production" ? HiddenCss.propTypes /* remove-proptypes */ = {
|
|
96
|
+
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
97
|
+
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
98
|
+
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
99
|
+
// └─────────────────────────────────────────────────────────────────────┘
|
|
100
|
+
/**
|
|
101
|
+
* The content of the component.
|
|
102
|
+
*/
|
|
103
|
+
children: _propTypes.default.node,
|
|
104
|
+
className: _propTypes.default.string,
|
|
105
|
+
/**
|
|
106
|
+
* Specify which implementation to use. 'js' is the default, 'css' works better for
|
|
107
|
+
* server-side rendering.
|
|
108
|
+
* @default 'js'
|
|
109
|
+
*/
|
|
110
|
+
implementation: _propTypes.default.oneOf(['css', 'js']),
|
|
111
|
+
/**
|
|
112
|
+
* You can use this prop when choosing the `js` implementation with server-side rendering.
|
|
113
|
+
*
|
|
114
|
+
* As `window.innerWidth` is unavailable on the server,
|
|
115
|
+
* we default to rendering an empty component during the first mount.
|
|
116
|
+
* You might want to use a heuristic to approximate
|
|
117
|
+
* the screen width of the client browser screen width.
|
|
118
|
+
*
|
|
119
|
+
* For instance, you could be using the user-agent or the client-hints.
|
|
120
|
+
* https://caniuse.com/#search=client%20hint
|
|
121
|
+
*/
|
|
122
|
+
initialWidth: _propTypes.default.oneOf(['lg', 'md', 'sm', 'xl', 'xs']),
|
|
123
|
+
/**
|
|
124
|
+
* If `true`, component is hidden on screens below (but not including) this size.
|
|
125
|
+
* @default false
|
|
126
|
+
*/
|
|
127
|
+
lgDown: _propTypes.default.bool,
|
|
128
|
+
/**
|
|
129
|
+
* If `true`, component is hidden on screens this size and above.
|
|
130
|
+
* @default false
|
|
131
|
+
*/
|
|
132
|
+
lgUp: _propTypes.default.bool,
|
|
133
|
+
/**
|
|
134
|
+
* If `true`, component is hidden on screens below (but not including) this size.
|
|
135
|
+
* @default false
|
|
136
|
+
*/
|
|
137
|
+
mdDown: _propTypes.default.bool,
|
|
138
|
+
/**
|
|
139
|
+
* If `true`, component is hidden on screens this size and above.
|
|
140
|
+
* @default false
|
|
141
|
+
*/
|
|
142
|
+
mdUp: _propTypes.default.bool,
|
|
143
|
+
/**
|
|
144
|
+
* Hide the given breakpoint(s).
|
|
145
|
+
*/
|
|
146
|
+
only: _propTypes.default.oneOfType([_propTypes.default.oneOf(['lg', 'md', 'sm', 'xl', 'xs']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired)]),
|
|
147
|
+
/**
|
|
148
|
+
* If `true`, component is hidden on screens below (but not including) this size.
|
|
149
|
+
* @default false
|
|
150
|
+
*/
|
|
151
|
+
smDown: _propTypes.default.bool,
|
|
152
|
+
/**
|
|
153
|
+
* If `true`, component is hidden on screens this size and above.
|
|
154
|
+
* @default false
|
|
155
|
+
*/
|
|
156
|
+
smUp: _propTypes.default.bool,
|
|
157
|
+
/**
|
|
158
|
+
* If `true`, component is hidden on screens below (but not including) this size.
|
|
159
|
+
* @default false
|
|
160
|
+
*/
|
|
161
|
+
xlDown: _propTypes.default.bool,
|
|
162
|
+
/**
|
|
163
|
+
* If `true`, component is hidden on screens this size and above.
|
|
164
|
+
* @default false
|
|
165
|
+
*/
|
|
166
|
+
xlUp: _propTypes.default.bool,
|
|
167
|
+
/**
|
|
168
|
+
* If `true`, component is hidden on screens below (but not including) this size.
|
|
169
|
+
* @default false
|
|
170
|
+
*/
|
|
171
|
+
xsDown: _propTypes.default.bool,
|
|
172
|
+
/**
|
|
173
|
+
* If `true`, component is hidden on screens this size and above.
|
|
174
|
+
* @default false
|
|
175
|
+
*/
|
|
176
|
+
xsUp: _propTypes.default.bool
|
|
177
|
+
} : void 0;
|
|
178
|
+
/**
|
|
179
|
+
*
|
|
180
|
+
* Demos:
|
|
181
|
+
*
|
|
182
|
+
* - [Hidden](https://next.mui.com/material-ui/react-hidden/)
|
|
183
|
+
*
|
|
184
|
+
* API:
|
|
185
|
+
*
|
|
186
|
+
* - [PigmentHidden API](https://next.mui.com/material-ui/api/pigment-hidden/)
|
|
187
|
+
*/
|
|
188
|
+
function PigmentHidden({
|
|
189
|
+
implementation = 'js',
|
|
190
|
+
...props
|
|
191
|
+
}) {
|
|
192
|
+
if (implementation === 'js') {
|
|
193
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HiddenJs.default, {
|
|
194
|
+
...props
|
|
195
|
+
});
|
|
196
|
+
}
|
|
197
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(HiddenCss, {
|
|
198
|
+
...props
|
|
199
|
+
});
|
|
200
|
+
}
|
|
201
|
+
process.env.NODE_ENV !== "production" ? PigmentHidden.propTypes /* remove-proptypes */ = {
|
|
202
|
+
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
203
|
+
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
204
|
+
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
205
|
+
// └─────────────────────────────────────────────────────────────────────┘
|
|
206
|
+
/**
|
|
207
|
+
* The content of the component.
|
|
208
|
+
*/
|
|
209
|
+
children: _propTypes.default.node,
|
|
210
|
+
/**
|
|
211
|
+
* @ignore
|
|
212
|
+
*/
|
|
213
|
+
className: _propTypes.default.string,
|
|
214
|
+
/**
|
|
215
|
+
* Specify which implementation to use. 'js' is the default, 'css' works better for
|
|
216
|
+
* server-side rendering.
|
|
217
|
+
* @default 'js'
|
|
218
|
+
*/
|
|
219
|
+
implementation: _propTypes.default.oneOf(['css', 'js']),
|
|
220
|
+
/**
|
|
221
|
+
* You can use this prop when choosing the `js` implementation with server-side rendering.
|
|
222
|
+
*
|
|
223
|
+
* As `window.innerWidth` is unavailable on the server,
|
|
224
|
+
* we default to rendering an empty component during the first mount.
|
|
225
|
+
* You might want to use a heuristic to approximate
|
|
226
|
+
* the screen width of the client browser screen width.
|
|
227
|
+
*
|
|
228
|
+
* For instance, you could be using the user-agent or the client-hints.
|
|
229
|
+
* https://caniuse.com/#search=client%20hint
|
|
230
|
+
*/
|
|
231
|
+
initialWidth: _propTypes.default.oneOf(['lg', 'md', 'sm', 'xl', 'xs']),
|
|
232
|
+
/**
|
|
233
|
+
* If `true`, component is hidden on screens below (but not including) this size.
|
|
234
|
+
* @default false
|
|
235
|
+
*/
|
|
236
|
+
lgDown: _propTypes.default.bool,
|
|
237
|
+
/**
|
|
238
|
+
* If `true`, component is hidden on screens this size and above.
|
|
239
|
+
* @default false
|
|
240
|
+
*/
|
|
241
|
+
lgUp: _propTypes.default.bool,
|
|
242
|
+
/**
|
|
243
|
+
* If `true`, component is hidden on screens below (but not including) this size.
|
|
244
|
+
* @default false
|
|
245
|
+
*/
|
|
246
|
+
mdDown: _propTypes.default.bool,
|
|
247
|
+
/**
|
|
248
|
+
* If `true`, component is hidden on screens this size and above.
|
|
249
|
+
* @default false
|
|
250
|
+
*/
|
|
251
|
+
mdUp: _propTypes.default.bool,
|
|
252
|
+
/**
|
|
253
|
+
* Hide the given breakpoint(s).
|
|
254
|
+
*/
|
|
255
|
+
only: _propTypes.default.oneOfType([_propTypes.default.oneOf(['lg', 'md', 'sm', 'xl', 'xs']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired)]),
|
|
256
|
+
/**
|
|
257
|
+
* If `true`, component is hidden on screens below (but not including) this size.
|
|
258
|
+
* @default false
|
|
259
|
+
*/
|
|
260
|
+
smDown: _propTypes.default.bool,
|
|
261
|
+
/**
|
|
262
|
+
* If `true`, component is hidden on screens this size and above.
|
|
263
|
+
* @default false
|
|
264
|
+
*/
|
|
265
|
+
smUp: _propTypes.default.bool,
|
|
266
|
+
/**
|
|
267
|
+
* If `true`, component is hidden on screens below (but not including) this size.
|
|
268
|
+
* @default false
|
|
269
|
+
*/
|
|
270
|
+
xlDown: _propTypes.default.bool,
|
|
271
|
+
/**
|
|
272
|
+
* If `true`, component is hidden on screens this size and above.
|
|
273
|
+
* @default false
|
|
274
|
+
*/
|
|
275
|
+
xlUp: _propTypes.default.bool,
|
|
276
|
+
/**
|
|
277
|
+
* If `true`, component is hidden on screens below (but not including) this size.
|
|
278
|
+
* @default false
|
|
279
|
+
*/
|
|
280
|
+
xsDown: _propTypes.default.bool,
|
|
281
|
+
/**
|
|
282
|
+
* If `true`, component is hidden on screens this size and above.
|
|
283
|
+
* @default false
|
|
284
|
+
*/
|
|
285
|
+
xsUp: _propTypes.default.bool
|
|
286
|
+
} : void 0;
|
|
287
|
+
var _default = exports.default = PigmentHidden;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _exportNames = {};
|
|
7
|
+
Object.defineProperty(exports, "default", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () {
|
|
10
|
+
return _PigmentHidden.default;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
var _PigmentHidden = _interopRequireWildcard(require("./PigmentHidden"));
|
|
14
|
+
Object.keys(_PigmentHidden).forEach(function (key) {
|
|
15
|
+
if (key === "default" || key === "__esModule") return;
|
|
16
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
17
|
+
if (key in exports && exports[key] === _PigmentHidden[key]) return;
|
|
18
|
+
Object.defineProperty(exports, key, {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () {
|
|
21
|
+
return _PigmentHidden[key];
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
});
|
|
25
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
26
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var React = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
|
+
var _clsx = _interopRequireDefault(require("clsx"));
|
|
11
|
+
var _Stack = _interopRequireDefault(require("@pigment-css/react/Stack"));
|
|
12
|
+
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
|
|
13
|
+
var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
|
|
14
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
16
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
17
|
+
// @ts-ignore
|
|
18
|
+
|
|
19
|
+
const useUtilityClasses = () => {
|
|
20
|
+
const slots = {
|
|
21
|
+
root: ['root']
|
|
22
|
+
};
|
|
23
|
+
return (0, _composeClasses.default)(slots, slot => (0, _generateUtilityClass.default)('MuiStack', slot), {});
|
|
24
|
+
};
|
|
25
|
+
/**
|
|
26
|
+
*
|
|
27
|
+
* Demos:
|
|
28
|
+
*
|
|
29
|
+
* - [Stack](https://next.mui.com/material-ui/react-stack/)
|
|
30
|
+
*
|
|
31
|
+
* API:
|
|
32
|
+
*
|
|
33
|
+
* - [PigmentStack API](https://next.mui.com/material-ui/api/pigment-stack/)
|
|
34
|
+
*/
|
|
35
|
+
const PigmentStack = /*#__PURE__*/React.forwardRef(function PigmentStack({
|
|
36
|
+
className,
|
|
37
|
+
...props
|
|
38
|
+
}, ref) {
|
|
39
|
+
const classes = useUtilityClasses();
|
|
40
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Stack.default, {
|
|
41
|
+
ref: ref,
|
|
42
|
+
className: (0, _clsx.default)(classes.root, className),
|
|
43
|
+
...props
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
process.env.NODE_ENV !== "production" ? PigmentStack.propTypes /* remove-proptypes */ = {
|
|
47
|
+
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
48
|
+
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
49
|
+
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
50
|
+
// └─────────────────────────────────────────────────────────────────────┘
|
|
51
|
+
/**
|
|
52
|
+
* The content of the component.
|
|
53
|
+
*/
|
|
54
|
+
children: _propTypes.default.node,
|
|
55
|
+
/**
|
|
56
|
+
* @ignore
|
|
57
|
+
*/
|
|
58
|
+
className: _propTypes.default.string,
|
|
59
|
+
/**
|
|
60
|
+
* Defines the `flex-direction` style property.
|
|
61
|
+
* It is applied for all screen sizes.
|
|
62
|
+
* @default 'column'
|
|
63
|
+
*/
|
|
64
|
+
direction: _propTypes.default.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _propTypes.default.shape({
|
|
65
|
+
lg: _propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']),
|
|
66
|
+
md: _propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']),
|
|
67
|
+
sm: _propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']),
|
|
68
|
+
xl: _propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']),
|
|
69
|
+
xs: _propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])
|
|
70
|
+
})]),
|
|
71
|
+
/**
|
|
72
|
+
* Add an element between each child.
|
|
73
|
+
*/
|
|
74
|
+
divider: _propTypes.default.node,
|
|
75
|
+
/**
|
|
76
|
+
* Defines the space between immediate children.
|
|
77
|
+
* @default 0
|
|
78
|
+
*/
|
|
79
|
+
spacing: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.shape({
|
|
80
|
+
lg: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
81
|
+
md: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
82
|
+
sm: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
83
|
+
xl: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
84
|
+
xs: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
|
|
85
|
+
}), _propTypes.default.string]),
|
|
86
|
+
/**
|
|
87
|
+
* The system prop, which allows defining system overrides as well as additional CSS styles.
|
|
88
|
+
*/
|
|
89
|
+
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
|
|
90
|
+
} : void 0;
|
|
91
|
+
var _default = exports.default = PigmentStack;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
var _exportNames = {
|
|
8
|
+
stackClasses: true
|
|
9
|
+
};
|
|
10
|
+
Object.defineProperty(exports, "default", {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () {
|
|
13
|
+
return _PigmentStack.default;
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
Object.defineProperty(exports, "stackClasses", {
|
|
17
|
+
enumerable: true,
|
|
18
|
+
get: function () {
|
|
19
|
+
return _stackClasses.default;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
var _PigmentStack = _interopRequireWildcard(require("./PigmentStack"));
|
|
23
|
+
Object.keys(_PigmentStack).forEach(function (key) {
|
|
24
|
+
if (key === "default" || key === "__esModule") return;
|
|
25
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
26
|
+
if (key in exports && exports[key] === _PigmentStack[key]) return;
|
|
27
|
+
Object.defineProperty(exports, key, {
|
|
28
|
+
enumerable: true,
|
|
29
|
+
get: function () {
|
|
30
|
+
return _PigmentStack[key];
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
});
|
|
34
|
+
var _stackClasses = _interopRequireDefault(require("../Stack/stackClasses"));
|
|
35
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
36
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
package/node/Rating/Rating.js
CHANGED
|
@@ -14,6 +14,7 @@ var _visuallyHidden = _interopRequireDefault(require("@mui/utils/visuallyHidden"
|
|
|
14
14
|
var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
|
|
15
15
|
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
|
|
16
16
|
var _RtlProvider = require("@mui/system/RtlProvider");
|
|
17
|
+
var _isFocusVisible = _interopRequireDefault(require("@mui/utils/isFocusVisible"));
|
|
17
18
|
var _utils = require("../utils");
|
|
18
19
|
var _Star = _interopRequireDefault(require("../internal/svg-icons/Star"));
|
|
19
20
|
var _StarBorder = _interopRequireDefault(require("../internal/svg-icons/StarBorder"));
|
|
@@ -361,15 +362,9 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
|
|
|
361
362
|
if (focus !== -1) {
|
|
362
363
|
value = focus;
|
|
363
364
|
}
|
|
364
|
-
const {
|
|
365
|
-
isFocusVisibleRef,
|
|
366
|
-
onBlur: handleBlurVisible,
|
|
367
|
-
onFocus: handleFocusVisible,
|
|
368
|
-
ref: focusVisibleRef
|
|
369
|
-
} = (0, _utils.useIsFocusVisible)();
|
|
370
365
|
const [focusVisible, setFocusVisible] = React.useState(false);
|
|
371
366
|
const rootRef = React.useRef();
|
|
372
|
-
const handleRef = (0, _utils.useForkRef)(
|
|
367
|
+
const handleRef = (0, _utils.useForkRef)(rootRef, ref);
|
|
373
368
|
const handleMouseMove = event => {
|
|
374
369
|
if (onMouseMove) {
|
|
375
370
|
onMouseMove(event);
|
|
@@ -439,8 +434,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
|
|
|
439
434
|
}
|
|
440
435
|
};
|
|
441
436
|
const handleFocus = event => {
|
|
442
|
-
|
|
443
|
-
if (isFocusVisibleRef.current === true) {
|
|
437
|
+
if ((0, _isFocusVisible.default)(event.target)) {
|
|
444
438
|
setFocusVisible(true);
|
|
445
439
|
}
|
|
446
440
|
const newFocus = parseFloat(event.target.value);
|
|
@@ -453,8 +447,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
|
|
|
453
447
|
if (hover !== -1) {
|
|
454
448
|
return;
|
|
455
449
|
}
|
|
456
|
-
|
|
457
|
-
if (isFocusVisibleRef.current === false) {
|
|
450
|
+
if (!(0, _isFocusVisible.default)(event.target)) {
|
|
458
451
|
setFocusVisible(false);
|
|
459
452
|
}
|
|
460
453
|
const newFocus = -1;
|
package/node/Tooltip/Tooltip.js
CHANGED
|
@@ -16,6 +16,7 @@ var _utils = require("@mui/base/utils");
|
|
|
16
16
|
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
|
|
17
17
|
var _colorManipulator = require("@mui/system/colorManipulator");
|
|
18
18
|
var _RtlProvider = require("@mui/system/RtlProvider");
|
|
19
|
+
var _isFocusVisible = _interopRequireDefault(require("@mui/utils/isFocusVisible"));
|
|
19
20
|
var _zeroStyled = require("../zero-styled");
|
|
20
21
|
var _DefaultPropsProvider = require("../DefaultPropsProvider");
|
|
21
22
|
var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
|
|
@@ -24,7 +25,6 @@ var _Popper = _interopRequireDefault(require("../Popper"));
|
|
|
24
25
|
var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
|
|
25
26
|
var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
|
|
26
27
|
var _useId = _interopRequireDefault(require("../utils/useId"));
|
|
27
|
-
var _useIsFocusVisible = _interopRequireDefault(require("../utils/useIsFocusVisible"));
|
|
28
28
|
var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
|
|
29
29
|
var _tooltipClasses = _interopRequireWildcard(require("./tooltipClasses"));
|
|
30
30
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
@@ -454,18 +454,9 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
|
|
|
454
454
|
handleClose(event);
|
|
455
455
|
});
|
|
456
456
|
};
|
|
457
|
-
const {
|
|
458
|
-
isFocusVisibleRef,
|
|
459
|
-
onBlur: handleBlurVisible,
|
|
460
|
-
onFocus: handleFocusVisible,
|
|
461
|
-
ref: focusVisibleRef
|
|
462
|
-
} = (0, _useIsFocusVisible.default)();
|
|
463
|
-
// We don't necessarily care about the focusVisible state (which is safe to access via ref anyway).
|
|
464
|
-
// We just need to re-render the Tooltip if the focus-visible state changes.
|
|
465
457
|
const [, setChildIsFocusVisible] = React.useState(false);
|
|
466
458
|
const handleBlur = event => {
|
|
467
|
-
|
|
468
|
-
if (isFocusVisibleRef.current === false) {
|
|
459
|
+
if (!(0, _isFocusVisible.default)(event.target)) {
|
|
469
460
|
setChildIsFocusVisible(false);
|
|
470
461
|
handleMouseLeave(event);
|
|
471
462
|
}
|
|
@@ -477,8 +468,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
|
|
|
477
468
|
if (!childNode) {
|
|
478
469
|
setChildNode(event.currentTarget);
|
|
479
470
|
}
|
|
480
|
-
|
|
481
|
-
if (isFocusVisibleRef.current === true) {
|
|
471
|
+
if ((0, _isFocusVisible.default)(event.target)) {
|
|
482
472
|
setChildIsFocusVisible(true);
|
|
483
473
|
handleMouseOver(event);
|
|
484
474
|
}
|
|
@@ -530,7 +520,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
|
|
|
530
520
|
document.removeEventListener('keydown', handleKeyDown);
|
|
531
521
|
};
|
|
532
522
|
}, [handleClose, open]);
|
|
533
|
-
const handleRef = (0, _useForkRef.default)(children.ref,
|
|
523
|
+
const handleRef = (0, _useForkRef.default)(children.ref, setChildNode, ref);
|
|
534
524
|
|
|
535
525
|
// There is no point in displaying an empty tooltip.
|
|
536
526
|
// So we exclude all falsy values, except 0, which is valid.
|
package/node/index.js
CHANGED
package/node/utils/index.js
CHANGED
|
@@ -102,12 +102,6 @@ Object.defineProperty(exports, "useForkRef", {
|
|
|
102
102
|
return _useForkRef.default;
|
|
103
103
|
}
|
|
104
104
|
});
|
|
105
|
-
Object.defineProperty(exports, "useIsFocusVisible", {
|
|
106
|
-
enumerable: true,
|
|
107
|
-
get: function () {
|
|
108
|
-
return _useIsFocusVisible.default;
|
|
109
|
-
}
|
|
110
|
-
});
|
|
111
105
|
var _ClassNameGenerator = require("@mui/base/ClassNameGenerator");
|
|
112
106
|
var _capitalize = _interopRequireDefault(require("./capitalize"));
|
|
113
107
|
var _createChainedFunction = _interopRequireDefault(require("./createChainedFunction"));
|
|
@@ -125,7 +119,6 @@ var _unsupportedProp = _interopRequireDefault(require("./unsupportedProp"));
|
|
|
125
119
|
var _useControlled = _interopRequireDefault(require("./useControlled"));
|
|
126
120
|
var _useEventCallback = _interopRequireDefault(require("./useEventCallback"));
|
|
127
121
|
var _useForkRef = _interopRequireDefault(require("./useForkRef"));
|
|
128
|
-
var _useIsFocusVisible = _interopRequireDefault(require("./useIsFocusVisible"));
|
|
129
122
|
// TODO: remove this export once ClassNameGenerator is stable
|
|
130
123
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
131
124
|
const unstable_ClassNameGenerator = exports.unstable_ClassNameGenerator = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/material",
|
|
3
|
-
"version": "6.0.0-alpha.
|
|
3
|
+
"version": "6.0.0-alpha.14",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "MUI Team",
|
|
6
6
|
"description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
|
|
@@ -32,17 +32,18 @@
|
|
|
32
32
|
"clsx": "^2.1.1",
|
|
33
33
|
"csstype": "^3.1.3",
|
|
34
34
|
"prop-types": "^15.8.1",
|
|
35
|
-
"react-is": "^18.
|
|
35
|
+
"react-is": "^18.3.1",
|
|
36
36
|
"react-transition-group": "^4.4.5",
|
|
37
|
-
"@mui/core-downloads-tracker": "^6.0.0-alpha.
|
|
38
|
-
"@mui/base": "5.0.0-beta.50",
|
|
39
|
-
"@mui/system": "^6.0.0-alpha.12",
|
|
37
|
+
"@mui/core-downloads-tracker": "^6.0.0-alpha.14",
|
|
40
38
|
"@mui/types": "^7.2.14",
|
|
41
|
-
"@mui/utils": "
|
|
39
|
+
"@mui/utils": "6.0.0-alpha.14",
|
|
40
|
+
"@mui/system": "6.0.0-alpha.14",
|
|
41
|
+
"@mui/base": "5.0.0-beta.52"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"@emotion/react": "^11.5.0",
|
|
45
45
|
"@emotion/styled": "^11.3.0",
|
|
46
|
+
"@pigment-css/react": "^0.0.16",
|
|
46
47
|
"@types/react": "^17.0.0 || ^18.0.0",
|
|
47
48
|
"react": "^17.0.0 || ^18.0.0",
|
|
48
49
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
@@ -56,6 +57,9 @@
|
|
|
56
57
|
},
|
|
57
58
|
"@emotion/styled": {
|
|
58
59
|
"optional": true
|
|
60
|
+
},
|
|
61
|
+
"@pigment-css/react": {
|
|
62
|
+
"optional": true
|
|
59
63
|
}
|
|
60
64
|
},
|
|
61
65
|
"sideEffects": false,
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { Breakpoint } from '@mui/system';
|
|
2
2
|
import { Typography } from './createTypography';
|
|
3
|
-
import { Theme } from './createTheme';
|
|
4
3
|
|
|
5
4
|
export interface ResponsiveFontSizesOptions {
|
|
6
5
|
breakpoints?: Breakpoint[];
|
|
@@ -9,7 +8,7 @@ export interface ResponsiveFontSizesOptions {
|
|
|
9
8
|
variants?: Array<keyof Typography>;
|
|
10
9
|
}
|
|
11
10
|
|
|
12
|
-
export default function responsiveFontSizes(
|
|
13
|
-
theme:
|
|
11
|
+
export default function responsiveFontSizes<T extends { typography: Typography }>(
|
|
12
|
+
theme: T,
|
|
14
13
|
options?: ResponsiveFontSizesOptions,
|
|
15
|
-
):
|
|
14
|
+
): T;
|
package/utils/index.d.ts
CHANGED
|
@@ -14,5 +14,4 @@ export { default as unsupportedProp } from './unsupportedProp';
|
|
|
14
14
|
export { default as useControlled } from './useControlled';
|
|
15
15
|
export { default as useEventCallback } from './useEventCallback';
|
|
16
16
|
export { default as useForkRef } from './useForkRef';
|
|
17
|
-
export { default as useIsFocusVisible } from './useIsFocusVisible';
|
|
18
17
|
export { unstable_ClassNameGenerator } from '@mui/base/ClassNameGenerator';
|
package/utils/index.js
CHANGED
|
@@ -17,7 +17,6 @@ export { default as unsupportedProp } from './unsupportedProp';
|
|
|
17
17
|
export { default as useControlled } from './useControlled';
|
|
18
18
|
export { default as useEventCallback } from './useEventCallback';
|
|
19
19
|
export { default as useForkRef } from './useForkRef';
|
|
20
|
-
export { default as useIsFocusVisible } from './useIsFocusVisible';
|
|
21
20
|
// TODO: remove this export once ClassNameGenerator is stable
|
|
22
21
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
23
22
|
export const unstable_ClassNameGenerator = {
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
'use client';
|
|
3
|
-
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.default = void 0;
|
|
9
|
-
var _useIsFocusVisible = _interopRequireDefault(require("@mui/utils/useIsFocusVisible"));
|
|
10
|
-
var _default = exports.default = _useIsFocusVisible.default;
|