@mui/system 5.13.1 → 5.13.2
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 +41 -0
- package/Container/Container.d.ts +13 -13
- package/Container/ContainerProps.d.ts +40 -40
- package/Container/containerClasses.d.ts +22 -22
- package/Container/createContainer.d.ts +18 -18
- package/Container/createContainer.js +35 -41
- package/GlobalStyles/GlobalStyles.d.ts +13 -13
- package/GlobalStyles/index.d.ts +2 -2
- package/Stack/Stack.d.ts +14 -14
- package/Stack/StackProps.d.ts +53 -53
- package/Stack/createStack.d.ts +21 -21
- package/Stack/createStack.js +26 -24
- package/Stack/index.d.ts +5 -5
- package/Stack/stackClasses.d.ts +8 -8
- package/ThemeProvider/ThemeProvider.js +5 -9
- package/Unstable_Grid/Grid.d.ts +12 -12
- package/Unstable_Grid/GridProps.d.ts +185 -185
- package/Unstable_Grid/createGrid.d.ts +11 -11
- package/Unstable_Grid/createGrid.js +23 -21
- package/Unstable_Grid/gridClasses.d.ts +20 -20
- package/Unstable_Grid/gridGenerator.d.ts +38 -38
- package/Unstable_Grid/gridGenerator.js +18 -20
- package/Unstable_Grid/index.d.ts +5 -5
- package/breakpoints.js +6 -7
- package/createBox.js +12 -9
- package/createStyled.js +32 -40
- package/createTheme/createBreakpoints.js +26 -24
- package/createTheme/createSpacing.d.ts +10 -10
- package/createTheme/createTheme.js +14 -18
- package/cssVars/createCssVarsProvider.js +20 -21
- package/cssVars/createCssVarsTheme.d.ts +15 -15
- package/cssVars/createCssVarsTheme.js +10 -10
- package/cssVars/createGetCssVar.d.ts +5 -5
- package/cssVars/cssVarsParser.d.ts +64 -64
- package/cssVars/getInitColorSchemeScript.d.ts +42 -42
- package/cssVars/index.d.ts +5 -5
- package/cssVars/prepareCssVars.d.ts +16 -16
- package/cssVars/prepareCssVars.js +12 -13
- package/cssVars/useCurrentColorScheme.d.ts +53 -53
- package/cssVars/useCurrentColorScheme.js +11 -17
- package/esm/Container/createContainer.js +35 -41
- package/esm/Stack/createStack.js +26 -24
- package/esm/ThemeProvider/ThemeProvider.js +5 -9
- package/esm/Unstable_Grid/createGrid.js +23 -21
- package/esm/Unstable_Grid/gridGenerator.js +17 -20
- package/esm/breakpoints.js +6 -7
- package/esm/createBox.js +12 -9
- package/esm/createStyled.js +31 -38
- package/esm/createTheme/createBreakpoints.js +25 -24
- package/esm/createTheme/createTheme.js +14 -18
- package/esm/cssVars/createCssVarsProvider.js +20 -21
- package/esm/cssVars/createCssVarsTheme.js +10 -10
- package/esm/cssVars/prepareCssVars.js +12 -13
- package/esm/cssVars/useCurrentColorScheme.js +10 -17
- package/esm/propsToClassKey.js +5 -3
- package/esm/styleFunctionSx/extendSxProp.js +10 -14
- package/index.js +1 -1
- package/legacy/Container/createContainer.js +6 -7
- package/legacy/Stack/createStack.js +5 -6
- package/legacy/ThemeProvider/ThemeProvider.js +3 -4
- package/legacy/Unstable_Grid/createGrid.js +4 -6
- package/legacy/Unstable_Grid/gridGenerator.js +4 -6
- package/legacy/breakpoints.js +3 -5
- package/legacy/createBox.js +2 -4
- package/legacy/createStyled.js +11 -13
- package/legacy/createTheme/createBreakpoints.js +3 -4
- package/legacy/createTheme/createTheme.js +4 -6
- package/legacy/cssVars/createCssVarsProvider.js +5 -6
- package/legacy/cssVars/createCssVarsTheme.js +2 -4
- package/legacy/cssVars/prepareCssVars.js +3 -5
- package/legacy/cssVars/useCurrentColorScheme.js +7 -9
- package/legacy/index.js +1 -1
- package/legacy/styleFunctionSx/extendSxProp.js +4 -6
- package/modern/Container/createContainer.js +35 -41
- package/modern/Stack/createStack.js +26 -24
- package/modern/ThemeProvider/ThemeProvider.js +5 -9
- package/modern/Unstable_Grid/createGrid.js +23 -21
- package/modern/Unstable_Grid/gridGenerator.js +17 -20
- package/modern/breakpoints.js +6 -7
- package/modern/createBox.js +12 -9
- package/modern/createStyled.js +31 -38
- package/modern/createTheme/createBreakpoints.js +25 -24
- package/modern/createTheme/createTheme.js +14 -18
- package/modern/cssVars/createCssVarsProvider.js +20 -21
- package/modern/cssVars/createCssVarsTheme.js +10 -10
- package/modern/cssVars/prepareCssVars.js +12 -13
- package/modern/cssVars/useCurrentColorScheme.js +10 -17
- package/modern/index.js +1 -1
- package/modern/propsToClassKey.js +5 -3
- package/modern/styleFunctionSx/extendSxProp.js +10 -14
- package/package.json +2 -2
- package/propsToClassKey.js +6 -3
- package/styleFunctionSx/extendSxProp.js +10 -14
package/legacy/createBox.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
4
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
5
3
|
import * as React from 'react';
|
|
6
4
|
import clsx from 'clsx';
|
|
7
5
|
import styled from '@mui/styled-engine';
|
|
@@ -27,7 +25,7 @@ export default function createBox() {
|
|
|
27
25
|
_extendSxProp$compone = _extendSxProp.component,
|
|
28
26
|
component = _extendSxProp$compone === void 0 ? 'div' : _extendSxProp$compone,
|
|
29
27
|
other = _objectWithoutProperties(_extendSxProp, ["className", "component"]);
|
|
30
|
-
return /*#__PURE__*/_jsx(BoxRoot,
|
|
28
|
+
return /*#__PURE__*/_jsx(BoxRoot, _extends({
|
|
31
29
|
as: component,
|
|
32
30
|
ref: ref,
|
|
33
31
|
className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
|
package/legacy/createStyled.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
4
|
-
import
|
|
5
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
6
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
7
5
|
/* eslint-disable no-underscore-dangle */
|
|
8
6
|
import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
|
|
9
7
|
import { getDisplayName } from '@mui/utils';
|
|
@@ -86,8 +84,8 @@ export default function createStyled() {
|
|
|
86
84
|
_input$slotShouldForw = input.slotShouldForwardProp,
|
|
87
85
|
slotShouldForwardProp = _input$slotShouldForw === void 0 ? shouldForwardProp : _input$slotShouldForw;
|
|
88
86
|
var systemSx = function systemSx(props) {
|
|
89
|
-
return styleFunctionSx(
|
|
90
|
-
theme: resolveTheme(
|
|
87
|
+
return styleFunctionSx(_extends({}, props, {
|
|
88
|
+
theme: resolveTheme(_extends({}, props, {
|
|
91
89
|
defaultTheme: defaultTheme,
|
|
92
90
|
themeId: themeId
|
|
93
91
|
}))
|
|
@@ -126,7 +124,7 @@ export default function createStyled() {
|
|
|
126
124
|
// for string (html) tag, preserve the behavior in emotion & styled-components.
|
|
127
125
|
shouldForwardPropOption = undefined;
|
|
128
126
|
}
|
|
129
|
-
var defaultStyledResolver = styledEngineStyled(tag,
|
|
127
|
+
var defaultStyledResolver = styledEngineStyled(tag, _extends({
|
|
130
128
|
shouldForwardProp: shouldForwardPropOption,
|
|
131
129
|
label: label
|
|
132
130
|
}, options));
|
|
@@ -139,8 +137,8 @@ export default function createStyled() {
|
|
|
139
137
|
// component stays as a function. This condition makes sure that we do not interpolate functions
|
|
140
138
|
// which are basically components used as a selectors.
|
|
141
139
|
return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? function (props) {
|
|
142
|
-
return stylesArg(
|
|
143
|
-
theme: resolveTheme(
|
|
140
|
+
return stylesArg(_extends({}, props, {
|
|
141
|
+
theme: resolveTheme(_extends({}, props, {
|
|
144
142
|
defaultTheme: defaultTheme,
|
|
145
143
|
themeId: themeId
|
|
146
144
|
}))
|
|
@@ -150,7 +148,7 @@ export default function createStyled() {
|
|
|
150
148
|
var transformedStyleArg = styleArg;
|
|
151
149
|
if (componentName && overridesResolver) {
|
|
152
150
|
expressionsWithDefaultTheme.push(function (props) {
|
|
153
|
-
var theme = resolveTheme(
|
|
151
|
+
var theme = resolveTheme(_extends({}, props, {
|
|
154
152
|
defaultTheme: defaultTheme,
|
|
155
153
|
themeId: themeId
|
|
156
154
|
}));
|
|
@@ -161,7 +159,7 @@ export default function createStyled() {
|
|
|
161
159
|
var _ref3 = _slicedToArray(_ref2, 2),
|
|
162
160
|
slotKey = _ref3[0],
|
|
163
161
|
slotStyle = _ref3[1];
|
|
164
|
-
resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(
|
|
162
|
+
resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(_extends({}, props, {
|
|
165
163
|
theme: theme
|
|
166
164
|
})) : slotStyle;
|
|
167
165
|
});
|
|
@@ -172,7 +170,7 @@ export default function createStyled() {
|
|
|
172
170
|
}
|
|
173
171
|
if (componentName && !skipVariantsResolver) {
|
|
174
172
|
expressionsWithDefaultTheme.push(function (props) {
|
|
175
|
-
var theme = resolveTheme(
|
|
173
|
+
var theme = resolveTheme(_extends({}, props, {
|
|
176
174
|
defaultTheme: defaultTheme,
|
|
177
175
|
themeId: themeId
|
|
178
176
|
}));
|
|
@@ -195,8 +193,8 @@ export default function createStyled() {
|
|
|
195
193
|
styleArg.__emotion_real !== styleArg) {
|
|
196
194
|
// If the type is function, we need to define the default theme.
|
|
197
195
|
transformedStyleArg = function transformedStyleArg(props) {
|
|
198
|
-
return styleArg(
|
|
199
|
-
theme: resolveTheme(
|
|
196
|
+
return styleArg(_extends({}, props, {
|
|
197
|
+
theme: resolveTheme(_extends({}, props, {
|
|
200
198
|
defaultTheme: defaultTheme,
|
|
201
199
|
themeId: themeId
|
|
202
200
|
}))
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
3
|
-
|
|
4
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
3
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
5
4
|
// Sorted ASC by size. That's important.
|
|
6
5
|
// It can't be configured as it's used statically for propTypes.
|
|
7
6
|
export var breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
|
|
@@ -17,7 +16,7 @@ var sortBreakpointsValues = function sortBreakpointsValues(values) {
|
|
|
17
16
|
return breakpoint1.val - breakpoint2.val;
|
|
18
17
|
});
|
|
19
18
|
return breakpointsAsArray.reduce(function (acc, obj) {
|
|
20
|
-
return
|
|
19
|
+
return _extends({}, acc, _defineProperty({}, obj.key, obj.val));
|
|
21
20
|
}, {});
|
|
22
21
|
};
|
|
23
22
|
|
|
@@ -71,7 +70,7 @@ export default function createBreakpoints(breakpoints) {
|
|
|
71
70
|
}
|
|
72
71
|
return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
|
|
73
72
|
}
|
|
74
|
-
return
|
|
73
|
+
return _extends({
|
|
75
74
|
keys: keys,
|
|
76
75
|
values: sortedValues,
|
|
77
76
|
up: up,
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
4
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
5
3
|
import { deepmerge } from '@mui/utils';
|
|
6
4
|
import createBreakpoints from './createBreakpoints';
|
|
7
5
|
import shape from './shape';
|
|
@@ -25,11 +23,11 @@ function createTheme() {
|
|
|
25
23
|
direction: 'ltr',
|
|
26
24
|
components: {},
|
|
27
25
|
// Inject component definitions.
|
|
28
|
-
palette:
|
|
26
|
+
palette: _extends({
|
|
29
27
|
mode: 'light'
|
|
30
28
|
}, paletteInput),
|
|
31
29
|
spacing: spacing,
|
|
32
|
-
shape:
|
|
30
|
+
shape: _extends({}, shape, shapeInput)
|
|
33
31
|
}, other);
|
|
34
32
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
35
33
|
args[_key - 1] = arguments[_key];
|
|
@@ -37,7 +35,7 @@ function createTheme() {
|
|
|
37
35
|
muiTheme = args.reduce(function (acc, argument) {
|
|
38
36
|
return deepmerge(acc, argument);
|
|
39
37
|
}, muiTheme);
|
|
40
|
-
muiTheme.unstable_sxConfig =
|
|
38
|
+
muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);
|
|
41
39
|
muiTheme.unstable_sx = function sx(props) {
|
|
42
40
|
return styleFunctionSx({
|
|
43
41
|
sx: props,
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
4
5
|
import _typeof from "@babel/runtime/helpers/esm/typeof";
|
|
5
6
|
import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
|
|
6
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
7
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
8
7
|
import * as React from 'react';
|
|
9
8
|
import PropTypes from 'prop-types';
|
|
10
9
|
import { deepmerge } from '@mui/utils';
|
|
@@ -144,7 +143,7 @@ export default function createCssVarsProvider(options) {
|
|
|
144
143
|
var _generateCssVars = generateCssVars(),
|
|
145
144
|
rootCss = _generateCssVars.css,
|
|
146
145
|
rootVars = _generateCssVars.vars; // 3. Start composing the theme object
|
|
147
|
-
var theme =
|
|
146
|
+
var theme = _extends({}, restThemeProp, {
|
|
148
147
|
components: components,
|
|
149
148
|
colorSchemes: colorSchemes,
|
|
150
149
|
cssVarPrefix: cssVarPrefix,
|
|
@@ -172,7 +171,7 @@ export default function createCssVarsProvider(options) {
|
|
|
172
171
|
Object.keys(scheme).forEach(function (schemeKey) {
|
|
173
172
|
if (scheme[schemeKey] && _typeof(scheme[schemeKey]) === 'object') {
|
|
174
173
|
// shallow merge the 1st level structure of the theme.
|
|
175
|
-
theme[schemeKey] =
|
|
174
|
+
theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
|
|
176
175
|
} else {
|
|
177
176
|
theme[schemeKey] = scheme[schemeKey];
|
|
178
177
|
}
|
|
@@ -345,7 +344,7 @@ export default function createCssVarsProvider(options) {
|
|
|
345
344
|
var defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
|
|
346
345
|
var defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
|
|
347
346
|
var getInitColorSchemeScript = function getInitColorSchemeScript(params) {
|
|
348
|
-
return systemGetInitColorSchemeScript(
|
|
347
|
+
return systemGetInitColorSchemeScript(_extends({
|
|
349
348
|
attribute: defaultAttribute,
|
|
350
349
|
colorSchemeStorageKey: defaultColorSchemeStorageKey,
|
|
351
350
|
defaultMode: designSystemMode,
|
|
@@ -1,13 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
4
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
5
3
|
import prepareCssVars from './prepareCssVars';
|
|
6
4
|
function createCssVarsTheme(theme) {
|
|
7
5
|
var cssVarPrefix = theme.cssVarPrefix,
|
|
8
6
|
shouldSkipGeneratingVar = theme.shouldSkipGeneratingVar,
|
|
9
7
|
otherTheme = _objectWithoutProperties(theme, ["cssVarPrefix", "shouldSkipGeneratingVar"]);
|
|
10
|
-
return
|
|
8
|
+
return _extends({}, theme, prepareCssVars(otherTheme, {
|
|
11
9
|
prefix: cssVarPrefix,
|
|
12
10
|
shouldSkipGeneratingVar: shouldSkipGeneratingVar
|
|
13
11
|
}));
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
4
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
5
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
4
|
import { deepmerge } from '@mui/utils';
|
|
7
5
|
import cssVarsParser from './cssVarsParser';
|
|
8
6
|
function prepareCssVars(theme, parserConfig) {
|
|
@@ -48,12 +46,12 @@ function prepareCssVars(theme, parserConfig) {
|
|
|
48
46
|
var generateCssVars = function generateCssVars(colorScheme) {
|
|
49
47
|
if (!colorScheme) {
|
|
50
48
|
return {
|
|
51
|
-
css:
|
|
49
|
+
css: _extends({}, rootCss),
|
|
52
50
|
vars: rootVars
|
|
53
51
|
};
|
|
54
52
|
}
|
|
55
53
|
return {
|
|
56
|
-
css:
|
|
54
|
+
css: _extends({}, colorSchemesMap[colorScheme].css),
|
|
57
55
|
vars: colorSchemesMap[colorScheme].vars
|
|
58
56
|
};
|
|
59
57
|
};
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
3
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
2
|
import * as React from 'react';
|
|
5
3
|
import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from './getInitColorSchemeScript';
|
|
6
4
|
export function getSystemMode(mode) {
|
|
@@ -89,7 +87,7 @@ export default function useCurrentColorScheme(options) {
|
|
|
89
87
|
} catch (e) {
|
|
90
88
|
// Unsupported
|
|
91
89
|
}
|
|
92
|
-
return
|
|
90
|
+
return _extends({}, currentState, {
|
|
93
91
|
mode: newMode,
|
|
94
92
|
systemMode: getSystemMode(newMode)
|
|
95
93
|
});
|
|
@@ -104,7 +102,7 @@ export default function useCurrentColorScheme(options) {
|
|
|
104
102
|
} catch (e) {
|
|
105
103
|
// Unsupported
|
|
106
104
|
}
|
|
107
|
-
return
|
|
105
|
+
return _extends({}, currentState, {
|
|
108
106
|
lightColorScheme: defaultLightColorScheme,
|
|
109
107
|
darkColorScheme: defaultDarkColorScheme
|
|
110
108
|
});
|
|
@@ -114,7 +112,7 @@ export default function useCurrentColorScheme(options) {
|
|
|
114
112
|
console.error("`".concat(value, "` does not exist in `theme.colorSchemes`."));
|
|
115
113
|
} else {
|
|
116
114
|
setState(function (currentState) {
|
|
117
|
-
var newState =
|
|
115
|
+
var newState = _extends({}, currentState);
|
|
118
116
|
processState(currentState, function (mode) {
|
|
119
117
|
try {
|
|
120
118
|
localStorage.setItem("".concat(colorSchemeStorageKey, "-").concat(mode), value);
|
|
@@ -133,7 +131,7 @@ export default function useCurrentColorScheme(options) {
|
|
|
133
131
|
}
|
|
134
132
|
} else {
|
|
135
133
|
setState(function (currentState) {
|
|
136
|
-
var newState =
|
|
134
|
+
var newState = _extends({}, currentState);
|
|
137
135
|
var newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
|
|
138
136
|
var newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
|
|
139
137
|
if (newLightColorScheme) {
|
|
@@ -167,7 +165,7 @@ export default function useCurrentColorScheme(options) {
|
|
|
167
165
|
var handleMediaQuery = React.useCallback(function (e) {
|
|
168
166
|
if (state.mode === 'system') {
|
|
169
167
|
setState(function (currentState) {
|
|
170
|
-
return
|
|
168
|
+
return _extends({}, currentState, {
|
|
171
169
|
systemMode: e != null && e.matches ? 'dark' : 'light'
|
|
172
170
|
});
|
|
173
171
|
});
|
|
@@ -223,7 +221,7 @@ export default function useCurrentColorScheme(options) {
|
|
|
223
221
|
}
|
|
224
222
|
return undefined;
|
|
225
223
|
}, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
|
|
226
|
-
return
|
|
224
|
+
return _extends({}, state, {
|
|
227
225
|
colorScheme: colorScheme,
|
|
228
226
|
setMode: setMode,
|
|
229
227
|
setColorScheme: setColorScheme
|
package/legacy/index.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
4
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
5
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
4
|
import { isPlainObject } from '@mui/utils';
|
|
7
5
|
import defaultSxConfig from './defaultSxConfig';
|
|
8
6
|
var splitProps = function splitProps(props) {
|
|
@@ -36,12 +34,12 @@ export default function extendSxProp(props) {
|
|
|
36
34
|
if (!isPlainObject(result)) {
|
|
37
35
|
return systemProps;
|
|
38
36
|
}
|
|
39
|
-
return
|
|
37
|
+
return _extends({}, systemProps, result);
|
|
40
38
|
};
|
|
41
39
|
} else {
|
|
42
|
-
finalSx =
|
|
40
|
+
finalSx = _extends({}, systemProps, inSx);
|
|
43
41
|
}
|
|
44
|
-
return
|
|
42
|
+
return _extends({}, otherProps, {
|
|
45
43
|
sx: finalSx
|
|
46
44
|
});
|
|
47
45
|
}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
2
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
+
const _excluded = ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"];
|
|
1
4
|
import * as React from 'react';
|
|
2
5
|
import PropTypes from 'prop-types';
|
|
3
6
|
import clsx from 'clsx';
|
|
@@ -47,22 +50,20 @@ export default function createContainer(options = {}) {
|
|
|
47
50
|
const ContainerRoot = createStyledComponent(({
|
|
48
51
|
theme,
|
|
49
52
|
ownerState
|
|
50
|
-
}) => ({
|
|
53
|
+
}) => _extends({
|
|
51
54
|
width: '100%',
|
|
52
55
|
marginLeft: 'auto',
|
|
53
56
|
boxSizing: 'border-box',
|
|
54
57
|
marginRight: 'auto',
|
|
55
|
-
display: 'block'
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
}
|
|
65
|
-
})
|
|
58
|
+
display: 'block'
|
|
59
|
+
}, !ownerState.disableGutters && {
|
|
60
|
+
paddingLeft: theme.spacing(2),
|
|
61
|
+
paddingRight: theme.spacing(2),
|
|
62
|
+
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
63
|
+
[theme.breakpoints.up('sm')]: {
|
|
64
|
+
paddingLeft: theme.spacing(3),
|
|
65
|
+
paddingRight: theme.spacing(3)
|
|
66
|
+
}
|
|
66
67
|
}), ({
|
|
67
68
|
theme,
|
|
68
69
|
ownerState
|
|
@@ -79,58 +80,51 @@ export default function createContainer(options = {}) {
|
|
|
79
80
|
}, {}), ({
|
|
80
81
|
theme,
|
|
81
82
|
ownerState
|
|
82
|
-
}) => ({
|
|
83
|
+
}) => _extends({}, ownerState.maxWidth === 'xs' && {
|
|
83
84
|
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
84
|
-
|
|
85
|
+
[theme.breakpoints.up('xs')]: {
|
|
85
86
|
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
...(ownerState.maxWidth &&
|
|
87
|
+
maxWidth: Math.max(theme.breakpoints.values.xs, 444)
|
|
88
|
+
}
|
|
89
|
+
}, ownerState.maxWidth &&
|
|
90
|
+
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
91
|
+
ownerState.maxWidth !== 'xs' && {
|
|
92
92
|
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
93
|
-
ownerState.maxWidth
|
|
93
|
+
[theme.breakpoints.up(ownerState.maxWidth)]: {
|
|
94
94
|
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
|
|
98
|
-
}
|
|
99
|
-
})
|
|
95
|
+
maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`
|
|
96
|
+
}
|
|
100
97
|
}));
|
|
101
98
|
const Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
|
|
102
99
|
const props = useThemeProps(inProps);
|
|
103
100
|
const {
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
const ownerState = {
|
|
113
|
-
...props,
|
|
101
|
+
className,
|
|
102
|
+
component = 'div',
|
|
103
|
+
disableGutters = false,
|
|
104
|
+
fixed = false,
|
|
105
|
+
maxWidth = 'lg'
|
|
106
|
+
} = props,
|
|
107
|
+
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
108
|
+
const ownerState = _extends({}, props, {
|
|
114
109
|
component,
|
|
115
110
|
disableGutters,
|
|
116
111
|
fixed,
|
|
117
112
|
maxWidth
|
|
118
|
-
};
|
|
113
|
+
});
|
|
119
114
|
|
|
120
115
|
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
121
116
|
const classes = useUtilityClasses(ownerState, componentName);
|
|
122
117
|
return (
|
|
123
118
|
/*#__PURE__*/
|
|
124
119
|
// @ts-ignore theme is injected by the styled util
|
|
125
|
-
_jsx(ContainerRoot, {
|
|
120
|
+
_jsx(ContainerRoot, _extends({
|
|
126
121
|
as: component
|
|
127
122
|
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
128
123
|
,
|
|
129
124
|
ownerState: ownerState,
|
|
130
125
|
className: clsx(classes.root, className),
|
|
131
|
-
ref: ref
|
|
132
|
-
|
|
133
|
-
})
|
|
126
|
+
ref: ref
|
|
127
|
+
}, other))
|
|
134
128
|
);
|
|
135
129
|
});
|
|
136
130
|
process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
2
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
+
const _excluded = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
|
|
1
4
|
import * as React from 'react';
|
|
2
5
|
import PropTypes from 'prop-types';
|
|
3
6
|
import clsx from 'clsx';
|
|
@@ -55,18 +58,17 @@ export const style = ({
|
|
|
55
58
|
ownerState,
|
|
56
59
|
theme
|
|
57
60
|
}) => {
|
|
58
|
-
let styles = {
|
|
61
|
+
let styles = _extends({
|
|
59
62
|
display: 'flex',
|
|
60
|
-
flexDirection: 'column'
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
};
|
|
63
|
+
flexDirection: 'column'
|
|
64
|
+
}, handleBreakpoints({
|
|
65
|
+
theme
|
|
66
|
+
}, resolveBreakpointValues({
|
|
67
|
+
values: ownerState.direction,
|
|
68
|
+
breakpoints: theme.breakpoints.values
|
|
69
|
+
}), propValue => ({
|
|
70
|
+
flexDirection: propValue
|
|
71
|
+
})));
|
|
70
72
|
if (ownerState.spacing) {
|
|
71
73
|
const transformer = createUnarySpacing(theme);
|
|
72
74
|
const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
|
|
@@ -130,29 +132,29 @@ export default function createStack(options = {}) {
|
|
|
130
132
|
const themeProps = useThemeProps(inProps);
|
|
131
133
|
const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
|
|
132
134
|
const {
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
135
|
+
component = 'div',
|
|
136
|
+
direction = 'column',
|
|
137
|
+
spacing = 0,
|
|
138
|
+
divider,
|
|
139
|
+
children,
|
|
140
|
+
className,
|
|
141
|
+
useFlexGap = false
|
|
142
|
+
} = props,
|
|
143
|
+
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
142
144
|
const ownerState = {
|
|
143
145
|
direction,
|
|
144
146
|
spacing,
|
|
145
147
|
useFlexGap
|
|
146
148
|
};
|
|
147
149
|
const classes = useUtilityClasses();
|
|
148
|
-
return /*#__PURE__*/_jsx(StackRoot, {
|
|
150
|
+
return /*#__PURE__*/_jsx(StackRoot, _extends({
|
|
149
151
|
as: component,
|
|
150
152
|
ownerState: ownerState,
|
|
151
153
|
ref: ref,
|
|
152
|
-
className: clsx(classes.root, className)
|
|
153
|
-
|
|
154
|
+
className: clsx(classes.root, className)
|
|
155
|
+
}, other, {
|
|
154
156
|
children: divider ? joinChildren(children, divider) : children
|
|
155
|
-
});
|
|
157
|
+
}));
|
|
156
158
|
});
|
|
157
159
|
process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
|
|
158
160
|
children: PropTypes.node,
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
1
2
|
import * as React from 'react';
|
|
2
3
|
import PropTypes from 'prop-types';
|
|
3
4
|
import { ThemeProvider as MuiThemeProvider, useTheme as usePrivateTheme } from '@mui/private-theming';
|
|
@@ -11,10 +12,9 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
|
|
|
11
12
|
const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
|
|
12
13
|
if (typeof localTheme === 'function') {
|
|
13
14
|
const mergedTheme = localTheme(resolvedTheme);
|
|
14
|
-
const result = themeId ? {
|
|
15
|
-
...upperTheme,
|
|
15
|
+
const result = themeId ? _extends({}, upperTheme, {
|
|
16
16
|
[themeId]: mergedTheme
|
|
17
|
-
} : mergedTheme;
|
|
17
|
+
}) : mergedTheme;
|
|
18
18
|
// must return a function for the private theme to NOT merge with the upper theme.
|
|
19
19
|
// see the test case "use provided theme from a callback" in ThemeProvider.test.js
|
|
20
20
|
if (isPrivate) {
|
|
@@ -22,13 +22,9 @@ function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
|
|
|
22
22
|
}
|
|
23
23
|
return result;
|
|
24
24
|
}
|
|
25
|
-
return themeId ? {
|
|
26
|
-
...upperTheme,
|
|
25
|
+
return themeId ? _extends({}, upperTheme, {
|
|
27
26
|
[themeId]: localTheme
|
|
28
|
-
} : {
|
|
29
|
-
...upperTheme,
|
|
30
|
-
...localTheme
|
|
31
|
-
};
|
|
27
|
+
}) : _extends({}, upperTheme, localTheme);
|
|
32
28
|
}, [themeId, upperTheme, localTheme, isPrivate]);
|
|
33
29
|
}
|
|
34
30
|
|