fix(emptyTheme): avoid theme object mutation

packages/react/src/lib/createEmptyTheme.ts

@@ -0,0 +1,15 @@
+import { ThemePrepared } from '../themes/types'
+
+const createEmptyTheme = (): ThemePrepared => ({
+  siteVariables: {
+    fontSizes: {},
+  },
+  componentVariables: {},
+  componentStyles: {},
+  fontFaces: [],
+  staticStyles: [],
+  icons: {},
+  animations: {},
+})
+
+export default createEmptyTheme

packages/react/src/lib/mergeThemes.ts

@@ -19,21 +19,10 @@ import {
   ThemeAnimation,
 } from '../themes/types'
 import callable from './callable'
+import createEmptyTheme from './createEmptyTheme'
 import toCompactArray from './toCompactArray'
 import { ObjectOf } from '../types'
 
-export const emptyTheme: ThemePrepared = {
-  siteVariables: {
-    fontSizes: {},
-  },
-  componentVariables: {},
-  componentStyles: {},
-  fontFaces: [],
-  staticStyles: [],
-  icons: {},
-  animations: {},
-}
-
 // ----------------------------------------
 // Component level merge functions
 // ----------------------------------------
@@ -189,30 +178,26 @@ export const mergeStyles = (...sources: ComponentSlotStyle[]) => {
 }
 
 const mergeThemes = (...themes: ThemeInput[]): ThemePrepared => {
-  return themes.reduce<ThemePrepared>(
-    (acc: ThemePrepared, next: ThemeInput) => {
-      if (!next) return acc
+  return themes.reduce<ThemePrepared>((acc: ThemePrepared, next: ThemeInput) => {
+    if (!next) return acc
 
-      acc.siteVariables = mergeSiteVariables(acc.siteVariables, next.siteVariables)
+    acc.siteVariables = mergeSiteVariables(acc.siteVariables, next.siteVariables)
 
-      acc.componentVariables = mergeThemeVariables(acc.componentVariables, next.componentVariables)
+    acc.componentVariables = mergeThemeVariables(acc.componentVariables, next.componentVariables)
 
-      acc.componentStyles = mergeThemeStyles(acc.componentStyles, next.componentStyles)
+    acc.componentStyles = mergeThemeStyles(acc.componentStyles, next.componentStyles)
 
-      // Merge icons set, last one wins in case of collisions
-      acc.icons = mergeIcons(acc.icons, next.icons)
+    // Merge icons set, last one wins in case of collisions
+    acc.icons = mergeIcons(acc.icons, next.icons)
 
-      acc.fontFaces = mergeFontFaces(...acc.fontFaces, ...(next.fontFaces || []))
+    acc.fontFaces = mergeFontFaces(...acc.fontFaces, ...(next.fontFaces || []))
 
-      acc.staticStyles = mergeStaticStyles(...acc.staticStyles, ...(next.staticStyles || []))
+    acc.staticStyles = mergeStaticStyles(...acc.staticStyles, ...(next.staticStyles || []))
 
-      acc.animations = mergeAnimations(acc.animations, next.animations)
+    acc.animations = mergeAnimations(acc.animations, next.animations)
 
-      return acc
-    },
-    // .reduce() will modify "emptyTheme" object, so we should clone it before actual usage
-    { ...emptyTheme },
-  )
+    return acc
+  }, createEmptyTheme())
 }
 
 export default mergeThemes

packages/react/src/lib/renderComponent.tsx

@@ -26,7 +26,8 @@ import {
 } from './accessibility/types'
 import { ReactAccessibilityBehavior, AccessibilityActionHandlers } from './accessibility/reactTypes'
 import getKeyDownHandlers from './getKeyDownHandlers'
-import { emptyTheme, mergeComponentStyles, mergeComponentVariables } from './mergeThemes'
+import createEmptyTheme from './createEmptyTheme'
+import { mergeComponentStyles, mergeComponentVariables } from './mergeThemes'
 import { FocusZoneProps, FocusZone } from './accessibility/FocusZone'
 import { FOCUSZONE_WRAP_ATTRIBUTE } from './accessibility/FocusZone/focusUtilities'
 import createAnimationStyles from './createAnimationStyles'
@@ -160,7 +161,7 @@ const renderComponent = <P extends {}>(
     logProviderMissingWarning()
   }
 
-  const { disableAnimations = false, renderer = null, rtl = false, theme = emptyTheme } =
+  const { disableAnimations = false, renderer = null, rtl = false, theme = createEmptyTheme() } =
     context || {}
 
   const ElementType = getElementType({ defaultProps }, props) as React.ReactType<P>