[code-infra] Convert @mui/private-theming to TypeScript

packages/mui-private-theming/package.json

@@ -24,7 +24,7 @@
     "url": "https://opencollective.com/mui-org"
   },
   "scripts": {
-    "build": "code-infra build --flat --skipTsc",
+    "build": "code-infra build --flat",
     "release": "pnpm build && pnpm publish",
     "test": "pnpm --workspace-root test:unit --project \"*:@mui/private-theming\"",
     "typescript": "tsc -p tsconfig.json"
@@ -37,6 +37,7 @@
   "devDependencies": {
     "@mui/types": "workspace:^",
     "@types/chai": "5.2.3",
+    "@types/prop-types": "15.7.15",
     "@types/react": "19.2.14",
     "chai": "6.2.2",
     "react": "19.2.6"
@@ -59,7 +60,7 @@
     "node": ">=14.0.0"
   },
   "exports": {
-    ".": "./src/index.js",
-    "./*": "./src/*/index.js"
+    ".": "./src/index.ts",
+    "./*": "./src/*/index.ts"
   }
 }

packages/mui-private-theming/src/ThemeProvider/ThemeProvider.test.js → packages/mui-private-theming/src/ThemeProvider/ThemeProvider.test.tsx

@@ -12,10 +12,10 @@ describe('ThemeProvider', () => {
   const { render } = createRenderer();
 
   it('should provide the theme', () => {
-    const ref = React.createRef();
-    const text = () => ref.current.textContent;
+    const ref = React.createRef<HTMLSpanElement>();
+    const text = () => ref.current!.textContent;
     function Test() {
-      const theme = useTheme();
+      const theme = useTheme<Record<string, string>>();
 
       return <span ref={ref}>{theme.foo}</span>;
     }
@@ -29,10 +29,10 @@ describe('ThemeProvider', () => {
   });
 
   it('should merge the themes', () => {
-    const ref = React.createRef();
-    const text = () => ref.current.textContent;
+    const ref = React.createRef<HTMLSpanElement>();
+    const text = () => ref.current!.textContent;
     function Test() {
-      const theme = useTheme();
+      const theme = useTheme<Record<string, string>>();
 
       return (
         <span ref={ref}>
@@ -53,11 +53,11 @@ describe('ThemeProvider', () => {
   });
 
   it('should memoize the merged output', () => {
-    const ref = React.createRef();
-    const getRenderCountRef = React.createRef();
-    const text = () => ref.current.textContent;
+    const ref = React.createRef<HTMLSpanElement>();
+    const getRenderCountRef = React.createRef<() => number>();
+    const text = () => ref.current!.textContent;
     function Test() {
-      const theme = useTheme();
+      const theme = useTheme<Record<string, string>>();
       return (
         <RenderCounter ref={getRenderCountRef}>
           <span ref={ref}>
@@ -85,14 +85,14 @@ describe('ThemeProvider', () => {
     expect(text()).to.equal('foobar');
     setProps({});
     expect(text()).to.equal('foobar');
-    expect(getRenderCountRef.current()).to.equal(2);
+    expect(getRenderCountRef.current!()).to.equal(2);
   });
 
   describe('warnings', () => {
     it('should warn about missing provider', () => {
       expect(() => {
         render(
-          <ThemeProvider theme={(theme) => theme}>
+          <ThemeProvider theme={(theme: any) => theme}>
             <div />
           </ThemeProvider>,
         );
@@ -106,7 +106,7 @@ describe('ThemeProvider', () => {
       expect(() => {
         render(
           <ThemeProvider theme={{ bar: 'bar' }}>
-            <ThemeProvider theme={() => {}}>
+            <ThemeProvider theme={(() => {}) as any}>
               <div />
             </ThemeProvider>
             ,

packages/mui-private-theming/src/ThemeProvider/ThemeProvider.js → packages/mui-private-theming/src/ThemeProvider/ThemeProvider.tsx

@@ -1,12 +1,18 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import exactProp from '@mui/utils/exactProp';
+import type { DefaultTheme } from '../defaultTheme';
 import ThemeContext from '../useTheme/ThemeContext';
 import useTheme from '../useTheme';
 import nested from './nested';
 
+export interface ThemeProviderProps<Theme = DefaultTheme> {
+  children?: React.ReactNode;
+  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+}
+
 // To support composition of theme.
-function mergeOuterLocalTheme(outerTheme, localTheme) {
+function mergeOuterLocalTheme(outerTheme: any, localTheme: any) {
   if (typeof localTheme === 'function') {
     const mergedTheme = localTheme(outerTheme);
 
@@ -32,9 +38,11 @@ function mergeOuterLocalTheme(outerTheme, localTheme) {
  * It makes the `theme` available down the React tree thanks to React context.
  * This component should preferably be used at **the root of your component tree**.
  */
-function ThemeProvider(props) {
+function ThemeProvider<T = DefaultTheme>(
+  props: ThemeProviderProps<T>,
+): React.ReactElement<ThemeProviderProps<T>> {
   const { children, theme: localTheme } = props;
-  const outerTheme = useTheme();
+  const outerTheme: T | null = useTheme<T>();
 
   if (process.env.NODE_ENV !== 'production') {
     if (outerTheme === null && typeof localTheme === 'function') {
@@ -65,7 +73,7 @@ function ThemeProvider(props) {
   return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
 }
 
-ThemeProvider.propTypes = {
+(ThemeProvider as any).propTypes /* remove-proptypes */ = {
   /**
    * Your component tree.
    */
@@ -77,7 +85,7 @@ ThemeProvider.propTypes = {
 };
 
 if (process.env.NODE_ENV !== 'production') {
-  ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes);
+  (ThemeProvider as any).propTypes = exactProp((ThemeProvider as any).propTypes);
 }
 
 export default ThemeProvider;

packages/mui-private-theming/src/ThemeProvider/index.ts

@@ -0,0 +1,4 @@
+export { default } from './ThemeProvider';
+export type * from './ThemeProvider';
+/** @internal Runtime-only re-export, intentionally absent from the public types. */
+export { default as unstable_nested } from './nested';

packages/mui-private-theming/src/index.js → packages/mui-private-theming/src/index.ts

@@ -2,3 +2,5 @@ export { default as ThemeProvider } from './ThemeProvider';
 export * from './ThemeProvider';
 
 export { default as useTheme } from './useTheme';
+
+export type * from './defaultTheme';

packages/mui-private-theming/src/useTheme/ThemeContext.js → packages/mui-private-theming/src/useTheme/ThemeContext.ts

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 
-const ThemeContext = React.createContext(null);
+const ThemeContext = React.createContext<any>(null);
 
 if (process.env.NODE_ENV !== 'production') {
   ThemeContext.displayName = 'ThemeContext';

packages/mui-private-theming/src/useTheme/useTheme.test.js → packages/mui-private-theming/src/useTheme/useTheme.test.tsx

@@ -8,10 +8,10 @@ describe('useTheme', () => {
   const { render } = createRenderer();
 
   it('should use the theme', () => {
-    const ref = React.createRef();
-    const text = () => ref.current.textContent;
+    const ref = React.createRef<HTMLSpanElement>();
+    const text = () => ref.current!.textContent;
     function Test() {
-      const theme = useTheme();
+      const theme = useTheme<Record<string, string>>();
 
       return <span ref={ref}>{theme.foo}</span>;
     }

packages/mui-private-theming/src/useTheme/useTheme.js → packages/mui-private-theming/src/useTheme/useTheme.ts

@@ -1,8 +1,9 @@
 'use client';
 import * as React from 'react';
+import type { DefaultTheme } from '../defaultTheme';
 import ThemeContext from './ThemeContext';
 
-export default function useTheme() {
+export default function useTheme<T = DefaultTheme>(): T {
   const theme = React.useContext(ThemeContext);
 
   if (process.env.NODE_ENV !== 'production') {

packages/mui-private-theming/tsconfig.build.json

@@ -0,0 +1,18 @@
+{
+  // This config is for emitting declarations (.d.ts) only
+  // Actual .ts source files are transpiled via babel
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "declaration": true,
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "outDir": "build",
+    "rootDir": "./src",
+    "stripInternal": true,
+    "types": ["@mui/internal-code-infra/build-env", "react"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["src/**/*.test.ts*", "src/**/*.spec.ts*"],
+  "references": [{ "path": "../mui-utils/tsconfig.build.json" }]
+}

packages/mui-private-theming/tsconfig.json

@@ -1,4 +1,9 @@
 {
   "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "allowJs": false,
+    "skipLibCheck": true,
+    "types": ["react", "vitest/globals", "@mui/internal-code-infra/build-env"]
+  },
   "include": ["src/**/*"]
 }

packages/mui-system/tsconfig.build.json

@@ -13,6 +13,7 @@
   "include": ["src/**/*.ts*"],
   "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"],
   "references": [
+    { "path": "../mui-private-theming/tsconfig.build.json" },
     { "path": "../mui-styled-engine/tsconfig.build.json" },
     { "path": "../mui-utils/tsconfig.build.json" }
   ]