@mui/lab 6.0.0-alpha.5 → 6.0.0-alpha.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +48 -0
  2. package/LoadingButton/LoadingButton.js +121 -50
  3. package/index.js +1 -1
  4. package/modern/LoadingButton/LoadingButton.js +121 -50
  5. package/modern/index.js +1 -1
  6. package/modern/zero-styled/index.js +7 -0
  7. package/node/LoadingButton/LoadingButton.js +124 -53
  8. package/node/index.js +1 -1
  9. package/node/zero-styled/index.js +17 -0
  10. package/package.json +4 -4
  11. package/zero-styled/index.d.ts +3 -0
  12. package/zero-styled/index.js +7 -0
  13. package/zero-styled/package.json +6 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,53 @@
1
1
  # [Versions](https://mui.com/versions/)
2
2
 
3
+ ## v6.0.0-alpha.6
4
+
5
+ <!-- generated comparing v6.0.0-alpha.5..next -->
6
+
7
+ _May 8, 2024_
8
+
9
+ A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
10
+
11
+ ### `@mui/material@6.0.0-alpha.6`
12
+
13
+ - [Chip] Add colorDefault class to chipClasses (#42067) @sai6855
14
+ - Migrate components to support CSS extraction (#42001) @siriwatknp
15
+ - [SpeedDial] Deprecate TransitionComponent (#40698) @harry-whorlow
16
+
17
+ ### `@mui/codemod@6.0.0-alpha.6`
18
+
19
+ - Add `theme-v6` migration (#42056) @siriwatknp
20
+
21
+ ### `@mui/icons-material@6.0.0-alpha.6`
22
+
23
+ - Add the Emergency icon (#42080) @danilo-leal
24
+
25
+ ### Docs
26
+
27
+ - [autocomplete] Fix duplicate autocomplete id (#42086) @oliviertassinari
28
+ - Fix SEO redirection issues @oliviertassinari
29
+ - [material-ui] Fix broken link (#42142) @aarongarciah
30
+ - [material-ui][docs] Fix link on the Sync page (#42088) @danilo-leal
31
+
32
+ ### Core
33
+
34
+ - [blog] Shorten title to fit @oliviertassinari
35
+ - [blog] Update Sync post OG image (#42114) @danilo-leal
36
+ - [blog] A few tweaks in introducing-sync-plugin (#42092) @oliviertassinari
37
+ - [code-infra] Add canary release scripts (#41949) @michaldudak
38
+ - [code-infra] Move ComponentLinkHeader to @mui/docs (#42061) @Janpot
39
+ - [code-infra] Bump node image used by CI in docker (#42079) @LukasTy
40
+ - [core] Restrict import path with ESLint (#41970) @oliviertassinari
41
+ - [docs-infra] Add design and formatting improvements (#42063) @danilo-leal
42
+ - [docs-infra] Fix HTML structure violations (#42085) @oliviertassinari
43
+ - [website] Componentize a few Careers page sections (#42102) @danilo-leal
44
+ - [website] Refine the InfoCard design (#42116) @danilo-leal
45
+ - [website] Fix home page slider's track position (#42141) @aarongarciah
46
+ - [website] Closing the survey @oliviertassinari
47
+ - [website] Remove Survey banner from website and Core docs (#42104) @joserodolfofreitas
48
+
49
+ All contributors of this release in alphabetical order: @aarongarciah, @danilo-leal, @harry-whorlow, @Janpot, @joserodolfofreitas, @LukasTy, @michaldudak, @oliviertassinari, @sai6855, @siriwatknp
50
+
3
51
  ## v6.0.0-alpha.5
4
52
 
5
53
  <!-- generated comparing v6.0.0-alpha.4..next -->
package/LoadingButton/LoadingButton.js CHANGED
@@ -8,13 +8,14 @@ import PropTypes from 'prop-types';
8
8
  import { chainPropTypes } from '@mui/utils';
9
9
  import { capitalize, unstable_useId as useId } from '@mui/material/utils';
10
10
  import { unstable_composeClasses as composeClasses } from '@mui/base';
11
- import { styled, useThemeProps } from '@mui/material/styles';
12
11
  import Button from '@mui/material/Button';
13
12
  import { ButtonGroupContext } from '@mui/material/ButtonGroup';
14
13
  import CircularProgress from '@mui/material/CircularProgress';
15
14
  import resolveProps from '@mui/utils/resolveProps';
15
+ import { styled, createUseThemeProps } from '../zero-styled';
16
16
  import loadingButtonClasses, { getLoadingButtonUtilityClass } from './loadingButtonClasses';
17
17
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
18
+ const useThemeProps = createUseThemeProps('MuiLoadingButton');
18
19
  const useUtilityClasses = ownerState => {
19
20
  const {
20
21
  loading,
@@ -31,7 +32,7 @@ const useUtilityClasses = ownerState => {
31
32
  return _extends({}, classes, composedClasses);
32
33
  };
33
34
 
34
- // TODO use `import { rootShouldForwardProp } from '../styles/styled';` once move to core
35
+ // TODO use `import rootShouldForwardProp from '../styles/rootShouldForwardProp';` once move to core
35
36
  const rootShouldForwardProp = prop => prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as' && prop !== 'classes';
36
37
  const LoadingButtonRoot = styled(Button, {
37
38
  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -45,38 +46,53 @@ const LoadingButtonRoot = styled(Button, {
45
46
  }];
46
47
  }
47
48
  })(({
48
- ownerState,
49
49
  theme
50
- }) => _extends({
50
+ }) => ({
51
51
  [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
52
52
  transition: theme.transitions.create(['opacity'], {
53
53
  duration: theme.transitions.duration.short
54
54
  }),
55
55
  opacity: 0
56
- }
57
- }, ownerState.loadingPosition === 'center' && {
58
- transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
59
- duration: theme.transitions.duration.short
60
- }),
61
- [`&.${loadingButtonClasses.loading}`]: {
62
- color: 'transparent'
63
- }
64
- }, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
65
- [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
66
- transition: theme.transitions.create(['opacity'], {
67
- duration: theme.transitions.duration.short
68
- }),
69
- opacity: 0,
70
- marginRight: -8
71
- }
72
- }, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
73
- [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
74
- transition: theme.transitions.create(['opacity'], {
75
- duration: theme.transitions.duration.short
76
- }),
77
- opacity: 0,
78
- marginLeft: -8
79
- }
56
+ },
57
+ variants: [{
58
+ props: {
59
+ loadingPosition: 'center'
60
+ },
61
+ style: {
62
+ transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
63
+ duration: theme.transitions.duration.short
64
+ }),
65
+ [`&.${loadingButtonClasses.loading}`]: {
66
+ color: 'transparent'
67
+ }
68
+ }
69
+ }, {
70
+ props: ({
71
+ ownerState
72
+ }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth,
73
+ style: {
74
+ [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
75
+ transition: theme.transitions.create(['opacity'], {
76
+ duration: theme.transitions.duration.short
77
+ }),
78
+ opacity: 0,
79
+ marginRight: -8
80
+ }
81
+ }
82
+ }, {
83
+ props: ({
84
+ ownerState
85
+ }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth,
86
+ style: {
87
+ [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
88
+ transition: theme.transitions.create(['opacity'], {
89
+ duration: theme.transitions.duration.short
90
+ }),
91
+ opacity: 0,
92
+ marginLeft: -8
93
+ }
94
+ }
95
+ }]
80
96
  }));
81
97
  const LoadingButtonLoadingIndicator = styled('span', {
82
98
  name: 'MuiLoadingButton',
@@ -88,30 +104,85 @@ const LoadingButtonLoadingIndicator = styled('span', {
88
104
  return [styles.loadingIndicator, styles[`loadingIndicator${capitalize(ownerState.loadingPosition)}`]];
89
105
  }
90
106
  })(({
91
- theme,
92
- ownerState
93
- }) => _extends({
107
+ theme
108
+ }) => ({
94
109
  position: 'absolute',
95
110
  visibility: 'visible',
96
- display: 'flex'
97
- }, ownerState.loadingPosition === 'start' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
98
- left: ownerState.size === 'small' ? 10 : 14
99
- }, ownerState.loadingPosition === 'start' && ownerState.variant === 'text' && {
100
- left: 6
101
- }, ownerState.loadingPosition === 'center' && {
102
- left: '50%',
103
- transform: 'translate(-50%)',
104
- color: (theme.vars || theme).palette.action.disabled
105
- }, ownerState.loadingPosition === 'end' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
106
- right: ownerState.size === 'small' ? 10 : 14
107
- }, ownerState.loadingPosition === 'end' && ownerState.variant === 'text' && {
108
- right: 6
109
- }, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
110
- position: 'relative',
111
- left: -10
112
- }, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
113
- position: 'relative',
114
- right: -10
111
+ display: 'flex',
112
+ variants: [{
113
+ props: {
114
+ loadingPosition: 'start',
115
+ size: 'small'
116
+ },
117
+ style: {
118
+ left: 10
119
+ }
120
+ }, {
121
+ props: ({
122
+ loadingPosition,
123
+ ownerState
124
+ }) => loadingPosition === 'start' && ownerState.size !== 'small',
125
+ style: {
126
+ left: 14
127
+ }
128
+ }, {
129
+ props: {
130
+ variant: 'text',
131
+ loadingPosition: 'start'
132
+ },
133
+ style: {
134
+ left: 6
135
+ }
136
+ }, {
137
+ props: {
138
+ loadingPosition: 'center'
139
+ },
140
+ style: {
141
+ left: '50%',
142
+ transform: 'translate(-50%)',
143
+ color: (theme.vars || theme).palette.action.disabled
144
+ }
145
+ }, {
146
+ props: {
147
+ loadingPosition: 'end',
148
+ size: 'small'
149
+ },
150
+ style: {
151
+ right: 10
152
+ }
153
+ }, {
154
+ props: ({
155
+ loadingPosition,
156
+ ownerState
157
+ }) => loadingPosition === 'end' && ownerState.size !== 'small',
158
+ style: {
159
+ right: 14
160
+ }
161
+ }, {
162
+ props: {
163
+ variant: 'text',
164
+ loadingPosition: 'end'
165
+ },
166
+ style: {
167
+ right: 6
168
+ }
169
+ }, {
170
+ props: ({
171
+ ownerState
172
+ }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth,
173
+ style: {
174
+ position: 'relative',
175
+ left: -10
176
+ }
177
+ }, {
178
+ props: ({
179
+ ownerState
180
+ }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth,
181
+ style: {
182
+ position: 'relative',
183
+ right: -10
184
+ }
185
+ }]
115
186
  }));
116
187
  const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps, ref) {
117
188
  const contextProps = React.useContext(ButtonGroupContext);
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/lab v6.0.0-alpha.5
2
+ * @mui/lab v6.0.0-alpha.6
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
package/modern/LoadingButton/LoadingButton.js CHANGED
@@ -8,13 +8,14 @@ import PropTypes from 'prop-types';
8
8
  import { chainPropTypes } from '@mui/utils';
9
9
  import { capitalize, unstable_useId as useId } from '@mui/material/utils';
10
10
  import { unstable_composeClasses as composeClasses } from '@mui/base';
11
- import { styled, useThemeProps } from '@mui/material/styles';
12
11
  import Button from '@mui/material/Button';
13
12
  import { ButtonGroupContext } from '@mui/material/ButtonGroup';
14
13
  import CircularProgress from '@mui/material/CircularProgress';
15
14
  import resolveProps from '@mui/utils/resolveProps';
15
+ import { styled, createUseThemeProps } from '../zero-styled';
16
16
  import loadingButtonClasses, { getLoadingButtonUtilityClass } from './loadingButtonClasses';
17
17
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
18
+ const useThemeProps = createUseThemeProps('MuiLoadingButton');
18
19
  const useUtilityClasses = ownerState => {
19
20
  const {
20
21
  loading,
@@ -31,7 +32,7 @@ const useUtilityClasses = ownerState => {
31
32
  return _extends({}, classes, composedClasses);
32
33
  };
33
34
 
34
- // TODO use `import { rootShouldForwardProp } from '../styles/styled';` once move to core
35
+ // TODO use `import rootShouldForwardProp from '../styles/rootShouldForwardProp';` once move to core
35
36
  const rootShouldForwardProp = prop => prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as' && prop !== 'classes';
36
37
  const LoadingButtonRoot = styled(Button, {
37
38
  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -45,38 +46,53 @@ const LoadingButtonRoot = styled(Button, {
45
46
  }];
46
47
  }
47
48
  })(({
48
- ownerState,
49
49
  theme
50
- }) => _extends({
50
+ }) => ({
51
51
  [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
52
52
  transition: theme.transitions.create(['opacity'], {
53
53
  duration: theme.transitions.duration.short
54
54
  }),
55
55
  opacity: 0
56
- }
57
- }, ownerState.loadingPosition === 'center' && {
58
- transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
59
- duration: theme.transitions.duration.short
60
- }),
61
- [`&.${loadingButtonClasses.loading}`]: {
62
- color: 'transparent'
63
- }
64
- }, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
65
- [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
66
- transition: theme.transitions.create(['opacity'], {
67
- duration: theme.transitions.duration.short
68
- }),
69
- opacity: 0,
70
- marginRight: -8
71
- }
72
- }, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
73
- [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
74
- transition: theme.transitions.create(['opacity'], {
75
- duration: theme.transitions.duration.short
76
- }),
77
- opacity: 0,
78
- marginLeft: -8
79
- }
56
+ },
57
+ variants: [{
58
+ props: {
59
+ loadingPosition: 'center'
60
+ },
61
+ style: {
62
+ transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
63
+ duration: theme.transitions.duration.short
64
+ }),
65
+ [`&.${loadingButtonClasses.loading}`]: {
66
+ color: 'transparent'
67
+ }
68
+ }
69
+ }, {
70
+ props: ({
71
+ ownerState
72
+ }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth,
73
+ style: {
74
+ [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
75
+ transition: theme.transitions.create(['opacity'], {
76
+ duration: theme.transitions.duration.short
77
+ }),
78
+ opacity: 0,
79
+ marginRight: -8
80
+ }
81
+ }
82
+ }, {
83
+ props: ({
84
+ ownerState
85
+ }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth,
86
+ style: {
87
+ [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {
88
+ transition: theme.transitions.create(['opacity'], {
89
+ duration: theme.transitions.duration.short
90
+ }),
91
+ opacity: 0,
92
+ marginLeft: -8
93
+ }
94
+ }
95
+ }]
80
96
  }));
81
97
  const LoadingButtonLoadingIndicator = styled('span', {
82
98
  name: 'MuiLoadingButton',
@@ -88,30 +104,85 @@ const LoadingButtonLoadingIndicator = styled('span', {
88
104
  return [styles.loadingIndicator, styles[`loadingIndicator${capitalize(ownerState.loadingPosition)}`]];
89
105
  }
90
106
  })(({
91
- theme,
92
- ownerState
93
- }) => _extends({
107
+ theme
108
+ }) => ({
94
109
  position: 'absolute',
95
110
  visibility: 'visible',
96
- display: 'flex'
97
- }, ownerState.loadingPosition === 'start' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
98
- left: ownerState.size === 'small' ? 10 : 14
99
- }, ownerState.loadingPosition === 'start' && ownerState.variant === 'text' && {
100
- left: 6
101
- }, ownerState.loadingPosition === 'center' && {
102
- left: '50%',
103
- transform: 'translate(-50%)',
104
- color: (theme.vars || theme).palette.action.disabled
105
- }, ownerState.loadingPosition === 'end' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
106
- right: ownerState.size === 'small' ? 10 : 14
107
- }, ownerState.loadingPosition === 'end' && ownerState.variant === 'text' && {
108
- right: 6
109
- }, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
110
- position: 'relative',
111
- left: -10
112
- }, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
113
- position: 'relative',
114
- right: -10
111
+ display: 'flex',
112
+ variants: [{
113
+ props: {
114
+ loadingPosition: 'start',
115
+ size: 'small'
116
+ },
117
+ style: {
118
+ left: 10
119
+ }
120
+ }, {
121
+ props: ({
122
+ loadingPosition,
123
+ ownerState
124
+ }) => loadingPosition === 'start' && ownerState.size !== 'small',
125
+ style: {
126
+ left: 14
127
+ }
128
+ }, {
129
+ props: {
130
+ variant: 'text',
131
+ loadingPosition: 'start'
132
+ },
133
+ style: {
134
+ left: 6
135
+ }
136
+ }, {
137
+ props: {
138
+ loadingPosition: 'center'
139
+ },
140
+ style: {
141
+ left: '50%',
142
+ transform: 'translate(-50%)',
143
+ color: (theme.vars || theme).palette.action.disabled
144
+ }
145
+ }, {
146
+ props: {
147
+ loadingPosition: 'end',
148
+ size: 'small'
149
+ },
150
+ style: {
151
+ right: 10
152
+ }
153
+ }, {
154
+ props: ({
155
+ loadingPosition,
156
+ ownerState
157
+ }) => loadingPosition === 'end' && ownerState.size !== 'small',
158
+ style: {
159
+ right: 14
160
+ }
161
+ }, {
162
+ props: {
163
+ variant: 'text',
164
+ loadingPosition: 'end'
165
+ },
166
+ style: {
167
+ right: 6
168
+ }
169
+ }, {
170
+ props: ({
171
+ ownerState
172
+ }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth,
173
+ style: {
174
+ position: 'relative',
175
+ left: -10
176
+ }
177
+ }, {
178
+ props: ({
179
+ ownerState
180
+ }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth,
181
+ style: {
182
+ position: 'relative',
183
+ right: -10
184
+ }
185
+ }]
115
186
  }));
116
187
  const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps, ref) {
117
188
  const contextProps = React.useContext(ButtonGroupContext);
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/lab v6.0.0-alpha.5
2
+ * @mui/lab v6.0.0-alpha.6
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
package/modern/zero-styled/index.js ADDED
@@ -0,0 +1,7 @@
1
+ import { useThemeProps } from '@mui/material/styles';
2
+ export { styled } from '@mui/material/styles';
3
+
4
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
5
+ export function createUseThemeProps(name) {
6
+ return useThemeProps;
7
+ }
package/node/LoadingButton/LoadingButton.js CHANGED
@@ -13,16 +13,17 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
13
13
  var _utils = require("@mui/utils");
14
14
  var _utils2 = require("@mui/material/utils");
15
15
  var _base = require("@mui/base");
16
- var _styles = require("@mui/material/styles");
17
16
  var _Button = _interopRequireDefault(require("@mui/material/Button"));
18
17
  var _ButtonGroup = require("@mui/material/ButtonGroup");
19
18
  var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
20
19
  var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
20
+ var _zeroStyled = require("../zero-styled");
21
21
  var _loadingButtonClasses = _interopRequireWildcard(require("./loadingButtonClasses"));
22
22
  var _jsxRuntime = require("react/jsx-runtime");
23
23
  const _excluded = ["children", "disabled", "id", "loading", "loadingIndicator", "loadingPosition", "variant"];
24
24
  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); }
25
25
  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; }
26
+ const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiLoadingButton');
26
27
  const useUtilityClasses = ownerState => {
27
28
  const {
28
29
  loading,
@@ -39,9 +40,9 @@ const useUtilityClasses = ownerState => {
39
40
  return (0, _extends2.default)({}, classes, composedClasses);
40
41
  };
41
42
 
42
- // TODO use `import { rootShouldForwardProp } from '../styles/styled';` once move to core
43
+ // TODO use `import rootShouldForwardProp from '../styles/rootShouldForwardProp';` once move to core
43
44
  const rootShouldForwardProp = prop => prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as' && prop !== 'classes';
44
- const LoadingButtonRoot = (0, _styles.styled)(_Button.default, {
45
+ const LoadingButtonRoot = (0, _zeroStyled.styled)(_Button.default, {
45
46
  shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
46
47
  name: 'MuiLoadingButton',
47
48
  slot: 'Root',
@@ -53,40 +54,55 @@ const LoadingButtonRoot = (0, _styles.styled)(_Button.default, {
53
54
  }];
54
55
  }
55
56
  })(({
56
- ownerState,
57
57
  theme
58
- }) => (0, _extends2.default)({
58
+ }) => ({
59
59
  [`& .${_loadingButtonClasses.default.startIconLoadingStart}, & .${_loadingButtonClasses.default.endIconLoadingEnd}`]: {
60
60
  transition: theme.transitions.create(['opacity'], {
61
61
  duration: theme.transitions.duration.short
62
62
  }),
63
63
  opacity: 0
64
- }
65
- }, ownerState.loadingPosition === 'center' && {
66
- transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
67
- duration: theme.transitions.duration.short
68
- }),
69
- [`&.${_loadingButtonClasses.default.loading}`]: {
70
- color: 'transparent'
71
- }
72
- }, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
73
- [`& .${_loadingButtonClasses.default.startIconLoadingStart}, & .${_loadingButtonClasses.default.endIconLoadingEnd}`]: {
74
- transition: theme.transitions.create(['opacity'], {
75
- duration: theme.transitions.duration.short
76
- }),
77
- opacity: 0,
78
- marginRight: -8
79
- }
80
- }, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
81
- [`& .${_loadingButtonClasses.default.startIconLoadingStart}, & .${_loadingButtonClasses.default.endIconLoadingEnd}`]: {
82
- transition: theme.transitions.create(['opacity'], {
83
- duration: theme.transitions.duration.short
84
- }),
85
- opacity: 0,
86
- marginLeft: -8
87
- }
64
+ },
65
+ variants: [{
66
+ props: {
67
+ loadingPosition: 'center'
68
+ },
69
+ style: {
70
+ transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
71
+ duration: theme.transitions.duration.short
72
+ }),
73
+ [`&.${_loadingButtonClasses.default.loading}`]: {
74
+ color: 'transparent'
75
+ }
76
+ }
77
+ }, {
78
+ props: ({
79
+ ownerState
80
+ }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth,
81
+ style: {
82
+ [`& .${_loadingButtonClasses.default.startIconLoadingStart}, & .${_loadingButtonClasses.default.endIconLoadingEnd}`]: {
83
+ transition: theme.transitions.create(['opacity'], {
84
+ duration: theme.transitions.duration.short
85
+ }),
86
+ opacity: 0,
87
+ marginRight: -8
88
+ }
89
+ }
90
+ }, {
91
+ props: ({
92
+ ownerState
93
+ }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth,
94
+ style: {
95
+ [`& .${_loadingButtonClasses.default.startIconLoadingStart}, & .${_loadingButtonClasses.default.endIconLoadingEnd}`]: {
96
+ transition: theme.transitions.create(['opacity'], {
97
+ duration: theme.transitions.duration.short
98
+ }),
99
+ opacity: 0,
100
+ marginLeft: -8
101
+ }
102
+ }
103
+ }]
88
104
  }));
89
- const LoadingButtonLoadingIndicator = (0, _styles.styled)('span', {
105
+ const LoadingButtonLoadingIndicator = (0, _zeroStyled.styled)('span', {
90
106
  name: 'MuiLoadingButton',
91
107
  slot: 'LoadingIndicator',
92
108
  overridesResolver: (props, styles) => {
@@ -96,35 +112,90 @@ const LoadingButtonLoadingIndicator = (0, _styles.styled)('span', {
96
112
  return [styles.loadingIndicator, styles[`loadingIndicator${(0, _utils2.capitalize)(ownerState.loadingPosition)}`]];
97
113
  }
98
114
  })(({
99
- theme,
100
- ownerState
101
- }) => (0, _extends2.default)({
115
+ theme
116
+ }) => ({
102
117
  position: 'absolute',
103
118
  visibility: 'visible',
104
- display: 'flex'
105
- }, ownerState.loadingPosition === 'start' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
106
- left: ownerState.size === 'small' ? 10 : 14
107
- }, ownerState.loadingPosition === 'start' && ownerState.variant === 'text' && {
108
- left: 6
109
- }, ownerState.loadingPosition === 'center' && {
110
- left: '50%',
111
- transform: 'translate(-50%)',
112
- color: (theme.vars || theme).palette.action.disabled
113
- }, ownerState.loadingPosition === 'end' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
114
- right: ownerState.size === 'small' ? 10 : 14
115
- }, ownerState.loadingPosition === 'end' && ownerState.variant === 'text' && {
116
- right: 6
117
- }, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
118
- position: 'relative',
119
- left: -10
120
- }, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
121
- position: 'relative',
122
- right: -10
119
+ display: 'flex',
120
+ variants: [{
121
+ props: {
122
+ loadingPosition: 'start',
123
+ size: 'small'
124
+ },
125
+ style: {
126
+ left: 10
127
+ }
128
+ }, {
129
+ props: ({
130
+ loadingPosition,
131
+ ownerState
132
+ }) => loadingPosition === 'start' && ownerState.size !== 'small',
133
+ style: {
134
+ left: 14
135
+ }
136
+ }, {
137
+ props: {
138
+ variant: 'text',
139
+ loadingPosition: 'start'
140
+ },
141
+ style: {
142
+ left: 6
143
+ }
144
+ }, {
145
+ props: {
146
+ loadingPosition: 'center'
147
+ },
148
+ style: {
149
+ left: '50%',
150
+ transform: 'translate(-50%)',
151
+ color: (theme.vars || theme).palette.action.disabled
152
+ }
153
+ }, {
154
+ props: {
155
+ loadingPosition: 'end',
156
+ size: 'small'
157
+ },
158
+ style: {
159
+ right: 10
160
+ }
161
+ }, {
162
+ props: ({
163
+ loadingPosition,
164
+ ownerState
165
+ }) => loadingPosition === 'end' && ownerState.size !== 'small',
166
+ style: {
167
+ right: 14
168
+ }
169
+ }, {
170
+ props: {
171
+ variant: 'text',
172
+ loadingPosition: 'end'
173
+ },
174
+ style: {
175
+ right: 6
176
+ }
177
+ }, {
178
+ props: ({
179
+ ownerState
180
+ }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth,
181
+ style: {
182
+ position: 'relative',
183
+ left: -10
184
+ }
185
+ }, {
186
+ props: ({
187
+ ownerState
188
+ }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth,
189
+ style: {
190
+ position: 'relative',
191
+ right: -10
192
+ }
193
+ }]
123
194
  }));
124
195
  const LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps, ref) {
125
196
  const contextProps = React.useContext(_ButtonGroup.ButtonGroupContext);
126
197
  const resolvedProps = (0, _resolveProps.default)(contextProps, inProps);
127
- const props = (0, _styles.useThemeProps)({
198
+ const props = useThemeProps({
128
199
  props: resolvedProps,
129
200
  name: 'MuiLoadingButton'
130
201
  });
package/node/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/lab v6.0.0-alpha.5
2
+ * @mui/lab v6.0.0-alpha.6
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
package/node/zero-styled/index.js ADDED
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.createUseThemeProps = createUseThemeProps;
7
+ Object.defineProperty(exports, "styled", {
8
+ enumerable: true,
9
+ get: function () {
10
+ return _styles.styled;
11
+ }
12
+ });
13
+ var _styles = require("@mui/material/styles");
14
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
15
+ function createUseThemeProps(name) {
16
+ return _styles.useThemeProps;
17
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/lab",
3
- "version": "6.0.0-alpha.5",
3
+ "version": "6.0.0-alpha.6",
4
4
  "private": false,
5
5
  "author": "MUI Team",
6
6
  "description": "Laboratory for new MUI modules.",
@@ -31,9 +31,9 @@
31
31
  "@babel/runtime": "^7.24.4",
32
32
  "clsx": "^2.1.1",
33
33
  "prop-types": "^15.8.1",
34
- "@mui/base": "5.0.0-beta.43",
35
- "@mui/system": "^6.0.0-alpha.5",
36
34
  "@mui/types": "^7.2.14",
35
+ "@mui/base": "5.0.0-beta.44",
36
+ "@mui/system": "^6.0.0-alpha.5",
37
37
  "@mui/utils": "^6.0.0-alpha.5"
38
38
  },
39
39
  "peerDependencies": {
@@ -42,7 +42,7 @@
42
42
  "@types/react": "^17.0.0 || ^18.0.0",
43
43
  "react": "^17.0.0 || ^18.0.0",
44
44
  "react-dom": "^17.0.0 || ^18.0.0",
45
- "@mui/material": "^6.0.0-alpha.5"
45
+ "@mui/material": "^6.0.0-alpha.6"
46
46
  },
47
47
  "peerDependenciesMeta": {
48
48
  "@types/react": {
package/zero-styled/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { useThemeProps } from '@mui/material/styles';
2
+ export { styled } from '@mui/material/styles';
3
+ export declare function createUseThemeProps(name: string): typeof useThemeProps;
package/zero-styled/index.js ADDED
@@ -0,0 +1,7 @@
1
+ import { useThemeProps } from '@mui/material/styles';
2
+ export { styled } from '@mui/material/styles';
3
+
4
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
5
+ export function createUseThemeProps(name) {
6
+ return useThemeProps;
7
+ }
package/zero-styled/package.json ADDED
@@ -0,0 +1,6 @@
1
+ {
2
+ "sideEffects": false,
3
+ "module": "./index.js",
4
+ "main": "../node/zero-styled/index.js",
5
+ "types": "./index.d.ts"
6
+ }