@mui/system 5.15.20 → 5.16.1
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 +93 -0
- package/DefaultPropsProvider/DefaultPropsProvider.d.ts +12 -0
- package/DefaultPropsProvider/DefaultPropsProvider.js +73 -0
- package/DefaultPropsProvider/index.d.ts +1 -0
- package/DefaultPropsProvider/index.js +20 -0
- package/DefaultPropsProvider/package.json +6 -0
- package/InitColorSchemeScript/InitColorSchemeScript.d.ts +49 -0
- package/InitColorSchemeScript/InitColorSchemeScript.js +61 -0
- package/InitColorSchemeScript/index.d.ts +2 -0
- package/InitColorSchemeScript/index.js +13 -0
- package/InitColorSchemeScript/package.json +6 -0
- package/ThemeProvider/ThemeProvider.js +5 -1
- package/cssVars/createCssVarsProvider.d.ts +2 -2
- package/cssVars/createCssVarsProvider.js +5 -5
- package/cssVars/getInitColorSchemeScript.d.ts +2 -41
- package/cssVars/getInitColorSchemeScript.js +7 -42
- package/cssVars/useCurrentColorScheme.js +3 -3
- package/esm/DefaultPropsProvider/DefaultPropsProvider.js +64 -0
- package/esm/DefaultPropsProvider/index.js +1 -0
- package/esm/InitColorSchemeScript/InitColorSchemeScript.js +51 -0
- package/esm/InitColorSchemeScript/index.js +1 -0
- package/esm/ThemeProvider/ThemeProvider.js +5 -1
- package/esm/cssVars/createCssVarsProvider.js +2 -2
- package/esm/cssVars/getInitColorSchemeScript.js +5 -41
- package/esm/cssVars/index.js +1 -0
- package/esm/cssVars/useCurrentColorScheme.js +1 -1
- package/index.js +1 -1
- package/legacy/DefaultPropsProvider/DefaultPropsProvider.js +60 -0
- package/legacy/DefaultPropsProvider/index.js +1 -0
- package/legacy/InitColorSchemeScript/InitColorSchemeScript.js +35 -0
- package/legacy/InitColorSchemeScript/index.js +1 -0
- package/legacy/ThemeProvider/ThemeProvider.js +5 -1
- package/legacy/cssVars/createCssVarsProvider.js +2 -2
- package/legacy/cssVars/getInitColorSchemeScript.js +5 -25
- package/legacy/cssVars/index.js +1 -0
- package/legacy/cssVars/useCurrentColorScheme.js +1 -1
- package/legacy/index.js +1 -1
- package/modern/DefaultPropsProvider/DefaultPropsProvider.js +64 -0
- package/modern/DefaultPropsProvider/index.js +1 -0
- package/modern/InitColorSchemeScript/InitColorSchemeScript.js +51 -0
- package/modern/InitColorSchemeScript/index.js +1 -0
- package/modern/ThemeProvider/ThemeProvider.js +5 -1
- package/modern/cssVars/createCssVarsProvider.js +2 -2
- package/modern/cssVars/getInitColorSchemeScript.js +5 -41
- package/modern/cssVars/index.js +1 -0
- package/modern/cssVars/useCurrentColorScheme.js +1 -1
- package/modern/index.js +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,98 @@
|
|
|
1
1
|
# [Versions](https://mui.com/versions/)
|
|
2
2
|
|
|
3
|
+
## v5.16.1
|
|
4
|
+
|
|
5
|
+
_Jul 11, 2024_
|
|
6
|
+
|
|
7
|
+
A big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
|
|
8
|
+
|
|
9
|
+
- ⚛️ All packages, including Material UI, are now compatible with React 18.3.1
|
|
10
|
+
|
|
11
|
+
### `@mui/material@5.16.1`
|
|
12
|
+
|
|
13
|
+
- [AppBar] Fix inherit color is inconsistent between ThemeProvider and CssVarsProvider (#42713) @ZeeshanTamboli
|
|
14
|
+
|
|
15
|
+
### `@mui/joy@5.0.0-beta.48`
|
|
16
|
+
|
|
17
|
+
- [Autocomplete] Fix React spread key warning (#42856) @aarongarciah
|
|
18
|
+
|
|
19
|
+
### Docs
|
|
20
|
+
|
|
21
|
+
- [material-ui] Fix React 18.3 key spread warnings in Autocomplete demos (#42854) @aarongarciah
|
|
22
|
+
- [material-ui] Fix type error in virtualized table demo (#42852) @aarongarciah
|
|
23
|
+
- Fix typos (@omahs) (#42888) @omahs
|
|
24
|
+
- Fix 301 @oliviertassinari
|
|
25
|
+
|
|
26
|
+
### Core
|
|
27
|
+
|
|
28
|
+
- [core] Bump React to 18.3.1 (#42846) @aarongarciah
|
|
29
|
+
- [core] Remove react-test-renderer (#42853) @aarongarciah
|
|
30
|
+
- [core] Replace enzyme in describeConformance (#42847) @aarongarciah
|
|
31
|
+
- [test] Remove enzyme (#42850) @aarongarciah
|
|
32
|
+
- [test] Remove createMount test util (#42849) @aarongarciah
|
|
33
|
+
- [base-ui] Fix React spread key warning in test (#42855) @aarongarciah
|
|
34
|
+
- [styles][withStyles] Expect React defaultProps warning in test (#42752) (#42851) @aarongarciah
|
|
35
|
+
|
|
36
|
+
All contributors of this release in alphabetical order: @aarongarciah, @oliviertassinari, @omahs, @ZeeshanTamboli
|
|
37
|
+
|
|
38
|
+
## v5.16.0
|
|
39
|
+
|
|
40
|
+
<!-- generated comparing v5.15.21..master -->
|
|
41
|
+
|
|
42
|
+
_Jul 5, 2024_
|
|
43
|
+
|
|
44
|
+
A big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
|
|
45
|
+
|
|
46
|
+
- 🚀 Added `InitColorSchemeScript` for Next.js App Router (#42829) @siriwatknp
|
|
47
|
+
|
|
48
|
+
### `@mui/material@5.16.0`
|
|
49
|
+
|
|
50
|
+
- [Alert] Add ability to override slot props (@alexey-kozlenkov) (#42808) @alexey-kozlenkov
|
|
51
|
+
- Add `InitColorSchemeScript` for Next.js App Router (#42829) @siriwatknp
|
|
52
|
+
- Add `DefaultPropsProvider` (#42820) @siriwatknp
|
|
53
|
+
- Support `CssVarsTheme` in `responsiveFontSizes` return type (@jxdp) (#42806) @jxdp
|
|
54
|
+
- Remove warning from `getInitColorSchemeScript` (#42838) @siriwatknp
|
|
55
|
+
|
|
56
|
+
### Docs
|
|
57
|
+
|
|
58
|
+
- [docs] Fix 301 MDN redirections @oliviertassinari
|
|
59
|
+
|
|
60
|
+
### Core
|
|
61
|
+
|
|
62
|
+
- [mui-utils][test] Remove usages of deprecated react-dom APIs (@aarongarciah) (#42813) @aarongarciah
|
|
63
|
+
|
|
64
|
+
All contributors of this release in alphabetical order: @aarongarciah, @alexey-kozlenkov, @jxdp, @oliviertassinari, @siriwatknp
|
|
65
|
+
|
|
66
|
+
## v5.15.21
|
|
67
|
+
|
|
68
|
+
<!-- generated comparing v5.15.20..master -->
|
|
69
|
+
|
|
70
|
+
_Jun 28, 2024_
|
|
71
|
+
|
|
72
|
+
A big thanks to the 7 contributors who made this release possible.
|
|
73
|
+
|
|
74
|
+
### `@mui/material@5.15.21`
|
|
75
|
+
|
|
76
|
+
- [Autocomplete] Fix renderOption props type (@DiegoAndai) (#42709) @DiegoAndai
|
|
77
|
+
- [Stepper] Generate class for `nonLinear` prop (@alexismo) (#42677) @alexismo
|
|
78
|
+
|
|
79
|
+
### Docs
|
|
80
|
+
|
|
81
|
+
- Use new email for sponsoring @oliviertassinari
|
|
82
|
+
- Fix 301 links (@alexfauquette) (#42700) @alexfauquette
|
|
83
|
+
- [material-ui][Select] Fix the `SelectAutoWidth` demo menu item value (@Danielkhakbaz) (#42696) @Danielkhakbaz
|
|
84
|
+
- [material-ui][Autocomplete] Fix more React 18.3 key spread warnings in demos (#42766) @wbt
|
|
85
|
+
- [material-ui] Fix sign in side image (#42708) @zanivan
|
|
86
|
+
- [website] Add Ale to team (#42769) @alelthomas
|
|
87
|
+
|
|
88
|
+
### Core
|
|
89
|
+
|
|
90
|
+
- [core] Cherry pick pnpm updates (#42763) @DiegoAndai
|
|
91
|
+
- [website] Add Armin to the team members (@arminmeh) (#42681) @arminmeh
|
|
92
|
+
- [website] Open Staff Engineer role for Pigment CSS (@mnajdova) (#42669) @mnajdova
|
|
93
|
+
|
|
94
|
+
All contributors of this release in alphabetical order: @alexfauquette, @alexismo, @arminmeh, @Danielkhakbaz, @DiegoAndai, @mnajdova, @oliviertassinari
|
|
95
|
+
|
|
3
96
|
## v5.15.20
|
|
4
97
|
|
|
5
98
|
<!-- generated comparing v5.15.19..master -->
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
declare function DefaultPropsProvider({ value, children, }: React.PropsWithChildren<{
|
|
3
|
+
value: Record<string, any> | undefined;
|
|
4
|
+
}>): React.JSX.Element;
|
|
5
|
+
declare namespace DefaultPropsProvider {
|
|
6
|
+
var propTypes: any;
|
|
7
|
+
}
|
|
8
|
+
export declare function useDefaultProps<Props>({ props, name }: {
|
|
9
|
+
props: Props;
|
|
10
|
+
name: string;
|
|
11
|
+
}): Props;
|
|
12
|
+
export default DefaultPropsProvider;
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
exports.useDefaultProps = useDefaultProps;
|
|
10
|
+
var React = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
|
+
var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
|
|
13
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
15
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
16
|
+
const PropsContext = /*#__PURE__*/React.createContext(undefined);
|
|
17
|
+
function DefaultPropsProvider({
|
|
18
|
+
value,
|
|
19
|
+
children
|
|
20
|
+
}) {
|
|
21
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(PropsContext.Provider, {
|
|
22
|
+
value: value,
|
|
23
|
+
children: children
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
process.env.NODE_ENV !== "production" ? DefaultPropsProvider.propTypes /* remove-proptypes */ = {
|
|
27
|
+
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
28
|
+
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
29
|
+
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
30
|
+
// └─────────────────────────────────────────────────────────────────────┘
|
|
31
|
+
/**
|
|
32
|
+
* @ignore
|
|
33
|
+
*/
|
|
34
|
+
children: _propTypes.default.node,
|
|
35
|
+
/**
|
|
36
|
+
* @ignore
|
|
37
|
+
*/
|
|
38
|
+
value: _propTypes.default.object
|
|
39
|
+
} : void 0;
|
|
40
|
+
function getThemeProps(params) {
|
|
41
|
+
const {
|
|
42
|
+
theme,
|
|
43
|
+
name,
|
|
44
|
+
props
|
|
45
|
+
} = params;
|
|
46
|
+
if (!theme || !theme.components || !theme.components[name]) {
|
|
47
|
+
return props;
|
|
48
|
+
}
|
|
49
|
+
const config = theme.components[name];
|
|
50
|
+
if (config.defaultProps) {
|
|
51
|
+
// compatible with v5 signature
|
|
52
|
+
return (0, _resolveProps.default)(config.defaultProps, props);
|
|
53
|
+
}
|
|
54
|
+
if (!config.styleOverrides && !config.variants) {
|
|
55
|
+
// v6 signature, no property 'defaultProps'
|
|
56
|
+
return (0, _resolveProps.default)(config, props);
|
|
57
|
+
}
|
|
58
|
+
return props;
|
|
59
|
+
}
|
|
60
|
+
function useDefaultProps({
|
|
61
|
+
props,
|
|
62
|
+
name
|
|
63
|
+
}) {
|
|
64
|
+
const ctx = React.useContext(PropsContext);
|
|
65
|
+
return getThemeProps({
|
|
66
|
+
props,
|
|
67
|
+
name,
|
|
68
|
+
theme: {
|
|
69
|
+
components: ctx
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
var _default = exports.default = DefaultPropsProvider;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default, useDefaultProps } from './DefaultPropsProvider';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "default", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _DefaultPropsProvider.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "useDefaultProps", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _DefaultPropsProvider.useDefaultProps;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
var _DefaultPropsProvider = _interopRequireWildcard(require("./DefaultPropsProvider"));
|
|
19
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
20
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Split this component for RSC import
|
|
3
|
+
*/
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
|
|
6
|
+
export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
|
|
7
|
+
export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
|
|
8
|
+
export interface InitColorSchemeScriptProps {
|
|
9
|
+
/**
|
|
10
|
+
* The mode to be used for the first visit
|
|
11
|
+
* @default 'light'
|
|
12
|
+
*/
|
|
13
|
+
defaultMode?: 'light' | 'dark' | 'system';
|
|
14
|
+
/**
|
|
15
|
+
* The default color scheme to be used on the light mode
|
|
16
|
+
* @default 'light'
|
|
17
|
+
*/
|
|
18
|
+
defaultLightColorScheme?: string;
|
|
19
|
+
/**
|
|
20
|
+
* The default color scheme to be used on the dark mode
|
|
21
|
+
* * @default 'dark'
|
|
22
|
+
*/
|
|
23
|
+
defaultDarkColorScheme?: string;
|
|
24
|
+
/**
|
|
25
|
+
* The node (provided as string) used to attach the color-scheme attribute
|
|
26
|
+
* @default 'document.documentElement'
|
|
27
|
+
*/
|
|
28
|
+
colorSchemeNode?: string;
|
|
29
|
+
/**
|
|
30
|
+
* localStorage key used to store `mode`
|
|
31
|
+
* @default 'mode'
|
|
32
|
+
*/
|
|
33
|
+
modeStorageKey?: string;
|
|
34
|
+
/**
|
|
35
|
+
* localStorage key used to store `colorScheme`
|
|
36
|
+
* @default 'color-scheme'
|
|
37
|
+
*/
|
|
38
|
+
colorSchemeStorageKey?: string;
|
|
39
|
+
/**
|
|
40
|
+
* DOM attribute for applying color scheme
|
|
41
|
+
* @default 'data-color-scheme'
|
|
42
|
+
*/
|
|
43
|
+
attribute?: string;
|
|
44
|
+
/**
|
|
45
|
+
* Nonce string to pass to the inline script for CSP headers
|
|
46
|
+
*/
|
|
47
|
+
nonce?: string | undefined;
|
|
48
|
+
}
|
|
49
|
+
export default function InitColorSchemeScript(options?: InitColorSchemeScriptProps): React.JSX.Element;
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_ATTRIBUTE = void 0;
|
|
7
|
+
exports.default = InitColorSchemeScript;
|
|
8
|
+
var React = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
11
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
12
|
+
/**
|
|
13
|
+
* Split this component for RSC import
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
const DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_MODE_STORAGE_KEY = 'mode';
|
|
17
|
+
const DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
|
|
18
|
+
const DEFAULT_ATTRIBUTE = exports.DEFAULT_ATTRIBUTE = 'data-color-scheme';
|
|
19
|
+
function InitColorSchemeScript(options) {
|
|
20
|
+
const {
|
|
21
|
+
defaultMode = 'light',
|
|
22
|
+
defaultLightColorScheme = 'light',
|
|
23
|
+
defaultDarkColorScheme = 'dark',
|
|
24
|
+
modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
|
|
25
|
+
colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
|
|
26
|
+
attribute = DEFAULT_ATTRIBUTE,
|
|
27
|
+
colorSchemeNode = 'document.documentElement',
|
|
28
|
+
nonce
|
|
29
|
+
} = options || {};
|
|
30
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
|
|
31
|
+
suppressHydrationWarning: true,
|
|
32
|
+
nonce: typeof window === 'undefined' ? nonce : ''
|
|
33
|
+
// eslint-disable-next-line react/no-danger
|
|
34
|
+
,
|
|
35
|
+
dangerouslySetInnerHTML: {
|
|
36
|
+
__html: `(function() {
|
|
37
|
+
try {
|
|
38
|
+
var mode = localStorage.getItem('${modeStorageKey}') || '${defaultMode}';
|
|
39
|
+
var colorScheme = '';
|
|
40
|
+
if (mode === 'system') {
|
|
41
|
+
// handle system mode
|
|
42
|
+
var mql = window.matchMedia('(prefers-color-scheme: dark)');
|
|
43
|
+
if (mql.matches) {
|
|
44
|
+
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
|
|
45
|
+
} else {
|
|
46
|
+
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
if (mode === 'light') {
|
|
50
|
+
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
|
|
51
|
+
}
|
|
52
|
+
if (mode === 'dark') {
|
|
53
|
+
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
|
|
54
|
+
}
|
|
55
|
+
if (colorScheme) {
|
|
56
|
+
${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
|
|
57
|
+
}
|
|
58
|
+
} catch(e){}})();`
|
|
59
|
+
}
|
|
60
|
+
}, "mui-color-scheme-init");
|
|
61
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
Object.defineProperty(exports, "default", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () {
|
|
10
|
+
return _InitColorSchemeScript.default;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
var _InitColorSchemeScript = _interopRequireDefault(require("./InitColorSchemeScript"));
|
|
@@ -14,6 +14,7 @@ var _exactProp = _interopRequireDefault(require("@mui/utils/exactProp"));
|
|
|
14
14
|
var _styledEngine = require("@mui/styled-engine");
|
|
15
15
|
var _useThemeWithoutDefault = _interopRequireDefault(require("../useThemeWithoutDefault"));
|
|
16
16
|
var _RtlProvider = _interopRequireDefault(require("../RtlProvider"));
|
|
17
|
+
var _DefaultPropsProvider = _interopRequireDefault(require("../DefaultPropsProvider"));
|
|
17
18
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
19
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
19
20
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -68,7 +69,10 @@ function ThemeProvider(props) {
|
|
|
68
69
|
value: engineTheme,
|
|
69
70
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RtlProvider.default, {
|
|
70
71
|
value: rtlValue,
|
|
71
|
-
children:
|
|
72
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DefaultPropsProvider.default, {
|
|
73
|
+
value: engineTheme == null ? void 0 : engineTheme.components,
|
|
74
|
+
children: children
|
|
75
|
+
})
|
|
72
76
|
})
|
|
73
77
|
})
|
|
74
78
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import
|
|
2
|
+
import InitColorSchemeScript from '../InitColorSchemeScript';
|
|
3
3
|
import { Mode, Result } from './useCurrentColorScheme';
|
|
4
4
|
|
|
5
5
|
export interface ColorSchemeContextValue<SupportedColorScheme extends string>
|
|
@@ -92,7 +92,7 @@ export interface CreateCssVarsProviderResult<
|
|
|
92
92
|
>,
|
|
93
93
|
) => React.ReactElement;
|
|
94
94
|
useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
|
|
95
|
-
getInitColorSchemeScript: typeof
|
|
95
|
+
getInitColorSchemeScript: typeof InitColorSchemeScript;
|
|
96
96
|
}
|
|
97
97
|
|
|
98
98
|
export default function createCssVarsProvider<
|
|
@@ -15,7 +15,7 @@ var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
|
|
|
15
15
|
var _styledEngine = require("@mui/styled-engine");
|
|
16
16
|
var _privateTheming = require("@mui/private-theming");
|
|
17
17
|
var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
|
|
18
|
-
var
|
|
18
|
+
var _InitColorSchemeScript = _interopRequireWildcard(require("../InitColorSchemeScript/InitColorSchemeScript"));
|
|
19
19
|
var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
|
|
20
20
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
21
21
|
const _excluded = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
|
|
@@ -32,9 +32,9 @@ function createCssVarsProvider(options) {
|
|
|
32
32
|
* It should also ideally have a vars object created using `prepareCssVars`.
|
|
33
33
|
*/
|
|
34
34
|
theme: defaultTheme = {},
|
|
35
|
-
attribute: defaultAttribute =
|
|
36
|
-
modeStorageKey: defaultModeStorageKey =
|
|
37
|
-
colorSchemeStorageKey: defaultColorSchemeStorageKey =
|
|
35
|
+
attribute: defaultAttribute = _InitColorSchemeScript.DEFAULT_ATTRIBUTE,
|
|
36
|
+
modeStorageKey: defaultModeStorageKey = _InitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
|
|
37
|
+
colorSchemeStorageKey: defaultColorSchemeStorageKey = _InitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
|
|
38
38
|
defaultMode: designSystemMode = 'light',
|
|
39
39
|
defaultColorScheme: designSystemColorScheme,
|
|
40
40
|
disableTransitionOnChange: designSystemTransitionOnChange = false,
|
|
@@ -339,7 +339,7 @@ function createCssVarsProvider(options) {
|
|
|
339
339
|
} : void 0;
|
|
340
340
|
const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
|
|
341
341
|
const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
|
|
342
|
-
const getInitColorSchemeScript = params => (0,
|
|
342
|
+
const getInitColorSchemeScript = params => (0, _InitColorSchemeScript.default)((0, _extends2.default)({
|
|
343
343
|
attribute: defaultAttribute,
|
|
344
344
|
colorSchemeStorageKey: defaultColorSchemeStorageKey,
|
|
345
345
|
defaultMode: designSystemMode,
|
|
@@ -1,42 +1,3 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
|
|
3
|
-
export
|
|
4
|
-
export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
|
|
5
|
-
export interface GetInitColorSchemeScriptOptions {
|
|
6
|
-
/**
|
|
7
|
-
* The mode to be used for the first visit
|
|
8
|
-
* @default 'light'
|
|
9
|
-
*/
|
|
10
|
-
defaultMode?: 'light' | 'dark' | 'system';
|
|
11
|
-
/**
|
|
12
|
-
* The default color scheme to be used on the light mode
|
|
13
|
-
* @default 'light'
|
|
14
|
-
*/
|
|
15
|
-
defaultLightColorScheme?: string;
|
|
16
|
-
/**
|
|
17
|
-
* The default color scheme to be used on the dark mode
|
|
18
|
-
* * @default 'dark'
|
|
19
|
-
*/
|
|
20
|
-
defaultDarkColorScheme?: string;
|
|
21
|
-
/**
|
|
22
|
-
* The node (provided as string) used to attach the color-scheme attribute
|
|
23
|
-
* @default 'document.documentElement'
|
|
24
|
-
*/
|
|
25
|
-
colorSchemeNode?: string;
|
|
26
|
-
/**
|
|
27
|
-
* localStorage key used to store `mode`
|
|
28
|
-
* @default 'mode'
|
|
29
|
-
*/
|
|
30
|
-
modeStorageKey?: string;
|
|
31
|
-
/**
|
|
32
|
-
* localStorage key used to store `colorScheme`
|
|
33
|
-
* @default 'color-scheme'
|
|
34
|
-
*/
|
|
35
|
-
colorSchemeStorageKey?: string;
|
|
36
|
-
/**
|
|
37
|
-
* DOM attribute for applying color scheme
|
|
38
|
-
* @default 'data-color-scheme'
|
|
39
|
-
*/
|
|
40
|
-
attribute?: string;
|
|
41
|
-
}
|
|
42
|
-
export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions): React.JSX.Element;
|
|
2
|
+
import { InitColorSchemeScriptProps } from '../InitColorSchemeScript';
|
|
3
|
+
export default function getInitColorSchemeScript(params?: InitColorSchemeScriptProps): React.JSX.Element;
|
|
@@ -1,53 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
|
-
exports.DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_ATTRIBUTE = void 0;
|
|
7
7
|
exports.default = getInitColorSchemeScript;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
8
9
|
var React = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _InitColorSchemeScript = _interopRequireDefault(require("../InitColorSchemeScript"));
|
|
9
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
12
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
11
13
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const {
|
|
17
|
-
defaultMode = 'light',
|
|
18
|
-
defaultLightColorScheme = 'light',
|
|
19
|
-
defaultDarkColorScheme = 'dark',
|
|
20
|
-
modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
|
|
21
|
-
colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
|
|
22
|
-
attribute = DEFAULT_ATTRIBUTE,
|
|
23
|
-
colorSchemeNode = 'document.documentElement'
|
|
24
|
-
} = options || {};
|
|
25
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
|
|
26
|
-
// eslint-disable-next-line react/no-danger
|
|
27
|
-
dangerouslySetInnerHTML: {
|
|
28
|
-
__html: `(function() {
|
|
29
|
-
try {
|
|
30
|
-
var mode = localStorage.getItem('${modeStorageKey}') || '${defaultMode}';
|
|
31
|
-
var colorScheme = '';
|
|
32
|
-
if (mode === 'system') {
|
|
33
|
-
// handle system mode
|
|
34
|
-
var mql = window.matchMedia('(prefers-color-scheme: dark)');
|
|
35
|
-
if (mql.matches) {
|
|
36
|
-
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
|
|
37
|
-
} else {
|
|
38
|
-
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
if (mode === 'light') {
|
|
42
|
-
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
|
|
43
|
-
}
|
|
44
|
-
if (mode === 'dark') {
|
|
45
|
-
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
|
|
46
|
-
}
|
|
47
|
-
if (colorScheme) {
|
|
48
|
-
${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
|
|
49
|
-
}
|
|
50
|
-
} catch(e){}})();`
|
|
51
|
-
}
|
|
52
|
-
}, "mui-color-scheme-init");
|
|
14
|
+
// TODO: remove this file in v6
|
|
15
|
+
|
|
16
|
+
function getInitColorSchemeScript(params) {
|
|
17
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InitColorSchemeScript.default, (0, _extends2.default)({}, params));
|
|
53
18
|
}
|
|
@@ -10,7 +10,7 @@ exports.getColorScheme = getColorScheme;
|
|
|
10
10
|
exports.getSystemMode = getSystemMode;
|
|
11
11
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
12
12
|
var React = _interopRequireWildcard(require("react"));
|
|
13
|
-
var
|
|
13
|
+
var _InitColorSchemeScript = require("../InitColorSchemeScript/InitColorSchemeScript");
|
|
14
14
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
15
15
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
16
16
|
function getSystemMode(mode) {
|
|
@@ -65,8 +65,8 @@ function useCurrentColorScheme(options) {
|
|
|
65
65
|
defaultLightColorScheme,
|
|
66
66
|
defaultDarkColorScheme,
|
|
67
67
|
supportedColorSchemes = [],
|
|
68
|
-
modeStorageKey =
|
|
69
|
-
colorSchemeStorageKey =
|
|
68
|
+
modeStorageKey = _InitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
|
|
69
|
+
colorSchemeStorageKey = _InitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
|
|
70
70
|
storageWindow = typeof window === 'undefined' ? undefined : window
|
|
71
71
|
} = options;
|
|
72
72
|
const joinedColorSchemes = supportedColorSchemes.join(',');
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import PropTypes from 'prop-types';
|
|
5
|
+
import resolveProps from '@mui/utils/resolveProps';
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
const PropsContext = /*#__PURE__*/React.createContext(undefined);
|
|
8
|
+
function DefaultPropsProvider({
|
|
9
|
+
value,
|
|
10
|
+
children
|
|
11
|
+
}) {
|
|
12
|
+
return /*#__PURE__*/_jsx(PropsContext.Provider, {
|
|
13
|
+
value: value,
|
|
14
|
+
children: children
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
process.env.NODE_ENV !== "production" ? DefaultPropsProvider.propTypes /* remove-proptypes */ = {
|
|
18
|
+
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
19
|
+
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
20
|
+
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
21
|
+
// └─────────────────────────────────────────────────────────────────────┘
|
|
22
|
+
/**
|
|
23
|
+
* @ignore
|
|
24
|
+
*/
|
|
25
|
+
children: PropTypes.node,
|
|
26
|
+
/**
|
|
27
|
+
* @ignore
|
|
28
|
+
*/
|
|
29
|
+
value: PropTypes.object
|
|
30
|
+
} : void 0;
|
|
31
|
+
function getThemeProps(params) {
|
|
32
|
+
const {
|
|
33
|
+
theme,
|
|
34
|
+
name,
|
|
35
|
+
props
|
|
36
|
+
} = params;
|
|
37
|
+
if (!theme || !theme.components || !theme.components[name]) {
|
|
38
|
+
return props;
|
|
39
|
+
}
|
|
40
|
+
const config = theme.components[name];
|
|
41
|
+
if (config.defaultProps) {
|
|
42
|
+
// compatible with v5 signature
|
|
43
|
+
return resolveProps(config.defaultProps, props);
|
|
44
|
+
}
|
|
45
|
+
if (!config.styleOverrides && !config.variants) {
|
|
46
|
+
// v6 signature, no property 'defaultProps'
|
|
47
|
+
return resolveProps(config, props);
|
|
48
|
+
}
|
|
49
|
+
return props;
|
|
50
|
+
}
|
|
51
|
+
export function useDefaultProps({
|
|
52
|
+
props,
|
|
53
|
+
name
|
|
54
|
+
}) {
|
|
55
|
+
const ctx = React.useContext(PropsContext);
|
|
56
|
+
return getThemeProps({
|
|
57
|
+
props,
|
|
58
|
+
name,
|
|
59
|
+
theme: {
|
|
60
|
+
components: ctx
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
export default DefaultPropsProvider;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default, useDefaultProps } from './DefaultPropsProvider';
|