@mui/material 7.0.0-alpha.1 → 7.0.0-alpha.2
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/Accordion/Accordion.d.ts +12 -6
- package/Backdrop/Backdrop.d.ts +12 -6
- package/Button/Button.js +3 -3
- package/CHANGELOG.md +31 -0
- package/Dialog/Dialog.d.ts +2 -2
- package/IconButton/IconButton.js +3 -3
- package/InputBase/inputBaseClasses.d.ts +15 -6
- package/InputLabel/InputLabel.d.ts +2 -2
- package/InputLabel/InputLabel.js +3 -3
- package/Popover/Popover.d.ts +1 -1
- package/Snackbar/Snackbar.d.ts +2 -2
- package/SpeedDial/SpeedDial.d.ts +8 -6
- package/StepContent/StepContent.d.ts +2 -2
- package/Tooltip/Tooltip.d.ts +19 -3
- package/esm/Accordion/Accordion.d.ts +12 -6
- package/esm/Backdrop/Backdrop.d.ts +12 -6
- package/esm/Button/Button.js +3 -3
- package/esm/Dialog/Dialog.d.ts +2 -2
- package/esm/IconButton/IconButton.js +3 -3
- package/esm/InputBase/inputBaseClasses.d.ts +15 -6
- package/esm/InputLabel/InputLabel.d.ts +2 -2
- package/esm/InputLabel/InputLabel.js +3 -3
- package/esm/Popover/Popover.d.ts +1 -1
- package/esm/Snackbar/Snackbar.d.ts +2 -2
- package/esm/SpeedDial/SpeedDial.d.ts +8 -6
- package/esm/StepContent/StepContent.d.ts +2 -2
- package/esm/Tooltip/Tooltip.d.ts +19 -3
- package/esm/index.d.ts +0 -2
- package/esm/index.js +1 -3
- package/esm/useAutocomplete/useAutocomplete.js +0 -1
- package/esm/utils/mergeSlotProps.d.ts +1 -1
- package/esm/version/index.js +2 -2
- package/index.d.ts +0 -2
- package/index.js +1 -20
- package/modern/Accordion/Accordion.d.ts +12 -6
- package/modern/Backdrop/Backdrop.d.ts +12 -6
- package/modern/Button/Button.js +3 -3
- package/modern/Dialog/Dialog.d.ts +2 -2
- package/modern/IconButton/IconButton.js +3 -3
- package/modern/InputBase/inputBaseClasses.d.ts +15 -6
- package/modern/InputLabel/InputLabel.d.ts +2 -2
- package/modern/InputLabel/InputLabel.js +3 -3
- package/modern/Popover/Popover.d.ts +1 -1
- package/modern/Snackbar/Snackbar.d.ts +2 -2
- package/modern/SpeedDial/SpeedDial.d.ts +8 -6
- package/modern/StepContent/StepContent.d.ts +2 -2
- package/modern/Tooltip/Tooltip.d.ts +19 -3
- package/modern/index.d.ts +0 -2
- package/modern/index.js +1 -3
- package/modern/useAutocomplete/useAutocomplete.js +0 -1
- package/modern/utils/mergeSlotProps.d.ts +1 -1
- package/modern/version/index.js +2 -2
- package/package.json +9 -7
- package/tsconfig.build.tsbuildinfo +1 -1
- package/useAutocomplete/useAutocomplete.js +0 -1
- package/utils/mergeSlotProps.d.ts +1 -1
- package/version/index.js +2 -2
- package/Hidden/Hidden.d.ts +0 -96
- package/Hidden/Hidden.js +0 -145
- package/Hidden/HiddenCss.d.ts +0 -17
- package/Hidden/HiddenCss.js +0 -189
- package/Hidden/HiddenJs.d.ts +0 -18
- package/Hidden/HiddenJs.js +0 -127
- package/Hidden/hiddenCssClasses.d.ts +0 -3
- package/Hidden/hiddenCssClasses.js +0 -15
- package/Hidden/index.d.ts +0 -2
- package/Hidden/index.js +0 -13
- package/Hidden/withWidth.d.ts +0 -17
- package/Hidden/withWidth.js +0 -118
- package/PigmentHidden/PigmentHidden.d.ts +0 -100
- package/PigmentHidden/PigmentHidden.js +0 -287
- package/PigmentHidden/index.d.ts +0 -2
- package/PigmentHidden/index.js +0 -25
- package/esm/Hidden/Hidden.d.ts +0 -96
- package/esm/Hidden/Hidden.js +0 -140
- package/esm/Hidden/HiddenCss.d.ts +0 -17
- package/esm/Hidden/HiddenCss.js +0 -182
- package/esm/Hidden/HiddenJs.d.ts +0 -18
- package/esm/Hidden/HiddenJs.js +0 -121
- package/esm/Hidden/hiddenCssClasses.d.ts +0 -3
- package/esm/Hidden/hiddenCssClasses.js +0 -7
- package/esm/Hidden/index.d.ts +0 -2
- package/esm/Hidden/index.js +0 -1
- package/esm/Hidden/withWidth.d.ts +0 -17
- package/esm/Hidden/withWidth.js +0 -109
- package/esm/PigmentHidden/PigmentHidden.d.ts +0 -100
- package/esm/PigmentHidden/PigmentHidden.js +0 -279
- package/esm/PigmentHidden/index.d.ts +0 -2
- package/esm/PigmentHidden/index.js +0 -2
- package/modern/Hidden/Hidden.d.ts +0 -96
- package/modern/Hidden/Hidden.js +0 -140
- package/modern/Hidden/HiddenCss.d.ts +0 -17
- package/modern/Hidden/HiddenCss.js +0 -182
- package/modern/Hidden/HiddenJs.d.ts +0 -18
- package/modern/Hidden/HiddenJs.js +0 -121
- package/modern/Hidden/hiddenCssClasses.d.ts +0 -3
- package/modern/Hidden/hiddenCssClasses.js +0 -7
- package/modern/Hidden/index.d.ts +0 -2
- package/modern/Hidden/index.js +0 -1
- package/modern/Hidden/withWidth.d.ts +0 -17
- package/modern/Hidden/withWidth.js +0 -109
- package/modern/PigmentHidden/PigmentHidden.d.ts +0 -100
- package/modern/PigmentHidden/PigmentHidden.js +0 -279
- package/modern/PigmentHidden/index.d.ts +0 -2
- package/modern/PigmentHidden/index.js +0 -2
|
@@ -1,279 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import PropTypes from 'prop-types';
|
|
5
|
-
import clsx from 'clsx';
|
|
6
|
-
// @ts-ignore
|
|
7
|
-
import Hidden from '@mui/material-pigment-css/Hidden';
|
|
8
|
-
import capitalize from '@mui/utils/capitalize';
|
|
9
|
-
import composeClasses from '@mui/utils/composeClasses';
|
|
10
|
-
import HiddenJs from "../Hidden/HiddenJs.js";
|
|
11
|
-
import { getHiddenCssUtilityClass } from "../Hidden/hiddenCssClasses.js";
|
|
12
|
-
import { useTheme } from "../zero-styled/index.js";
|
|
13
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
-
const useUtilityClasses = ownerState => {
|
|
15
|
-
const {
|
|
16
|
-
classes,
|
|
17
|
-
breakpoints
|
|
18
|
-
} = ownerState;
|
|
19
|
-
const slots = {
|
|
20
|
-
root: ['root', ...breakpoints.map(({
|
|
21
|
-
breakpoint,
|
|
22
|
-
dir
|
|
23
|
-
}) => {
|
|
24
|
-
return dir === 'only' ? `${dir}${capitalize(breakpoint)}` : `${breakpoint}${capitalize(dir)}`;
|
|
25
|
-
})]
|
|
26
|
-
};
|
|
27
|
-
return composeClasses(slots, getHiddenCssUtilityClass, classes);
|
|
28
|
-
};
|
|
29
|
-
function HiddenCss(props) {
|
|
30
|
-
const theme = useTheme();
|
|
31
|
-
const {
|
|
32
|
-
children,
|
|
33
|
-
className,
|
|
34
|
-
only,
|
|
35
|
-
...other
|
|
36
|
-
} = props;
|
|
37
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
38
|
-
const unknownProps = Object.keys(other).filter(propName => {
|
|
39
|
-
const isUndeclaredBreakpoint = !theme.breakpoints.keys.some(breakpoint => {
|
|
40
|
-
return `${breakpoint}Up` === propName || `${breakpoint}Down` === propName;
|
|
41
|
-
});
|
|
42
|
-
return !['classes', 'theme', 'isRtl', 'sx'].includes(propName) && isUndeclaredBreakpoint;
|
|
43
|
-
});
|
|
44
|
-
if (unknownProps.length > 0) {
|
|
45
|
-
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?`);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
const breakpoints = [];
|
|
49
|
-
for (let i = 0; i < theme.breakpoints.keys.length; i += 1) {
|
|
50
|
-
const breakpoint = theme.breakpoints.keys[i];
|
|
51
|
-
const breakpointUp = other[`${breakpoint}Up`];
|
|
52
|
-
const breakpointDown = other[`${breakpoint}Down`];
|
|
53
|
-
if (breakpointUp) {
|
|
54
|
-
breakpoints.push({
|
|
55
|
-
breakpoint,
|
|
56
|
-
dir: 'up'
|
|
57
|
-
});
|
|
58
|
-
}
|
|
59
|
-
if (breakpointDown) {
|
|
60
|
-
breakpoints.push({
|
|
61
|
-
breakpoint,
|
|
62
|
-
dir: 'down'
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
if (only) {
|
|
67
|
-
const onlyBreakpoints = Array.isArray(only) ? only : [only];
|
|
68
|
-
onlyBreakpoints.forEach(breakpoint => {
|
|
69
|
-
breakpoints.push({
|
|
70
|
-
breakpoint,
|
|
71
|
-
dir: 'only'
|
|
72
|
-
});
|
|
73
|
-
});
|
|
74
|
-
}
|
|
75
|
-
const ownerState = {
|
|
76
|
-
...props,
|
|
77
|
-
classes: {},
|
|
78
|
-
breakpoints
|
|
79
|
-
};
|
|
80
|
-
const classes = useUtilityClasses(ownerState);
|
|
81
|
-
return /*#__PURE__*/_jsx(Hidden, {
|
|
82
|
-
className: clsx(classes.root, className),
|
|
83
|
-
...props
|
|
84
|
-
});
|
|
85
|
-
}
|
|
86
|
-
process.env.NODE_ENV !== "production" ? HiddenCss.propTypes /* remove-proptypes */ = {
|
|
87
|
-
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
88
|
-
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
89
|
-
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
90
|
-
// └─────────────────────────────────────────────────────────────────────┘
|
|
91
|
-
/**
|
|
92
|
-
* The content of the component.
|
|
93
|
-
*/
|
|
94
|
-
children: PropTypes.node,
|
|
95
|
-
className: PropTypes.string,
|
|
96
|
-
/**
|
|
97
|
-
* Specify which implementation to use. 'js' is the default, 'css' works better for
|
|
98
|
-
* server-side rendering.
|
|
99
|
-
* @default 'js'
|
|
100
|
-
*/
|
|
101
|
-
implementation: PropTypes.oneOf(['css', 'js']),
|
|
102
|
-
/**
|
|
103
|
-
* You can use this prop when choosing the `js` implementation with server-side rendering.
|
|
104
|
-
*
|
|
105
|
-
* As `window.innerWidth` is unavailable on the server,
|
|
106
|
-
* we default to rendering an empty component during the first mount.
|
|
107
|
-
* You might want to use a heuristic to approximate
|
|
108
|
-
* the screen width of the client browser screen width.
|
|
109
|
-
*
|
|
110
|
-
* For instance, you could be using the user-agent or the client-hints.
|
|
111
|
-
* https://caniuse.com/#search=client%20hint
|
|
112
|
-
*/
|
|
113
|
-
initialWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']),
|
|
114
|
-
/**
|
|
115
|
-
* If `true`, component is hidden on screens below (but not including) this size.
|
|
116
|
-
* @default false
|
|
117
|
-
*/
|
|
118
|
-
lgDown: PropTypes.bool,
|
|
119
|
-
/**
|
|
120
|
-
* If `true`, component is hidden on screens this size and above.
|
|
121
|
-
* @default false
|
|
122
|
-
*/
|
|
123
|
-
lgUp: PropTypes.bool,
|
|
124
|
-
/**
|
|
125
|
-
* If `true`, component is hidden on screens below (but not including) this size.
|
|
126
|
-
* @default false
|
|
127
|
-
*/
|
|
128
|
-
mdDown: PropTypes.bool,
|
|
129
|
-
/**
|
|
130
|
-
* If `true`, component is hidden on screens this size and above.
|
|
131
|
-
* @default false
|
|
132
|
-
*/
|
|
133
|
-
mdUp: PropTypes.bool,
|
|
134
|
-
/**
|
|
135
|
-
* Hide the given breakpoint(s).
|
|
136
|
-
*/
|
|
137
|
-
only: PropTypes.oneOfType([PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']), PropTypes.arrayOf(PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired)]),
|
|
138
|
-
/**
|
|
139
|
-
* If `true`, component is hidden on screens below (but not including) this size.
|
|
140
|
-
* @default false
|
|
141
|
-
*/
|
|
142
|
-
smDown: PropTypes.bool,
|
|
143
|
-
/**
|
|
144
|
-
* If `true`, component is hidden on screens this size and above.
|
|
145
|
-
* @default false
|
|
146
|
-
*/
|
|
147
|
-
smUp: PropTypes.bool,
|
|
148
|
-
/**
|
|
149
|
-
* If `true`, component is hidden on screens below (but not including) this size.
|
|
150
|
-
* @default false
|
|
151
|
-
*/
|
|
152
|
-
xlDown: PropTypes.bool,
|
|
153
|
-
/**
|
|
154
|
-
* If `true`, component is hidden on screens this size and above.
|
|
155
|
-
* @default false
|
|
156
|
-
*/
|
|
157
|
-
xlUp: PropTypes.bool,
|
|
158
|
-
/**
|
|
159
|
-
* If `true`, component is hidden on screens below (but not including) this size.
|
|
160
|
-
* @default false
|
|
161
|
-
*/
|
|
162
|
-
xsDown: PropTypes.bool,
|
|
163
|
-
/**
|
|
164
|
-
* If `true`, component is hidden on screens this size and above.
|
|
165
|
-
* @default false
|
|
166
|
-
*/
|
|
167
|
-
xsUp: PropTypes.bool
|
|
168
|
-
} : void 0;
|
|
169
|
-
|
|
170
|
-
/**
|
|
171
|
-
*
|
|
172
|
-
* Demos:
|
|
173
|
-
*
|
|
174
|
-
* - [Hidden](https://next.mui.com/material-ui/react-hidden/)
|
|
175
|
-
*
|
|
176
|
-
* API:
|
|
177
|
-
*
|
|
178
|
-
* - [PigmentHidden API](https://next.mui.com/material-ui/api/pigment-hidden/)
|
|
179
|
-
*/
|
|
180
|
-
function PigmentHidden({
|
|
181
|
-
implementation = 'js',
|
|
182
|
-
...props
|
|
183
|
-
}) {
|
|
184
|
-
if (implementation === 'js') {
|
|
185
|
-
return /*#__PURE__*/_jsx(HiddenJs, {
|
|
186
|
-
...props
|
|
187
|
-
});
|
|
188
|
-
}
|
|
189
|
-
return /*#__PURE__*/_jsx(HiddenCss, {
|
|
190
|
-
...props
|
|
191
|
-
});
|
|
192
|
-
}
|
|
193
|
-
process.env.NODE_ENV !== "production" ? PigmentHidden.propTypes /* remove-proptypes */ = {
|
|
194
|
-
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
195
|
-
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
196
|
-
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
197
|
-
// └─────────────────────────────────────────────────────────────────────┘
|
|
198
|
-
/**
|
|
199
|
-
* The content of the component.
|
|
200
|
-
*/
|
|
201
|
-
children: PropTypes.node,
|
|
202
|
-
/**
|
|
203
|
-
* @ignore
|
|
204
|
-
*/
|
|
205
|
-
className: PropTypes.string,
|
|
206
|
-
/**
|
|
207
|
-
* Specify which implementation to use. 'js' is the default, 'css' works better for
|
|
208
|
-
* server-side rendering.
|
|
209
|
-
* @default 'js'
|
|
210
|
-
*/
|
|
211
|
-
implementation: PropTypes.oneOf(['css', 'js']),
|
|
212
|
-
/**
|
|
213
|
-
* You can use this prop when choosing the `js` implementation with server-side rendering.
|
|
214
|
-
*
|
|
215
|
-
* As `window.innerWidth` is unavailable on the server,
|
|
216
|
-
* we default to rendering an empty component during the first mount.
|
|
217
|
-
* You might want to use a heuristic to approximate
|
|
218
|
-
* the screen width of the client browser screen width.
|
|
219
|
-
*
|
|
220
|
-
* For instance, you could be using the user-agent or the client-hints.
|
|
221
|
-
* https://caniuse.com/#search=client%20hint
|
|
222
|
-
*/
|
|
223
|
-
initialWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']),
|
|
224
|
-
/**
|
|
225
|
-
* If `true`, component is hidden on screens below (but not including) this size.
|
|
226
|
-
* @default false
|
|
227
|
-
*/
|
|
228
|
-
lgDown: PropTypes.bool,
|
|
229
|
-
/**
|
|
230
|
-
* If `true`, component is hidden on screens this size and above.
|
|
231
|
-
* @default false
|
|
232
|
-
*/
|
|
233
|
-
lgUp: PropTypes.bool,
|
|
234
|
-
/**
|
|
235
|
-
* If `true`, component is hidden on screens below (but not including) this size.
|
|
236
|
-
* @default false
|
|
237
|
-
*/
|
|
238
|
-
mdDown: PropTypes.bool,
|
|
239
|
-
/**
|
|
240
|
-
* If `true`, component is hidden on screens this size and above.
|
|
241
|
-
* @default false
|
|
242
|
-
*/
|
|
243
|
-
mdUp: PropTypes.bool,
|
|
244
|
-
/**
|
|
245
|
-
* Hide the given breakpoint(s).
|
|
246
|
-
*/
|
|
247
|
-
only: PropTypes.oneOfType([PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']), PropTypes.arrayOf(PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired)]),
|
|
248
|
-
/**
|
|
249
|
-
* If `true`, component is hidden on screens below (but not including) this size.
|
|
250
|
-
* @default false
|
|
251
|
-
*/
|
|
252
|
-
smDown: PropTypes.bool,
|
|
253
|
-
/**
|
|
254
|
-
* If `true`, component is hidden on screens this size and above.
|
|
255
|
-
* @default false
|
|
256
|
-
*/
|
|
257
|
-
smUp: PropTypes.bool,
|
|
258
|
-
/**
|
|
259
|
-
* If `true`, component is hidden on screens below (but not including) this size.
|
|
260
|
-
* @default false
|
|
261
|
-
*/
|
|
262
|
-
xlDown: PropTypes.bool,
|
|
263
|
-
/**
|
|
264
|
-
* If `true`, component is hidden on screens this size and above.
|
|
265
|
-
* @default false
|
|
266
|
-
*/
|
|
267
|
-
xlUp: PropTypes.bool,
|
|
268
|
-
/**
|
|
269
|
-
* If `true`, component is hidden on screens below (but not including) this size.
|
|
270
|
-
* @default false
|
|
271
|
-
*/
|
|
272
|
-
xsDown: PropTypes.bool,
|
|
273
|
-
/**
|
|
274
|
-
* If `true`, component is hidden on screens this size and above.
|
|
275
|
-
* @default false
|
|
276
|
-
*/
|
|
277
|
-
xsUp: PropTypes.bool
|
|
278
|
-
} : void 0;
|
|
279
|
-
export default PigmentHidden;
|