From 51767fd6bcd9fedcfe6e4b4735fdf13a1f1174bb Mon Sep 17 00:00:00 2001
From: Eana Hufwe <eana@1a23.com>
Date: Mon, 24 Apr 2023 05:38:14 -0700
Subject: [PATCH] Fix `@fluentui/react-portal-compat`: to be compatible with
 React 18 (#27577)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix `@fluentui/react-portal-compat`: to be compatible with React 18

* add change

---------

Co-authored-by: Hán Jīn <hanj@microsoft.com>
Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
---
 ...t-87118ffd-bb5d-48aa-bcb7-18b23d015706.json |  7 +++++++
 .../src/PortalCompatProvider.test.tsx          | 18 ++++++++++++++++++
 .../src/PortalCompatProvider.tsx               |  2 +-
 3 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 change/@fluentui-react-portal-compat-87118ffd-bb5d-48aa-bcb7-18b23d015706.json

diff --git a/change/@fluentui-react-portal-compat-87118ffd-bb5d-48aa-bcb7-18b23d015706.json b/change/@fluentui-react-portal-compat-87118ffd-bb5d-48aa-bcb7-18b23d015706.json
new file mode 100644
index 00000000000000..688aa403694cd5
--- /dev/null
+++ b/change/@fluentui-react-portal-compat-87118ffd-bb5d-48aa-bcb7-18b23d015706.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Class ID detection compatible with React 18",
+  "packageName": "@fluentui/react-portal-compat",
+  "email": "hanj@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-portal-compat/src/PortalCompatProvider.test.tsx b/packages/react-components/react-portal-compat/src/PortalCompatProvider.test.tsx
index c9f7c5e2d6fa60..1f81af86cc1657 100644
--- a/packages/react-components/react-portal-compat/src/PortalCompatProvider.test.tsx
+++ b/packages/react-components/react-portal-compat/src/PortalCompatProvider.test.tsx
@@ -41,6 +41,24 @@ describe('PortalCompatProvider', () => {
     `);
   });
 
+  it('during register adds a className from "ThemeClassNameContext" context with a React 18 compatible ID', () => {
+    const element = document.createElement('div');
+    const { result } = renderHook(() => usePortalCompat(), {
+      wrapper: props => (
+        <ThemeClassNameProvider value="fui-FluentProviderR1a">
+          <PortalCompatProvider>{props.children}</PortalCompatProvider>
+        </ThemeClassNameProvider>
+      ),
+    });
+
+    expect(result.current(element)).toBeInstanceOf(Function);
+    expect(element.classList).toMatchInlineSnapshot(`
+      DOMTokenList {
+        "0": "fui-FluentProviderR1a",
+      }
+    `);
+  });
+
   it('during unregister remove a className from "ThemeClassNameContext" context', () => {
     const element = document.createElement('div');
 
diff --git a/packages/react-components/react-portal-compat/src/PortalCompatProvider.tsx b/packages/react-components/react-portal-compat/src/PortalCompatProvider.tsx
index f41b3901e2de1d..c6a85ffce88eab 100644
--- a/packages/react-components/react-portal-compat/src/PortalCompatProvider.tsx
+++ b/packages/react-components/react-portal-compat/src/PortalCompatProvider.tsx
@@ -5,7 +5,7 @@ import { applyFocusVisiblePolyfill } from '@fluentui/react-tabster';
 
 import type { RegisterPortalFn } from '@fluentui/react-portal-compat-context';
 
-const CLASS_NAME_REGEX = new RegExp(`(${fluentProviderClassNames.root}\\d+)`);
+const CLASS_NAME_REGEX = new RegExp(`(${fluentProviderClassNames.root}\\w+)`);
 
 export const PortalCompatProvider: React.FC<{ children?: React.ReactNode }> = props => {
   const { children } = props;