From 07eed1fccb84cabef62c078a51dbb795a2d30a63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Petr=20Jaro=C5=A1?= <petrjaros@microsoft.com>
Date: Wed, 14 Sep 2022 10:03:45 +0200
Subject: [PATCH 1/3] [Northstar][Dropdown] Fix styling mutation when merging
 themes

---
 .../teams/components/Dropdown/dropdownStyles.ts      | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownStyles.ts
index 014133cd89ef1..a5d6f10501d57 100644
--- a/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownStyles.ts
+++ b/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownStyles.ts
@@ -10,7 +10,7 @@ const transparentColorStyle: ICSSInJSStyle = {
   borderBottomColor: 'transparent',
 };
 
-const transparentColorStyleObj: ICSSInJSStyle = {
+const createTransparentColorStyleObj = (): ICSSInJSStyle => ({
   ...transparentColorStyle,
   ':hover': transparentColorStyle,
   ':active': transparentColorStyle,
@@ -18,7 +18,7 @@ const transparentColorStyleObj: ICSSInJSStyle = {
     ...transparentColorStyle,
     ':active': transparentColorStyle,
   },
-};
+});
 
 const getWidth = (p: DropdownStylesProps, v: DropdownVariables): string => {
   if (p.fluid) {
@@ -99,7 +99,7 @@ export const dropdownStyles: ComponentSlotStylesPrepared<DropdownStylesProps, Dr
         getBorderFocusStyles({ variables: siteVariables })[':focus-visible']),
     }),
     ...(p.inline && {
-      ...transparentColorStyleObj,
+      ...createTransparentColorStyleObj(),
       alignItems: 'center',
     }),
     ...(p.inverted && {
@@ -156,7 +156,7 @@ export const dropdownStyles: ComponentSlotStylesPrepared<DropdownStylesProps, Dr
       overflow: 'hidden',
       boxShadow: 'none',
       minHeight: pxToRem(32),
-      ...transparentColorStyleObj,
+      ...createTransparentColorStyleObj(),
       margin: '0',
       justifyContent: 'left',
       padding: v.comboboxPaddingButton,
@@ -172,10 +172,10 @@ export const dropdownStyles: ComponentSlotStylesPrepared<DropdownStylesProps, Dr
           height: '100%',
         }),
       }),
-      ...transparentColorStyleObj,
+      ...createTransparentColorStyleObj(),
       ':focus': {
         color: v.color,
-        ...transparentColorStyleObj,
+        ...createTransparentColorStyleObj(),
       },
       ':focus-visible': {
         color: v.color,

From a1f8f880711227d355382bc9931805018a4d2ce8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Petr=20Jaro=C5=A1?= <petrjaros@microsoft.com>
Date: Wed, 14 Sep 2022 10:16:25 +0200
Subject: [PATCH 2/3] fix

---
 .../src/themes/teams/components/Dropdown/dropdownStyles.ts  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownStyles.ts
index a5d6f10501d57..8e3d18807fe52 100644
--- a/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownStyles.ts
+++ b/packages/fluentui/react-northstar/src/themes/teams/components/Dropdown/dropdownStyles.ts
@@ -12,11 +12,11 @@ const transparentColorStyle: ICSSInJSStyle = {
 
 const createTransparentColorStyleObj = (): ICSSInJSStyle => ({
   ...transparentColorStyle,
-  ':hover': transparentColorStyle,
-  ':active': transparentColorStyle,
+  ':hover': { ...transparentColorStyle },
+  ':active': { ...transparentColorStyle },
   ':focus': {
     ...transparentColorStyle,
-    ':active': transparentColorStyle,
+    ':active': { ...transparentColorStyle },
   },
 });
 

From 97c53a8c8987d09b44a6729fb43bbbcc1aa2f227 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Date: Thu, 15 Sep 2022 11:43:46 +0200
Subject: [PATCH 3/3] Update CHANGELOG.md

---
 packages/fluentui/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
index 2e1f47aa26a5f..e74a4e16beb1c 100644
--- a/packages/fluentui/CHANGELOG.md
+++ b/packages/fluentui/CHANGELOG.md
@@ -28,6 +28,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Remove `rotate(360deg)` from `PopupContent` content styles @yuanboxue-amber ([#24432](https://github.com/microsoft/fluentui/pull/24432))
 - Fix `FocusZone` to reset tabindex when focus is outside the zone with prop `shouldResetActiveElementWhenTabFromZone` @yuanboxue-amber ([#24463](https://github.com/microsoft/fluentui/pull/24463))
 - Change `useLayoutEffect` in `Dropdown` to `useIsomorphicLayoutEffect` @marwan38 ([#24559](https://github.com/microsoft/fluentui/pull/24559))
+- Fix styling mutation when merging themes in `Dropdown` @petrjaros ([#24787](https://github.com/microsoft/fluentui/pull/24787))
 
 ### Performance
 - Avoid memory trashing in `felaExpandCssShorthandsPlugin` @layershifter ([#24663](https://github.com/microsoft/fluentui/pull/24663))