[system][core] Standardize index pattern (mui#41574)

apps/pigment-css-vite-app/vite.config.ts

@@ -36,10 +36,6 @@ export default defineConfig({
   ],
   resolve: {
     alias: [
-      {
-        find: /^@mui\/system\/(.*)/,
-        replacement: '@mui/system/esm/$1',
-      },
       {
         find: /^@mui\/icons-material\/(.*)/,
         replacement: '@mui/icons-material/esm/$1',

docs/data/system/migration/migration-v5/migration-v5.md

@@ -23,3 +23,19 @@ The steps you need to take to migrate from MUI System v5 to v6 are described b
 This list is a work in progress.
 Expect updates as new breaking changes are introduced.
 :::
+
+### Root code is now ESM
+
+The ESM code, previously under the `esm/` build, has been moved to the root of the package.
+The CommonJS code, previously on the root, has been moved to the `node/` build.
+
+:::info
+This is an intermediate step to prepare for adding the `exports` field to the `package.json` file.
+If you have trouble using this new structure, please wait for the future update which adds the `exports` field.
+You can follow progress on https://github.com/mui/material-ui/issues/30671.
+:::
+
+### GridProps type
+
+The `cssGrid` function's `GridProps` type has been renamed to `CssGridProps`.
+This is to avoid collision with the `GridProps` type corresponding to the `Grid` component props.

packages/mui-system/src/borders/borders.d.ts

@@ -0,0 +1,14 @@
+import { PropsFor, SimpleStyleFunction, borders } from '../Box';
+
+export const border: SimpleStyleFunction<'border'>;
+export const borderTop: SimpleStyleFunction<'borderTop'>;
+export const borderRight: SimpleStyleFunction<'borderRight'>;
+export const borderBottom: SimpleStyleFunction<'borderBottom'>;
+export const borderLeft: SimpleStyleFunction<'borderLeft'>;
+export const borderColor: SimpleStyleFunction<'borderColor'>;
+export const borderTopColor: SimpleStyleFunction<'borderTopColor'>;
+export const borderRightColor: SimpleStyleFunction<'borderRightColor'>;
+export const borderBottomColor: SimpleStyleFunction<'borderBottomColor'>;
+export const borderLeftColor: SimpleStyleFunction<'borderLeftColor'>;
+export const borderRadius: SimpleStyleFunction<'borderRadius'>;
+export type BordersProps = PropsFor<typeof borders>;

packages/mui-system/src/borders.js → packages/mui-system/src/borders/borders.js

@@ -1,8 +1,8 @@
-import responsivePropType from './responsivePropType';
-import style from './style';
-import compose from './compose';
-import { createUnaryUnit, getValue } from './spacing';
-import { handleBreakpoints } from './breakpoints';
+import responsivePropType from '../responsivePropType';
+import style from '../style';
+import compose from '../compose';
+import { createUnaryUnit, getValue } from '../spacing';
+import { handleBreakpoints } from '../breakpoints';
 
 export function borderTransform(value) {
   if (typeof value !== 'number') {

packages/mui-system/src/borders/index.ts

@@ -0,0 +1,3 @@
+'use client'
+export { default } from './borders'
+export * from './borders'

packages/mui-system/src/breakpoints.d.ts → packages/mui-system/src/breakpoints/breakpoints.d.ts

@@ -1,7 +1,8 @@
 import { CSSObject } from '@mui/styled-engine';
-import { Breakpoints } from './createTheme/createBreakpoints';
-import type { Breakpoint } from './createTheme';
-import { ResponsiveStyleValue } from './styleFunctionSx';
+import { Breakpoints } from '../createTheme/createBreakpoints';
+import type { Breakpoint } from '../createTheme';
+import { ResponsiveStyleValue } from '../styleFunctionSx';
+import { StyleFunction } from '../Box';
 
 export interface ResolveBreakpointValuesOptions<T> {
   values: ResponsiveStyleValue<T>;
@@ -19,3 +20,12 @@ export function handleBreakpoints<Props>(
   propValue: any,
   styleFromPropValue: (value: any, breakpoint?: Breakpoint) => any,
 ): any;
+
+type DefaultBreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * @returns An enhanced stylefunction that considers breakpoints
+ */
+export default function breakpoints<Props, Breakpoints extends string = DefaultBreakPoints>(
+  styleFunction: StyleFunction<Props>,
+): StyleFunction<Partial<Record<Breakpoints, Props>> & Props>;

packages/mui-system/src/breakpoints.js → packages/mui-system/src/breakpoints/breakpoints.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import deepmerge from '@mui/utils/deepmerge';
-import merge from './merge';
+import merge from '../merge';
 
 // The breakpoint **start** at this value.
 // For instance with the first breakpoint xs: [xs, sm[.

packages/mui-system/src/breakpoints.test.js → packages/mui-system/src/breakpoints/breakpoints.test.js

@@ -4,7 +4,7 @@ import breakpoints, {
   resolveBreakpointValues,
   removeUnusedBreakpoints,
 } from './breakpoints';
-import style from './style';
+import style from '../style';
 
 const textColor = style({
   prop: 'color',

packages/mui-system/src/breakpoints/index.ts

@@ -0,0 +1,3 @@
+'use client'
+export { default } from './breakpoints'
+export * from './breakpoints'

packages/mui-system/src/colorManipulator/index.ts

@@ -0,0 +1,2 @@
+'use client'
+export * from './colorManipulator'

packages/mui-system/src/compose/compose.d.ts

@@ -0,0 +1,5 @@
+import { ComposedStyleFunction, StyleFunction } from '../Box';
+
+export default function compose<T extends Array<StyleFunction<any>>>(
+  ...args: T
+): ComposedStyleFunction<T>;

packages/mui-system/src/compose.js → packages/mui-system/src/compose/compose.js

@@ -1,4 +1,4 @@
-import merge from './merge';
+import merge from '../merge';
 
 function compose(...styles) {
   const handlers = styles.reduce((acc, style) => {

packages/mui-system/src/compose.test.js → packages/mui-system/src/compose/compose.test.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai';
 import compose from './compose';
-import style from './style';
+import style from '../style';
 
 const textColor = style({
   prop: 'color',

packages/mui-system/src/compose/index.ts

@@ -0,0 +1,2 @@
+'use client'
+export { default } from './compose'

packages/mui-system/src/createBox.d.ts → packages/mui-system/src/createBox/createBox.d.ts

@@ -1,6 +1,6 @@
 import { OverridableComponent } from '@mui/types';
-import { BoxTypeMap } from './Box';
-import { Theme as SystemTheme } from './createTheme';
+import { BoxTypeMap } from '../Box';
+import { Theme as SystemTheme } from '../createTheme';
 
 export default function createBox<
   T extends object = SystemTheme,

packages/mui-system/src/createBox.js → packages/mui-system/src/createBox/createBox.js

@@ -2,8 +2,8 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import styled from '@mui/styled-engine';
-import styleFunctionSx, { extendSxProp } from './styleFunctionSx';
-import useTheme from './useTheme';
+import styleFunctionSx, { extendSxProp } from '../styleFunctionSx';
+import useTheme from '../useTheme';
 
 export default function createBox(options = {}) {
   const { themeId, defaultTheme, defaultClassName = 'MuiBox-root', generateClassName } = options;

packages/mui-system/src/createBox/index.ts

@@ -0,0 +1,2 @@
+'use client'
+export { default } from './createBox'

packages/mui-system/src/createStyled.d.ts → packages/mui-system/src/createStyled/createStyled.d.ts

@@ -3,8 +3,8 @@ import {
   CreateMUIStyled as CreateMUIStyledStyledEngine,
   CSSInterpolation,
 } from '@mui/styled-engine';
-import styleFunctionSx, { SxProps } from './styleFunctionSx';
-import { Theme as DefaultTheme } from './createTheme';
+import styleFunctionSx, { SxProps } from '../styleFunctionSx';
+import { Theme as DefaultTheme } from '../createTheme';
 
 export function shouldForwardProp(propName: PropertyKey): boolean;
 

packages/mui-system/src/createStyled.js → packages/mui-system/src/createStyled/createStyled.js

@@ -3,8 +3,8 @@ import styledEngineStyled, { internal_processStyles as processStyles } from '@mu
 import { isPlainObject } from '@mui/utils/deepmerge';
 import capitalize from '@mui/utils/capitalize';
 import getDisplayName from '@mui/utils/getDisplayName';
-import createTheme from './createTheme';
-import styleFunctionSx from './styleFunctionSx';
+import createTheme from '../createTheme';
+import styleFunctionSx from '../styleFunctionSx';
 
 function isEmpty(obj) {
   return Object.keys(obj).length === 0;

packages/mui-system/src/createStyled/index.ts

@@ -0,0 +1,3 @@
+'use client'
+export { default } from './createStyled'
+export * from './createStyled'

packages/mui-system/src/cssGrid/cssGrid.d.ts

@@ -0,0 +1,3 @@
+import { PropsFor, grid } from '../Box';
+
+export type CssGridProps = PropsFor<typeof grid>;

packages/mui-system/src/cssGrid.js → packages/mui-system/src/cssGrid/cssGrid.js

@@ -1,8 +1,8 @@
-import style from './style';
-import compose from './compose';
-import { createUnaryUnit, getValue } from './spacing';
-import { handleBreakpoints } from './breakpoints';
-import responsivePropType from './responsivePropType';
+import style from '../style';
+import compose from '../compose';
+import { createUnaryUnit, getValue } from '../spacing';
+import { handleBreakpoints } from '../breakpoints';
+import responsivePropType from '../responsivePropType';
 
 // false positive
 // eslint-disable-next-line react/function-component-definition

packages/mui-system/src/cssGrid/index.ts

@@ -0,0 +1,3 @@
+'use client'
+export { default } from './cssGrid'
+export * from './cssGrid'

packages/mui-system/src/display/display.d.ts

@@ -0,0 +1,3 @@
+import { PropsFor, display } from '../Box';
+
+export type DisplayProps = PropsFor<typeof display>;

packages/mui-system/src/display.js → packages/mui-system/src/display/display.js

@@ -1,5 +1,5 @@
-import style from './style';
-import compose from './compose';
+import style from '../style';
+import compose from '../compose';
 
 export const displayPrint = style({
   prop: 'displayPrint',

packages/mui-system/src/display/index.ts

@@ -0,0 +1,3 @@
+'use client'
+export { default } from './display'
+export * from './display'

packages/mui-system/src/flexbox/flexbox.d.ts

@@ -0,0 +1,3 @@
+import { PropsFor, flexbox } from '../Box';
+
+export type FlexboxProps = PropsFor<typeof flexbox>;

packages/mui-system/src/flexbox.js → packages/mui-system/src/flexbox/flexbox.js

@@ -1,5 +1,5 @@
-import style from './style';
-import compose from './compose';
+import style from '../style';
+import compose from '../compose';
 
 export const flexBasis = style({
   prop: 'flexBasis',

packages/mui-system/src/flexbox/index.ts

@@ -0,0 +1,3 @@
+'use client'
+export { default } from './flexbox'
+export * from './flexbox'

packages/mui-system/src/getThemeValue/getThemeValue.d.ts

@@ -0,0 +1 @@
+export default function getThemeValue(prop: string, value: any, theme: object): any;

packages/mui-system/src/getThemeValue.js → packages/mui-system/src/getThemeValue/getThemeValue.js

@@ -1,13 +1,13 @@
-import borders from './borders';
-import display from './display';
-import flexbox from './flexbox';
-import grid from './cssGrid';
-import positions from './positions';
-import palette from './palette';
-import shadows from './shadows';
-import sizing from './sizing';
-import spacing from './spacing';
-import typography from './typography';
+import borders from '../borders';
+import display from '../display';
+import flexbox from '../flexbox';
+import grid from '../cssGrid';
+import positions from '../positions';
+import palette from '../palette';
+import shadows from '../shadows';
+import sizing from '../sizing';
+import spacing from '../spacing';
+import typography from '../typography';
 
 const filterPropsMapping = {
   borders: borders.filterProps,

packages/mui-system/src/getThemeValue/index.ts

@@ -0,0 +1,3 @@
+'use client'
+export { default } from './getThemeValue'
+export * from './getThemeValue'

packages/mui-system/src/index.d.ts

@@ -1,91 +1,30 @@
-import {
-  ComposedStyleFunction,
-  StyleFunction,
-  PropsFor,
-  SimpleStyleFunction,
-  borders,
-  display,
-  flexbox,
-  grid,
-  palette,
-  positions,
-  shadows,
-  sizing,
-  typography,
-} from './Box';
 // disable automatic export
 export {};
 
-// borders.js
-export const border: SimpleStyleFunction<'border'>;
-export const borderTop: SimpleStyleFunction<'borderTop'>;
-export const borderRight: SimpleStyleFunction<'borderRight'>;
-export const borderBottom: SimpleStyleFunction<'borderBottom'>;
-export const borderLeft: SimpleStyleFunction<'borderLeft'>;
-export const borderColor: SimpleStyleFunction<'borderColor'>;
-export const borderTopColor: SimpleStyleFunction<'borderTopColor'>;
-export const borderRightColor: SimpleStyleFunction<'borderRightColor'>;
-export const borderBottomColor: SimpleStyleFunction<'borderBottomColor'>;
-export const borderLeftColor: SimpleStyleFunction<'borderLeftColor'>;
-export const borderRadius: SimpleStyleFunction<'borderRadius'>;
-export type BordersProps = PropsFor<typeof borders>;
-
-// breakpoints.js
-type DefaultBreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export { handleBreakpoints, mergeBreakpointsInOrder } from './breakpoints';
+export * from './borders';
 
-/**
- * @returns An enhanced stylefunction that considers breakpoints
- */
-export function breakpoints<Props, Breakpoints extends string = DefaultBreakPoints>(
-  styleFunction: StyleFunction<Props>,
-): StyleFunction<Partial<Record<Breakpoints, Props>> & Props>;
-
-export function compose<T extends Array<StyleFunction<any>>>(...args: T): ComposedStyleFunction<T>;
-
-export type DisplayProps = PropsFor<typeof display>;
-
-// flexbox.js
-export type FlexboxProps = PropsFor<typeof flexbox>;
-
-// grid.js
-export type GridProps = PropsFor<typeof grid>;
-
-// palette.js
-export const color: SimpleStyleFunction<'color'>;
-export const bgcolor: SimpleStyleFunction<'bgcolor'>;
-export type PaletteProps = PropsFor<typeof palette>;
-
-export type PositionsProps = PropsFor<typeof positions>;
-
-export type ShadowsProps = PropsFor<typeof shadows>;
-
-// * sizing.js TODO
-export const width: SimpleStyleFunction<'width'>;
-export const maxWidth: SimpleStyleFunction<'maxWidth'>;
-export const minWidth: SimpleStyleFunction<'minWidth'>;
-export const height: SimpleStyleFunction<'height'>;
-export const maxHeight: SimpleStyleFunction<'maxHeight'>;
-export const minHeight: SimpleStyleFunction<'minHeight'>;
-export const sizeWidth: SimpleStyleFunction<'sizeWidth'>;
-export const sizeHeight: SimpleStyleFunction<'sizeHeight'>;
-export const boxSizing: SimpleStyleFunction<'boxSizing'>;
-export type SizingProps = PropsFor<typeof sizing>;
-
-// typography.js
-export const typographyVariant: SimpleStyleFunction<'typography'>;
-export const fontFamily: SimpleStyleFunction<'fontFamily'>;
-export const fontSize: SimpleStyleFunction<'fontSize'>;
-export const fontStyle: SimpleStyleFunction<'fontStyle'>;
-export const fontWeight: SimpleStyleFunction<'fontWeight'>;
-export const letterSpacing: SimpleStyleFunction<'letterSpacing'>;
-export const lineHeight: SimpleStyleFunction<'lineHeight'>;
-export const textAlign: SimpleStyleFunction<'textAlign'>;
-export const textTransform: SimpleStyleFunction<'textTransform'>;
-export type TypographyProps = PropsFor<typeof typography>;
+export { default as breakpoints, handleBreakpoints, mergeBreakpointsInOrder } from './breakpoints';
+
+export { default as compose } from './compose';
+
+export * from './display';
+
+export * from './flexbox';
+
+export * from './cssGrid';
+
+export * from './palette';
+
+export * from './positions';
+
+export * from './shadows';
+
+export * from './sizing';
+
+export * from './typography';
+
+export { default as unstable_getThemeValue } from './getThemeValue';
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export function unstable_getThemeValue(prop: string, value: any, theme: object): any;
 /**
  * The `css` function accepts arrays as values for mobile-first responsive styles.
  * Note that this extends to non-theme values also. For example `display=['none', 'block']`

packages/mui-system/src/memoize/index.ts

@@ -0,0 +1,2 @@
+'use client'
+export { default } from './memoize'

packages/mui-system/src/memoize/memoize.d.ts

@@ -0,0 +1,3 @@
+export default function memoize<ArgType = any, ReturnType = any>(
+  fn: (arg: ArgType) => ReturnType,
+): (arg: ArgType) => ReturnType;

packages/mui-system/src/merge/index.ts

@@ -0,0 +1,2 @@
+'use client'
+export { default } from './merge'

packages/mui-system/src/palette/index.ts

@@ -0,0 +1,3 @@
+'use client'
+export { default } from './palette'
+export * from './palette'