[core] Refactor system theme props (#43120)

Co-authored-by: mnajdova <[email protected]>

Author: romgrk

packages/mui-system/src/useThemeProps/useThemeProps.js

@@ -7,6 +7,5 @@ export default function useThemeProps({ props, name, defaultTheme, themeId }) {
   if (themeId) {
     theme = theme[themeId] || theme;
   }
-  const mergedProps = getThemeProps({ theme, name, props });
-  return mergedProps;
+  return getThemeProps({ theme, name, props });
 }

packages/mui-utils/src/resolveProps/resolveProps.ts

@@ -1,8 +1,8 @@
 /**
  * Add keys, values of `defaultProps` that does not exist in `props`
- * @param {object} defaultProps
- * @param {object} props
- * @returns {object} resolved props
+ * @param defaultProps
+ * @param props
+ * @returns resolved props
  */
 export default function resolveProps<
   T extends {
@@ -14,36 +14,41 @@ export default function resolveProps<
 >(defaultProps: T, props: T) {
   const output = { ...props };
 
-  (Object.keys(defaultProps) as Array<keyof T>).forEach((propName) => {
-    if (propName.toString().match(/^(components|slots)$/)) {
-      output[propName] = {
-        ...(defaultProps[propName] as any),
-        ...(output[propName] as any),
-      };
-    } else if (propName.toString().match(/^(componentsProps|slotProps)$/)) {
-      const defaultSlotProps = (defaultProps[propName] || {}) as T[keyof T];
-      const slotProps = props[propName] as {} as T[keyof T];
-      output[propName] = {} as T[keyof T];
+  for (const key in defaultProps) {
+    if (Object.prototype.hasOwnProperty.call(defaultProps, key)) {
+      const propName = key as keyof T;
 
-      if (!slotProps || !Object.keys(slotProps)) {
-        // Reduce the iteration if the slot props is empty
-        output[propName] = defaultSlotProps;
-      } else if (!defaultSlotProps || !Object.keys(defaultSlotProps)) {
-        // Reduce the iteration if the default slot props is empty
-        output[propName] = slotProps;
-      } else {
-        output[propName] = { ...slotProps };
-        Object.keys(defaultSlotProps).forEach((slotPropName) => {
-          (output[propName] as Record<string, unknown>)[slotPropName] = resolveProps(
-            (defaultSlotProps as Record<string, any>)[slotPropName],
-            (slotProps as Record<string, any>)[slotPropName],
-          );
-        });
+      if (propName === 'components' || propName === 'slots') {
+        output[propName] = {
+          ...(defaultProps[propName] as any),
+          ...(output[propName] as any),
+        };
+      } else if (propName === 'componentsProps' || propName === 'slotProps') {
+        const defaultSlotProps = defaultProps[propName] as T[keyof T] | undefined;
+        const slotProps = props[propName] as {} as T[keyof T] | undefined;
+
+        if (!slotProps) {
+          output[propName] = defaultSlotProps || ({} as T[keyof T]);
+        } else if (!defaultSlotProps) {
+          output[propName] = slotProps;
+        } else {
+          output[propName] = { ...slotProps };
+
+          for (const slotKey in defaultSlotProps) {
+            if (Object.prototype.hasOwnProperty.call(defaultSlotProps, slotKey)) {
+              const slotPropName = slotKey;
+              (output[propName] as Record<string, unknown>)[slotPropName] = resolveProps(
+                (defaultSlotProps as Record<string, any>)[slotPropName],
+                (slotProps as Record<string, any>)[slotPropName],
+              );
+            }
+          }
+        }
+      } else if (output[propName] === undefined) {
+        output[propName] = defaultProps[propName];
       }
-    } else if (output[propName] === undefined) {
-      output[propName] = defaultProps[propName];
     }
-  });
+  }
 
   return output;
 }