@mui/system 5.8.2 → 5.8.5

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 (33) hide show
  1. package/CHANGELOG.md +225 -8
  2. package/breakpoints.js +4 -2
  3. package/colorManipulator.d.ts +1 -1
  4. package/colorManipulator.js +3 -3
  5. package/createStyled.js +2 -2
  6. package/cssVars/createCssVarsProvider.d.ts +15 -15
  7. package/cssVars/createCssVarsProvider.js +14 -4
  8. package/cssVars/getInitColorSchemeScript.d.ts +6 -6
  9. package/cssVars/getInitColorSchemeScript.js +3 -3
  10. package/esm/breakpoints.js +4 -2
  11. package/esm/colorManipulator.js +3 -3
  12. package/esm/createStyled.js +2 -2
  13. package/esm/cssVars/createCssVarsProvider.js +14 -4
  14. package/esm/cssVars/getInitColorSchemeScript.js +3 -3
  15. package/esm/styleFunctionSx/styleFunctionSx.js +1 -1
  16. package/index.js +1 -1
  17. package/legacy/breakpoints.js +4 -2
  18. package/legacy/colorManipulator.js +3 -3
  19. package/legacy/createStyled.js +2 -2
  20. package/legacy/cssVars/createCssVarsProvider.js +19 -4
  21. package/legacy/cssVars/getInitColorSchemeScript.js +3 -3
  22. package/legacy/index.js +1 -1
  23. package/legacy/styleFunctionSx/styleFunctionSx.js +1 -1
  24. package/modern/breakpoints.js +4 -2
  25. package/modern/colorManipulator.js +3 -3
  26. package/modern/createStyled.js +2 -2
  27. package/modern/cssVars/createCssVarsProvider.js +14 -4
  28. package/modern/cssVars/getInitColorSchemeScript.js +3 -3
  29. package/modern/index.js +1 -1
  30. package/modern/styleFunctionSx/styleFunctionSx.js +1 -1
  31. package/package.json +4 -4
  32. package/style.d.ts +1 -0
  33. package/styleFunctionSx/styleFunctionSx.js +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,222 @@
1
1
  # [Versions](https://mui.com/versions/)
2
2
 
3
+ ## 5.8.5
4
+
5
+ <!-- generated comparing v5.8.4..master -->
6
+
7
+ _Jun 20, 2022_
8
+
9
+ A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
10
+
11
+ - 🚀 Added support for CSS variables in the `Avatar` component and the `SpeedDialAction` component respectively by @vicasas and @gin1314
12
+ - many other 🐛 bug fixes and 📚 documentation improvements
13
+
14
+ ### `@mui/material@5.8.5`
15
+
16
+ - &#8203;<!-- 30 -->[Avatar] Add support for CSS variables (#32499) @vicasas
17
+ - &#8203;<!-- 19 -->[Dialog] Fix broken styles if `maxWidth` is set to `false` (#32987) @kmurgic
18
+ - &#8203;<!-- 04 -->[SpeedDialAction] Add support for CSS variables (#32608) @gin1314
19
+ - &#8203;<!-- 02 -->[Tabs] Increment scroll of the minimum amount possible (#33103) @oliviertassinari
20
+
21
+ ### `@mui/codemod@5.8.5`
22
+
23
+ - &#8203;<!-- 24 -->[codemod] Preserve comments within jss-to-tss-react (#33170) @ryancogswell
24
+
25
+ ### `@mui/lab@5.0.0-alpha.87`
26
+
27
+ - &#8203;<!-- 06 -->[Masonry] Fix flickering when used with React 18 (#33163) @mnajdova
28
+
29
+ ### `@mui/base@5.0.0-alpha.86`
30
+
31
+ - &#8203;<!-- 29 -->[BadgeUnstyled] Accept callbacks in componentsProps (#33176) @michaldudak
32
+ - &#8203;<!-- 25 -->[ButtonUnstyled] Use useSlotProps (#33096) @michaldudak
33
+ - &#8203;<!-- 11 -->[FormControlUnstyled] Accept callbacks in componentsProps (#33180) @michaldudak
34
+ - &#8203;<!-- 10 -->[InputUnstyled] Use useSlotProps (#33094) @michaldudak
35
+ - &#8203;<!-- 05 -->[ModalUnstyled] Define ownerState and slot props' types (#32901) @michaldudak
36
+ - &#8203;<!-- 03 -->[SwitchUnstyled] Use useSlotProps (#33174) @michaldudak
37
+
38
+ ### `@mui/joy@5.0.0-alpha.33`
39
+
40
+ - &#8203;<!-- 09 -->[Joy] Add Checkbox documentation (#33171) @siriwatknp
41
+ - &#8203;<!-- 08 -->[Joy] Add List documentation (#33120) @siriwatknp
42
+ - &#8203;<!-- 07 -->[Joy] Make slider displays Joy classname (#33051) @siriwatknp
43
+
44
+ ### Docs
45
+
46
+ - &#8203;<!-- 28 -->[blog] Update Blogpost to clear confusion on "no impact" disclaimer. (#33131) @joserodolfofreitas
47
+ - &#8203;<!-- 27 -->[blog] Add post about v5 Migration guide update (#33063) @samuelsycamore
48
+ - &#8203;<!-- 26 -->[blog] Fix display on Safari (#33102) @oliviertassinari
49
+ - &#8203;<!-- 18 -->[docs] Add guide on how to use MUI Base with Tailwind CSS (#33100) @mnajdova
50
+ - &#8203;<!-- 17 -->[docs] Improve Joy template UX (#33159) @siriwatknp
51
+ - &#8203;<!-- 16 -->[docs] Update Shadow DOM guide (#33160) @cherniavskii
52
+ - &#8203;<!-- 15 -->[docs] Fix SEO regressions (#33106) @oliviertassinari
53
+ - &#8203;<!-- 14 -->[docs] Add job ad in table of content (#33143) @mnajdova
54
+ - &#8203;<!-- 13 -->[docs] Add customization as a value proposition (#33014) @oliviertassinari
55
+ - &#8203;<!-- 12 -->[examples] Add example using nextjs & @mui/styles as a starter for the migration to v5 (#33005) @mnajdova
56
+ - &#8203;<!-- 01 -->[website] Replace Airtable with Ashby links for applying to a opened position (#33193) @DanailH
57
+
58
+ ### Core
59
+
60
+ - &#8203;<!-- 31 -->[core] Add CSS variables support for Material UI components (#32835) @siriwatknp
61
+ - &#8203;<!-- 23 -->[core] Add name to workspace root package.json (#33226) @Janpot
62
+ - &#8203;<!-- 22 -->[core] Update bug template with generic instruction (#33153) @joserodolfofreitas
63
+ - &#8203;<!-- 21 -->[core] Remove dead and redundant code (#33125) @oliviertassinari
64
+ - &#8203;<!-- 20 -->[core] Improve inline code rendering within the details tag (#33086) @Harmouch101
65
+
66
+ All contributors of this release in alphabetical order: @cherniavskii, @DanailH, @gin1314, @Harmouch101, @Janpot, @joserodolfofreitas, @kmurgic, @michaldudak, @mnajdova, @oliviertassinari, @ryancogswell, @samuelsycamore, @siriwatknp, @vicasas
67
+
68
+ ## 5.8.4
69
+
70
+ <!-- generated comparing v5.8.3..master -->
71
+
72
+ _Jun 14, 2022_
73
+
74
+ A big thanks to the 24 contributors who made this release possible. Here are some highlights ✨:
75
+
76
+ - 🚀 Added support for custom breakpoints in the `Grid` component by @boutahlilsoufiane
77
+ - 📚 Added guide on how to use Material UI with Shadow DOM by @cherniavskii
78
+ - many other 🐛 bug fixes and 📚 documentation improvements
79
+
80
+ ### `@mui/material@5.8.4`
81
+
82
+ - &#8203;<!-- 36 -->[Button] Add missing classes in `ButtonClasses` type (#33040) @ZeeshanTamboli
83
+ - &#8203;<!-- 20 -->[Grid] Fix prop-type key regression (#33123) @oliviertassinari
84
+ - &#8203;<!-- 19 -->[Grid] Support custom breakpoints (#31998) @boutahlilsoufiane
85
+ - &#8203;<!-- 18 -->[Grow] Limit CSS transition bug workaround to Safari 15.4 only (#32996) @igordanchenko
86
+ - &#8203;<!-- 17 -->[Hidden] Remove dependency on hoist-non-react-statics (#33015) @oliviertassinari
87
+ - &#8203;<!-- 12 -->[Link] Add support for CSS variables (#33036) @winderica
88
+ - &#8203;<!-- 07 -->[Popover] Export `getOffsetTop` & `getOffsetLeft` from Popover's index and add typings (#32959) @rart
89
+ - &#8203;<!-- 06 -->[Slider] Fix SliderValueLabelProps type (#32895) @oliviertassinari
90
+ - &#8203;<!-- 05 -->[Snackbar] Remove `RTL` direction specific logic (#32808) @aaarichter
91
+ - &#8203;<!-- 04 -->[StepIcon] Fix text centering when changing browser font size (#32706) @alansouzati
92
+ - &#8203;<!-- 02 -->[Tabs] Scroll by width of the first visible tab if only one tab is partially visible (#32778) @frankkluijtmans
93
+
94
+ ### `@mui/system@5.8.4`
95
+
96
+ - &#8203;<!-- 38 -->[Stack, system] Apply correct responsive styles if any custom breakpoints are provided (#32913) @ZeeshanTamboli
97
+ - &#8203;<!-- 03 -->[system] Fix missing typings for ColorFormat (#32417) @l-zoy
98
+
99
+ ### `@mui/codemod@5.8.4`
100
+
101
+ - &#8203;<!-- 35 -->[codemod] Add support for `@mui/styles/makeStyles` imports (#32962) @joshkel
102
+
103
+ ### `@mui/lab@5.0.0-alpha.86`
104
+
105
+ - &#8203;<!-- 08 -->[pickers] Fix broken ref forwarding (#33107) @oliviertassinari
106
+ - &#8203;<!-- 13 -->[lab] Fix React's `forwardRef` warning when importing from the index (#33134) @mnajdova
107
+
108
+ ### `@mui/base@5.0.0-alpha.85`
109
+
110
+ - &#8203;<!-- 11 -->[MenuUnstyled] Accept callbacks in componentsProps (#32997) @michaldudak
111
+ - &#8203;<!-- 10 -->[ModalUnstyled] Fix errors from the W3C validator about incorrect aria-hidden attribute on some elements (#30920) @mkrtchian
112
+ - &#8203;<!-- 09 -->[ModalUnstyled] Fix behavior of not respecting props ariaHidden value (#32055) @tech-meppem
113
+
114
+ ### `@mui/joy@5.0.0-alpha.32`
115
+
116
+ - &#8203;<!-- 16 -->[Joy] Miscellaneous card fixes (#33129) @siriwatknp
117
+ - &#8203;<!-- 15 -->[Joy] Miscellaneous fixes (#33073) @siriwatknp
118
+ - &#8203;<!-- 14 -->[Joy] Add typography and link docs (#33047) @siriwatknp
119
+
120
+ ### Docs
121
+
122
+ - &#8203;<!-- 40 -->[Contributing.md] Local install instructions (#32975) @Moizsohail
123
+ - &#8203;<!-- 32 -->[docs] Add responsive AppBar with drawer (#32769) @dvlprAlamin
124
+ - &#8203;<!-- 31 -->[docs] Move codesandbox to MUI org (#33122) @oliviertassinari
125
+ - &#8203;<!-- 30 -->[docs] Add Shadow DOM guide (#33007) @cherniavskii
126
+ - &#8203;<!-- 29 -->[docs] Fix typo in Material UI overview page (#33087) @oliviertassinari
127
+ - &#8203;<!-- 28 -->[docs] Miscellaneous fixes in `MUI Base` docs (#33091) @ZeeshanTamboli
128
+ - &#8203;<!-- 27 -->[docs] Fix GitHub capitalization (#33071) @oliviertassinari
129
+ - &#8203;<!-- 26 -->[docs] Fix a typo in `InputUnstyled` docs (#33077) @ZeeshanTamboli
130
+ - &#8203;<!-- 25 -->[docs] Add notification for Joy blog post (#33059) @siriwatknp
131
+ - &#8203;<!-- 24 -->[docs] Improve aspect ratio docs and integration (#33065) @siriwatknp
132
+ - &#8203;<!-- 34 -->[docs] Update code block copy label (#33128) @siriwatknp
133
+ - &#8203;<!-- 23 -->[docs] Fix typo in Autocomplete CSS API (#32838) @KeaghanKennedy
134
+ - &#8203;<!-- 22 -->[docs] Improvements for Radio Group Rating Docs (#32843) @Kai-W
135
+ - &#8203;<!-- 21 -->[docs] Enable Joy pages (#33064) @siriwatknp
136
+ - &#8203;<!-- 02 -->[website] Add Joy UI to the pricing page (#33099) @danilo-leal
137
+ - &#8203;<!-- 01 -->[website] Clarify the pricing a bit (#33069) @oliviertassinari
138
+
139
+ ### Core
140
+
141
+ - &#8203;<!-- 39 -->yarn proptypes @oliviertassinari
142
+ - &#8203;<!-- 34 -->[core] Update dependencies to fix security vulnerabilities (#33095) @michaldudak
143
+ - &#8203;<!-- 33 -->[core] Import new line convention (#33068) @oliviertassinari
144
+ - &#8203;<!-- 37 -->[core] Make repository configurable in changelog script (#33130) @Janpot
145
+
146
+ All contributors of this release in alphabetical order: @aaarichter, @alansouzati, @boutahlilsoufiane, @cherniavskii, @danilo-leal, @dvlprAlamin, @frankkluijtmans, @igordanchenko, @Janpot, @joshkel, @Kai-W, @KeaghanKennedy, @l-zoy, @michaldudak, @mkrtchian, @mnajdova, @Moizsohail, @oliviertassinari, @pushys, @rart, @siriwatknp, @tech-meppem, @winderica, @ZeeshanTamboli
147
+
148
+ ## 5.8.3
149
+
150
+ <!-- generated comparing v5.8.2..master -->
151
+
152
+ _Jun 7, 2022_
153
+
154
+ A big thanks to the 15 contributors who made this release possible.
155
+ This release is mostly about 🐛 bug fixes and 📚 documentation improvements.
156
+
157
+ ### `@mui/material@5.8.3`
158
+
159
+ - [Alert] Constrain message width and allow overflow (#32747) @Janpot
160
+ - [Checkbox] Add support for CSS variables (#32579) @haneenmahd
161
+ - [Slider] Fix positioning of tooltips on vertical slider (#32919) @abhinav-22-tech
162
+
163
+ ### `@mui/system@5.8.3`
164
+
165
+ - [system] Configurable attributes for libraries (#32971) @siriwatknp
166
+
167
+ ### `@mui/codemod@5.8.3`
168
+
169
+ - [codemod] Fix infinite loop in jss-to-tss-react and add TODO (#33048) @ryancogswell
170
+
171
+ ### `@mui/lab@5.0.0-alpha.85`
172
+
173
+ - [pickers] Add deprecations when importing pickers from the lab (#32950) @flaviendelangle
174
+
175
+ ### `@mui/joy@5.0.0-alpha.31`
176
+
177
+ - [Joy] Add `Slider` component and demos (#32694) @hbjORbj
178
+ - [Joy] Add articles about customization approaches (#32887) @siriwatknp
179
+ - [Joy] Add automatic adjustment page to core features (#32980) @siriwatknp
180
+ - [Joy] Add docs about dark mode (#33002) @siriwatknp
181
+ - [Joy] Add template UIs & first look blog post (#32791) @danilo-leal
182
+
183
+ ### `@mui/base@5.0.0-alpha.84`
184
+
185
+ - [base] Remove @mui/system in tests (#32945) @kevinji
186
+ - [ButtonUnstyled] Accept callbacks in componentsProps (#32991) @michaldudak
187
+ - [SwitchUnstyled] Accept callbacks in componentsProps (#32993) @michaldudak
188
+ - [TablePaginationUnstyled] Define ownerState and slot props' types (#32905) @michaldudak
189
+ - [TabPanelUnstyled] Define ownerState and slot props' types (#32928) @michaldudak
190
+ - [TabsListUnstyled] Define ownerState and slot props' types (#32925) @michaldudak
191
+
192
+ ### Docs
193
+
194
+ - [blog] Fix anchor link scroll (#32994) @oliviertassinari
195
+ - [docs] Add "Migration" section to sidebar and revise v4-v5 content (#32740) @samuelsycamore
196
+ - [docs] Add What doesn't count as a breaking change? (#32850) @oliviertassinari
197
+ - [docs] Fix 301 link @oliviertassinari
198
+ - [docs] Fix icon color in `BadgeUnstyled` docs (#32976) @ZeeshanTamboli
199
+ - [docs] Improve product identifier (#32707) @danilo-leal
200
+ - [docs] Improve UX with back to top (#32896) @oliviertassinari
201
+ - [docs] Polish overview page to Material UI (#32954) @oliviertassinari
202
+ - [docs] Redirect older URLs (#33037) @oliviertassinari
203
+ - [docs] Remove pickers page from the Lab section (#32961) @DanailH
204
+ - [docs] Show product identifier on updated MUI X Introduction pages (#32966) @samuelsycamore
205
+ - [docs] Throw on 301 links (#32939) @oliviertassinari
206
+ - [website] Add Gerda to the about page (#33038) @danilo-leal
207
+ - [website] Polish the pricing page (#32811) @oliviertassinari
208
+ - [website] Remove unnecessary `address` dependency (#32957) @michaldudak
209
+
210
+ ### Core
211
+
212
+ - [core] Improve icon synonyms (#32742) @oliviertassinari
213
+ - [core] Prepare Next.js config for React 18 (#32963) @michaldudak
214
+ - [core] Remove dead logic (#32940) @oliviertassinari
215
+ - [core] Update dependencies to fix security vulnerabilities (#32947) @michaldudak
216
+ - Add security link to README for Tidelift @mbrookes
217
+
218
+ All contributors of this release in alphabetical order: @abhinav-22-tech, @DanailH, @danilo-leal, @flaviendelangle, @haneenmahd, @hbjORbj, @Janpot, @kevinji, @mbrookes, @michaldudak, @oliviertassinari, @ryancogswell, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
219
+
3
220
  ## 5.8.2
4
221
 
5
222
  <!-- generated comparing v5.8.1..master -->
@@ -949,7 +1166,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som
949
1166
  - &#8203;<!-- 25 -->[core] Update playwright docker to match the specified version (#31236) @siriwatknp
950
1167
  - &#8203;<!-- 24 -->[core] Remove parallel on buildTypes (#31189) @siriwatknp
951
1168
  - &#8203;<!-- 23 -->[core] Fix propTypes generation for optional any props (#31141) @m4theushw
952
- - &#8203;<!-- 04 -->[Typescript] Remove variants deprecation (#31239) @siriwatknp
1169
+ - &#8203;<!-- 04 -->[typescript] Remove variants deprecation (#31239) @siriwatknp
953
1170
 
954
1171
  All contributors of this release in alphabetical order: @adriancampos, @Andarist, @bonellia, @davwheat, @greengiraffe, @hbjORbj, @iclaude3, @m4theushw, @michaldudak, @mnajdova, @oliviertassinari, @PunitSoniME, @RedHeadphone, @robertwt7, @samuelsycamore, @siriwatknp, @sviande
955
1172
 
@@ -1014,7 +1231,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som
1014
1231
  - [Select] Allow customizing Select based on its variant (#30788) @michaldudak
1015
1232
  - [Portal] Re-export 'Portal' in material (#31003) @liradb2000
1016
1233
  - [ToggleButton] Add prop types for `onClick` and `onChange` (#30883) @sydneyjodon-wk
1017
- - [Typescript] Added TypeText declaration to the exports file (#30890) @agauravdev
1234
+ - [typescript] Added TypeText declaration to the exports file (#30890) @agauravdev
1018
1235
 
1019
1236
  ### `@mui/system@5.4.2`
1020
1237
 
@@ -1928,7 +2145,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som
1928
2145
  - &#8203;<!-- 33 -->[core] Add `experiments` index page (#29582) @siriwatknp
1929
2146
  - &#8203;<!-- 32 -->[core] Move s3 bucket ownership to mui-org (#29609) @eps1lon
1930
2147
  - &#8203;<!-- 31 -->[core] Improve support request message (#29614) @mnajdova
1931
- - &#8203;<!-- 30 -->[core] Use support request Github Action (#29594) @mnajdova
2148
+ - &#8203;<!-- 30 -->[core] Use support request GitHub Action (#29594) @mnajdova
1932
2149
  - &#8203;<!-- 29 -->[core] Remove unused `getJsxPreview` util (#29586) @ZeeshanTamboli
1933
2150
  - &#8203;<!-- 28 -->[core] Use GitHub issue forms (#28038) @oliviertassinari
1934
2151
  - &#8203;<!-- 26 -->[core] Add playground (#29423) @oliviertassinari
@@ -2598,7 +2815,7 @@ _Sep 1, 2021_
2598
2815
  A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
2599
2816
 
2600
2817
  - 🎉 Renamed packages to `@mui/*` as part of rebranding the company, following the strategy of expanding the library scope beyond Material Design. For more details about it, check the [GitHub discussion](https://github.com/mui/material-ui/discussions/27803).
2601
- - 🛠 Added `mui-replace` codemod for migrating `@material-ui/*` to new packages `@mui/*`. Check out this [codemod detail](https://github.com/mui/material-ui/blob/next/packages/mui-codemod/README.md#mui-replace) or head to [migration guide](https://mui.com/material-ui/guides/migration-v4/#preset-safe)
2818
+ - 🛠 Added `mui-replace` codemod for migrating `@material-ui/*` to new packages `@mui/*`. Check out this [codemod detail](https://github.com/mui/material-ui/blob/next/packages/mui-codemod/README.md#mui-replace) or head to [migration guide](https://mui.com/material-ui/migration/migration-v4/#preset-safe)
2602
2819
  - 🧪 Added new `<Mansory>` component to the lab, [check it out](https://mui.com/components/masonry/). It has been crafted by our first intern, @hbjORbj 👏!
2603
2820
 
2604
2821
  ### `@mui/material@5.0.0-rc.0`
@@ -4003,7 +4220,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som
4003
4220
  />
4004
4221
  ```
4005
4222
 
4006
- > Follow [this link](https://mui.com/material-ui/guides/migration-v4/#main-content) for full migration from v4 => v5
4223
+ > Follow [this link](https://mui.com/material-ui/migration/migration-v4/) for full migration from v4 => v5
4007
4224
 
4008
4225
  #### Changes
4009
4226
 
@@ -4452,8 +4669,8 @@ A big thanks to the 15 contributors who made this release possible. Here are som
4452
4669
  - &#8203;<!-- 29 -->[Button] Rename `pending` prop to `loading` in LoadingButton (#25874) @m4theushw
4453
4670
 
4454
4671
  ```diff
4455
- -<LoadingButton pending pendingIndicator="Pending..." pendingPosition="end" />
4456
- +<LoadingButton loading loadingIndicator="Pending..." loadingPosition="end" />
4672
+ -<LoadingButton pending pendingIndicator="Pending…" pendingPosition="end" />
4673
+ +<LoadingButton loading loadingIndicator="Pending…" loadingPosition="end" />
4457
4674
  ```
4458
4675
 
4459
4676
  - &#8203;<!-- 25 -->[ButtonBase] Remove buttonRef prop (#25896) @m4theushw
@@ -5983,7 +6200,7 @@ A big thanks to the 24 contributors who made this release possible. Here are som
5983
6200
  - [docs] Fix duplicated styles generated from emotion (#23809) @mnajdova
5984
6201
  - [docs] Fix icon alignment in /components/breadcrumbs (#23818) @eps1lon
5985
6202
  - [docs] Fix production deploy (#23963) @eps1lon
5986
- - [docs] Fix source on Github links (#23821) @praveenkumar-kalidass
6203
+ - [docs] Fix source on GitHub links (#23821) @praveenkumar-kalidass
5987
6204
  - [docs] Fix StickyHeaderTable round borders (#23882) @antoniopacheco
5988
6205
  - [docs] Fix typo in date picker dayjs adapter name (#23935) @andresmrm
5989
6206
  - [docs] Improve system properties page (#23961) @mnajdova
package/breakpoints.js CHANGED
@@ -180,9 +180,11 @@ function resolveBreakpointValues({
180
180
  if (Array.isArray(breakpointValues)) {
181
181
  acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
182
182
  previous = i;
183
- } else {
184
- acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous] || breakpointValues;
183
+ } else if (typeof breakpointValues === 'object') {
184
+ acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
185
185
  previous = breakpoint;
186
+ } else {
187
+ acc[breakpoint] = breakpointValues;
186
188
  }
187
189
 
188
190
  return acc;
package/colorManipulator.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export type ColorFormat = 'rgb' | 'rgba' | 'hsl' | 'hsla';
1
+ export type ColorFormat = 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'color';
2
2
  export interface ColorObject {
3
3
  type: ColorFormat;
4
4
  values: [number, number, number] | [number, number, number, number];
package/colorManipulator.js CHANGED
@@ -63,7 +63,7 @@ function intToHex(int) {
63
63
  * Returns an object with the type and values of a color.
64
64
  *
65
65
  * Note: Does not support rgb % values.
66
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
66
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
67
67
  * @returns {object} - A MUI color object: {type: string, values: number[]}
68
68
  */
69
69
 
@@ -115,7 +115,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
115
115
  /**
116
116
  * Returns a channel created from the input color.
117
117
  *
118
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
118
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
119
119
  * @returns {string} - The channel for the color, that can be used in rgba or hsla colors
120
120
  */
121
121
 
@@ -127,7 +127,7 @@ const colorChannel = color => {
127
127
  /**
128
128
  * Converts a color object with type and values to a string.
129
129
  * @param {object} color - Decomposed color
130
- * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
130
+ * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla', 'color'
131
131
  * @param {array} color.values - [n,n,n] or [n,n,n,n]
132
132
  * @returns {string} A CSS color string
133
133
  */
package/createStyled.js CHANGED
@@ -136,7 +136,7 @@ function createStyled(input = {}) {
136
136
 
137
137
  const muiStyledResolver = (styleArg, ...expressions) => {
138
138
  const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => {
139
- // On the server emotion doesn't use React.forwardRef for creating components, so the created
139
+ // On the server Emotion doesn't use React.forwardRef for creating components, so the created
140
140
  // component stays as a function. This condition makes sure that we do not interpolate functions
141
141
  // which are basically components used as a selectors.
142
142
  // eslint-disable-next-line no-underscore-dangle
@@ -194,7 +194,7 @@ function createStyled(input = {}) {
194
194
 
195
195
  transformedStyleArg = [...styleArg, ...placeholders];
196
196
  transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
197
- } else if (typeof styleArg === 'function' && // On the server emotion doesn't use React.forwardRef for creating components, so the created
197
+ } else if (typeof styleArg === 'function' && // On the server Emotion doesn't use React.forwardRef for creating components, so the created
198
198
  // component stays as a function. This condition makes sure that we do not interpolate functions
199
199
  // which are basically components used as a selectors.
200
200
  // eslint-disable-next-line no-underscore-dangle
package/cssVars/createCssVarsProvider.d.ts CHANGED
@@ -8,6 +8,21 @@ export interface ColorSchemeContextValue<SupportedColorScheme extends string>
8
8
  }
9
9
 
10
10
  export interface CssVarsProviderConfig<ColorScheme extends string> {
11
+ /**
12
+ * DOM attribute for applying color scheme
13
+ * @default 'data-color-scheme'
14
+ */
15
+ attribute?: string;
16
+ /**
17
+ * localStorage key used to store application `mode`
18
+ * @default 'mode'
19
+ */
20
+ modeStorageKey?: string;
21
+ /**
22
+ * localStorage key used to store `colorScheme`
23
+ * @default 'color-scheme'
24
+ */
25
+ colorSchemeStorageKey?: string;
11
26
  /**
12
27
  * Design system default color scheme.
13
28
  * - provides string if the design system has one default color scheme (either light or dark)
@@ -41,16 +56,6 @@ export interface CreateCssVarsProviderResult<ColorScheme extends string, ThemeIn
41
56
  props: React.PropsWithChildren<
42
57
  Partial<CssVarsProviderConfig<ColorScheme>> & {
43
58
  theme?: ThemeInput;
44
- /**
45
- * localStorage key used to store application `mode`
46
- * @default 'mui-mode'
47
- */
48
- modeStorageKey?: string;
49
- /**
50
- * DOM attribute for applying color scheme
51
- * @default 'data-mui-color-scheme'
52
- */
53
- attribute?: string;
54
59
  /**
55
60
  * The document used to perform `disableTransitionOnChange` feature
56
61
  * @default document
@@ -66,11 +71,6 @@ export interface CreateCssVarsProviderResult<ColorScheme extends string, ThemeIn
66
71
  * @default ':root'
67
72
  */
68
73
  colorSchemeSelector?: string;
69
- /**
70
- * localStorage key used to store `colorScheme`
71
- * @default 'mui-color-scheme'
72
- */
73
- colorSchemeStorageKey?: string;
74
74
  /**
75
75
  * The window that attaches the 'storage' event listener
76
76
  * @default window
package/cssVars/createCssVarsProvider.js CHANGED
@@ -44,6 +44,9 @@ exports.DISABLE_CSS_TRANSITION = DISABLE_CSS_TRANSITION;
44
44
  function createCssVarsProvider(options) {
45
45
  const {
46
46
  theme: defaultTheme = {},
47
+ attribute: defaultAttribute = _getInitColorSchemeScript.DEFAULT_ATTRIBUTE,
48
+ modeStorageKey: defaultModeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
49
+ colorSchemeStorageKey: defaultColorSchemeStorageKey = _getInitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
47
50
  defaultMode: desisgnSystemMode = 'light',
48
51
  defaultColorScheme: designSystemColorScheme,
49
52
  disableTransitionOnChange: designSystemTransitionOnChange = false,
@@ -73,9 +76,9 @@ function createCssVarsProvider(options) {
73
76
  children,
74
77
  theme: themeProp = defaultTheme,
75
78
  prefix = designSystemPrefix,
76
- modeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
77
- colorSchemeStorageKey = _getInitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
78
- attribute = _getInitColorSchemeScript.DEFAULT_ATTRIBUTE,
79
+ modeStorageKey = defaultModeStorageKey,
80
+ colorSchemeStorageKey = defaultColorSchemeStorageKey,
81
+ attribute = defaultAttribute,
79
82
  defaultMode = desisgnSystemMode,
80
83
  defaultColorScheme = designSystemColorScheme,
81
84
  disableTransitionOnChange = designSystemTransitionOnChange,
@@ -332,9 +335,16 @@ function createCssVarsProvider(options) {
332
335
  */
333
336
  theme: _propTypes.default.object
334
337
  } : void 0;
338
+
339
+ const getInitColorSchemeScript = params => (0, _getInitColorSchemeScript.default)((0, _extends2.default)({
340
+ attribute: defaultAttribute,
341
+ colorSchemeStorageKey: defaultColorSchemeStorageKey,
342
+ modeStorageKey: defaultModeStorageKey
343
+ }, params));
344
+
335
345
  return {
336
346
  CssVarsProvider,
337
347
  useColorScheme,
338
- getInitColorSchemeScript: _getInitColorSchemeScript.default
348
+ getInitColorSchemeScript
339
349
  };
340
350
  }
package/cssVars/getInitColorSchemeScript.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
- export declare const DEFAULT_MODE_STORAGE_KEY = "mui-mode";
3
- export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "mui-color-scheme";
4
- export declare const DEFAULT_ATTRIBUTE = "data-mui-color-scheme";
2
+ export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
3
+ export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
4
+ export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
5
5
  export interface GetInitColorSchemeScriptOptions {
6
6
  /**
7
7
  * If `true`, the initial color scheme is set to the user's prefers-color-scheme mode
@@ -23,17 +23,17 @@ export interface GetInitColorSchemeScriptOptions {
23
23
  colorSchemeNode?: string;
24
24
  /**
25
25
  * localStorage key used to store `mode`
26
- * @default 'mui-mode'
26
+ * @default 'mode'
27
27
  */
28
28
  modeStorageKey?: string;
29
29
  /**
30
30
  * localStorage key used to store `colorScheme`
31
- * @default 'mui-color-scheme'
31
+ * @default 'color-scheme'
32
32
  */
33
33
  colorSchemeStorageKey?: string;
34
34
  /**
35
35
  * DOM attribute for applying color scheme
36
- * @default 'data-mui-color-scheme'
36
+ * @default 'data-color-scheme'
37
37
  */
38
38
  attribute?: string;
39
39
  }
package/cssVars/getInitColorSchemeScript.js CHANGED
@@ -14,11 +14,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
14
14
 
15
15
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
16
16
 
17
- const DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
17
+ const DEFAULT_MODE_STORAGE_KEY = 'mode';
18
18
  exports.DEFAULT_MODE_STORAGE_KEY = DEFAULT_MODE_STORAGE_KEY;
19
- const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
19
+ const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
20
20
  exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = DEFAULT_COLOR_SCHEME_STORAGE_KEY;
21
- const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
21
+ const DEFAULT_ATTRIBUTE = 'data-color-scheme';
22
22
  exports.DEFAULT_ATTRIBUTE = DEFAULT_ATTRIBUTE;
23
23
 
24
24
  function getInitColorSchemeScript(options) {
package/esm/breakpoints.js CHANGED
@@ -154,9 +154,11 @@ export function resolveBreakpointValues({
154
154
  if (Array.isArray(breakpointValues)) {
155
155
  acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
156
156
  previous = i;
157
- } else {
158
- acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous] || breakpointValues;
157
+ } else if (typeof breakpointValues === 'object') {
158
+ acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
159
159
  previous = breakpoint;
160
+ } else {
161
+ acc[breakpoint] = breakpointValues;
160
162
  }
161
163
 
162
164
  return acc;
package/esm/colorManipulator.js CHANGED
@@ -45,7 +45,7 @@ function intToHex(int) {
45
45
  * Returns an object with the type and values of a color.
46
46
  *
47
47
  * Note: Does not support rgb % values.
48
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
48
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
49
49
  * @returns {object} - A MUI color object: {type: string, values: number[]}
50
50
  */
51
51
 
@@ -97,7 +97,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
97
97
  /**
98
98
  * Returns a channel created from the input color.
99
99
  *
100
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
100
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
101
101
  * @returns {string} - The channel for the color, that can be used in rgba or hsla colors
102
102
  */
103
103
 
@@ -108,7 +108,7 @@ export const colorChannel = color => {
108
108
  /**
109
109
  * Converts a color object with type and values to a string.
110
110
  * @param {object} color - Decomposed color
111
- * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
111
+ * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla', 'color'
112
112
  * @param {array} color.values - [n,n,n] or [n,n,n,n]
113
113
  * @returns {string} A CSS color string
114
114
  */
package/esm/createStyled.js CHANGED
@@ -117,7 +117,7 @@ export default function createStyled(input = {}) {
117
117
 
118
118
  const muiStyledResolver = (styleArg, ...expressions) => {
119
119
  const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => {
120
- // On the server emotion doesn't use React.forwardRef for creating components, so the created
120
+ // On the server Emotion doesn't use React.forwardRef for creating components, so the created
121
121
  // component stays as a function. This condition makes sure that we do not interpolate functions
122
122
  // which are basically components used as a selectors.
123
123
  // eslint-disable-next-line no-underscore-dangle
@@ -176,7 +176,7 @@ export default function createStyled(input = {}) {
176
176
 
177
177
  transformedStyleArg = [...styleArg, ...placeholders];
178
178
  transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
179
- } else if (typeof styleArg === 'function' && // On the server emotion doesn't use React.forwardRef for creating components, so the created
179
+ } else if (typeof styleArg === 'function' && // On the server Emotion doesn't use React.forwardRef for creating components, so the created
180
180
  // component stays as a function. This condition makes sure that we do not interpolate functions
181
181
  // which are basically components used as a selectors.
182
182
  // eslint-disable-next-line no-underscore-dangle
package/esm/cssVars/createCssVarsProvider.js CHANGED
@@ -8,7 +8,7 @@ import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui
8
8
  import { GlobalStyles } from '@mui/styled-engine';
9
9
  import cssVarsParser from './cssVarsParser';
10
10
  import ThemeProvider from '../ThemeProvider';
11
- import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
11
+ import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
12
12
  import useCurrentColorScheme from './useCurrentColorScheme';
13
13
  import createGetCssVar from './createGetCssVar';
14
14
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,6 +17,9 @@ export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-
17
17
  export default function createCssVarsProvider(options) {
18
18
  const {
19
19
  theme: defaultTheme = {},
20
+ attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
21
+ modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
22
+ colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
20
23
  defaultMode: desisgnSystemMode = 'light',
21
24
  defaultColorScheme: designSystemColorScheme,
22
25
  disableTransitionOnChange: designSystemTransitionOnChange = false,
@@ -46,9 +49,9 @@ export default function createCssVarsProvider(options) {
46
49
  children,
47
50
  theme: themeProp = defaultTheme,
48
51
  prefix = designSystemPrefix,
49
- modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
50
- colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
51
- attribute = DEFAULT_ATTRIBUTE,
52
+ modeStorageKey = defaultModeStorageKey,
53
+ colorSchemeStorageKey = defaultColorSchemeStorageKey,
54
+ attribute = defaultAttribute,
52
55
  defaultMode = desisgnSystemMode,
53
56
  defaultColorScheme = designSystemColorScheme,
54
57
  disableTransitionOnChange = designSystemTransitionOnChange,
@@ -307,6 +310,13 @@ export default function createCssVarsProvider(options) {
307
310
  */
308
311
  theme: PropTypes.object
309
312
  } : void 0;
313
+
314
+ const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({
315
+ attribute: defaultAttribute,
316
+ colorSchemeStorageKey: defaultColorSchemeStorageKey,
317
+ modeStorageKey: defaultModeStorageKey
318
+ }, params));
319
+
310
320
  return {
311
321
  CssVarsProvider,
312
322
  useColorScheme,
package/esm/cssVars/getInitColorSchemeScript.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
- export const DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
4
- export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
5
- export const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
3
+ export const DEFAULT_MODE_STORAGE_KEY = 'mode';
4
+ export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
5
+ export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
6
6
  export default function getInitColorSchemeScript(options) {
7
7
  const {
8
8
  enableSystem = false,
package/esm/styleFunctionSx/styleFunctionSx.js CHANGED
@@ -39,7 +39,7 @@ export function unstable_createStyleFunctionSx(styleFunctionMapping = defaultSty
39
39
  } = props || {};
40
40
 
41
41
  if (!sx) {
42
- return null; // emotion & styled-components will neglect null
42
+ return null; // Emotion & styled-components will neglect null
43
43
  }
44
44
  /*
45
45
  * Receive `sxInput` as object or callback
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license MUI v5.8.2
1
+ /** @license MUI v5.8.5
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/legacy/breakpoints.js CHANGED
@@ -167,9 +167,11 @@ export function resolveBreakpointValues(_ref) {
167
167
  if (Array.isArray(breakpointValues)) {
168
168
  acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
169
169
  previous = i;
170
- } else {
171
- acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous] || breakpointValues;
170
+ } else if (_typeof(breakpointValues) === 'object') {
171
+ acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
172
172
  previous = breakpoint;
173
+ } else {
174
+ acc[breakpoint] = breakpointValues;
173
175
  }
174
176
 
175
177
  return acc;
package/legacy/colorManipulator.js CHANGED
@@ -50,7 +50,7 @@ function intToHex(int) {
50
50
  * Returns an object with the type and values of a color.
51
51
  *
52
52
  * Note: Does not support rgb % values.
53
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
53
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
54
54
  * @returns {object} - A MUI color object: {type: string, values: number[]}
55
55
  */
56
56
 
@@ -102,7 +102,7 @@ export function decomposeColor(color) {
102
102
  /**
103
103
  * Returns a channel created from the input color.
104
104
  *
105
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
105
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
106
106
  * @returns {string} - The channel for the color, that can be used in rgba or hsla colors
107
107
  */
108
108
 
@@ -115,7 +115,7 @@ export var colorChannel = function colorChannel(color) {
115
115
  /**
116
116
  * Converts a color object with type and values to a string.
117
117
  * @param {object} color - Decomposed color
118
- * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
118
+ * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla', 'color'
119
119
  * @param {array} color.values - [n,n,n] or [n,n,n,n]
120
120
  * @returns {string} A CSS color string
121
121
  */
package/legacy/createStyled.js CHANGED
@@ -122,7 +122,7 @@ export default function createStyled() {
122
122
  }
123
123
 
124
124
  var expressionsWithDefaultTheme = expressions ? expressions.map(function (stylesArg) {
125
- // On the server emotion doesn't use React.forwardRef for creating components, so the created
125
+ // On the server Emotion doesn't use React.forwardRef for creating components, so the created
126
126
  // component stays as a function. This condition makes sure that we do not interpolate functions
127
127
  // which are basically components used as a selectors.
128
128
  // eslint-disable-next-line no-underscore-dangle
@@ -183,7 +183,7 @@ export default function createStyled() {
183
183
 
184
184
  transformedStyleArg = [].concat(_toConsumableArray(styleArg), _toConsumableArray(placeholders));
185
185
  transformedStyleArg.raw = [].concat(_toConsumableArray(styleArg.raw), _toConsumableArray(placeholders));
186
- } else if (typeof styleArg === 'function' && // On the server emotion doesn't use React.forwardRef for creating components, so the created
186
+ } else if (typeof styleArg === 'function' && // On the server Emotion doesn't use React.forwardRef for creating components, so the created
187
187
  // component stays as a function. This condition makes sure that we do not interpolate functions
188
188
  // which are basically components used as a selectors.
189
189
  // eslint-disable-next-line no-underscore-dangle
package/legacy/cssVars/createCssVarsProvider.js CHANGED
@@ -10,7 +10,7 @@ import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui
10
10
  import { GlobalStyles } from '@mui/styled-engine';
11
11
  import cssVarsParser from './cssVarsParser';
12
12
  import ThemeProvider from '../ThemeProvider';
13
- import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
13
+ import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
14
14
  import useCurrentColorScheme from './useCurrentColorScheme';
15
15
  import createGetCssVar from './createGetCssVar';
16
16
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -19,6 +19,12 @@ export var DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-tr
19
19
  export default function createCssVarsProvider(options) {
20
20
  var _options$theme = options.theme,
21
21
  defaultTheme = _options$theme === void 0 ? {} : _options$theme,
22
+ _options$attribute = options.attribute,
23
+ defaultAttribute = _options$attribute === void 0 ? DEFAULT_ATTRIBUTE : _options$attribute,
24
+ _options$modeStorageK = options.modeStorageKey,
25
+ defaultModeStorageKey = _options$modeStorageK === void 0 ? DEFAULT_MODE_STORAGE_KEY : _options$modeStorageK,
26
+ _options$colorSchemeS = options.colorSchemeStorageKey,
27
+ defaultColorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS,
22
28
  _options$defaultMode = options.defaultMode,
23
29
  desisgnSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
24
30
  designSystemColorScheme = options.defaultColorScheme,
@@ -54,11 +60,11 @@ export default function createCssVarsProvider(options) {
54
60
  _ref$prefix = _ref.prefix,
55
61
  prefix = _ref$prefix === void 0 ? designSystemPrefix : _ref$prefix,
56
62
  _ref$modeStorageKey = _ref.modeStorageKey,
57
- modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
63
+ modeStorageKey = _ref$modeStorageKey === void 0 ? defaultModeStorageKey : _ref$modeStorageKey,
58
64
  _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
59
- colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _ref$colorSchemeStora,
65
+ colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? defaultColorSchemeStorageKey : _ref$colorSchemeStora,
60
66
  _ref$attribute = _ref.attribute,
61
- attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute,
67
+ attribute = _ref$attribute === void 0 ? defaultAttribute : _ref$attribute,
62
68
  _ref$defaultMode = _ref.defaultMode,
63
69
  defaultMode = _ref$defaultMode === void 0 ? desisgnSystemMode : _ref$defaultMode,
64
70
  _ref$defaultColorSche = _ref.defaultColorScheme,
@@ -331,6 +337,15 @@ export default function createCssVarsProvider(options) {
331
337
  */
332
338
  theme: PropTypes.object
333
339
  } : void 0;
340
+
341
+ var getInitColorSchemeScript = function getInitColorSchemeScript(params) {
342
+ return systemGetInitColorSchemeScript(_extends({
343
+ attribute: defaultAttribute,
344
+ colorSchemeStorageKey: defaultColorSchemeStorageKey,
345
+ modeStorageKey: defaultModeStorageKey
346
+ }, params));
347
+ };
348
+
334
349
  return {
335
350
  CssVarsProvider: CssVarsProvider,
336
351
  useColorScheme: useColorScheme,
package/legacy/cssVars/getInitColorSchemeScript.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
- export var DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
4
- export var DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
5
- export var DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
3
+ export var DEFAULT_MODE_STORAGE_KEY = 'mode';
4
+ export var DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
5
+ export var DEFAULT_ATTRIBUTE = 'data-color-scheme';
6
6
  export default function getInitColorSchemeScript(options) {
7
7
  var _ref = options || {},
8
8
  _ref$enableSystem = _ref.enableSystem,
package/legacy/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license MUI v5.8.2
1
+ /** @license MUI v5.8.5
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/legacy/styleFunctionSx/styleFunctionSx.js CHANGED
@@ -47,7 +47,7 @@ export function unstable_createStyleFunctionSx() {
47
47
  theme = _ref2$theme === void 0 ? {} : _ref2$theme;
48
48
 
49
49
  if (!sx) {
50
- return null; // emotion & styled-components will neglect null
50
+ return null; // Emotion & styled-components will neglect null
51
51
  }
52
52
  /*
53
53
  * Receive `sxInput` as object or callback
package/modern/breakpoints.js CHANGED
@@ -152,9 +152,11 @@ export function resolveBreakpointValues({
152
152
  if (Array.isArray(breakpointValues)) {
153
153
  acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
154
154
  previous = i;
155
- } else {
156
- acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous] || breakpointValues;
155
+ } else if (typeof breakpointValues === 'object') {
156
+ acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
157
157
  previous = breakpoint;
158
+ } else {
159
+ acc[breakpoint] = breakpointValues;
158
160
  }
159
161
 
160
162
  return acc;
package/modern/colorManipulator.js CHANGED
@@ -45,7 +45,7 @@ function intToHex(int) {
45
45
  * Returns an object with the type and values of a color.
46
46
  *
47
47
  * Note: Does not support rgb % values.
48
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
48
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
49
49
  * @returns {object} - A MUI color object: {type: string, values: number[]}
50
50
  */
51
51
 
@@ -97,7 +97,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
97
97
  /**
98
98
  * Returns a channel created from the input color.
99
99
  *
100
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
100
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
101
101
  * @returns {string} - The channel for the color, that can be used in rgba or hsla colors
102
102
  */
103
103
 
@@ -108,7 +108,7 @@ export const colorChannel = color => {
108
108
  /**
109
109
  * Converts a color object with type and values to a string.
110
110
  * @param {object} color - Decomposed color
111
- * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
111
+ * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla', 'color'
112
112
  * @param {array} color.values - [n,n,n] or [n,n,n,n]
113
113
  * @returns {string} A CSS color string
114
114
  */
package/modern/createStyled.js CHANGED
@@ -115,7 +115,7 @@ export default function createStyled(input = {}) {
115
115
 
116
116
  const muiStyledResolver = (styleArg, ...expressions) => {
117
117
  const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => {
118
- // On the server emotion doesn't use React.forwardRef for creating components, so the created
118
+ // On the server Emotion doesn't use React.forwardRef for creating components, so the created
119
119
  // component stays as a function. This condition makes sure that we do not interpolate functions
120
120
  // which are basically components used as a selectors.
121
121
  // eslint-disable-next-line no-underscore-dangle
@@ -174,7 +174,7 @@ export default function createStyled(input = {}) {
174
174
 
175
175
  transformedStyleArg = [...styleArg, ...placeholders];
176
176
  transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
177
- } else if (typeof styleArg === 'function' && // On the server emotion doesn't use React.forwardRef for creating components, so the created
177
+ } else if (typeof styleArg === 'function' && // On the server Emotion doesn't use React.forwardRef for creating components, so the created
178
178
  // component stays as a function. This condition makes sure that we do not interpolate functions
179
179
  // which are basically components used as a selectors.
180
180
  // eslint-disable-next-line no-underscore-dangle
package/modern/cssVars/createCssVarsProvider.js CHANGED
@@ -8,7 +8,7 @@ import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui
8
8
  import { GlobalStyles } from '@mui/styled-engine';
9
9
  import cssVarsParser from './cssVarsParser';
10
10
  import ThemeProvider from '../ThemeProvider';
11
- import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
11
+ import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
12
12
  import useCurrentColorScheme from './useCurrentColorScheme';
13
13
  import createGetCssVar from './createGetCssVar';
14
14
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,6 +17,9 @@ export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-
17
17
  export default function createCssVarsProvider(options) {
18
18
  const {
19
19
  theme: defaultTheme = {},
20
+ attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
21
+ modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
22
+ colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
20
23
  defaultMode: desisgnSystemMode = 'light',
21
24
  defaultColorScheme: designSystemColorScheme,
22
25
  disableTransitionOnChange: designSystemTransitionOnChange = false,
@@ -46,9 +49,9 @@ export default function createCssVarsProvider(options) {
46
49
  children,
47
50
  theme: themeProp = defaultTheme,
48
51
  prefix = designSystemPrefix,
49
- modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
50
- colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
51
- attribute = DEFAULT_ATTRIBUTE,
52
+ modeStorageKey = defaultModeStorageKey,
53
+ colorSchemeStorageKey = defaultColorSchemeStorageKey,
54
+ attribute = defaultAttribute,
52
55
  defaultMode = desisgnSystemMode,
53
56
  defaultColorScheme = designSystemColorScheme,
54
57
  disableTransitionOnChange = designSystemTransitionOnChange,
@@ -307,6 +310,13 @@ export default function createCssVarsProvider(options) {
307
310
  */
308
311
  theme: PropTypes.object
309
312
  } : void 0;
313
+
314
+ const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({
315
+ attribute: defaultAttribute,
316
+ colorSchemeStorageKey: defaultColorSchemeStorageKey,
317
+ modeStorageKey: defaultModeStorageKey
318
+ }, params));
319
+
310
320
  return {
311
321
  CssVarsProvider,
312
322
  useColorScheme,
package/modern/cssVars/getInitColorSchemeScript.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
- export const DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
4
- export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
5
- export const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
3
+ export const DEFAULT_MODE_STORAGE_KEY = 'mode';
4
+ export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
5
+ export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
6
6
  export default function getInitColorSchemeScript(options) {
7
7
  const {
8
8
  enableSystem = false,
package/modern/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license MUI v5.8.2
1
+ /** @license MUI v5.8.5
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
package/modern/styleFunctionSx/styleFunctionSx.js CHANGED
@@ -39,7 +39,7 @@ export function unstable_createStyleFunctionSx(styleFunctionMapping = defaultSty
39
39
  } = props || {};
40
40
 
41
41
  if (!sx) {
42
- return null; // emotion & styled-components will neglect null
42
+ return null; // Emotion & styled-components will neglect null
43
43
  }
44
44
  /*
45
45
  * Receive `sxInput` as object or callback
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/system",
3
- "version": "5.8.2",
3
+ "version": "5.8.5",
4
4
  "private": false,
5
5
  "author": "MUI Team",
6
6
  "description": "CSS utilities for rapidly laying out custom designs.",
@@ -44,10 +44,10 @@
44
44
  },
45
45
  "dependencies": {
46
46
  "@babel/runtime": "^7.17.2",
47
- "@mui/private-theming": "^5.8.0",
47
+ "@mui/private-theming": "^5.8.4",
48
48
  "@mui/styled-engine": "^5.8.0",
49
- "@mui/types": "^7.1.3",
50
- "@mui/utils": "^5.8.0",
49
+ "@mui/types": "^7.1.4",
50
+ "@mui/utils": "^5.8.4",
51
51
  "clsx": "^1.1.1",
52
52
  "csstype": "^3.1.0",
53
53
  "prop-types": "^15.8.1"
package/style.d.ts CHANGED
@@ -13,3 +13,4 @@ export interface StyleOptions<PropKey> {
13
13
  export function style<PropKey extends string, Theme extends object>(
14
14
  options: StyleOptions<PropKey>,
15
15
  ): StyleFunction<{ [K in PropKey]?: unknown } & { theme?: Theme }> & { filterProps: string[] };
16
+ export function getPath<T>(obj: T, path: string | undefined, checkVars?: boolean): null | unknown;
package/styleFunctionSx/styleFunctionSx.js CHANGED
@@ -51,7 +51,7 @@ function unstable_createStyleFunctionSx(styleFunctionMapping = _getThemeValue.st
51
51
  } = props || {};
52
52
 
53
53
  if (!sx) {
54
- return null; // emotion & styled-components will neglect null
54
+ return null; // Emotion & styled-components will neglect null
55
55
  }
56
56
  /*
57
57
  * Receive `sxInput` as object or callback