theme: update API report + fixes

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/theme/api-report.md

@@ -6,8 +6,12 @@
 import { Overrides } from '@material-ui/core/styles/overrides';
 import { Palette } from '@material-ui/core/styles/createPalette';
 import { PaletteOptions } from '@material-ui/core/styles/createPalette';
+import { PaletteOptions as PaletteOptions_2 } from '@mui/material/styles';
+import { default as React_2 } from 'react';
+import { ReactNode } from 'react';
 import { Theme } from '@material-ui/core';
 import { ThemeOptions } from '@material-ui/core';
+import { ThemeOptions as ThemeOptions_2 } from '@mui/material/styles';
 
 // @public @deprecated
 export type BackstagePalette = Palette & BackstagePaletteAdditions;
@@ -99,9 +103,66 @@ export interface BackstageThemeOptions extends ThemeOptions {
   palette: BackstagePaletteOptions;
 }
 
+// @public
+export interface BaseThemeOptionsInput<PaletteOptions> {
+  // (undocumented)
+  defaultPageTheme?: string;
+  // (undocumented)
+  fontFamily?: string;
+  // (undocumented)
+  htmlFontSize?: number;
+  // (undocumented)
+  pageTheme?: Record<string, PageTheme>;
+  // (undocumented)
+  palette: PaletteOptions;
+}
+
 // @public
 export const colorVariants: Record<string, string[]>;
 
+// @public
+export function createBaseThemeOptions<PaletteOptions>(
+  options: BaseThemeOptionsInput<PaletteOptions>,
+): {
+  palette: PaletteOptions;
+  typography: {
+    htmlFontSize: number;
+    fontFamily: string;
+    h1: {
+      fontSize: number;
+      fontWeight: number;
+      marginBottom: number;
+    };
+    h2: {
+      fontSize: number;
+      fontWeight: number;
+      marginBottom: number;
+    };
+    h3: {
+      fontSize: number;
+      fontWeight: number;
+      marginBottom: number;
+    };
+    h4: {
+      fontWeight: number;
+      fontSize: number;
+      marginBottom: number;
+    };
+    h5: {
+      fontWeight: number;
+      fontSize: number;
+      marginBottom: number;
+    };
+    h6: {
+      fontWeight: number;
+      fontSize: number;
+      marginBottom: number;
+    };
+  };
+  page: PageTheme;
+  getPageTheme: ({ themeId }: PageThemeSelector) => PageTheme;
+};
+
 // @public @deprecated (undocumented)
 export const createTheme: typeof createV4Theme;
 
@@ -125,6 +186,9 @@ export function createV4ThemeOverrides(theme: Theme): Overrides;
 // @public
 export const darkTheme: Theme;
 
+// @public
+export const defaultComponentThemes: ThemeOptions_2['components'];
+
 // @public
 export function genPageTheme(props: {
   colors: string[];
@@ -162,9 +226,39 @@ export type SimpleThemeOptions = SimpleV4ThemeOptions;
 // @public
 export type SimpleV4ThemeOptions = {
   palette: PaletteOptions;
-  defaultPageTheme: string;
+  defaultPageTheme?: string;
   pageTheme?: Record<string, PageTheme>;
   fontFamily?: string;
   htmlFontSize?: number;
 };
+
+// @public
+export type SimpleV5ThemeOptions = {
+  palette: PaletteOptions_2;
+  defaultPageTheme?: string;
+  pageTheme?: Record<string, PageTheme>;
+  fontFamily?: string;
+  htmlFontSize?: number;
+};
+
+// @public
+export interface UnifiedTheme {
+  // (undocumented)
+  getTheme(version: string): unknown | undefined;
+}
+
+// @public
+export function UnifiedThemeProvider(
+  props: UnifiedThemeProviderProps,
+): React_2.ReactNode;
+
+// @public
+export interface UnifiedThemeProviderProps {
+  // (undocumented)
+  children: ReactNode;
+  // (undocumented)
+  noCssBaseline?: boolean;
+  // (undocumented)
+  theme: UnifiedTheme;
+}
 ```

packages/theme/src/base/createBaseThemeOptions.ts

@@ -22,6 +22,11 @@ const DEFAULT_FONT_FAMILY =
   '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif';
 const DEFAULT_PAGE_THEME = 'home';
 
+/**
+ * Options for {@link createBaseThemeOptions}.
+ *
+ * @public
+ */
 export interface BaseThemeOptionsInput<PaletteOptions> {
   palette: PaletteOptions;
   defaultPageTheme?: string;

packages/theme/src/base/index.ts

@@ -15,6 +15,7 @@
  */
 
 export { createBaseThemeOptions } from './createBaseThemeOptions';
+export type { BaseThemeOptionsInput } from './createBaseThemeOptions';
 export { colorVariants, genPageTheme, pageTheme, shapes } from './pageTheme';
 export type {
   BackstagePaletteAdditions,

packages/theme/src/compat/UnifiedThemeProvider.tsx

@@ -26,13 +26,23 @@ import {
 import CssBaseline from '@mui/material/CssBaseline';
 import { UnifiedTheme } from './types';
 
-interface ThemeProviderProps {
+/**
+ * Props for {@link UnifiedThemeProvider}.
+ *
+ * @public
+ */
+export interface UnifiedThemeProviderProps {
   children: ReactNode;
   theme: UnifiedTheme;
   noCssBaseline?: boolean;
 }
 
-export function UnifiedThemeProvider(props: ThemeProviderProps) {
+/**
+ * Provides themes for all MUI versions supported by the provided unified theme.
+ *
+ * @public
+ */
+export function UnifiedThemeProvider(props: UnifiedThemeProviderProps) {
   const { children, theme, noCssBaseline } = props;
 
   let result = noCssBaseline ? (

packages/theme/src/compat/index.ts

@@ -15,4 +15,5 @@
  */
 
 export { UnifiedThemeProvider } from './UnifiedThemeProvider';
+export type { UnifiedThemeProviderProps } from './UnifiedThemeProvider';
 export type { UnifiedTheme } from './types';

packages/theme/src/v5/types.ts

@@ -51,12 +51,24 @@ declare module '@mui/material/styles/createTheme' {
 // See https://github.com/mui/material-ui/issues/35287
 declare global {
   namespace React {
-    type React = typeof import('react');
+    interface DOMAttributes<T> {
+      // onResize?: ReactEventHandler<T> | undefined;
+      // onResizeCapture?: ReactEventHandler<T> | undefined;
 
-    interface DOMAttributes<T extends React.SyntheticEvent> {
-      onResize?: React.EventHandler<T> | undefined;
-      onResizeCapture?: React.EventHandler<T> | undefined;
+      onResize?: (event: Event) => void;
+      onResizeCapture?: (event: Event) => void;
       nonce?: string | undefined;
     }
   }
 }
+// declare global {
+//   namespace React {
+//     type React = typeof import('react');
+
+//     interface DOMAttributes<T extends React.SyntheticEvent> {
+//       onResize?: React.EventHandler<T> | undefined;
+//       onResizeCapture?: React.EventHandler<T> | undefined;
+//       nonce?: string | undefined;
+//     }
+//   }
+// }