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

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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');
 

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;