From 10dd23a63bc8dd7db718bd298290d8e542efd8eb Mon Sep 17 00:00:00 2001
From: Dmytro Kirpa <kirpadv@gmail.com>
Date: Thu, 21 May 2026 12:34:24 +0200
Subject: [PATCH 1/2] =?UTF-8?q?Revert=20"=20refactor(react-portal):=20remo?=
 =?UTF-8?q?ve=20Griffel=20dependency=20from=20usePortalMoun=E2=80=A6"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 48ff10fe4f0fe4c1ab9999a2544d6d49740728f3.
---
 .../components/Portal/usePortalMountNode.ts   | 14 +--
 .../Portal/usePortalMountNodeStyles.styles.ts | 18 ++++
 .../Portal/usePortalMountNodeStyles.test.tsx  | 97 -------------------
 .../Portal/usePortalMountNodeStyles.ts        | 83 ----------------
 4 files changed, 26 insertions(+), 186 deletions(-)
 create mode 100644 packages/react-components/react-portal/library/src/components/Portal/usePortalMountNodeStyles.styles.ts
 delete mode 100644 packages/react-components/react-portal/library/src/components/Portal/usePortalMountNodeStyles.test.tsx
 delete mode 100644 packages/react-components/react-portal/library/src/components/Portal/usePortalMountNodeStyles.ts

diff --git a/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNode.ts b/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNode.ts
index 8c260da5b0510..f62e4184c0570 100644
--- a/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNode.ts
+++ b/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNode.ts
@@ -6,9 +6,10 @@ import {
   useFluent_unstable as useFluent,
   usePortalMountNode as usePortalMountNodeContext,
 } from '@fluentui/react-shared-contexts';
+import { mergeClasses } from '@griffel/react';
 import { useFocusVisible } from '@fluentui/react-tabster';
 
-import { usePortalMountNodeStyles } from './usePortalMountNodeStyles';
+import { usePortalMountNodeStylesStyles } from './usePortalMountNodeStyles.styles';
 
 const useInsertionEffect = (React as never)['useInsertion' + 'Effect'] as typeof React.useLayoutEffect | undefined;
 
@@ -200,14 +201,16 @@ const useModernElementFactory: UseElementFactory = options => {
       return;
     }
 
-    elementProxy.setAttribute('class', className);
+    const classesToApply = className.split(' ').filter(Boolean);
+
+    elementProxy.classList.add(...classesToApply);
     elementProxy.setAttribute('dir', dir);
     elementProxy.setAttribute('data-portal-node', 'true');
 
     focusVisibleRef.current = elementProxy;
 
     return () => {
-      elementProxy.removeAttribute('class');
+      elementProxy.classList.remove(...classesToApply);
       elementProxy.removeAttribute('dir');
     };
   }, [className, dir, elementProxy, focusVisibleRef]);
@@ -243,6 +246,7 @@ export const usePortalMountNode = (options: UsePortalMountNodeOptions): HTMLElem
 
   // eslint-disable-next-line @typescript-eslint/no-deprecated
   const focusVisibleRef = useFocusVisible<HTMLDivElement>() as React.MutableRefObject<HTMLElement | null>;
+  const classes = usePortalMountNodeStylesStyles();
   const themeClassName = useThemeClassName();
 
   const factoryOptions: UseElementFactoryOptions = {
@@ -250,11 +254,9 @@ export const usePortalMountNode = (options: UsePortalMountNodeOptions): HTMLElem
     disabled: options.disabled,
     focusVisibleRef,
 
-    className: [themeClassName, options.className].filter(Boolean).join(' '),
+    className: mergeClasses(themeClassName, classes.root, options.className),
     targetNode: mountNode ?? targetDocument?.body,
   };
 
-  usePortalMountNodeStyles(options.disabled);
-
   return useElementFactory(factoryOptions);
 };
diff --git a/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNodeStyles.styles.ts b/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNodeStyles.styles.ts
new file mode 100644
index 0000000000000..ed71de8078679
--- /dev/null
+++ b/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNodeStyles.styles.ts
@@ -0,0 +1,18 @@
+'use client';
+
+import { makeStyles } from '@griffel/react';
+
+export const usePortalMountNodeStylesStyles = makeStyles({
+  root: {
+    // Creates new stacking context to prevent z-index issues
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
+    //
+    // Also keeps a portal on top of a page to prevent scrollbars from appearing
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+
+    zIndex: 1000000,
+  },
+});
diff --git a/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNodeStyles.test.tsx b/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNodeStyles.test.tsx
deleted file mode 100644
index af3093466b518..0000000000000
--- a/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNodeStyles.test.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks';
-import { Provider_unstable as Provider } from '@fluentui/react-shared-contexts';
-import * as React from 'react';
-
-import { usePortalMountNodeStyles, PORTAL_STYLE_ELEMENT_ID, setPortalRefCount } from './usePortalMountNodeStyles';
-
-function queryStyleElement(): HTMLStyleElement | null {
-  return document.head.querySelector(`#${PORTAL_STYLE_ELEMENT_ID}`);
-}
-
-function createWrapper(targetDocument: Document | undefined) {
-  return (props: { children?: React.ReactNode }) => (
-    <Provider value={{ dir: 'ltr', targetDocument }}>{props.children}</Provider>
-  );
-}
-
-describe('usePortalMountNodeStyles', () => {
-  afterEach(() => {
-    // Clean up any leftover style elements and reset the ref count
-    queryStyleElement()?.remove();
-    setPortalRefCount(document, 0);
-  });
-
-  it('injects a <style> element into document.head when enabled', () => {
-    expect(queryStyleElement()).toBeNull();
-
-    renderHook(() => usePortalMountNodeStyles(false));
-
-    const style = queryStyleElement();
-    expect(style).not.toBeNull();
-    expect(style!.parentElement).toBe(document.head);
-  });
-
-  it('does not inject a <style> element when disabled', () => {
-    renderHook(() => usePortalMountNodeStyles(true));
-
-    expect(queryStyleElement()).toBeNull();
-  });
-
-  it('does not inject a <style> element when targetDocument is undefined', () => {
-    renderHook(() => usePortalMountNodeStyles(false), {
-      wrapper: createWrapper(undefined),
-    });
-
-    expect(queryStyleElement()).toBeNull();
-  });
-
-  it('removes the <style> element on unmount', () => {
-    const { unmount } = renderHook(() => usePortalMountNodeStyles(false));
-
-    expect(queryStyleElement()).not.toBeNull();
-
-    unmount();
-
-    expect(queryStyleElement()).toBeNull();
-  });
-
-  it('shares a single <style> element across multiple consumers', () => {
-    const hook1 = renderHook(() => usePortalMountNodeStyles(false));
-    const hook2 = renderHook(() => usePortalMountNodeStyles(false));
-
-    const allStyles = document.head.querySelectorAll(`#${PORTAL_STYLE_ELEMENT_ID}`);
-    expect(allStyles.length).toBe(1);
-
-    // Unmounting one consumer keeps the style
-    hook1.unmount();
-    expect(queryStyleElement()).not.toBeNull();
-
-    // Unmounting the last consumer removes it
-    hook2.unmount();
-    expect(queryStyleElement()).toBeNull();
-  });
-
-  it('injects the style rule via insertRule', () => {
-    renderHook(() => usePortalMountNodeStyles(false));
-
-    const style = queryStyleElement();
-    expect(style).not.toBeNull();
-    expect(style!.sheet).not.toBeNull();
-    expect(style!.sheet!.cssRules.length).toBe(1);
-    expect(style!.sheet!.cssRules[0].cssText).toContain('[data-portal-node]');
-  });
-
-  it('prepends the <style> element as the first child of head', () => {
-    // Add an existing element to head
-    const existing = document.createElement('link');
-    document.head.appendChild(existing);
-
-    renderHook(() => usePortalMountNodeStyles(false));
-
-    const style = queryStyleElement();
-    expect(style).not.toBeNull();
-    expect(document.head.firstElementChild).toBe(style);
-
-    existing.remove();
-  });
-});
diff --git a/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNodeStyles.ts b/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNodeStyles.ts
deleted file mode 100644
index 7256490292476..0000000000000
--- a/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNodeStyles.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
-
-// String concatenation is used to prevent bundlers to complain with older versions of React
-const useInsertionEffect = (React as never)['useInsertion' + 'Effect']
-  ? (React as never)['useInsertion' + 'Effect']
-  : useIsomorphicLayoutEffect;
-
-// Symbol used as a "private" property key on Document to store the active portal reference count.
-// Symbol.for() registers in the global Symbol registry so the same key is shared across bundles
-// (e.g. when multiple copies of this module are loaded in the same page).
-// Storing state directly on the document avoids any WeakMap cross-reference issues and is safe
-// across multiple documents (e.g. iframes) because each document object carries its own counter.
-const PORTAL_STYLE_REF_COUNT = Symbol.for('fui-portal-style-ref-count');
-
-type DocumentWithPortalCounter = Document & { [PORTAL_STYLE_REF_COUNT]?: number };
-
-// Creates new stacking context to prevent z-index issues
-// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
-//
-// Also keeps a portal on top of a page to prevent scrollbars from appearing
-const PORTAL_MOUNT_NODE_STYLE_RULE = `[data-portal-node]{position:absolute;top:0;left:0;right:0;z-index:1000000}`;
-
-// ID used to identify the injected portal mount node <style> element in a document.
-// Only one such element exists per document, so an id is appropriate.
-export const PORTAL_STYLE_ELEMENT_ID = 'fui-portal-styles';
-
-export function getPortalRefCount(targetDocument: Document): number {
-  return (targetDocument as DocumentWithPortalCounter)[PORTAL_STYLE_REF_COUNT] ?? 0;
-}
-
-export function setPortalRefCount(targetDocument: Document, count: number): void {
-  (targetDocument as DocumentWithPortalCounter)[PORTAL_STYLE_REF_COUNT] = count;
-}
-
-function injectPortalMountNodeStyles(targetDocument: Document): void {
-  const currentCount = getPortalRefCount(targetDocument);
-  if (currentCount > 0) {
-    setPortalRefCount(targetDocument, currentCount + 1);
-    return;
-  }
-  const style = targetDocument.createElement('style');
-  style.id = PORTAL_STYLE_ELEMENT_ID;
-  // Prepend so that consumer class names (applied later in document order) can override these
-  // defaults via CSS source order at equal specificity — the same cascade behaviour as before.
-  // Both prepend and append trigger one style recalculation; position in <head> does not change
-  // the number of recalcs.
-  targetDocument.head.prepend(style);
-  // sheet is available after the element is inserted into the document
-  style.sheet?.insertRule(PORTAL_MOUNT_NODE_STYLE_RULE);
-  setPortalRefCount(targetDocument, 1);
-}
-
-function ejectPortalMountNodeStyles(targetDocument: Document): void {
-  const currentCount = getPortalRefCount(targetDocument);
-  if (currentCount === 0) {
-    return;
-  }
-  const newCount = currentCount - 1;
-  if (newCount === 0) {
-    targetDocument.head.querySelector(`#${PORTAL_STYLE_ELEMENT_ID}`)?.remove();
-  }
-  setPortalRefCount(targetDocument, newCount);
-}
-
-/**
- * Injects a shared <style> element for portal mount node styling into the target document,
- * and removes it when the last consumer unmounts (reference counted via a Symbol property on `document`).
- */
-export function usePortalMountNodeStyles(disabled: boolean | undefined): void {
-  const { targetDocument } = useFluent();
-
-  useInsertionEffect!(() => {
-    if (disabled || !targetDocument) {
-      return;
-    }
-    injectPortalMountNodeStyles(targetDocument);
-    return () => ejectPortalMountNodeStyles(targetDocument);
-  }, [disabled, targetDocument]);
-}

From 3d3b408d71bfc257f6bd5f2ef7b565e0638cbe4d Mon Sep 17 00:00:00 2001
From: Dmytro Kirpa <dmytrokirpa@microsoft.com>
Date: Thu, 21 May 2026 13:37:19 +0200
Subject: [PATCH 2/2] changefile

---
 ...-react-portal-aa25b18c-fd1c-479e-a98c-f045187327b7.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-portal-aa25b18c-fd1c-479e-a98c-f045187327b7.json

diff --git a/change/@fluentui-react-portal-aa25b18c-fd1c-479e-a98c-f045187327b7.json b/change/@fluentui-react-portal-aa25b18c-fd1c-479e-a98c-f045187327b7.json
new file mode 100644
index 0000000000000..4b214bb0b7ff3
--- /dev/null
+++ b/change/@fluentui-react-portal-aa25b18c-fd1c-479e-a98c-f045187327b7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "revert: revert removal of Griffel dependency from usePortalMount #35994",
+  "packageName": "@fluentui/react-portal",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}