@mui/material 6.0.0-alpha.10 → 6.0.0-alpha.11

package/node/styles/index.js

@@ -30,6 +30,7 @@ var _exportNames = {
   unstable_getUnit: true,
   unstable_toUnitless: true,
   responsiveFontSizes: true,
+  createTransitions: true,
   duration: true,
   easing: true,
   useTheme: true,
@@ -96,6 +97,12 @@ Object.defineProperty(exports, "createTheme", {
     return _createTheme.default;
   }
 });
+Object.defineProperty(exports, "createTransitions", {
+  enumerable: true,
+  get: function () {
+    return _createTransitions.default;
+  }
+});
 Object.defineProperty(exports, "css", {
   enumerable: true,
   get: function () {
@@ -298,7 +305,7 @@ var _createMuiStrictModeTheme = _interopRequireDefault(require("./createMuiStric
 var _createStyles = _interopRequireDefault(require("./createStyles"));
 var _cssUtils = require("./cssUtils");
 var _responsiveFontSizes = _interopRequireDefault(require("./responsiveFontSizes"));
-var _createTransitions = require("./createTransitions");
+var _createTransitions = _interopRequireWildcard(require("./createTransitions"));
 var _useTheme = _interopRequireDefault(require("./useTheme"));
 var _useThemeProps = _interopRequireDefault(require("./useThemeProps"));
 var _styled = _interopRequireDefault(require("./styled"));
@@ -322,6 +329,18 @@ var _extendTheme = _interopRequireDefault(require("./extendTheme"));
 var _experimental_extendTheme = _interopRequireDefault(require("./experimental_extendTheme"));
 var _getOverlayAlpha = _interopRequireDefault(require("./getOverlayAlpha"));
 var _shouldSkipGeneratingVar = _interopRequireDefault(require("./shouldSkipGeneratingVar"));
+var _stringifyTheme = require("./stringifyTheme");
+Object.keys(_stringifyTheme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _stringifyTheme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _stringifyTheme[key];
+    }
+  });
+});
 var _createTypography = _interopRequireDefault(require("./createTypography"));
 var _createMixins = _interopRequireDefault(require("./createMixins"));
 var _excludeVariablesFromRoot = _interopRequireDefault(require("./excludeVariablesFromRoot"));

package/node/styles/stringifyTheme.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stringifyTheme = stringifyTheme;
+var _deepmerge = require("@mui/utils/deepmerge");
+/* eslint-disable import/prefer-default-export */
+
+function isSerializable(val) {
+  return (0, _deepmerge.isPlainObject)(val) || typeof val === 'undefined' || typeof val === 'string' || typeof val === 'boolean' || typeof val === 'number' || Array.isArray(val);
+}
+
+/**
+ * `baseTheme` usually comes from `createTheme` or `extendTheme`.
+ *
+ * This function is intended to be used with zero-runtime CSS-in-JS like Pigment CSS
+ * For example, in a Next.js project:
+ *
+ * ```js
+ * // next.config.js
+ * const { extendTheme } = require('@mui/material/styles');
+ *
+ * const theme = extendTheme();
+ * // `.toRuntimeSource` is Pigment CSS specific to create a theme that is available at runtime.
+ * theme.toRuntimeSource = stringifyTheme;
+ *
+ * module.exports = withPigment({
+ *  theme,
+ * });
+ * ```
+ */
+function stringifyTheme(baseTheme = {}) {
+  const serializableTheme = {
+    ...baseTheme
+  };
+  function serializeTheme(object) {
+    const array = Object.entries(object);
+    // eslint-disable-next-line no-plusplus
+    for (let index = 0; index < array.length; index++) {
+      const [key, value] = array[index];
+      if (!isSerializable(value) || key.startsWith('unstable_')) {
+        delete object[key];
+      } else if ((0, _deepmerge.isPlainObject)(value)) {
+        object[key] = {
+          ...value
+        };
+        serializeTheme(object[key]);
+      }
+    }
+  }
+  serializeTheme(serializableTheme);
+  return `import { createBreakpoints } from '@mui/system';
+import { createTransitions } from '@mui/material/styles';
+
+const theme = ${JSON.stringify(serializableTheme, null, 2)};
+
+theme.breakpoints = createBreakpoints(theme.breakpoints || {});
+theme.transitions = createTransitions(theme.transitions || {});
+
+export default theme;`;
+}

package/node/zero-styled/index.js

@@ -11,6 +11,8 @@ Object.defineProperty(exports, "css", {
     return _system.css;
   }
 });
+exports.globalCss = globalCss;
+exports.internal_createExtendSxProp = internal_createExtendSxProp;
 Object.defineProperty(exports, "keyframes", {
   enumerable: true,
   get: function () {
@@ -23,10 +25,37 @@ Object.defineProperty(exports, "styled", {
     return _styled.default;
   }
 });
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.default;
+  }
+});
+var React = _interopRequireWildcard(require("react"));
+var _styleFunctionSx = require("@mui/system/styleFunctionSx");
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
+var _GlobalStyles2 = _interopRequireDefault(require("../GlobalStyles"));
+var _jsxRuntime = require("react/jsx-runtime");
 var _system = require("@mui/system");
 var _styled = _interopRequireDefault(require("../styles/styled"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function globalCss(styles) {
+  var _GlobalStyles;
+  return function GlobalStylesWrapper() {
+    return _GlobalStyles || (_GlobalStyles = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalStyles2.default, {
+      styles: styles
+    }));
+  };
+}
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function createUseThemeProps(name) {
   return _useThemeProps.default;
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function internal_createExtendSxProp() {
+  return _styleFunctionSx.extendSxProp;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.0.0-alpha.10",
+  "version": "6.0.0-alpha.11",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -27,18 +27,18 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.6",
+    "@babel/runtime": "^7.24.7",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.5",
-    "@mui/system": "^6.0.0-alpha.10",
-    "@mui/base": "5.0.0-beta.48",
-    "@mui/utils": "^6.0.0-alpha.9",
     "@mui/types": "^7.2.14",
-    "@mui/core-downloads-tracker": "^6.0.0-alpha.10"
+    "@mui/base": "5.0.0-beta.49",
+    "@mui/system": "^6.0.0-alpha.11",
+    "@mui/utils": "^6.0.0-alpha.11",
+    "@mui/core-downloads-tracker": "^6.0.0-alpha.11"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/styles/createTheme.js

@@ -45,7 +45,7 @@ Please use another name.` : _formatMuiErrorMessage(18));
     const traverse = (node, component) => {
       let key;
 
-      // eslint-disable-next-line guard-for-in, no-restricted-syntax
+      // eslint-disable-next-line guard-for-in
       for (key in node) {
         const child = node[key];
         if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {

package/styles/index.d.ts

@@ -100,6 +100,9 @@ export { default as withTheme } from './withTheme';
 export * from './CssVarsProvider';
 
 export { default as extendTheme } from './extendTheme';
+
+export * from './stringifyTheme';
+
 export type {
   ColorSchemeOverrides,
   SupportedColorScheme,

package/styles/index.js

@@ -14,7 +14,7 @@ export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictM
 export { default as createStyles } from './createStyles';
 export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from './cssUtils';
 export { default as responsiveFontSizes } from './responsiveFontSizes';
-export { duration, easing } from './createTransitions';
+export { default as createTransitions, duration, easing } from './createTransitions';
 export { default as useTheme } from './useTheme';
 export { default as useThemeProps } from './useThemeProps';
 export { default as styled } from './styled';
@@ -31,6 +31,7 @@ export { default as extendTheme } from './extendTheme';
 export { default as experimental_extendTheme } from './experimental_extendTheme'; // TODO: Remove in v7
 export { default as getOverlayAlpha } from './getOverlayAlpha';
 export { default as shouldSkipGeneratingVar } from './shouldSkipGeneratingVar';
+export * from './stringifyTheme';
 
 // Private methods for creating parts of the theme
 export { default as private_createTypography } from './createTypography';

package/styles/stringifyTheme.d.ts

@@ -0,0 +1,20 @@
+/**
+ * `baseTheme` usually comes from `createTheme` or `extendTheme`.
+ *
+ * This function is intended to be used with zero-runtime CSS-in-JS like Pigment CSS
+ * For example, in a Next.js project:
+ *
+ * ```js
+ * // next.config.js
+ * const { extendTheme } = require('@mui/material/styles');
+ *
+ * const theme = extendTheme();
+ * // `.toRuntimeSource` is Pigment CSS specific to create a theme that is available at runtime.
+ * theme.toRuntimeSource = stringifyTheme;
+ *
+ * module.exports = withPigment({
+ *  theme,
+ * });
+ * ```
+ */
+export declare function stringifyTheme(baseTheme?: Record<string, any>): string;

package/styles/stringifyTheme.js

@@ -0,0 +1,55 @@
+/* eslint-disable import/prefer-default-export */
+import { isPlainObject } from '@mui/utils/deepmerge';
+function isSerializable(val) {
+  return isPlainObject(val) || typeof val === 'undefined' || typeof val === 'string' || typeof val === 'boolean' || typeof val === 'number' || Array.isArray(val);
+}
+
+/**
+ * `baseTheme` usually comes from `createTheme` or `extendTheme`.
+ *
+ * This function is intended to be used with zero-runtime CSS-in-JS like Pigment CSS
+ * For example, in a Next.js project:
+ *
+ * ```js
+ * // next.config.js
+ * const { extendTheme } = require('@mui/material/styles');
+ *
+ * const theme = extendTheme();
+ * // `.toRuntimeSource` is Pigment CSS specific to create a theme that is available at runtime.
+ * theme.toRuntimeSource = stringifyTheme;
+ *
+ * module.exports = withPigment({
+ *  theme,
+ * });
+ * ```
+ */
+export function stringifyTheme(baseTheme = {}) {
+  const serializableTheme = {
+    ...baseTheme
+  };
+  function serializeTheme(object) {
+    const array = Object.entries(object);
+    // eslint-disable-next-line no-plusplus
+    for (let index = 0; index < array.length; index++) {
+      const [key, value] = array[index];
+      if (!isSerializable(value) || key.startsWith('unstable_')) {
+        delete object[key];
+      } else if (isPlainObject(value)) {
+        object[key] = {
+          ...value
+        };
+        serializeTheme(object[key]);
+      }
+    }
+  }
+  serializeTheme(serializableTheme);
+  return `import { createBreakpoints } from '@mui/system';
+import { createTransitions } from '@mui/material/styles';
+
+const theme = ${JSON.stringify(serializableTheme, null, 2)};
+
+theme.breakpoints = createBreakpoints(theme.breakpoints || {});
+theme.transitions = createTransitions(theme.transitions || {});
+
+export default theme;`;
+}

package/zero-styled/index.d.ts

@@ -1,4 +1,11 @@
+import * as React from 'react';
+import { extendSxProp } from '@mui/system/styleFunctionSx';
 import useThemeProps from '../styles/useThemeProps';
+import useTheme from '../styles/useTheme';
+import { GlobalStylesProps } from '../GlobalStyles';
 export { css, keyframes } from '@mui/system';
 export { default as styled } from '../styles/styled';
+export declare function globalCss(styles: GlobalStylesProps['styles']): () => React.JSX.Element;
 export declare function createUseThemeProps(name: string): typeof useThemeProps;
+export declare function internal_createExtendSxProp(): typeof extendSxProp;
+export { useTheme };

package/zero-styled/index.js

@@ -1,8 +1,27 @@
+import * as React from 'react';
+import { extendSxProp } from '@mui/system/styleFunctionSx';
 import useThemeProps from '../styles/useThemeProps';
+import useTheme from '../styles/useTheme';
+import GlobalStyles from '../GlobalStyles';
+import { jsx as _jsx } from "react/jsx-runtime";
 export { css, keyframes } from '@mui/system';
 export { default as styled } from '../styles/styled';
+export function globalCss(styles) {
+  var _GlobalStyles;
+  return function GlobalStylesWrapper() {
+    return _GlobalStyles || (_GlobalStyles = /*#__PURE__*/_jsx(GlobalStyles, {
+      styles: styles
+    }));
+  };
+}
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function createUseThemeProps(name) {
   return useThemeProps;
-}
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_createExtendSxProp() {
+  return extendSxProp;
+}
+export { useTheme };