diff --git a/packages/mui-system/src/Box/Box.d.ts b/packages/mui-system/src/Box/Box.d.ts index 174ea89c289da2..b63d92f6b91dd1 100644 --- a/packages/mui-system/src/Box/Box.d.ts +++ b/packages/mui-system/src/Box/Box.d.ts @@ -8,149 +8,18 @@ import { OverwriteCSSProperties, AliasesCSSProperties, } from '../styleFunctionSx'; - -export type PropsFor = - SomeStyleFunction extends StyleFunction ? Props : never; -export type StyleFunction = (props: Props) => any; -export type SimpleStyleFunction = StyleFunction< - Partial> -> & { filterProps: string[] }; - -// borders.js -export declare const borders: SimpleStyleFunction< - | 'border' - | 'borderTop' - | 'borderRight' - | 'borderBottom' - | 'borderLeft' - | 'borderColor' - | 'borderRadius' ->; - -export declare const display: SimpleStyleFunction< - 'display' | 'displayPrint' | 'overflow' | 'textOverflow' | 'visibility' | 'whiteSpace' ->; - -export declare const flexbox: SimpleStyleFunction< - | 'flexBasis' - | 'flexDirection' - | 'flexWrap' - | 'justifyContent' - | 'alignItems' - | 'alignContent' - | 'order' - | 'flex' - | 'flexGrow' - | 'flexShrink' - | 'alignSelf' - | 'justifyItems' - | 'justifySelf' ->; - -export declare const grid: SimpleStyleFunction< - | 'gap' - | 'columnGap' - | 'rowGap' - | 'gridColumn' - | 'gridRow' - | 'gridAutoFlow' - | 'gridAutoColumns' - | 'gridAutoRows' - | 'gridTemplateColumns' - | 'gridTemplateRows' - | 'gridTemplateAreas' - | 'gridArea' ->; - -export declare const palette: SimpleStyleFunction<'bgcolor' | 'color'>; - -export declare const positions: SimpleStyleFunction< - 'zIndex' | 'position' | 'top' | 'right' | 'bottom' | 'left' ->; - -export declare const shadows: SimpleStyleFunction<'boxShadow'>; - -export declare const sizing: SimpleStyleFunction< - | 'width' - | 'maxWidth' - | 'minWidth' - | 'height' - | 'maxHeight' - | 'minHeight' - | 'sizeWidth' - | 'sizeHeight' - | 'boxSizing' ->; - -export declare const spacing: SimpleStyleFunction< - | 'm' - | 'mt' - | 'mr' - | 'mb' - | 'ml' - | 'mx' - | 'my' - | 'p' - | 'pt' - | 'pr' - | 'pb' - | 'pl' - | 'px' - | 'py' - | 'margin' - | 'marginTop' - | 'marginRight' - | 'marginBottom' - | 'marginLeft' - | 'marginX' - | 'marginY' - | 'marginInline' - | 'marginInlineStart' - | 'marginInlineEnd' - | 'marginBlock' - | 'marginBlockStart' - | 'marginBlockEnd' - | 'padding' - | 'paddingTop' - | 'paddingRight' - | 'paddingBottom' - | 'paddingLeft' - | 'paddingX' - | 'paddingY' - | 'paddingInline' - | 'paddingInlineStart' - | 'paddingInlineEnd' - | 'paddingBlock' - | 'paddingBlockStart' - | 'paddingBlockEnd' ->; - -export declare const typography: SimpleStyleFunction< - | 'typography' - | 'fontFamily' - | 'fontSize' - | 'fontStyle' - | 'fontWeight' - | 'letterSpacing' - | 'lineHeight' - | 'textAlign' - | 'textTransform' ->; - -// compose.js -/** - * given a list of StyleFunction return the intersection of the props each individual - * StyleFunction requires. - * - * If `firstFn` requires { color: string } and `secondFn` requires { spacing: number } - * their composed function requires { color: string, spacing: number } - */ -type ComposedArg = T extends Array<(arg: infer P) => any> ? P : never; -type ComposedOwnerState = ComposedArg; - -export type ComposedStyleFunction>> = StyleFunction< - ComposedOwnerState -> & { filterProps: string[] }; +import { PropsFor } from '../style'; +import { ComposedStyleFunction } from '../compose'; +import borders from '../borders'; +import display from '../display'; +import flexbox from '../flexbox'; +import grid from '../cssGrid'; +import palette from '../palette'; +import positions from '../positions'; +import shadows from '../shadows'; +import sizing from '../sizing'; +import spacing from '../spacing'; +import typography from '../typography'; export interface CustomSystemProps extends AliasesCSSProperties, OverwriteCSSProperties {} diff --git a/packages/mui-system/src/borders/borders.d.ts b/packages/mui-system/src/borders/borders.d.ts index 165df17100eca3..8a67f4ef02f4d9 100644 --- a/packages/mui-system/src/borders/borders.d.ts +++ b/packages/mui-system/src/borders/borders.d.ts @@ -1,4 +1,4 @@ -import { PropsFor, borders, SimpleStyleFunction } from '../Box'; +import { PropsFor, SimpleStyleFunction } from '../style'; export const border: SimpleStyleFunction<'border'>; export const borderTop: SimpleStyleFunction<'borderTop'>; @@ -12,6 +12,16 @@ export const borderBottomColor: SimpleStyleFunction<'borderBottomColor'>; export const borderLeftColor: SimpleStyleFunction<'borderLeftColor'>; export const borderRadius: SimpleStyleFunction<'borderRadius'>; +declare const borders: SimpleStyleFunction< + | 'border' + | 'borderTop' + | 'borderRight' + | 'borderBottom' + | 'borderLeft' + | 'borderColor' + | 'borderRadius' +>; + export type BordersProps = PropsFor; export default borders; diff --git a/packages/mui-system/src/breakpoints/breakpoints.d.ts b/packages/mui-system/src/breakpoints/breakpoints.d.ts index 09f951f821d98b..5db8c70c24d633 100644 --- a/packages/mui-system/src/breakpoints/breakpoints.d.ts +++ b/packages/mui-system/src/breakpoints/breakpoints.d.ts @@ -2,7 +2,7 @@ import { CSSObject } from '@mui/styled-engine'; import { Breakpoints } from '../createBreakpoints/createBreakpoints'; import type { Breakpoint } from '../createTheme'; import { ResponsiveStyleValue } from '../styleFunctionSx'; -import { StyleFunction } from '../Box'; +import { StyleFunction } from '../style'; export interface ResolveBreakpointValuesOptions { values: ResponsiveStyleValue; diff --git a/packages/mui-system/src/compose/compose.d.ts b/packages/mui-system/src/compose/compose.d.ts index e6d66dbc4ac729..fc297b86ea08f5 100644 --- a/packages/mui-system/src/compose/compose.d.ts +++ b/packages/mui-system/src/compose/compose.d.ts @@ -1,4 +1,18 @@ -import { ComposedStyleFunction, StyleFunction } from '../Box'; +import { StyleFunction } from '../style'; + +/** + * given a list of StyleFunction return the intersection of the props each individual + * StyleFunction requires. + * + * If `firstFn` requires { color: string } and `secondFn` requires { spacing: number } + * their composed function requires { color: string, spacing: number } + */ +type ComposedArg = T extends Array<(arg: infer P) => any> ? P : never; +type ComposedOwnerState = ComposedArg; + +export type ComposedStyleFunction>> = StyleFunction< + ComposedOwnerState +> & { filterProps: string[] }; export default function compose>>( ...args: T diff --git a/packages/mui-system/src/compose/index.ts b/packages/mui-system/src/compose/index.ts index 3d5783ca532442..c6f9f9c3376ba0 100644 --- a/packages/mui-system/src/compose/index.ts +++ b/packages/mui-system/src/compose/index.ts @@ -1 +1 @@ -export { default } from './compose'; +export { default, type ComposedStyleFunction } from './compose'; diff --git a/packages/mui-system/src/cssGrid/cssGrid.d.ts b/packages/mui-system/src/cssGrid/cssGrid.d.ts index 52b6d100cfe8e8..51555bc75799be 100644 --- a/packages/mui-system/src/cssGrid/cssGrid.d.ts +++ b/packages/mui-system/src/cssGrid/cssGrid.d.ts @@ -1,4 +1,4 @@ -import { PropsFor, grid, SimpleStyleFunction } from '../Box'; +import { PropsFor, SimpleStyleFunction } from '../style'; export const gap: SimpleStyleFunction<'gap'>; export const columnGap: SimpleStyleFunction<'columnGap'>; @@ -13,6 +13,21 @@ export const gridTemplateRows: SimpleStyleFunction<'gridTemplateRows'>; export const gridTemplateAreas: SimpleStyleFunction<'gridTemplateAreas'>; export const gridArea: SimpleStyleFunction<'gridArea'>; +declare const grid: SimpleStyleFunction< + | 'gap' + | 'columnGap' + | 'rowGap' + | 'gridColumn' + | 'gridRow' + | 'gridAutoFlow' + | 'gridAutoColumns' + | 'gridAutoRows' + | 'gridTemplateColumns' + | 'gridTemplateRows' + | 'gridTemplateAreas' + | 'gridArea' +>; + export type CssGridProps = PropsFor; export default grid; diff --git a/packages/mui-system/src/display/display.d.ts b/packages/mui-system/src/display/display.d.ts index 2dd15e03b4bc76..29d7e193ee3378 100644 --- a/packages/mui-system/src/display/display.d.ts +++ b/packages/mui-system/src/display/display.d.ts @@ -1,4 +1,8 @@ -import { PropsFor, display } from '../Box'; +import { PropsFor, SimpleStyleFunction } from '../style'; + +declare const display: SimpleStyleFunction< + 'display' | 'displayPrint' | 'overflow' | 'textOverflow' | 'visibility' | 'whiteSpace' +>; export type DisplayProps = PropsFor; diff --git a/packages/mui-system/src/flexbox/flexbox.d.ts b/packages/mui-system/src/flexbox/flexbox.d.ts index 101016e3e28fd5..a3b6568a1de420 100644 --- a/packages/mui-system/src/flexbox/flexbox.d.ts +++ b/packages/mui-system/src/flexbox/flexbox.d.ts @@ -1,4 +1,34 @@ -import { PropsFor, flexbox } from '../Box'; +import { PropsFor, SimpleStyleFunction } from '../style'; + +export const flexBasis: SimpleStyleFunction<'flexBasis'>; +export const flexDirection: SimpleStyleFunction<'flexDirection'>; +export const flexWrap: SimpleStyleFunction<'flexWrap'>; +export const justifyContent: SimpleStyleFunction<'justifyContent'>; +export const alignItems: SimpleStyleFunction<'alignItems'>; +export const alignContent: SimpleStyleFunction<'alignContent'>; +export const order: SimpleStyleFunction<'order'>; +export const flex: SimpleStyleFunction<'flex'>; +export const flexGrow: SimpleStyleFunction<'flexGrow'>; +export const flexShrink: SimpleStyleFunction<'flexShrink'>; +export const alignSelf: SimpleStyleFunction<'alignSelf'>; +export const justifyItems: SimpleStyleFunction<'justifyItems'>; +export const justifySelf: SimpleStyleFunction<'justifySelf'>; + +declare const flexbox: SimpleStyleFunction< + | 'flexBasis' + | 'flexDirection' + | 'flexWrap' + | 'justifyContent' + | 'alignItems' + | 'alignContent' + | 'order' + | 'flex' + | 'flexGrow' + | 'flexShrink' + | 'alignSelf' + | 'justifyItems' + | 'justifySelf' +>; export type FlexboxProps = PropsFor; diff --git a/packages/mui-system/src/index.d.ts b/packages/mui-system/src/index.d.ts index 4bd58756e351de..a4de854333999a 100644 --- a/packages/mui-system/src/index.d.ts +++ b/packages/mui-system/src/index.d.ts @@ -2,6 +2,7 @@ export {}; export * from './borders'; +export { default as borders } from './borders'; export { default as breakpoints, handleBreakpoints, mergeBreakpointsInOrder } from './breakpoints'; @@ -10,20 +11,28 @@ export { default as cssContainerQueries, type CssContainerQueries } from './cssC export { default as compose } from './compose'; export * from './display'; +export { default as display } from './display'; export * from './flexbox'; +export { default as flexbox } from './flexbox'; export * from './cssGrid'; +export { default as grid } from './cssGrid'; export * from './palette'; +export { default as palette } from './palette'; export * from './positions'; +export { default as positions } from './positions'; export * from './shadows'; +export { default as shadows } from './shadows'; export * from './sizing'; +export { default as sizing } from './sizing'; export * from './typography'; +export { default as typography } from './typography'; export { default as unstable_getThemeValue } from './getThemeValue'; @@ -51,6 +60,7 @@ export * from './style'; export { default as style } from './style'; export * from './spacing'; +export { default as spacing } from './spacing'; export { default as unstable_styleFunctionSx, diff --git a/packages/mui-system/src/palette/palette.d.ts b/packages/mui-system/src/palette/palette.d.ts index cbee1da1c69258..16f2bbad6d9847 100644 --- a/packages/mui-system/src/palette/palette.d.ts +++ b/packages/mui-system/src/palette/palette.d.ts @@ -1,7 +1,10 @@ -import { PropsFor, SimpleStyleFunction, palette } from '../Box'; +import { PropsFor, SimpleStyleFunction } from '../style'; export const color: SimpleStyleFunction<'color'>; export const bgcolor: SimpleStyleFunction<'bgcolor'>; + +declare const palette: SimpleStyleFunction<'bgcolor' | 'color'>; + export type PaletteProps = PropsFor; export default palette; diff --git a/packages/mui-system/src/positions/positions.d.ts b/packages/mui-system/src/positions/positions.d.ts index f5b201df3e0312..9c98cb319260cf 100644 --- a/packages/mui-system/src/positions/positions.d.ts +++ b/packages/mui-system/src/positions/positions.d.ts @@ -1,4 +1,8 @@ -import { PropsFor, positions } from '../Box'; +import { PropsFor, SimpleStyleFunction } from '../style'; + +declare const positions: SimpleStyleFunction< + 'zIndex' | 'position' | 'top' | 'right' | 'bottom' | 'left' +>; export type PositionsProps = PropsFor; diff --git a/packages/mui-system/src/shadows/shadows.d.ts b/packages/mui-system/src/shadows/shadows.d.ts index 016d1f6b415ae5..6c7d55f0a2101b 100644 --- a/packages/mui-system/src/shadows/shadows.d.ts +++ b/packages/mui-system/src/shadows/shadows.d.ts @@ -1,4 +1,6 @@ -import { PropsFor, shadows } from '../Box'; +import { PropsFor, SimpleStyleFunction } from '../style'; + +declare const shadows: SimpleStyleFunction<'boxShadow'>; export type ShadowsProps = PropsFor; diff --git a/packages/mui-system/src/sizing/sizing.d.ts b/packages/mui-system/src/sizing/sizing.d.ts index 2fe17a697f90dd..00a32f8e1d1f93 100644 --- a/packages/mui-system/src/sizing/sizing.d.ts +++ b/packages/mui-system/src/sizing/sizing.d.ts @@ -1,4 +1,4 @@ -import { PropsFor, SimpleStyleFunction, sizing } from '../Box'; +import { PropsFor, SimpleStyleFunction } from '../style'; export const width: SimpleStyleFunction<'width'>; export const maxWidth: SimpleStyleFunction<'maxWidth'>; @@ -9,6 +9,19 @@ export const minHeight: SimpleStyleFunction<'minHeight'>; export const sizeWidth: SimpleStyleFunction<'sizeWidth'>; export const sizeHeight: SimpleStyleFunction<'sizeHeight'>; export const boxSizing: SimpleStyleFunction<'boxSizing'>; + +declare const sizing: SimpleStyleFunction< + | 'width' + | 'maxWidth' + | 'minWidth' + | 'height' + | 'maxHeight' + | 'minHeight' + | 'sizeWidth' + | 'sizeHeight' + | 'boxSizing' +>; + export type SizingProps = PropsFor; export default sizing; diff --git a/packages/mui-system/src/spacing/spacing.d.ts b/packages/mui-system/src/spacing/spacing.d.ts index edd542d4739d4a..24d3ce56bcfec8 100644 --- a/packages/mui-system/src/spacing/spacing.d.ts +++ b/packages/mui-system/src/spacing/spacing.d.ts @@ -1,4 +1,4 @@ -import { SimpleStyleFunction, spacing, PropsFor } from '../Box'; +import { SimpleStyleFunction, PropsFor } from '../style'; export type SpacingValueType = string | number | null | undefined; export type SpacingProps = PropsFor; @@ -73,6 +73,49 @@ export const padding: SimpleStyleFunction< | 'paddingBlockEnd' >; +declare const spacing: SimpleStyleFunction< + | 'm' + | 'mt' + | 'mr' + | 'mb' + | 'ml' + | 'mx' + | 'my' + | 'p' + | 'pt' + | 'pr' + | 'pb' + | 'pl' + | 'px' + | 'py' + | 'margin' + | 'marginTop' + | 'marginRight' + | 'marginBottom' + | 'marginLeft' + | 'marginX' + | 'marginY' + | 'marginInline' + | 'marginInlineStart' + | 'marginInlineEnd' + | 'marginBlock' + | 'marginBlockStart' + | 'marginBlockEnd' + | 'padding' + | 'paddingTop' + | 'paddingRight' + | 'paddingBottom' + | 'paddingLeft' + | 'paddingX' + | 'paddingY' + | 'paddingInline' + | 'paddingInlineStart' + | 'paddingInlineEnd' + | 'paddingBlock' + | 'paddingBlockStart' + | 'paddingBlockEnd' +>; + export function getValue( transformer: (prop: SpacingValueType) => SpacingValueType, propValue: SpacingValueType, diff --git a/packages/mui-system/src/style/style.d.ts b/packages/mui-system/src/style/style.d.ts index 879364a5477dbc..b534037e9bfed5 100644 --- a/packages/mui-system/src/style/style.d.ts +++ b/packages/mui-system/src/style/style.d.ts @@ -1,5 +1,13 @@ import { CSSObject } from '@mui/styled-engine'; -import { StyleFunction } from '../Box'; + +export type PropsFor = + SomeStyleFunction extends StyleFunction ? Props : never; + +export type StyleFunction = (props: Props) => any; + +export type SimpleStyleFunction = StyleFunction< + Partial> +> & { filterProps: string[] }; export type TransformFunction = ( cssValue: unknown, diff --git a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.d.ts b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.d.ts index 7b65306ec8afb5..31e093954863fd 100644 --- a/packages/mui-system/src/styleFunctionSx/defaultSxConfig.d.ts +++ b/packages/mui-system/src/styleFunctionSx/defaultSxConfig.d.ts @@ -1,5 +1,4 @@ -import { StyleFunction } from '../Box'; -import { TransformFunction } from '../style'; +import { StyleFunction, TransformFunction } from '../style'; type SimpleStyleFunction = StyleFunction>>; diff --git a/packages/mui-system/src/typography/typography.d.ts b/packages/mui-system/src/typography/typography.d.ts index 515864797c8cc8..6a819cc632dcd0 100644 --- a/packages/mui-system/src/typography/typography.d.ts +++ b/packages/mui-system/src/typography/typography.d.ts @@ -1,4 +1,4 @@ -import { PropsFor, SimpleStyleFunction, typography } from '../Box'; +import { PropsFor, SimpleStyleFunction } from '../style'; export const typographyVariant: SimpleStyleFunction<'typography'>; export const fontFamily: SimpleStyleFunction<'fontFamily'>; @@ -9,6 +9,19 @@ export const letterSpacing: SimpleStyleFunction<'letterSpacing'>; export const lineHeight: SimpleStyleFunction<'lineHeight'>; export const textAlign: SimpleStyleFunction<'textAlign'>; export const textTransform: SimpleStyleFunction<'textTransform'>; + +declare const typography: SimpleStyleFunction< + | 'typography' + | 'fontFamily' + | 'fontSize' + | 'fontStyle' + | 'fontWeight' + | 'letterSpacing' + | 'lineHeight' + | 'textAlign' + | 'textTransform' +>; + export type TypographyProps = PropsFor; export default typography;