@mui/codemod 7.3.9 → 7.3.10

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/CHANGELOG.md CHANGED
@@ -1,5 +1,52 @@
1
1
  # [Versions](https://mui.com/versions/)
2
2
 
3
+ ## 7.3.10
4
+
5
+ <!-- generated comparing v7.3.9..v7.x -->
6
+
7
+ _Apr 8, 2026_
8
+
9
+ A big thanks to the 15 contributors who made this release possible. A few highlights ✨:
10
+
11
+ - 📖 Added the Menubar component page to the docs.
12
+
13
+ ### `@mui/material@7.3.10`
14
+
15
+ - [alert][dialog] Accessibility improvements (#48161) @silviuaavram
16
+ - [autocomplete] Add `root` slot (#47916) @GerardasB
17
+ - [autocomplete] Fix helper text focusing input when clicked (#48162) @mj12albert
18
+ - [autocomplete] Fix popup reopening on window focus regain with openOnFocus (#47914) @aman44444
19
+ - [autocomplete] Optimize selected option lookup (#48027) @anchmelev
20
+ - [autocomplete] Support full slots for clearIndicator and popupIndicator (#47913) @silviuaavram
21
+ - [button-base] Fix native button detection (#47994) @mj12albert
22
+ - [input] Fix high contrast cutoff on first character (#48160) @silviuaavram
23
+ - [list item text][card header] Revert cleanup of duplicated CSS rules (#47938) @sai6855
24
+ - [popper] Add missing classes export (#48033) @mj12albert
25
+ - [select] Fix focus visible always set on menu item (#48022) @silviuaavram
26
+ - [slider] Accept readonly array for the value prop (#47961) @pcorpet
27
+ - [switch] Add border to make it visible in high contrast mode (#48210) @silviuaavram
28
+ - [theme] Do not create channel tokens for custom colors when `nativeColor` is used (#48144) @ZeeshanTamboli
29
+ - [transitions] Performance improvements & misc fixes (#48217) @mj12albert
30
+
31
+ ### Docs
32
+
33
+ - [codemod] Add v7 migration docs for deprecated Autocomplete APIs and Autocomplete codemod (#47954) @ZeeshanTamboli
34
+ - [menubar] Add Menubar component page (#47942) @siriwatknp
35
+ - [progress] Label all demo components (#48168) @mj12albert
36
+ - [system] Update `styled` API docs for easier understanding (#47969) @olivier-lxo
37
+ - Fix the dark mode footer row shadow for the Data Grid on the advanced components page (#48152) @arminmeh
38
+ - Fix MUI X redirects (#47917) @cherniavskii
39
+ - Use direct palette vars in Tailwind v4 snippet (#47955) @Ahmad-Alaziz
40
+
41
+ ### Core
42
+
43
+ - [blog] Blogpost for upcoming price changes for MUI X (#47820) @DanailH
44
+ - [blog] Update the 2026 price changes blogpost (#47944) @DanailH
45
+ - [code-infra] Add pkg-pr-new as dev dependency (#48023) @silviuaavram
46
+ - [docs-infra] Update Release Instructions and Search Index v7 (#48109) @dav-is
47
+
48
+ All contributors of this release in alphabetical order: @Ahmad-Alaziz, @aman44444, @anchmelev, @arminmeh, @cherniavskii, @DanailH, @dav-is, @GerardasB, @mj12albert, @olivier-lxo, @pcorpet, @sai6855, @silviuaavram, @siriwatknp, @ZeeshanTamboli
49
+
3
50
  ## 7.3.9
4
51
 
5
52
  <!-- generated comparing v7.3.8..v7.x -->
package/README.md CHANGED
@@ -14,7 +14,7 @@ Some of the codemods also run [postcss](https://github.com/postcss/postcss) plug
14
14
  <!-- #npm-tag-reference -->
15
15
 
16
16
  ```bash
17
- npx @mui/codemod <codemod> <paths...>
17
+ npx @mui/codemod@^7.0.0 <codemod> <paths...>
18
18
 
19
19
  Applies a `@mui/codemod` to the specified paths
20
20
 
@@ -278,6 +278,11 @@ npx @mui/codemod@latest deprecations/alert-props <path>
278
278
  - PopperComponent={CustomPopper}
279
279
  - ListboxComponent={CustomListbox}
280
280
  - ListboxProps={{ height: 12 }}
281
+ - renderTags={(value, getTagProps, ownerState) =>
282
+ - value.map((option, index) => (
283
+ - <Chip label={option.label} {...getTagProps({ index })} />
284
+ - ))
285
+ - }
281
286
  - componentsProps={{
282
287
  - clearIndicator: { width: 10 },
283
288
  - paper: { width: 12 },
@@ -299,6 +304,11 @@ npx @mui/codemod@latest deprecations/alert-props <path>
299
304
  + popper: { width: 14 },
300
305
  + popupIndicator: { width: 16 },
301
306
  + }}
307
+ + renderValue={(value, getItemProps, ownerState) =>
308
+ + value.map((option, index) => (
309
+ + <Chip label={option.label} {...getItemProps({ index })} />
310
+ + ))
311
+ + }
302
312
  />
303
313
  ```
304
314
 
@@ -310,6 +320,10 @@ npx @mui/codemod@latest deprecations/alert-props <path>
310
320
  - PopperComponent: CustomPopper,
311
321
  - ListboxComponent: CustomListbox,
312
322
  - ListboxProps: { height: 12 },
323
+ - renderTags: (value, getTagProps, ownerState) =>
324
+ - value.map((option, index) => (
325
+ - <Chip label={option.label} {...getTagProps({ index })} />
326
+ - )),
313
327
  - componentsProps: {
314
328
  - clearIndicator: { width: 10 },
315
329
  - paper: { width: 12 },
@@ -331,10 +345,23 @@ npx @mui/codemod@latest deprecations/alert-props <path>
331
345
  + popper: { width: 14 },
332
346
  + popupIndicator: { width: 16 },
333
347
  + },
348
+ + renderValue: (value, getItemProps, ownerState) =>
349
+ + value.map((option, index) => (
350
+ + <Chip label={option.label} {...getItemProps({ index })} />
351
+ + )),
334
352
  },
335
353
  },
336
354
  ```
337
355
 
356
+ ```diff
357
+ const {
358
+ - getTagProps,
359
+ - focusedTag,
360
+ + getItemProps,
361
+ + focusedItem,
362
+ } = useAutocomplete(props);
363
+ ```
364
+
338
365
  ```bash
339
366
  npx @mui/codemod@latest deprecations/autocomplete-props <path>
340
367
  ```
@@ -2182,7 +2209,7 @@ Replace the usage of the `alpha()`, `lighten()`, and `darken()` functions from `
2182
2209
  <!-- #npm-tag-reference -->
2183
2210
 
2184
2211
  ```bash
2185
- npx @mui/codemod v7.0.0/grid-props <path>
2212
+ npx @mui/codemod@^7.0.0 v7.0.0/grid-props <path>
2186
2213
  ```
2187
2214
 
2188
2215
  Updates the usage of the `@mui/material/Grid`, `@mui/system/Grid`, and `@mui/joy/Grid` components to their updated APIs.
@@ -2203,7 +2230,7 @@ You can provide the theme breakpoints via options, for example, `--jscodeshift='
2203
2230
  <!-- #npm-tag-reference -->
2204
2231
 
2205
2232
  ```bash
2206
- npx @mui/codemod v7.0.0/grid-props <path> --jscodeshift='--muiBreakpoints=mobile,desktop'
2233
+ npx @mui/codemod@^7.0.0 v7.0.0/grid-props <path> --jscodeshift='--muiBreakpoints=mobile,desktop'
2207
2234
  ```
2208
2235
 
2209
2236
  ```diff
@@ -2216,7 +2243,7 @@ npx @mui/codemod v7.0.0/grid-props <path> --jscodeshift='--muiBreakpoints=mobile
2216
2243
  <!-- #npm-tag-reference -->
2217
2244
 
2218
2245
  ```bash
2219
- npx @mui/codemod v7.0.0/lab-removed-components <path>
2246
+ npx @mui/codemod@^7.0.0 v7.0.0/lab-removed-components <path>
2220
2247
  ```
2221
2248
 
2222
2249
  Update the import of the following components and hook moved from `@mui/lab` to `@mui/material`:
@@ -2262,12 +2289,12 @@ Updates the `InputLabel`'s `size` value from `normal` to `medium`.
2262
2289
  <!-- #npm-tag-reference -->
2263
2290
 
2264
2291
  ```bash
2265
- npx @mui/codemod v7.0.0/input-label-size-normal-medium <path>
2292
+ npx @mui/codemod@^7.0.0 v7.0.0/input-label-size-normal-medium <path>
2266
2293
  ```
2267
2294
 
2268
2295
  <!-- #host-reference -->
2269
2296
 
2270
- You can find more details about this breaking change in [the migration guide](https://next.mui.com/material-ui/migration/upgrade-to-v7/#inputlabel).
2297
+ You can find more details about this breaking change in [the migration guide](https://v7.mui.com/material-ui/migration/upgrade-to-v7/#inputlabel).
2271
2298
 
2272
2299
  ### v6.0.0
2273
2300
 
@@ -2782,7 +2809,7 @@ Renames `Autocomplete`'s `closeIcon` prop to `clearIcon`.
2782
2809
  <!-- #npm-tag-reference -->
2783
2810
 
2784
2811
  ```bash
2785
- npx @mui/codemod@latest v5.0.0/autocomplete-rename-closeicon <path>
2812
+ npx @mui/codemod@^7.0.0 v5.0.0/autocomplete-rename-closeicon <path>
2786
2813
  ```
2787
2814
 
2788
2815
  You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#autocomplete).
@@ -2801,7 +2828,7 @@ Renames `Autocomplete`'s `getOptionSelected` to `isOptionEqualToValue`.
2801
2828
  <!-- #npm-tag-reference -->
2802
2829
 
2803
2830
  ```bash
2804
- npx @mui/codemod@latest v5.0.0/autocomplete-rename-option <path>
2831
+ npx @mui/codemod@^7.0.0 v5.0.0/autocomplete-rename-option <path>
2805
2832
  ```
2806
2833
 
2807
2834
  You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#autocomplete).
@@ -2820,7 +2847,7 @@ Updates the `Avatar`'s `variant` value and `classes` key from 'circle' to 'circu
2820
2847
  <!-- #npm-tag-reference -->
2821
2848
 
2822
2849
  ```bash
2823
- npx @mui/codemod@latest v5.0.0/avatar-circle-circular <path>
2850
+ npx @mui/codemod@^7.0.0 v5.0.0/avatar-circle-circular <path>
2824
2851
  ```
2825
2852
 
2826
2853
  You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#avatar).
@@ -2855,7 +2882,7 @@ Renames the badge's props.
2855
2882
  <!-- #npm-tag-reference -->
2856
2883
 
2857
2884
  ```bash
2858
- npx @mui/codemod@latest v5.0.0/badge-overlap-value <path>
2885
+ npx @mui/codemod@^7.0.0 v5.0.0/badge-overlap-value <path>
2859
2886
  ```
2860
2887
 
2861
2888
  You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#badge).
@@ -2879,7 +2906,7 @@ This change only affects Base UI components.
2879
2906
  <!-- #npm-tag-reference -->
2880
2907
 
2881
2908
  ```bash
2882
- npx @mui/codemod@latest v5.0.0/base-rename-components-to-slots <path>
2909
+ npx @mui/codemod@^7.0.0 v5.0.0/base-rename-components-to-slots <path>
2883
2910
  ```
2884
2911
 
2885
2912
  The associated breaking change was done in [#34693](https://github.com/mui/material-ui/pull/34693).
@@ -2898,7 +2925,7 @@ Updates the Box API from separate system props to `sx`.
2898
2925
  <!-- #npm-tag-reference -->
2899
2926
 
2900
2927
  ```bash
2901
- npx @mui/codemod@latest v5.0.0/box-borderradius-values <path>
2928
+ npx @mui/codemod@^7.0.0 v5.0.0/box-borderradius-values <path>
2902
2929
  ```
2903
2930
 
2904
2931
  You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#box).
@@ -2934,7 +2961,7 @@ Renames the Box `grid*Gap` props.
2934
2961
  <!-- #npm-tag-reference -->
2935
2962
 
2936
2963
  ```bash
2937
- npx @mui/codemod@latest v5.0.0/box-rename-gap <path>
2964
+ npx @mui/codemod@^7.0.0 v5.0.0/box-rename-gap <path>
2938
2965
  ```
2939
2966
 
2940
2967
  You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#box).
@@ -2951,7 +2978,7 @@ Removes the outdated `color` prop values.
2951
2978
  <!-- #npm-tag-reference -->
2952
2979
 
2953
2980
  ```bash
2954
- npx @mui/codemod@latest v5.0.0/button-color-prop <path>
2981
+ npx @mui/codemod@^7.0.0 v5.0.0/button-color-prop <path>
2955
2982
  ```
2956
2983
 
2957
2984
  You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#button).
@@ -2968,7 +2995,7 @@ Removes the Chip `variant` prop if the value is `"default"`.
2968
2995
  <!-- #npm-tag-reference -->
2969
2996
 
2970
2997
  ```bash
2971
- npx @mui/codemod@latest v5.0.0/chip-variant-prop <path>
2998
+ npx @mui/codemod@^7.0.0 v5.0.0/chip-variant-prop <path>
2972
2999
  ```
2973
3000
 
2974
3001
  You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#chip).
@@ -2985,7 +3012,7 @@ Renames the CircularProgress `static` variant to `determinate`.
2985
3012
  <!-- #npm-tag-reference -->
2986
3013
 
2987
3014
  ```bash
2988
- npx @mui/codemod@latest v5.0.0/circularprogress-variant <path>
3015
+ npx @mui/codemod@^7.0.0 v5.0.0/circularprogress-variant <path>
2989
3016
  ```
2990
3017
 
2991
3018
  You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#circularprogress).
@@ -3004,7 +3031,7 @@ Renames `Collapse`'s `collapsedHeight` prop to `collapsedSize`.
3004
3031
  <!-- #npm-tag-reference -->
3005
3032
 
3006
3033
  ```bash
3007
- npx @mui/codemod@latest v5.0.0/collapse-rename-collapsedheight <path>
3034
+ npx @mui/codemod@^7.0.0 v5.0.0/collapse-rename-collapsedheight <path>
3008
3035
  ```
3009
3036
 
3010
3037
  You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#collapse).
@@ -3023,7 +3050,7 @@ A generic codemod to rename any component prop.
3023
3050
  <!-- #npm-tag-reference -->
3024
3051
 
3025
3052
  ```bash
3026
- npx @mui/codemod@latest v5.0.0/component-rename-prop <path> -- --component=Grid --from=prop --to=newProp
3053
+ npx @mui/codemod@^7.0.0 v5.0.0/component-rename-prop <path> -- --component=Grid --from=prop --to=newProp
3027
3054
  ```
3028
3055
 
3029
3056
  #### `core-styles-import`
@@ -3135,7 +3162,7 @@ Renames the `fade` style utility import and calls to `alpha()`.
3135
3162
  <!-- #npm-tag-reference -->
3136
3163
 
3137
3164
  ```bash
3138
- npx @mui/codemod@latest v5.0.0/fade-rename-alpha <path>
3165
+ npx @mui/codemod@^7.0.0 v5.0.0/fade-rename-alpha <path>
3139
3166
  ```
3140
3167
 
3141
3168
  You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#styles).
@@ -3152,7 +3179,7 @@ Renames `Grid`'s `justify` prop to `justifyContent`.
3152
3179
  <!-- #npm-tag-reference -->
3153
3180
 
3154
3181
  ```bash
3155
- npx @mui/codemod@latest v5.0.0/grid-justify-justifycontent <path>
3182
+ npx @mui/codemod@^7.0.0 v5.0.0/grid-justify-justifycontent <path>
3156
3183
  ```
3157
3184
 
3158
3185
  You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#grid).
@@ -3436,7 +3463,7 @@ or
3436
3463
  <!-- #npm-tag-reference -->
3437
3464
 
3438
3465
  ```bash
3439
- npx @mui/codemod@latest v5.0.0/moved-lab-modules <path>
3466
+ npx @mui/codemod@^7.0.0 v5.0.0/moved-lab-modules <path>
3440
3467
  ```
3441
3468
 
3442
3469
  You can find more details about this breaking change in the migration guide.
@@ -3500,7 +3527,7 @@ Fix private import paths.
3500
3527
  <!-- #npm-tag-reference -->
3501
3528
 
3502
3529
  ```bash
3503
- npx @mui/codemod@latest v5.0.0/optimal-imports <path>
3530
+ npx @mui/codemod@^7.0.0 v5.0.0/optimal-imports <path>
3504
3531
  ```
3505
3532
 
3506
3533
  #### `root-ref`
@@ -3629,7 +3656,7 @@ Updates breakpoint values to match new logic. ⚠️ This mod is not idempotent,
3629
3656
  <!-- #npm-tag-reference -->
3630
3657
 
3631
3658
  ```bash
3632
- npx @mui/codemod@latest v5.0.0/theme-breakpoints <path>
3659
+ npx @mui/codemod@^7.0.0 v5.0.0/theme-breakpoints <path>
3633
3660
  ```
3634
3661
 
3635
3662
  You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#theme).
@@ -3703,7 +3730,7 @@ Removes the 'px' suffix from some template strings.
3703
3730
  <!-- #npm-tag-reference -->
3704
3731
 
3705
3732
  ```bash
3706
- npx @mui/codemod@latest v5.0.0/theme-spacing <path>
3733
+ npx @mui/codemod@^7.0.0 v5.0.0/theme-spacing <path>
3707
3734
  ```
3708
3735
 
3709
3736
  You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#theme).
@@ -3736,7 +3763,7 @@ Converts all `@mui/material` submodule imports to the root module:
3736
3763
  <!-- #npm-tag-reference -->
3737
3764
 
3738
3765
  ```bash
3739
- npx @mui/codemod@latest v5.0.0/top-level-imports <path>
3766
+ npx @mui/codemod@^7.0.0 v5.0.0/top-level-imports <path>
3740
3767
  ```
3741
3768
 
3742
3769
  Head to https://mui.com/material-ui/guides/minimizing-bundle-size/ to understand when it's useful.
@@ -3788,7 +3815,7 @@ Updates Dialog, Menu, Popover, and Snackbar to use the `TransitionProps` prop to
3788
3815
  <!-- #npm-tag-reference -->
3789
3816
 
3790
3817
  ```bash
3791
- npx @mui/codemod@latest v5.0.0/use-transitionprops <path>
3818
+ npx @mui/codemod@^7.0.0 v5.0.0/use-transitionprops <path>
3792
3819
  ```
3793
3820
 
3794
3821
  You can find more details about this breaking change in [the migration guide](/material-ui/migration/v5-component-changes/#dialog).
@@ -3818,7 +3845,7 @@ The diff should look like this:
3818
3845
  <!-- #npm-tag-reference -->
3819
3846
 
3820
3847
  ```bash
3821
- npx @mui/codemod@latest v5.0.0/variant-prop <path>
3848
+ npx @mui/codemod@^7.0.0 v5.0.0/variant-prop <path>
3822
3849
  ```
3823
3850
 
3824
3851
  #### `with-mobile-dialog`
@@ -3929,7 +3956,7 @@ The diff should look like this:
3929
3956
  <!-- #npm-tag-reference -->
3930
3957
 
3931
3958
  ```bash
3932
- npx @mui/codemod@latest v4.0.0/theme-spacing-api <path>
3959
+ npx @mui/codemod@^7.0.0 v4.0.0/theme-spacing-api <path>
3933
3960
  ```
3934
3961
 
3935
3962
  This codemod tries to perform a basic expression simplification which can be improved for expressions that use more than one operation.
@@ -3956,7 +3983,7 @@ Converts all `@material-ui/core` imports more than 1 level deep to the optimal f
3956
3983
  <!-- #npm-tag-reference -->
3957
3984
 
3958
3985
  ```bash
3959
- npx @mui/codemod@latest v4.0.0/optimal-imports <path>
3986
+ npx @mui/codemod@^7.0.0 v4.0.0/optimal-imports <path>
3960
3987
  ```
3961
3988
 
3962
3989
  Head to https://mui.com/guides/minimizing-bundle-size/ to understand when it's useful.
@@ -3974,7 +4001,7 @@ Converts all `@material-ui/core` submodule imports to the root module:
3974
4001
  <!-- #npm-tag-reference -->
3975
4002
 
3976
4003
  ```bash
3977
- npx @mui/codemod@latest v4.0.0/top-level-imports <path>
4004
+ npx @mui/codemod@^7.0.0 v4.0.0/top-level-imports <path>
3978
4005
  ```
3979
4006
 
3980
4007
  Head to https://mui.com/guides/minimizing-bundle-size/ to understand when it's useful.
@@ -3995,7 +4022,7 @@ The diff should look like this:
3995
4022
  <!-- #npm-tag-reference -->
3996
4023
 
3997
4024
  ```bash
3998
- npx @mui/codemod@latest v1.0.0/import-path <path>
4025
+ npx @mui/codemod@^7.0.0 v1.0.0/import-path <path>
3999
4026
  ```
4000
4027
 
4001
4028
  **Notice**: if you are migrating from pre-v1.0, and your imports use `material-ui`, you will need to manually find and replace all references to `material-ui` in your code to `@material-ui/core`. E.g.:
@@ -4022,7 +4049,7 @@ The diff should look like this:
4022
4049
  <!-- #npm-tag-reference -->
4023
4050
 
4024
4051
  ```bash
4025
- npx @mui/codemod@latest v1.0.0/color-imports <path>
4052
+ npx @mui/codemod@^7.0.0 v1.0.0/color-imports <path>
4026
4053
  ```
4027
4054
 
4028
4055
  **additional options**
@@ -4030,7 +4057,7 @@ npx @mui/codemod@latest v1.0.0/color-imports <path>
4030
4057
  <!-- #npm-tag-reference -->
4031
4058
 
4032
4059
  ```bash
4033
- npx @mui/codemod@latest v1.0.0/color-imports <path> -- --importPath='mui/styles/colors' --targetPath='mui/colors'
4060
+ npx @mui/codemod@^7.0.0 v1.0.0/color-imports <path> -- --importPath='mui/styles/colors' --targetPath='mui/colors'
4034
4061
  ```
4035
4062
 
4036
4063
  #### `svg-icon-imports`
@@ -4048,7 +4075,7 @@ The diff should look like this:
4048
4075
  <!-- #npm-tag-reference -->
4049
4076
 
4050
4077
  ```bash
4051
- npx @mui/codemod@latest v1.0.0/svg-icon-imports <path>
4078
+ npx @mui/codemod@^7.0.0 v1.0.0/svg-icon-imports <path>
4052
4079
  ```
4053
4080
 
4054
4081
  #### `menu-item-primary-text`
@@ -4066,7 +4093,7 @@ The diff should look like this:
4066
4093
  <!-- #npm-tag-reference -->
4067
4094
 
4068
4095
  ```bash
4069
- npx @mui/codemod@latest v1.0.0/menu-item-primary-text <path>
4096
+ npx @mui/codemod@^7.0.0 v1.0.0/menu-item-primary-text <path>
4070
4097
  ```
4071
4098
 
4072
4099
  ### v0.15.0
@@ -4090,5 +4117,5 @@ The diff should look like this:
4090
4117
  <!-- #npm-tag-reference -->
4091
4118
 
4092
4119
  ```bash
4093
- npx @mui/codemod@latest v0.15.0/import-path <path>
4120
+ npx @mui/codemod@^7.0.0 v0.15.0/import-path <path>
4094
4121
  ```
@@ -12,6 +12,66 @@ var _findComponentJSX = _interopRequireDefault(require("../../util/findComponent
12
12
  var _findComponentDefaultProps = _interopRequireDefault(require("../../util/findComponentDefaultProps"));
13
13
  var _assignObject = _interopRequireDefault(require("../../util/assignObject"));
14
14
  var _appendAttribute = _interopRequireDefault(require("../../util/appendAttribute"));
15
+ function isNonComputedKey(j, path) {
16
+ const parent = path.parent.node;
17
+ return (j.ObjectProperty.check(parent) || j.Property.check(parent)) && parent.key === path.node && !parent.computed;
18
+ }
19
+ function renameIdentifiersInScope(j, scopePath, oldName, newName) {
20
+ const bindingScope = scopePath.scope.lookup(oldName);
21
+ if (!bindingScope) {
22
+ return;
23
+ }
24
+ j(bindingScope.path).find(j.Identifier, {
25
+ name: oldName
26
+ }).filter(path => {
27
+ if (isNonComputedKey(j, path)) {
28
+ return false;
29
+ }
30
+ return path.scope.lookup(oldName) === bindingScope;
31
+ }).replaceWith(() => j.identifier(newName));
32
+ }
33
+ function renameRenderTagsCallback(j, callbackPath) {
34
+ const getTagPropsParam = callbackPath.node.params[1];
35
+ if (getTagPropsParam?.type === 'Identifier' && getTagPropsParam.name === 'getTagProps') {
36
+ renameIdentifiersInScope(j, callbackPath, 'getTagProps', 'getItemProps');
37
+ }
38
+ }
39
+ function renameRenderTagsProp(j, propertyPath) {
40
+ if (propertyPath.node.key.type === 'Identifier') {
41
+ propertyPath.node.key.name = 'renderValue';
42
+ }
43
+ if (propertyPath.node.value.type === 'ArrowFunctionExpression' || propertyPath.node.value.type === 'FunctionExpression') {
44
+ renameRenderTagsCallback(j, propertyPath.get('value'));
45
+ }
46
+ }
47
+ function renameUseAutocompleteReturnMembers(j, root) {
48
+ const renamedMembers = new Map([['getTagProps', 'getItemProps'], ['focusedTag', 'focusedItem']]);
49
+ root.find(j.VariableDeclarator).filter(path => {
50
+ const {
51
+ id,
52
+ init
53
+ } = path.node;
54
+ return id.type === 'ObjectPattern' && init?.type === 'CallExpression' && init.callee.type === 'Identifier' && init.callee.name === 'useAutocomplete';
55
+ }).forEach(path => {
56
+ path.node.id.properties.forEach(property => {
57
+ if (property.type !== 'ObjectProperty' || property.key.type !== 'Identifier') {
58
+ return;
59
+ }
60
+ const nextName = renamedMembers.get(property.key.name);
61
+ if (!nextName) {
62
+ return;
63
+ }
64
+ const isShorthand = property.shorthand === true;
65
+ const localName = property.value.type === 'Identifier' ? property.value.name : null;
66
+ property.key.name = nextName;
67
+ if (isShorthand && localName) {
68
+ renameIdentifiersInScope(j, path, localName, nextName);
69
+ property.shorthand = true;
70
+ }
71
+ });
72
+ });
73
+ }
74
+
15
75
  /**
16
76
  * @param {import('jscodeshift').FileInfo} file
17
77
  * @param {import('jscodeshift').API} api
@@ -61,6 +121,15 @@ function transformer(file, api, options) {
61
121
  componentName: 'Autocomplete'
62
122
  }, elementPath => {
63
123
  const element = elementPath.node;
124
+ element.openingElement.attributes.forEach((attribute, index) => {
125
+ if (attribute.type !== 'JSXAttribute' || attribute.name.name !== 'renderTags') {
126
+ return;
127
+ }
128
+ attribute.name.name = 'renderValue';
129
+ if (attribute.value?.type === 'JSXExpressionContainer' && (attribute.value.expression.type === 'ArrowFunctionExpression' || attribute.value.expression.type === 'FunctionExpression')) {
130
+ renameRenderTagsCallback(j, elementPath.get('openingElement', 'attributes', index, 'value', 'expression'));
131
+ }
132
+ });
64
133
  const propIndex = element.openingElement.attributes.findIndex(attr => attr.type === 'JSXAttribute' && attr.name.name === 'ListboxComponent');
65
134
  if (propIndex !== -1) {
66
135
  const removedValue = element.openingElement.attributes.splice(propIndex, 1)[0].value.expression;
@@ -127,5 +196,13 @@ function transformer(file, api, options) {
127
196
  }
128
197
  path.prune();
129
198
  });
199
+ defaultPropsPathCollection.find(j.ObjectProperty, {
200
+ key: {
201
+ name: 'renderTags'
202
+ }
203
+ }).forEach(path => {
204
+ renameRenderTagsProp(j, path);
205
+ });
206
+ renameUseAutocompleteReturnMembers(j, root);
130
207
  return root.toSource(printOptions);
131
208
  }
@@ -3,6 +3,8 @@
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
4
  var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
5
5
  var _material = require("@mui/material");
6
+ var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
7
+ var _useAutocomplete = _interopRequireDefault(require("@mui/material/useAutocomplete"));
6
8
  var _jsxRuntime = require("react/jsx-runtime");
7
9
  /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
8
10
  ChipProps: {
@@ -110,4 +112,33 @@ var _jsxRuntime = require("react/jsx-runtime");
110
112
  ListboxProps: {
111
113
  height: 12
112
114
  }
115
+ });
116
+ /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
117
+ multiple: true,
118
+ options: options,
119
+ renderTags: (value, getTagProps, ownerState) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
120
+ label: option.label,
121
+ "data-focused": ownerState.focused,
122
+ ...getTagProps({
123
+ index
124
+ })
125
+ }))
126
+ });
127
+ const {
128
+ getTagProps,
129
+ focusedTag
130
+ } = (0, _useAutocomplete.default)(props);
131
+ /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
132
+ ...getTagProps({
133
+ index: focusedTag
134
+ })
135
+ });
136
+ const {
137
+ getTagProps: getAutocompleteTagProps,
138
+ focusedTag: focusedAutocompleteTag
139
+ } = (0, _useAutocomplete.default)(props);
140
+ /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
141
+ ...getAutocompleteTagProps({
142
+ index: focusedAutocompleteTag
143
+ })
113
144
  });
@@ -3,6 +3,8 @@
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
4
  var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
5
5
  var _material = require("@mui/material");
6
+ var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
7
+ var _useAutocomplete = _interopRequireDefault(require("@mui/material/useAutocomplete"));
6
8
  var _jsxRuntime = require("react/jsx-runtime");
7
9
  /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
8
10
  slots: {
@@ -122,4 +124,33 @@ var _jsxRuntime = require("react/jsx-runtime");
122
124
  ListboxProps: {
123
125
  height: 12
124
126
  }
127
+ });
128
+ /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
129
+ multiple: true,
130
+ options: options,
131
+ renderValue: (value, getItemProps, ownerState) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
132
+ label: option.label,
133
+ "data-focused": ownerState.focused,
134
+ ...getItemProps({
135
+ index
136
+ })
137
+ }))
138
+ });
139
+ const {
140
+ getItemProps,
141
+ focusedItem
142
+ } = (0, _useAutocomplete.default)(props);
143
+ /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
144
+ ...getItemProps({
145
+ index: focusedItem
146
+ })
147
+ });
148
+ const {
149
+ getItemProps: getAutocompleteTagProps,
150
+ focusedItem: focusedAutocompleteTag
151
+ } = (0, _useAutocomplete.default)(props);
152
+ /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
153
+ ...getAutocompleteTagProps({
154
+ index: focusedAutocompleteTag
155
+ })
125
156
  });
@@ -3,6 +3,7 @@
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
4
  var _Autocomplete = _interopRequireDefault(require("@org/ui/material/Autocomplete"));
5
5
  var _material = require("@org/ui/material");
6
+ var _Chip = _interopRequireDefault(require("@org/ui/material/Chip"));
6
7
  var _jsxRuntime = require("react/jsx-runtime");
7
8
  /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
8
9
  ChipProps: {
@@ -110,4 +111,14 @@ var _jsxRuntime = require("react/jsx-runtime");
110
111
  ListboxProps: {
111
112
  height: 12
112
113
  }
114
+ });
115
+ /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, {
116
+ multiple: true,
117
+ options: options,
118
+ renderTags: (value, getTagProps) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
119
+ label: option.label,
120
+ ...getTagProps({
121
+ index
122
+ })
123
+ }))
113
124
  });
@@ -3,6 +3,7 @@
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
4
  var _Autocomplete = _interopRequireDefault(require("@org/ui/material/Autocomplete"));
5
5
  var _material = require("@org/ui/material");
6
+ var _Chip = _interopRequireDefault(require("@org/ui/material/Chip"));
6
7
  var _jsxRuntime = require("react/jsx-runtime");
7
8
  /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, {
8
9
  slots: {
@@ -122,4 +123,14 @@ var _jsxRuntime = require("react/jsx-runtime");
122
123
  ListboxProps: {
123
124
  height: 12
124
125
  }
126
+ });
127
+ /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, {
128
+ multiple: true,
129
+ options: options,
130
+ renderValue: (value, getItemProps) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
131
+ label: option.label,
132
+ ...getItemProps({
133
+ index
134
+ })
135
+ }))
125
136
  });
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
 
3
+ var _jsxRuntime = require("react/jsx-runtime");
3
4
  fn({
4
5
  MuiAutocomplete: {
5
6
  defaultProps: {
@@ -12,6 +13,13 @@ fn({
12
13
  ListboxProps: {
13
14
  height: 12
14
15
  },
16
+ renderTags: (value, getTagProps, ownerState) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Chip, {
17
+ label: option.label,
18
+ "data-focused": ownerState.focused,
19
+ ...getTagProps({
20
+ index
21
+ })
22
+ })),
15
23
  componentsProps: {
16
24
  clearIndicator: {
17
25
  width: 10
@@ -41,6 +49,13 @@ fn({
41
49
  ListboxProps: {
42
50
  height: 12
43
51
  },
52
+ renderTags: (value, getTagProps, ownerState) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Chip, {
53
+ label: option.label,
54
+ "data-focused": ownerState.focused,
55
+ ...getTagProps({
56
+ index
57
+ })
58
+ })),
44
59
  slotProps: {
45
60
  popupIndicator: {
46
61
  width: 20
@@ -1,8 +1,16 @@
1
1
  "use strict";
2
2
 
3
+ var _jsxRuntime = require("react/jsx-runtime");
3
4
  fn({
4
5
  MuiAutocomplete: {
5
6
  defaultProps: {
7
+ renderValue: (value, getItemProps, ownerState) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Chip, {
8
+ label: option.label,
9
+ "data-focused": ownerState.focused,
10
+ ...getItemProps({
11
+ index
12
+ })
13
+ })),
6
14
  slots: {
7
15
  paper: CustomPaper,
8
16
  popper: CustomPopper
@@ -36,6 +44,13 @@ fn({
36
44
  fn({
37
45
  MuiAutocomplete: {
38
46
  defaultProps: {
47
+ renderValue: (value, getItemProps, ownerState) => value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Chip, {
48
+ label: option.label,
49
+ "data-focused": ownerState.focused,
50
+ ...getItemProps({
51
+ index
52
+ })
53
+ })),
39
54
  slotProps: {
40
55
  clearIndicator: {
41
56
  width: 10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/codemod",
3
- "version": "7.3.9",
3
+ "version": "7.3.10",
4
4
  "author": "MUI Team",
5
5
  "description": "Codemod scripts for Material UI.",
6
6
  "bin": "./codemod.js",