[material-ui] Remove few more React.ReactElement<any> types (#44290)

docs/src/modules/components/JoyThemeBuilder.tsx

@@ -1268,7 +1268,15 @@ function getAvailableTokens(colorSchemes: any, colorMode: 'light' | 'dark') {
   return tokens;
 }
 
-function TemplatesDialog({ children, data }: { children: React.ReactElement<any>; data: any }) {
+function TemplatesDialog({
+  children,
+  data,
+}: {
+  children: React.ReactElement<{
+    onClick?: React.MouseEventHandler;
+  }>;
+  data: any;
+}) {
   const [open, setOpen] = React.useState(false);
   const { map: templateMap } = sourceJoyTemplates();
   const renderItem = (name: string, item: TemplateData) => {
@@ -1339,9 +1347,9 @@ function TemplatesDialog({ children, data }: { children: React.ReactElement<any>
   return (
     <React.Fragment>
       {React.cloneElement(children, {
-        onClick: () => {
+        onClick: (event: React.MouseEvent) => {
           setOpen(true);
-          children.props.onClick?.();
+          children.props.onClick?.(event);
         },
       })}
       <Modal open={open} onClose={() => setOpen(false)}>

packages/mui-material/src/Modal/useModal.ts

@@ -24,6 +24,8 @@ function getHasTransition(children: UseModalParameters['children']) {
   return children ? children.props.hasOwnProperty('in') : false;
 }
 
+const noop = () => {};
+
 // A modal manager used to track and manage the state of open Modals.
 // Modals don't open on the server so this won't conflict with concurrent requests.
 const manager = new ModalManager();
@@ -227,8 +229,8 @@ function useModal(parameters: UseModalParameters): UseModalReturnValue {
     };
 
     return {
-      onEnter: createChainedFunction(handleEnter, children?.props.onEnter),
-      onExited: createChainedFunction(handleExited, children?.props.onExited),
+      onEnter: createChainedFunction(handleEnter, children?.props.onEnter ?? noop),
+      onExited: createChainedFunction(handleExited, children?.props.onExited ?? noop),
     };
   };
 

packages/mui-material/src/Modal/useModal.types.ts

@@ -22,7 +22,14 @@ export type UseModalParameters = {
   /**
    * A single child content element.
    */
-  children: React.ReactElement<any> | undefined | null;
+  children:
+    | React.ReactElement<{
+        in?: boolean;
+        onEnter?: (this: unknown) => void;
+        onExited?: (this: unknown) => void;
+      }>
+    | undefined
+    | null;
   /**
    * When set to true the Modal waits until a nested Transition is completed before closing.
    * @default false

packages/mui-material/src/Slider/SliderValueLabel.types.ts

@@ -1,5 +1,5 @@
 export interface SliderValueLabelProps {
-  children?: React.ReactElement<any>;
+  children?: React.ReactElement<{ className?: string; children?: React.ReactNode }>;
   className?: string;
   style?: React.CSSProperties;
   /**

packages/mui-material/src/Unstable_TrapFocus/FocusTrap.tsx

@@ -324,7 +324,7 @@ function FocusTrap(props: FocusTrapProps): React.JSX.Element {
     };
   }, [disableAutoFocus, disableEnforceFocus, disableRestoreFocus, isEnabled, open, getTabbable]);
 
-  const onFocus = (event: FocusEvent) => {
+  const onFocus = (event: React.FocusEvent<Element, Element>) => {
     if (nodeToRestore.current === null) {
       nodeToRestore.current = event.relatedTarget;
     }

packages/mui-material/src/Unstable_TrapFocus/FocusTrap.types.ts

@@ -24,7 +24,10 @@ export interface FocusTrapProps {
   /**
    * A single child content element.
    */
-  children: React.ReactElement<any>;
+  children: React.ReactElement<{
+    onFocus?: React.FocusEventHandler;
+    ref?: React.RefCallback<any> | null;
+  }>;
   /**
    * If `true`, the focus trap will not automatically shift focus to itself when it opens, and
    * replace it to the last focused element when it closes.

packages/mui-styles/test/styles.spec.tsx

@@ -215,7 +215,7 @@ withStyles((theme) =>
     });
 
   interface ListItemContentProps extends WithStyles<typeof styles> {
-    children?: React.ReactElement<any>;
+    children?: React.ReactElement<unknown>;
     inset?: boolean;
     row?: boolean;
   }