From 1c450983aa2c95ca852457bd26c772ce83080523 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A1n=20J=C4=ABn?= Date: Fri, 14 Apr 2023 10:07:02 -0700 Subject: [PATCH 1/2] Fix `@fluentui/react-portal-compat`: to be compatible with React 18 --- .../src/PortalCompatProvider.test.tsx | 18 ++++++++++++++++++ .../src/PortalCompatProvider.tsx | 2 +- 2 files changed, 19 insertions(+), 1 deletion(-) 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 => ( + + {props.children} + + ), + }); + + 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; From add00933b0147e4a02075f4e7a5bff23d63681c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A1n=20J=C4=ABn?= Date: Fri, 14 Apr 2023 10:11:51 -0700 Subject: [PATCH 2/2] add change --- ...portal-compat-87118ffd-bb5d-48aa-bcb7-18b23d015706.json | 7 +++++++ 1 file changed, 7 insertions(+) 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" +}