@mui/codemod 7.0.0-alpha.1 → 7.0.0-beta.0
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/README.md +132 -10
- package/deprecations/all/deprecations-all.js +6 -0
- package/deprecations/all/postcss.config.js +4 -1
- package/deprecations/input-base-classes/index.js +13 -0
- package/deprecations/input-base-classes/input-base-classes.js +69 -0
- package/deprecations/input-base-classes/postcss-plugin.js +42 -0
- package/deprecations/input-base-classes/postcss.config.js +8 -0
- package/deprecations/input-base-classes/test-cases/actual.js +13 -0
- package/deprecations/input-base-classes/test-cases/expected.js +13 -0
- package/deprecations/menu-props/index.js +13 -0
- package/deprecations/menu-props/menu-props.js +37 -0
- package/deprecations/menu-props/test-cases/actual.js +67 -0
- package/deprecations/menu-props/test-cases/expected.js +83 -0
- package/deprecations/menu-props/test-cases/theme.actual.js +33 -0
- package/deprecations/menu-props/test-cases/theme.expected.js +39 -0
- package/deprecations/rating-props/index.js +13 -0
- package/deprecations/rating-props/rating-props.js +25 -0
- package/deprecations/rating-props/test-cases/actual.js +37 -0
- package/deprecations/rating-props/test-cases/expected.js +53 -0
- package/deprecations/rating-props/test-cases/theme.actual.js +31 -0
- package/deprecations/rating-props/test-cases/theme.expected.js +37 -0
- package/package.json +5 -5
- package/v7.0.0/all/v7-all.js +2 -0
- package/v7.0.0/grid-props/grid-props.js +150 -0
- package/v7.0.0/grid-props/index.js +13 -0
- package/v7.0.0/grid-props/test-cases/actual.js +107 -0
- package/v7.0.0/grid-props/test-cases/custom-breakpoints.actual.js +18 -0
- package/v7.0.0/grid-props/test-cases/custom-breakpoints.expected.js +22 -0
- package/v7.0.0/grid-props/test-cases/expected.js +107 -0
- package/v7.0.0/input-label-size-normal-medium/index.js +13 -0
- package/v7.0.0/input-label-size-normal-medium/input-label-size-normal-medium.js +21 -0
- package/v7.0.0/input-label-size-normal-medium/test-cases/actual.js +9 -0
- package/v7.0.0/input-label-size-normal-medium/test-cases/expected.js +9 -0
package/README.md
CHANGED
|
@@ -1289,6 +1289,60 @@ npx @mui/codemod@latest deprecations/image-list-item-bar-classes <path>
|
|
|
1289
1289
|
npx @mui/codemod@latest deprecations/input-base-props <path>
|
|
1290
1290
|
```
|
|
1291
1291
|
|
|
1292
|
+
#### `input-base-classes`
|
|
1293
|
+
|
|
1294
|
+
JS transforms:
|
|
1295
|
+
|
|
1296
|
+
```diff
|
|
1297
|
+
import { inputBaseClasses } from '@mui/material/InputBase';
|
|
1298
|
+
|
|
1299
|
+
MuiInputBase: {
|
|
1300
|
+
styleOverrides: {
|
|
1301
|
+
root: {
|
|
1302
|
+
- [`& .${inputBaseClasses.inputSizeSmall}`]: {
|
|
1303
|
+
+ [`&.${inputBaseClasses.sizeSmall} > .${inputBaseClasses.input}`]: {
|
|
1304
|
+
color: 'red',
|
|
1305
|
+
},
|
|
1306
|
+
- [`& .${inputBaseClasses.inputMultiline}`]: {
|
|
1307
|
+
+ [`&.${inputBaseClasses.multiline} > .${inputBaseClasses.input}`]: {
|
|
1308
|
+
color: 'red',
|
|
1309
|
+
},
|
|
1310
|
+
- [`& .${inputBaseClasses.inputAdornedStart}`]: {
|
|
1311
|
+
+ [`&.${inputBaseClasses.adornedStart} > .${inputBaseClasses.input}`]: {
|
|
1312
|
+
color: 'red',
|
|
1313
|
+
},
|
|
1314
|
+
- [`& .${inputBaseClasses.inputAdornedEnd}`]: {
|
|
1315
|
+
+ [`&.${inputBaseClasses.adornedEnd} > .${inputBaseClasses.input}`]: {
|
|
1316
|
+
color: 'red',
|
|
1317
|
+
},
|
|
1318
|
+
- [`& .${inputBaseClasses.inputHiddenLabel}`]: {
|
|
1319
|
+
+ [`&.${inputBaseClasses.hiddenLabel} > .${inputBaseClasses.input}`]: {
|
|
1320
|
+
color: 'red',
|
|
1321
|
+
},
|
|
1322
|
+
},
|
|
1323
|
+
},
|
|
1324
|
+
},
|
|
1325
|
+
```
|
|
1326
|
+
|
|
1327
|
+
CSS transforms:
|
|
1328
|
+
|
|
1329
|
+
```diff
|
|
1330
|
+
-.MuiInputBase-root .MuiInputBase-inputSizeSmall
|
|
1331
|
+
+.MuiInputBase-root.MuiInputBase-sizeSmall > .MuiInputBase-input
|
|
1332
|
+
-.MuiInputBase-root .MuiInputBase-inputMultiline
|
|
1333
|
+
+.MuiInputBase-root.MuiInputBase-multiline > .MuiInputBase-input
|
|
1334
|
+
-.MuiInputBase-root .MuiInputBase-inputAdornedStart
|
|
1335
|
+
+.MuiInputBase-root.MuiInputBase-adornedStart > .MuiInputBase-input
|
|
1336
|
+
-.MuiInputBase-root .MuiInputBase-inputAdornedEnd
|
|
1337
|
+
+.MuiInputBase-root.MuiInputBase-adornedEnd > .MuiInputBase-input
|
|
1338
|
+
-.MuiInputBase-root .MuiInputBase-inputHiddenLabel
|
|
1339
|
+
+.MuiInputBase-root.MuiInputBase-hiddenLabel > .MuiInputBase-input
|
|
1340
|
+
```
|
|
1341
|
+
|
|
1342
|
+
```bash
|
|
1343
|
+
npx @mui/codemod@latest deprecations/input-base-classes <path>
|
|
1344
|
+
```
|
|
1345
|
+
|
|
1292
1346
|
#### `input-props`
|
|
1293
1347
|
|
|
1294
1348
|
```diff
|
|
@@ -1552,6 +1606,21 @@ npx @mui/codemod@latest deprecations/popper-props <path>
|
|
|
1552
1606
|
npx @mui/codemod@latest deprecations/outlined-input-props <path>
|
|
1553
1607
|
```
|
|
1554
1608
|
|
|
1609
|
+
#### `rating-props`
|
|
1610
|
+
|
|
1611
|
+
```diff
|
|
1612
|
+
<Snackbar
|
|
1613
|
+
- IconContainerComponent={CustomContainer}
|
|
1614
|
+
+ slots={{
|
|
1615
|
+
+ icon: { component: CustomContainer }
|
|
1616
|
+
+ }}
|
|
1617
|
+
/>
|
|
1618
|
+
```
|
|
1619
|
+
|
|
1620
|
+
```bash
|
|
1621
|
+
npx @mui/codemod@next deprecations/snackbar-props <path>
|
|
1622
|
+
```
|
|
1623
|
+
|
|
1555
1624
|
#### `select-classes`
|
|
1556
1625
|
|
|
1557
1626
|
JS transforms:
|
|
@@ -1657,35 +1726,35 @@ JS transforms:
|
|
|
1657
1726
|
MuiSlider: {
|
|
1658
1727
|
styleOverrides: {
|
|
1659
1728
|
root: {
|
|
1660
|
-
- [
|
|
1729
|
+
- [`& .${sliderClasses.thumbSizeSmall}`]: {
|
|
1661
1730
|
+ [`&.${sliderClasses.sizeSmall} > .${sliderClasses.thumb}`]: {
|
|
1662
1731
|
color: 'red',
|
|
1663
1732
|
},
|
|
1664
|
-
- [
|
|
1733
|
+
- [`& .${sliderClasses.thumbSizeMedium}`]: {
|
|
1665
1734
|
+ [`&.${sliderClasses.sizeMedium} > .${sliderClasses.thumb}`]: {
|
|
1666
1735
|
color: 'red',
|
|
1667
1736
|
},
|
|
1668
|
-
- [
|
|
1737
|
+
- [`& .${sliderClasses.thumbColorPrimary}`]: {
|
|
1669
1738
|
+ [`&.${sliderClasses.colorPrimary} > .${sliderClasses.thumb}`]: {
|
|
1670
1739
|
color: 'red',
|
|
1671
1740
|
},
|
|
1672
|
-
- [
|
|
1741
|
+
- [`& .${sliderClasses.thumbColorSecondary}`]: {
|
|
1673
1742
|
+ [`&.${sliderClasses.colorSecondary} > .${sliderClasses.thumb}`]: {
|
|
1674
1743
|
color: 'red',
|
|
1675
1744
|
},
|
|
1676
|
-
- [
|
|
1745
|
+
- [`& .${sliderClasses.thumbColorError}`]: {
|
|
1677
1746
|
+ [`&.${sliderClasses.colorError} > .${sliderClasses.thumb}`]: {
|
|
1678
1747
|
color: 'red',
|
|
1679
1748
|
},
|
|
1680
|
-
- [
|
|
1681
|
-
+ [`&.${
|
|
1749
|
+
- [`& .${sliderClasses.thumbColorInfo}`]: {
|
|
1750
|
+
+ [`&.${sliderClasses.colorInfo} > .${sliderClasses.thumb}`]: {
|
|
1682
1751
|
color: 'red',
|
|
1683
1752
|
},
|
|
1684
|
-
- [
|
|
1753
|
+
- [`& .${sliderClasses.thumbColorSuccess}`]: {
|
|
1685
1754
|
+ [`&.${sliderClasses.colorSuccess} > .${sliderClasses.thumb}`]: {
|
|
1686
1755
|
color: 'red',
|
|
1687
1756
|
},
|
|
1688
|
-
- [
|
|
1757
|
+
- [`& .${sliderClasses.thumbColorWarning}`]: {
|
|
1689
1758
|
+ [`&.${sliderClasses.colorWarning} > .${sliderClasses.thumb}`]: {
|
|
1690
1759
|
color: 'red',
|
|
1691
1760
|
},
|
|
@@ -1716,7 +1785,7 @@ CSS transforms:
|
|
|
1716
1785
|
```
|
|
1717
1786
|
|
|
1718
1787
|
```bash
|
|
1719
|
-
npx @mui/codemod@latest deprecations/
|
|
1788
|
+
npx @mui/codemod@latest deprecations/slider-classes <path>
|
|
1720
1789
|
```
|
|
1721
1790
|
|
|
1722
1791
|
#### `tooltip-props`
|
|
@@ -2019,6 +2088,40 @@ npx @mui/codemod@latest deprecations/typography-props <path>
|
|
|
2019
2088
|
|
|
2020
2089
|
### v7.0.0
|
|
2021
2090
|
|
|
2091
|
+
#### `grid-props`
|
|
2092
|
+
|
|
2093
|
+
<!-- #npm-tag-reference -->
|
|
2094
|
+
|
|
2095
|
+
```bash
|
|
2096
|
+
npx @mui/codemod@next v7.0.0/grid-props <path>
|
|
2097
|
+
```
|
|
2098
|
+
|
|
2099
|
+
Updates the usage of the `@mui/material/Grid`, `@mui/system/Grid`, and `@mui/joy/Grid` components to their updated APIs.
|
|
2100
|
+
|
|
2101
|
+
```diff
|
|
2102
|
+
<Grid
|
|
2103
|
+
- xs={12}
|
|
2104
|
+
- sm={6}
|
|
2105
|
+
- xsOffset={2}
|
|
2106
|
+
- smOffset={3}
|
|
2107
|
+
+ size={{ xs: 12, sm: 6 }}
|
|
2108
|
+
+ offset={{ xs: 2, sm: 3 }}
|
|
2109
|
+
/>
|
|
2110
|
+
```
|
|
2111
|
+
|
|
2112
|
+
You can provide the theme breakpoints via options, for example, `--jscodeshift='--muiBreakpoints=mobile,desktop'`, to use your custom breakpoints in the transformation.
|
|
2113
|
+
|
|
2114
|
+
<!-- #npm-tag-reference -->
|
|
2115
|
+
|
|
2116
|
+
```bash
|
|
2117
|
+
npx @mui/codemod@next v7.0.0/grid-props <path> --jscodeshift='--muiBreakpoints=mobile,desktop'
|
|
2118
|
+
```
|
|
2119
|
+
|
|
2120
|
+
```diff
|
|
2121
|
+
- <Grid mobile={12} mobileOffset={2} desktop={6} desktopOffset={4} >
|
|
2122
|
+
+ <Grid size={{ mobile: 12, desktop: 6 }} offset={{ mobile: 2, desktop: 4 }} >
|
|
2123
|
+
```
|
|
2124
|
+
|
|
2022
2125
|
#### `lab-removed-components`
|
|
2023
2126
|
|
|
2024
2127
|
<!-- #npm-tag-reference -->
|
|
@@ -2058,6 +2161,25 @@ As well as default and named imports from component-level files:
|
|
|
2058
2161
|
+ import Alert, { alertClasses } from '@mui/material/Alert';
|
|
2059
2162
|
```
|
|
2060
2163
|
|
|
2164
|
+
#### `input-label-size-normal-medium`
|
|
2165
|
+
|
|
2166
|
+
Updates the `InputLabel`'s `size` value from `normal` to `medium`.
|
|
2167
|
+
|
|
2168
|
+
```diff
|
|
2169
|
+
-<InputLabel size="normal">Label</InputLabel>
|
|
2170
|
+
+<InputLabel size="medium">Label</InputLabel>
|
|
2171
|
+
```
|
|
2172
|
+
|
|
2173
|
+
<!-- #npm-tag-reference -->
|
|
2174
|
+
|
|
2175
|
+
```bash
|
|
2176
|
+
npx @mui/codemod@next v7.0.0/input-label-size-normal-medium <path>
|
|
2177
|
+
```
|
|
2178
|
+
|
|
2179
|
+
<!-- #host-reference -->
|
|
2180
|
+
|
|
2181
|
+
You can find more details about this breaking change in [the migration guide](https://next.mui.com/material-ui/migration/upgrade-to-v7/#inputlabel).
|
|
2182
|
+
|
|
2061
2183
|
### v6.0.0
|
|
2062
2184
|
|
|
2063
2185
|
#### `sx-prop`
|
|
@@ -22,6 +22,7 @@ var _filledInputProps = _interopRequireDefault(require("../filled-input-props"))
|
|
|
22
22
|
var _formControlLabelProps = _interopRequireDefault(require("../form-control-label-props"));
|
|
23
23
|
var _imageListItemBarClasses = _interopRequireDefault(require("../image-list-item-bar-classes"));
|
|
24
24
|
var _inputBaseProps = _interopRequireDefault(require("../input-base-props"));
|
|
25
|
+
var _inputBaseClasses = _interopRequireDefault(require("../input-base-classes"));
|
|
25
26
|
var _inputProps = _interopRequireDefault(require("../input-props"));
|
|
26
27
|
var _listItemTextProps = _interopRequireDefault(require("../list-item-text-props"));
|
|
27
28
|
var _linearProgressClasses = _interopRequireDefault(require("../linear-progress-classes"));
|
|
@@ -47,6 +48,8 @@ var _tabsProps = _interopRequireDefault(require("../tabs-props"));
|
|
|
47
48
|
var _tabsClasses = _interopRequireDefault(require("../tabs-classes"));
|
|
48
49
|
var _drawerProps = _interopRequireDefault(require("../drawer-props"));
|
|
49
50
|
var _mobileStepperProps = _interopRequireDefault(require("../mobile-stepper-props"));
|
|
51
|
+
var _menuProps = _interopRequireDefault(require("../menu-props"));
|
|
52
|
+
var _ratingProps = _interopRequireDefault(require("../rating-props"));
|
|
50
53
|
/**
|
|
51
54
|
* @param {import('jscodeshift').FileInfo} file
|
|
52
55
|
* @param {import('jscodeshift').API} api
|
|
@@ -69,6 +72,7 @@ function deprecationsAll(file, api, options) {
|
|
|
69
72
|
file.source = (0, _formControlLabelProps.default)(file, api, options);
|
|
70
73
|
file.source = (0, _imageListItemBarClasses.default)(file, api, options);
|
|
71
74
|
file.source = (0, _inputBaseProps.default)(file, api, options);
|
|
75
|
+
file.source = (0, _inputBaseClasses.default)(file, api, options);
|
|
72
76
|
file.source = (0, _inputProps.default)(file, api, options);
|
|
73
77
|
file.source = (0, _listItemTextProps.default)(file, api, options);
|
|
74
78
|
file.source = (0, _linearProgressClasses.default)(file, api, options);
|
|
@@ -94,5 +98,7 @@ function deprecationsAll(file, api, options) {
|
|
|
94
98
|
file.source = (0, _tabsClasses.default)(file, api, options);
|
|
95
99
|
file.source = (0, _drawerProps.default)(file, api, options);
|
|
96
100
|
file.source = (0, _mobileStepperProps.default)(file, api, options);
|
|
101
|
+
file.source = (0, _menuProps.default)(file, api, options);
|
|
102
|
+
file.source = (0, _ratingProps.default)(file, api, options);
|
|
97
103
|
return file.source;
|
|
98
104
|
}
|
|
@@ -30,6 +30,9 @@ const {
|
|
|
30
30
|
const {
|
|
31
31
|
plugin: circularProgressClassesPlugin
|
|
32
32
|
} = require('../circular-progress-classes/postcss-plugin');
|
|
33
|
+
const {
|
|
34
|
+
plugin: inputBaseClassesPlugin
|
|
35
|
+
} = require('../input-base-classes/postcss-plugin');
|
|
33
36
|
const {
|
|
34
37
|
plugin: linearProgressClassesPlugin
|
|
35
38
|
} = require('../linear-progress-classes/postcss-plugin');
|
|
@@ -46,5 +49,5 @@ const {
|
|
|
46
49
|
plugin: sliderClassesPlugin
|
|
47
50
|
} = require('../slider-classes/postcss-plugin');
|
|
48
51
|
module.exports = {
|
|
49
|
-
plugins: [accordionSummaryClassesPlugin, alertClassesPlugin, buttonClassesPlugin, buttonGroupClassesPlugin, chipClassesPlugin, circularProgressClassesPlugin, linearProgressClassesPlugin, drawerClassesPlugin, paginationItemClassesPlugin, stepConnectorClassesPlugin, toggleButtonGroupClassesPlugin, tabClassesPlugin, tableSortLabelClassesPlugin, selectClassesPlugin, sliderClassesPlugin]
|
|
52
|
+
plugins: [accordionSummaryClassesPlugin, alertClassesPlugin, buttonClassesPlugin, buttonGroupClassesPlugin, chipClassesPlugin, circularProgressClassesPlugin, inputBaseClassesPlugin, linearProgressClassesPlugin, drawerClassesPlugin, paginationItemClassesPlugin, stepConnectorClassesPlugin, toggleButtonGroupClassesPlugin, tabClassesPlugin, tableSortLabelClassesPlugin, selectClassesPlugin, sliderClassesPlugin]
|
|
50
53
|
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
Object.defineProperty(exports, "default", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () {
|
|
10
|
+
return _inputBaseClasses.default;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
var _inputBaseClasses = _interopRequireDefault(require("./input-base-classes"));
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = transformer;
|
|
7
|
+
var _postcssPlugin = require("./postcss-plugin");
|
|
8
|
+
/**
|
|
9
|
+
* @param {import('jscodeshift').FileInfo} file
|
|
10
|
+
* @param {import('jscodeshift').API} api
|
|
11
|
+
*/
|
|
12
|
+
function transformer(file, api, options) {
|
|
13
|
+
const j = api.jscodeshift;
|
|
14
|
+
const root = j(file.source);
|
|
15
|
+
const printOptions = options.printOptions;
|
|
16
|
+
_postcssPlugin.classes.forEach(({
|
|
17
|
+
deprecatedClass,
|
|
18
|
+
replacementSelector
|
|
19
|
+
}) => {
|
|
20
|
+
const replacementSelectorPrefix = '&';
|
|
21
|
+
root.find(j.ImportDeclaration).filter(path => path.node.source.value.match(/^@mui\/material\/InputBase$/)).forEach(path => {
|
|
22
|
+
path.node.specifiers.forEach(specifier => {
|
|
23
|
+
if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'inputBaseClasses') {
|
|
24
|
+
const deprecatedAtomicClass = deprecatedClass.replace(`${deprecatedClass.split('-')[0]}-`, '');
|
|
25
|
+
root.find(j.MemberExpression, {
|
|
26
|
+
object: {
|
|
27
|
+
name: specifier.local.name
|
|
28
|
+
},
|
|
29
|
+
property: {
|
|
30
|
+
name: deprecatedAtomicClass
|
|
31
|
+
}
|
|
32
|
+
}).forEach(memberExpression => {
|
|
33
|
+
const parent = memberExpression.parentPath.parentPath.value;
|
|
34
|
+
if (parent.type === j.TemplateLiteral.name) {
|
|
35
|
+
const memberExpressionIndex = parent.expressions.findIndex(expression => expression === memberExpression.value);
|
|
36
|
+
const precedingTemplateElement = parent.quasis[memberExpressionIndex];
|
|
37
|
+
const atomicClasses = replacementSelector.replaceAll('MuiInputBase-', '').replaceAll(replacementSelectorPrefix, '').replaceAll(' > ', '').split('.').filter(Boolean);
|
|
38
|
+
if (precedingTemplateElement.value.raw.endsWith(deprecatedClass.startsWith(' ') ? `${replacementSelectorPrefix} .` : `${replacementSelectorPrefix}.`)) {
|
|
39
|
+
parent.expressions.splice(memberExpressionIndex, 1, j.memberExpression(memberExpression.value.object, j.identifier(atomicClasses[0])), j.memberExpression(memberExpression.value.object, j.identifier(atomicClasses[1])));
|
|
40
|
+
if (replacementSelector.includes(' > ')) {
|
|
41
|
+
parent.quasis.splice(memberExpressionIndex, 1, j.templateElement({
|
|
42
|
+
raw: precedingTemplateElement.value.raw.replace(' ', ''),
|
|
43
|
+
cooked: precedingTemplateElement.value.cooked.replace(' ', '')
|
|
44
|
+
}, false), j.templateElement({
|
|
45
|
+
raw: ' > .',
|
|
46
|
+
cooked: ' > .'
|
|
47
|
+
}, false));
|
|
48
|
+
} else {
|
|
49
|
+
parent.quasis.splice(memberExpressionIndex, 1, j.templateElement({
|
|
50
|
+
raw: precedingTemplateElement.value.raw,
|
|
51
|
+
cooked: precedingTemplateElement.value.cooked
|
|
52
|
+
}, false), j.templateElement({
|
|
53
|
+
raw: '.',
|
|
54
|
+
cooked: '.'
|
|
55
|
+
}, false));
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
});
|
|
63
|
+
const selectorRegex = new RegExp(`^${replacementSelectorPrefix}${deprecatedClass}`);
|
|
64
|
+
root.find(j.Literal, literal => typeof literal.value === 'string' && literal.value.match(selectorRegex)).forEach(path => {
|
|
65
|
+
path.replace(j.literal(path.value.value.replace(selectorRegex, `${replacementSelectorPrefix}${replacementSelector}`)));
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
return root.toSource(printOptions);
|
|
69
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
const classes = [{
|
|
4
|
+
deprecatedClass: ' .MuiInputBase-inputSizeSmall',
|
|
5
|
+
replacementSelector: '.MuiInputBase-sizeSmall > .MuiInputBase-input'
|
|
6
|
+
}, {
|
|
7
|
+
deprecatedClass: ' .MuiInputBase-inputMultiline',
|
|
8
|
+
replacementSelector: '.MuiInputBase-multiline > .MuiInputBase-input'
|
|
9
|
+
}, {
|
|
10
|
+
deprecatedClass: ' .MuiInputBase-inputAdornedStart',
|
|
11
|
+
replacementSelector: '.MuiInputBase-adornedStart > .MuiInputBase-input'
|
|
12
|
+
}, {
|
|
13
|
+
deprecatedClass: ' .MuiInputBase-inputAdornedEnd',
|
|
14
|
+
replacementSelector: '.MuiInputBase-adornedEnd > .MuiInputBase-input'
|
|
15
|
+
}, {
|
|
16
|
+
deprecatedClass: ' .MuiInputBase-inputHiddenLabel',
|
|
17
|
+
replacementSelector: '.MuiInputBase-hiddenLabel > .MuiInputBase-input'
|
|
18
|
+
}];
|
|
19
|
+
const plugin = () => {
|
|
20
|
+
return {
|
|
21
|
+
postcssPlugin: `Replace deprecated InputBase classes with new classes`,
|
|
22
|
+
Rule(rule) {
|
|
23
|
+
const {
|
|
24
|
+
selector
|
|
25
|
+
} = rule;
|
|
26
|
+
classes.forEach(({
|
|
27
|
+
deprecatedClass,
|
|
28
|
+
replacementSelector
|
|
29
|
+
}) => {
|
|
30
|
+
const selectorRegex = new RegExp(`${deprecatedClass}`);
|
|
31
|
+
if (selector.match(selectorRegex)) {
|
|
32
|
+
rule.selector = selector.replace(selectorRegex, replacementSelector);
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
plugin.postcss = true;
|
|
39
|
+
module.exports = {
|
|
40
|
+
plugin,
|
|
41
|
+
classes
|
|
42
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _InputBase = require("@mui/material/InputBase");
|
|
4
|
+
'& .MuiInputBase-inputHiddenLabel';
|
|
5
|
+
'& .MuiInputBase-inputMultiline';
|
|
6
|
+
'& .MuiInputBase-inputAdornedStart';
|
|
7
|
+
'& .MuiInputBase-inputAdornedEnd';
|
|
8
|
+
'& .MuiInputBase-inputSizeSmall';
|
|
9
|
+
`& .${_InputBase.inputBaseClasses.inputHiddenLabel}`;
|
|
10
|
+
`& .${_InputBase.inputBaseClasses.inputMultiline}`;
|
|
11
|
+
`& .${_InputBase.inputBaseClasses.inputAdornedStart}`;
|
|
12
|
+
`& .${_InputBase.inputBaseClasses.inputAdornedEnd}`;
|
|
13
|
+
`& .${_InputBase.inputBaseClasses.inputSizeSmall}`;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _InputBase = require("@mui/material/InputBase");
|
|
4
|
+
"&.MuiInputBase-hiddenLabel > .MuiInputBase-input";
|
|
5
|
+
"&.MuiInputBase-multiline > .MuiInputBase-input";
|
|
6
|
+
"&.MuiInputBase-adornedStart > .MuiInputBase-input";
|
|
7
|
+
"&.MuiInputBase-adornedEnd > .MuiInputBase-input";
|
|
8
|
+
"&.MuiInputBase-sizeSmall > .MuiInputBase-input";
|
|
9
|
+
`&.${_InputBase.inputBaseClasses.hiddenLabel} > .${_InputBase.inputBaseClasses.input}`;
|
|
10
|
+
`&.${_InputBase.inputBaseClasses.multiline} > .${_InputBase.inputBaseClasses.input}`;
|
|
11
|
+
`&.${_InputBase.inputBaseClasses.adornedStart} > .${_InputBase.inputBaseClasses.input}`;
|
|
12
|
+
`&.${_InputBase.inputBaseClasses.adornedEnd} > .${_InputBase.inputBaseClasses.input}`;
|
|
13
|
+
`&.${_InputBase.inputBaseClasses.sizeSmall} > .${_InputBase.inputBaseClasses.input}`;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
Object.defineProperty(exports, "default", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () {
|
|
10
|
+
return _menuProps.default;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
var _menuProps = _interopRequireDefault(require("./menu-props"));
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = transformer;
|
|
8
|
+
var _movePropIntoSlots = _interopRequireDefault(require("../utils/movePropIntoSlots"));
|
|
9
|
+
var _movePropIntoSlotProps = _interopRequireDefault(require("../utils/movePropIntoSlotProps"));
|
|
10
|
+
/**
|
|
11
|
+
* @param {import('jscodeshift').FileInfo} file
|
|
12
|
+
* @param {import('jscodeshift').API} api
|
|
13
|
+
*/
|
|
14
|
+
function transformer(file, api, options) {
|
|
15
|
+
const j = api.jscodeshift;
|
|
16
|
+
const root = j(file.source);
|
|
17
|
+
const printOptions = options.printOptions;
|
|
18
|
+
(0, _movePropIntoSlotProps.default)(j, {
|
|
19
|
+
root,
|
|
20
|
+
componentName: 'Menu',
|
|
21
|
+
propName: 'MenuListProps',
|
|
22
|
+
slotName: 'list'
|
|
23
|
+
});
|
|
24
|
+
(0, _movePropIntoSlots.default)(j, {
|
|
25
|
+
root,
|
|
26
|
+
componentName: 'Menu',
|
|
27
|
+
propName: 'TransitionComponent',
|
|
28
|
+
slotName: 'transition'
|
|
29
|
+
});
|
|
30
|
+
(0, _movePropIntoSlotProps.default)(j, {
|
|
31
|
+
root,
|
|
32
|
+
componentName: 'Menu',
|
|
33
|
+
propName: 'TransitionProps',
|
|
34
|
+
slotName: 'transition'
|
|
35
|
+
});
|
|
36
|
+
return root.toSource(printOptions);
|
|
37
|
+
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
|
|
5
|
+
var _material = require("@mui/material");
|
|
6
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
7
|
+
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
|
|
8
|
+
TransitionComponent: CustomTransition,
|
|
9
|
+
MenuListProps: {
|
|
10
|
+
disablePadding: true
|
|
11
|
+
},
|
|
12
|
+
TransitionProps: {
|
|
13
|
+
timeout: 200
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
|
|
17
|
+
TransitionComponent: CustomTransition,
|
|
18
|
+
MenuListProps: {
|
|
19
|
+
disablePadding: true
|
|
20
|
+
},
|
|
21
|
+
TransitionProps: {
|
|
22
|
+
timeout: 200
|
|
23
|
+
},
|
|
24
|
+
slotProps: {
|
|
25
|
+
root: {
|
|
26
|
+
disablePortal: true
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
|
|
31
|
+
TransitionComponent: CustomTransition,
|
|
32
|
+
MenuListProps: {
|
|
33
|
+
disablePadding: true
|
|
34
|
+
},
|
|
35
|
+
TransitionProps: {
|
|
36
|
+
timeout: 200
|
|
37
|
+
},
|
|
38
|
+
slotProps: {
|
|
39
|
+
root: {
|
|
40
|
+
disablePortal: true
|
|
41
|
+
},
|
|
42
|
+
list: {
|
|
43
|
+
disableListWrap: true
|
|
44
|
+
},
|
|
45
|
+
transition: {
|
|
46
|
+
'aria-hidden': true
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Menu, {
|
|
51
|
+
TransitionComponent: CustomTransition,
|
|
52
|
+
MenuListProps: {
|
|
53
|
+
disablePadding: true
|
|
54
|
+
},
|
|
55
|
+
TransitionProps: {
|
|
56
|
+
timeout: 200
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomMenu, {
|
|
60
|
+
TransitionComponent: CustomTransition,
|
|
61
|
+
MenuListProps: {
|
|
62
|
+
disablePadding: true
|
|
63
|
+
},
|
|
64
|
+
TransitionProps: {
|
|
65
|
+
timeout: 200
|
|
66
|
+
}
|
|
67
|
+
});
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
|
|
5
|
+
var _material = require("@mui/material");
|
|
6
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
7
|
+
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
|
|
8
|
+
slotProps: {
|
|
9
|
+
list: {
|
|
10
|
+
disablePadding: true
|
|
11
|
+
},
|
|
12
|
+
transition: {
|
|
13
|
+
timeout: 200
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
slots: {
|
|
17
|
+
transition: CustomTransition
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
|
|
21
|
+
slotProps: {
|
|
22
|
+
root: {
|
|
23
|
+
disablePortal: true
|
|
24
|
+
},
|
|
25
|
+
list: {
|
|
26
|
+
disablePadding: true
|
|
27
|
+
},
|
|
28
|
+
transition: {
|
|
29
|
+
timeout: 200
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
slots: {
|
|
33
|
+
transition: CustomTransition
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
/*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
|
|
37
|
+
slotProps: {
|
|
38
|
+
root: {
|
|
39
|
+
disablePortal: true
|
|
40
|
+
},
|
|
41
|
+
list: {
|
|
42
|
+
...{
|
|
43
|
+
disablePadding: true
|
|
44
|
+
},
|
|
45
|
+
...{
|
|
46
|
+
disableListWrap: true
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
transition: {
|
|
50
|
+
...{
|
|
51
|
+
timeout: 200
|
|
52
|
+
},
|
|
53
|
+
...{
|
|
54
|
+
'aria-hidden': true
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
slots: {
|
|
59
|
+
transition: CustomTransition
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Menu, {
|
|
63
|
+
slotProps: {
|
|
64
|
+
list: {
|
|
65
|
+
disablePadding: true
|
|
66
|
+
},
|
|
67
|
+
transition: {
|
|
68
|
+
timeout: 200
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
slots: {
|
|
72
|
+
transition: CustomTransition
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
/*#__PURE__*/(0, _jsxRuntime.jsx)(CustomMenu, {
|
|
76
|
+
TransitionComponent: CustomTransition,
|
|
77
|
+
MenuListProps: {
|
|
78
|
+
disablePadding: true
|
|
79
|
+
},
|
|
80
|
+
TransitionProps: {
|
|
81
|
+
timeout: 200
|
|
82
|
+
}
|
|
83
|
+
});
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
fn({
|
|
4
|
+
MuiMenu: {
|
|
5
|
+
defaultProps: {
|
|
6
|
+
MenuListProps: {
|
|
7
|
+
disablePadding: true
|
|
8
|
+
},
|
|
9
|
+
TransitionComponent: CustomTransition,
|
|
10
|
+
TransitionProps: {
|
|
11
|
+
timeout: 200
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
fn({
|
|
17
|
+
MuiMenu: {
|
|
18
|
+
defaultProps: {
|
|
19
|
+
TransitionComponent: CustomTransition,
|
|
20
|
+
MenuListProps: {
|
|
21
|
+
disablePadding: true
|
|
22
|
+
},
|
|
23
|
+
TransitionProps: {
|
|
24
|
+
timeout: 200
|
|
25
|
+
},
|
|
26
|
+
slotProps: {
|
|
27
|
+
root: {
|
|
28
|
+
disablePortal: true
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
});
|