Add forwardRef to wrapped re-exported lazy components (#3887)

packages/core/ReExports/modules.tsx

@@ -164,15 +164,16 @@ const Entries = {
 }
 
 const LazyMUICore = Object.fromEntries(
-  Object.entries(Entries).map(([key, ReactComponent]) => [
-    key,
+  Object.entries(Entries).map(([key, ReactComponent]) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (props: any) => (
+    const Component = React.forwardRef((props: any, ref) => (
       <Suspense fallback={<div />}>
-        <ReactComponent {...props} />
+        <ReactComponent {...props} ref={ref} />
       </Suspense>
-    ),
-  ]),
+    ))
+    Component.displayName = key
+    return [key, Component]
+  }),
 )
 
 const MaterialPrefixMUI = Object.fromEntries(
@@ -458,37 +459,41 @@ const DataGridEntries: Record<string, LazyExoticComponent<any>> = {
 }
 
 const LazyDataGridComponents = Object.fromEntries(
-  Object.entries(DataGridEntries).map(([key, ReactComponent]) => [
-    key,
+  Object.entries(DataGridEntries).map(([key, ReactComponent]) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (props: any) => (
+    const Component = React.forwardRef((props: any, ref) => (
       <Suspense fallback={<div />}>
-        <ReactComponent {...props} />
+        <ReactComponent {...props} ref={ref} />
       </Suspense>
-    ),
-  ]),
+    ))
+    Component.displayName = key
+    return [key, Component]
+  }),
 )
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const LazyAttributes = (props: any) => (
+const LazyAttributes = React.forwardRef((props: any, ref) => (
   <Suspense fallback={<div />}>
-    <Attributes {...props} />
+    <Attributes {...props} ref={ref} />
   </Suspense>
-)
+))
+LazyAttributes.displayName = 'Attributes'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const LazyFeatureDetails = (props: any) => (
+const LazyFeatureDetails = React.forwardRef((props: any, ref) => (
   <Suspense fallback={<div />}>
-    <FeatureDetails {...props} />
+    <FeatureDetails {...props} ref={ref} />
   </Suspense>
-)
+))
+LazyFeatureDetails.displayName = 'FeatureDetails'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const LazyBaseCard = (props: any) => (
+const LazyBaseCard = React.forwardRef((props: any, ref) => (
   <Suspense fallback={<div />}>
-    <BaseCard {...props} />
+    <BaseCard {...props} ref={ref} />
   </Suspense>
-)
+))
+LazyBaseCard.displayName = 'BaseCard'
 
 const libs = {
   mobx,
@@ -589,15 +594,15 @@ const libsList = Object.keys(libs)
 const inLibsOnly = libsList.filter(mod => !reExportsList.includes(mod))
 if (inLibsOnly.length > 0) {
   throw new Error(
-    `The following modules are in the re-exports list, but not the modules libs: ${inLibsOnly.join(
+    `The following modules are in the modules libs, but not the re-exports list: ${inLibsOnly.join(
       ', ',
     )}`,
   )
 }
 const inReExportsOnly = reExportsList.filter(mod => !libsList.includes(mod))
 if (inReExportsOnly.length) {
   throw new Error(
-    `The following modules are in the modules libs, but not the re-exports list: ${inReExportsOnly.join(
+    `The following modules are in the re-exports list, but not the modules libs: ${inReExportsOnly.join(
       ', ',
     )}`,
   )