@mui/styled-engine 7.0.0-alpha.0 → 7.0.0-alpha.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 CHANGED
@@ -1,5 +1,97 @@
1
1
  # [Versions](https://mui.com/versions/)
2
2
 
3
+ ## 7.0.0-alpha.2
4
+
5
+ <!-- generated comparing v7.0.0-alpha.1..master -->
6
+
7
+ _Feb 18, 2025_
8
+
9
+ A big thanks to the 9 contributors who made this release possible.
10
+
11
+ ### `@mui/material@7.0.0-alpha.2`
12
+
13
+ - [Autocomplete] Remove legacy `aria-owns` attribute for combobox (#45302) @ZeeshanTamboli
14
+ - [Button] Apply id only if loading indicator is present (#45296) @aarongarciah
15
+ - [Hidden] Remove deprecated Hidden component (#45283) @DiegoAndai
16
+ - [InputBase] Deprecate composed classes (#45234) @sai6855
17
+ - [InputLabel] Changed size prop value from `normal` to `medium` (#45235) @perkrlsn
18
+ - Fix `slotProps.transition` types (#45214) @siriwatknp
19
+
20
+ ### Docs
21
+
22
+ - Fix broken links to MUI X docs (#45145) @mapache-salvaje
23
+ - Add migration guide for package layout changes (#45222) @Janpot
24
+ - [icons] Fix typo in material-icons.md (#45334) @a-s-russo
25
+
26
+ ### Core
27
+
28
+ - Disallow access to esm/modern barrel files (#45332) @Janpot
29
+ - [code-infra] Update `elliptic` (#45311) @Janpot
30
+ - Update release guide to specify package bumping rules (#45294) @DiegoAndai
31
+
32
+ All contributors of this release in alphabetical order: @a-s-russo, @aarongarciah, @DiegoAndai, @Janpot, @mapache-salvaje, @perkrlsn, @sai6855, @siriwatknp, @ZeeshanTamboli
33
+
34
+ ## 7.0.0-alpha.1
35
+
36
+ <!-- generated comparing v7.0.0-alpha.0..master -->
37
+
38
+ _Feb 11, 2025_
39
+
40
+ A big thanks to the 11 contributors who made this release possible.
41
+
42
+ ### `@mui/material@7.0.0-alpha.1`
43
+
44
+ - [Checkbox] Add slots and slotProps (#44974) @sai6855
45
+ - [LinearProgress][CircularProgress] Add variant overrides for module augumentation (#45163) @kingflamez
46
+ - [Drawer] Deprecate \*Props and complete `slots`, `slotProps` (#44960) @siriwatknp
47
+ - Fix wrong `slotProps` of `DetailsHTMLAttributes` types (#45215) @siriwatknp
48
+ - [MobileStepper] deprecate `LinearProgressProps` and complete `slots`, `slotProps` (#45033) @siriwatknp
49
+ - [Radio] Add slots and slotProps (#44972) @sai6855
50
+ - [Radio] Remove empty line (#45184) @sai6855
51
+ - [Slider] Deprecate composed classes (#45201) @sai6855
52
+ - [Snackbar] Fix generated proptypes (#45156) @siriwatknp
53
+ - [SpeedDialAction] Add slots and slotProps (#45065) @sai6855
54
+ - [SwitchBase] Fix spreading of `handlers` in getSlotProps (#45197) @sai6855
55
+ - [Tabs] Deprecate \*Props and complete `slots`, `slotProps` (#45012) @siriwatknp
56
+ - [TextField] Remove deprecated props from documentation (#45199) @sai6855
57
+
58
+ ### `@mui/icons-material@7.0.0-alpha.1`
59
+
60
+ - Change icon source URL and add overrides (#45020) @siriwatknp
61
+
62
+ ### `@mui/lab@7.0.0-beta.1`
63
+
64
+ - Remove components which were moved from lab to material (#45232) @DiegoAndai
65
+
66
+ ### Docs
67
+
68
+ - [Autocomplete] Improve Google Maps search example (#44708) @oliviertassinari
69
+ - [Dialog] Removes deprecated PaperProps from docs (#45195) @sai6855
70
+ - [Menu] Add Grouped Menu demo (#45241) @noobDev31
71
+ - [material] Add disableInteractive on colorTool grid Tooltips (#37800) @Janpot
72
+ - [blog] Consistent Base UI terminology (#45264) @oliviertassinari
73
+ - A quick first step to update docs for Tailwind v4 (#45147) @oliviertassinari
74
+ - Fix `element.ref` accessing warning on docs (#45155) @DiegoAndai
75
+ - Mention Toolpad as experimental (#45273) @prakhargupta1
76
+ - [joy-ui] Update "Set up providers" section of integration with Material UI (#45183) @mateuseap
77
+
78
+ ### Core
79
+
80
+ - Update branch switch tags (#45198) @DiegoAndai
81
+ - Fix double redirection to Base UI (#45146) @oliviertassinari
82
+ - Fix corepack and pnpm installation in CircleCI (#45185) @mj12albert
83
+ - Fix typo on Netlify script (#45278) @maximevtush
84
+ - [code-infra] Fix testing library resolution with custom react (#44061) @Janpot
85
+ - [code-infra] Update package layout for better ESM support (#43264) @Janpot
86
+ - Update `@typescript-eslint/*` packages and remove deprecated `eslint-config-airbnb-typescript` package (#45245) @ZeeshanTamboli
87
+ - [docs] Restore utility component docs from MUI Base to Material UI (#45213) @mapache-salvaje
88
+ - [docs] Sync active sponsors (#45204) @oliviertassinari
89
+ - [docs] Fix links in CONTRIBUTING.md (#45202) @bernardobelchior
90
+ - [docs-infra] Point to MUI X next docs (#45207) @cherniavskii
91
+ - [test] Fix React 18 tests (#45161) @DiegoAndai
92
+
93
+ All contributors of this release in alphabetical order: @bernardobelchior, @cherniavskii, @DiegoAndai, @Janpot, @kingflamez, @mapache-salvaje, @mateuseap, @maximevtush, @mj12albert, @noobDev31, @oliviertassinari, @prakhargupta1, @sai6855, @siriwatknp, @ZeeshanTamboli
94
+
3
95
  ## 7.0.0-alpha.0
4
96
 
5
97
  <!-- generated comparing v6.4.1..master -->
@@ -1,23 +1,30 @@
1
+ "use strict";
1
2
  'use client';
2
3
 
3
- import * as React from 'react';
4
- import PropTypes from 'prop-types';
5
- import { Global } from '@emotion/react';
6
- import { jsx as _jsx } from "react/jsx-runtime";
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
6
+ Object.defineProperty(exports, "__esModule", {
7
+ value: true
8
+ });
9
+ exports.default = GlobalStyles;
10
+ var React = _interopRequireWildcard(require("react"));
11
+ var _propTypes = _interopRequireDefault(require("prop-types"));
12
+ var _react2 = require("@emotion/react");
13
+ var _jsxRuntime = require("react/jsx-runtime");
7
14
  function isEmpty(obj) {
8
15
  return obj === undefined || obj === null || Object.keys(obj).length === 0;
9
16
  }
10
- export default function GlobalStyles(props) {
17
+ function GlobalStyles(props) {
11
18
  const {
12
19
  styles,
13
20
  defaultTheme = {}
14
21
  } = props;
15
22
  const globalStyles = typeof styles === 'function' ? themeInput => styles(isEmpty(themeInput) ? defaultTheme : themeInput) : styles;
16
- return /*#__PURE__*/_jsx(Global, {
23
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Global, {
17
24
  styles: globalStyles
18
25
  });
19
26
  }
20
27
  process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes = {
21
- defaultTheme: PropTypes.object,
22
- styles: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.object, PropTypes.func])
28
+ defaultTheme: _propTypes.default.object,
29
+ styles: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.string, _propTypes.default.object, _propTypes.default.func])
23
30
  } : void 0;
@@ -1 +1,13 @@
1
- export { default } from "./GlobalStyles.js";
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ Object.defineProperty(exports, "default", {
8
+ enumerable: true,
9
+ get: function () {
10
+ return _GlobalStyles.default;
11
+ }
12
+ });
13
+ var _GlobalStyles = _interopRequireDefault(require("./GlobalStyles"));
package/README.md CHANGED
@@ -6,6 +6,6 @@ It is used internally in the `@mui/system` package.
6
6
 
7
7
  ## Documentation
8
8
 
9
- <!-- #default-branch-switch -->
9
+ <!-- #host-reference -->
10
10
 
11
11
  Visit [https://next.mui.com/material-ui/integrations/styled-components/](https://next.mui.com/material-ui/integrations/styled-components/) to view the full documentation.
@@ -1,16 +1,22 @@
1
+ "use strict";
1
2
  'use client';
2
3
 
3
- import * as React from 'react';
4
- import PropTypes from 'prop-types';
5
- import { CacheProvider } from '@emotion/react';
6
- import createCache from '@emotion/cache';
7
- import { StyleSheet } from '@emotion/sheet';
8
-
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
6
+ Object.defineProperty(exports, "__esModule", {
7
+ value: true
8
+ });
9
+ exports.default = StyledEngineProvider;
10
+ var React = _interopRequireWildcard(require("react"));
11
+ var _propTypes = _interopRequireDefault(require("prop-types"));
12
+ var _react2 = require("@emotion/react");
13
+ var _cache = _interopRequireDefault(require("@emotion/cache"));
14
+ var _sheet = require("@emotion/sheet");
15
+ var _jsxRuntime = require("react/jsx-runtime");
9
16
  // We might be able to remove this when this issue is fixed:
10
17
  // https://github.com/emotion-js/emotion/issues/2790
11
- import { jsx as _jsx } from "react/jsx-runtime";
12
18
  const createEmotionCache = (options, CustomSheet) => {
13
- const cache = createCache(options);
19
+ const cache = (0, _cache.default)(options);
14
20
 
15
21
  // Do the same as https://github.com/emotion-js/emotion/blob/main/packages/cache/src/index.js#L238-L245
16
22
  cache.sheet = new CustomSheet({
@@ -42,7 +48,7 @@ if (typeof document === 'object') {
42
48
  * A custom sheet is required to make the GlobalStyles API injected above the insertion point.
43
49
  * This is because the [sheet](https://github.com/emotion-js/emotion/blob/main/packages/react/src/global.js#L94-L99) does not consume the options.
44
50
  */
45
- class MyStyleSheet extends StyleSheet {
51
+ class MyStyleSheet extends _sheet.StyleSheet {
46
52
  insert(rule, options) {
47
53
  if (this.key && this.key.endsWith('global')) {
48
54
  this.before = insertionPoint;
@@ -55,12 +61,12 @@ if (typeof document === 'object') {
55
61
  insertionPoint
56
62
  }, MyStyleSheet);
57
63
  }
58
- export default function StyledEngineProvider(props) {
64
+ function StyledEngineProvider(props) {
59
65
  const {
60
66
  injectFirst,
61
67
  children
62
68
  } = props;
63
- return injectFirst && cache ? /*#__PURE__*/_jsx(CacheProvider, {
69
+ return injectFirst && cache ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.CacheProvider, {
64
70
  value: cache,
65
71
  children: children
66
72
  }) : children;
@@ -69,11 +75,11 @@ process.env.NODE_ENV !== "production" ? StyledEngineProvider.propTypes = {
69
75
  /**
70
76
  * Your component tree.
71
77
  */
72
- children: PropTypes.node,
78
+ children: _propTypes.default.node,
73
79
  /**
74
80
  * By default, the styles are injected last in the <head> element of the page.
75
81
  * As a result, they gain more specificity than any other style sheet.
76
82
  * If you want to override MUI's styles, set this prop.
77
83
  */
78
- injectFirst: PropTypes.bool
84
+ injectFirst: _propTypes.default.bool
79
85
  } : void 0;
@@ -1 +1,13 @@
1
- export { default } from "./StyledEngineProvider.js";
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ Object.defineProperty(exports, "default", {
8
+ enumerable: true,
9
+ get: function () {
10
+ return _StyledEngineProvider.default;
11
+ }
12
+ });
13
+ var _StyledEngineProvider = _interopRequireDefault(require("./StyledEngineProvider"));
@@ -0,0 +1,23 @@
1
+ 'use client';
2
+
3
+ import * as React from 'react';
4
+ import PropTypes from 'prop-types';
5
+ import { Global } from '@emotion/react';
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ function isEmpty(obj) {
8
+ return obj === undefined || obj === null || Object.keys(obj).length === 0;
9
+ }
10
+ export default function GlobalStyles(props) {
11
+ const {
12
+ styles,
13
+ defaultTheme = {}
14
+ } = props;
15
+ const globalStyles = typeof styles === 'function' ? themeInput => styles(isEmpty(themeInput) ? defaultTheme : themeInput) : styles;
16
+ return /*#__PURE__*/_jsx(Global, {
17
+ styles: globalStyles
18
+ });
19
+ }
20
+ process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes = {
21
+ defaultTheme: PropTypes.object,
22
+ styles: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.object, PropTypes.func])
23
+ } : void 0;
@@ -0,0 +1 @@
1
+ export { default } from "./GlobalStyles.js";
@@ -1,22 +1,16 @@
1
- "use strict";
2
1
  'use client';
3
2
 
4
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
6
- Object.defineProperty(exports, "__esModule", {
7
- value: true
8
- });
9
- exports.default = StyledEngineProvider;
10
- var React = _interopRequireWildcard(require("react"));
11
- var _propTypes = _interopRequireDefault(require("prop-types"));
12
- var _react2 = require("@emotion/react");
13
- var _cache = _interopRequireDefault(require("@emotion/cache"));
14
- var _sheet = require("@emotion/sheet");
15
- var _jsxRuntime = require("react/jsx-runtime");
3
+ import * as React from 'react';
4
+ import PropTypes from 'prop-types';
5
+ import { CacheProvider } from '@emotion/react';
6
+ import createCache from '@emotion/cache';
7
+ import { StyleSheet } from '@emotion/sheet';
8
+
16
9
  // We might be able to remove this when this issue is fixed:
17
10
  // https://github.com/emotion-js/emotion/issues/2790
11
+ import { jsx as _jsx } from "react/jsx-runtime";
18
12
  const createEmotionCache = (options, CustomSheet) => {
19
- const cache = (0, _cache.default)(options);
13
+ const cache = createCache(options);
20
14
 
21
15
  // Do the same as https://github.com/emotion-js/emotion/blob/main/packages/cache/src/index.js#L238-L245
22
16
  cache.sheet = new CustomSheet({
@@ -48,7 +42,7 @@ if (typeof document === 'object') {
48
42
  * A custom sheet is required to make the GlobalStyles API injected above the insertion point.
49
43
  * This is because the [sheet](https://github.com/emotion-js/emotion/blob/main/packages/react/src/global.js#L94-L99) does not consume the options.
50
44
  */
51
- class MyStyleSheet extends _sheet.StyleSheet {
45
+ class MyStyleSheet extends StyleSheet {
52
46
  insert(rule, options) {
53
47
  if (this.key && this.key.endsWith('global')) {
54
48
  this.before = insertionPoint;
@@ -61,12 +55,12 @@ if (typeof document === 'object') {
61
55
  insertionPoint
62
56
  }, MyStyleSheet);
63
57
  }
64
- function StyledEngineProvider(props) {
58
+ export default function StyledEngineProvider(props) {
65
59
  const {
66
60
  injectFirst,
67
61
  children
68
62
  } = props;
69
- return injectFirst && cache ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.CacheProvider, {
63
+ return injectFirst && cache ? /*#__PURE__*/_jsx(CacheProvider, {
70
64
  value: cache,
71
65
  children: children
72
66
  }) : children;
@@ -75,11 +69,11 @@ process.env.NODE_ENV !== "production" ? StyledEngineProvider.propTypes = {
75
69
  /**
76
70
  * Your component tree.
77
71
  */
78
- children: _propTypes.default.node,
72
+ children: PropTypes.node,
79
73
  /**
80
74
  * By default, the styles are injected last in the <head> element of the page.
81
75
  * As a result, they gain more specificity than any other style sheet.
82
76
  * If you want to override MUI's styles, set this prop.
83
77
  */
84
- injectFirst: _propTypes.default.bool
78
+ injectFirst: PropTypes.bool
85
79
  } : void 0;
@@ -0,0 +1 @@
1
+ export { default } from "./StyledEngineProvider.js";
package/esm/index.js ADDED
@@ -0,0 +1,47 @@
1
+ /**
2
+ * @mui/styled-engine v7.0.0-alpha.2
3
+ *
4
+ * @license MIT
5
+ * This source code is licensed under the MIT license found in the
6
+ * LICENSE file in the root directory of this source tree.
7
+ */
8
+ 'use client';
9
+
10
+ /* eslint-disable no-underscore-dangle */
11
+ import emStyled from '@emotion/styled';
12
+ import { serializeStyles as emSerializeStyles } from '@emotion/serialize';
13
+ export default function styled(tag, options) {
14
+ const stylesFactory = emStyled(tag, options);
15
+ if (process.env.NODE_ENV !== 'production') {
16
+ return (...styles) => {
17
+ const component = typeof tag === 'string' ? `"${tag}"` : 'component';
18
+ if (styles.length === 0) {
19
+ console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join('\n'));
20
+ } else if (styles.some(style => style === undefined)) {
21
+ console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`);
22
+ }
23
+ return stylesFactory(...styles);
24
+ };
25
+ }
26
+ return stylesFactory;
27
+ }
28
+
29
+ // eslint-disable-next-line @typescript-eslint/naming-convention
30
+ export function internal_mutateStyles(tag, processor) {
31
+ // Emotion attaches all the styles as `__emotion_styles`.
32
+ // Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186
33
+ if (Array.isArray(tag.__emotion_styles)) {
34
+ tag.__emotion_styles = processor(tag.__emotion_styles);
35
+ }
36
+ }
37
+
38
+ // Emotion only accepts an array, but we want to avoid allocations
39
+ const wrapper = [];
40
+ // eslint-disable-next-line @typescript-eslint/naming-convention
41
+ export function internal_serializeStyles(styles) {
42
+ wrapper[0] = styles;
43
+ return emSerializeStyles(wrapper);
44
+ }
45
+ export { ThemeContext, keyframes, css } from '@emotion/react';
46
+ export { default as StyledEngineProvider } from "./StyledEngineProvider/index.js";
47
+ export { default as GlobalStyles } from "./GlobalStyles/index.js";
@@ -0,0 +1 @@
1
+ {"type":"module","sideEffects":false}
package/index.js CHANGED
@@ -1,15 +1,58 @@
1
1
  /**
2
- * @mui/styled-engine v7.0.0-alpha.0
2
+ * @mui/styled-engine v7.0.0-alpha.2
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
6
6
  * LICENSE file in the root directory of this source tree.
7
7
  */
8
+ "use strict";
9
+ 'use client';
10
+
8
11
  /* eslint-disable no-underscore-dangle */
9
- import emStyled from '@emotion/styled';
10
- import { serializeStyles as emSerializeStyles } from '@emotion/serialize';
11
- export default function styled(tag, options) {
12
- const stylesFactory = emStyled(tag, options);
12
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
13
+ Object.defineProperty(exports, "__esModule", {
14
+ value: true
15
+ });
16
+ Object.defineProperty(exports, "GlobalStyles", {
17
+ enumerable: true,
18
+ get: function () {
19
+ return _GlobalStyles.default;
20
+ }
21
+ });
22
+ Object.defineProperty(exports, "StyledEngineProvider", {
23
+ enumerable: true,
24
+ get: function () {
25
+ return _StyledEngineProvider.default;
26
+ }
27
+ });
28
+ Object.defineProperty(exports, "ThemeContext", {
29
+ enumerable: true,
30
+ get: function () {
31
+ return _react.ThemeContext;
32
+ }
33
+ });
34
+ Object.defineProperty(exports, "css", {
35
+ enumerable: true,
36
+ get: function () {
37
+ return _react.css;
38
+ }
39
+ });
40
+ exports.default = styled;
41
+ exports.internal_mutateStyles = internal_mutateStyles;
42
+ exports.internal_serializeStyles = internal_serializeStyles;
43
+ Object.defineProperty(exports, "keyframes", {
44
+ enumerable: true,
45
+ get: function () {
46
+ return _react.keyframes;
47
+ }
48
+ });
49
+ var _styled = _interopRequireDefault(require("@emotion/styled"));
50
+ var _serialize = require("@emotion/serialize");
51
+ var _react = require("@emotion/react");
52
+ var _StyledEngineProvider = _interopRequireDefault(require("./StyledEngineProvider"));
53
+ var _GlobalStyles = _interopRequireDefault(require("./GlobalStyles"));
54
+ function styled(tag, options) {
55
+ const stylesFactory = (0, _styled.default)(tag, options);
13
56
  if (process.env.NODE_ENV !== 'production') {
14
57
  return (...styles) => {
15
58
  const component = typeof tag === 'string' ? `"${tag}"` : 'component';
@@ -25,7 +68,7 @@ export default function styled(tag, options) {
25
68
  }
26
69
 
27
70
  // eslint-disable-next-line @typescript-eslint/naming-convention
28
- export function internal_mutateStyles(tag, processor) {
71
+ function internal_mutateStyles(tag, processor) {
29
72
  // Emotion attaches all the styles as `__emotion_styles`.
30
73
  // Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186
31
74
  if (Array.isArray(tag.__emotion_styles)) {
@@ -36,10 +79,7 @@ export function internal_mutateStyles(tag, processor) {
36
79
  // Emotion only accepts an array, but we want to avoid allocations
37
80
  const wrapper = [];
38
81
  // eslint-disable-next-line @typescript-eslint/naming-convention
39
- export function internal_serializeStyles(styles) {
82
+ function internal_serializeStyles(styles) {
40
83
  wrapper[0] = styles;
41
- return emSerializeStyles(wrapper);
42
- }
43
- export { ThemeContext, keyframes, css } from '@emotion/react';
44
- export { default as StyledEngineProvider } from "./StyledEngineProvider/index.js";
45
- export { default as GlobalStyles } from "./GlobalStyles/index.js";
84
+ return (0, _serialize.serializeStyles)(wrapper);
85
+ }
package/modern/index.js CHANGED
@@ -1,10 +1,12 @@
1
1
  /**
2
- * @mui/styled-engine v7.0.0-alpha.0
2
+ * @mui/styled-engine v7.0.0-alpha.2
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
6
6
  * LICENSE file in the root directory of this source tree.
7
7
  */
8
+ 'use client';
9
+
8
10
  /* eslint-disable no-underscore-dangle */
9
11
  import emStyled from '@emotion/styled';
10
12
  import { serializeStyles as emSerializeStyles } from '@emotion/serialize';
@@ -0,0 +1 @@
1
+ {"type":"module","sideEffects":false}
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@mui/styled-engine",
3
- "version": "7.0.0-alpha.0",
3
+ "version": "7.0.0-alpha.2",
4
4
  "private": false,
5
5
  "author": "MUI Team",
6
6
  "description": "styled() API wrapper package for emotion.",
7
- "main": "./node/index.js",
7
+ "main": "./index.js",
8
8
  "keywords": [
9
9
  "react",
10
10
  "react-component",
@@ -26,7 +26,7 @@
26
26
  "url": "https://opencollective.com/mui-org"
27
27
  },
28
28
  "dependencies": {
29
- "@babel/runtime": "^7.26.7",
29
+ "@babel/runtime": "^7.26.9",
30
30
  "@emotion/cache": "^11.13.5",
31
31
  "@emotion/serialize": "^1.3.3",
32
32
  "@emotion/sheet": "^1.4.0",
@@ -54,6 +54,37 @@
54
54
  "engines": {
55
55
  "node": ">=14.0.0"
56
56
  },
57
- "module": "./index.js",
58
- "types": "./index.d.ts"
57
+ "module": "./esm/index.js",
58
+ "exports": {
59
+ ".": {
60
+ "require": {
61
+ "types": "./index.d.ts",
62
+ "default": "./index.js"
63
+ },
64
+ "import": {
65
+ "types": "./esm/index.d.ts",
66
+ "default": "./esm/index.js"
67
+ },
68
+ "mui-modern": {
69
+ "types": "./modern/index.d.ts",
70
+ "default": "./modern/index.js"
71
+ }
72
+ },
73
+ "./*": {
74
+ "require": {
75
+ "types": "./*/index.d.ts",
76
+ "default": "./*/index.js"
77
+ },
78
+ "import": {
79
+ "types": "./esm/*/index.d.ts",
80
+ "default": "./esm/*/index.js"
81
+ },
82
+ "mui-modern": {
83
+ "types": "./modern/*/index.d.ts",
84
+ "default": "./modern/*/index.js"
85
+ }
86
+ },
87
+ "./esm": null,
88
+ "./modern": null
89
+ }
59
90
  }
@@ -1,11 +0,0 @@
1
- import * as React from 'react';
2
- import { Interpolation } from '@emotion/react';
3
-
4
- export interface GlobalStylesProps<Theme = {}> {
5
- defaultTheme?: object;
6
- styles: Interpolation<Theme>;
7
- }
8
-
9
- export default function GlobalStyles<Theme = {}>(
10
- props: GlobalStylesProps<Theme>,
11
- ): React.JSX.Element;
@@ -1,2 +0,0 @@
1
- export { default } from './GlobalStyles';
2
- export * from './GlobalStyles';
@@ -1,6 +0,0 @@
1
- {
2
- "sideEffects": false,
3
- "module": "./index.js",
4
- "main": "../node/GlobalStyles/index.js",
5
- "types": "./index.d.ts"
6
- }
@@ -1,8 +0,0 @@
1
- import * as React from 'react';
2
-
3
- export interface StyledEngineProviderProps {
4
- children?: React.ReactNode;
5
- injectFirst?: boolean;
6
- }
7
-
8
- export default function StyledEngineProvider(props: StyledEngineProviderProps): React.JSX.Element;
@@ -1,2 +0,0 @@
1
- export { default } from './StyledEngineProvider';
2
- export * from './StyledEngineProvider';
@@ -1,6 +0,0 @@
1
- {
2
- "sideEffects": false,
3
- "module": "./index.js",
4
- "main": "../node/StyledEngineProvider/index.js",
5
- "types": "./index.d.ts"
6
- }
package/index.d.ts DELETED
@@ -1,226 +0,0 @@
1
- import * as CSS from 'csstype';
2
- import { StyledComponent, StyledOptions } from '@emotion/styled';
3
- import { PropsOf } from '@emotion/react';
4
-
5
- export * from '@emotion/styled';
6
- export { default } from '@emotion/styled';
7
- export { ThemeContext, keyframes, css } from '@emotion/react';
8
-
9
- export { default as StyledEngineProvider } from './StyledEngineProvider';
10
-
11
- export { default as GlobalStyles } from './GlobalStyles';
12
- export * from './GlobalStyles';
13
-
14
- export type MUIStyledComponent<
15
- ComponentProps extends {},
16
- SpecificComponentProps extends {} = {},
17
- JSXProps extends {} = {},
18
- > = StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
19
-
20
- /**
21
- * For internal usage in `@mui/system` package
22
- */
23
- // eslint-disable-next-line @typescript-eslint/naming-convention
24
- export function internal_mutateStyles(
25
- tag: React.ElementType,
26
- processor: (styles: any) => any,
27
- ): void;
28
-
29
- // eslint-disable-next-line @typescript-eslint/naming-convention
30
- export function internal_serializeStyles<P>(styles: Interpolation<P>): object;
31
-
32
- export interface SerializedStyles {
33
- name: string;
34
- styles: string;
35
- map?: string;
36
- next?: SerializedStyles;
37
- }
38
-
39
- export type CSSProperties = CSS.PropertiesFallback<number | string>;
40
- export type CSSPropertiesWithMultiValues = {
41
- [K in keyof CSSProperties]: CSSProperties[K] | ReadonlyArray<Extract<CSSProperties[K], string>>;
42
- };
43
-
44
- // TODO v6 - check if we can drop the unknown, as it breaks the autocomplete
45
- // For more info on why it was added, see https://github.com/mui/material-ui/pull/26228
46
- export type CSSPseudos = { [K in CSS.Pseudos]?: unknown | CSSObject };
47
-
48
- // TODO v6 - check if we can drop the unknown, as it breaks the autocomplete
49
- // For more info on why it was added, see https://github.com/mui/material-ui/pull/26228
50
- export interface CSSOthersObject {
51
- [propertiesName: string]: unknown | CSSInterpolation;
52
- }
53
- export type CSSPseudosForCSSObject = { [K in CSS.Pseudos]?: CSSObject };
54
-
55
- export interface ArrayCSSInterpolation extends ReadonlyArray<CSSInterpolation> {}
56
-
57
- export interface CSSOthersObjectForCSSObject {
58
- [propertiesName: string]: CSSInterpolation;
59
- }
60
-
61
- // Omit variants as a key, because we have a special handling for it
62
- export interface CSSObject
63
- extends CSSPropertiesWithMultiValues,
64
- CSSPseudos,
65
- Omit<CSSOthersObject, 'variants'> {}
66
-
67
- interface CSSObjectWithVariants<Props> extends Omit<CSSObject, 'variants'> {
68
- variants: Array<{
69
- props: Props | ((props: Props) => boolean);
70
- style:
71
- | CSSObject
72
- | ((args: Props extends { theme: any } ? { theme: Props['theme'] } : any) => CSSObject);
73
- }>;
74
- }
75
-
76
- export interface ComponentSelector {
77
- __emotion_styles: any;
78
- }
79
-
80
- export type Keyframes = {
81
- name: string;
82
- styles: string;
83
- anim: number;
84
- toString: () => string;
85
- } & string;
86
-
87
- export type Equal<A, B, T, F> = A extends B ? (B extends A ? T : F) : F;
88
-
89
- export type InterpolationPrimitive =
90
- | null
91
- | undefined
92
- | boolean
93
- | number
94
- | string
95
- | ComponentSelector
96
- | Keyframes
97
- | SerializedStyles
98
- | CSSObject;
99
-
100
- export type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation;
101
-
102
- export interface FunctionInterpolation<Props> {
103
- (props: Props): Interpolation<Props>;
104
- }
105
-
106
- export interface ArrayInterpolation<Props> extends ReadonlyArray<Interpolation<Props>> {}
107
-
108
- export type Interpolation<Props> =
109
- | InterpolationPrimitive
110
- | CSSObjectWithVariants<Props>
111
- | ArrayInterpolation<Props>
112
- | FunctionInterpolation<Props>;
113
-
114
- export function shouldForwardProp(propName: PropertyKey): boolean;
115
-
116
- /** Same as StyledOptions but shouldForwardProp must be a type guard */
117
- export interface FilteringStyledOptions<Props, ForwardedProps extends keyof Props = keyof Props> {
118
- label?: string;
119
- shouldForwardProp?(propName: PropertyKey): propName is ForwardedProps;
120
- target?: string;
121
- }
122
-
123
- /**
124
- * @typeparam ComponentProps Props which will be included when withComponent is called
125
- * @typeparam SpecificComponentProps Props which will *not* be included when withComponent is called
126
- */
127
- export interface CreateStyledComponent<
128
- ComponentProps extends {},
129
- SpecificComponentProps extends {} = {},
130
- JSXProps extends {} = {},
131
- T extends object = {},
132
- > {
133
- (
134
- ...styles: Array<Interpolation<ComponentProps & SpecificComponentProps & { theme: T }>>
135
- ): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
136
-
137
- /**
138
- * @typeparam AdditionalProps Additional props to add to your styled component
139
- */
140
- <AdditionalProps extends {}>(
141
- ...styles: Array<
142
- Interpolation<ComponentProps & SpecificComponentProps & AdditionalProps & { theme: T }>
143
- >
144
- ): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps, JSXProps>;
145
-
146
- (
147
- template: TemplateStringsArray,
148
- ...styles: Array<Interpolation<ComponentProps & SpecificComponentProps & { theme: T }>>
149
- ): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>;
150
-
151
- /**
152
- * @typeparam AdditionalProps Additional props to add to your styled component
153
- */
154
- <AdditionalProps extends {}>(
155
- template: TemplateStringsArray,
156
- ...styles: Array<
157
- Interpolation<ComponentProps & SpecificComponentProps & AdditionalProps & { theme: T }>
158
- >
159
- ): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps, JSXProps>;
160
- }
161
-
162
- export interface CreateMUIStyled<
163
- MUIStyledCommonProps extends {},
164
- MuiStyledOptions,
165
- Theme extends object,
166
- > {
167
- <
168
- C extends React.ComponentClass<React.ComponentProps<C>>,
169
- ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>,
170
- >(
171
- component: C,
172
- options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps> & MuiStyledOptions,
173
- ): CreateStyledComponent<
174
- Pick<PropsOf<C>, ForwardedProps> & MUIStyledCommonProps,
175
- {},
176
- {
177
- ref?: React.Ref<InstanceType<C>>;
178
- },
179
- Theme
180
- >;
181
-
182
- <C extends React.ComponentClass<React.ComponentProps<C>>>(
183
- component: C,
184
- options?: StyledOptions<PropsOf<C> & MUIStyledCommonProps> & MuiStyledOptions,
185
- ): CreateStyledComponent<
186
- PropsOf<C> & MUIStyledCommonProps,
187
- {},
188
- {
189
- ref?: React.Ref<InstanceType<C>>;
190
- },
191
- Theme
192
- >;
193
-
194
- <
195
- C extends React.JSXElementConstructor<React.ComponentProps<C>>,
196
- ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>,
197
- >(
198
- component: C,
199
- options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps> & MuiStyledOptions,
200
- ): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & MUIStyledCommonProps, {}, {}, Theme>;
201
-
202
- <C extends React.JSXElementConstructor<React.ComponentProps<C>>>(
203
- component: C,
204
- options?: StyledOptions<PropsOf<C> & MUIStyledCommonProps> & MuiStyledOptions,
205
- ): CreateStyledComponent<PropsOf<C> & MUIStyledCommonProps, {}, {}, Theme>;
206
-
207
- <
208
- Tag extends keyof React.JSX.IntrinsicElements,
209
- ForwardedProps extends
210
- keyof React.JSX.IntrinsicElements[Tag] = keyof React.JSX.IntrinsicElements[Tag],
211
- >(
212
- tag: Tag,
213
- options: FilteringStyledOptions<React.JSX.IntrinsicElements[Tag], ForwardedProps> &
214
- MuiStyledOptions,
215
- ): CreateStyledComponent<
216
- MUIStyledCommonProps,
217
- Pick<React.JSX.IntrinsicElements[Tag], ForwardedProps>,
218
- {},
219
- Theme
220
- >;
221
-
222
- <Tag extends keyof React.JSX.IntrinsicElements>(
223
- tag: Tag,
224
- options?: StyledOptions<MUIStyledCommonProps> & MuiStyledOptions,
225
- ): CreateStyledComponent<MUIStyledCommonProps, React.JSX.IntrinsicElements[Tag], {}, Theme>;
226
- }
@@ -1,30 +0,0 @@
1
- "use strict";
2
- 'use client';
3
-
4
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
6
- Object.defineProperty(exports, "__esModule", {
7
- value: true
8
- });
9
- exports.default = GlobalStyles;
10
- var React = _interopRequireWildcard(require("react"));
11
- var _propTypes = _interopRequireDefault(require("prop-types"));
12
- var _react2 = require("@emotion/react");
13
- var _jsxRuntime = require("react/jsx-runtime");
14
- function isEmpty(obj) {
15
- return obj === undefined || obj === null || Object.keys(obj).length === 0;
16
- }
17
- function GlobalStyles(props) {
18
- const {
19
- styles,
20
- defaultTheme = {}
21
- } = props;
22
- const globalStyles = typeof styles === 'function' ? themeInput => styles(isEmpty(themeInput) ? defaultTheme : themeInput) : styles;
23
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Global, {
24
- styles: globalStyles
25
- });
26
- }
27
- process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes = {
28
- defaultTheme: _propTypes.default.object,
29
- styles: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.string, _propTypes.default.object, _propTypes.default.func])
30
- } : void 0;
@@ -1,13 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- Object.defineProperty(exports, "default", {
8
- enumerable: true,
9
- get: function () {
10
- return _GlobalStyles.default;
11
- }
12
- });
13
- var _GlobalStyles = _interopRequireDefault(require("./GlobalStyles"));
@@ -1,13 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- Object.defineProperty(exports, "default", {
8
- enumerable: true,
9
- get: function () {
10
- return _StyledEngineProvider.default;
11
- }
12
- });
13
- var _StyledEngineProvider = _interopRequireDefault(require("./StyledEngineProvider"));
package/node/index.js DELETED
@@ -1,85 +0,0 @@
1
- /**
2
- * @mui/styled-engine v7.0.0-alpha.0
3
- *
4
- * @license MIT
5
- * This source code is licensed under the MIT license found in the
6
- * LICENSE file in the root directory of this source tree.
7
- */
8
- "use strict";
9
-
10
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
11
- Object.defineProperty(exports, "__esModule", {
12
- value: true
13
- });
14
- Object.defineProperty(exports, "GlobalStyles", {
15
- enumerable: true,
16
- get: function () {
17
- return _GlobalStyles.default;
18
- }
19
- });
20
- Object.defineProperty(exports, "StyledEngineProvider", {
21
- enumerable: true,
22
- get: function () {
23
- return _StyledEngineProvider.default;
24
- }
25
- });
26
- Object.defineProperty(exports, "ThemeContext", {
27
- enumerable: true,
28
- get: function () {
29
- return _react.ThemeContext;
30
- }
31
- });
32
- Object.defineProperty(exports, "css", {
33
- enumerable: true,
34
- get: function () {
35
- return _react.css;
36
- }
37
- });
38
- exports.default = styled;
39
- exports.internal_mutateStyles = internal_mutateStyles;
40
- exports.internal_serializeStyles = internal_serializeStyles;
41
- Object.defineProperty(exports, "keyframes", {
42
- enumerable: true,
43
- get: function () {
44
- return _react.keyframes;
45
- }
46
- });
47
- var _styled = _interopRequireDefault(require("@emotion/styled"));
48
- var _serialize = require("@emotion/serialize");
49
- var _react = require("@emotion/react");
50
- var _StyledEngineProvider = _interopRequireDefault(require("./StyledEngineProvider"));
51
- var _GlobalStyles = _interopRequireDefault(require("./GlobalStyles"));
52
- /* eslint-disable no-underscore-dangle */
53
-
54
- function styled(tag, options) {
55
- const stylesFactory = (0, _styled.default)(tag, options);
56
- if (process.env.NODE_ENV !== 'production') {
57
- return (...styles) => {
58
- const component = typeof tag === 'string' ? `"${tag}"` : 'component';
59
- if (styles.length === 0) {
60
- console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join('\n'));
61
- } else if (styles.some(style => style === undefined)) {
62
- console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`);
63
- }
64
- return stylesFactory(...styles);
65
- };
66
- }
67
- return stylesFactory;
68
- }
69
-
70
- // eslint-disable-next-line @typescript-eslint/naming-convention
71
- function internal_mutateStyles(tag, processor) {
72
- // Emotion attaches all the styles as `__emotion_styles`.
73
- // Ref: https://github.com/emotion-js/emotion/blob/16d971d0da229596d6bcc39d282ba9753c9ee7cf/packages/styled/src/base.js#L186
74
- if (Array.isArray(tag.__emotion_styles)) {
75
- tag.__emotion_styles = processor(tag.__emotion_styles);
76
- }
77
- }
78
-
79
- // Emotion only accepts an array, but we want to avoid allocations
80
- const wrapper = [];
81
- // eslint-disable-next-line @typescript-eslint/naming-convention
82
- function internal_serializeStyles(styles) {
83
- wrapper[0] = styles;
84
- return (0, _serialize.serializeStyles)(wrapper);
85
- }