Socket
Socket
Sign inDemoInstall

@mui/system

Package Overview
Dependencies
Maintainers
11
Versions
161
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mui/system - npm Package Compare versions

Comparing version 5.0.6 to 5.1.0

cssVars/useCurrentColorScheme.d.ts
cssVars/useCurrentColorScheme.js
esm/cssVars/useCurrentColorScheme.js
legacy/cssVars/useCurrentColorScheme.js
modern/cssVars/useCurrentColorScheme.js
styleFunctionSx/styleFunctionSx.spec.d.ts

49

breakpoints.js

@@ -8,2 +8,3 @@ "use strict";

});
exports.computeBreakpointsBase = computeBreakpointsBase;
exports.createEmptyBreakpointObject = createEmptyBreakpointObject;

@@ -31,3 +32,3 @@ exports.default = void 0;

sm: 600,
// tablets
// tablet
md: 900,

@@ -37,3 +38,3 @@ // small laptop

// desktop
xl: 1536 // large screens
xl: 1536 // large screen

@@ -137,2 +138,31 @@ };

return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
} // compute base for responsive values; e.g.,
// [1,2,3] => {xs: true, sm: true, md: true}
// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
// fixed value
if (typeof breakpointValues !== 'object') {
return {};
}
const base = {};
const breakpointsKeys = Object.keys(themeBreakpoints);
if (Array.isArray(breakpointValues)) {
breakpointsKeys.forEach((breakpoint, i) => {
if (i < breakpointValues.length) {
base[breakpoint] = true;
}
});
} else {
breakpointsKeys.forEach(breakpoint => {
if (breakpointValues[breakpoint] != null) {
base[breakpoint] = true;
}
});
}
return base;
}

@@ -142,4 +172,6 @@

values: breakpointValues,
base
breakpoints: themeBreakpoints,
base: customBase
}) {
const base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
const keys = Object.keys(base);

@@ -152,10 +184,11 @@

let previous;
return keys.reduce((acc, breakpoint) => {
if (typeof breakpointValues === 'object') {
acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
return keys.reduce((acc, breakpoint, i) => {
if (Array.isArray(breakpointValues)) {
acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
previous = i;
} else {
acc[breakpoint] = breakpointValues;
acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous] || breakpointValues;
previous = breakpoint;
}
previous = breakpoint;
return acc;

@@ -162,0 +195,0 @@ }, {});

6

createBox.d.ts
import * as React from 'react';
export default function createBox(options?: { defaultTheme: object }): React.ElementType;
export default function createBox(options?: {
defaultTheme: object;
defaultClassName?: string;
generateClassName?: () => string;
}): React.ElementType;

8

createBox.js

@@ -36,3 +36,5 @@ "use strict";

const {
defaultTheme
defaultTheme,
defaultClassName = 'MuiBox-root',
generateClassName
} = options;

@@ -53,3 +55,3 @@ const BoxRoot = (0, _styledEngine.default)('div')(_styleFunctionSx.default);

ref: ref,
className: (0, _clsx.default)(className, 'MuiBox-root'),
className: (0, _clsx.default)(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
theme: theme

@@ -80,5 +82,5 @@ }, other));

*/
sx: _propTypes.default.object
sx: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array])
} : void 0;
return Box;
}

4

createTheme/createBreakpoints.js

@@ -30,3 +30,3 @@ "use strict";

sm: 600,
// tablets
// tablet
md: 900,

@@ -36,3 +36,3 @@ // small laptop

// desktop
xl: 1536 // large screens
xl: 1536 // large screen

@@ -39,0 +39,0 @@ },

126

cssVars/createCssVarsProvider.d.ts
import * as React from 'react';
import { Result, Mode } from './useCurrentColorScheme';
type PartialDeep<T> = {
[K in keyof T]?: PartialDeep<T[K]>;
type RequiredDeep<T> = {
[K in keyof T]-?: RequiredDeep<T[K]>;
};
export type BuildCssVarsTheme<ThemeInput> = ThemeInput extends {
colorSchemes: Record<string, infer Colors>;
colorSchemes: Record<string, infer ColorSystems>;
}
? Omit<ThemeInput, 'colorSchemes'> & { vars: Omit<ThemeInput, 'colorSchemes'> & Colors }
? Omit<ThemeInput, 'colorSchemes'> &
ColorSystems & { vars: Omit<ThemeInput, 'colorSchemes'> & ColorSystems }
: never;

@@ -21,55 +23,103 @@

type DecideTheme<
Theme extends { colorSchemes: Record<DesignSystemColorScheme | ApplicationColorScheme, any> },
DesignSystemTheme extends { colorSchemes: Record<DesignSystemColorScheme, any> },
DesignSystemColorScheme extends string,
ApplicationTheme extends { colorSchemes: Record<ApplicationColorScheme, any> },
ApplicationColorScheme extends string | never,
> = [ApplicationColorScheme] extends [never]
? { theme?: PartialDeep<Theme> }
? { theme?: DesignSystemTheme }
: {
theme: PartialDeep<Omit<Theme, 'colorSchemes'>> & {
colorSchemes: PartialDeep<
Record<DesignSystemColorScheme, Theme['colorSchemes'][DesignSystemColorScheme]>
theme: Omit<ApplicationTheme, 'colorSchemes'> & {
colorSchemes: Partial<
Record<
DesignSystemColorScheme,
DesignSystemTheme['colorSchemes'][DesignSystemColorScheme]
>
> &
Record<ApplicationColorScheme, Theme['colorSchemes'][ApplicationColorScheme]>;
RequiredDeep<
Record<ApplicationColorScheme, ApplicationTheme['colorSchemes'][ApplicationColorScheme]>
>;
};
};
export interface ColorSchemeContextValue<DesignSystemColorScheme extends string> {
allColorSchemes: DesignSystemColorScheme[];
colorScheme: DesignSystemColorScheme | undefined;
setColorScheme: React.Dispatch<React.SetStateAction<DesignSystemColorScheme | undefined>>;
export interface ColorSchemeContextValue<SupportedColorScheme extends string>
extends Result<SupportedColorScheme> {
allColorSchemes: SupportedColorScheme[];
}
export default function createCssVarsProvider<
ThemeInput extends {
colorSchemes: Record<DesignSystemColorScheme | ApplicationColorScheme, any>;
DesignSystemThemeInput extends {
colorSchemes: Record<DesignSystemColorScheme, any>;
},
DesignSystemColorScheme extends string,
ApplicationThemeInput extends {
colorSchemes: Record<ApplicationColorScheme, any>;
} = never,
ApplicationColorScheme extends string = never,
>(
ThemeContext: React.Context<BuildCssVarsTheme<ThemeInput> | undefined>,
options: {
theme: Omit<ThemeInput, 'colorSchemes'> & {
colorSchemes: Record<
DesignSystemColorScheme,
ThemeInput['colorSchemes'][DesignSystemColorScheme]
> &
Partial<
Record<
ApplicationColorScheme,
ThemeInput['colorSchemes'][DesignSystemColorScheme | ApplicationColorScheme]
>
>;
};
defaultColorScheme: DesignSystemColorScheme;
prefix?: string;
},
): {
>(options: {
/**
* Design system default theme
*/
theme: DesignSystemThemeInput;
/**
* Design system default color scheme
*/
defaultColorScheme:
| DesignSystemColorScheme
| { light: DesignSystemColorScheme; dark: DesignSystemColorScheme };
/**
* Design system default mode
* @default 'light'
*/
defaultMode?: Mode;
/**
* CSS variable prefix
* @default ''
*/
prefix?: string;
/**
* A function to determine if the key, value should be attached as CSS Variable
* `keys` is an array that represents the object path keys.
* Ex, if the theme is { foo: { bar: 'var(--test)' } }
* then, keys = ['foo', 'bar']
* value = 'var(--test)'
*/
shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
}): {
CssVarsProvider: (
props: React.PropsWithChildren<
{
defaultColorScheme?: DesignSystemColorScheme | ApplicationColorScheme;
storageKey?: string;
/**
* Application default mode (overrides design system `defaultMode` if specified)
*/
defaultMode?: Mode;
/**
* Application default colorScheme (overrides design system `defaultColorScheme` if specified)
*/
defaultColorScheme?:
| DesignSystemColorScheme
| ApplicationColorScheme
| {
light: DesignSystemColorScheme | ApplicationColorScheme;
dark: DesignSystemColorScheme | ApplicationColorScheme;
};
/**
* localStorage key used to store application `mode`
* @default 'mui-mode'
*/
modeStorageKey?: string;
/**
* DOM attribute for applying color scheme
* @default 'data-mui-color-scheme'
*/
attribute?: string;
/**
* CSS variable prefix (overrides design system `prefix` if specified)
*/
prefix?: string;
} & DecideTheme<ThemeInput, DesignSystemColorScheme, ApplicationColorScheme>
} & DecideTheme<
DesignSystemThemeInput,
DesignSystemColorScheme,
ApplicationThemeInput,
ApplicationColorScheme
>
>,

@@ -76,0 +126,0 @@ ) => React.ReactElement;

144

cssVars/createCssVarsProvider.js

@@ -24,4 +24,8 @@ "use strict";

var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
var _getInitColorSchemeScript = _interopRequireWildcard(require("./getInitColorSchemeScript"));
var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
var _jsxRuntime = require("react/jsx-runtime");

@@ -36,29 +40,12 @@

const resolveMode = (key, fallback, supportedColorSchemes) => {
if (typeof window === 'undefined') {
return undefined;
}
let value;
try {
value = localStorage.getItem(key) || undefined;
if (!supportedColorSchemes.includes(value)) {
value = undefined;
}
} catch (e) {// Unsupported
}
return value || fallback;
};
function createCssVarsProvider(ThemeContext, options) {
function createCssVarsProvider(options) {
const {
theme: baseTheme = {},
defaultMode: desisgnSystemMode = 'light',
defaultColorScheme: designSystemColorScheme,
prefix: designSystemPrefix = ''
prefix: designSystemPrefix = '',
shouldSkipGeneratingVar
} = options;
if (!baseTheme.colorSchemes || !baseTheme.colorSchemes[designSystemColorScheme]) {
if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);

@@ -83,4 +70,5 @@ }

prefix = designSystemPrefix,
storageKey = _getInitColorSchemeScript.DEFAULT_STORAGE_KEY,
modeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
attribute = _getInitColorSchemeScript.DEFAULT_ATTRIBUTE,
defaultMode = desisgnSystemMode,
defaultColorScheme = designSystemColorScheme

@@ -99,10 +87,40 @@ }) {

const allColorSchemes = Object.keys(colorSchemes);
const joinedColorSchemes = allColorSchemes.join(',');
const [colorScheme, setColorScheme] = React.useState(() => resolveMode(storageKey, defaultColorScheme, allColorSchemes));
const resolvedColorScheme = colorScheme || defaultColorScheme;
const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
const {
mode,
setMode,
lightColorScheme,
darkColorScheme,
colorScheme,
setColorScheme
} = (0, _useCurrentColorScheme.default)({
supportedColorSchemes: allColorSchemes,
defaultLightColorScheme,
defaultDarkColorScheme,
modeStorageKey,
defaultMode
});
const resolvedColorScheme = (() => {
if (!colorScheme) {
// This scope occurs on the server
if (defaultMode === 'dark') {
return defaultDarkColorScheme;
} // use light color scheme, if default mode is 'light' | 'auto'
return defaultLightColorScheme;
}
return colorScheme;
})();
const {
css: rootCss,
vars: rootVars
} = (0, _cssVarsParser.default)(mergedTheme, {
prefix
prefix,
basePrefix: designSystemPrefix,
shouldSkipGeneratingVar
});

@@ -118,3 +136,5 @@ mergedTheme = (0, _extends2.default)({}, mergedTheme, colorSchemes[resolvedColorScheme], {

} = (0, _cssVarsParser.default)(scheme, {
prefix
prefix,
basePrefix: designSystemPrefix,
shouldSkipGeneratingVar
});

@@ -126,4 +146,16 @@

if (key === defaultColorScheme) {
styleSheet[':root'] = (0, _utils.deepmerge)(rootCss, css);
const resolvedDefaultColorScheme = (() => {
if (typeof defaultColorScheme === 'string') {
return defaultColorScheme;
}
if (defaultMode === 'dark') {
return defaultColorScheme.dark;
}
return defaultColorScheme.light;
})();
if (key === resolvedDefaultColorScheme) {
styleSheet[':root'] = css;
} else {

@@ -136,37 +168,22 @@ styleSheet[`[${attribute}="${key}"]`] = css;

document.body.setAttribute(attribute, colorScheme);
localStorage.setItem(storageKey, colorScheme);
}
}, [colorScheme, attribute, storageKey]); // local storage modified in the context of another document
React.useEffect(() => {
const handleStorage = event => {
const storageColorScheme = event.newValue;
if (event.key === storageKey && joinedColorSchemes.match(storageColorScheme)) {
if (storageColorScheme) {
setColorScheme(storageColorScheme);
}
}
};
window.addEventListener('storage', handleStorage);
return () => window.removeEventListener('storage', handleStorage);
}, [setColorScheme, storageKey, joinedColorSchemes]);
const wrappedSetColorScheme = React.useCallback(val => {
if (typeof val === 'string' && !allColorSchemes.includes(val)) {
console.error(`\`${val}\` does not exist in \`theme.colorSchemes\`.`);
} else {
setColorScheme(val);
}
}, [setColorScheme, allColorSchemes]);
}, [colorScheme, attribute]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ColorSchemeContext.Provider, {
value: {
mode,
setMode,
lightColorScheme,
darkColorScheme,
colorScheme,
setColorScheme: wrappedSetColorScheme,
setColorScheme,
allColorSchemes
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
styles: {
':root': rootCss
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
styles: styleSheet
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
value: mergedTheme,
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
theme: mergedTheme,
children: children

@@ -191,8 +208,8 @@ })]

*/
defaultColorScheme: _propTypes.default.string,
defaultColorScheme: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
/**
* css variable prefix
* The initial mode used.
*/
prefix: _propTypes.default.string,
defaultMode: _propTypes.default.string,

@@ -202,5 +219,10 @@ /**

*/
storageKey: _propTypes.default.string,
modeStorageKey: _propTypes.default.string,
/**
* css variable prefix
*/
prefix: _propTypes.default.string,
/**
* The calculated theme object that will be passed through context.

@@ -207,0 +229,0 @@ */

17

cssVars/cssVarsParser.d.ts

@@ -33,3 +33,3 @@ declare type NestedRecord<V = any> = {

*/
export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value) => void) => void;
export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, scope: Record<string, string | number>) => void) => void;
/**

@@ -39,3 +39,12 @@ * a function that parse theme and return { css, vars }

* @param {Object} theme
* @param {{ prefix?: string }} options
* @param {{
* prefix?: string,
* basePrefix?: string,
* shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
* }} options.
* `basePrefix`: defined by design system.
* `prefix`: defined by application
*
* This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
*
* @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)

@@ -53,4 +62,6 @@ *

*/
export default function cssVarsParser(obj: Record<string, any>, options?: {
export default function cssVarsParser(theme: Record<string, any>, options?: {
prefix?: string;
basePrefix?: string;
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
}): {

@@ -57,0 +68,0 @@ css: NestedRecord<string>;

52

cssVars/cssVarsParser.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {

@@ -10,2 +12,4 @@ value: true

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
/**

@@ -66,3 +70,3 @@ * This function create an object from keys, value and then assign to target

} else {
callback([...parentKeys, key], value);
callback([...parentKeys, key], value, object);
}

@@ -94,3 +98,12 @@ }

* @param {Object} theme
* @param {{ prefix?: string }} options
* @param {{
* prefix?: string,
* basePrefix?: string,
* shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
* }} options.
* `basePrefix`: defined by design system.
* `prefix`: defined by application
*
* This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
*
* @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)

@@ -110,15 +123,32 @@ *

function cssVarsParser(obj, options) {
function cssVarsParser(theme, options) {
const clonedTheme = (0, _extends2.default)({}, theme);
delete clonedTheme.vars; // remove 'vars' from the structure
const {
prefix
prefix,
basePrefix = '',
shouldSkipGeneratingVar
} = options || {};
const css = {};
const vars = {};
walkObjectDeep(obj, (keys, value) => {
if (typeof value === 'string' || typeof value === 'number') {
const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
Object.assign(css, {
[cssVar]: getCssValue(keys, value)
});
assignNestedKeys(vars, keys, `var(${cssVar})`);
walkObjectDeep(clonedTheme, (keys, val, scope) => {
if (typeof val === 'string' || typeof val === 'number') {
let value = val;
if (typeof value === 'string' && value.startsWith('var')) {
// replace the value of the `scope` object with the prefix or remove basePrefix from the value
value = prefix ? value.replace(basePrefix, prefix) : value.replace(`${basePrefix}-`, ''); // scope is the deepest object in the tree, keys is the theme path keys
scope[keys.slice(-1)[0]] = value;
}
if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
// only create css & var if `shouldSkipGeneratingVar` return false
const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
Object.assign(css, {
[cssVar]: getCssValue(keys, value)
});
assignNestedKeys(vars, keys, `var(${cssVar})`);
}
}

@@ -125,0 +155,0 @@ });

9

cssVars/getInitColorSchemeScript.d.ts
/// <reference types="react" />
export declare const DEFAULT_STORAGE_KEY = "mui-color-scheme";
export declare const DEFAULT_MODE_STORAGE_KEY = "mui-mode";
export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "mui-color-scheme";
export declare const DEFAULT_ATTRIBUTE = "data-mui-color-scheme";
export default function getInitColorSchemeScript(options?: {
storageKey?: string;
defaultMode?: 'light' | 'dark' | 'system';
defaultLightColorScheme?: string;
defaultDarkColorScheme?: string;
modeStorageKey?: string;
colorSchemeStorageKey?: string;
attribute?: string;
}): JSX.Element;

32

cssVars/getInitColorSchemeScript.js

@@ -6,3 +6,3 @@ "use strict";

});
exports.DEFAULT_STORAGE_KEY = exports.DEFAULT_ATTRIBUTE = void 0;
exports.DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_ATTRIBUTE = void 0;
exports.default = getInitColorSchemeScript;

@@ -18,4 +18,6 @@

const DEFAULT_STORAGE_KEY = 'mui-color-scheme';
exports.DEFAULT_STORAGE_KEY = DEFAULT_STORAGE_KEY;
const DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
exports.DEFAULT_MODE_STORAGE_KEY = DEFAULT_MODE_STORAGE_KEY;
const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = DEFAULT_COLOR_SCHEME_STORAGE_KEY;
const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';

@@ -26,3 +28,7 @@ exports.DEFAULT_ATTRIBUTE = DEFAULT_ATTRIBUTE;

const {
storageKey = DEFAULT_STORAGE_KEY,
defaultMode = 'light',
defaultLightColorScheme = 'light',
defaultDarkColorScheme = 'dark',
modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
attribute = DEFAULT_ATTRIBUTE

@@ -34,3 +40,19 @@ } = options || {};

__html: `(function() { try {
var colorScheme = localStorage.getItem('${storageKey}');
var mode = localStorage.getItem('${modeStorageKey}');
var colorScheme = '';
if (mode === 'system' || (!mode && ${defaultMode} === 'system')) {
// handle system mode
var mql = window.matchMedia('(prefers-color-scheme: dark)');
if (mql.matches) {
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultLightColorScheme};
} else {
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultDarkColorScheme};
}
}
if (mode === 'light') {
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultLightColorScheme};
}
if (mode === 'dark') {
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultDarkColorScheme};
}
if (colorScheme) {

@@ -37,0 +59,0 @@ document.body.setAttribute('${attribute}', colorScheme);

47

esm/breakpoints.js

@@ -11,3 +11,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";

sm: 600,
// tablets
// tablet
md: 900,

@@ -17,3 +17,3 @@ // small laptop

// desktop
xl: 1536 // large screens
xl: 1536 // large screen

@@ -113,7 +113,37 @@ };

return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
} // compute base for responsive values; e.g.,
// [1,2,3] => {xs: true, sm: true, md: true}
// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
export function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
// fixed value
if (typeof breakpointValues !== 'object') {
return {};
}
const base = {};
const breakpointsKeys = Object.keys(themeBreakpoints);
if (Array.isArray(breakpointValues)) {
breakpointsKeys.forEach((breakpoint, i) => {
if (i < breakpointValues.length) {
base[breakpoint] = true;
}
});
} else {
breakpointsKeys.forEach(breakpoint => {
if (breakpointValues[breakpoint] != null) {
base[breakpoint] = true;
}
});
}
return base;
}
export function resolveBreakpointValues({
values: breakpointValues,
base
breakpoints: themeBreakpoints,
base: customBase
}) {
const base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
const keys = Object.keys(base);

@@ -126,10 +156,11 @@

let previous;
return keys.reduce((acc, breakpoint) => {
if (typeof breakpointValues === 'object') {
acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
return keys.reduce((acc, breakpoint, i) => {
if (Array.isArray(breakpointValues)) {
acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
previous = i;
} else {
acc[breakpoint] = breakpointValues;
acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous] || breakpointValues;
previous = breakpoint;
}
previous = breakpoint;
return acc;

@@ -136,0 +167,0 @@ }, {});

8

esm/createBox.js

@@ -13,3 +13,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";

const {
defaultTheme
defaultTheme,
defaultClassName = 'MuiBox-root',
generateClassName
} = options;

@@ -30,3 +32,3 @@ const BoxRoot = styled('div')(styleFunctionSx);

ref: ref,
className: clsx(className, 'MuiBox-root'),
className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
theme: theme

@@ -57,5 +59,5 @@ }, other));

*/
sx: PropTypes.object
sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
} : void 0;
return Box;
}

4

esm/createTheme/createBreakpoints.js

@@ -16,3 +16,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";

sm: 600,
// tablets
// tablet
md: 900,

@@ -22,3 +22,3 @@ // small laptop

// desktop
xl: 1536 // large screens
xl: 1536 // large screen

@@ -25,0 +25,0 @@ },

145

esm/cssVars/createCssVarsProvider.js

@@ -11,33 +11,17 @@ import _extends from "@babel/runtime/helpers/esm/extends";

import cssVarsParser from './cssVarsParser';
import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_STORAGE_KEY } from './getInitColorSchemeScript';
import ThemeProvider from '../ThemeProvider';
import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
import useCurrentColorScheme from './useCurrentColorScheme';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const resolveMode = (key, fallback, supportedColorSchemes) => {
if (typeof window === 'undefined') {
return undefined;
}
let value;
try {
value = localStorage.getItem(key) || undefined;
if (!supportedColorSchemes.includes(value)) {
value = undefined;
}
} catch (e) {// Unsupported
}
return value || fallback;
};
export default function createCssVarsProvider(ThemeContext, options) {
export default function createCssVarsProvider(options) {
const {
theme: baseTheme = {},
defaultMode: desisgnSystemMode = 'light',
defaultColorScheme: designSystemColorScheme,
prefix: designSystemPrefix = ''
prefix: designSystemPrefix = '',
shouldSkipGeneratingVar
} = options;
if (!baseTheme.colorSchemes || !baseTheme.colorSchemes[designSystemColorScheme]) {
if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);

@@ -62,4 +46,5 @@ }

prefix = designSystemPrefix,
storageKey = DEFAULT_STORAGE_KEY,
modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
attribute = DEFAULT_ATTRIBUTE,
defaultMode = desisgnSystemMode,
defaultColorScheme = designSystemColorScheme

@@ -80,10 +65,40 @@ }) {

const allColorSchemes = Object.keys(colorSchemes);
const joinedColorSchemes = allColorSchemes.join(',');
const [colorScheme, setColorScheme] = React.useState(() => resolveMode(storageKey, defaultColorScheme, allColorSchemes));
const resolvedColorScheme = colorScheme || defaultColorScheme;
const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
const {
mode,
setMode,
lightColorScheme,
darkColorScheme,
colorScheme,
setColorScheme
} = useCurrentColorScheme({
supportedColorSchemes: allColorSchemes,
defaultLightColorScheme,
defaultDarkColorScheme,
modeStorageKey,
defaultMode
});
const resolvedColorScheme = (() => {
if (!colorScheme) {
// This scope occurs on the server
if (defaultMode === 'dark') {
return defaultDarkColorScheme;
} // use light color scheme, if default mode is 'light' | 'auto'
return defaultLightColorScheme;
}
return colorScheme;
})();
const {
css: rootCss,
vars: rootVars
} = cssVarsParser(mergedTheme, {
prefix
prefix,
basePrefix: designSystemPrefix,
shouldSkipGeneratingVar
});

@@ -99,3 +114,5 @@ mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {

} = cssVarsParser(scheme, {
prefix
prefix,
basePrefix: designSystemPrefix,
shouldSkipGeneratingVar
});

@@ -107,4 +124,16 @@

if (key === defaultColorScheme) {
styleSheet[':root'] = deepmerge(rootCss, css);
const resolvedDefaultColorScheme = (() => {
if (typeof defaultColorScheme === 'string') {
return defaultColorScheme;
}
if (defaultMode === 'dark') {
return defaultColorScheme.dark;
}
return defaultColorScheme.light;
})();
if (key === resolvedDefaultColorScheme) {
styleSheet[':root'] = css;
} else {

@@ -117,37 +146,22 @@ styleSheet[`[${attribute}="${key}"]`] = css;

document.body.setAttribute(attribute, colorScheme);
localStorage.setItem(storageKey, colorScheme);
}
}, [colorScheme, attribute, storageKey]); // local storage modified in the context of another document
React.useEffect(() => {
const handleStorage = event => {
const storageColorScheme = event.newValue;
if (event.key === storageKey && joinedColorSchemes.match(storageColorScheme)) {
if (storageColorScheme) {
setColorScheme(storageColorScheme);
}
}
};
window.addEventListener('storage', handleStorage);
return () => window.removeEventListener('storage', handleStorage);
}, [setColorScheme, storageKey, joinedColorSchemes]);
const wrappedSetColorScheme = React.useCallback(val => {
if (typeof val === 'string' && !allColorSchemes.includes(val)) {
console.error(`\`${val}\` does not exist in \`theme.colorSchemes\`.`);
} else {
setColorScheme(val);
}
}, [setColorScheme, allColorSchemes]);
}, [colorScheme, attribute]);
return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
value: {
mode,
setMode,
lightColorScheme,
darkColorScheme,
colorScheme,
setColorScheme: wrappedSetColorScheme,
setColorScheme,
allColorSchemes
},
children: [/*#__PURE__*/_jsx(GlobalStyles, {
styles: {
':root': rootCss
}
}), /*#__PURE__*/_jsx(GlobalStyles, {
styles: styleSheet
}), /*#__PURE__*/_jsx(ThemeContext.Provider, {
value: mergedTheme,
}), /*#__PURE__*/_jsx(ThemeProvider, {
theme: mergedTheme,
children: children

@@ -172,8 +186,8 @@ })]

*/
defaultColorScheme: PropTypes.string,
defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
/**
* css variable prefix
* The initial mode used.
*/
prefix: PropTypes.string,
defaultMode: PropTypes.string,

@@ -183,5 +197,10 @@ /**

*/
storageKey: PropTypes.string,
modeStorageKey: PropTypes.string,
/**
* css variable prefix
*/
prefix: PropTypes.string,
/**
* The calculated theme object that will be passed through context.

@@ -188,0 +207,0 @@ */

51

esm/cssVars/cssVarsParser.js

@@ -0,1 +1,3 @@

import _extends from "@babel/runtime/helpers/esm/extends";
/**

@@ -53,3 +55,3 @@ * This function create an object from keys, value and then assign to target

} else {
callback([...parentKeys, key], value);
callback([...parentKeys, key], value, object);
}

@@ -79,3 +81,12 @@ }

* @param {Object} theme
* @param {{ prefix?: string }} options
* @param {{
* prefix?: string,
* basePrefix?: string,
* shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
* }} options.
* `basePrefix`: defined by design system.
* `prefix`: defined by application
*
* This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
*
* @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)

@@ -95,15 +106,33 @@ *

export default function cssVarsParser(obj, options) {
export default function cssVarsParser(theme, options) {
const clonedTheme = _extends({}, theme);
delete clonedTheme.vars; // remove 'vars' from the structure
const {
prefix
prefix,
basePrefix = '',
shouldSkipGeneratingVar
} = options || {};
const css = {};
const vars = {};
walkObjectDeep(obj, (keys, value) => {
if (typeof value === 'string' || typeof value === 'number') {
const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
Object.assign(css, {
[cssVar]: getCssValue(keys, value)
});
assignNestedKeys(vars, keys, `var(${cssVar})`);
walkObjectDeep(clonedTheme, (keys, val, scope) => {
if (typeof val === 'string' || typeof val === 'number') {
let value = val;
if (typeof value === 'string' && value.startsWith('var')) {
// replace the value of the `scope` object with the prefix or remove basePrefix from the value
value = prefix ? value.replace(basePrefix, prefix) : value.replace(`${basePrefix}-`, ''); // scope is the deepest object in the tree, keys is the theme path keys
scope[keys.slice(-1)[0]] = value;
}
if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
// only create css & var if `shouldSkipGeneratingVar` return false
const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
Object.assign(css, {
[cssVar]: getCssValue(keys, value)
});
assignNestedKeys(vars, keys, `var(${cssVar})`);
}
}

@@ -110,0 +139,0 @@ });

27

esm/cssVars/getInitColorSchemeScript.js
import * as React from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
export const DEFAULT_STORAGE_KEY = 'mui-color-scheme';
export const DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
export const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
export default function getInitColorSchemeScript(options) {
const {
storageKey = DEFAULT_STORAGE_KEY,
defaultMode = 'light',
defaultLightColorScheme = 'light',
defaultDarkColorScheme = 'dark',
modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
attribute = DEFAULT_ATTRIBUTE

@@ -14,3 +19,19 @@ } = options || {};

__html: `(function() { try {
var colorScheme = localStorage.getItem('${storageKey}');
var mode = localStorage.getItem('${modeStorageKey}');
var colorScheme = '';
if (mode === 'system' || (!mode && ${defaultMode} === 'system')) {
// handle system mode
var mql = window.matchMedia('(prefers-color-scheme: dark)');
if (mql.matches) {
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultLightColorScheme};
} else {
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultDarkColorScheme};
}
}
if (mode === 'light') {
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultLightColorScheme};
}
if (mode === 'dark') {
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultDarkColorScheme};
}
if (colorScheme) {

@@ -17,0 +38,0 @@ document.body.setAttribute('${attribute}', colorScheme);

21

esm/styleFunctionSx/extendSxProp.js
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["sx"];
import { isPlainObject } from '@mui/utils';
import { propToStyleFunction } from '../getThemeValue';

@@ -31,5 +32,23 @@

} = splitProps(other);
let finalSx;
if (Array.isArray(inSx)) {
finalSx = [systemProps, ...inSx];
} else if (typeof inSx === 'function') {
finalSx = (...args) => {
const result = inSx(...args);
if (!isPlainObject(result)) {
return systemProps;
}
return _extends({}, systemProps, result);
};
} else {
finalSx = _extends({}, systemProps, inSx);
}
return _extends({}, otherProps, {
sx: _extends({}, systemProps, inSx)
sx: finalSx
});
}

80

esm/styleFunctionSx/styleFunctionSx.js

@@ -17,49 +17,59 @@ import merge from '../merge';

const {
sx: styles,
sx,
theme = {}
} = props || {};
if (!styles) {
return null;
if (!sx) {
return null; // emotion & styled-components will neglect null
}
/*
* Receive `sxInput` as object or callback
* and then recursively check keys & values to create media query object styles.
* (the result will be used in `styled`)
*/
let stylesObject = styles;
if (typeof styles === 'function') {
stylesObject = styles(theme);
} else if (typeof styles !== 'object') {
// value
return styles;
}
function traverse(sxInput) {
let sxObject = sxInput;
const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
const breakpointsKeys = Object.keys(emptyBreakpoints);
let css = emptyBreakpoints;
Object.keys(stylesObject).forEach(styleKey => {
const value = callIfFn(stylesObject[styleKey], theme);
if (typeof sxInput === 'function') {
sxObject = sxInput(theme);
} else if (typeof sxInput !== 'object') {
// value
return sxInput;
}
if (typeof value === 'object') {
if (propToStyleFunction[styleKey]) {
css = merge(css, getThemeValue(styleKey, value, theme));
} else {
const breakpointsValues = handleBreakpoints({
theme
}, value, x => ({
[styleKey]: x
}));
const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
const breakpointsKeys = Object.keys(emptyBreakpoints);
let css = emptyBreakpoints;
Object.keys(sxObject).forEach(styleKey => {
const value = callIfFn(sxObject[styleKey], theme);
if (objectsHaveSameKeys(breakpointsValues, value)) {
css[styleKey] = styleFunctionSx({
sx: value,
if (typeof value === 'object') {
if (propToStyleFunction[styleKey]) {
css = merge(css, getThemeValue(styleKey, value, theme));
} else {
const breakpointsValues = handleBreakpoints({
theme
});
} else {
css = merge(css, breakpointsValues);
}, value, x => ({
[styleKey]: x
}));
if (objectsHaveSameKeys(breakpointsValues, value)) {
css[styleKey] = styleFunctionSx({
sx: value,
theme
});
} else {
css = merge(css, breakpointsValues);
}
}
} else {
css = merge(css, getThemeValue(styleKey, value, theme));
}
} else {
css = merge(css, getThemeValue(styleKey, value, theme));
}
});
return removeUnusedBreakpoints(breakpointsKeys, css);
});
return removeUnusedBreakpoints(breakpointsKeys, css);
}
return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
}

@@ -66,0 +76,0 @@

2

index.js

@@ -1,2 +0,2 @@

/** @license MUI v5.0.6
/** @license MUI v5.1.0
*

@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

47

legacy/breakpoints.js

@@ -13,3 +13,3 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";

sm: 600,
// tablets
// tablet
md: 900,

@@ -19,3 +19,3 @@ // small laptop

// desktop
xl: 1536 // large screens
xl: 1536 // large screen

@@ -127,6 +127,36 @@ };

return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
} // compute base for responsive values; e.g.,
// [1,2,3] => {xs: true, sm: true, md: true}
// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
export function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
// fixed value
if (_typeof(breakpointValues) !== 'object') {
return {};
}
var base = {};
var breakpointsKeys = Object.keys(themeBreakpoints);
if (Array.isArray(breakpointValues)) {
breakpointsKeys.forEach(function (breakpoint, i) {
if (i < breakpointValues.length) {
base[breakpoint] = true;
}
});
} else {
breakpointsKeys.forEach(function (breakpoint) {
if (breakpointValues[breakpoint] != null) {
base[breakpoint] = true;
}
});
}
return base;
}
export function resolveBreakpointValues(_ref) {
var breakpointValues = _ref.values,
base = _ref.base;
themeBreakpoints = _ref.breakpoints,
customBase = _ref.base;
var base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
var keys = Object.keys(base);

@@ -139,10 +169,11 @@

var previous;
return keys.reduce(function (acc, breakpoint) {
if (_typeof(breakpointValues) === 'object') {
acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
return keys.reduce(function (acc, breakpoint, i) {
if (Array.isArray(breakpointValues)) {
acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
previous = i;
} else {
acc[breakpoint] = breakpointValues;
acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous] || breakpointValues;
previous = breakpoint;
}
previous = breakpoint;
return acc;

@@ -149,0 +180,0 @@ }, {});

9

legacy/createBox.js

@@ -12,3 +12,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";

var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var defaultTheme = options.defaultTheme;
var defaultTheme = options.defaultTheme,
_options$defaultClass = options.defaultClassName,
defaultClassName = _options$defaultClass === void 0 ? 'MuiBox-root' : _options$defaultClass,
generateClassName = options.generateClassName;
var BoxRoot = styled('div')(styleFunctionSx);

@@ -27,3 +30,3 @@ var Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {

ref: ref,
className: clsx(className, 'MuiBox-root'),
className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
theme: theme

@@ -54,5 +57,5 @@ }, other));

*/
sx: PropTypes.object
sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
} : void 0;
return Box;
}

4

legacy/createTheme/createBreakpoints.js

@@ -13,3 +13,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";

sm: 600,
// tablets
// tablet
md: 900,

@@ -19,3 +19,3 @@ // small laptop

// desktop
xl: 1536 // large screens
xl: 1536 // large screen

@@ -22,0 +22,0 @@ } : _breakpoints$values,

151

legacy/cssVars/createCssVarsProvider.js
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _typeof from "@babel/runtime/helpers/esm/typeof";
import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";

@@ -10,33 +11,18 @@ import * as React from 'react';

import cssVarsParser from './cssVarsParser';
import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_STORAGE_KEY } from './getInitColorSchemeScript';
import ThemeProvider from '../ThemeProvider';
import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
import useCurrentColorScheme from './useCurrentColorScheme';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var resolveMode = function resolveMode(key, fallback, supportedColorSchemes) {
if (typeof window === 'undefined') {
return undefined;
}
var value;
try {
value = localStorage.getItem(key) || undefined;
if (!supportedColorSchemes.includes(value)) {
value = undefined;
}
} catch (e) {// Unsupported
}
return value || fallback;
};
export default function createCssVarsProvider(ThemeContext, options) {
export default function createCssVarsProvider(options) {
var _options$theme = options.theme,
baseTheme = _options$theme === void 0 ? {} : _options$theme,
_options$defaultMode = options.defaultMode,
desisgnSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
designSystemColorScheme = options.defaultColorScheme,
_options$prefix = options.prefix,
designSystemPrefix = _options$prefix === void 0 ? '' : _options$prefix;
designSystemPrefix = _options$prefix === void 0 ? '' : _options$prefix,
shouldSkipGeneratingVar = options.shouldSkipGeneratingVar;
if (!baseTheme.colorSchemes || !baseTheme.colorSchemes[designSystemColorScheme]) {
if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || _typeof(designSystemColorScheme) === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || _typeof(designSystemColorScheme) === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
console.error("MUI: `".concat(designSystemColorScheme, "` does not exist in `theme.colorSchemes`."));

@@ -63,6 +49,8 @@ }

prefix = _ref$prefix === void 0 ? designSystemPrefix : _ref$prefix,
_ref$storageKey = _ref.storageKey,
storageKey = _ref$storageKey === void 0 ? DEFAULT_STORAGE_KEY : _ref$storageKey,
_ref$modeStorageKey = _ref.modeStorageKey,
modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
_ref$attribute = _ref.attribute,
attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute,
_ref$defaultMode = _ref.defaultMode,
defaultMode = _ref$defaultMode === void 0 ? desisgnSystemMode : _ref$defaultMode,
_ref$defaultColorSche = _ref.defaultColorScheme,

@@ -82,14 +70,37 @@ defaultColorScheme = _ref$defaultColorSche === void 0 ? designSystemColorScheme : _ref$defaultColorSche;

var allColorSchemes = Object.keys(colorSchemes);
var joinedColorSchemes = allColorSchemes.join(',');
var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
var _React$useState = React.useState(function () {
return resolveMode(storageKey, defaultColorScheme, allColorSchemes);
var _useCurrentColorSchem = useCurrentColorScheme({
supportedColorSchemes: allColorSchemes,
defaultLightColorScheme: defaultLightColorScheme,
defaultDarkColorScheme: defaultDarkColorScheme,
modeStorageKey: modeStorageKey,
defaultMode: defaultMode
}),
colorScheme = _React$useState[0],
setColorScheme = _React$useState[1];
mode = _useCurrentColorSchem.mode,
setMode = _useCurrentColorSchem.setMode,
lightColorScheme = _useCurrentColorSchem.lightColorScheme,
darkColorScheme = _useCurrentColorSchem.darkColorScheme,
colorScheme = _useCurrentColorSchem.colorScheme,
setColorScheme = _useCurrentColorSchem.setColorScheme;
var resolvedColorScheme = colorScheme || defaultColorScheme;
var resolvedColorScheme = function () {
if (!colorScheme) {
// This scope occurs on the server
if (defaultMode === 'dark') {
return defaultDarkColorScheme;
} // use light color scheme, if default mode is 'light' | 'auto'
return defaultLightColorScheme;
}
return colorScheme;
}();
var _cssVarsParser = cssVarsParser(mergedTheme, {
prefix: prefix
prefix: prefix,
basePrefix: designSystemPrefix,
shouldSkipGeneratingVar: shouldSkipGeneratingVar
}),

@@ -109,3 +120,5 @@ rootCss = _cssVarsParser.css,

var _cssVarsParser2 = cssVarsParser(scheme, {
prefix: prefix
prefix: prefix,
basePrefix: designSystemPrefix,
shouldSkipGeneratingVar: shouldSkipGeneratingVar
}),

@@ -119,4 +132,16 @@ css = _cssVarsParser2.css,

if (key === defaultColorScheme) {
styleSheet[':root'] = deepmerge(rootCss, css);
var resolvedDefaultColorScheme = function () {
if (typeof defaultColorScheme === 'string') {
return defaultColorScheme;
}
if (defaultMode === 'dark') {
return defaultColorScheme.dark;
}
return defaultColorScheme.light;
}();
if (key === resolvedDefaultColorScheme) {
styleSheet[':root'] = css;
} else {

@@ -129,39 +154,22 @@ styleSheet["[".concat(attribute, "=\"").concat(key, "\"]")] = css;

document.body.setAttribute(attribute, colorScheme);
localStorage.setItem(storageKey, colorScheme);
}
}, [colorScheme, attribute, storageKey]); // local storage modified in the context of another document
React.useEffect(function () {
var handleStorage = function handleStorage(event) {
var storageColorScheme = event.newValue;
if (event.key === storageKey && joinedColorSchemes.match(storageColorScheme)) {
if (storageColorScheme) {
setColorScheme(storageColorScheme);
}
}
};
window.addEventListener('storage', handleStorage);
return function () {
return window.removeEventListener('storage', handleStorage);
};
}, [setColorScheme, storageKey, joinedColorSchemes]);
var wrappedSetColorScheme = React.useCallback(function (val) {
if (typeof val === 'string' && !allColorSchemes.includes(val)) {
console.error("`".concat(val, "` does not exist in `theme.colorSchemes`."));
} else {
setColorScheme(val);
}
}, [setColorScheme, allColorSchemes]);
}, [colorScheme, attribute]);
return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
value: {
mode: mode,
setMode: setMode,
lightColorScheme: lightColorScheme,
darkColorScheme: darkColorScheme,
colorScheme: colorScheme,
setColorScheme: wrappedSetColorScheme,
setColorScheme: setColorScheme,
allColorSchemes: allColorSchemes
},
children: [/*#__PURE__*/_jsx(GlobalStyles, {
styles: {
':root': rootCss
}
}), /*#__PURE__*/_jsx(GlobalStyles, {
styles: styleSheet
}), /*#__PURE__*/_jsx(ThemeContext.Provider, {
value: mergedTheme,
}), /*#__PURE__*/_jsx(ThemeProvider, {
theme: mergedTheme,
children: children

@@ -186,8 +194,8 @@ })]

*/
defaultColorScheme: PropTypes.string,
defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
/**
* css variable prefix
* The initial mode used.
*/
prefix: PropTypes.string,
defaultMode: PropTypes.string,

@@ -197,5 +205,10 @@ /**

*/
storageKey: PropTypes.string,
modeStorageKey: PropTypes.string,
/**
* css variable prefix
*/
prefix: PropTypes.string,
/**
* The calculated theme object that will be passed through context.

@@ -202,0 +215,0 @@ */

46

legacy/cssVars/cssVarsParser.js

@@ -64,3 +64,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

} else {
callback([].concat(_toConsumableArray(parentKeys), [key]), value);
callback([].concat(_toConsumableArray(parentKeys), [key]), value, object);
}

@@ -92,3 +92,12 @@ }

* @param {Object} theme
* @param {{ prefix?: string }} options
* @param {{
* prefix?: string,
* basePrefix?: string,
* shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
* }} options.
* `basePrefix`: defined by design system.
* `prefix`: defined by application
*
* This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
*
* @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)

@@ -108,15 +117,34 @@ *

export default function cssVarsParser(obj, options) {
export default function cssVarsParser(theme, options) {
var clonedTheme = _extends({}, theme);
delete clonedTheme.vars; // remove 'vars' from the structure
var _ref3 = options || {},
prefix = _ref3.prefix;
prefix = _ref3.prefix,
_ref3$basePrefix = _ref3.basePrefix,
basePrefix = _ref3$basePrefix === void 0 ? '' : _ref3$basePrefix,
shouldSkipGeneratingVar = _ref3.shouldSkipGeneratingVar;
var css = {};
var vars = {};
walkObjectDeep(obj, function (keys, value) {
if (typeof value === 'string' || typeof value === 'number') {
var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));
walkObjectDeep(clonedTheme, function (keys, val, scope) {
if (typeof val === 'string' || typeof val === 'number') {
var _value = val;
_extends(css, _defineProperty({}, cssVar, getCssValue(keys, value)));
if (typeof _value === 'string' && _value.startsWith('var')) {
// replace the value of the `scope` object with the prefix or remove basePrefix from the value
_value = prefix ? _value.replace(basePrefix, prefix) : _value.replace("".concat(basePrefix, "-"), ''); // scope is the deepest object in the tree, keys is the theme path keys
assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"));
scope[keys.slice(-1)[0]] = _value;
}
if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, _value)) {
// only create css & var if `shouldSkipGeneratingVar` return false
var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));
_extends(css, _defineProperty({}, cssVar, getCssValue(keys, _value)));
assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"));
}
}

@@ -123,0 +151,0 @@ });

17

legacy/cssVars/getInitColorSchemeScript.js
import * as React from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
export var DEFAULT_STORAGE_KEY = 'mui-color-scheme';
export var DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
export var DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
export var DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
export default function getInitColorSchemeScript(options) {
var _ref = options || {},
_ref$storageKey = _ref.storageKey,
storageKey = _ref$storageKey === void 0 ? DEFAULT_STORAGE_KEY : _ref$storageKey,
_ref$defaultMode = _ref.defaultMode,
defaultMode = _ref$defaultMode === void 0 ? 'light' : _ref$defaultMode,
_ref$defaultLightColo = _ref.defaultLightColorScheme,
defaultLightColorScheme = _ref$defaultLightColo === void 0 ? 'light' : _ref$defaultLightColo,
_ref$defaultDarkColor = _ref.defaultDarkColorScheme,
defaultDarkColorScheme = _ref$defaultDarkColor === void 0 ? 'dark' : _ref$defaultDarkColor,
_ref$modeStorageKey = _ref.modeStorageKey,
modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
_ref$colorSchemeStora = _ref.colorSchemeStorageKey,
colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _ref$colorSchemeStora,
_ref$attribute = _ref.attribute,

@@ -15,5 +24,5 @@ attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute;

dangerouslySetInnerHTML: {
__html: "(function() { try {\n var colorScheme = localStorage.getItem('".concat(storageKey, "');\n if (colorScheme) {\n document.body.setAttribute('").concat(attribute, "', colorScheme);\n }\n } catch (e) {} })();")
__html: "(function() { try {\n var mode = localStorage.getItem('".concat(modeStorageKey, "');\n var colorScheme = '';\n if (mode === 'system' || (!mode && ").concat(defaultMode, " === 'system')) {\n // handle system mode\n var mql = window.matchMedia('(prefers-color-scheme: dark)');\n if (mql.matches) {\n colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || ").concat(defaultLightColorScheme, ";\n } else {\n colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || ").concat(defaultDarkColorScheme, ";\n }\n }\n if (mode === 'light') {\n colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || ").concat(defaultLightColorScheme, ";\n }\n if (mode === 'dark') {\n colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || ").concat(defaultDarkColorScheme, ";\n }\n if (colorScheme) {\n document.body.setAttribute('").concat(attribute, "', colorScheme);\n }\n } catch (e) {} })();")
}
});
}

2

legacy/index.js

@@ -1,2 +0,2 @@

/** @license MUI v5.0.6
/** @license MUI v5.1.0
*

@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

22

legacy/styleFunctionSx/extendSxProp.js
import _extends from "@babel/runtime/helpers/esm/extends";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import { isPlainObject } from '@mui/utils';
import { propToStyleFunction } from '../getThemeValue';

@@ -28,5 +30,23 @@

var finalSx;
if (Array.isArray(inSx)) {
finalSx = [systemProps].concat(_toConsumableArray(inSx));
} else if (typeof inSx === 'function') {
finalSx = function finalSx() {
var result = inSx.apply(void 0, arguments);
if (!isPlainObject(result)) {
return systemProps;
}
return _extends({}, systemProps, result);
};
} else {
finalSx = _extends({}, systemProps, inSx);
}
return _extends({}, otherProps, {
sx: _extends({}, systemProps, inSx)
sx: finalSx
});
}

78

legacy/styleFunctionSx/styleFunctionSx.js

@@ -27,49 +27,59 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

var _ref = props || {},
styles = _ref.sx,
sx = _ref.sx,
_ref$theme = _ref.theme,
theme = _ref$theme === void 0 ? {} : _ref$theme;
if (!styles) {
return null;
if (!sx) {
return null; // emotion & styled-components will neglect null
}
/*
* Receive `sxInput` as object or callback
* and then recursively check keys & values to create media query object styles.
* (the result will be used in `styled`)
*/
var stylesObject = styles;
if (typeof styles === 'function') {
stylesObject = styles(theme);
} else if (_typeof(styles) !== 'object') {
// value
return styles;
}
function traverse(sxInput) {
var sxObject = sxInput;
var emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
var breakpointsKeys = Object.keys(emptyBreakpoints);
var css = emptyBreakpoints;
Object.keys(stylesObject).forEach(function (styleKey) {
var value = callIfFn(stylesObject[styleKey], theme);
if (typeof sxInput === 'function') {
sxObject = sxInput(theme);
} else if (_typeof(sxInput) !== 'object') {
// value
return sxInput;
}
if (_typeof(value) === 'object') {
if (propToStyleFunction[styleKey]) {
css = merge(css, getThemeValue(styleKey, value, theme));
} else {
var breakpointsValues = handleBreakpoints({
theme: theme
}, value, function (x) {
return _defineProperty({}, styleKey, x);
});
var emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
var breakpointsKeys = Object.keys(emptyBreakpoints);
var css = emptyBreakpoints;
Object.keys(sxObject).forEach(function (styleKey) {
var value = callIfFn(sxObject[styleKey], theme);
if (objectsHaveSameKeys(breakpointsValues, value)) {
css[styleKey] = styleFunctionSx({
sx: value,
if (_typeof(value) === 'object') {
if (propToStyleFunction[styleKey]) {
css = merge(css, getThemeValue(styleKey, value, theme));
} else {
var breakpointsValues = handleBreakpoints({
theme: theme
}, value, function (x) {
return _defineProperty({}, styleKey, x);
});
} else {
css = merge(css, breakpointsValues);
if (objectsHaveSameKeys(breakpointsValues, value)) {
css[styleKey] = styleFunctionSx({
sx: value,
theme: theme
});
} else {
css = merge(css, breakpointsValues);
}
}
} else {
css = merge(css, getThemeValue(styleKey, value, theme));
}
} else {
css = merge(css, getThemeValue(styleKey, value, theme));
}
});
return removeUnusedBreakpoints(breakpointsKeys, css);
});
return removeUnusedBreakpoints(breakpointsKeys, css);
}
return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
}

@@ -76,0 +86,0 @@

47

modern/breakpoints.js

@@ -11,3 +11,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";

sm: 600,
// tablets
// tablet
md: 900,

@@ -17,3 +17,3 @@ // small laptop

// desktop
xl: 1536 // large screens
xl: 1536 // large screen

@@ -111,7 +111,37 @@ };

return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
} // compute base for responsive values; e.g.,
// [1,2,3] => {xs: true, sm: true, md: true}
// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
export function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
// fixed value
if (typeof breakpointValues !== 'object') {
return {};
}
const base = {};
const breakpointsKeys = Object.keys(themeBreakpoints);
if (Array.isArray(breakpointValues)) {
breakpointsKeys.forEach((breakpoint, i) => {
if (i < breakpointValues.length) {
base[breakpoint] = true;
}
});
} else {
breakpointsKeys.forEach(breakpoint => {
if (breakpointValues[breakpoint] != null) {
base[breakpoint] = true;
}
});
}
return base;
}
export function resolveBreakpointValues({
values: breakpointValues,
base
breakpoints: themeBreakpoints,
base: customBase
}) {
const base = customBase || computeBreakpointsBase(breakpointValues, themeBreakpoints);
const keys = Object.keys(base);

@@ -124,10 +154,11 @@

let previous;
return keys.reduce((acc, breakpoint) => {
if (typeof breakpointValues === 'object') {
acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
return keys.reduce((acc, breakpoint, i) => {
if (Array.isArray(breakpointValues)) {
acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
previous = i;
} else {
acc[breakpoint] = breakpointValues;
acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous] || breakpointValues;
previous = breakpoint;
}
previous = breakpoint;
return acc;

@@ -134,0 +165,0 @@ }, {});

8

modern/createBox.js

@@ -13,3 +13,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";

const {
defaultTheme
defaultTheme,
defaultClassName = 'MuiBox-root',
generateClassName
} = options;

@@ -30,3 +32,3 @@ const BoxRoot = styled('div')(styleFunctionSx);

ref: ref,
className: clsx(className, 'MuiBox-root'),
className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
theme: theme

@@ -57,5 +59,5 @@ }, other));

*/
sx: PropTypes.object
sx: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
} : void 0;
return Box;
}

4

modern/createTheme/createBreakpoints.js

@@ -16,3 +16,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";

sm: 600,
// tablets
// tablet
md: 900,

@@ -22,3 +22,3 @@ // small laptop

// desktop
xl: 1536 // large screens
xl: 1536 // large screen

@@ -25,0 +25,0 @@ },

145

modern/cssVars/createCssVarsProvider.js

@@ -11,33 +11,17 @@ import _extends from "@babel/runtime/helpers/esm/extends";

import cssVarsParser from './cssVarsParser';
import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_STORAGE_KEY } from './getInitColorSchemeScript';
import ThemeProvider from '../ThemeProvider';
import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
import useCurrentColorScheme from './useCurrentColorScheme';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const resolveMode = (key, fallback, supportedColorSchemes) => {
if (typeof window === 'undefined') {
return undefined;
}
let value;
try {
value = localStorage.getItem(key) || undefined;
if (!supportedColorSchemes.includes(value)) {
value = undefined;
}
} catch (e) {// Unsupported
}
return value || fallback;
};
export default function createCssVarsProvider(ThemeContext, options) {
export default function createCssVarsProvider(options) {
const {
theme: baseTheme = {},
defaultMode: desisgnSystemMode = 'light',
defaultColorScheme: designSystemColorScheme,
prefix: designSystemPrefix = ''
prefix: designSystemPrefix = '',
shouldSkipGeneratingVar
} = options;
if (!baseTheme.colorSchemes || !baseTheme.colorSchemes[designSystemColorScheme]) {
if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme?.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme?.dark]) {
console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);

@@ -62,4 +46,5 @@ }

prefix = designSystemPrefix,
storageKey = DEFAULT_STORAGE_KEY,
modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
attribute = DEFAULT_ATTRIBUTE,
defaultMode = desisgnSystemMode,
defaultColorScheme = designSystemColorScheme

@@ -80,10 +65,40 @@ }) {

const allColorSchemes = Object.keys(colorSchemes);
const joinedColorSchemes = allColorSchemes.join(',');
const [colorScheme, setColorScheme] = React.useState(() => resolveMode(storageKey, defaultColorScheme, allColorSchemes));
const resolvedColorScheme = colorScheme || defaultColorScheme;
const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
const {
mode,
setMode,
lightColorScheme,
darkColorScheme,
colorScheme,
setColorScheme
} = useCurrentColorScheme({
supportedColorSchemes: allColorSchemes,
defaultLightColorScheme,
defaultDarkColorScheme,
modeStorageKey,
defaultMode
});
const resolvedColorScheme = (() => {
if (!colorScheme) {
// This scope occurs on the server
if (defaultMode === 'dark') {
return defaultDarkColorScheme;
} // use light color scheme, if default mode is 'light' | 'auto'
return defaultLightColorScheme;
}
return colorScheme;
})();
const {
css: rootCss,
vars: rootVars
} = cssVarsParser(mergedTheme, {
prefix
prefix,
basePrefix: designSystemPrefix,
shouldSkipGeneratingVar
});

@@ -99,3 +114,5 @@ mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {

} = cssVarsParser(scheme, {
prefix
prefix,
basePrefix: designSystemPrefix,
shouldSkipGeneratingVar
});

@@ -107,4 +124,16 @@

if (key === defaultColorScheme) {
styleSheet[':root'] = deepmerge(rootCss, css);
const resolvedDefaultColorScheme = (() => {
if (typeof defaultColorScheme === 'string') {
return defaultColorScheme;
}
if (defaultMode === 'dark') {
return defaultColorScheme.dark;
}
return defaultColorScheme.light;
})();
if (key === resolvedDefaultColorScheme) {
styleSheet[':root'] = css;
} else {

@@ -117,37 +146,22 @@ styleSheet[`[${attribute}="${key}"]`] = css;

document.body.setAttribute(attribute, colorScheme);
localStorage.setItem(storageKey, colorScheme);
}
}, [colorScheme, attribute, storageKey]); // local storage modified in the context of another document
React.useEffect(() => {
const handleStorage = event => {
const storageColorScheme = event.newValue;
if (event.key === storageKey && joinedColorSchemes.match(storageColorScheme)) {
if (storageColorScheme) {
setColorScheme(storageColorScheme);
}
}
};
window.addEventListener('storage', handleStorage);
return () => window.removeEventListener('storage', handleStorage);
}, [setColorScheme, storageKey, joinedColorSchemes]);
const wrappedSetColorScheme = React.useCallback(val => {
if (typeof val === 'string' && !allColorSchemes.includes(val)) {
console.error(`\`${val}\` does not exist in \`theme.colorSchemes\`.`);
} else {
setColorScheme(val);
}
}, [setColorScheme, allColorSchemes]);
}, [colorScheme, attribute]);
return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
value: {
mode,
setMode,
lightColorScheme,
darkColorScheme,
colorScheme,
setColorScheme: wrappedSetColorScheme,
setColorScheme,
allColorSchemes
},
children: [/*#__PURE__*/_jsx(GlobalStyles, {
styles: {
':root': rootCss
}
}), /*#__PURE__*/_jsx(GlobalStyles, {
styles: styleSheet
}), /*#__PURE__*/_jsx(ThemeContext.Provider, {
value: mergedTheme,
}), /*#__PURE__*/_jsx(ThemeProvider, {
theme: mergedTheme,
children: children

@@ -172,8 +186,8 @@ })]

*/
defaultColorScheme: PropTypes.string,
defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
/**
* css variable prefix
* The initial mode used.
*/
prefix: PropTypes.string,
defaultMode: PropTypes.string,

@@ -183,5 +197,10 @@ /**

*/
storageKey: PropTypes.string,
modeStorageKey: PropTypes.string,
/**
* css variable prefix
*/
prefix: PropTypes.string,
/**
* The calculated theme object that will be passed through context.

@@ -188,0 +207,0 @@ */

51

modern/cssVars/cssVarsParser.js

@@ -0,1 +1,3 @@

import _extends from "@babel/runtime/helpers/esm/extends";
/**

@@ -53,3 +55,3 @@ * This function create an object from keys, value and then assign to target

} else {
callback([...parentKeys, key], value);
callback([...parentKeys, key], value, object);
}

@@ -79,3 +81,12 @@ }

* @param {Object} theme
* @param {{ prefix?: string }} options
* @param {{
* prefix?: string,
* basePrefix?: string,
* shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
* }} options.
* `basePrefix`: defined by design system.
* `prefix`: defined by application
*
* This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
*
* @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)

@@ -95,15 +106,33 @@ *

export default function cssVarsParser(obj, options) {
export default function cssVarsParser(theme, options) {
const clonedTheme = _extends({}, theme);
delete clonedTheme.vars; // remove 'vars' from the structure
const {
prefix
prefix,
basePrefix = '',
shouldSkipGeneratingVar
} = options || {};
const css = {};
const vars = {};
walkObjectDeep(obj, (keys, value) => {
if (typeof value === 'string' || typeof value === 'number') {
const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
Object.assign(css, {
[cssVar]: getCssValue(keys, value)
});
assignNestedKeys(vars, keys, `var(${cssVar})`);
walkObjectDeep(clonedTheme, (keys, val, scope) => {
if (typeof val === 'string' || typeof val === 'number') {
let value = val;
if (typeof value === 'string' && value.startsWith('var')) {
// replace the value of the `scope` object with the prefix or remove basePrefix from the value
value = prefix ? value.replace(basePrefix, prefix) : value.replace(`${basePrefix}-`, ''); // scope is the deepest object in the tree, keys is the theme path keys
scope[keys.slice(-1)[0]] = value;
}
if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
// only create css & var if `shouldSkipGeneratingVar` return false
const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
Object.assign(css, {
[cssVar]: getCssValue(keys, value)
});
assignNestedKeys(vars, keys, `var(${cssVar})`);
}
}

@@ -110,0 +139,0 @@ });

27

modern/cssVars/getInitColorSchemeScript.js
import * as React from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
export const DEFAULT_STORAGE_KEY = 'mui-color-scheme';
export const DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
export const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
export default function getInitColorSchemeScript(options) {
const {
storageKey = DEFAULT_STORAGE_KEY,
defaultMode = 'light',
defaultLightColorScheme = 'light',
defaultDarkColorScheme = 'dark',
modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
attribute = DEFAULT_ATTRIBUTE

@@ -14,3 +19,19 @@ } = options || {};

__html: `(function() { try {
var colorScheme = localStorage.getItem('${storageKey}');
var mode = localStorage.getItem('${modeStorageKey}');
var colorScheme = '';
if (mode === 'system' || (!mode && ${defaultMode} === 'system')) {
// handle system mode
var mql = window.matchMedia('(prefers-color-scheme: dark)');
if (mql.matches) {
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultLightColorScheme};
} else {
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultDarkColorScheme};
}
}
if (mode === 'light') {
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultLightColorScheme};
}
if (mode === 'dark') {
colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultDarkColorScheme};
}
if (colorScheme) {

@@ -17,0 +38,0 @@ document.body.setAttribute('${attribute}', colorScheme);

2

modern/index.js

@@ -1,2 +0,2 @@

/** @license MUI v5.0.6
/** @license MUI v5.1.0
*

@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

21

modern/styleFunctionSx/extendSxProp.js
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["sx"];
import { isPlainObject } from '@mui/utils';
import { propToStyleFunction } from '../getThemeValue';

@@ -31,5 +32,23 @@

} = splitProps(other);
let finalSx;
if (Array.isArray(inSx)) {
finalSx = [systemProps, ...inSx];
} else if (typeof inSx === 'function') {
finalSx = (...args) => {
const result = inSx(...args);
if (!isPlainObject(result)) {
return systemProps;
}
return _extends({}, systemProps, result);
};
} else {
finalSx = _extends({}, systemProps, inSx);
}
return _extends({}, otherProps, {
sx: _extends({}, systemProps, inSx)
sx: finalSx
});
}

80

modern/styleFunctionSx/styleFunctionSx.js

@@ -17,49 +17,59 @@ import merge from '../merge';

const {
sx: styles,
sx,
theme = {}
} = props || {};
if (!styles) {
return null;
if (!sx) {
return null; // emotion & styled-components will neglect null
}
/*
* Receive `sxInput` as object or callback
* and then recursively check keys & values to create media query object styles.
* (the result will be used in `styled`)
*/
let stylesObject = styles;
if (typeof styles === 'function') {
stylesObject = styles(theme);
} else if (typeof styles !== 'object') {
// value
return styles;
}
function traverse(sxInput) {
let sxObject = sxInput;
const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
const breakpointsKeys = Object.keys(emptyBreakpoints);
let css = emptyBreakpoints;
Object.keys(stylesObject).forEach(styleKey => {
const value = callIfFn(stylesObject[styleKey], theme);
if (typeof sxInput === 'function') {
sxObject = sxInput(theme);
} else if (typeof sxInput !== 'object') {
// value
return sxInput;
}
if (typeof value === 'object') {
if (propToStyleFunction[styleKey]) {
css = merge(css, getThemeValue(styleKey, value, theme));
} else {
const breakpointsValues = handleBreakpoints({
theme
}, value, x => ({
[styleKey]: x
}));
const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
const breakpointsKeys = Object.keys(emptyBreakpoints);
let css = emptyBreakpoints;
Object.keys(sxObject).forEach(styleKey => {
const value = callIfFn(sxObject[styleKey], theme);
if (objectsHaveSameKeys(breakpointsValues, value)) {
css[styleKey] = styleFunctionSx({
sx: value,
if (typeof value === 'object') {
if (propToStyleFunction[styleKey]) {
css = merge(css, getThemeValue(styleKey, value, theme));
} else {
const breakpointsValues = handleBreakpoints({
theme
});
} else {
css = merge(css, breakpointsValues);
}, value, x => ({
[styleKey]: x
}));
if (objectsHaveSameKeys(breakpointsValues, value)) {
css[styleKey] = styleFunctionSx({
sx: value,
theme
});
} else {
css = merge(css, breakpointsValues);
}
}
} else {
css = merge(css, getThemeValue(styleKey, value, theme));
}
} else {
css = merge(css, getThemeValue(styleKey, value, theme));
}
});
return removeUnusedBreakpoints(breakpointsKeys, css);
});
return removeUnusedBreakpoints(breakpointsKeys, css);
}
return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
}

@@ -66,0 +76,0 @@

14

package.json
{
"name": "@mui/system",
"version": "5.0.6",
"version": "5.1.0",
"private": false,

@@ -11,3 +11,3 @@ "author": "MUI Team",

"react-component",
"material-ui",
"mui",
"system"

@@ -47,7 +47,7 @@ ],

"dependencies": {
"@babel/runtime": "^7.15.4",
"@mui/private-theming": "^5.0.1",
"@mui/styled-engine": "^5.0.2",
"@mui/types": "^7.0.0",
"@mui/utils": "^5.0.1",
"@babel/runtime": "^7.16.0",
"@mui/private-theming": "^5.1.0",
"@mui/styled-engine": "^5.1.0",
"@mui/types": "^7.1.0",
"@mui/utils": "^5.1.0",
"clsx": "^1.1.1",

@@ -54,0 +54,0 @@ "csstype": "^3.0.9",

22

styleFunctionSx/extendSxProp.js

@@ -14,2 +14,4 @@ "use strict";

var _utils = require("@mui/utils");
var _getThemeValue = require("../getThemeValue");

@@ -43,5 +45,23 @@

} = splitProps(other);
let finalSx;
if (Array.isArray(inSx)) {
finalSx = [systemProps, ...inSx];
} else if (typeof inSx === 'function') {
finalSx = (...args) => {
const result = inSx(...args);
if (!(0, _utils.isPlainObject)(result)) {
return systemProps;
}
return (0, _extends2.default)({}, systemProps, result);
};
} else {
finalSx = (0, _extends2.default)({}, systemProps, inSx);
}
return (0, _extends2.default)({}, otherProps, {
sx: (0, _extends2.default)({}, systemProps, inSx)
sx: finalSx
});
}

3

styleFunctionSx/styleFunctionSx.d.ts

@@ -59,5 +59,6 @@ import * as CSS from 'csstype';

| SystemStyleObject<Theme>
| ((theme: Theme) => SystemStyleObject<Theme>);
| ((theme: Theme) => SystemStyleObject<Theme>)
| Array<SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;
// eslint-disable-next-line @typescript-eslint/naming-convention
export default function unstable_styleFunctionSx(props: object): object;

80

styleFunctionSx/styleFunctionSx.js

@@ -32,49 +32,59 @@ "use strict";

const {
sx: styles,
sx,
theme = {}
} = props || {};
if (!styles) {
return null;
if (!sx) {
return null; // emotion & styled-components will neglect null
}
/*
* Receive `sxInput` as object or callback
* and then recursively check keys & values to create media query object styles.
* (the result will be used in `styled`)
*/
let stylesObject = styles;
if (typeof styles === 'function') {
stylesObject = styles(theme);
} else if (typeof styles !== 'object') {
// value
return styles;
}
function traverse(sxInput) {
let sxObject = sxInput;
const emptyBreakpoints = (0, _breakpoints.createEmptyBreakpointObject)(theme.breakpoints);
const breakpointsKeys = Object.keys(emptyBreakpoints);
let css = emptyBreakpoints;
Object.keys(stylesObject).forEach(styleKey => {
const value = callIfFn(stylesObject[styleKey], theme);
if (typeof sxInput === 'function') {
sxObject = sxInput(theme);
} else if (typeof sxInput !== 'object') {
// value
return sxInput;
}
if (typeof value === 'object') {
if (_getThemeValue.propToStyleFunction[styleKey]) {
css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
} else {
const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
theme
}, value, x => ({
[styleKey]: x
}));
const emptyBreakpoints = (0, _breakpoints.createEmptyBreakpointObject)(theme.breakpoints);
const breakpointsKeys = Object.keys(emptyBreakpoints);
let css = emptyBreakpoints;
Object.keys(sxObject).forEach(styleKey => {
const value = callIfFn(sxObject[styleKey], theme);
if (objectsHaveSameKeys(breakpointsValues, value)) {
css[styleKey] = styleFunctionSx({
sx: value,
if (typeof value === 'object') {
if (_getThemeValue.propToStyleFunction[styleKey]) {
css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
} else {
const breakpointsValues = (0, _breakpoints.handleBreakpoints)({
theme
});
} else {
css = (0, _merge.default)(css, breakpointsValues);
}, value, x => ({
[styleKey]: x
}));
if (objectsHaveSameKeys(breakpointsValues, value)) {
css[styleKey] = styleFunctionSx({
sx: value,
theme
});
} else {
css = (0, _merge.default)(css, breakpointsValues);
}
}
} else {
css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
}
} else {
css = (0, _merge.default)(css, (0, _getThemeValue.default)(styleKey, value, theme));
}
});
return (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css);
});
return (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css);
}
return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
}

@@ -81,0 +91,0 @@ 

CHANGELOG.md

Sorry, the diff of this file is too big to display

LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc