From bfd81d2d326dca87230a661f581e6ad84b256bad Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Wed, 20 Mar 2024 16:47:04 -0300 Subject: [PATCH] [system][core] Standardize index pattern (#41574) --- apps/pigment-css-vite-app/vite.config.ts | 4 - .../migration/migration-v5/migration-v5.md | 16 +++ packages/mui-system/src/borders/borders.d.ts | 14 +++ .../mui-system/src/{ => borders}/borders.js | 10 +- .../src/{ => borders}/borders.test.js | 0 packages/mui-system/src/borders/index.ts | 3 + .../src/{ => breakpoints}/breakpoints.d.ts | 16 ++- .../src/{ => breakpoints}/breakpoints.js | 2 +- .../src/{ => breakpoints}/breakpoints.test.js | 2 +- packages/mui-system/src/breakpoints/index.ts | 3 + .../colorManipulator.d.ts | 0 .../colorManipulator.js | 0 .../colorManipulator.spec.ts | 0 .../colorManipulator.test.js | 0 .../mui-system/src/colorManipulator/index.ts | 2 + packages/mui-system/src/compose/compose.d.ts | 5 + .../mui-system/src/{ => compose}/compose.js | 2 +- .../src/{ => compose}/compose.test.js | 2 +- packages/mui-system/src/compose/index.ts | 2 + .../src/{ => createBox}/createBox.d.ts | 4 +- .../src/{ => createBox}/createBox.js | 4 +- .../src/{ => createBox}/createBox.spec.tsx | 0 .../src/{ => createBox}/createBox.test.js | 0 packages/mui-system/src/createBox/index.ts | 2 + .../src/{ => createStyled}/createStyled.d.ts | 4 +- .../src/{ => createStyled}/createStyled.js | 4 +- packages/mui-system/src/createStyled/index.ts | 3 + packages/mui-system/src/cssGrid/cssGrid.d.ts | 3 + .../mui-system/src/{ => cssGrid}/cssGrid.js | 10 +- .../src/{ => cssGrid}/cssGrid.test.js | 0 packages/mui-system/src/cssGrid/index.ts | 3 + packages/mui-system/src/display/display.d.ts | 3 + .../mui-system/src/{ => display}/display.js | 4 +- packages/mui-system/src/display/index.ts | 3 + packages/mui-system/src/flexbox/flexbox.d.ts | 3 + .../mui-system/src/{ => flexbox}/flexbox.js | 4 +- packages/mui-system/src/flexbox/index.ts | 3 + .../src/getThemeValue/getThemeValue.d.ts | 1 + .../src/{ => getThemeValue}/getThemeValue.js | 20 ++-- .../mui-system/src/getThemeValue/index.ts | 3 + packages/mui-system/src/index.d.ts | 105 ++++-------------- packages/mui-system/src/memoize/index.ts | 2 + packages/mui-system/src/memoize/memoize.d.ts | 3 + .../mui-system/src/{ => memoize}/memoize.js | 0 packages/mui-system/src/merge/index.ts | 2 + .../mui-system/src/{ => merge}/merge.d.ts | 0 packages/mui-system/src/{ => merge}/merge.js | 0 .../mui-system/src/{ => merge}/merge.test.js | 0 packages/mui-system/src/palette/index.ts | 3 + packages/mui-system/src/palette/palette.d.ts | 5 + .../mui-system/src/{ => palette}/palette.js | 4 +- .../src/{ => palette}/palette.test.js | 0 packages/mui-system/src/positions/index.ts | 3 + .../mui-system/src/positions/positions.d.ts | 3 + .../src/{ => positions}/positions.js | 4 +- .../mui-system/src/propsToClassKey/index.ts | 2 + .../propsToClassKey.d.ts | 0 .../{ => propsToClassKey}/propsToClassKey.js | 0 .../propsToClassKey.test.js | 0 .../src/responsivePropType/index.ts | 2 + .../responsivePropType.d.ts | 0 .../responsivePropType.js | 0 packages/mui-system/src/shadows/index.ts | 2 + packages/mui-system/src/shadows/shadows.d.ts | 3 + .../mui-system/src/{ => shadows}/shadows.js | 2 +- packages/mui-system/src/sizing/index.ts | 3 + packages/mui-system/src/sizing/sizing.d.ts | 12 ++ .../mui-system/src/{ => sizing}/sizing.js | 6 +- .../src/{ => sizing}/sizing.test.js | 0 packages/mui-system/src/spacing/index.ts | 3 + .../mui-system/src/{ => spacing}/spacing.d.ts | 2 +- .../mui-system/src/{ => spacing}/spacing.js | 10 +- .../src/{ => spacing}/spacing.test.js | 0 packages/mui-system/src/style/index.ts | 3 + .../mui-system/src/{ => style}/style.d.ts | 2 +- packages/mui-system/src/{ => style}/style.js | 4 +- .../mui-system/src/{ => style}/style.test.js | 0 packages/mui-system/src/styled/index.ts | 2 + .../mui-system/src/{ => styled}/styled.d.ts | 2 +- .../mui-system/src/{ => styled}/styled.js | 2 +- .../src/{ => styled}/styled.test.js | 0 packages/mui-system/src/typography/index.ts | 3 + .../mui-system/src/typography/typography.d.ts | 12 ++ .../src/{ => typography}/typography.js | 4 +- packages/mui-system/src/useTheme/index.ts | 3 + .../src/{ => useTheme}/useTheme.d.ts | 2 +- .../mui-system/src/{ => useTheme}/useTheme.js | 4 +- .../src/useThemeWithoutDefault/index.ts | 2 + .../useThemeWithoutDefault.d.ts | 0 .../useThemeWithoutDefault.js | 0 .../src/vite-plugin.ts | 4 - scripts/sizeSnapshot/webpack.config.js | 8 +- 92 files changed, 244 insertions(+), 158 deletions(-) create mode 100644 packages/mui-system/src/borders/borders.d.ts rename packages/mui-system/src/{ => borders}/borders.js (89%) rename packages/mui-system/src/{ => borders}/borders.test.js (100%) create mode 100644 packages/mui-system/src/borders/index.ts rename packages/mui-system/src/{ => breakpoints}/breakpoints.d.ts (51%) rename packages/mui-system/src/{ => breakpoints}/breakpoints.js (99%) rename packages/mui-system/src/{ => breakpoints}/breakpoints.test.js (99%) create mode 100644 packages/mui-system/src/breakpoints/index.ts rename packages/mui-system/src/{ => colorManipulator}/colorManipulator.d.ts (100%) rename packages/mui-system/src/{ => colorManipulator}/colorManipulator.js (100%) rename packages/mui-system/src/{ => colorManipulator}/colorManipulator.spec.ts (100%) rename packages/mui-system/src/{ => colorManipulator}/colorManipulator.test.js (100%) create mode 100644 packages/mui-system/src/colorManipulator/index.ts create mode 100644 packages/mui-system/src/compose/compose.d.ts rename packages/mui-system/src/{ => compose}/compose.js (96%) rename packages/mui-system/src/{ => compose}/compose.test.js (95%) create mode 100644 packages/mui-system/src/compose/index.ts rename packages/mui-system/src/{ => createBox}/createBox.d.ts (80%) rename packages/mui-system/src/{ => createBox}/createBox.js (89%) rename packages/mui-system/src/{ => createBox}/createBox.spec.tsx (100%) rename packages/mui-system/src/{ => createBox}/createBox.test.js (100%) create mode 100644 packages/mui-system/src/createBox/index.ts rename packages/mui-system/src/{ => createStyled}/createStyled.d.ts (91%) rename packages/mui-system/src/{ => createStyled}/createStyled.js (98%) create mode 100644 packages/mui-system/src/createStyled/index.ts create mode 100644 packages/mui-system/src/cssGrid/cssGrid.d.ts rename packages/mui-system/src/{ => cssGrid}/cssGrid.js (91%) rename packages/mui-system/src/{ => cssGrid}/cssGrid.test.js (100%) create mode 100644 packages/mui-system/src/cssGrid/index.ts create mode 100644 packages/mui-system/src/display/display.d.ts rename packages/mui-system/src/{ => display}/display.js (89%) create mode 100644 packages/mui-system/src/display/index.ts create mode 100644 packages/mui-system/src/flexbox/flexbox.d.ts rename packages/mui-system/src/{ => flexbox}/flexbox.js (94%) create mode 100644 packages/mui-system/src/flexbox/index.ts create mode 100644 packages/mui-system/src/getThemeValue/getThemeValue.d.ts rename packages/mui-system/src/{ => getThemeValue}/getThemeValue.js (74%) create mode 100644 packages/mui-system/src/getThemeValue/index.ts create mode 100644 packages/mui-system/src/memoize/index.ts create mode 100644 packages/mui-system/src/memoize/memoize.d.ts rename packages/mui-system/src/{ => memoize}/memoize.js (100%) create mode 100644 packages/mui-system/src/merge/index.ts rename packages/mui-system/src/{ => merge}/merge.d.ts (100%) rename packages/mui-system/src/{ => merge}/merge.js (100%) rename packages/mui-system/src/{ => merge}/merge.test.js (100%) create mode 100644 packages/mui-system/src/palette/index.ts create mode 100644 packages/mui-system/src/palette/palette.d.ts rename packages/mui-system/src/{ => palette}/palette.js (90%) rename packages/mui-system/src/{ => palette}/palette.test.js (100%) create mode 100644 packages/mui-system/src/positions/index.ts create mode 100644 packages/mui-system/src/positions/positions.d.ts rename packages/mui-system/src/{ => positions}/positions.js (86%) create mode 100644 packages/mui-system/src/propsToClassKey/index.ts rename packages/mui-system/src/{ => propsToClassKey}/propsToClassKey.d.ts (100%) rename packages/mui-system/src/{ => propsToClassKey}/propsToClassKey.js (100%) rename packages/mui-system/src/{ => propsToClassKey}/propsToClassKey.test.js (100%) create mode 100644 packages/mui-system/src/responsivePropType/index.ts rename packages/mui-system/src/{ => responsivePropType}/responsivePropType.d.ts (100%) rename packages/mui-system/src/{ => responsivePropType}/responsivePropType.js (100%) create mode 100644 packages/mui-system/src/shadows/index.ts create mode 100644 packages/mui-system/src/shadows/shadows.d.ts rename packages/mui-system/src/{ => shadows}/shadows.js (77%) create mode 100644 packages/mui-system/src/sizing/index.ts create mode 100644 packages/mui-system/src/sizing/sizing.d.ts rename packages/mui-system/src/{ => sizing}/sizing.js (95%) rename packages/mui-system/src/{ => sizing}/sizing.test.js (100%) create mode 100644 packages/mui-system/src/spacing/index.ts rename packages/mui-system/src/{ => spacing}/spacing.d.ts (96%) rename packages/mui-system/src/{ => spacing}/spacing.js (96%) rename packages/mui-system/src/{ => spacing}/spacing.test.js (100%) create mode 100644 packages/mui-system/src/style/index.ts rename packages/mui-system/src/{ => style}/style.d.ts (95%) rename packages/mui-system/src/{ => style}/style.js (95%) rename packages/mui-system/src/{ => style}/style.test.js (100%) create mode 100644 packages/mui-system/src/styled/index.ts rename packages/mui-system/src/{ => styled}/styled.d.ts (55%) rename packages/mui-system/src/{ => styled}/styled.js (56%) rename packages/mui-system/src/{ => styled}/styled.test.js (100%) create mode 100644 packages/mui-system/src/typography/index.ts create mode 100644 packages/mui-system/src/typography/typography.d.ts rename packages/mui-system/src/{ => typography}/typography.js (93%) create mode 100644 packages/mui-system/src/useTheme/index.ts rename packages/mui-system/src/{ => useTheme}/useTheme.d.ts (62%) rename packages/mui-system/src/{ => useTheme}/useTheme.js (64%) create mode 100644 packages/mui-system/src/useThemeWithoutDefault/index.ts rename packages/mui-system/src/{ => useThemeWithoutDefault}/useThemeWithoutDefault.d.ts (100%) rename packages/mui-system/src/{ => useThemeWithoutDefault}/useThemeWithoutDefault.js (100%) diff --git a/apps/pigment-css-vite-app/vite.config.ts b/apps/pigment-css-vite-app/vite.config.ts index cb841ce22d0308..5d85dd953bf486 100644 --- a/apps/pigment-css-vite-app/vite.config.ts +++ b/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', diff --git a/docs/data/system/migration/migration-v5/migration-v5.md b/docs/data/system/migration/migration-v5/migration-v5.md index 8b9028dcc249fe..dc9fa51622a50c 100644 --- a/docs/data/system/migration/migration-v5/migration-v5.md +++ b/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. diff --git a/packages/mui-system/src/borders/borders.d.ts b/packages/mui-system/src/borders/borders.d.ts new file mode 100644 index 00000000000000..f6f3a6f9ba3f7c --- /dev/null +++ b/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; diff --git a/packages/mui-system/src/borders.js b/packages/mui-system/src/borders/borders.js similarity index 89% rename from packages/mui-system/src/borders.js rename to packages/mui-system/src/borders/borders.js index 2c3f59cb90011b..4966536ebb7216 100644 --- a/packages/mui-system/src/borders.js +++ b/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') { diff --git a/packages/mui-system/src/borders.test.js b/packages/mui-system/src/borders/borders.test.js similarity index 100% rename from packages/mui-system/src/borders.test.js rename to packages/mui-system/src/borders/borders.test.js diff --git a/packages/mui-system/src/borders/index.ts b/packages/mui-system/src/borders/index.ts new file mode 100644 index 00000000000000..604a432da6c7bf --- /dev/null +++ b/packages/mui-system/src/borders/index.ts @@ -0,0 +1,3 @@ +'use client' +export { default } from './borders' +export * from './borders' diff --git a/packages/mui-system/src/breakpoints.d.ts b/packages/mui-system/src/breakpoints/breakpoints.d.ts similarity index 51% rename from packages/mui-system/src/breakpoints.d.ts rename to packages/mui-system/src/breakpoints/breakpoints.d.ts index 44c23e7799e83e..2bee2d95489e11 100644 --- a/packages/mui-system/src/breakpoints.d.ts +++ b/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 { values: ResponsiveStyleValue; @@ -19,3 +20,12 @@ export function handleBreakpoints( 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( + styleFunction: StyleFunction, +): StyleFunction> & Props>; diff --git a/packages/mui-system/src/breakpoints.js b/packages/mui-system/src/breakpoints/breakpoints.js similarity index 99% rename from packages/mui-system/src/breakpoints.js rename to packages/mui-system/src/breakpoints/breakpoints.js index b1d017b24777ed..4d6fdf84b3eaba 100644 --- a/packages/mui-system/src/breakpoints.js +++ b/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[. diff --git a/packages/mui-system/src/breakpoints.test.js b/packages/mui-system/src/breakpoints/breakpoints.test.js similarity index 99% rename from packages/mui-system/src/breakpoints.test.js rename to packages/mui-system/src/breakpoints/breakpoints.test.js index 722327d96f50ed..2f54f6b738c763 100644 --- a/packages/mui-system/src/breakpoints.test.js +++ b/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', diff --git a/packages/mui-system/src/breakpoints/index.ts b/packages/mui-system/src/breakpoints/index.ts new file mode 100644 index 00000000000000..7bef55fd727810 --- /dev/null +++ b/packages/mui-system/src/breakpoints/index.ts @@ -0,0 +1,3 @@ +'use client' +export { default } from './breakpoints' +export * from './breakpoints' diff --git a/packages/mui-system/src/colorManipulator.d.ts b/packages/mui-system/src/colorManipulator/colorManipulator.d.ts similarity index 100% rename from packages/mui-system/src/colorManipulator.d.ts rename to packages/mui-system/src/colorManipulator/colorManipulator.d.ts diff --git a/packages/mui-system/src/colorManipulator.js b/packages/mui-system/src/colorManipulator/colorManipulator.js similarity index 100% rename from packages/mui-system/src/colorManipulator.js rename to packages/mui-system/src/colorManipulator/colorManipulator.js diff --git a/packages/mui-system/src/colorManipulator.spec.ts b/packages/mui-system/src/colorManipulator/colorManipulator.spec.ts similarity index 100% rename from packages/mui-system/src/colorManipulator.spec.ts rename to packages/mui-system/src/colorManipulator/colorManipulator.spec.ts diff --git a/packages/mui-system/src/colorManipulator.test.js b/packages/mui-system/src/colorManipulator/colorManipulator.test.js similarity index 100% rename from packages/mui-system/src/colorManipulator.test.js rename to packages/mui-system/src/colorManipulator/colorManipulator.test.js diff --git a/packages/mui-system/src/colorManipulator/index.ts b/packages/mui-system/src/colorManipulator/index.ts new file mode 100644 index 00000000000000..d67673736320d5 --- /dev/null +++ b/packages/mui-system/src/colorManipulator/index.ts @@ -0,0 +1,2 @@ +'use client' +export * from './colorManipulator' diff --git a/packages/mui-system/src/compose/compose.d.ts b/packages/mui-system/src/compose/compose.d.ts new file mode 100644 index 00000000000000..e6d66dbc4ac729 --- /dev/null +++ b/packages/mui-system/src/compose/compose.d.ts @@ -0,0 +1,5 @@ +import { ComposedStyleFunction, StyleFunction } from '../Box'; + +export default function compose>>( + ...args: T +): ComposedStyleFunction; diff --git a/packages/mui-system/src/compose.js b/packages/mui-system/src/compose/compose.js similarity index 96% rename from packages/mui-system/src/compose.js rename to packages/mui-system/src/compose/compose.js index 0d51263b994efb..028fb41568ee9f 100644 --- a/packages/mui-system/src/compose.js +++ b/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) => { diff --git a/packages/mui-system/src/compose.test.js b/packages/mui-system/src/compose/compose.test.js similarity index 95% rename from packages/mui-system/src/compose.test.js rename to packages/mui-system/src/compose/compose.test.js index 186a5b7ac034b5..65d81d81fa35fe 100644 --- a/packages/mui-system/src/compose.test.js +++ b/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', diff --git a/packages/mui-system/src/compose/index.ts b/packages/mui-system/src/compose/index.ts new file mode 100644 index 00000000000000..b91e4c81a5cf1c --- /dev/null +++ b/packages/mui-system/src/compose/index.ts @@ -0,0 +1,2 @@ +'use client' +export { default } from './compose' diff --git a/packages/mui-system/src/createBox.d.ts b/packages/mui-system/src/createBox/createBox.d.ts similarity index 80% rename from packages/mui-system/src/createBox.d.ts rename to packages/mui-system/src/createBox/createBox.d.ts index 3c8a0b023bb2ca..e1a0dc507b33b4 100644 --- a/packages/mui-system/src/createBox.d.ts +++ b/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, diff --git a/packages/mui-system/src/createBox.js b/packages/mui-system/src/createBox/createBox.js similarity index 89% rename from packages/mui-system/src/createBox.js rename to packages/mui-system/src/createBox/createBox.js index e485c0ac468b07..94f8783396d889 100644 --- a/packages/mui-system/src/createBox.js +++ b/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; diff --git a/packages/mui-system/src/createBox.spec.tsx b/packages/mui-system/src/createBox/createBox.spec.tsx similarity index 100% rename from packages/mui-system/src/createBox.spec.tsx rename to packages/mui-system/src/createBox/createBox.spec.tsx diff --git a/packages/mui-system/src/createBox.test.js b/packages/mui-system/src/createBox/createBox.test.js similarity index 100% rename from packages/mui-system/src/createBox.test.js rename to packages/mui-system/src/createBox/createBox.test.js diff --git a/packages/mui-system/src/createBox/index.ts b/packages/mui-system/src/createBox/index.ts new file mode 100644 index 00000000000000..c76655d465a8db --- /dev/null +++ b/packages/mui-system/src/createBox/index.ts @@ -0,0 +1,2 @@ +'use client' +export { default } from './createBox' diff --git a/packages/mui-system/src/createStyled.d.ts b/packages/mui-system/src/createStyled/createStyled.d.ts similarity index 91% rename from packages/mui-system/src/createStyled.d.ts rename to packages/mui-system/src/createStyled/createStyled.d.ts index 6f4053f3d2eb89..d34784d02ffba0 100644 --- a/packages/mui-system/src/createStyled.d.ts +++ b/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; diff --git a/packages/mui-system/src/createStyled.js b/packages/mui-system/src/createStyled/createStyled.js similarity index 98% rename from packages/mui-system/src/createStyled.js rename to packages/mui-system/src/createStyled/createStyled.js index eaaf392f62cb8c..3c01934e020172 100644 --- a/packages/mui-system/src/createStyled.js +++ b/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; diff --git a/packages/mui-system/src/createStyled/index.ts b/packages/mui-system/src/createStyled/index.ts new file mode 100644 index 00000000000000..0fc12b0f165ea5 --- /dev/null +++ b/packages/mui-system/src/createStyled/index.ts @@ -0,0 +1,3 @@ +'use client' +export { default } from './createStyled' +export * from './createStyled' diff --git a/packages/mui-system/src/cssGrid/cssGrid.d.ts b/packages/mui-system/src/cssGrid/cssGrid.d.ts new file mode 100644 index 00000000000000..d68f696db27e58 --- /dev/null +++ b/packages/mui-system/src/cssGrid/cssGrid.d.ts @@ -0,0 +1,3 @@ +import { PropsFor, grid } from '../Box'; + +export type CssGridProps = PropsFor; diff --git a/packages/mui-system/src/cssGrid.js b/packages/mui-system/src/cssGrid/cssGrid.js similarity index 91% rename from packages/mui-system/src/cssGrid.js rename to packages/mui-system/src/cssGrid/cssGrid.js index 3b91c00d86a3ee..68df8359f79cca 100644 --- a/packages/mui-system/src/cssGrid.js +++ b/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 diff --git a/packages/mui-system/src/cssGrid.test.js b/packages/mui-system/src/cssGrid/cssGrid.test.js similarity index 100% rename from packages/mui-system/src/cssGrid.test.js rename to packages/mui-system/src/cssGrid/cssGrid.test.js diff --git a/packages/mui-system/src/cssGrid/index.ts b/packages/mui-system/src/cssGrid/index.ts new file mode 100644 index 00000000000000..f10e5620699dc7 --- /dev/null +++ b/packages/mui-system/src/cssGrid/index.ts @@ -0,0 +1,3 @@ +'use client' +export { default } from './cssGrid' +export * from './cssGrid' diff --git a/packages/mui-system/src/display/display.d.ts b/packages/mui-system/src/display/display.d.ts new file mode 100644 index 00000000000000..e22882d0d8bf00 --- /dev/null +++ b/packages/mui-system/src/display/display.d.ts @@ -0,0 +1,3 @@ +import { PropsFor, display } from '../Box'; + +export type DisplayProps = PropsFor; diff --git a/packages/mui-system/src/display.js b/packages/mui-system/src/display/display.js similarity index 89% rename from packages/mui-system/src/display.js rename to packages/mui-system/src/display/display.js index 63fdaf9265c569..182876855e329b 100644 --- a/packages/mui-system/src/display.js +++ b/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', diff --git a/packages/mui-system/src/display/index.ts b/packages/mui-system/src/display/index.ts new file mode 100644 index 00000000000000..1a19cb9d0b66f7 --- /dev/null +++ b/packages/mui-system/src/display/index.ts @@ -0,0 +1,3 @@ +'use client' +export { default } from './display' +export * from './display' diff --git a/packages/mui-system/src/flexbox/flexbox.d.ts b/packages/mui-system/src/flexbox/flexbox.d.ts new file mode 100644 index 00000000000000..08cda0bd5dd09a --- /dev/null +++ b/packages/mui-system/src/flexbox/flexbox.d.ts @@ -0,0 +1,3 @@ +import { PropsFor, flexbox } from '../Box'; + +export type FlexboxProps = PropsFor; diff --git a/packages/mui-system/src/flexbox.js b/packages/mui-system/src/flexbox/flexbox.js similarity index 94% rename from packages/mui-system/src/flexbox.js rename to packages/mui-system/src/flexbox/flexbox.js index 9c789098dc4e81..52865cffae6128 100644 --- a/packages/mui-system/src/flexbox.js +++ b/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', diff --git a/packages/mui-system/src/flexbox/index.ts b/packages/mui-system/src/flexbox/index.ts new file mode 100644 index 00000000000000..02ed11edf90789 --- /dev/null +++ b/packages/mui-system/src/flexbox/index.ts @@ -0,0 +1,3 @@ +'use client' +export { default } from './flexbox' +export * from './flexbox' diff --git a/packages/mui-system/src/getThemeValue/getThemeValue.d.ts b/packages/mui-system/src/getThemeValue/getThemeValue.d.ts new file mode 100644 index 00000000000000..5630c5f587cba4 --- /dev/null +++ b/packages/mui-system/src/getThemeValue/getThemeValue.d.ts @@ -0,0 +1 @@ +export default function getThemeValue(prop: string, value: any, theme: object): any; diff --git a/packages/mui-system/src/getThemeValue.js b/packages/mui-system/src/getThemeValue/getThemeValue.js similarity index 74% rename from packages/mui-system/src/getThemeValue.js rename to packages/mui-system/src/getThemeValue/getThemeValue.js index 8df0642f67d7c8..89f25f47a701a8 100644 --- a/packages/mui-system/src/getThemeValue.js +++ b/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, diff --git a/packages/mui-system/src/getThemeValue/index.ts b/packages/mui-system/src/getThemeValue/index.ts new file mode 100644 index 00000000000000..ade9611ef11760 --- /dev/null +++ b/packages/mui-system/src/getThemeValue/index.ts @@ -0,0 +1,3 @@ +'use client' +export { default } from './getThemeValue' +export * from './getThemeValue' diff --git a/packages/mui-system/src/index.d.ts b/packages/mui-system/src/index.d.ts index 825745b588f909..ea3580a981cc9f 100644 --- a/packages/mui-system/src/index.d.ts +++ b/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; - -// 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( - styleFunction: StyleFunction, -): StyleFunction> & Props>; - -export function compose>>(...args: T): ComposedStyleFunction; - -export type DisplayProps = PropsFor; - -// flexbox.js -export type FlexboxProps = PropsFor; - -// grid.js -export type GridProps = PropsFor; - -// palette.js -export const color: SimpleStyleFunction<'color'>; -export const bgcolor: SimpleStyleFunction<'bgcolor'>; -export type PaletteProps = PropsFor; - -export type PositionsProps = PropsFor; - -export type ShadowsProps = PropsFor; - -// * 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; - -// 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; +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']` diff --git a/packages/mui-system/src/memoize/index.ts b/packages/mui-system/src/memoize/index.ts new file mode 100644 index 00000000000000..5eca31b87ad6f8 --- /dev/null +++ b/packages/mui-system/src/memoize/index.ts @@ -0,0 +1,2 @@ +'use client' +export { default } from './memoize' diff --git a/packages/mui-system/src/memoize/memoize.d.ts b/packages/mui-system/src/memoize/memoize.d.ts new file mode 100644 index 00000000000000..e77ff91a3998cc --- /dev/null +++ b/packages/mui-system/src/memoize/memoize.d.ts @@ -0,0 +1,3 @@ +export default function memoize( + fn: (arg: ArgType) => ReturnType, +): (arg: ArgType) => ReturnType; diff --git a/packages/mui-system/src/memoize.js b/packages/mui-system/src/memoize/memoize.js similarity index 100% rename from packages/mui-system/src/memoize.js rename to packages/mui-system/src/memoize/memoize.js diff --git a/packages/mui-system/src/merge/index.ts b/packages/mui-system/src/merge/index.ts new file mode 100644 index 00000000000000..33897a82b6c484 --- /dev/null +++ b/packages/mui-system/src/merge/index.ts @@ -0,0 +1,2 @@ +'use client' +export { default } from './merge' diff --git a/packages/mui-system/src/merge.d.ts b/packages/mui-system/src/merge/merge.d.ts similarity index 100% rename from packages/mui-system/src/merge.d.ts rename to packages/mui-system/src/merge/merge.d.ts diff --git a/packages/mui-system/src/merge.js b/packages/mui-system/src/merge/merge.js similarity index 100% rename from packages/mui-system/src/merge.js rename to packages/mui-system/src/merge/merge.js diff --git a/packages/mui-system/src/merge.test.js b/packages/mui-system/src/merge/merge.test.js similarity index 100% rename from packages/mui-system/src/merge.test.js rename to packages/mui-system/src/merge/merge.test.js diff --git a/packages/mui-system/src/palette/index.ts b/packages/mui-system/src/palette/index.ts new file mode 100644 index 00000000000000..514a1ecde0bb03 --- /dev/null +++ b/packages/mui-system/src/palette/index.ts @@ -0,0 +1,3 @@ +'use client' +export { default } from './palette' +export * from './palette' diff --git a/packages/mui-system/src/palette/palette.d.ts b/packages/mui-system/src/palette/palette.d.ts new file mode 100644 index 00000000000000..458c2bc94471a3 --- /dev/null +++ b/packages/mui-system/src/palette/palette.d.ts @@ -0,0 +1,5 @@ +import { PropsFor, SimpleStyleFunction, palette } from '../Box'; + +export const color: SimpleStyleFunction<'color'>; +export const bgcolor: SimpleStyleFunction<'bgcolor'>; +export type PaletteProps = PropsFor; diff --git a/packages/mui-system/src/palette.js b/packages/mui-system/src/palette/palette.js similarity index 90% rename from packages/mui-system/src/palette.js rename to packages/mui-system/src/palette/palette.js index 10a49c9ffb3d26..56548630b31a77 100644 --- a/packages/mui-system/src/palette.js +++ b/packages/mui-system/src/palette/palette.js @@ -1,5 +1,5 @@ -import style from './style'; -import compose from './compose'; +import style from '../style'; +import compose from '../compose'; export function paletteTransform(value, userValue) { if (userValue === 'grey') { diff --git a/packages/mui-system/src/palette.test.js b/packages/mui-system/src/palette/palette.test.js similarity index 100% rename from packages/mui-system/src/palette.test.js rename to packages/mui-system/src/palette/palette.test.js diff --git a/packages/mui-system/src/positions/index.ts b/packages/mui-system/src/positions/index.ts new file mode 100644 index 00000000000000..1071dd7adb1b53 --- /dev/null +++ b/packages/mui-system/src/positions/index.ts @@ -0,0 +1,3 @@ +'use client' +export { default } from './positions' +export * from './positions' diff --git a/packages/mui-system/src/positions/positions.d.ts b/packages/mui-system/src/positions/positions.d.ts new file mode 100644 index 00000000000000..e9c6b8494fd188 --- /dev/null +++ b/packages/mui-system/src/positions/positions.d.ts @@ -0,0 +1,3 @@ +import { PropsFor, positions } from '../Box'; + +export type PositionsProps = PropsFor; diff --git a/packages/mui-system/src/positions.js b/packages/mui-system/src/positions/positions.js similarity index 86% rename from packages/mui-system/src/positions.js rename to packages/mui-system/src/positions/positions.js index 7915ec1e17774c..c323a4b178d935 100644 --- a/packages/mui-system/src/positions.js +++ b/packages/mui-system/src/positions/positions.js @@ -1,5 +1,5 @@ -import style from './style'; -import compose from './compose'; +import style from '../style'; +import compose from '../compose'; export const position = style({ prop: 'position', diff --git a/packages/mui-system/src/propsToClassKey/index.ts b/packages/mui-system/src/propsToClassKey/index.ts new file mode 100644 index 00000000000000..72620ffdd0609b --- /dev/null +++ b/packages/mui-system/src/propsToClassKey/index.ts @@ -0,0 +1,2 @@ +'use client' +export { default } from './propsToClassKey' diff --git a/packages/mui-system/src/propsToClassKey.d.ts b/packages/mui-system/src/propsToClassKey/propsToClassKey.d.ts similarity index 100% rename from packages/mui-system/src/propsToClassKey.d.ts rename to packages/mui-system/src/propsToClassKey/propsToClassKey.d.ts diff --git a/packages/mui-system/src/propsToClassKey.js b/packages/mui-system/src/propsToClassKey/propsToClassKey.js similarity index 100% rename from packages/mui-system/src/propsToClassKey.js rename to packages/mui-system/src/propsToClassKey/propsToClassKey.js diff --git a/packages/mui-system/src/propsToClassKey.test.js b/packages/mui-system/src/propsToClassKey/propsToClassKey.test.js similarity index 100% rename from packages/mui-system/src/propsToClassKey.test.js rename to packages/mui-system/src/propsToClassKey/propsToClassKey.test.js diff --git a/packages/mui-system/src/responsivePropType/index.ts b/packages/mui-system/src/responsivePropType/index.ts new file mode 100644 index 00000000000000..e6a95048fb4b29 --- /dev/null +++ b/packages/mui-system/src/responsivePropType/index.ts @@ -0,0 +1,2 @@ +'use client' +export { default } from './responsivePropType' diff --git a/packages/mui-system/src/responsivePropType.d.ts b/packages/mui-system/src/responsivePropType/responsivePropType.d.ts similarity index 100% rename from packages/mui-system/src/responsivePropType.d.ts rename to packages/mui-system/src/responsivePropType/responsivePropType.d.ts diff --git a/packages/mui-system/src/responsivePropType.js b/packages/mui-system/src/responsivePropType/responsivePropType.js similarity index 100% rename from packages/mui-system/src/responsivePropType.js rename to packages/mui-system/src/responsivePropType/responsivePropType.js diff --git a/packages/mui-system/src/shadows/index.ts b/packages/mui-system/src/shadows/index.ts new file mode 100644 index 00000000000000..91cf73d4083074 --- /dev/null +++ b/packages/mui-system/src/shadows/index.ts @@ -0,0 +1,2 @@ +'use client' +export { default } from './shadows' diff --git a/packages/mui-system/src/shadows/shadows.d.ts b/packages/mui-system/src/shadows/shadows.d.ts new file mode 100644 index 00000000000000..08f6c541ec5050 --- /dev/null +++ b/packages/mui-system/src/shadows/shadows.d.ts @@ -0,0 +1,3 @@ +import { PropsFor, shadows } from '../Box'; + +export type ShadowsProps = PropsFor; diff --git a/packages/mui-system/src/shadows.js b/packages/mui-system/src/shadows/shadows.js similarity index 77% rename from packages/mui-system/src/shadows.js rename to packages/mui-system/src/shadows/shadows.js index d8222d9acf4657..56ff37d7589d39 100644 --- a/packages/mui-system/src/shadows.js +++ b/packages/mui-system/src/shadows/shadows.js @@ -1,4 +1,4 @@ -import style from './style'; +import style from '../style'; const boxShadow = style({ prop: 'boxShadow', diff --git a/packages/mui-system/src/sizing/index.ts b/packages/mui-system/src/sizing/index.ts new file mode 100644 index 00000000000000..a4bfb71276aa9e --- /dev/null +++ b/packages/mui-system/src/sizing/index.ts @@ -0,0 +1,3 @@ +'use client' +export { default } from './sizing' +export * from './sizing' diff --git a/packages/mui-system/src/sizing/sizing.d.ts b/packages/mui-system/src/sizing/sizing.d.ts new file mode 100644 index 00000000000000..3eef58f86351d0 --- /dev/null +++ b/packages/mui-system/src/sizing/sizing.d.ts @@ -0,0 +1,12 @@ +import { PropsFor, SimpleStyleFunction, sizing } from '../Box'; + +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; diff --git a/packages/mui-system/src/sizing.js b/packages/mui-system/src/sizing/sizing.js similarity index 95% rename from packages/mui-system/src/sizing.js rename to packages/mui-system/src/sizing/sizing.js index 096a5bf9f85256..657baf6573db31 100644 --- a/packages/mui-system/src/sizing.js +++ b/packages/mui-system/src/sizing/sizing.js @@ -1,6 +1,6 @@ -import style from './style'; -import compose from './compose'; -import { handleBreakpoints, values as breakpointsValues } from './breakpoints'; +import style from '../style'; +import compose from '../compose'; +import { handleBreakpoints, values as breakpointsValues } from '../breakpoints'; export function sizingTransform(value) { return value <= 1 && value !== 0 ? `${value * 100}%` : value; diff --git a/packages/mui-system/src/sizing.test.js b/packages/mui-system/src/sizing/sizing.test.js similarity index 100% rename from packages/mui-system/src/sizing.test.js rename to packages/mui-system/src/sizing/sizing.test.js diff --git a/packages/mui-system/src/spacing/index.ts b/packages/mui-system/src/spacing/index.ts new file mode 100644 index 00000000000000..f9dd79e8463689 --- /dev/null +++ b/packages/mui-system/src/spacing/index.ts @@ -0,0 +1,3 @@ +'use client' +export { default } from './spacing' +export * from './spacing' diff --git a/packages/mui-system/src/spacing.d.ts b/packages/mui-system/src/spacing/spacing.d.ts similarity index 96% rename from packages/mui-system/src/spacing.d.ts rename to packages/mui-system/src/spacing/spacing.d.ts index b51cc4fcaee201..0e8929da993d1d 100644 --- a/packages/mui-system/src/spacing.d.ts +++ b/packages/mui-system/src/spacing/spacing.d.ts @@ -1,4 +1,4 @@ -import { SimpleStyleFunction, spacing, PropsFor } from './Box'; +import { SimpleStyleFunction, spacing, PropsFor } from '../Box'; export type SpacingValueType = string | number | null | undefined; export type SpacingProps = PropsFor; diff --git a/packages/mui-system/src/spacing.js b/packages/mui-system/src/spacing/spacing.js similarity index 96% rename from packages/mui-system/src/spacing.js rename to packages/mui-system/src/spacing/spacing.js index f22063fdfd1229..c2fecdd9389961 100644 --- a/packages/mui-system/src/spacing.js +++ b/packages/mui-system/src/spacing/spacing.js @@ -1,8 +1,8 @@ -import responsivePropType from './responsivePropType'; -import { handleBreakpoints } from './breakpoints'; -import { getPath } from './style'; -import merge from './merge'; -import memoize from './memoize'; +import responsivePropType from '../responsivePropType'; +import { handleBreakpoints } from '../breakpoints'; +import { getPath } from '../style'; +import merge from '../merge'; +import memoize from '../memoize'; const properties = { m: 'margin', diff --git a/packages/mui-system/src/spacing.test.js b/packages/mui-system/src/spacing/spacing.test.js similarity index 100% rename from packages/mui-system/src/spacing.test.js rename to packages/mui-system/src/spacing/spacing.test.js diff --git a/packages/mui-system/src/style/index.ts b/packages/mui-system/src/style/index.ts new file mode 100644 index 00000000000000..08acd4c087fa45 --- /dev/null +++ b/packages/mui-system/src/style/index.ts @@ -0,0 +1,3 @@ +'use client' +export { default } from './style' +export * from './style' diff --git a/packages/mui-system/src/style.d.ts b/packages/mui-system/src/style/style.d.ts similarity index 95% rename from packages/mui-system/src/style.d.ts rename to packages/mui-system/src/style/style.d.ts index 2f004defba6e59..122d516b151d55 100644 --- a/packages/mui-system/src/style.d.ts +++ b/packages/mui-system/src/style/style.d.ts @@ -1,5 +1,5 @@ import { CSSObject } from '@mui/styled-engine'; -import { StyleFunction } from './Box'; +import { StyleFunction } from '../Box'; export type TransformFunction = ( cssValue: unknown, diff --git a/packages/mui-system/src/style.js b/packages/mui-system/src/style/style.js similarity index 95% rename from packages/mui-system/src/style.js rename to packages/mui-system/src/style/style.js index 46e4044e34cbe8..6d19b59b3ecd08 100644 --- a/packages/mui-system/src/style.js +++ b/packages/mui-system/src/style/style.js @@ -1,6 +1,6 @@ import capitalize from '@mui/utils/capitalize'; -import responsivePropType from './responsivePropType'; -import { handleBreakpoints } from './breakpoints'; +import responsivePropType from '../responsivePropType'; +import { handleBreakpoints } from '../breakpoints'; export function getPath(obj, path, checkVars = true) { if (!path || typeof path !== 'string') { diff --git a/packages/mui-system/src/style.test.js b/packages/mui-system/src/style/style.test.js similarity index 100% rename from packages/mui-system/src/style.test.js rename to packages/mui-system/src/style/style.test.js diff --git a/packages/mui-system/src/styled/index.ts b/packages/mui-system/src/styled/index.ts new file mode 100644 index 00000000000000..84b07201910ff1 --- /dev/null +++ b/packages/mui-system/src/styled/index.ts @@ -0,0 +1,2 @@ +'use client' +export { default } from './styled' diff --git a/packages/mui-system/src/styled.d.ts b/packages/mui-system/src/styled/styled.d.ts similarity index 55% rename from packages/mui-system/src/styled.d.ts rename to packages/mui-system/src/styled/styled.d.ts index 164bc4b29175f3..29c0e61bf4c022 100644 --- a/packages/mui-system/src/styled.d.ts +++ b/packages/mui-system/src/styled/styled.d.ts @@ -1,4 +1,4 @@ -import { CreateMUIStyled } from './createStyled'; +import { CreateMUIStyled } from '../createStyled'; declare const styled: CreateMUIStyled; diff --git a/packages/mui-system/src/styled.js b/packages/mui-system/src/styled/styled.js similarity index 56% rename from packages/mui-system/src/styled.js rename to packages/mui-system/src/styled/styled.js index ee27a4a3e30c9a..1778ad7a03ad08 100644 --- a/packages/mui-system/src/styled.js +++ b/packages/mui-system/src/styled/styled.js @@ -1,4 +1,4 @@ -import createStyled from './createStyled'; +import createStyled from '../createStyled'; const styled = createStyled(); diff --git a/packages/mui-system/src/styled.test.js b/packages/mui-system/src/styled/styled.test.js similarity index 100% rename from packages/mui-system/src/styled.test.js rename to packages/mui-system/src/styled/styled.test.js diff --git a/packages/mui-system/src/typography/index.ts b/packages/mui-system/src/typography/index.ts new file mode 100644 index 00000000000000..47a686e39e497b --- /dev/null +++ b/packages/mui-system/src/typography/index.ts @@ -0,0 +1,3 @@ +'use client' +export { default } from './typography' +export * from './typography' diff --git a/packages/mui-system/src/typography/typography.d.ts b/packages/mui-system/src/typography/typography.d.ts new file mode 100644 index 00000000000000..7e34a5f11162e0 --- /dev/null +++ b/packages/mui-system/src/typography/typography.d.ts @@ -0,0 +1,12 @@ +import { PropsFor, SimpleStyleFunction, typography } from '../Box'; + +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; diff --git a/packages/mui-system/src/typography.js b/packages/mui-system/src/typography/typography.js similarity index 93% rename from packages/mui-system/src/typography.js rename to packages/mui-system/src/typography/typography.js index 2589bb4d0ae21a..f807f43fda31c5 100644 --- a/packages/mui-system/src/typography.js +++ b/packages/mui-system/src/typography/typography.js @@ -1,5 +1,5 @@ -import style from './style'; -import compose from './compose'; +import style from '../style'; +import compose from '../compose'; export const fontFamily = style({ prop: 'fontFamily', diff --git a/packages/mui-system/src/useTheme/index.ts b/packages/mui-system/src/useTheme/index.ts new file mode 100644 index 00000000000000..0d37959742e007 --- /dev/null +++ b/packages/mui-system/src/useTheme/index.ts @@ -0,0 +1,3 @@ +'use client' +export { default } from './useTheme' +export * from './useTheme' diff --git a/packages/mui-system/src/useTheme.d.ts b/packages/mui-system/src/useTheme/useTheme.d.ts similarity index 62% rename from packages/mui-system/src/useTheme.d.ts rename to packages/mui-system/src/useTheme/useTheme.d.ts index 0c794b641f61dc..e035786c6d9bd7 100644 --- a/packages/mui-system/src/useTheme.d.ts +++ b/packages/mui-system/src/useTheme/useTheme.d.ts @@ -1,3 +1,3 @@ -import { Theme } from './createTheme'; +import { Theme } from '../createTheme'; export default function useTheme(defaultTheme?: T): T; diff --git a/packages/mui-system/src/useTheme.js b/packages/mui-system/src/useTheme/useTheme.js similarity index 64% rename from packages/mui-system/src/useTheme.js rename to packages/mui-system/src/useTheme/useTheme.js index 64abf3b3a8228a..74357049e8f68e 100644 --- a/packages/mui-system/src/useTheme.js +++ b/packages/mui-system/src/useTheme/useTheme.js @@ -1,6 +1,6 @@ 'use client'; -import createTheme from './createTheme'; -import useThemeWithoutDefault from './useThemeWithoutDefault'; +import createTheme from '../createTheme'; +import useThemeWithoutDefault from '../useThemeWithoutDefault'; export const systemDefaultTheme = createTheme(); diff --git a/packages/mui-system/src/useThemeWithoutDefault/index.ts b/packages/mui-system/src/useThemeWithoutDefault/index.ts new file mode 100644 index 00000000000000..361b57e51d9a63 --- /dev/null +++ b/packages/mui-system/src/useThemeWithoutDefault/index.ts @@ -0,0 +1,2 @@ +'use client' +export { default } from './useThemeWithoutDefault' diff --git a/packages/mui-system/src/useThemeWithoutDefault.d.ts b/packages/mui-system/src/useThemeWithoutDefault/useThemeWithoutDefault.d.ts similarity index 100% rename from packages/mui-system/src/useThemeWithoutDefault.d.ts rename to packages/mui-system/src/useThemeWithoutDefault/useThemeWithoutDefault.d.ts diff --git a/packages/mui-system/src/useThemeWithoutDefault.js b/packages/mui-system/src/useThemeWithoutDefault/useThemeWithoutDefault.js similarity index 100% rename from packages/mui-system/src/useThemeWithoutDefault.js rename to packages/mui-system/src/useThemeWithoutDefault/useThemeWithoutDefault.js diff --git a/packages/pigment-css-vite-plugin/src/vite-plugin.ts b/packages/pigment-css-vite-plugin/src/vite-plugin.ts index 84ba0cc24a7fa7..89dce6737fd863 100644 --- a/packages/pigment-css-vite-plugin/src/vite-plugin.ts +++ b/packages/pigment-css-vite-plugin/src/vite-plugin.ts @@ -141,10 +141,6 @@ export default function wywVitePlugin({ log('Vite transform', getFileIdx(id)); const asyncResolve = async (what: string, importer: string, stack: string[]) => { - // @TODO - Remove this when @mui/system published esm files by default at the base directory - if (what.startsWith('@mui/system') && !what.includes('esm')) { - return what.replace('@mui/system', '@mui/system/esm'); - } const resolved = await this.resolve(what, importer); if (resolved) { if (resolved.external) { diff --git a/scripts/sizeSnapshot/webpack.config.js b/scripts/sizeSnapshot/webpack.config.js index 0d40434955fc49..6a63b053c7ae50 100644 --- a/scripts/sizeSnapshot/webpack.config.js +++ b/scripts/sizeSnapshot/webpack.config.js @@ -90,15 +90,15 @@ async function getWebpackEntries() { }, { id: '@material-ui/system', - path: 'packages/mui-system/build/esm/index.js', + path: 'packages/mui-system/build/index.js', }, { id: 'createBox', - path: 'packages/mui-system/build/esm/createBox.js', + path: 'packages/mui-system/build/createBox/index.js', }, { id: 'createStyled', - path: 'packages/mui-system/build/esm/createStyled.js', + path: 'packages/mui-system/build/createStyled/index.js', }, { id: '@material-ui/core/styles/createTheme', @@ -106,7 +106,7 @@ async function getWebpackEntries() { }, { id: 'colorManipulator', - path: 'packages/mui-system/build/colorManipulator.js', + path: 'packages/mui-system/build/colorManipulator/index.js', }, { id: 'useAutocomplete',