chore: add "data-portal-node" attr in usePortalMountNode() (microsoft…

…#31002)

change/@fluentui-react-portal-7081febf-e493-416b-86c8-63477148649e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: add \"data-portal-node\" attr in usePortalMountNode()",
+  "packageName": "@fluentui/react-portal",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-portal/src/components/Portal/__snapshots__/Portal.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`Portal renders a default state 1`] = `
 <div
   class=""
+  data-portal-node="true"
   dir="ltr"
 >
   test

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

@@ -9,6 +9,7 @@ describe('usePortalMountNode', () => {
     const { result } = renderHook(() => usePortalMountNode({}));
 
     expect(result.current).toBeInstanceOf(HTMLDivElement);
+    expect(result.current).toHaveAttribute('data-portal-node', 'true');
     expect(document.body.contains(result.current)).toBeTruthy();
   });
 

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

@@ -56,6 +56,8 @@ export const usePortalMountNode = (options: UsePortalMountNodeOptions): HTMLElem
 
       element.classList.add(...classesToApply);
       element.setAttribute('dir', dir);
+      element.setAttribute('data-portal-node', 'true');
+
       focusVisibleRef.current = element;
 
       return () => {
@@ -77,6 +79,8 @@ export const usePortalMountNode = (options: UsePortalMountNodeOptions): HTMLElem
       // Force replace all classes
       element.className = className;
       element.setAttribute('dir', dir);
+      element.setAttribute('data-portal-node', 'true');
+
       focusVisibleRef.current = element;
     }, [className, dir, element, focusVisibleRef]);
   }

packages/react-components/react-portal/stories/Portal/PortalDescription.md

@@ -1,6 +1,3 @@
-A portal renders content outside of a DOM tree, at the end of the document.
+A portal renders content outside of a DOM tree, at the end of the document. This allows content to escape traditional boundaries caused by `"overflow: hidden"` CSS rules and keeps it on the top without using `z-index` rules. This is useful for example in `Menu` and `Tooltip` scenarios, where the content should always overlay everything else.
 
-This allows content to escape traditional boundaries caused by "overflow: hidden" CSS rules and keeps it on the top without using z-index rules.
-This is useful for example in Menu and Tooltip scenarios, where the content should always overlay everything else.
-
-`Portal` component is a thin wrapper around React's [`ReactDOM.createPortal()`](https://reactjs.org/docs/portals.html).
+`Portal` component is a thin wrapper around React's [`ReactDOM.createPortal()`](https://reactjs.org/docs/portals.html) that propagates Fluent styling (allows to use `tokens`) and text-direction handling to the content. You can identify DOM created by `Portal` by looking for the `data-portal-node` attribute.