Revert "chore(react-portal): support for React 19" (#34737)

Author: layershifter

change/@fluentui-react-portal-72ebd77a-dbaa-4ff9-8792-58a6b8526378.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Revert \"chore(react-portal): support for React 19\"",
+  "packageName": "@fluentui/react-portal",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-portal/library/package.json

@@ -22,7 +22,8 @@
     "@fluentui/react-tabster": "^9.25.3",
     "@fluentui/react-utilities": "^9.22.0",
     "@griffel/react": "^1.5.22",
-    "@swc/helpers": "^0.5.1"
+    "@swc/helpers": "^0.5.1",
+    "use-disposable": "^1.0.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0 <19.0.0",

packages/react-components/react-portal/library/src/components/Portal/usePortal.ts

@@ -80,7 +80,7 @@ export const usePortal_unstable = (props: PortalProps): PortalState => {
         setVirtualParent(mountNode, undefined);
       };
     }
-  }, [mountNode]);
+  }, [virtualParentRootRef, mountNode]);
 
   return state;
 };

packages/react-components/react-portal/library/src/components/Portal/usePortalMountNode.test.tsx

@@ -8,9 +8,9 @@ describe('usePortalMountNode', () => {
   it('creates an element and attaches it to "document.body"', () => {
     const { result } = renderHook(() => usePortalMountNode({}));
 
-    expect(result.current?.tagName).toBe('DIV');
-    expect(result.current?.dataset.portalNode).toBe('true');
-    expect(result.current?.parentElement).toBe(document.body);
+    expect(result.current).toBeInstanceOf(HTMLDivElement);
+    expect(result.current).toHaveAttribute('data-portal-node', 'true');
+    expect(document.body.contains(result.current)).toBeTruthy();
   });
 
   it('creates an element and attaches it to "mountNode"', () => {
@@ -19,9 +19,8 @@ describe('usePortalMountNode', () => {
       wrapper: (props: { children?: React.ReactNode }) => <PortalMountNodeProvider {...props} value={mountNode} />,
     });
 
-    expect(result.current?.tagName).toBe('DIV');
-    expect(result.current?.dataset.portalNode).toBe('true');
-    expect(result.current?.parentElement).toBe(mountNode);
+    expect(result.current).toBeInstanceOf(HTMLDivElement);
+    expect(mountNode.contains(result.current)).toBeTruthy();
   });
 
   it('applies classes to an element', () => {

packages/react-components/react-portal/library/src/components/Portal/usePortalMountNode.ts

@@ -6,6 +6,7 @@ import {
 } from '@fluentui/react-shared-contexts';
 import { mergeClasses } from '@griffel/react';
 import { useFocusVisible } from '@fluentui/react-tabster';
+import { useDisposable } from 'use-disposable';
 
 import { usePortalMountNodeStylesStyles } from './usePortalMountNodeStyles.styles';
 
@@ -20,180 +21,6 @@ export type UsePortalMountNodeOptions = {
   className?: string;
 };
 
-type UseElementFactoryOptions = {
-  className: string;
-  dir: string;
-  disabled: boolean | undefined;
-  focusVisibleRef: React.MutableRefObject<HTMLElement | null>;
-  targetNode: HTMLElement | ShadowRoot | undefined;
-};
-type UseElementFactory = (options: UseElementFactoryOptions) => HTMLDivElement | null;
-
-/**
- * Legacy element factory for React 17 and below. It's not safe for concurrent rendering.
- *
- * Creates a new element on a "document.body" to mount portals.
- */
-const useLegacyElementFactory: UseElementFactory = options => {
-  const { className, dir, focusVisibleRef, targetNode } = options;
-
-  const targetElement = React.useMemo(() => {
-    if (targetNode === undefined || options.disabled) {
-      return null;
-    }
-
-    const element = targetNode.ownerDocument.createElement('div');
-    targetNode.appendChild(element);
-
-    return element;
-  }, [targetNode, options.disabled]);
-
-  // Heads up!
-  // This useMemo() call is intentional for React 17 & below.
-  //
-  // We don't want to re-create the portal element when its attributes change. This also cannot not be done in an effect
-  // because, changing the value of CSS variables after an initial mount will trigger interesting CSS side effects like
-  // transitions.
-  React.useMemo(() => {
-    if (!targetElement) {
-      return;
-    }
-
-    targetElement.className = className;
-    targetElement.setAttribute('dir', dir);
-    targetElement.setAttribute('data-portal-node', 'true');
-
-    // eslint-disable-next-line react-compiler/react-compiler
-    focusVisibleRef.current = targetElement;
-  }, [className, dir, targetElement, focusVisibleRef]);
-
-  React.useEffect(() => {
-    return () => {
-      targetElement?.remove();
-    };
-  }, [targetElement]);
-
-  return targetElement;
-};
-
-/**
- * This is a modern element factory for React 18 and above. It is safe for concurrent rendering.
- *
- * It abuses the fact that React will mount DOM once (unlike hooks), so by using a proxy we can intercept:
- * - the `remove()` method (we call it in `useEffect()`) and remove the element only when the portal is unmounted
- * - all other methods (and properties) will be called by React once a portal is mounted
- */
-const useModernElementFactory: UseElementFactory = options => {
-  const { className, dir, focusVisibleRef, targetNode } = options;
-
-  const [elementFactory] = React.useState(() => {
-    let currentElement: HTMLDivElement | undefined = undefined;
-
-    function get(targetRoot: HTMLElement | ShadowRoot, forceCreation: false): HTMLDivElement | undefined;
-    function get(targetRoot: HTMLElement | ShadowRoot, forceCreation: true): HTMLDivElement;
-    function get(targetRoot: HTMLElement | ShadowRoot, forceCreation: boolean): HTMLDivElement | undefined {
-      if (currentElement) {
-        return currentElement;
-      }
-
-      if (forceCreation) {
-        currentElement = targetRoot.ownerDocument.createElement('div');
-        targetRoot.appendChild(currentElement);
-      }
-
-      return currentElement;
-    }
-
-    function dispose() {
-      if (currentElement) {
-        currentElement.remove();
-        currentElement = undefined;
-      }
-    }
-
-    return {
-      get,
-      dispose,
-    };
-  });
-
-  const elementProxy = React.useMemo(() => {
-    if (targetNode === undefined || options.disabled) {
-      return null;
-    }
-
-    return new Proxy({} as HTMLDivElement, {
-      get(_, property: keyof HTMLDivElement) {
-        // Heads up!
-        // We intercept the `remove()` method to remove the mount node only when portal has been unmounted already.
-        if (property === 'remove') {
-          const targetElement = elementFactory.get(targetNode, false);
-
-          if (targetElement) {
-            // If the mountElement has children, the portal is still mounted
-            const portalHasNoChildren = targetElement.childNodes.length === 0;
-
-            if (portalHasNoChildren) {
-              return targetElement.remove.bind(targetElement);
-            }
-          }
-
-          return () => {
-            // If the mountElement has children, ignore the remove call
-          };
-        }
-
-        const targetElement = elementFactory.get(targetNode, true);
-        const targetProperty = targetElement[property];
-
-        if (typeof targetProperty === 'function') {
-          return targetProperty.bind(targetElement);
-        }
-
-        return targetProperty;
-      },
-
-      set(_, property: keyof HTMLDivElement, value) {
-        const targetElement = elementFactory.get(targetNode, true);
-
-        if (targetElement) {
-          Object.assign(targetElement, { [property]: value });
-          return true;
-        }
-
-        return false;
-      },
-    });
-  }, [elementFactory, targetNode, options.disabled]);
-
-  React.useEffect(() => {
-    return () => {
-      elementProxy?.remove();
-    };
-  }, [elementProxy]);
-
-  useInsertionEffect!(() => {
-    if (!elementProxy) {
-      return;
-    }
-
-    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.classList.remove(...classesToApply);
-      elementProxy.removeAttribute('dir');
-    };
-  }, [className, dir, elementProxy, focusVisibleRef]);
-
-  return elementProxy;
-};
-
 /**
  * Creates a new element on a "document.body" to mount portals.
  */
@@ -207,20 +34,58 @@ export const usePortalMountNode = (options: UsePortalMountNodeOptions): HTMLElem
   const classes = usePortalMountNodeStylesStyles();
   const themeClassName = useThemeClassName();
 
-  const factoryOptions: UseElementFactoryOptions = {
-    dir,
-    disabled: options.disabled,
-    focusVisibleRef,
+  const className = mergeClasses(themeClassName, classes.root, options.className);
+  const targetNode: HTMLElement | ShadowRoot | undefined = mountNode ?? targetDocument?.body;
+
+  const element = useDisposable(() => {
+    if (targetNode === undefined || options.disabled) {
+      return [null, () => null];
+    }
 
-    className: mergeClasses(themeClassName, classes.root, options.className),
-    targetNode: mountNode ?? targetDocument?.body,
-  };
+    const newElement = targetNode.ownerDocument.createElement('div');
+    targetNode.appendChild(newElement);
+    return [newElement, () => newElement.remove()];
+  }, [targetNode]);
 
   if (useInsertionEffect) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useModernElementFactory(factoryOptions);
+    useInsertionEffect(() => {
+      if (!element) {
+        return;
+      }
+
+      const classesToApply = className.split(' ').filter(Boolean);
+
+      element.classList.add(...classesToApply);
+      element.setAttribute('dir', dir);
+      element.setAttribute('data-portal-node', 'true');
+
+      focusVisibleRef.current = element;
+
+      return () => {
+        element.classList.remove(...classesToApply);
+        element.removeAttribute('dir');
+      };
+    }, [className, dir, element, focusVisibleRef]);
+  } else {
+    // This useMemo call is intentional for React 17
+    // We don't want to re-create the portal element when its attributes change.
+    // This also should not be done in an effect because, changing the value of css variables
+    // after initial mount can trigger interesting CSS side effects like transitions.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useMemo(() => {
+      if (!element) {
+        return;
+      }
+
+      // Force replace all classes
+      element.className = className;
+      element.setAttribute('dir', dir);
+      element.setAttribute('data-portal-node', 'true');
+
+      focusVisibleRef.current = element;
+    }, [className, dir, element, focusVisibleRef]);
   }
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  return useLegacyElementFactory(factoryOptions);
+  return element;
 };

yarn.lock

@@ -23374,6 +23374,11 @@ use-callback-ref@^1.3.0:
   dependencies:
     tslib "^2.0.0"
 
+use-disposable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/use-disposable/-/use-disposable-1.0.1.tgz#12452ec6d41f88bf84d41792def63c9e9921fc43"
+  integrity sha512-5Sle1XEmK3lw3xyGqeIY7UKkiUgF+TxwUty7fTsqM5D5AxfQfo2ft+LY9xKCA+W5YbaBFbOkWfQsZY/y5JhInA==
+
 use-immer@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/use-immer/-/use-immer-0.6.0.tgz#ca6aa5ade93018e2c65cf128d19ada54fc23f70d"