diff --git a/.circleci/config.yml b/.circleci/config.yml index 454036f32c4d05..3e3eb3e53df64b 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -371,6 +371,9 @@ jobs: - run: name: Validate type declarations command: pnpm validate-declarations + - run: + name: Run tests that depend on built packages + command: pnpm -r run release:test - run: name: Analyze exported typescript command: pnpm test:attw diff --git a/docs/data/material/guides/typescript/typescript.md b/docs/data/material/guides/typescript/typescript.md index da0d0a0738a3a3..2076fc5dc12784 100644 --- a/docs/data/material/guides/typescript/typescript.md +++ b/docs/data/material/guides/typescript/typescript.md @@ -66,3 +66,48 @@ const CustomButton = styled(Button)({ // your custom styles go here }) as typeof Button; ``` + +## Performance optimizations + +When building a custom theme, Material UI provides automatic autocompletion and type checking for all tokens and components. +However, this comes at the cost of some performance overhead because TypeScript has to instantiate types for all components and their variants. This can lead to slower compilation times, especially in large codebase with intensive theme customization. + +Starting from v7.4.0, Material UI offers an optimized path that significantly reduces the type instantiation overhead. +This path mirrors the exports from `@mui/material/styles` without the automatic inclusion of all component types. + +Follow the steps below to enable the optimized path in your project: + +1. Update all of the imports in your codebase from. + +```diff +-'@mui/material/styles'; ++'@mui/material/stylesOptimized'; +``` + +:::warning +The optimization will not take effect if there is a single import from the `@mui/material/styles`. +::: + +2. Use module augmentation to explicitly include the component types to the theme. + +```ts +import { createTheme } from '@mui/material/stylesOptimized'; + +import { ButtonTheme } from '@mui/material/Button'; +import { TextFieldTheme } from '@mui/material/TextField'; + +declare module '@mui/material/stylesOptimized' { + interface ThemeComponents extends ButtonTheme, TextFieldTheme {} +} + +const theme = createTheme({ + components: { + MuiButton: { + // type-safe and autocompletion enabled + }, + MuiTextField: { + // type-safe and autocompletion enabled + }, + }, +}); +``` diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 0d36aa921a0ea8..0fcb62983f4a6f 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -2156,6 +2156,19 @@ npx @mui/codemod@latest deprecations/typography-props ### v7.0.0 +#### `styles-optimized` + +```bash +npx @mui/codemod@latest v7.0.0/styles-optimized +``` + +Replace the import of `@mui/material/styles` with `@mui/material/stylesOptimized` to optimize the TypeScript instantiation for theme components. + +```diff +- import { createTheme } from '@mui/material/styles'; ++ import { createTheme } from '@mui/material/stylesOptimized'; +``` + #### `theme-color-functions` ```bash diff --git a/packages/mui-codemod/src/v7.0.0/styles-optimized/actual.js b/packages/mui-codemod/src/v7.0.0/styles-optimized/actual.js new file mode 100644 index 00000000000000..10daa52a76a5db --- /dev/null +++ b/packages/mui-codemod/src/v7.0.0/styles-optimized/actual.js @@ -0,0 +1,11 @@ +import { createTheme } from '@mui/material/styles'; + +// declare module '@mui/material/styles' { +// interface Theme { +// custom: { +// color: string; +// }; +// } +// } + +createTheme(); diff --git a/packages/mui-codemod/src/v7.0.0/styles-optimized/expected.js b/packages/mui-codemod/src/v7.0.0/styles-optimized/expected.js new file mode 100644 index 00000000000000..7f5763eb2682a4 --- /dev/null +++ b/packages/mui-codemod/src/v7.0.0/styles-optimized/expected.js @@ -0,0 +1,11 @@ +import { createTheme } from '@mui/material/stylesOptimized'; + +// declare module '@mui/material/stylesOptimized' { +// interface Theme { +// custom: { +// color: string; +// }; +// } +// } + +createTheme(); diff --git a/packages/mui-codemod/src/v7.0.0/styles-optimized/index.js b/packages/mui-codemod/src/v7.0.0/styles-optimized/index.js new file mode 100644 index 00000000000000..4412e8c5672180 --- /dev/null +++ b/packages/mui-codemod/src/v7.0.0/styles-optimized/index.js @@ -0,0 +1 @@ +export { default } from './styles-optimized'; diff --git a/packages/mui-codemod/src/v7.0.0/styles-optimized/styles-optimized.js b/packages/mui-codemod/src/v7.0.0/styles-optimized/styles-optimized.js new file mode 100644 index 00000000000000..c47edd5034352d --- /dev/null +++ b/packages/mui-codemod/src/v7.0.0/styles-optimized/styles-optimized.js @@ -0,0 +1,30 @@ +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api) { + const j = api.jscodeshift; + const root = j(file.source); + + const printOptions = { + quote: 'single', + }; + + root + .find(j.ImportDeclaration) + .filter((path) => path.node.source.value === '@mui/material/styles') + .forEach((path) => { + path.node.source.value = '@mui/material/stylesOptimized'; + }); + + return root + .toSource(printOptions) + .replace( + /declare module "@mui\/material\/styles"/g, + 'declare module "@mui/material/stylesOptimized"', + ) + .replace( + /declare module '@mui\/material\/styles'/g, + "declare module '@mui/material/stylesOptimized'", + ); +} diff --git a/packages/mui-codemod/src/v7.0.0/styles-optimized/styles-optimized.test.js b/packages/mui-codemod/src/v7.0.0/styles-optimized/styles-optimized.test.js new file mode 100644 index 00000000000000..e22847093d40fa --- /dev/null +++ b/packages/mui-codemod/src/v7.0.0/styles-optimized/styles-optimized.test.js @@ -0,0 +1,43 @@ +import path from 'path'; +import { expect } from 'chai'; +import jscodeshift from 'jscodeshift'; +import transform from './index'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('@mui/codemod', () => { + describe('v7.0.0', () => { + describe('styles-optimized', () => { + it('transforms as needed', () => { + const actual = transform( + { + source: read('./actual.js'), + path: require.resolve('./actual.js'), + }, + { jscodeshift }, + {}, + ); + + const expected = read('./expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { + source: read('./expected.js'), + path: require.resolve('./expected.js'), + }, + { jscodeshift }, + {}, + ); + + const expected = read('./expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + }); +}); diff --git a/packages/mui-lab/src/Masonry/Masonry.d.ts b/packages/mui-lab/src/Masonry/Masonry.d.ts index 530c4666296ca7..4780f3ec10a7fd 100644 --- a/packages/mui-lab/src/Masonry/Masonry.d.ts +++ b/packages/mui-lab/src/Masonry/Masonry.d.ts @@ -1,7 +1,7 @@ import { ResponsiveStyleValue, SxProps } from '@mui/system'; import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent'; -import { Theme } from '@mui/material/styles'; -import { MasonryClasses } from './masonryClasses'; +import { Theme, CreateThemeComponent } from '@mui/material/stylesOptimized'; +import { MasonryClasses, MasonryClassKey } from './masonryClasses'; export interface MasonryOwnProps { /** @@ -69,4 +69,6 @@ export type MasonryProps< AdditionalProps = {}, > = OverrideProps, RootComponent>; +export type MasonryTheme = CreateThemeComponent; + export default Masonry; diff --git a/packages/mui-lab/src/TabPanel/TabPanel.d.ts b/packages/mui-lab/src/TabPanel/TabPanel.d.ts index 5a08366d4b5c33..0d79c2153184da 100644 --- a/packages/mui-lab/src/TabPanel/TabPanel.d.ts +++ b/packages/mui-lab/src/TabPanel/TabPanel.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { InternalStandardProps as StandardProps } from '@mui/material/internal'; -import { Theme } from '@mui/material/styles'; +import { CreateThemeComponent, Theme } from '@mui/material/stylesOptimized'; import { SxProps } from '@mui/system'; -import { TabPanelClasses } from './tabPanelClasses'; +import { TabPanelClasses, TabPanelClassKey } from './tabPanelClasses'; export interface TabPanelProps extends StandardProps> { /** @@ -29,6 +29,8 @@ export interface TabPanelProps extends StandardProps; + /** * * Demos: diff --git a/packages/mui-material/src/Accordion/Accordion.d.ts b/packages/mui-material/src/Accordion/Accordion.d.ts index 13079334f1ec50..55f25e8a862927 100644 --- a/packages/mui-material/src/Accordion/Accordion.d.ts +++ b/packages/mui-material/src/Accordion/Accordion.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { TransitionProps } from '../transitions/transition'; -import { AccordionClasses } from './accordionClasses'; +import { AccordionClasses, AccordionClassKey } from './accordionClasses'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { ExtendPaperTypeMap, PaperProps } from '../Paper/Paper'; import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types'; @@ -157,4 +157,8 @@ export type AccordionProps< export interface AccordionOwnerState extends AccordionProps {} +export type AccordionTheme = { + MuiAccordion?: CreateThemeComponent; +}; + export default Accordion; diff --git a/packages/mui-material/src/AccordionActions/AccordionActions.d.ts b/packages/mui-material/src/AccordionActions/AccordionActions.d.ts index 1f5148ab00a766..d33f1151046538 100644 --- a/packages/mui-material/src/AccordionActions/AccordionActions.d.ts +++ b/packages/mui-material/src/AccordionActions/AccordionActions.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; -import { AccordionActionsClasses } from './accordionActionsClasses'; +import { AccordionActionsClasses, AccordionActionsClassKey } from './accordionActionsClasses'; export interface AccordionActionsProps extends StandardProps> { /** @@ -35,3 +35,7 @@ export interface AccordionActionsProps extends StandardProps; +}; diff --git a/packages/mui-material/src/AccordionDetails/AccordionDetails.d.ts b/packages/mui-material/src/AccordionDetails/AccordionDetails.d.ts index 4f248fd39d2f8e..1bfe4eda5c8e65 100644 --- a/packages/mui-material/src/AccordionDetails/AccordionDetails.d.ts +++ b/packages/mui-material/src/AccordionDetails/AccordionDetails.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; -import { AccordionDetailsClasses } from './accordionDetailsClasses'; +import { AccordionDetailsClasses, AccordionDetailsClassKey } from './accordionDetailsClasses'; export interface AccordionDetailsProps extends StandardProps> { /** @@ -30,3 +30,7 @@ export interface AccordionDetailsProps extends StandardProps; +}; diff --git a/packages/mui-material/src/AccordionSummary/AccordionSummary.d.ts b/packages/mui-material/src/AccordionSummary/AccordionSummary.d.ts index b57be73430895d..9ba8d2ed7d0135 100644 --- a/packages/mui-material/src/AccordionSummary/AccordionSummary.d.ts +++ b/packages/mui-material/src/AccordionSummary/AccordionSummary.d.ts @@ -3,8 +3,8 @@ import { SxProps } from '@mui/system'; import { ButtonBaseProps, ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; -import { Theme } from '../styles'; -import { AccordionSummaryClasses } from './accordionSummaryClasses'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; +import { AccordionSummaryClasses, AccordionSummaryClassKey } from './accordionSummaryClasses'; export interface AccordionSummarySlots { /** @@ -108,4 +108,8 @@ export type AccordionSummaryProps< component?: React.ElementType; }; +export type AccordionSummaryTheme = { + MuiAccordionSummary?: CreateThemeComponent; +}; + export default AccordionSummary; diff --git a/packages/mui-material/src/Alert/Alert.d.ts b/packages/mui-material/src/Alert/Alert.d.ts index 07cbe88f0027ce..279f1a5b199ed9 100644 --- a/packages/mui-material/src/Alert/Alert.d.ts +++ b/packages/mui-material/src/Alert/Alert.d.ts @@ -2,11 +2,11 @@ import * as React from 'react'; import { OverridableStringUnion } from '@mui/types'; import { SxProps } from '@mui/system'; import { SvgIconProps } from '../SvgIcon'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { IconButtonProps } from '../IconButton'; import { PaperProps } from '../Paper'; -import { AlertClasses } from './alertClasses'; +import { AlertClasses, AlertClassKey } from './alertClasses'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export type AlertColor = 'success' | 'info' | 'warning' | 'error'; @@ -203,3 +203,7 @@ export interface AlertOwnerState extends AlertProps {} * - inherits [Paper API](https://mui.com/material-ui/api/paper/) */ export default function Alert(props: AlertProps): React.JSX.Element; + +export type AlertTheme = { + MuiAlert?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/AlertTitle/AlertTitle.d.ts b/packages/mui-material/src/AlertTitle/AlertTitle.d.ts index a13424acd691f0..3a2809b36e95f9 100644 --- a/packages/mui-material/src/AlertTitle/AlertTitle.d.ts +++ b/packages/mui-material/src/AlertTitle/AlertTitle.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { TypographyProps } from '../Typography'; -import { AlertTitleClasses } from './alertTitleClasses'; +import { AlertTitleClasses, AlertTitleClassKey } from './alertTitleClasses'; export interface AlertTitleProps extends TypographyProps<'div'> { /** @@ -31,3 +31,7 @@ export interface AlertTitleProps extends TypographyProps<'div'> { * - inherits [Typography API](https://mui.com/material-ui/api/typography/) */ export default function AlertTitle(props: AlertTitleProps): React.JSX.Element; + +export type AlertTitleTheme = { + MuiAlertTitle?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/AppBar/AppBar.d.ts b/packages/mui-material/src/AppBar/AppBar.d.ts index a2cd04260fcac1..1c16ebd649fa7b 100644 --- a/packages/mui-material/src/AppBar/AppBar.d.ts +++ b/packages/mui-material/src/AppBar/AppBar.d.ts @@ -2,8 +2,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { PropTypes, Theme } from '../styles'; -import { AppBarClasses } from './appBarClasses'; +import { CreateThemeComponent, PropTypes, Theme } from '../stylesOptimized'; +import { AppBarClasses, AppBarClassKey } from './appBarClasses'; import { ExtendPaperTypeMap } from '../Paper/Paper'; export interface AppBarPropsColorOverrides {} @@ -73,4 +73,8 @@ export type AppBarProps< component?: React.ElementType; }; +export type AppBarTheme = { + MuiAppBar?: CreateThemeComponent; +}; + export default AppBar; diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts index 789cb00a8405da..083355151233d7 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts +++ b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { IconButtonProps } from '../IconButton'; import { ChipProps, ChipTypeMap } from '../Chip'; @@ -17,7 +17,7 @@ import useAutocomplete, { UseAutocompleteProps, AutocompleteFreeSoloValueMapping, } from '../useAutocomplete'; -import { AutocompleteClasses } from './autocompleteClasses'; +import { AutocompleteClasses, AutocompleteClassKey } from './autocompleteClasses'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export interface AutocompletePaperSlotPropsOverrides {} @@ -421,3 +421,10 @@ export default function Autocomplete< >( props: AutocompleteProps, ): React.JSX.Element; + +export type AutocompleteTheme = { + MuiAutocomplete?: CreateThemeComponent< + AutocompleteClassKey, + AutocompleteProps + >; +}; diff --git a/packages/mui-material/src/Avatar/Avatar.d.ts b/packages/mui-material/src/Avatar/Avatar.d.ts index 27dbebb88f5426..db015cb76b5b23 100644 --- a/packages/mui-material/src/Avatar/Avatar.d.ts +++ b/packages/mui-material/src/Avatar/Avatar.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { AvatarClasses } from './avatarClasses'; +import { AvatarClasses, AvatarClassKey } from './avatarClasses'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; import { SvgIconProps } from '../SvgIcon'; @@ -130,4 +130,8 @@ export type AvatarProps< component?: React.ElementType; }; +export type AvatarTheme = { + MuiAvatar?: CreateThemeComponent; +}; + export default Avatar; diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts b/packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts index 18b1301fae861d..18b5a1a1e37149 100644 --- a/packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts +++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts @@ -6,8 +6,8 @@ import { PartiallyRequired, } from '@mui/types'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; -import { AvatarGroupClasses } from './avatarGroupClasses'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; +import { AvatarGroupClasses, AvatarGroupClassKey } from './avatarGroupClasses'; import Avatar from '../Avatar'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; @@ -125,4 +125,8 @@ export type AvatarGroupProps< export interface AvatarGroupOwnerState extends PartiallyRequired {} +export type AvatarGroupTheme = { + MuiAvatarGroup?: CreateThemeComponent; +}; + export default AvatarGroup; diff --git a/packages/mui-material/src/Backdrop/Backdrop.d.ts b/packages/mui-material/src/Backdrop/Backdrop.d.ts index d329a26e5faa98..c302146c70c4d5 100644 --- a/packages/mui-material/src/Backdrop/Backdrop.d.ts +++ b/packages/mui-material/src/Backdrop/Backdrop.d.ts @@ -2,8 +2,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { FadeProps } from '../Fade'; import { TransitionProps } from '../transitions/transition'; -import { Theme } from '../styles'; -import { BackdropClasses } from './backdropClasses'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; +import { BackdropClasses, BackdropClassKey } from './backdropClasses'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types'; @@ -142,4 +142,8 @@ export type BackdropProps< export interface BackdropOwnerState extends BackdropProps {} +export type BackdropTheme = { + MuiBackdrop?: CreateThemeComponent; +}; + export default Backdrop; diff --git a/packages/mui-material/src/Badge/Badge.d.ts b/packages/mui-material/src/Badge/Badge.d.ts index f632622cbedbcf..bdd694edfc9360 100644 --- a/packages/mui-material/src/Badge/Badge.d.ts +++ b/packages/mui-material/src/Badge/Badge.d.ts @@ -2,9 +2,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion, Simplify } from '@mui/types'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { BadgeClasses } from './badgeClasses'; +import { BadgeClasses, BadgeClassKey } from './badgeClasses'; export interface BadgePropsVariantOverrides {} export interface BadgePropsColorOverrides {} @@ -182,4 +182,8 @@ export type BadgeProps< component?: React.ElementType; }; +export type BadgeTheme = { + MuiBadge?: CreateThemeComponent; +}; + export default Badge; diff --git a/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts b/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts index 8ee3712d347df5..9ec4fe943c5a7f 100644 --- a/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts +++ b/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { BottomNavigationClasses } from './bottomNavigationClasses'; +import { BottomNavigationClasses, BottomNavigationClassKey } from './bottomNavigationClasses'; export interface BottomNavigationOwnProps { /** @@ -62,4 +62,8 @@ export type BottomNavigationProps< component?: React.ElementType; }; +export type BottomNavigationTheme = { + MuiBottomNavigation?: CreateThemeComponent; +}; + export default BottomNavigation; diff --git a/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.d.ts b/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.d.ts index c7dfbccffb9412..0bd0833075720c 100644 --- a/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.d.ts +++ b/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.d.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { ButtonBaseProps, ButtonBaseTypeMap, @@ -9,7 +9,10 @@ import { ExtendButtonBaseTypeMap, } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; -import { BottomNavigationActionClasses } from './bottomNavigationActionClasses'; +import { + BottomNavigationActionClasses, + BottomNavigationActionClassKey, +} from './bottomNavigationActionClasses'; export interface BottomNavigationActionSlots { /** @@ -109,4 +112,11 @@ export type BottomNavigationActionProps< export interface BottomNavigationActionOwnerState extends Omit {} +export type BottomNavigationActionTheme = { + MuiBottomNavigationAction?: CreateThemeComponent< + BottomNavigationActionClassKey, + BottomNavigationActionProps + >; +}; + export default BottomNavigationAction; diff --git a/packages/mui-material/src/Box/Box.d.ts b/packages/mui-material/src/Box/Box.d.ts index 55d5f2928abb38..8151374e1c75c3 100644 --- a/packages/mui-material/src/Box/Box.d.ts +++ b/packages/mui-material/src/Box/Box.d.ts @@ -1,7 +1,7 @@ import { BoxTypeMap } from '@mui/system'; import { OverridableComponent } from '@mui/types'; import { OverrideProps } from '../OverridableComponent'; -import { Theme as MaterialTheme } from '../styles'; +import { Theme as MaterialTheme } from '../stylesOptimized'; /** * diff --git a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.d.ts b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.d.ts index 66f8e9f0ea71ba..652d0f71f7007b 100644 --- a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.d.ts +++ b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { SlotComponentProps } from '../utils/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { BreadcrumbsClasses } from './breadcrumbsClasses'; +import { BreadcrumbsClasses, BreadcrumbsClassKey } from './breadcrumbsClasses'; import SvgIcon from '../SvgIcon'; export interface BreadcrumbsCollapsedIconSlotPropsOverrides {} @@ -107,4 +107,8 @@ export type BreadcrumbsProps< component?: React.ElementType; }; +export type BreadcrumbsTheme = { + MuiBreadcrumbs?: CreateThemeComponent; +}; + export default Breadcrumbs; diff --git a/packages/mui-material/src/Button/Button.d.ts b/packages/mui-material/src/Button/Button.d.ts index 0e32a0b6ab459e..10dc3af50b6fab 100644 --- a/packages/mui-material/src/Button/Button.d.ts +++ b/packages/mui-material/src/Button/Button.d.ts @@ -1,10 +1,10 @@ import * as React from 'react'; import { DistributiveOmit, OverridableStringUnion } from '@mui/types'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps, OverridableComponent, OverridableTypeMap } from '../OverridableComponent'; -import { ButtonClasses } from './buttonClasses'; +import { ButtonClasses, ButtonClassKey } from './buttonClasses'; export interface ButtonPropsVariantOverrides {} @@ -146,4 +146,8 @@ export type ButtonProps< component?: React.ElementType; }; +export type ButtonTheme = { + MuiButton?: CreateThemeComponent; +}; + export default Button; diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.d.ts b/packages/mui-material/src/ButtonBase/ButtonBase.d.ts index 66eb592b9e6bc7..2d57357ea6afee 100644 --- a/packages/mui-material/src/ButtonBase/ButtonBase.d.ts +++ b/packages/mui-material/src/ButtonBase/ButtonBase.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { TouchRippleActions, TouchRippleProps } from './TouchRipple'; import { OverrideProps, OverridableComponent, OverridableTypeMap } from '../OverridableComponent'; -import { ButtonBaseClasses } from './buttonBaseClasses'; +import { ButtonBaseClasses, ButtonBaseClassKey } from './buttonBaseClasses'; export { TouchRippleActions, TouchRippleProps }; @@ -136,4 +136,8 @@ export interface ButtonBaseActions { focusVisible(): void; } +export type ButtonBaseTheme = { + MuiButtonBase?: CreateThemeComponent; +}; + export default ButtonBase; diff --git a/packages/mui-material/src/ButtonBase/TouchRipple.d.ts b/packages/mui-material/src/ButtonBase/TouchRipple.d.ts index 0a10a49b1e5ae3..0d14cae65709ce 100644 --- a/packages/mui-material/src/ButtonBase/TouchRipple.d.ts +++ b/packages/mui-material/src/ButtonBase/TouchRipple.d.ts @@ -1,5 +1,6 @@ import * as React from 'react'; import { InternalStandardProps as StandardProps } from '../internal'; +import { CreateThemeComponent } from '../stylesOptimized'; import { TouchRippleClasses, TouchRippleClassKey } from './touchRippleClasses'; export { TouchRippleClassKey }; @@ -29,4 +30,8 @@ export type TouchRippleProps = StandardProps> declare const TouchRipple: React.ForwardRefRenderFunction; +export type TouchRippleTheme = { + MuiTouchRipple?: CreateThemeComponent; +}; + export default TouchRipple; diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.d.ts b/packages/mui-material/src/ButtonGroup/ButtonGroup.d.ts index 75eab285d16818..0aeee751587f50 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.d.ts +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.d.ts @@ -2,8 +2,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { Theme } from '../styles'; -import { ButtonGroupClasses } from './buttonGroupClasses'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; +import { ButtonGroupClasses, ButtonGroupClassKey } from './buttonGroupClasses'; export interface ButtonGroupPropsColorOverrides {} export interface ButtonGroupPropsVariantOverrides {} @@ -105,4 +105,8 @@ export type ButtonGroupProps< component?: React.ElementType; }; +export type ButtonGroupTheme = { + MuiButtonGroup?: CreateThemeComponent; +}; + export default ButtonGroup; diff --git a/packages/mui-material/src/Card/Card.d.ts b/packages/mui-material/src/Card/Card.d.ts index 8e4da68393723c..99968e4feecd67 100644 --- a/packages/mui-material/src/Card/Card.d.ts +++ b/packages/mui-material/src/Card/Card.d.ts @@ -2,9 +2,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { DistributiveOmit } from '@mui/types'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { PaperOwnProps } from '../Paper'; -import { CardClasses } from './cardClasses'; +import { CardClasses, CardClassKey } from './cardClasses'; // TODO: v6 remove this interface, it is not used export interface CardPropsColorOverrides {} @@ -54,4 +54,8 @@ export type CardProps< component?: React.ElementType; }; +export type CardTheme = { + MuiCard?: CreateThemeComponent; +}; + export default Card; diff --git a/packages/mui-material/src/CardActionArea/CardActionArea.d.ts b/packages/mui-material/src/CardActionArea/CardActionArea.d.ts index 0b5020f463ff63..9afdca63900d88 100644 --- a/packages/mui-material/src/CardActionArea/CardActionArea.d.ts +++ b/packages/mui-material/src/CardActionArea/CardActionArea.d.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { SlotProps, CreateSlotsAndSlotProps } from '../utils/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { ButtonBaseProps, ButtonBaseTypeMap, @@ -9,7 +9,7 @@ import { ExtendButtonBaseTypeMap, } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; -import { CardActionAreaClasses } from './cardActionAreaClasses'; +import { CardActionAreaClasses, CardActionAreaClassKey } from './cardActionAreaClasses'; export interface CardActionAreaSlots { /** @@ -85,4 +85,8 @@ export type CardActionAreaProps< component?: React.ElementType; }; +export type CardActionAreaTheme = { + MuiCardActionArea?: CreateThemeComponent; +}; + export default CardActionArea; diff --git a/packages/mui-material/src/CardActions/CardActions.d.ts b/packages/mui-material/src/CardActions/CardActions.d.ts index 1d4aff55ddf182..6b26f5b3f78bf9 100644 --- a/packages/mui-material/src/CardActions/CardActions.d.ts +++ b/packages/mui-material/src/CardActions/CardActions.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; -import { CardActionsClasses } from './cardActionsClasses'; +import { CardActionsClasses, CardActionsClassKey } from './cardActionsClasses'; export interface CardActionsProps extends StandardProps> { /** @@ -35,3 +35,7 @@ export interface CardActionsProps extends StandardProps; +}; diff --git a/packages/mui-material/src/CardContent/CardContent.d.ts b/packages/mui-material/src/CardContent/CardContent.d.ts index dcd4246e81fe29..6c51b6c95209b0 100644 --- a/packages/mui-material/src/CardContent/CardContent.d.ts +++ b/packages/mui-material/src/CardContent/CardContent.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { Theme } from '../styles'; -import { CardContentClasses } from './cardContentClasses'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; +import { CardContentClasses, CardContentClassKey } from './cardContentClasses'; export interface CardContentOwnProps { /** @@ -45,4 +45,8 @@ export type CardContentProps< component?: React.ElementType; }; +export type CardContentTheme = { + MuiCardContent?: CreateThemeComponent; +}; + export default CardContent; diff --git a/packages/mui-material/src/CardHeader/CardHeader.d.ts b/packages/mui-material/src/CardHeader/CardHeader.d.ts index 3f9c7ae8e71a96..021e33863d298c 100644 --- a/packages/mui-material/src/CardHeader/CardHeader.d.ts +++ b/packages/mui-material/src/CardHeader/CardHeader.d.ts @@ -2,9 +2,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { TypographyProps } from '../Typography'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; -import { CardHeaderClasses } from './cardHeaderClasses'; +import { CardHeaderClasses, CardHeaderClassKey } from './cardHeaderClasses'; export interface CardHeaderRootSlotPropsOverrides {} @@ -231,4 +231,8 @@ export type CardHeaderPropsWithComponent< SubheaderTypographyComponent >; +export type CardHeaderTheme = { + MuiCardHeader?: CreateThemeComponent; +}; + export default CardHeader; diff --git a/packages/mui-material/src/CardMedia/CardMedia.d.ts b/packages/mui-material/src/CardMedia/CardMedia.d.ts index 65cfa85db78d23..fb8bceb89a9267 100644 --- a/packages/mui-material/src/CardMedia/CardMedia.d.ts +++ b/packages/mui-material/src/CardMedia/CardMedia.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { CardMediaClasses } from './cardMediaClasses'; +import { CardMediaClasses, CardMediaClassKey } from './cardMediaClasses'; export interface CardMediaOwnProps { /** @@ -55,4 +55,8 @@ export type CardMediaProps< component?: React.ElementType; }; +export type CardMediaTheme = { + MuiCardMedia?: CreateThemeComponent; +}; + export default CardMedia; diff --git a/packages/mui-material/src/Checkbox/Checkbox.d.ts b/packages/mui-material/src/Checkbox/Checkbox.d.ts index 34d1b6d9a1a1f4..56237342b17c3c 100644 --- a/packages/mui-material/src/Checkbox/Checkbox.d.ts +++ b/packages/mui-material/src/Checkbox/Checkbox.d.ts @@ -1,11 +1,11 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; import { SwitchBaseProps } from '../internal/SwitchBase'; -import { CheckboxClasses } from './checkboxClasses'; +import { CheckboxClasses, CheckboxClassKey } from './checkboxClasses'; export interface CheckboxPropsSizeOverrides {} @@ -153,3 +153,7 @@ export interface CheckboxOwnerState extends Omit; +}; diff --git a/packages/mui-material/src/Chip/Chip.d.ts b/packages/mui-material/src/Chip/Chip.d.ts index 06f81d7d09a6bc..a88e0644143ce4 100644 --- a/packages/mui-material/src/Chip/Chip.d.ts +++ b/packages/mui-material/src/Chip/Chip.d.ts @@ -2,9 +2,9 @@ import * as React from 'react'; import { OverridableStringUnion } from '@mui/types'; import { SxProps } from '@mui/system'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { ChipClasses } from './chipClasses'; +import { ChipClasses, ChipClassKey } from './chipClasses'; export interface ChipSlots { /** @@ -152,4 +152,8 @@ export type ChipProps< component?: React.ElementType; }; +export type ChipTheme = { + MuiChip?: CreateThemeComponent; +}; + export default Chip; diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.d.ts b/packages/mui-material/src/CircularProgress/CircularProgress.d.ts index 8caa6abdced8d5..07c9cc1b4edf64 100644 --- a/packages/mui-material/src/CircularProgress/CircularProgress.d.ts +++ b/packages/mui-material/src/CircularProgress/CircularProgress.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; -import { CircularProgressClasses } from './circularProgressClasses'; +import { CircularProgressClasses, CircularProgressClassKey } from './circularProgressClasses'; export interface CircularProgressPropsColorOverrides {} export interface CircularProgressPropsVariantOverrides {} @@ -85,3 +85,7 @@ export interface CircularProgressProps * - [CircularProgress API](https://mui.com/material-ui/api/circular-progress/) */ export default function CircularProgress(props: CircularProgressProps): React.JSX.Element; + +export type CircularProgressTheme = { + MuiCircularProgress?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/Collapse/Collapse.d.ts b/packages/mui-material/src/Collapse/Collapse.d.ts index 46f3ae39a62cc8..7ce68f22703ad2 100644 --- a/packages/mui-material/src/Collapse/Collapse.d.ts +++ b/packages/mui-material/src/Collapse/Collapse.d.ts @@ -1,10 +1,10 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { TransitionStatus } from 'react-transition-group'; -import { Theme } from '../styles'; +import { Theme, CreateThemeComponent } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { TransitionProps } from '../transitions/transition'; -import { CollapseClasses } from './collapseClasses'; +import { CollapseClasses, CollapseClassKey } from './collapseClasses'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export interface CollapseSlots { @@ -112,3 +112,7 @@ export interface CollapseOwnerState extends CollapseProps { */ export default function Collapse(props: CollapseProps): React.JSX.Element; + +export type CollapseTheme = { + MuiCollapse?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/Container/Container.d.ts b/packages/mui-material/src/Container/Container.d.ts index 9416144afe2943..25b71738a422c4 100644 --- a/packages/mui-material/src/Container/Container.d.ts +++ b/packages/mui-material/src/Container/Container.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps, Breakpoint } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { ContainerClasses } from './containerClasses'; +import { ContainerClasses, ContainerClassKey } from './containerClasses'; export interface ContainerOwnProps { children?: React.ReactNode; @@ -62,4 +62,8 @@ export type ContainerProps< component?: React.ElementType; }; +export type ContainerTheme = { + MuiContainer?: CreateThemeComponent; +}; + export default Container; diff --git a/packages/mui-material/src/CssBaseline/CssBaseline.d.ts b/packages/mui-material/src/CssBaseline/CssBaseline.d.ts index 11cb225bd7ac03..dd4fc5954a3f34 100644 --- a/packages/mui-material/src/CssBaseline/CssBaseline.d.ts +++ b/packages/mui-material/src/CssBaseline/CssBaseline.d.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { StyledComponentProps } from '../styles'; +import { StyledComponentProps } from '../stylesOptimized'; export interface CssBaselineProps extends StyledComponentProps { /** diff --git a/packages/mui-material/src/Dialog/Dialog.d.ts b/packages/mui-material/src/Dialog/Dialog.d.ts index 0069a75f7b1252..9fe8bbe10f1923 100644 --- a/packages/mui-material/src/Dialog/Dialog.d.ts +++ b/packages/mui-material/src/Dialog/Dialog.d.ts @@ -1,12 +1,12 @@ import * as React from 'react'; import { SxProps, Breakpoint } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { BackdropProps } from '../Backdrop'; import { PaperProps } from '../Paper'; import { ModalProps } from '../Modal'; import { TransitionProps } from '../transitions/transition'; -import { DialogClasses } from './dialogClasses'; +import { DialogClasses, DialogClassKey } from './dialogClasses'; import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types'; export interface DialogSlots { @@ -205,3 +205,7 @@ export interface DialogProps export default function Dialog(props: DialogProps): React.JSX.Element; export interface DialogOwnerState extends Omit {} + +export type DialogTheme = { + MuiDialog?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/DialogActions/DialogActions.d.ts b/packages/mui-material/src/DialogActions/DialogActions.d.ts index c9bb4e960378b0..e1a490d3551a0a 100644 --- a/packages/mui-material/src/DialogActions/DialogActions.d.ts +++ b/packages/mui-material/src/DialogActions/DialogActions.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; -import { DialogActionsClasses } from './dialogActionsClasses'; +import { DialogActionsClasses, DialogActionsClassKey } from './dialogActionsClasses'; export interface DialogActionsProps extends StandardProps> { /** @@ -35,3 +35,7 @@ export interface DialogActionsProps extends StandardProps; +}; diff --git a/packages/mui-material/src/DialogContent/DialogContent.d.ts b/packages/mui-material/src/DialogContent/DialogContent.d.ts index 05a238bfea6452..4fde5b160abaa6 100644 --- a/packages/mui-material/src/DialogContent/DialogContent.d.ts +++ b/packages/mui-material/src/DialogContent/DialogContent.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; -import { DialogContentClasses } from './dialogContentClasses'; +import { DialogContentClasses, DialogContentClassKey } from './dialogContentClasses'; export interface DialogContentProps extends StandardProps> { /** @@ -35,3 +35,7 @@ export interface DialogContentProps extends StandardProps; +}; diff --git a/packages/mui-material/src/DialogContentText/DialogContentText.d.ts b/packages/mui-material/src/DialogContentText/DialogContentText.d.ts index 4241654030a832..eb5a092c5b700b 100644 --- a/packages/mui-material/src/DialogContentText/DialogContentText.d.ts +++ b/packages/mui-material/src/DialogContentText/DialogContentText.d.ts @@ -2,8 +2,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { TypographyTypeMap } from '../Typography'; import { OverrideProps, OverridableComponent } from '../OverridableComponent'; -import { Theme } from '../styles'; -import { DialogContentTextClasses } from './dialogContentTextClasses'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; +import { DialogContentTextClasses, DialogContentTextClassKey } from './dialogContentTextClasses'; export interface DialogContentTextOwnProps extends Omit { /** @@ -44,4 +44,8 @@ export type DialogContentTextProps< component?: React.ElementType; }; +export type DialogContentTextTheme = { + MuiDialogContentText?: CreateThemeComponent; +}; + export default DialogContentText; diff --git a/packages/mui-material/src/DialogTitle/DialogTitle.d.ts b/packages/mui-material/src/DialogTitle/DialogTitle.d.ts index 3586405748dc38..969b2b8f5cabea 100644 --- a/packages/mui-material/src/DialogTitle/DialogTitle.d.ts +++ b/packages/mui-material/src/DialogTitle/DialogTitle.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { TypographyTypeMap } from '../Typography'; -import { DialogTitleClasses } from './dialogTitleClasses'; +import { DialogTitleClasses, DialogTitleClassKey } from './dialogTitleClasses'; export interface DialogTitleOwnProps extends Omit { /** @@ -48,4 +48,8 @@ export type DialogTitleProps< component?: React.ElementType; }; +export type DialogTitleTheme = { + MuiDialogTitle?: CreateThemeComponent; +}; + export default DialogTitle; diff --git a/packages/mui-material/src/Divider/Divider.d.ts b/packages/mui-material/src/Divider/Divider.d.ts index 25b5f969e88339..d151d54f54ae09 100644 --- a/packages/mui-material/src/Divider/Divider.d.ts +++ b/packages/mui-material/src/Divider/Divider.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { OverridableStringUnion } from '@mui/types'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { DividerClasses } from './dividerClasses'; +import { DividerClasses, DividerClassKey } from './dividerClasses'; export interface DividerPropsVariantOverrides {} @@ -82,4 +82,8 @@ export type DividerProps< component?: React.ElementType; }; +export type DividerTheme = { + MuiDivider?: CreateThemeComponent; +}; + export default Divider; diff --git a/packages/mui-material/src/Drawer/Drawer.d.ts b/packages/mui-material/src/Drawer/Drawer.d.ts index 58fdfd9bb80cc6..eeecff94194900 100644 --- a/packages/mui-material/src/Drawer/Drawer.d.ts +++ b/packages/mui-material/src/Drawer/Drawer.d.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; import { ModalProps } from '../Modal'; @@ -8,7 +8,7 @@ import { BackdropProps } from '../Backdrop'; import { SlideProps } from '../Slide'; import { PaperProps } from '../Paper'; import { TransitionProps } from '../transitions/transition'; -import { DrawerClasses } from './drawerClasses'; +import { DrawerClasses, DrawerClassKey } from './drawerClasses'; export interface DrawerRootSlotPropsOverrides {} @@ -178,3 +178,7 @@ export interface DrawerOwnerState extends Omit; +}; diff --git a/packages/mui-material/src/Fab/Fab.d.ts b/packages/mui-material/src/Fab/Fab.d.ts index 935bb60bbeff2b..c5625b5a0afc93 100644 --- a/packages/mui-material/src/Fab/Fab.d.ts +++ b/packages/mui-material/src/Fab/Fab.d.ts @@ -1,10 +1,10 @@ import * as React from 'react'; import { OverridableStringUnion } from '@mui/types'; import { SxProps } from '@mui/system'; -import { PropTypes, Theme } from '../styles'; +import { PropTypes, CreateThemeComponent, Theme } from '../stylesOptimized'; import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; -import { FabClasses } from './fabClasses'; +import { FabClasses, FabClassKey } from './fabClasses'; export interface FabPropsVariantOverrides {} @@ -95,4 +95,8 @@ export type FabProps< component?: React.ElementType; }; +export type FabTheme = { + MuiFab?: CreateThemeComponent; +}; + export default Fab; diff --git a/packages/mui-material/src/FilledInput/FilledInput.d.ts b/packages/mui-material/src/FilledInput/FilledInput.d.ts index a2903ec7107209..eeb7b9a617afe4 100644 --- a/packages/mui-material/src/FilledInput/FilledInput.d.ts +++ b/packages/mui-material/src/FilledInput/FilledInput.d.ts @@ -1,8 +1,8 @@ import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { InputBaseProps } from '../InputBase'; -import { FilledInputClasses } from './filledInputClasses'; +import { FilledInputClasses, FilledInputClassKey } from './filledInputClasses'; export interface FilledInputProps extends StandardProps { /** @@ -40,4 +40,8 @@ export interface FilledInputProps extends StandardProps { */ declare const FilledInput: ((props: FilledInputProps) => React.JSX.Element) & { muiName: string }; +export type FilledInputTheme = { + MuiFilledInput?: CreateThemeComponent; +}; + export default FilledInput; diff --git a/packages/mui-material/src/FormControl/FormControl.d.ts b/packages/mui-material/src/FormControl/FormControl.d.ts index 3bf94a5d6dd196..6e54e9ba2d52af 100644 --- a/packages/mui-material/src/FormControl/FormControl.d.ts +++ b/packages/mui-material/src/FormControl/FormControl.d.ts @@ -2,8 +2,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { Theme } from '../styles'; -import { FormControlClasses } from './formControlClasses'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; +import { FormControlClasses, FormControlClassKey } from './formControlClasses'; export interface FormControlPropsSizeOverrides {} export interface FormControlPropsColorOverrides {} @@ -131,4 +131,8 @@ export type FormControlProps< component?: React.ElementType; }; +export type FormControlTheme = { + MuiFormControl?: CreateThemeComponent; +}; + export default FormControl; diff --git a/packages/mui-material/src/FormControlLabel/FormControlLabel.d.ts b/packages/mui-material/src/FormControlLabel/FormControlLabel.d.ts index 87df9c07eaebb5..06d976b93ec83e 100644 --- a/packages/mui-material/src/FormControlLabel/FormControlLabel.d.ts +++ b/packages/mui-material/src/FormControlLabel/FormControlLabel.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import Typography, { TypographyProps } from '../Typography'; -import { FormControlLabelClasses } from './formControlLabelClasses'; +import { FormControlLabelClasses, FormControlLabelClassKey } from './formControlLabelClasses'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export interface FormControlLabelSlots { @@ -108,3 +108,7 @@ export interface FormControlLabelProps * - [FormControlLabel API](https://mui.com/material-ui/api/form-control-label/) */ export default function FormControlLabel(props: FormControlLabelProps): React.JSX.Element; + +export type FormControlLabelTheme = { + MuiFormControlLabel?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/FormGroup/FormGroup.d.ts b/packages/mui-material/src/FormGroup/FormGroup.d.ts index 3e2ff166d7e54a..a05181d374eb60 100644 --- a/packages/mui-material/src/FormGroup/FormGroup.d.ts +++ b/packages/mui-material/src/FormGroup/FormGroup.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; -import { FormGroupClasses } from './formGroupClasses'; +import { FormGroupClasses, FormGroupClassKey } from './formGroupClasses'; export interface FormGroupProps extends StandardProps> { /** @@ -39,3 +39,7 @@ export interface FormGroupProps extends StandardProps; +}; diff --git a/packages/mui-material/src/FormHelperText/FormHelperText.d.ts b/packages/mui-material/src/FormHelperText/FormHelperText.d.ts index 0869db3920d6b8..0802e2e6c5cdec 100644 --- a/packages/mui-material/src/FormHelperText/FormHelperText.d.ts +++ b/packages/mui-material/src/FormHelperText/FormHelperText.d.ts @@ -2,8 +2,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { Theme } from '../styles'; -import { FormHelperTextClasses } from './formHelperTextClasses'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; +import { FormHelperTextClasses, FormHelperTextClassKey } from './formHelperTextClasses'; export interface FormHelperTextPropsVariantOverrides {} @@ -82,4 +82,8 @@ export type FormHelperTextProps< component?: React.ElementType; }; +export type FormHelperTextTheme = { + MuiFormHelperText?: CreateThemeComponent; +}; + export default FormHelperText; diff --git a/packages/mui-material/src/FormLabel/FormLabel.d.ts b/packages/mui-material/src/FormLabel/FormLabel.d.ts index f332f4d1c1a33d..af7b7fdf265850 100644 --- a/packages/mui-material/src/FormLabel/FormLabel.d.ts +++ b/packages/mui-material/src/FormLabel/FormLabel.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps, OverridableTypeMap } from '../OverridableComponent'; -import { FormLabelClasses } from './formLabelClasses'; +import { FormLabelClasses, FormLabelClassKey } from './formLabelClasses'; export interface FormLabelPropsColorOverrides {} @@ -90,4 +90,8 @@ export type FormLabelProps< component?: React.ElementType; }; +export type FormLabelTheme = { + MuiFormLabel?: CreateThemeComponent; +}; + export default FormLabel; diff --git a/packages/mui-material/src/GlobalStyles/GlobalStyles.d.ts b/packages/mui-material/src/GlobalStyles/GlobalStyles.d.ts index a5f9b45d7ab4fc..5201b91eafea64 100644 --- a/packages/mui-material/src/GlobalStyles/GlobalStyles.d.ts +++ b/packages/mui-material/src/GlobalStyles/GlobalStyles.d.ts @@ -1,5 +1,5 @@ import { GlobalStylesProps as StyledGlobalStylesProps } from '@mui/system'; -import { Theme } from '../styles'; +import { Theme } from '../stylesOptimized'; export interface GlobalStylesProps { /** diff --git a/packages/mui-material/src/Grid/Grid.tsx b/packages/mui-material/src/Grid/Grid.tsx index 82f026147cb593..bdafb07ee3830e 100644 --- a/packages/mui-material/src/Grid/Grid.tsx +++ b/packages/mui-material/src/Grid/Grid.tsx @@ -4,9 +4,10 @@ import { createGrid } from '@mui/system/Grid'; import { SxProps, SystemProps } from '@mui/system'; import { OverridableComponent, OverrideProps } from '@mui/types'; import requirePropFactory from '../utils/requirePropFactory'; -import { Theme, styled, Breakpoint } from '../styles'; +import { CreateThemeComponent, Theme, styled, Breakpoint } from '../stylesOptimized'; import { useDefaultProps } from '../DefaultPropsProvider'; -import useTheme from '../styles/useTheme'; +import useTheme from '../stylesOptimized/useTheme'; +import { GridClassKey } from './gridClasses'; type ResponsiveStyleValue = T | Array | { [key in Breakpoint]?: T | null }; @@ -279,4 +280,8 @@ if (process.env.NODE_ENV !== 'production') { }; } +export type GridTheme = { + MuiGrid?: CreateThemeComponent; +}; + export default Grid; diff --git a/packages/mui-material/src/GridLegacy/GridLegacy.d.ts b/packages/mui-material/src/GridLegacy/GridLegacy.d.ts index e97350963e7d6d..b3e8ed20c5390d 100644 --- a/packages/mui-material/src/GridLegacy/GridLegacy.d.ts +++ b/packages/mui-material/src/GridLegacy/GridLegacy.d.ts @@ -7,9 +7,9 @@ import { BreakpointOverrides, } from '@mui/system'; import { IfEquals } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { GridLegacyClasses } from './gridLegacyClasses'; +import { GridLegacyClasses, GridLegacyClassKey } from './gridLegacyClasses'; export type GridLegacyDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'; @@ -184,4 +184,8 @@ export type GridLegacyProps< component?: React.ElementType; }; +export type GridLegacyTheme = { + MuiGridLegacy?: CreateThemeComponent; +}; + export default GridLegacy; diff --git a/packages/mui-material/src/Icon/Icon.d.ts b/packages/mui-material/src/Icon/Icon.d.ts index 643e8a9667a12d..96ef6b45de17e8 100644 --- a/packages/mui-material/src/Icon/Icon.d.ts +++ b/packages/mui-material/src/Icon/Icon.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { IconClasses } from './iconClasses'; +import { IconClasses, IconClassKey } from './iconClasses'; export interface IconPropsSizeOverrides {} @@ -83,4 +83,8 @@ export type IconProps< component?: React.ElementType; }; +export type IconTheme = { + MuiIcon?: CreateThemeComponent; +}; + export default Icon; diff --git a/packages/mui-material/src/IconButton/IconButton.d.ts b/packages/mui-material/src/IconButton/IconButton.d.ts index b28c9d8983f232..e0f3c8c1b406f9 100644 --- a/packages/mui-material/src/IconButton/IconButton.d.ts +++ b/packages/mui-material/src/IconButton/IconButton.d.ts @@ -1,10 +1,10 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; -import { IconButtonClasses } from './iconButtonClasses'; +import { IconButtonClasses, IconButtonClassKey } from './iconButtonClasses'; export interface IconButtonPropsColorOverrides {} @@ -102,4 +102,8 @@ export type IconButtonProps< component?: React.ElementType; }; +export type IconButtonTheme = { + MuiIconButton?: CreateThemeComponent; +}; + export default IconButton; diff --git a/packages/mui-material/src/ImageList/ImageList.d.ts b/packages/mui-material/src/ImageList/ImageList.d.ts index 0b14c467dea56f..4f09632e74d61b 100644 --- a/packages/mui-material/src/ImageList/ImageList.d.ts +++ b/packages/mui-material/src/ImageList/ImageList.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { ImageListClasses } from './imageListClasses'; +import { ImageListClasses, ImageListClassKey } from './imageListClasses'; export interface ImageListPropsVariantOverrides {} @@ -71,4 +71,8 @@ export type ImageListProps< component?: React.ElementType; }; +export type ImageListTheme = { + MuiImageList?: CreateThemeComponent; +}; + export default ImageList; diff --git a/packages/mui-material/src/ImageListItem/ImageListItem.d.ts b/packages/mui-material/src/ImageListItem/ImageListItem.d.ts index 8d1b8af3087a4a..b54ec9645542f0 100644 --- a/packages/mui-material/src/ImageListItem/ImageListItem.d.ts +++ b/packages/mui-material/src/ImageListItem/ImageListItem.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { ImageListItemClasses } from './imageListItemClasses'; +import { ImageListItemClasses, ImageListItemClassKey } from './imageListItemClasses'; export interface ImageListItemOwnProps { /** @@ -55,4 +55,8 @@ export type ImageListItemProps< component?: React.ElementType; }; +export type ImageListItemTheme = { + MuiImageListItem?: CreateThemeComponent; +}; + export default ImageListItem; diff --git a/packages/mui-material/src/ImageListItemBar/ImageListItemBar.d.ts b/packages/mui-material/src/ImageListItemBar/ImageListItemBar.d.ts index a2497ce76e91b0..27fe9315d054fd 100644 --- a/packages/mui-material/src/ImageListItemBar/ImageListItemBar.d.ts +++ b/packages/mui-material/src/ImageListItemBar/ImageListItemBar.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; -import { ImageListItemBarClasses } from './imageListItemBarClasses'; +import { ImageListItemBarClasses, ImageListItemBarClassKey } from './imageListItemBarClasses'; export interface ImageListItemBarProps extends StandardProps, 'title'> { @@ -50,3 +50,7 @@ export interface ImageListItemBarProps * - [ImageListItemBar API](https://mui.com/material-ui/api/image-list-item-bar/) */ export default function ImageListItemBar(props: ImageListItemBarProps): React.JSX.Element; + +export type ImageListItemBarTheme = { + MuiImageListItemBar?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/Input/Input.d.ts b/packages/mui-material/src/Input/Input.d.ts index 09eeb86b2bc811..8a7a636a9686d1 100644 --- a/packages/mui-material/src/Input/Input.d.ts +++ b/packages/mui-material/src/Input/Input.d.ts @@ -1,8 +1,8 @@ import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { InputBaseProps } from '../InputBase'; -import { InputClasses } from './inputClasses'; +import { InputClasses, InputClassKey } from './inputClasses'; export interface InputProps extends StandardProps { /** @@ -33,4 +33,8 @@ export interface InputProps extends StandardProps { */ declare const Input: ((props: InputProps) => React.JSX.Element) & { muiName: string }; +export type InputTheme = { + MuiInput?: CreateThemeComponent; +}; + export default Input; diff --git a/packages/mui-material/src/InputAdornment/InputAdornment.d.ts b/packages/mui-material/src/InputAdornment/InputAdornment.d.ts index 0c4083d21460db..f530e700384ea0 100644 --- a/packages/mui-material/src/InputAdornment/InputAdornment.d.ts +++ b/packages/mui-material/src/InputAdornment/InputAdornment.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { Theme } from '../styles'; -import { InputAdornmentClasses } from './inputAdornmentClasses'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; +import { InputAdornmentClasses, InputAdornmentClassKey } from './inputAdornmentClasses'; export interface InputAdornmentOwnProps { /** @@ -66,4 +66,8 @@ export type InputAdornmentProps< component?: React.ElementType; }; +export type InputAdornmentTheme = { + MuiInputAdornment?: CreateThemeComponent; +}; + export default InputAdornment; diff --git a/packages/mui-material/src/InputBase/InputBase.d.ts b/packages/mui-material/src/InputBase/InputBase.d.ts index 21040080f02eec..95b8a8934a16d4 100644 --- a/packages/mui-material/src/InputBase/InputBase.d.ts +++ b/packages/mui-material/src/InputBase/InputBase.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; -import { InputBaseClasses } from './inputBaseClasses'; +import { InputBaseClasses, InputBaseClassKey } from './inputBaseClasses'; export interface InputBasePropsSizeOverrides {} @@ -262,3 +262,7 @@ export interface InputBaseComponentProps * - [InputBase API](https://mui.com/material-ui/api/input-base/) */ export default function InputBase(props: InputBaseProps): React.JSX.Element; + +export type InputBaseTheme = { + MuiInputBase?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/InputLabel/InputLabel.d.ts b/packages/mui-material/src/InputLabel/InputLabel.d.ts index 22d25409d41828..23eec963075972 100644 --- a/packages/mui-material/src/InputLabel/InputLabel.d.ts +++ b/packages/mui-material/src/InputLabel/InputLabel.d.ts @@ -2,8 +2,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; import { FormLabelProps, ExtendFormLabelTypeMap } from '../FormLabel'; -import { Theme } from '../styles'; -import { InputLabelClasses } from './inputLabelClasses'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; +import { InputLabelClasses, InputLabelClassKey } from './inputLabelClasses'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; export interface InputLabelPropsSizeOverrides {} @@ -87,4 +87,8 @@ export type InputLabelProps< component?: React.ElementType; }; +export type InputLabelTheme = { + MuiInputLabel?: CreateThemeComponent; +}; + export default InputLabel; diff --git a/packages/mui-material/src/LinearProgress/LinearProgress.d.ts b/packages/mui-material/src/LinearProgress/LinearProgress.d.ts index 5b0586be0ed0d5..54c5c616933e2a 100644 --- a/packages/mui-material/src/LinearProgress/LinearProgress.d.ts +++ b/packages/mui-material/src/LinearProgress/LinearProgress.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; -import { LinearProgressClasses } from './linearProgressClasses'; +import { LinearProgressClasses, LinearProgressClassKey } from './linearProgressClasses'; export interface LinearProgressPropsColorOverrides {} export interface LinearProgressPropsVariantOverrides {} @@ -65,3 +65,7 @@ export interface LinearProgressProps * - [LinearProgress API](https://mui.com/material-ui/api/linear-progress/) */ export default function LinearProgress(props: LinearProgressProps): React.JSX.Element; + +export type LinearProgressTheme = { + MuiLinearProgress?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/Link/Link.d.ts b/packages/mui-material/src/Link/Link.d.ts index d144f31447d7ff..8ee1c96f18bd24 100644 --- a/packages/mui-material/src/Link/Link.d.ts +++ b/packages/mui-material/src/Link/Link.d.ts @@ -2,9 +2,9 @@ import * as React from 'react'; import { DistributiveOmit } from '@mui/types'; import { SxProps } from '@mui/system'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { TypographyOwnProps } from '../Typography'; -import { LinkClasses } from './linkClasses'; +import { LinkClasses, LinkClassKey } from './linkClasses'; export interface LinkOwnProps extends DistributiveOmit { /** @@ -71,4 +71,8 @@ export type LinkProps< component?: React.ElementType; }; +export type LinkTheme = { + MuiLink?: CreateThemeComponent; +}; + export default Link; diff --git a/packages/mui-material/src/Link/getTextDecoration.ts b/packages/mui-material/src/Link/getTextDecoration.ts index 375180905cd40c..0542f90d97b549 100644 --- a/packages/mui-material/src/Link/getTextDecoration.ts +++ b/packages/mui-material/src/Link/getTextDecoration.ts @@ -1,6 +1,6 @@ import { getPath } from '@mui/system/style'; import { alpha } from '@mui/system/colorManipulator'; -import type { Theme } from '../styles'; +import type { Theme } from '../stylesOptimized'; const getTextDecoration = ({ theme, diff --git a/packages/mui-material/src/List/List.d.ts b/packages/mui-material/src/List/List.d.ts index 4428576dc6e6ae..7c2d8d99ceb9f5 100644 --- a/packages/mui-material/src/List/List.d.ts +++ b/packages/mui-material/src/List/List.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverridableTypeMap, OverrideProps } from '../OverridableComponent'; -import { ListClasses } from './listClasses'; +import { ListClasses, ListClassKey } from './listClasses'; export interface ListOwnProps { /** @@ -72,4 +72,8 @@ export type ListProps< component?: React.ElementType; }; +export type ListTheme = { + MuiList?: CreateThemeComponent; +}; + export default List; diff --git a/packages/mui-material/src/ListItem/ListItem.d.ts b/packages/mui-material/src/ListItem/ListItem.d.ts index 8ae949d3edc526..e8b02dfdf907f8 100644 --- a/packages/mui-material/src/ListItem/ListItem.d.ts +++ b/packages/mui-material/src/ListItem/ListItem.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { ListItemClasses } from './listItemClasses'; +import { ListItemClasses, ListItemClassKey } from './listItemClasses'; export interface ListItemComponentsPropsOverrides {} @@ -132,4 +132,8 @@ export type ListItemProps< component?: React.ElementType; }; +export type ListItemTheme = { + MuiListItem?: CreateThemeComponent; +}; + export default ListItem; diff --git a/packages/mui-material/src/ListItemAvatar/ListItemAvatar.d.ts b/packages/mui-material/src/ListItemAvatar/ListItemAvatar.d.ts index a6e4753064c73b..31a08be5717788 100644 --- a/packages/mui-material/src/ListItemAvatar/ListItemAvatar.d.ts +++ b/packages/mui-material/src/ListItemAvatar/ListItemAvatar.d.ts @@ -1,7 +1,7 @@ import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; -import { ListItemAvatarClasses } from './listItemAvatarClasses'; +import { ListItemAvatarClasses, ListItemAvatarClassKey } from './listItemAvatarClasses'; export interface ListItemAvatarProps extends StandardProps> { /** @@ -30,3 +30,7 @@ export interface ListItemAvatarProps extends StandardProps; +}; diff --git a/packages/mui-material/src/ListItemButton/ListItemButton.d.ts b/packages/mui-material/src/ListItemButton/ListItemButton.d.ts index 9172789eaa7ea1..b72e656ea987de 100644 --- a/packages/mui-material/src/ListItemButton/ListItemButton.d.ts +++ b/packages/mui-material/src/ListItemButton/ListItemButton.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; -import { ListItemButtonClasses } from './listItemButtonClasses'; +import { ListItemButtonClasses, ListItemButtonClassKey } from './listItemButtonClasses'; /** * This interface is kept for backward compatibility. To extend `LitItemButton` @@ -92,4 +92,8 @@ export type ListItemButtonProps< component?: React.ElementType; }; +export type ListItemButtonTheme = { + MuiListItemButton?: CreateThemeComponent; +}; + export default ListItemButton; diff --git a/packages/mui-material/src/ListItemIcon/ListItemIcon.d.ts b/packages/mui-material/src/ListItemIcon/ListItemIcon.d.ts index 89af755b187908..5b28bfc07cdaae 100644 --- a/packages/mui-material/src/ListItemIcon/ListItemIcon.d.ts +++ b/packages/mui-material/src/ListItemIcon/ListItemIcon.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; -import { ListItemIconClasses } from './listItemIconClasses'; +import { ListItemIconClasses, ListItemIconClassKey } from './listItemIconClasses'; export interface ListItemIconProps extends StandardProps> { /** @@ -32,3 +32,7 @@ export interface ListItemIconProps extends StandardProps; +}; diff --git a/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.d.ts b/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.d.ts index 40764e2cb16f0e..6c5441e5a380ab 100644 --- a/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.d.ts +++ b/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.d.ts @@ -1,8 +1,11 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; -import { ListItemSecondaryActionClasses } from './listItemSecondaryActionClasses'; +import { + ListItemSecondaryActionClasses, + ListItemSecondaryActionClassKey, +} from './listItemSecondaryActionClasses'; export interface ListItemSecondaryActionProps extends StandardProps> { @@ -39,4 +42,11 @@ declare const ListItemSecondaryAction: (( muiName: string; }; +export type ListItemSecondaryActionTheme = { + MuiListItemSecondaryAction?: CreateThemeComponent< + ListItemSecondaryActionClassKey, + ListItemSecondaryActionProps + >; +}; + export default ListItemSecondaryAction; diff --git a/packages/mui-material/src/ListItemText/ListItemText.d.ts b/packages/mui-material/src/ListItemText/ListItemText.d.ts index dbcfd79f3dca33..492b8fce99d819 100644 --- a/packages/mui-material/src/ListItemText/ListItemText.d.ts +++ b/packages/mui-material/src/ListItemText/ListItemText.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { TypographyProps } from '../Typography'; -import { ListItemTextClasses } from './listItemTextClasses'; +import { ListItemTextClasses, ListItemTextClassKey } from './listItemTextClasses'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export interface ListItemTextSlots { @@ -122,3 +122,7 @@ export default function ListItemText< >( props: ListItemTextProps, ): React.JSX.Element; + +export type ListItemTextTheme = { + MuiListItemText?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/ListSubheader/ListSubheader.d.ts b/packages/mui-material/src/ListSubheader/ListSubheader.d.ts index 9d728c99223af7..a761ba9a3b80f4 100644 --- a/packages/mui-material/src/ListSubheader/ListSubheader.d.ts +++ b/packages/mui-material/src/ListSubheader/ListSubheader.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { ListSubheaderClasses } from './listSubheaderClasses'; +import { ListSubheaderClasses, ListSubheaderClassKey } from './listSubheaderClasses'; export interface ListSubheaderOwnProps { /** @@ -66,4 +66,8 @@ export type ListSubheaderProps< component?: React.ElementType; }; +export type ListSubheaderTheme = { + MuiListSubheader?: CreateThemeComponent; +}; + export default ListSubheader; diff --git a/packages/mui-material/src/Menu/Menu.d.ts b/packages/mui-material/src/Menu/Menu.d.ts index 88259c7056a96d..8f7773b4e644b5 100644 --- a/packages/mui-material/src/Menu/Menu.d.ts +++ b/packages/mui-material/src/Menu/Menu.d.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { PaperProps } from '../Paper'; import { PopoverProps } from '../Popover'; @@ -8,7 +8,7 @@ import { MenuListProps } from '../MenuList'; import { ModalProps } from '../Modal'; import { BackdropProps } from '../Backdrop'; import { TransitionProps } from '../transitions/transition'; -import { MenuClasses } from './menuClasses'; +import { MenuClasses, MenuClassKey } from './menuClasses'; import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types'; export interface MenuRootSlotPropsOverrides {} @@ -182,3 +182,7 @@ export declare const MenuPaper: React.FC; * - inherits [Popover API](https://mui.com/material-ui/api/popover/) */ export default function Menu(props: MenuProps): React.JSX.Element; + +export type MenuTheme = { + MuiMenu?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/MenuItem/MenuItem.d.ts b/packages/mui-material/src/MenuItem/MenuItem.d.ts index 76f2fe665f8070..9eed6f594dcd47 100644 --- a/packages/mui-material/src/MenuItem/MenuItem.d.ts +++ b/packages/mui-material/src/MenuItem/MenuItem.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; -import { MenuItemClasses } from './menuItemClasses'; +import { MenuItemClasses, MenuItemClassKey } from './menuItemClasses'; export interface MenuItemOwnProps { /** @@ -76,4 +76,8 @@ export type MenuItemProps< component?: React.ElementType; }; +export type MenuItemTheme = { + MuiMenuItem?: CreateThemeComponent; +}; + export default MenuItem; diff --git a/packages/mui-material/src/MenuList/MenuList.d.ts b/packages/mui-material/src/MenuList/MenuList.d.ts index f177efc71b9cb6..737ed643655820 100644 --- a/packages/mui-material/src/MenuList/MenuList.d.ts +++ b/packages/mui-material/src/MenuList/MenuList.d.ts @@ -1,6 +1,7 @@ import * as React from 'react'; import { ExtendList, ExtendListTypeMap } from '../List'; import { OverrideProps } from '../OverridableComponent'; +import { CreateThemeComponent } from '../stylesOptimized'; export interface MenuListOwnProps { /** @@ -70,4 +71,8 @@ export type MenuListProps< component?: React.ElementType; }; +export type MenuListTheme = { + MuiMenuList?: CreateThemeComponent; +}; + export default MenuList; diff --git a/packages/mui-material/src/MobileStepper/MobileStepper.d.ts b/packages/mui-material/src/MobileStepper/MobileStepper.d.ts index 491e2c96d2e3de..64596a5b942f9e 100644 --- a/packages/mui-material/src/MobileStepper/MobileStepper.d.ts +++ b/packages/mui-material/src/MobileStepper/MobileStepper.d.ts @@ -1,10 +1,10 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { PaperProps } from '../Paper'; import { LinearProgressProps } from '../LinearProgress'; -import { MobileStepperClasses } from './mobileStepperClasses'; +import { MobileStepperClasses, MobileStepperClassKey } from './mobileStepperClasses'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export interface MobileStepperSlots { @@ -129,3 +129,7 @@ export interface MobileStepperOwnerState extends Omit; +}; diff --git a/packages/mui-material/src/Modal/Modal.d.ts b/packages/mui-material/src/Modal/Modal.d.ts index 45433c7056efb9..ff3e4fc5362a8e 100644 --- a/packages/mui-material/src/Modal/Modal.d.ts +++ b/packages/mui-material/src/Modal/Modal.d.ts @@ -3,10 +3,10 @@ import { SxProps } from '@mui/system'; import { OverrideProps } from '@mui/types'; import { SlotComponentProps } from '../utils/types'; import { PortalProps } from '../Portal'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import Backdrop, { BackdropProps } from '../Backdrop'; import { OverridableComponent } from '../OverridableComponent'; -import { ModalClasses } from './modalClasses'; +import { ModalClasses, ModalClassKey } from './modalClasses'; export interface ModalComponentsPropsOverrides {} @@ -230,4 +230,8 @@ export type ModalProps< component?: React.ElementType; }; +export type ModalTheme = { + MuiModal?: CreateThemeComponent; +}; + export default Modal; diff --git a/packages/mui-material/src/NativeSelect/NativeSelect.d.ts b/packages/mui-material/src/NativeSelect/NativeSelect.d.ts index 8b211dd54d2832..ae892ec1c907ff 100644 --- a/packages/mui-material/src/NativeSelect/NativeSelect.d.ts +++ b/packages/mui-material/src/NativeSelect/NativeSelect.d.ts @@ -1,10 +1,10 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { InputProps } from '../Input'; import { NativeSelectInputProps } from './NativeSelectInput'; -import { NativeSelectClasses } from './nativeSelectClasses'; +import { NativeSelectClasses, NativeSelectClassKey } from './nativeSelectClasses'; export interface NativeSelectProps extends StandardProps { @@ -67,4 +67,8 @@ export interface NativeSelectProps */ declare const NativeSelect: ((props: NativeSelectProps) => React.JSX.Element) & { muiName: string }; +export type NativeSelectTheme = { + MuiNativeSelect?: CreateThemeComponent; +}; + export default NativeSelect; diff --git a/packages/mui-material/src/NativeSelect/NativeSelectInput.d.ts b/packages/mui-material/src/NativeSelect/NativeSelectInput.d.ts index 633c5ee3bf491e..6c40f3d38e5da6 100644 --- a/packages/mui-material/src/NativeSelect/NativeSelectInput.d.ts +++ b/packages/mui-material/src/NativeSelect/NativeSelectInput.d.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { Theme } from '../stylesOptimized'; export interface NativeSelectInputProps extends React.SelectHTMLAttributes { disabled?: boolean; diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.d.ts b/packages/mui-material/src/OutlinedInput/OutlinedInput.d.ts index 7af6427a1e0bf3..544e626fac13a7 100644 --- a/packages/mui-material/src/OutlinedInput/OutlinedInput.d.ts +++ b/packages/mui-material/src/OutlinedInput/OutlinedInput.d.ts @@ -1,10 +1,10 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { InputBaseProps } from '../InputBase'; -import { OutlinedInputClasses } from './outlinedInputClasses'; +import { OutlinedInputClasses, OutlinedInputClassKey } from './outlinedInputClasses'; interface OutlinedInputSlots { /** @@ -63,4 +63,8 @@ declare const OutlinedInput: ((props: OutlinedInputProps) => React.JSX.Element) muiName: string; }; +export type OutlinedInputTheme = { + MuiOutlinedInput?: CreateThemeComponent; +}; + export default OutlinedInput; diff --git a/packages/mui-material/src/OverridableComponent/index.ts b/packages/mui-material/src/OverridableComponent/index.ts index ea7448789b44cf..3dbcb954a9f175 100644 --- a/packages/mui-material/src/OverridableComponent/index.ts +++ b/packages/mui-material/src/OverridableComponent/index.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { DistributiveOmit } from '@mui/types'; -import { StyledComponentProps } from '../styles'; +import { StyledComponentProps } from '../stylesOptimized'; /** * A component whose root component can be controlled via a `component` prop. diff --git a/packages/mui-material/src/Pagination/Pagination.d.ts b/packages/mui-material/src/Pagination/Pagination.d.ts index 46b5743c815f20..db1b719865c0ee 100644 --- a/packages/mui-material/src/Pagination/Pagination.d.ts +++ b/packages/mui-material/src/Pagination/Pagination.d.ts @@ -1,10 +1,10 @@ import * as React from 'react'; import { OverridableStringUnion } from '@mui/types'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { UsePaginationItem, UsePaginationProps } from '../usePagination/usePagination'; -import { PaginationClasses } from './paginationClasses'; +import { PaginationClasses, PaginationClassKey } from './paginationClasses'; export interface PaginationRenderItemParams extends UsePaginationItem { color: PaginationProps['color']; @@ -91,3 +91,7 @@ export interface PaginationProps * - [Pagination API](https://mui.com/material-ui/api/pagination/) */ export default function Pagination(props: PaginationProps): React.JSX.Element; + +export type PaginationTheme = { + MuiPagination?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.d.ts b/packages/mui-material/src/PaginationItem/PaginationItem.d.ts index a2f42524a5232a..9fe1264a7d934f 100644 --- a/packages/mui-material/src/PaginationItem/PaginationItem.d.ts +++ b/packages/mui-material/src/PaginationItem/PaginationItem.d.ts @@ -2,9 +2,9 @@ import * as React from 'react'; import { OverridableStringUnion } from '@mui/types'; import { SxProps } from '@mui/system'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { UsePaginationItem } from '../usePagination/usePagination'; -import { PaginationItemClasses } from './paginationItemClasses'; +import { PaginationItemClasses, PaginationItemClassKey } from './paginationItemClasses'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export interface PaginationItemPropsVariantOverrides {} @@ -179,4 +179,8 @@ export type PaginationItemProps< component?: React.ElementType; }; +export type PaginationItemTheme = { + MuiPaginationItem?: CreateThemeComponent; +}; + export default PaginationItem; diff --git a/packages/mui-material/src/Paper/Paper.d.ts b/packages/mui-material/src/Paper/Paper.d.ts index 4c35061f6e3395..62cd9a664306c7 100644 --- a/packages/mui-material/src/Paper/Paper.d.ts +++ b/packages/mui-material/src/Paper/Paper.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverrideProps, OverridableComponent, OverridableTypeMap } from '../OverridableComponent'; -import { PaperClasses } from './paperClasses'; +import { PaperClasses, PaperClassKey } from './paperClasses'; export interface PaperPropsVariantOverrides {} @@ -71,4 +71,8 @@ export type PaperProps< component?: React.ElementType; }; +export type PaperTheme = { + MuiPaper?: CreateThemeComponent; +}; + export default Paper; diff --git a/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx b/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx index 9ea90947bfe742..85069e11ce9773 100644 --- a/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx +++ b/packages/mui-material/src/PigmentContainer/PigmentContainer.tsx @@ -8,7 +8,7 @@ import capitalize from '@mui/utils/capitalize'; import composeClasses from '@mui/utils/composeClasses'; import generateUtilityClass from '@mui/utils/generateUtilityClass'; import { SxProps, Breakpoint } from '@mui/system'; -import { Theme } from '../styles'; +import { Theme } from '../stylesOptimized'; import { ContainerClasses } from '../Container/containerClasses'; export interface PigmentContainerOwnProps { diff --git a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx index 8d1cde0e06e8fe..01b127ded8e6ed 100644 --- a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx +++ b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx @@ -12,7 +12,7 @@ import { unstable_generateSizeClassNames as generateSizeClassNames, unstable_generateSpacingClassNames as generateSpacingClassNames, } from '@mui/system/Grid'; -import { Breakpoint, Theme } from '../styles'; +import { Breakpoint, Theme } from '../stylesOptimized'; type ResponsiveStyleValue = T | Array | { [key in Breakpoint]?: T | null }; diff --git a/packages/mui-material/src/PigmentStack/PigmentStack.tsx b/packages/mui-material/src/PigmentStack/PigmentStack.tsx index 4b0e34d9abbe2f..1ec188333f81de 100644 --- a/packages/mui-material/src/PigmentStack/PigmentStack.tsx +++ b/packages/mui-material/src/PigmentStack/PigmentStack.tsx @@ -7,7 +7,7 @@ import Stack from '@mui/material-pigment-css/Stack'; import composeClasses from '@mui/utils/composeClasses'; import generateUtilityClass from '@mui/utils/generateUtilityClass'; import { SxProps } from '@mui/system'; -import { Breakpoint, Theme } from '../styles'; +import { Breakpoint, Theme } from '../stylesOptimized'; type ResponsiveStyleValue = T | Array | { [key in Breakpoint]?: T | null }; diff --git a/packages/mui-material/src/Popover/Popover.d.ts b/packages/mui-material/src/Popover/Popover.d.ts index 5363e21ff207bd..3dbb71e0db0e2b 100644 --- a/packages/mui-material/src/Popover/Popover.d.ts +++ b/packages/mui-material/src/Popover/Popover.d.ts @@ -2,12 +2,12 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { SlotComponentProps } from '@mui/utils/types'; import { BackdropProps } from '../Backdrop'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import Paper, { PaperProps } from '../Paper'; import Modal, { ModalProps } from '../Modal'; import { TransitionProps } from '../transitions/transition'; -import { PopoverClasses } from './popoverClasses'; +import { PopoverClasses, PopoverClassKey } from './popoverClasses'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export interface PopoverSlots { @@ -268,3 +268,7 @@ export declare const PopoverPaper: React.FC; * - inherits [Modal API](https://mui.com/material-ui/api/modal/) */ export default function Popover(props: PopoverProps): React.JSX.Element; + +export type PopoverTheme = { + MuiPopover?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/Popper/Popper.tsx b/packages/mui-material/src/Popper/Popper.tsx index d0b90220bc3da8..85335e795ce76d 100644 --- a/packages/mui-material/src/Popper/Popper.tsx +++ b/packages/mui-material/src/Popper/Popper.tsx @@ -7,7 +7,7 @@ import PropTypes from 'prop-types'; import * as React from 'react'; import BasePopper from './BasePopper'; import { PopperProps as BasePopperProps } from './BasePopper.types'; -import { Theme } from '../styles'; +import { Theme } from '../stylesOptimized'; import { styled } from '../zero-styled'; import { useDefaultProps } from '../DefaultPropsProvider'; diff --git a/packages/mui-material/src/Radio/Radio.d.ts b/packages/mui-material/src/Radio/Radio.d.ts index 30036021c8cd9e..2acf5ba06396e9 100644 --- a/packages/mui-material/src/Radio/Radio.d.ts +++ b/packages/mui-material/src/Radio/Radio.d.ts @@ -1,11 +1,11 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; import { SwitchBaseProps } from '../internal/SwitchBase'; -import { RadioClasses } from './radioClasses'; +import { RadioClasses, RadioClassKey } from './radioClasses'; export interface RadioPropsSizeOverrides {} @@ -108,3 +108,7 @@ export interface RadioOwnerState extends Omit * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/) */ export default function Radio(props: RadioProps): React.JSX.Element; + +export type RadioTheme = { + MuiRadio?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/Rating/Rating.d.ts b/packages/mui-material/src/Rating/Rating.d.ts index 09a5d5f751e571..5dfaa97c5bb706 100644 --- a/packages/mui-material/src/Rating/Rating.d.ts +++ b/packages/mui-material/src/Rating/Rating.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; -import { RatingClasses } from './ratingClasses'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; +import { RatingClasses, RatingClassKey } from './ratingClasses'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; @@ -199,4 +199,8 @@ export type RatingProps< component?: React.ElementType; }; +export type RatingTheme = { + MuiRating?: CreateThemeComponent; +}; + export default Rating; diff --git a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts index d4224ff66fefea..072af239a32a56 100644 --- a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts +++ b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { ScopedCssBaselineClasses } from './scopedCssBaselineClasses'; +import { ScopedCssBaselineClasses, ScopedCssBaselineClassKey } from './scopedCssBaselineClasses'; export interface ScopedCssBaselineOwnProps { /** @@ -61,4 +61,9 @@ export type ScopedCssBaselineProps< * * - [ScopedCssBaseline API](https://mui.com/api/scoped-css-baseline/) */ + +export type ScopedCssBaselineTheme = { + MuiScopedCssBaseline?: CreateThemeComponent; +}; + export default ScopedCssBaseline; diff --git a/packages/mui-material/src/Select/Select.d.ts b/packages/mui-material/src/Select/Select.d.ts index 0560e197a8e357..4f7133424d93ce 100644 --- a/packages/mui-material/src/Select/Select.d.ts +++ b/packages/mui-material/src/Select/Select.d.ts @@ -1,11 +1,11 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { InputProps } from '../Input'; import { MenuProps } from '../Menu'; import { SelectChangeEvent, SelectInputProps } from './SelectInput'; -import { SelectClasses } from './selectClasses'; +import { SelectClasses, SelectClassKey } from './selectClasses'; import { OutlinedInputProps } from '../OutlinedInput'; import { FilledInputProps } from '../FilledInput'; @@ -207,4 +207,8 @@ declare const Select: ((props: SelectProps) => React.JSX muiName: string; }; +export type SelectTheme = { + MuiSelect?: CreateThemeComponent; +}; + export default Select; diff --git a/packages/mui-material/src/Select/SelectInput.d.ts b/packages/mui-material/src/Select/SelectInput.d.ts index 04bb068f51c816..c58153642361cb 100644 --- a/packages/mui-material/src/Select/SelectInput.d.ts +++ b/packages/mui-material/src/Select/SelectInput.d.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { Theme } from '../stylesOptimized'; import { MenuProps } from '../Menu'; /** diff --git a/packages/mui-material/src/Skeleton/Skeleton.d.ts b/packages/mui-material/src/Skeleton/Skeleton.d.ts index cb69022885c588..6539708c16f89d 100644 --- a/packages/mui-material/src/Skeleton/Skeleton.d.ts +++ b/packages/mui-material/src/Skeleton/Skeleton.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { SkeletonClasses } from './skeletonClasses'; +import { SkeletonClasses, SkeletonClassKey } from './skeletonClasses'; export interface SkeletonPropsVariantOverrides {} @@ -73,4 +73,8 @@ export type SkeletonProps< component?: React.ElementType; }; +export type SkeletonTheme = { + MuiSkeleton?: CreateThemeComponent; +}; + export default Skeleton; diff --git a/packages/mui-material/src/Slider/Slider.d.ts b/packages/mui-material/src/Slider/Slider.d.ts index 6ec82183ee5ac8..8f9ebce05b44d2 100644 --- a/packages/mui-material/src/Slider/Slider.d.ts +++ b/packages/mui-material/src/Slider/Slider.d.ts @@ -3,10 +3,10 @@ import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; import { Mark } from './useSlider.types'; import { SlotComponentProps } from '../utils/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverrideProps, OverridableComponent } from '../OverridableComponent'; import SliderValueLabelComponent from './SliderValueLabel'; -import { SliderClasses } from './sliderClasses'; +import { SliderClasses, SliderClassKey } from './sliderClasses'; export interface SliderPropsColorOverrides {} @@ -330,4 +330,8 @@ export type SliderProps< component?: React.ElementType; }; +export type SliderTheme = { + MuiSlider?: CreateThemeComponent; +}; + export default Slider; diff --git a/packages/mui-material/src/Snackbar/Snackbar.d.ts b/packages/mui-material/src/Snackbar/Snackbar.d.ts index d3397b5d2306e2..0b7c95b0c43791 100644 --- a/packages/mui-material/src/Snackbar/Snackbar.d.ts +++ b/packages/mui-material/src/Snackbar/Snackbar.d.ts @@ -1,11 +1,11 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import ClickAwayListener, { ClickAwayListenerProps } from '../ClickAwayListener'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { SnackbarContentProps } from '../SnackbarContent'; import { TransitionProps } from '../transitions/transition'; -import { SnackbarClasses } from './snackbarClasses'; +import { SnackbarClasses, SnackbarClassKey } from './snackbarClasses'; import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types'; export interface SnackbarSlots { @@ -205,3 +205,7 @@ export interface SnackbarProps export default function Snackbar(props: SnackbarProps): React.JSX.Element; export interface SnackbarOwnerState extends Omit {} + +export type SnackbarTheme = { + MuiSnackbar?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/SnackbarContent/SnackbarContent.d.ts b/packages/mui-material/src/SnackbarContent/SnackbarContent.d.ts index 0da2bcf3c8891a..7a7620b4b02f46 100644 --- a/packages/mui-material/src/SnackbarContent/SnackbarContent.d.ts +++ b/packages/mui-material/src/SnackbarContent/SnackbarContent.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { PaperProps } from '../Paper'; -import { SnackbarContentClasses } from './snackbarContentClasses'; +import { SnackbarContentClasses, SnackbarContentClassKey } from './snackbarContentClasses'; export interface SnackbarContentProps extends StandardProps { /** @@ -41,3 +41,7 @@ export interface SnackbarContentProps extends StandardProps; +}; diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts index d681a72aed2657..ccda56ebaa7fdd 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts +++ b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts @@ -1,10 +1,10 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { FabProps } from '../Fab'; import { TransitionProps } from '../transitions'; -import { SpeedDialClasses } from './speedDialClasses'; +import { SpeedDialClasses, SpeedDialClassKey } from './speedDialClasses'; import { CreateSlotsAndSlotProps, SlotComponentProps } from '../utils/types'; export type CloseReason = 'toggle' | 'blur' | 'mouseLeave' | 'escapeKeyDown'; @@ -142,3 +142,7 @@ export interface SpeedDialOwnerState extends SpeedDialProps {} * - [SpeedDial API](https://mui.com/material-ui/api/speed-dial/) */ export default function SpeedDial(props: SpeedDialProps): React.JSX.Element; + +export type SpeedDialTheme = { + MuiSpeedDial?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.d.ts b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.d.ts index d4366c3d4827cb..c7094950d2ace0 100644 --- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.d.ts +++ b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.d.ts @@ -1,10 +1,10 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { FabProps } from '../Fab'; import { TooltipProps } from '../Tooltip'; -import { SpeedDialActionClasses } from './speedDialActionClasses'; +import { SpeedDialActionClasses, SpeedDialActionClassKey } from './speedDialActionClasses'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export interface SpeedDialActionSlots { @@ -142,3 +142,7 @@ export default function SpeedDialAction(props: SpeedDialActionProps): React.JSX. export interface SpeedDialActionOwnerState extends Omit {} + +export type SpeedDialActionTheme = { + MuiSpeedDialAction?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.d.ts b/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.d.ts index d8096df5a9ee4a..ffc3c230cde9ca 100644 --- a/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.d.ts +++ b/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; -import { SpeedDialIconClasses } from './speedDialIconClasses'; +import { SpeedDialIconClasses, SpeedDialIconClassKey } from './speedDialIconClasses'; export interface SpeedDialIconProps extends StandardProps, 'children'> { @@ -43,4 +43,8 @@ declare const SpeedDialIcon: ((props: SpeedDialIconProps) => React.JSX.Element) muiName: string; }; +export type SpeedDialIconTheme = { + MuiSpeedDialIcon?: CreateThemeComponent; +}; + export default SpeedDialIcon; diff --git a/packages/mui-material/src/Stack/Stack.d.ts b/packages/mui-material/src/Stack/Stack.d.ts index fe13177c0b0aae..318aa658ccf0b5 100644 --- a/packages/mui-material/src/Stack/Stack.d.ts +++ b/packages/mui-material/src/Stack/Stack.d.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import { ResponsiveStyleValue, SxProps, SystemProps } from '@mui/system'; +import { ResponsiveStyleValue, StackClassKey, SxProps, SystemProps } from '@mui/system'; import { OverrideProps, OverridableComponent } from '../OverridableComponent'; -import { Theme } from '../styles/createTheme'; +import { CreateThemeComponent, Theme } from '../stylesOptimized/createTheme'; export interface StackOwnProps extends SystemProps { /** @@ -65,4 +65,8 @@ export type StackProps< component?: React.ElementType; }; +export type StackTheme = { + MuiStack?: CreateThemeComponent; +}; + export default Stack; diff --git a/packages/mui-material/src/Step/Step.d.ts b/packages/mui-material/src/Step/Step.d.ts index ccb6f1044ff242..6061a6fbe5105e 100644 --- a/packages/mui-material/src/Step/Step.d.ts +++ b/packages/mui-material/src/Step/Step.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { Theme } from '../styles'; -import { StepClasses } from './stepClasses'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; +import { StepClasses, StepClassKey } from './stepClasses'; export interface StepOwnProps { /** @@ -76,4 +76,8 @@ export type StepClasskey = keyof NonNullable; */ declare const Step: OverridableComponent; +export type StepTheme = { + MuiStep?: CreateThemeComponent; +}; + export default Step; diff --git a/packages/mui-material/src/StepButton/StepButton.d.ts b/packages/mui-material/src/StepButton/StepButton.d.ts index 0dae1f9975af1b..8a02992bbec54d 100644 --- a/packages/mui-material/src/StepButton/StepButton.d.ts +++ b/packages/mui-material/src/StepButton/StepButton.d.ts @@ -2,8 +2,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; -import { Theme } from '../styles'; -import { StepButtonClasses } from './stepButtonClasses'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; +import { StepButtonClasses, StepButtonClassKey } from './stepButtonClasses'; export interface StepButtonOwnProps { /** @@ -62,4 +62,8 @@ export type StepButtonProps< component?: React.ElementType; }; +export type StepButtonTheme = { + MuiStepButton?: CreateThemeComponent; +}; + export default StepButton; diff --git a/packages/mui-material/src/StepConnector/StepConnector.d.ts b/packages/mui-material/src/StepConnector/StepConnector.d.ts index 1111d905040423..c9eee586dc8385 100644 --- a/packages/mui-material/src/StepConnector/StepConnector.d.ts +++ b/packages/mui-material/src/StepConnector/StepConnector.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; -import { StepConnectorClasses } from './stepConnectorClasses'; +import { StepConnectorClasses, StepConnectorClassKey } from './stepConnectorClasses'; export type StepConnectorIcon = React.ReactElement | string | number; @@ -31,3 +31,7 @@ export type StepConnectorClasskey = keyof NonNullable; +}; diff --git a/packages/mui-material/src/StepContent/StepContent.d.ts b/packages/mui-material/src/StepContent/StepContent.d.ts index fdbf12e2ab19d8..f8bb3108f6fb76 100644 --- a/packages/mui-material/src/StepContent/StepContent.d.ts +++ b/packages/mui-material/src/StepContent/StepContent.d.ts @@ -1,10 +1,10 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { CollapseProps } from '../Collapse'; import { TransitionProps } from '../transitions/transition'; -import { StepContentClasses } from './stepContentClasses'; +import { StepContentClasses, StepContentClassKey } from './stepContentClasses'; import { CreateSlotsAndSlotProps, SlotComponentProps } from '../utils/types'; export interface StepContentSlots { @@ -84,3 +84,7 @@ export type StepContentClasskey = keyof NonNullable * - [StepContent API](https://mui.com/material-ui/api/step-content/) */ export default function StepContent(props: StepContentProps): React.JSX.Element; + +export type StepContentTheme = { + MuiStepContent?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/StepIcon/StepIcon.d.ts b/packages/mui-material/src/StepIcon/StepIcon.d.ts index 77e4be8d96b9db..08769cfb4e8252 100644 --- a/packages/mui-material/src/StepIcon/StepIcon.d.ts +++ b/packages/mui-material/src/StepIcon/StepIcon.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { SvgIconOwnProps } from '../SvgIcon'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; -import { StepIconClasses } from './stepIconClasses'; +import { StepIconClasses, StepIconClassKey } from './stepIconClasses'; export interface StepIconProps // TODO v7: extend React.HTMLAttributes as svg is root component of StepIcon not div @@ -52,3 +52,7 @@ export type StepIconClasskey = keyof NonNullable; * - inherits [SvgIcon API](https://mui.com/material-ui/api/svg-icon/) */ export default function StepIcon(props: StepIconProps): React.JSX.Element; + +export type StepIconTheme = { + MuiStepIcon?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/StepLabel/StepLabel.d.ts b/packages/mui-material/src/StepLabel/StepLabel.d.ts index 53f2c7be1f1215..4edc64d7223ce9 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.d.ts +++ b/packages/mui-material/src/StepLabel/StepLabel.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { StepIconProps } from '../StepIcon'; -import { StepLabelClasses } from './stepLabelClasses'; +import { StepLabelClasses, StepLabelClassKey } from './stepLabelClasses'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export interface StepLabelSlots { @@ -114,4 +114,8 @@ declare const StepLabel: ((props: StepLabelProps) => React.JSX.Element) & { muiName: string; }; +export type StepLabelTheme = { + MuiStepLabel?: CreateThemeComponent; +}; + export default StepLabel; diff --git a/packages/mui-material/src/Stepper/Stepper.d.ts b/packages/mui-material/src/Stepper/Stepper.d.ts index 5fc6837acaf0b0..f8989c6eb7e1ff 100644 --- a/packages/mui-material/src/Stepper/Stepper.d.ts +++ b/packages/mui-material/src/Stepper/Stepper.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { PaperProps } from '../Paper'; -import { StepperClasses } from './stepperClasses'; +import { StepperClasses, StepperClassKey } from './stepperClasses'; export type Orientation = 'horizontal' | 'vertical'; @@ -78,4 +78,8 @@ export type StepperClasskey = keyof NonNullable; */ declare const Stepper: OverridableComponent; +export type StepperTheme = { + MuiStepper?: CreateThemeComponent; +}; + export default Stepper; diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.d.ts b/packages/mui-material/src/SvgIcon/SvgIcon.d.ts index af45429fe43714..83ee36ce5badf6 100644 --- a/packages/mui-material/src/SvgIcon/SvgIcon.d.ts +++ b/packages/mui-material/src/SvgIcon/SvgIcon.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { SvgIconClasses } from './svgIconClasses'; +import { SvgIconClasses, SvgIconClassKey } from './svgIconClasses'; export interface SvgIconPropsSizeOverrides {} @@ -110,4 +110,8 @@ export type SvgIconProps< component?: React.ElementType; }; +export type SvgIconTheme = { + MuiSvgIcon?: CreateThemeComponent; +}; + export default SvgIcon; diff --git a/packages/mui-material/src/Switch/Switch.d.ts b/packages/mui-material/src/Switch/Switch.d.ts index 883dab4de3ff51..b0731d4de884b1 100644 --- a/packages/mui-material/src/Switch/Switch.d.ts +++ b/packages/mui-material/src/Switch/Switch.d.ts @@ -1,11 +1,11 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; import { SwitchBaseProps } from '../internal/SwitchBase'; -import { SwitchClasses } from './switchClasses'; +import { SwitchClasses, SwitchClassKey } from './switchClasses'; export interface SwitchPropsSizeOverrides {} @@ -141,3 +141,7 @@ export interface SwitchProps * - inherits [IconButton API](https://mui.com/material-ui/api/icon-button/) */ export default function Switch(props: SwitchProps): React.JSX.Element; + +export type SwitchTheme = { + MuiSwitch?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/Tab/Tab.d.ts b/packages/mui-material/src/Tab/Tab.d.ts index 5461779d91e1f8..1f0a6aa359768d 100644 --- a/packages/mui-material/src/Tab/Tab.d.ts +++ b/packages/mui-material/src/Tab/Tab.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; -import { TabClasses } from './tabClasses'; +import { TabClasses, TabClassKey } from './tabClasses'; export interface TabOwnProps { /** @@ -82,4 +82,8 @@ export type TabProps< component?: React.ElementType; }; +export type TabTheme = { + MuiTab?: CreateThemeComponent; +}; + export default Tab; diff --git a/packages/mui-material/src/TabScrollButton/TabScrollButton.d.ts b/packages/mui-material/src/TabScrollButton/TabScrollButton.d.ts index 3212600ab97c02..6f593235e8a408 100644 --- a/packages/mui-material/src/TabScrollButton/TabScrollButton.d.ts +++ b/packages/mui-material/src/TabScrollButton/TabScrollButton.d.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { SlotComponentProps } from '../utils/types'; import { ButtonBaseProps } from '../ButtonBase'; -import { Theme } from '../styles'; +import { Theme } from '../stylesOptimized'; import SvgIcon from '../SvgIcon'; import { TabScrollButtonClasses } from './tabScrollButtonClasses'; diff --git a/packages/mui-material/src/Table/Table.d.ts b/packages/mui-material/src/Table/Table.d.ts index d53c9a06b36915..4241a96dbf425c 100644 --- a/packages/mui-material/src/Table/Table.d.ts +++ b/packages/mui-material/src/Table/Table.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { TableClasses } from './tableClasses'; +import { TableClasses, TableClassKey } from './tableClasses'; export interface TablePropsSizeOverrides {} @@ -63,4 +63,8 @@ export type TableProps< component?: React.ElementType; }; +export type TableTheme = { + MuiTable?: CreateThemeComponent; +}; + export default Table; diff --git a/packages/mui-material/src/TableBody/TableBody.d.ts b/packages/mui-material/src/TableBody/TableBody.d.ts index 290fffc5a0bfb0..0ba6c62e39b5f7 100644 --- a/packages/mui-material/src/TableBody/TableBody.d.ts +++ b/packages/mui-material/src/TableBody/TableBody.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { TableBodyClasses } from './tableBodyClasses'; +import { TableBodyClasses, TableBodyClassKey } from './tableBodyClasses'; export interface TableBodyOwnProps { /** @@ -45,4 +45,8 @@ export type TableBodyProps< component?: React.ElementType; }; +export type TableBodyTheme = { + MuiTableBody?: CreateThemeComponent; +}; + export default TableBody; diff --git a/packages/mui-material/src/TableCell/TableCell.d.ts b/packages/mui-material/src/TableCell/TableCell.d.ts index 0fac2586cc74b1..526d25b5b62cdb 100644 --- a/packages/mui-material/src/TableCell/TableCell.d.ts +++ b/packages/mui-material/src/TableCell/TableCell.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { OverridableStringUnion } from '@mui/types'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; -import { TableCellClasses } from './tableCellClasses'; +import { TableCellClasses, TableCellClassKey } from './tableCellClasses'; export interface TableCellPropsSizeOverrides {} export interface TableCellPropsVariantOverrides {} @@ -85,3 +85,7 @@ export type SortDirection = 'asc' | 'desc' | false; * - [TableCell API](https://mui.com/material-ui/api/table-cell/) */ export default function TableCell(props: TableCellProps): React.JSX.Element; + +export type TableCellTheme = { + MuiTableCell?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/TableContainer/TableContainer.d.ts b/packages/mui-material/src/TableContainer/TableContainer.d.ts index 3eb38c98a64aac..caa4822a058ab4 100644 --- a/packages/mui-material/src/TableContainer/TableContainer.d.ts +++ b/packages/mui-material/src/TableContainer/TableContainer.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { TableContainerClasses } from './tableContainerClasses'; +import { TableContainerClasses, TableContainerClassKey } from './tableContainerClasses'; export interface TableContainerOwnProps { /** @@ -45,4 +45,8 @@ export type TableContainerProps< component?: React.ElementType; }; +export type TableContainerTheme = { + MuiTableContainer?: CreateThemeComponent; +}; + export default TableContainer; diff --git a/packages/mui-material/src/TableFooter/TableFooter.d.ts b/packages/mui-material/src/TableFooter/TableFooter.d.ts index 5fbe9e9a14158d..41a26e6d98af23 100644 --- a/packages/mui-material/src/TableFooter/TableFooter.d.ts +++ b/packages/mui-material/src/TableFooter/TableFooter.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { TableFooterClasses } from './tableFooterClasses'; +import { TableFooterClasses, TableFooterClassKey } from './tableFooterClasses'; export interface TableFooterOwnProps { /** @@ -45,4 +45,8 @@ export type TableFooterProps< component?: React.ElementType; }; +export type TableFooterTheme = { + MuiTableFooter?: CreateThemeComponent; +}; + export default TableFooter; diff --git a/packages/mui-material/src/TableHead/TableHead.d.ts b/packages/mui-material/src/TableHead/TableHead.d.ts index 8e8d478d6570ed..d3dc8cace40920 100644 --- a/packages/mui-material/src/TableHead/TableHead.d.ts +++ b/packages/mui-material/src/TableHead/TableHead.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { TableHeadClasses } from './tableHeadClasses'; +import { TableHeadClasses, TableHeadClassKey } from './tableHeadClasses'; export interface TableHeadOwnProps { /** @@ -45,4 +45,8 @@ export type TableHeadProps< component?: React.ElementType; }; +export type TableHeadTheme = { + MuiTableHead?: CreateThemeComponent; +}; + export default TableHead; diff --git a/packages/mui-material/src/TablePagination/TablePagination.d.ts b/packages/mui-material/src/TablePagination/TablePagination.d.ts index 0a50fc42fd4810..083f201a8f3be6 100644 --- a/packages/mui-material/src/TablePagination/TablePagination.d.ts +++ b/packages/mui-material/src/TablePagination/TablePagination.d.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { TablePaginationActionsProps, @@ -9,7 +9,7 @@ import { import { TableCellProps } from '../TableCell'; import { IconButtonProps } from '../IconButton'; import { SelectProps } from '../Select'; -import { TablePaginationClasses } from './tablePaginationClasses'; +import { TablePaginationClasses, TablePaginationClassKey } from './tablePaginationClasses'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; import { ToolbarProps } from '../Toolbar'; import { MenuItemProps } from '../MenuItem'; @@ -304,4 +304,8 @@ export type TablePaginationProps< component?: React.ElementType; }; +export type TablePaginationTheme = { + MuiTablePagination?: CreateThemeComponent; +}; + export default TablePagination; diff --git a/packages/mui-material/src/TablePaginationActions/TablePaginationActions.d.ts b/packages/mui-material/src/TablePaginationActions/TablePaginationActions.d.ts index 29a746e2c7e5f9..be31fe10fec15a 100644 --- a/packages/mui-material/src/TablePaginationActions/TablePaginationActions.d.ts +++ b/packages/mui-material/src/TablePaginationActions/TablePaginationActions.d.ts @@ -1,6 +1,8 @@ import * as React from 'react'; import { IconButtonProps } from '../IconButton/IconButton'; import { SvgIconProps } from '../SvgIcon'; +import { CreateThemeComponent } from '../stylesOptimized'; +import { TablePaginationActionsClassKey } from './tablePaginationActionsClasses'; export interface TablePaginationActionsProps extends React.HTMLAttributes { /** @@ -105,4 +107,11 @@ export interface TablePaginationActionsSlots { */ declare const TablePaginationActions: React.JSXElementConstructor; +export type TablePaginationActionsTheme = { + MuiTablePaginationActions?: CreateThemeComponent< + TablePaginationActionsClassKey, + TablePaginationActionsProps + >; +}; + export default TablePaginationActions; diff --git a/packages/mui-material/src/TableRow/TableRow.d.ts b/packages/mui-material/src/TableRow/TableRow.d.ts index 62c68f7d4382ac..f6cceb8e36499e 100644 --- a/packages/mui-material/src/TableRow/TableRow.d.ts +++ b/packages/mui-material/src/TableRow/TableRow.d.ts @@ -1,8 +1,8 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { TableRowClasses } from './tableRowClasses'; +import { TableRowClasses, TableRowClassKey } from './tableRowClasses'; export interface TableRowOwnProps { /** @@ -57,4 +57,8 @@ export type TableRowProps< component?: React.ElementType; }; +export type TableRowTheme = { + MuiTableRow?: CreateThemeComponent; +}; + export default TableRow; diff --git a/packages/mui-material/src/TableSortLabel/TableSortLabel.d.ts b/packages/mui-material/src/TableSortLabel/TableSortLabel.d.ts index 5de2fe77ccf34b..4afb50da5ba26f 100644 --- a/packages/mui-material/src/TableSortLabel/TableSortLabel.d.ts +++ b/packages/mui-material/src/TableSortLabel/TableSortLabel.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; -import { TableSortLabelClasses } from './tableSortLabelClasses'; +import { TableSortLabelClasses, TableSortLabelClassKey } from './tableSortLabelClasses'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export interface TableSortLabelRootSlotPropsOverrides {} @@ -113,4 +113,8 @@ export type TableSortLabelProps< component?: React.ElementType; }; +export type TableSortLabelTheme = { + MuiTableSortLabel?: CreateThemeComponent; +}; + export default TableSortLabel; diff --git a/packages/mui-material/src/Tabs/Tabs.d.ts b/packages/mui-material/src/Tabs/Tabs.d.ts index 24ec83124669b5..b37afbfd05dda4 100644 --- a/packages/mui-material/src/Tabs/Tabs.d.ts +++ b/packages/mui-material/src/Tabs/Tabs.d.ts @@ -2,10 +2,10 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import TabScrollButton, { TabScrollButtonProps } from '../TabScrollButton'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { TabsClasses } from './tabsClasses'; +import { TabsClasses, TabsClassKey } from './tabsClasses'; import SvgIcon from '../SvgIcon'; export interface TabsPropsIndicatorColorOverrides {} @@ -305,4 +305,8 @@ export type TabsProps< component?: React.ElementType; }; +export type TabsTheme = { + MuiTabs?: CreateThemeComponent; +}; + export default Tabs; diff --git a/packages/mui-material/src/TextField/TextField.d.ts b/packages/mui-material/src/TextField/TextField.d.ts index d246134f11f3eb..268b6d58ce3534 100644 --- a/packages/mui-material/src/TextField/TextField.d.ts +++ b/packages/mui-material/src/TextField/TextField.d.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { FormControlProps } from '../FormControl'; import { FormHelperTextProps } from '../FormHelperText'; @@ -11,7 +11,7 @@ import { FilledInputProps } from '../FilledInput'; import { OutlinedInputProps } from '../OutlinedInput'; import { InputLabelProps } from '../InputLabel'; import { SelectProps } from '../Select'; -import { TextFieldClasses } from './textFieldClasses'; +import { TextFieldClasses, TextFieldClassKey } from './textFieldClasses'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export interface TextFieldPropsColorOverrides {} @@ -372,3 +372,7 @@ export default function TextField( variant?: Variant; } & Omit, ): React.JSX.Element; + +export type TextFieldTheme = { + MuiTextField?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.d.ts b/packages/mui-material/src/ToggleButton/ToggleButton.d.ts index 7bd2be06e4ba6a..0a2dad7e99a100 100644 --- a/packages/mui-material/src/ToggleButton/ToggleButton.d.ts +++ b/packages/mui-material/src/ToggleButton/ToggleButton.d.ts @@ -1,10 +1,10 @@ import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; import * as React from 'react'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; -import { ToggleButtonClasses } from './toggleButtonClasses'; +import { ToggleButtonClasses, ToggleButtonClassKey } from './toggleButtonClasses'; export interface ToggleButtonPropsSizeOverrides {} @@ -107,4 +107,8 @@ export type ToggleButtonProps< component?: React.ElementType; }; +export type ToggleButtonTheme = { + MuiToggleButton?: CreateThemeComponent; +}; + export default ToggleButton; diff --git a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.d.ts b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.d.ts index ccba9238c93a10..665161a5392201 100644 --- a/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.d.ts +++ b/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; -import { ToggleButtonGroupClasses } from './toggleButtonGroupClasses'; +import { ToggleButtonGroupClasses, ToggleButtonGroupClassKey } from './toggleButtonGroupClasses'; export interface ToggleButtonGroupPropsSizeOverrides {} @@ -87,3 +87,7 @@ export interface ToggleButtonGroupProps * - [ToggleButtonGroup API](https://mui.com/material-ui/api/toggle-button-group/) */ export default function ToggleButtonGroup(props: ToggleButtonGroupProps): React.JSX.Element; + +export type ToggleButtonGroupTheme = { + MuiToggleButtonGroup?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/Toolbar/Toolbar.d.ts b/packages/mui-material/src/Toolbar/Toolbar.d.ts index 842d9938cd28ea..6ac03b9038abad 100644 --- a/packages/mui-material/src/Toolbar/Toolbar.d.ts +++ b/packages/mui-material/src/Toolbar/Toolbar.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -import { ToolbarClasses } from './toolbarClasses'; +import { ToolbarClasses, ToolbarClassKey } from './toolbarClasses'; export interface ToolbarPropsVariantOverrides {} @@ -59,4 +59,8 @@ export type ToolbarProps< component?: React.ElementType; }; +export type ToolbarTheme = { + MuiToolbar?: CreateThemeComponent; +}; + export default Toolbar; diff --git a/packages/mui-material/src/Tooltip/Tooltip.d.ts b/packages/mui-material/src/Tooltip/Tooltip.d.ts index 6fc31dfd31f704..c58b5d4aea47c2 100644 --- a/packages/mui-material/src/Tooltip/Tooltip.d.ts +++ b/packages/mui-material/src/Tooltip/Tooltip.d.ts @@ -1,11 +1,11 @@ import * as React from 'react'; import { MUIStyledCommonProps, SxProps } from '@mui/system'; import { PopperProps } from '../Popper'; -import { Theme } from '../styles'; +import { CreateThemeComponent, Theme } from '../stylesOptimized'; import { InternalStandardProps as StandardProps } from '../internal'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; import { TransitionProps } from '../transitions/transition'; -import { TooltipClasses } from './tooltipClasses'; +import { TooltipClasses, TooltipClassKey } from './tooltipClasses'; export interface TooltipComponentsPropsOverrides {} @@ -254,3 +254,7 @@ export interface TooltipOwnerState extends TooltipProps {} * - [Tooltip API](https://mui.com/material-ui/api/tooltip/) */ export default function Tooltip(props: TooltipProps): React.JSX.Element; + +export type TooltipTheme = { + MuiTooltip?: CreateThemeComponent; +}; diff --git a/packages/mui-material/src/Typography/Typography.d.ts b/packages/mui-material/src/Typography/Typography.d.ts index 25cd5ae7575eab..cb16de81cb5d65 100644 --- a/packages/mui-material/src/Typography/Typography.d.ts +++ b/packages/mui-material/src/Typography/Typography.d.ts @@ -4,7 +4,8 @@ import { SxProps, SystemProps } from '@mui/system'; import { Theme, TypeText } from '../styles'; import { OverrideProps, OverridableComponent } from '../OverridableComponent'; import { TypographyVariant } from '../styles/createTypography'; -import { TypographyClasses } from './typographyClasses'; +import { TypographyClasses, TypographyClassKey } from './typographyClasses'; +import { CreateThemeComponent } from '../stylesOptimized'; export interface TypographyPropsVariantOverrides {} @@ -124,4 +125,8 @@ export type TypographyProps< component?: React.ElementType; }; +export type TypographyTheme = { + MuiTypography?: CreateThemeComponent; +}; + export default Typography; diff --git a/packages/mui-material/src/internal/index.ts b/packages/mui-material/src/internal/index.ts index 6986f62cbedf4a..c996a24f32f427 100644 --- a/packages/mui-material/src/internal/index.ts +++ b/packages/mui-material/src/internal/index.ts @@ -1,5 +1,5 @@ import { DistributiveOmit } from '@mui/types'; -import { StyledComponentProps } from '../styles'; +import { StyledComponentProps } from '../stylesOptimized'; /** * @internal diff --git a/packages/mui-material/src/styles/createThemeNoVars.d.ts b/packages/mui-material/src/styles/createThemeNoVars.d.ts index e7a1cf61da9225..4122a0659b6987 100644 --- a/packages/mui-material/src/styles/createThemeNoVars.d.ts +++ b/packages/mui-material/src/styles/createThemeNoVars.d.ts @@ -1,36 +1,15 @@ -import { - ThemeOptions as SystemThemeOptions, - Theme as SystemTheme, - SxProps, - CSSObject, - SxConfig, -} from '@mui/system'; -import { Mixins, MixinsOptions } from './createMixins'; +import { ThemeOptions as SystemThemeOptions, SxConfig } from '@mui/system'; +import { MixinsOptions } from './createMixins'; import { Palette, PaletteOptions } from './createPalette'; -import { TypographyVariants, TypographyVariantsOptions } from './createTypography'; +import { TypographyVariantsOptions } from './createTypography'; import { Shadows } from './shadows'; -import { Transitions, TransitionsOptions } from './createTransitions'; -import { ZIndex, ZIndexOptions } from './zIndex'; +import { TransitionsOptions } from './createTransitions'; +import { ZIndexOptions } from './zIndex'; import { Components } from './components'; -import { - CssVarsTheme, - CssVarsPalette, - ColorSystemOptions, - Shape, - ShapeOptions, -} from './createThemeFoundation'; +import { ColorSystemOptions } from './createThemeFoundation'; +import { Theme, CssThemeVariables, ShapeOptions } from '../stylesOptimized'; -/** - * To disable custom properties, use module augmentation - * - * @example - * declare module '@mui/material/styles' { - * interface CssThemeVariables { - * enabled: true; - * } - * } - */ -export interface CssThemeVariables {} +export { CssThemeVariables }; type CssVarsOptions = CssThemeVariables extends { enabled: true; @@ -52,51 +31,11 @@ export interface ThemeOptions extends Omit, CssVar modularCssLayers?: boolean | string; } -export interface BaseTheme extends SystemTheme { - mixins: Mixins; - palette: Palette & (CssThemeVariables extends { enabled: true } ? CssVarsPalette : {}); - shadows: Shadows; - shape: Shape; - transitions: Transitions; - typography: TypographyVariants; - zIndex: ZIndex; - unstable_strictMode?: boolean; +declare module '../stylesOptimized' { + interface ThemeComponents extends Components> {} } -// shut off automatic exporting for the `BaseTheme` above -export {}; - -type CssVarsProperties = CssThemeVariables extends { enabled: true } - ? Pick< - CssVarsTheme, - | 'applyStyles' - | 'colorSchemes' - | 'colorSchemeSelector' - | 'rootSelector' - | 'cssVarPrefix' - | 'defaultColorScheme' - | 'getCssVar' - | 'getColorSchemeSelector' - | 'generateThemeVars' - | 'generateStyleSheets' - | 'generateSpacing' - | 'shouldSkipGeneratingVar' - | 'vars' - > - : Partial>; - -/** - * Our [TypeScript guide on theme customization](https://mui.com/material-ui/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties. - */ -export interface Theme extends BaseTheme, CssVarsProperties { - cssVariables?: false; - components?: Components; - unstable_sx: (props: SxProps) => CSSObject; - unstable_sxConfig: SxConfig; - alpha: (color: string, value: number | string) => string; - lighten: (color: string, coefficient: number | string) => string; - darken: (color: string, coefficient: number | string) => string; -} +export { Theme }; /** * Generate a theme base on the options received. diff --git a/packages/mui-material/src/stylesOptimized/ThemeProvider.d.ts b/packages/mui-material/src/stylesOptimized/ThemeProvider.d.ts new file mode 100644 index 00000000000000..4c5e4732986351 --- /dev/null +++ b/packages/mui-material/src/stylesOptimized/ThemeProvider.d.ts @@ -0,0 +1,83 @@ +import * as React from 'react'; +import { DefaultTheme } from '@mui/system'; +import { CssThemeVariables } from './createTheme'; + +type ThemeProviderCssVariablesProps = CssThemeVariables extends { enabled: true } + ? { + /** + * The node for attaching the `theme.colorSchemeSelector`. + * @default document + */ + colorSchemeNode?: Element | null; + /** + * If `true`, the provider creates its own context and generate stylesheet as if it is a root `ThemeProvider`. + */ + disableNestedContext?: boolean; + /** + * If `true`, the style sheet for CSS theme variables won't be generated. + * + * This is useful for controlling nested ThemeProvider behavior. + * @default false + */ + disableStyleSheetGeneration?: boolean; + /** + * If `true`, theme values are recalculated when the mode changes. + * The `theme.colorSchemes.{mode}.*` nodes will be shallow merged to the top-level of the theme. + * @default false + */ + forceThemeRerender?: boolean; + } + : {}; + +export interface ThemeProviderProps extends ThemeProviderCssVariablesProps { + children?: React.ReactNode; + theme: Partial | ((outerTheme: Theme) => Theme); + /** + * The document used to perform `disableTransitionOnChange` feature + * @default document + */ + documentNode?: Document | null; + /** + * The default mode when the local storage has no mode yet, + * requires the theme to have `colorSchemes` with light and dark. + * @default 'system' + */ + defaultMode?: 'light' | 'dark' | 'system'; + /** + * The window that attaches the 'storage' event listener + * @default window + */ + storageWindow?: Window | null; + /** + * The storage manager to be used for storing the mode and color scheme + * @default using `window.localStorage` + */ + storageManager?: StorageManager | null; + /** + * localStorage key used to store application `mode` + * @default 'mui-mode' + */ + modeStorageKey?: string; + /** + * localStorage key used to store `colorScheme` + * @default 'mui-color-scheme' + */ + colorSchemeStorageKey?: string; + /* + * If `true`, ThemeProvider will not rerender and the initial value of `mode` comes from the local storage. + * For SSR applications, you must ensure that the server render output must match the initial render output on the client. + * @default false + */ + noSsr?: boolean; + /** + * Disable CSS transitions when switching between modes or color schemes + * @default false + */ + disableTransitionOnChange?: boolean; +} + +declare function ThemeProvider( + props: ThemeProviderProps, +): React.JSX.Element; + +export default ThemeProvider; diff --git a/packages/mui-material/src/stylesOptimized/ThemeProvider.js b/packages/mui-material/src/stylesOptimized/ThemeProvider.js new file mode 100644 index 00000000000000..fac9cf5bbc378d --- /dev/null +++ b/packages/mui-material/src/stylesOptimized/ThemeProvider.js @@ -0,0 +1 @@ +export { default } from '../styles/ThemeProvider'; diff --git a/packages/mui-material/src/stylesOptimized/ThemeProviderWithVars.d.ts b/packages/mui-material/src/stylesOptimized/ThemeProviderWithVars.d.ts new file mode 100644 index 00000000000000..a3bf7d42f7ecfa --- /dev/null +++ b/packages/mui-material/src/stylesOptimized/ThemeProviderWithVars.d.ts @@ -0,0 +1,14 @@ +import * as React from 'react'; +import { unstable_createCssVarsProvider } from '@mui/system'; +import { SupportedColorScheme } from '../styles/createThemeFoundation'; +import THEME_ID from '../styles/identifier'; + +type Result = ReturnType< + typeof unstable_createCssVarsProvider +>; + +export declare const CssVarsProvider: Result['CssVarsProvider']; +export declare const useColorScheme: Result['useColorScheme']; +export declare const getInitColorSchemeScript: Result['getInitColorSchemeScript']; +// eslint-disable-next-line @typescript-eslint/naming-convention +export declare function Experimental_CssVarsProvider(props: any): React.JSX.Element; diff --git a/packages/mui-material/src/stylesOptimized/ThemeProviderWithVars.js b/packages/mui-material/src/stylesOptimized/ThemeProviderWithVars.js new file mode 100644 index 00000000000000..f59235d976c203 --- /dev/null +++ b/packages/mui-material/src/stylesOptimized/ThemeProviderWithVars.js @@ -0,0 +1,6 @@ +export { + CssVarsProvider, + useColorScheme, + getInitColorSchemeScript, + Experimental_CssVarsProvider, +} from '../styles/ThemeProviderWithVars'; diff --git a/packages/mui-material/src/stylesOptimized/createColorScheme.d.ts b/packages/mui-material/src/stylesOptimized/createColorScheme.d.ts new file mode 100644 index 00000000000000..1d8d993e257eb3 --- /dev/null +++ b/packages/mui-material/src/stylesOptimized/createColorScheme.d.ts @@ -0,0 +1,7 @@ +import { ColorSystemOptions } from '../styles/createThemeFoundation'; + +declare function createColorScheme( + options: ColorSystemOptions & { colorSpace?: string }, +): ColorSystemOptions; + +export default createColorScheme; diff --git a/packages/mui-material/src/stylesOptimized/createColorScheme.js b/packages/mui-material/src/stylesOptimized/createColorScheme.js new file mode 100644 index 00000000000000..789da10fa5de7b --- /dev/null +++ b/packages/mui-material/src/stylesOptimized/createColorScheme.js @@ -0,0 +1 @@ +export { default } from '../styles/createColorScheme'; diff --git a/packages/mui-material/src/stylesOptimized/createMuiStrictModeTheme.d.ts b/packages/mui-material/src/stylesOptimized/createMuiStrictModeTheme.d.ts new file mode 100644 index 00000000000000..27c2daa842498c --- /dev/null +++ b/packages/mui-material/src/stylesOptimized/createMuiStrictModeTheme.d.ts @@ -0,0 +1,5 @@ +import createTheme from './createTheme'; + +declare const createMuiStrictModeTheme: typeof createTheme; + +export default createMuiStrictModeTheme; diff --git a/packages/mui-material/src/stylesOptimized/createMuiStrictModeTheme.js b/packages/mui-material/src/stylesOptimized/createMuiStrictModeTheme.js new file mode 100644 index 00000000000000..3732f560f73d2a --- /dev/null +++ b/packages/mui-material/src/stylesOptimized/createMuiStrictModeTheme.js @@ -0,0 +1 @@ +export { default } from '../styles/createMuiStrictModeTheme'; diff --git a/packages/mui-material/src/stylesOptimized/createTheme.d.ts b/packages/mui-material/src/stylesOptimized/createTheme.d.ts new file mode 100644 index 00000000000000..0f06ff9816c8d8 --- /dev/null +++ b/packages/mui-material/src/stylesOptimized/createTheme.d.ts @@ -0,0 +1,204 @@ +import { + ThemeOptions as SystemThemeOptions, + Theme as SystemTheme, + CSSObject, + SxProps, + SxConfig, + Interpolation, +} from '@mui/system'; +import { Palette, PaletteOptions } from '../styles/createPalette'; +import { Mixins, MixinsOptions } from '../styles/createMixins'; +import { Shadows } from '../styles/shadows'; +import { Transitions, TransitionsOptions } from '../styles/createTransitions'; +import { TypographyVariants, TypographyVariantsOptions } from '../styles/createTypography'; +import { ZIndex, ZIndexOptions } from '../styles/zIndex'; +import { + DefaultColorScheme, + ExtendedColorScheme, + SupportedColorScheme, + ColorSystemOptions, + CssVarsTheme, + CssVarsPalette, + Shape, +} from '../styles/createThemeFoundation'; + +export interface ThemeComponents { + mergeClassNameAndStyles?: boolean; + [componentName: string]: any; +} + +interface ThemeNoVarsOptions extends Omit, CssVarsOptions { + mixins?: MixinsOptions; + components?: Partial; + palette?: PaletteOptions; + shadows?: Shadows; + transitions?: TransitionsOptions; + typography?: TypographyVariantsOptions | ((palette: Palette) => TypographyVariantsOptions); + zIndex?: ZIndexOptions; + unstable_strictMode?: boolean; + unstable_sxConfig?: SxConfig; + modularCssLayers?: boolean | string; +} + +export interface CssVarsThemeOptions extends Omit { + /** + * The strategy to generate CSS variables + * + * @example 'media' + * Generate CSS variables using [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) + * + * @example '.mode-%s' + * Generate CSS variables within a class .mode-light, .mode-dark + * + * @example '[data-mode-%s]' + * Generate CSS variables within a data attribute [data-mode-light], [data-mode-dark] + */ + colorSchemeSelector?: 'media' | 'class' | 'data' | string; + /** + * Prefix of the generated CSS variables + * @default 'mui' + */ + cssVarPrefix?: string; + /** + * If `true`, the CSS color-scheme will not be set. + * https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme + * @default false + */ + disableCssColorScheme?: boolean; + /** + * If `true`, the CSS relative color will be used. + */ + nativeColor?: boolean; + /** + * The selector to generate the global CSS variables (non-color-scheme related) + * @default ':root' + * @example ':host' // (for shadow DOM) + * @see https://mui.com/material-ui/customization/shadow-dom/#3-css-theme-variables-optional + */ + rootSelector?: string; + /** + * A function to determine if the key, value should be attached as CSS Variable + * `keys` is an array that represents the object path keys. + * Ex, if the theme is { foo: { bar: 'var(--test)' } } + * then, keys = ['foo', 'bar'] + * value = 'var(--test)' + */ + shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean; + /** + * @default 'light' + */ + defaultColorScheme?: SupportedColorScheme; + /** + * Color schemes configuration + */ + colorSchemes?: Partial> & + (ExtendedColorScheme extends string ? Record : {}); +} + +export interface CssThemeVariables {} + +type CssVarsOptions = CssThemeVariables extends { + enabled: true; +} + ? ColorSystemOptions + : {}; + +// shut off automatic exporting for the `BaseTheme` above +export {}; + +type CssVarsConfigList = + | 'colorSchemeSelector' + | 'rootSelector' + | 'disableCssColorScheme' + | 'cssVarPrefix' + | 'shouldSkipGeneratingVar' + | 'nativeColor'; + +export interface ThemeOptions extends CssVarsOptions, Omit { + cssVariables?: boolean | Pick; + palette?: PaletteOptions; +} + +export interface BaseTheme extends SystemTheme { + mixins: Mixins; + palette: Palette & (CssThemeVariables extends { enabled: true } ? CssVarsPalette : {}); + shadows: Shadows; + shape: Shape; + transitions: Transitions; + typography: TypographyVariants; + zIndex: ZIndex; + unstable_strictMode?: boolean; +} + +type CssVarsProperties = CssThemeVariables extends { enabled: true } + ? Pick< + CssVarsTheme, + | 'applyStyles' + | 'colorSchemes' + | 'colorSchemeSelector' + | 'rootSelector' + | 'cssVarPrefix' + | 'defaultColorScheme' + | 'getCssVar' + | 'getColorSchemeSelector' + | 'generateThemeVars' + | 'generateStyleSheets' + | 'generateSpacing' + | 'shouldSkipGeneratingVar' + | 'vars' + > + : Partial>; + +/** + * Our [TypeScript guide on theme customization](https://mui.com/material-ui/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties. + */ +export interface Theme extends BaseTheme, CssVarsProperties { + cssVariables?: false; + components?: ThemeComponents; + unstable_sx: (props: SxProps) => CSSObject; + unstable_sxConfig: SxConfig; + alpha: (color: string, value: number | string) => string; + lighten: (color: string, coefficient: number | string) => string; + darken: (color: string, coefficient: number | string) => string; +} + +export type CreateThemeComponent = { + defaultProps?: Partial; + styleOverrides?: Partial< + Record< + SlotNames, + Interpolation< + // Record is for other props that the slot receive internally + // Documenting all ownerStates could be a huge work, let's wait until we have a real needs from developers. + Props & + Record & { + ownerState: OwnerState & Record; + theme: Theme; + } + > + > + >; + variants?: Array<{ + props: + | Partial + | (( + props: Partial & { + ownerState: Partial; + }, + ) => boolean); + style: Interpolation<{ theme: Theme }>; + }>; +}; + +/** + * Generate a theme base on the options received. + * @param options Takes an incomplete theme object and adds the missing parts. + * @param args Deep merge the arguments with the about to be returned theme. + * @returns A complete, ready-to-use theme object. + */ +declare function createTheme( + options: ThemeOptions, // cast type to skip module augmentation test + ...args: object[] +): Theme; + +export default createTheme; diff --git a/packages/mui-material/src/stylesOptimized/createTheme.js b/packages/mui-material/src/stylesOptimized/createTheme.js new file mode 100644 index 00000000000000..363ad00254cc9d --- /dev/null +++ b/packages/mui-material/src/stylesOptimized/createTheme.js @@ -0,0 +1 @@ +export { default } from '../styles/createTheme'; diff --git a/packages/mui-material/src/stylesOptimized/createThemeWithVars.d.ts b/packages/mui-material/src/stylesOptimized/createThemeWithVars.d.ts new file mode 100644 index 00000000000000..d12fd853d6a56b --- /dev/null +++ b/packages/mui-material/src/stylesOptimized/createThemeWithVars.d.ts @@ -0,0 +1,9 @@ +import { CssVarsTheme } from '../styles/createThemeFoundation'; +import { CssVarsThemeOptions, Theme } from './createTheme'; + +declare function createThemeWithVars( + options?: CssVarsThemeOptions, + ...args: object[] +): Omit & CssVarsTheme; + +export default createThemeWithVars; diff --git a/packages/mui-material/src/stylesOptimized/createThemeWithVars.js b/packages/mui-material/src/stylesOptimized/createThemeWithVars.js new file mode 100644 index 00000000000000..2193f3f5be8413 --- /dev/null +++ b/packages/mui-material/src/stylesOptimized/createThemeWithVars.js @@ -0,0 +1 @@ +export { default } from '../styles/createThemeWithVars'; diff --git a/packages/mui-material/src/stylesOptimized/index.ts b/packages/mui-material/src/stylesOptimized/index.ts new file mode 100644 index 00000000000000..c562c051638a7b --- /dev/null +++ b/packages/mui-material/src/stylesOptimized/index.ts @@ -0,0 +1,172 @@ +/** + * This file must mirror the exports of `@mui/material/styles` for non-breaking changes in v7. + * This entry point is an alternative for `@mui/material/styles` for optimizing TypeScript interface instantiation + */ + +import { DistributiveOmit } from '@mui/types'; + +export { default as THEME_ID } from '../styles/identifier'; +export { default as createTheme } from './createTheme'; +export type { + // New types for augmenting the Theme Components + CreateThemeComponent, + ThemeComponents, + // ============================================= + ThemeOptions, + Theme, + CssThemeVariables, + CssVarsThemeOptions, + BaseTheme, +} from './createTheme'; +export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictModeTheme'; +export type { Shadows } from '../styles/shadows'; +export type { ZIndex } from '../styles/zIndex'; +export type { + CommonColors, + Palette, + PaletteColor, + PaletteColorOptions, + PaletteOptions, + SimplePaletteColorOptions, + TypeText, + TypeAction, + TypeBackground, + PaletteMode, + Color, +} from '../styles/createPalette'; +export { default as createColorScheme } from './createColorScheme'; +export { default as createStyles } from '../styles/createStyles'; +export type { + TypographyVariants, + TypographyVariantsOptions, + TypographyStyle, + TypographyVariant, +} from '../styles/createTypography'; +export { default as responsiveFontSizes } from '../styles/responsiveFontSizes'; +export type { + Duration, + Easing, + Transitions, + TransitionsOptions, +} from '../styles/createTransitions'; +export { duration, easing } from '../styles/createTransitions'; +export type { Mixins, CSSProperties, MixinsOptions } from '../styles/createMixins'; +export type { + Direction, + Breakpoint, + BreakpointOverrides, + Breakpoints, + BreakpointsOptions, + CreateMUIStyled, + Interpolation, + CSSInterpolation, + CSSObject, + ColorFormat, + ColorObject, + SxProps, +} from '@mui/system'; +export { + css, + keyframes, + // color manipulators + hexToRgb, + rgbToHex, + hslToRgb, + decomposeColor, + recomposeColor, + getContrastRatio, + getLuminance, + emphasize, + alpha, + darken, + lighten, + StyledEngineProvider, +} from '@mui/system'; +export { unstable_createBreakpoints } from '@mui/system/createBreakpoints'; +export { default as useTheme } from './useTheme'; +export { default as useThemeProps, type ThemedProps, type ThemeWithProps } from './useThemeProps'; +export { default as styled } from './styled'; +export { default as ThemeProvider } from './ThemeProvider'; +export type { ThemeProviderProps } from './ThemeProvider'; +export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from '../styles/cssUtils'; + +export type ClassNameMap = Record; +export interface StyledComponentProps { + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial>; +} + +/** + * All standard components exposed by `material-ui` are `StyledComponents` with + * certain `classes`, on which one can also set a top-level `className` and inline + * `style`. + * @deprecated will be removed in v5 for internal usage only + */ +export type StandardProps< + ComponentProps, + ClassKey extends string, + Removals extends keyof ComponentProps = never, +> = DistributiveOmit & + StyledComponentProps & { + className?: string; + ref?: ComponentProps extends { ref?: infer RefType } ? RefType : React.Ref; + style?: React.CSSProperties; + }; + +// eslint-disable-next-line @typescript-eslint/no-namespace +export namespace PropTypes { + // keeping the type structure for backwards compat + export type Color = 'inherit' | 'primary' | 'secondary' | 'default'; +} + +export { default as makeStyles } from '../styles/makeStyles'; +export { default as withStyles } from '../styles/withStyles'; +export { default as withTheme } from '../styles/withTheme'; + +export * from './ThemeProviderWithVars'; +export type { StorageManager } from '@mui/system/cssVars'; + +export { default as extendTheme } from './createThemeWithVars'; + +export type { + ColorSchemeOverrides, + SupportedColorScheme, + ColorSystem, + CssVarsPalette, + Opacity, + Overlays, + PaletteAlert, + PaletteActionChannel, + PaletteAppBar, + PaletteAvatar, + PaletteChip, + PaletteColorChannel, + PaletteCommonChannel, + PaletteFilledInput, + PaletteLinearProgress, + PaletteSkeleton, + PaletteSlider, + PaletteSnackbarContent, + PaletteSpeedDialAction, + PaletteStepConnector, + PaletteStepContent, + PaletteSwitch, + PaletteTableCell, + PaletteTextChannel, + PaletteTooltip, + CssVarsTheme, + ThemeVars, + ThemeCssVar, + ThemeCssVarOverrides, + ColorSystemOptions, + Shape, + ShapeOptions, +} from '../styles/createThemeFoundation'; +export { default as getOverlayAlpha } from '../styles/getOverlayAlpha'; +export { default as shouldSkipGeneratingVar } from '../styles/shouldSkipGeneratingVar'; + +// Private methods for creating parts of the theme +export { default as private_createTypography } from '../styles/createTypography'; +export { default as private_excludeVariablesFromRoot } from '../styles/excludeVariablesFromRoot'; diff --git a/packages/mui-material/src/stylesOptimized/styled.d.ts b/packages/mui-material/src/stylesOptimized/styled.d.ts new file mode 100644 index 00000000000000..f0739bd177dc7a --- /dev/null +++ b/packages/mui-material/src/stylesOptimized/styled.d.ts @@ -0,0 +1,15 @@ +import { CreateMUIStyled } from '@mui/system'; +import { Theme } from './createTheme'; + +export { default as slotShouldForwardProp } from '../styles/slotShouldForwardProp'; +export { default as rootShouldForwardProp } from '../styles/rootShouldForwardProp'; + +/** + * Custom styled utility that has a default MUI theme. + * @param tag HTML tag or component that should serve as base. + * @param options Styled options for the created component. + * @returns React component that has styles attached to it. + */ +declare const styled: CreateMUIStyled; + +export default styled; diff --git a/packages/mui-material/src/stylesOptimized/styled.js b/packages/mui-material/src/stylesOptimized/styled.js new file mode 100644 index 00000000000000..2e02593454a25a --- /dev/null +++ b/packages/mui-material/src/stylesOptimized/styled.js @@ -0,0 +1,2 @@ +export { default } from '../styles/styled'; +export * from '../styles/styled'; diff --git a/packages/mui-material/src/stylesOptimized/useTheme.d.ts b/packages/mui-material/src/stylesOptimized/useTheme.d.ts new file mode 100644 index 00000000000000..7fbc5ac3657c89 --- /dev/null +++ b/packages/mui-material/src/stylesOptimized/useTheme.d.ts @@ -0,0 +1,3 @@ +import { Theme } from './createTheme'; + +export default function useTheme(): T; diff --git a/packages/mui-material/src/stylesOptimized/useTheme.js b/packages/mui-material/src/stylesOptimized/useTheme.js new file mode 100644 index 00000000000000..8b3aeb1eae89de --- /dev/null +++ b/packages/mui-material/src/stylesOptimized/useTheme.js @@ -0,0 +1 @@ +export { default } from '../styles/useTheme'; diff --git a/packages/mui-material/src/stylesOptimized/useThemeProps.d.ts b/packages/mui-material/src/stylesOptimized/useThemeProps.d.ts new file mode 100644 index 00000000000000..2a80dbcf7f508a --- /dev/null +++ b/packages/mui-material/src/stylesOptimized/useThemeProps.d.ts @@ -0,0 +1,44 @@ +import { ThemeComponents } from './createTheme'; + +export interface ThemeWithProps { + components?: ThemeComponents; +} + +export type ThemedProps = Theme extends { + components: Record; +} + ? Props + : {}; + +/** + * Merges input `props` with the `defaultProps` for a component that were defined in the theme. + * + * The `defaultProps` are defined in the theme under `theme.components[componentName].defaultProps`. + * + * @example + * + * ```tsx + * const createTheme = () => ({ + * components: { + * MuiStat: { + * defaultProps: { + * variant: 'outlined', + * }, + * }, + * }, + * }); + * + * function Stat(props) { + * const themeProps = useThemeProps({ props, name: 'MuiStat' }); + * return
; + * } + * ``` + * + * @param params.props The input props + * @param params.name The name of the component as defined in the theme + */ +export default function useThemeProps< + Theme extends ThemeWithProps, + Props, + Name extends keyof any, +>(params: { props: Props; name: Name }): Props & ThemedProps; diff --git a/packages/mui-material/src/stylesOptimized/useThemeProps.js b/packages/mui-material/src/stylesOptimized/useThemeProps.js new file mode 100644 index 00000000000000..82c066fdde105e --- /dev/null +++ b/packages/mui-material/src/stylesOptimized/useThemeProps.js @@ -0,0 +1 @@ +export { default } from '../styles/useThemeProps'; diff --git a/packages/mui-material/src/themeCssVarsAugmentation/index.d.ts b/packages/mui-material/src/themeCssVarsAugmentation/index.d.ts index 5db7c7a9419006..c0a032eca910fb 100644 --- a/packages/mui-material/src/themeCssVarsAugmentation/index.d.ts +++ b/packages/mui-material/src/themeCssVarsAugmentation/index.d.ts @@ -3,7 +3,7 @@ export {}; * Enhance the theme types to include new properties from the CssVarsProvider. * The theme is typed with CSS variables in `styled`, `sx`, `useTheme`, etc. */ -declare module '@mui/material/styles' { +declare module '@mui/material/stylesOptimized' { interface CssThemeVariables { enabled: true; } diff --git a/packages/mui-material/src/useMediaQuery/index.d.ts b/packages/mui-material/src/useMediaQuery/index.d.ts index 8ce15a6118cb17..1e16b16e8e9e24 100644 --- a/packages/mui-material/src/useMediaQuery/index.d.ts +++ b/packages/mui-material/src/useMediaQuery/index.d.ts @@ -1,5 +1,5 @@ import { UseMediaQueryOptions } from '@mui/system/useMediaQuery'; -import { Theme } from '../styles/createTheme'; +import { Theme } from '../stylesOptimized/createTheme'; export * from '@mui/system/useMediaQuery'; diff --git a/packages/mui-material/src/utils/memoTheme.ts b/packages/mui-material/src/utils/memoTheme.ts index ea7da75140e77c..45d49b50da1b86 100644 --- a/packages/mui-material/src/utils/memoTheme.ts +++ b/packages/mui-material/src/utils/memoTheme.ts @@ -1,5 +1,5 @@ import { unstable_memoTheme } from '@mui/system'; -import { Theme } from '../styles/createTheme'; +import { Theme } from '../stylesOptimized/createTheme'; const memoTheme = unstable_memoTheme; diff --git a/packages/mui-material/src/utils/types.ts b/packages/mui-material/src/utils/types.ts index b67d6cce4486a1..0ffc08fe42ce01 100644 --- a/packages/mui-material/src/utils/types.ts +++ b/packages/mui-material/src/utils/types.ts @@ -1,6 +1,6 @@ import { SxProps } from '@mui/system'; import { SlotComponentProps } from '@mui/utils/types'; -import { Theme } from '../styles'; +import { Theme } from '../stylesOptimized'; export type { EventHandlers, diff --git a/packages/mui-material/src/zero-styled/index.tsx b/packages/mui-material/src/zero-styled/index.tsx index a329c811bf0e32..1201fda2b846a7 100644 --- a/packages/mui-material/src/zero-styled/index.tsx +++ b/packages/mui-material/src/zero-styled/index.tsx @@ -1,6 +1,6 @@ import { Interpolation } from '@mui/system'; import { extendSxProp } from '@mui/system/styleFunctionSx'; -import { Theme } from '../styles/createTheme'; +import { Theme } from '../stylesOptimized'; import useTheme from '../styles/useTheme'; import GlobalStyles, { GlobalStylesProps } from '../GlobalStyles'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e1e116b79af6e1..e247f3749a62f3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1862,6 +1862,12 @@ importers: specifier: workspace:^ version: link:../../packages/mui-material/build + test/ts-performance: + dependencies: + '@mui/material': + specifier: workspace:^ + version: link:../../packages/mui-material/build + packages: '@aashutoshrathi/word-wrap@1.2.6': diff --git a/test/ts-performance/README b/test/ts-performance/README new file mode 100644 index 00000000000000..6e1438168120dc --- /dev/null +++ b/test/ts-performance/README @@ -0,0 +1,5 @@ +# TypeScript Performance Tests + +This suite uses workspace linking to resolve build folders and tests TypeScript compiler performance. + +You can only run `pnpm test` after the project has been built with `pnpm release:build`. diff --git a/test/ts-performance/instantiations.test.js b/test/ts-performance/instantiations.test.js new file mode 100644 index 00000000000000..40581a86bb6b04 --- /dev/null +++ b/test/ts-performance/instantiations.test.js @@ -0,0 +1,59 @@ +import { execSync } from 'child_process'; +import path from 'path'; +import { fileURLToPath } from 'url'; + +const dirname = path.dirname(fileURLToPath(import.meta.url)); + +describe('TypeScript Performance', () => { + it('should have Instantiations < 200', function testInstantiations() { + this.timeout(60000); + + const testDir = path.join(dirname); + + try { + const output = execSync('pnpm tsc --noEmit --diagnostics', { + cwd: testDir, + encoding: 'utf-8', + stdio: 'pipe', + }); + + const instantiationsMatch = output.match(/Instantiations:\s+(\d+)/); + + if (!instantiationsMatch) { + throw new Error('Could not find Instantiations in TypeScript diagnostics output'); + } + + const instantiations = parseInt(instantiationsMatch[1], 10); + + // eslint-disable-next-line no-console + console.info(`TypeScript Instantiations: ${instantiations}`); + + if (instantiations >= 200) { + throw new Error( + `TypeScript Instantiations (${instantiations}) exceeded the limit of 200. ` + + 'This may indicate performance issues with type definitions.', + ); + } + } catch (error) { + if (error.stdout) { + const instantiationsMatch = error.stdout.match(/Instantiations:\s+(\d+)/); + + if (instantiationsMatch) { + const instantiations = parseInt(instantiationsMatch[1], 10); + // eslint-disable-next-line no-console -- Useful for debugging test output + console.info(`TypeScript Instantiations: ${instantiations}`); + + if (instantiations >= 200) { + throw new Error( + `TypeScript Instantiations (${instantiations}) exceeded the limit of 200. ` + + 'This may indicate performance issues with type definitions.', + ); + } + return; + } + } + + throw error; + } + }); +}); diff --git a/test/ts-performance/package.json b/test/ts-performance/package.json new file mode 100644 index 00000000000000..074a7af19c9f74 --- /dev/null +++ b/test/ts-performance/package.json @@ -0,0 +1,10 @@ +{ + "private": true, + "scripts": { + "release:test": "mocha instantiations.test.js" + }, + "devDependencies": {}, + "dependencies": { + "@mui/material": "workspace:^" + } +} diff --git a/test/ts-performance/src/styles-optimized.tsx b/test/ts-performance/src/styles-optimized.tsx new file mode 100644 index 00000000000000..8da02920c46c35 --- /dev/null +++ b/test/ts-performance/src/styles-optimized.tsx @@ -0,0 +1,785 @@ +import { createTheme } from '@mui/material/stylesOptimized'; + +export default createTheme({ + components: { + MuiAccordion: { + defaultProps: { + disableGutters: true, + }, + styleOverrides: {}, + variants: [], + }, + MuiAccordionActions: { + defaultProps: { + disableSpacing: true, + }, + styleOverrides: {}, + variants: [], + }, + MuiAccordionDetails: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiAccordionSummary: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiAlert: { + defaultProps: { + severity: 'info', + }, + styleOverrides: {}, + variants: [], + }, + MuiAlertTitle: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiAppBar: { + defaultProps: { + position: 'fixed', + }, + styleOverrides: {}, + variants: [], + }, + MuiAutocomplete: { + defaultProps: { + autoHighlight: true, + }, + styleOverrides: {}, + variants: [], + }, + MuiAvatar: { + defaultProps: { + variant: 'circular', + }, + styleOverrides: {}, + variants: [], + }, + MuiAvatarGroup: { + defaultProps: { + max: 5, + }, + styleOverrides: {}, + variants: [], + }, + MuiBackdrop: { + defaultProps: { + invisible: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiBadge: { + defaultProps: { + showZero: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiBottomNavigation: { + defaultProps: { + showLabels: true, + }, + styleOverrides: {}, + variants: [], + }, + MuiBottomNavigationAction: { + defaultProps: { + showLabel: true, + }, + styleOverrides: {}, + variants: [], + }, + MuiBreadcrumbs: { + defaultProps: { + maxItems: 8, + }, + styleOverrides: {}, + variants: [], + }, + MuiButton: { + defaultProps: { + disableElevation: true, + }, + styleOverrides: {}, + variants: [], + }, + MuiButtonBase: { + defaultProps: { + disableRipple: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiButtonGroup: { + defaultProps: { + disableElevation: true, + }, + styleOverrides: {}, + variants: [], + }, + MuiCard: { + defaultProps: { + raised: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiCardActionArea: { + defaultProps: { + disableRipple: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiCardActions: { + defaultProps: { + disableSpacing: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiCardContent: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiCardHeader: { + defaultProps: { + disableTypography: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiCardMedia: { + defaultProps: { + component: 'div', + }, + styleOverrides: {}, + variants: [], + }, + MuiCheckbox: { + defaultProps: { + disableRipple: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiChip: { + defaultProps: { + size: 'medium', + }, + styleOverrides: {}, + variants: [], + }, + MuiCircularProgress: { + defaultProps: { + size: 40, + }, + styleOverrides: {}, + variants: [], + }, + MuiCollapse: { + defaultProps: { + timeout: 'auto', + }, + styleOverrides: {}, + variants: [], + }, + MuiContainer: { + defaultProps: { + maxWidth: 'lg', + }, + styleOverrides: {}, + variants: [], + }, + MuiCssBaseline: { + defaultProps: { + enableColorScheme: true, + }, + styleOverrides: {}, + variants: [], + }, + MuiDialog: { + defaultProps: { + maxWidth: 'sm', + }, + styleOverrides: {}, + variants: [], + }, + MuiDialogActions: { + defaultProps: { + disableSpacing: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiDialogContent: { + defaultProps: { + dividers: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiDialogContentText: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiDialogTitle: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiDivider: { + defaultProps: { + orientation: 'horizontal', + }, + styleOverrides: {}, + variants: [], + }, + MuiDrawer: { + defaultProps: { + anchor: 'left', + }, + styleOverrides: {}, + variants: [], + }, + MuiFab: { + defaultProps: { + size: 'large', + }, + styleOverrides: {}, + variants: [], + }, + MuiFilledInput: { + defaultProps: { + disableUnderline: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiFormControl: { + defaultProps: { + variant: 'outlined', + }, + styleOverrides: {}, + variants: [], + }, + MuiFormControlLabel: { + defaultProps: { + labelPlacement: 'end', + }, + styleOverrides: {}, + variants: [], + }, + MuiFormGroup: { + defaultProps: { + row: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiFormHelperText: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiFormLabel: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiGrid: { + defaultProps: { + spacing: 2, + }, + styleOverrides: {}, + variants: [], + }, + MuiGridLegacy: { + defaultProps: { + spacing: 2, + }, + styleOverrides: {}, + variants: [], + }, + MuiIcon: { + defaultProps: { + baseClassName: 'material-icons', + }, + styleOverrides: {}, + variants: [], + }, + MuiIconButton: { + defaultProps: { + size: 'medium', + }, + styleOverrides: {}, + variants: [], + }, + MuiImageList: { + defaultProps: { + cols: 2, + }, + styleOverrides: {}, + variants: [], + }, + MuiImageListItem: { + defaultProps: { + cols: 1, + }, + styleOverrides: {}, + variants: [], + }, + MuiImageListItemBar: { + defaultProps: { + position: 'bottom', + }, + styleOverrides: {}, + variants: [], + }, + MuiInput: { + defaultProps: { + disableUnderline: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiInputAdornment: { + defaultProps: { + position: 'start', + }, + styleOverrides: {}, + variants: [], + }, + MuiInputBase: { + defaultProps: { + fullWidth: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiInputLabel: { + defaultProps: { + disableAnimation: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiLinearProgress: { + defaultProps: { + variant: 'indeterminate', + }, + styleOverrides: {}, + variants: [], + }, + MuiLink: { + defaultProps: { + underline: 'hover', + }, + styleOverrides: {}, + variants: [], + }, + MuiList: { + defaultProps: { + dense: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiListItem: { + defaultProps: { + dense: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiListItemAvatar: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiListItemButton: { + defaultProps: { + dense: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiListItemIcon: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiListItemSecondaryAction: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiListItemText: { + defaultProps: { + disableTypography: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiListSubheader: { + defaultProps: { + disableSticky: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiMenu: { + defaultProps: { + autoFocus: true, + }, + styleOverrides: {}, + variants: [], + }, + MuiMenuItem: { + defaultProps: { + dense: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiMenuList: { + defaultProps: { + autoFocus: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiMobileStepper: { + defaultProps: { + position: 'bottom', + }, + styleOverrides: {}, + variants: [], + }, + MuiModal: { + defaultProps: { + disableEscapeKeyDown: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiNativeSelect: { + defaultProps: { + variant: 'standard', + }, + styleOverrides: {}, + variants: [], + }, + MuiOutlinedInput: { + defaultProps: { + notched: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiPagination: { + defaultProps: { + size: 'medium', + }, + styleOverrides: {}, + variants: [], + }, + MuiPaginationItem: { + defaultProps: { + size: 'medium', + }, + styleOverrides: {}, + variants: [], + }, + MuiPaper: { + defaultProps: { + elevation: 1, + }, + styleOverrides: {}, + variants: [], + }, + MuiPopper: { + defaultProps: { + placement: 'bottom', + }, + styleOverrides: {}, + }, + MuiPopover: { + defaultProps: { + anchorOrigin: { vertical: 'top', horizontal: 'left' }, + }, + styleOverrides: {}, + variants: [], + }, + MuiRadio: { + defaultProps: { + size: 'medium', + }, + styleOverrides: {}, + variants: [], + }, + MuiRadioGroup: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiRating: { + defaultProps: { + max: 5, + }, + styleOverrides: {}, + variants: [], + }, + MuiScopedCssBaseline: { + defaultProps: { + enableColorScheme: true, + }, + styleOverrides: {}, + variants: [], + }, + MuiSelect: { + defaultProps: { + variant: 'outlined', + }, + styleOverrides: {}, + variants: [], + }, + MuiSkeleton: { + defaultProps: { + variant: 'text', + }, + styleOverrides: {}, + variants: [], + }, + MuiSlider: { + defaultProps: { + orientation: 'horizontal', + }, + styleOverrides: {}, + variants: [], + }, + MuiSnackbar: { + defaultProps: { + autoHideDuration: 6000, + }, + styleOverrides: {}, + variants: [], + }, + MuiSnackbarContent: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiSpeedDial: { + defaultProps: { + direction: 'up', + }, + styleOverrides: {}, + variants: [], + }, + MuiSpeedDialAction: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiSpeedDialIcon: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiStack: { + defaultProps: { + spacing: 2, + }, + styleOverrides: {}, + variants: [], + }, + MuiStep: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiStepButton: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiStepConnector: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiStepContent: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiStepIcon: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiStepLabel: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiStepper: { + defaultProps: { + orientation: 'horizontal', + }, + styleOverrides: {}, + variants: [], + }, + MuiSvgIcon: { + defaultProps: { + fontSize: 'medium', + }, + styleOverrides: {}, + variants: [], + }, + MuiSwitch: { + defaultProps: { + size: 'medium', + }, + styleOverrides: {}, + variants: [], + }, + MuiSwipeableDrawer: { + defaultProps: { + anchor: 'left', + }, + }, + MuiTab: { + defaultProps: { + disableRipple: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiTable: { + defaultProps: { + size: 'medium', + }, + styleOverrides: {}, + variants: [], + }, + MuiTableBody: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiTableCell: { + defaultProps: { + size: 'medium', + }, + styleOverrides: {}, + variants: [], + }, + MuiTableContainer: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiTableFooter: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiTableHead: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiTablePagination: { + defaultProps: { + rowsPerPageOptions: [10, 25, 50], + }, + styleOverrides: {}, + variants: [], + }, + MuiTablePaginationActions: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiTableRow: { + defaultProps: { + hover: false, + }, + styleOverrides: {}, + variants: [], + }, + MuiTableSortLabel: { + defaultProps: { + direction: 'asc', + }, + styleOverrides: {}, + variants: [], + }, + MuiTabs: { + defaultProps: { + orientation: 'horizontal', + }, + styleOverrides: {}, + variants: [], + }, + MuiTextField: { + defaultProps: { + variant: 'outlined', + }, + styleOverrides: {}, + variants: [], + }, + MuiToggleButton: { + defaultProps: { + size: 'medium', + }, + styleOverrides: {}, + variants: [], + }, + MuiToggleButtonGroup: { + defaultProps: { + size: 'medium', + }, + styleOverrides: {}, + variants: [], + }, + MuiToolbar: { + defaultProps: { + variant: 'regular', + }, + styleOverrides: {}, + variants: [], + }, + MuiTooltip: { + defaultProps: { + placement: 'bottom', + }, + styleOverrides: {}, + variants: [], + }, + MuiTouchRipple: { + defaultProps: {}, + styleOverrides: {}, + variants: [], + }, + MuiTypography: { + defaultProps: { + variant: 'body1', + }, + styleOverrides: {}, + variants: [], + }, + MuiUseMediaQuery: { + defaultProps: {}, + }, + }, +}); diff --git a/test/ts-performance/tsconfig.json b/test/ts-performance/tsconfig.json new file mode 100644 index 00000000000000..68887d2bf121a8 --- /dev/null +++ b/test/ts-performance/tsconfig.json @@ -0,0 +1,18 @@ +{ + "compilerOptions": { + // rely on workspace linking + "paths": {}, + "target": "es5", + "lib": ["es6", "dom"], + "jsx": "react", + "module": "nodenext", + "moduleResolution": "nodenext", + "strict": true, + "noEmit": true, + "noErrorTruncation": true, + "rootDir": "./src", + "skipLibCheck": true, + "types": [] + }, + "exclude": ["**/node_modules/"] +}