Skip to content

Commit 0f46d19

Browse files
JanpotJanpot
authored
[system] Fix @mui/system types organization (#45860)
1 parent 42cc8ea commit 0f46d19

File tree

17 files changed

+196
-159
lines changed

17 files changed

+196
-159
lines changed

‎packages/mui-system/src/Box/Box.d.ts

+12-143
Original file line numberDiff line numberDiff line change
@@ -8,149 +8,18 @@ import {
88
OverwriteCSSProperties,
99
AliasesCSSProperties,
1010
} from '../styleFunctionSx';
11-
12-
export type PropsFor<SomeStyleFunction> =
13-
SomeStyleFunction extends StyleFunction<infer Props> ? Props : never;
14-
export type StyleFunction<Props> = (props: Props) => any;
15-
export type SimpleStyleFunction<PropKey extends keyof any> = StyleFunction<
16-
Partial<Record<PropKey, any>>
17-
> & { filterProps: string[] };
18-
19-
// borders.js
20-
export declare const borders: SimpleStyleFunction<
21-
| 'border'
22-
| 'borderTop'
23-
| 'borderRight'
24-
| 'borderBottom'
25-
| 'borderLeft'
26-
| 'borderColor'
27-
| 'borderRadius'
28-
>;
29-
30-
export declare const display: SimpleStyleFunction<
31-
'display' | 'displayPrint' | 'overflow' | 'textOverflow' | 'visibility' | 'whiteSpace'
32-
>;
33-
34-
export declare const flexbox: SimpleStyleFunction<
35-
| 'flexBasis'
36-
| 'flexDirection'
37-
| 'flexWrap'
38-
| 'justifyContent'
39-
| 'alignItems'
40-
| 'alignContent'
41-
| 'order'
42-
| 'flex'
43-
| 'flexGrow'
44-
| 'flexShrink'
45-
| 'alignSelf'
46-
| 'justifyItems'
47-
| 'justifySelf'
48-
>;
49-
50-
export declare const grid: SimpleStyleFunction<
51-
| 'gap'
52-
| 'columnGap'
53-
| 'rowGap'
54-
| 'gridColumn'
55-
| 'gridRow'
56-
| 'gridAutoFlow'
57-
| 'gridAutoColumns'
58-
| 'gridAutoRows'
59-
| 'gridTemplateColumns'
60-
| 'gridTemplateRows'
61-
| 'gridTemplateAreas'
62-
| 'gridArea'
63-
>;
64-
65-
export declare const palette: SimpleStyleFunction<'bgcolor' | 'color'>;
66-
67-
export declare const positions: SimpleStyleFunction<
68-
'zIndex' | 'position' | 'top' | 'right' | 'bottom' | 'left'
69-
>;
70-
71-
export declare const shadows: SimpleStyleFunction<'boxShadow'>;
72-
73-
export declare const sizing: SimpleStyleFunction<
74-
| 'width'
75-
| 'maxWidth'
76-
| 'minWidth'
77-
| 'height'
78-
| 'maxHeight'
79-
| 'minHeight'
80-
| 'sizeWidth'
81-
| 'sizeHeight'
82-
| 'boxSizing'
83-
>;
84-
85-
export declare const spacing: SimpleStyleFunction<
86-
| 'm'
87-
| 'mt'
88-
| 'mr'
89-
| 'mb'
90-
| 'ml'
91-
| 'mx'
92-
| 'my'
93-
| 'p'
94-
| 'pt'
95-
| 'pr'
96-
| 'pb'
97-
| 'pl'
98-
| 'px'
99-
| 'py'
100-
| 'margin'
101-
| 'marginTop'
102-
| 'marginRight'
103-
| 'marginBottom'
104-
| 'marginLeft'
105-
| 'marginX'
106-
| 'marginY'
107-
| 'marginInline'
108-
| 'marginInlineStart'
109-
| 'marginInlineEnd'
110-
| 'marginBlock'
111-
| 'marginBlockStart'
112-
| 'marginBlockEnd'
113-
| 'padding'
114-
| 'paddingTop'
115-
| 'paddingRight'
116-
| 'paddingBottom'
117-
| 'paddingLeft'
118-
| 'paddingX'
119-
| 'paddingY'
120-
| 'paddingInline'
121-
| 'paddingInlineStart'
122-
| 'paddingInlineEnd'
123-
| 'paddingBlock'
124-
| 'paddingBlockStart'
125-
| 'paddingBlockEnd'
126-
>;
127-
128-
export declare const typography: SimpleStyleFunction<
129-
| 'typography'
130-
| 'fontFamily'
131-
| 'fontSize'
132-
| 'fontStyle'
133-
| 'fontWeight'
134-
| 'letterSpacing'
135-
| 'lineHeight'
136-
| 'textAlign'
137-
| 'textTransform'
138-
>;
139-
140-
// compose.js
141-
/**
142-
* given a list of StyleFunction return the intersection of the props each individual
143-
* StyleFunction requires.
144-
*
145-
* If `firstFn` requires { color: string } and `secondFn` requires { spacing: number }
146-
* their composed function requires { color: string, spacing: number }
147-
*/
148-
type ComposedArg<T> = T extends Array<(arg: infer P) => any> ? P : never;
149-
type ComposedOwnerState<T> = ComposedArg<T>;
150-
151-
export type ComposedStyleFunction<T extends Array<StyleFunction<any>>> = StyleFunction<
152-
ComposedOwnerState<T>
153-
> & { filterProps: string[] };
11+
import { PropsFor } from '../style';
12+
import { ComposedStyleFunction } from '../compose';
13+
import borders from '../borders';
14+
import display from '../display';
15+
import flexbox from '../flexbox';
16+
import grid from '../cssGrid';
17+
import palette from '../palette';
18+
import positions from '../positions';
19+
import shadows from '../shadows';
20+
import sizing from '../sizing';
21+
import spacing from '../spacing';
22+
import typography from '../typography';
15423

15524
export interface CustomSystemProps extends AliasesCSSProperties, OverwriteCSSProperties {}
15625

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

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { PropsFor, borders, SimpleStyleFunction } from '../Box';
1+
import { PropsFor, SimpleStyleFunction } from '../style';
22

33
export const border: SimpleStyleFunction<'border'>;
44
export const borderTop: SimpleStyleFunction<'borderTop'>;
@@ -12,6 +12,16 @@ export const borderBottomColor: SimpleStyleFunction<'borderBottomColor'>;
1212
export const borderLeftColor: SimpleStyleFunction<'borderLeftColor'>;
1313
export const borderRadius: SimpleStyleFunction<'borderRadius'>;
1414

15+
declare const borders: SimpleStyleFunction<
16+
| 'border'
17+
| 'borderTop'
18+
| 'borderRight'
19+
| 'borderBottom'
20+
| 'borderLeft'
21+
| 'borderColor'
22+
| 'borderRadius'
23+
>;
24+
1525
export type BordersProps = PropsFor<typeof borders>;
1626

1727
export default borders;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { CSSObject } from '@mui/styled-engine';
22
import { Breakpoints } from '../createBreakpoints/createBreakpoints';
33
import type { Breakpoint } from '../createTheme';
44
import { ResponsiveStyleValue } from '../styleFunctionSx';
5-
import { StyleFunction } from '../Box';
5+
import { StyleFunction } from '../style';
66

77
export interface ResolveBreakpointValuesOptions<T> {
88
values: ResponsiveStyleValue<T>;

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

+15-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,18 @@
1-
import { ComposedStyleFunction, StyleFunction } from '../Box';
1+
import { StyleFunction } from '../style';
2+
3+
/**
4+
* given a list of StyleFunction return the intersection of the props each individual
5+
* StyleFunction requires.
6+
*
7+
* If `firstFn` requires { color: string } and `secondFn` requires { spacing: number }
8+
* their composed function requires { color: string, spacing: number }
9+
*/
10+
type ComposedArg<T> = T extends Array<(arg: infer P) => any> ? P : never;
11+
type ComposedOwnerState<T> = ComposedArg<T>;
12+
13+
export type ComposedStyleFunction<T extends Array<StyleFunction<any>>> = StyleFunction<
14+
ComposedOwnerState<T>
15+
> & { filterProps: string[] };
216

317
export default function compose<T extends Array<StyleFunction<any>>>(
418
...args: T

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { default } from './compose';
1+
export { default, type ComposedStyleFunction } from './compose';

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

+16-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { PropsFor, grid, SimpleStyleFunction } from '../Box';
1+
import { PropsFor, SimpleStyleFunction } from '../style';
22

33
export const gap: SimpleStyleFunction<'gap'>;
44
export const columnGap: SimpleStyleFunction<'columnGap'>;
@@ -13,6 +13,21 @@ export const gridTemplateRows: SimpleStyleFunction<'gridTemplateRows'>;
1313
export const gridTemplateAreas: SimpleStyleFunction<'gridTemplateAreas'>;
1414
export const gridArea: SimpleStyleFunction<'gridArea'>;
1515

16+
declare const grid: SimpleStyleFunction<
17+
| 'gap'
18+
| 'columnGap'
19+
| 'rowGap'
20+
| 'gridColumn'
21+
| 'gridRow'
22+
| 'gridAutoFlow'
23+
| 'gridAutoColumns'
24+
| 'gridAutoRows'
25+
| 'gridTemplateColumns'
26+
| 'gridTemplateRows'
27+
| 'gridTemplateAreas'
28+
| 'gridArea'
29+
>;
30+
1631
export type CssGridProps = PropsFor<typeof grid>;
1732

1833
export default grid;

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

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import { PropsFor, display } from '../Box';
1+
import { PropsFor, SimpleStyleFunction } from '../style';
2+
3+
declare const display: SimpleStyleFunction<
4+
'display' | 'displayPrint' | 'overflow' | 'textOverflow' | 'visibility' | 'whiteSpace'
5+
>;
26

37
export type DisplayProps = PropsFor<typeof display>;
48

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

+31-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,34 @@
1-
import { PropsFor, flexbox } from '../Box';
1+
import { PropsFor, SimpleStyleFunction } from '../style';
2+
3+
export const flexBasis: SimpleStyleFunction<'flexBasis'>;
4+
export const flexDirection: SimpleStyleFunction<'flexDirection'>;
5+
export const flexWrap: SimpleStyleFunction<'flexWrap'>;
6+
export const justifyContent: SimpleStyleFunction<'justifyContent'>;
7+
export const alignItems: SimpleStyleFunction<'alignItems'>;
8+
export const alignContent: SimpleStyleFunction<'alignContent'>;
9+
export const order: SimpleStyleFunction<'order'>;
10+
export const flex: SimpleStyleFunction<'flex'>;
11+
export const flexGrow: SimpleStyleFunction<'flexGrow'>;
12+
export const flexShrink: SimpleStyleFunction<'flexShrink'>;
13+
export const alignSelf: SimpleStyleFunction<'alignSelf'>;
14+
export const justifyItems: SimpleStyleFunction<'justifyItems'>;
15+
export const justifySelf: SimpleStyleFunction<'justifySelf'>;
16+
17+
declare const flexbox: SimpleStyleFunction<
18+
| 'flexBasis'
19+
| 'flexDirection'
20+
| 'flexWrap'
21+
| 'justifyContent'
22+
| 'alignItems'
23+
| 'alignContent'
24+
| 'order'
25+
| 'flex'
26+
| 'flexGrow'
27+
| 'flexShrink'
28+
| 'alignSelf'
29+
| 'justifyItems'
30+
| 'justifySelf'
31+
>;
232

333
export type FlexboxProps = PropsFor<typeof flexbox>;
434

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

+10
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
export {};
33

44
export * from './borders';
5+
export { default as borders } from './borders';
56

67
export { default as breakpoints, handleBreakpoints, mergeBreakpointsInOrder } from './breakpoints';
78

@@ -10,20 +11,28 @@ export { default as cssContainerQueries, type CssContainerQueries } from './cssC
1011
export { default as compose } from './compose';
1112

1213
export * from './display';
14+
export { default as display } from './display';
1315

1416
export * from './flexbox';
17+
export { default as flexbox } from './flexbox';
1518

1619
export * from './cssGrid';
20+
export { default as grid } from './cssGrid';
1721

1822
export * from './palette';
23+
export { default as palette } from './palette';
1924

2025
export * from './positions';
26+
export { default as positions } from './positions';
2127

2228
export * from './shadows';
29+
export { default as shadows } from './shadows';
2330

2431
export * from './sizing';
32+
export { default as sizing } from './sizing';
2533

2634
export * from './typography';
35+
export { default as typography } from './typography';
2736

2837
export { default as unstable_getThemeValue } from './getThemeValue';
2938

@@ -51,6 +60,7 @@ export * from './style';
5160
export { default as style } from './style';
5261

5362
export * from './spacing';
63+
export { default as spacing } from './spacing';
5464

5565
export {
5666
default as unstable_styleFunctionSx,

‎packages/mui-system/src/palette/palette.d.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
import { PropsFor, SimpleStyleFunction, palette } from '../Box';
1+
import { PropsFor, SimpleStyleFunction } from '../style';
22

33
export const color: SimpleStyleFunction<'color'>;
44
export const bgcolor: SimpleStyleFunction<'bgcolor'>;
5+
6+
declare const palette: SimpleStyleFunction<'bgcolor' | 'color'>;
7+
58
export type PaletteProps = PropsFor<typeof palette>;
69

710
export default palette;

‎packages/mui-system/src/positions/positions.d.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import { PropsFor, positions } from '../Box';
1+
import { PropsFor, SimpleStyleFunction } from '../style';
2+
3+
declare const positions: SimpleStyleFunction<
4+
'zIndex' | 'position' | 'top' | 'right' | 'bottom' | 'left'
5+
>;
26

37
export type PositionsProps = PropsFor<typeof positions>;
48

‎packages/mui-system/src/shadows/shadows.d.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { PropsFor, shadows } from '../Box';
1+
import { PropsFor, SimpleStyleFunction } from '../style';
2+
3+
declare const shadows: SimpleStyleFunction<'boxShadow'>;
24

35
export type ShadowsProps = PropsFor<typeof shadows>;
46

‎packages/mui-system/src/sizing/sizing.d.ts

+14-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { PropsFor, SimpleStyleFunction, sizing } from '../Box';
1+
import { PropsFor, SimpleStyleFunction } from '../style';
22

33
export const width: SimpleStyleFunction<'width'>;
44
export const maxWidth: SimpleStyleFunction<'maxWidth'>;
@@ -9,6 +9,19 @@ export const minHeight: SimpleStyleFunction<'minHeight'>;
99
export const sizeWidth: SimpleStyleFunction<'sizeWidth'>;
1010
export const sizeHeight: SimpleStyleFunction<'sizeHeight'>;
1111
export const boxSizing: SimpleStyleFunction<'boxSizing'>;
12+
13+
declare const sizing: SimpleStyleFunction<
14+
| 'width'
15+
| 'maxWidth'
16+
| 'minWidth'
17+
| 'height'
18+
| 'maxHeight'
19+
| 'minHeight'
20+
| 'sizeWidth'
21+
| 'sizeHeight'
22+
| 'boxSizing'
23+
>;
24+
1225
export type SizingProps = PropsFor<typeof sizing>;
1326

1427
export default sizing;

0 commit comments

Comments
 (0)