feat(react-drawer): add support for mountNode with className

change/@fluentui-react-drawer-f26a20ea-8196-4280-adda-bbfb8ed23c93.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add support for mountNode with className",
+  "packageName": "@fluentui/react-drawer",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-drawer/library/etc/react-drawer.api.md

@@ -171,7 +171,9 @@ export type OverlayDrawerSlots = {
 };
 
 // @public
-export type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> & Required<DrawerBaseState> & Pick<OverlayDrawerProps, 'mountNode'>;
+export type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> & Required<DrawerBaseState> & Pick<OverlayDrawerProps, 'mountNode'> & {
+    hasMountNodeElement?: boolean;
+};
 
 // @public
 export const renderDrawer_unstable: (state: DrawerState, contextValue: DrawerContextValue) => JSX.Element;

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

@@ -23,6 +23,7 @@
     "@fluentui/react-dialog": "^9.11.18",
     "@fluentui/react-jsx-runtime": "^9.0.45",
     "@fluentui/react-motion": "^9.6.0",
+    "@fluentui/react-portal": "^9.4.37",
     "@fluentui/react-shared-contexts": "^9.20.2",
     "@fluentui/react-tabster": "^9.22.9",
     "@fluentui/react-theme": "^9.1.21",

packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.test.tsx

@@ -52,4 +52,20 @@ describe('OverlayDrawer', () => {
     const result = mountNode.querySelector('#drawer');
     expect(result).toBeTruthy();
   });
+
+  it('accept mountNode as object with className', () => {
+    const customClassName = 'CustomMountNode';
+
+    const { baseElement } = render(
+      <OverlayDrawer id="drawer" mountNode={{ className: customClassName }} open={true}>
+        Default OverlayDrawer
+      </OverlayDrawer>,
+    );
+
+    const mountNodeElement = baseElement.querySelector(`.${customClassName}`);
+    const drawerInsideMountNode = mountNodeElement?.querySelector('#drawer');
+
+    expect(mountNodeElement).toBeTruthy();
+    expect(drawerInsideMountNode).toBeTruthy();
+  });
 });

packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.types.ts

@@ -54,4 +54,6 @@ export type OverlayDrawerProps = ComponentProps<OverlayDrawerSlots> &
  */
 export type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> &
   Required<DrawerBaseState> &
-  Pick<OverlayDrawerProps, 'mountNode'>;
+  Pick<OverlayDrawerProps, 'mountNode'> & {
+    hasMountNodeElement?: boolean;
+  };

packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawer.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Dialog } from '@fluentui/react-dialog';
 import { slot } from '@fluentui/react-utilities';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { toMountNodeProps } from '@fluentui/react-portal';
 
 import { OverlayDrawerMotion, OverlaySurfaceBackdropMotion } from '../../shared/drawerMotions';
 import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
@@ -31,7 +32,9 @@ export const useOverlayDrawer_unstable = (
 ): OverlayDrawerState => {
   const { open, size, position } = useDrawerDefaultProps(props);
   const { backdropMotion, modalType = 'modal', inertTrapFocus, onOpenChange, surfaceMotion, mountNode } = props;
-  const { dir } = useFluent();
+  const { dir, targetDocument } = useFluent();
+  const { element: mountNodeElement } = toMountNodeProps(mountNode);
+  const hasMountNodeElement = Boolean(mountNodeElement && targetDocument?.body !== mountNodeElement);
 
   const backdropProps = slot.resolveShorthand(props.backdrop);
   const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;
@@ -82,6 +85,9 @@ export const useOverlayDrawer_unstable = (
     open,
     size,
     position,
+    hasMountNodeElement,
+
+    // Deprecated props
     mountNode,
     motion: STATIC_MOTION,
   };

packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts

@@ -47,7 +47,7 @@ export const useOverlayDrawerStyles_unstable = (state: OverlayDrawerState): Over
   const resetStyles = useDrawerResetStyles();
   const rootStyles = useDrawerRootStyles();
 
-  const absoluteStyles = !!state.mountNode && rootStyles.absolute;
+  const absoluteStyles = !!state.hasMountNodeElement && rootStyles.absolute;
   const backdrop = state.root.backdrop as React.HTMLAttributes<HTMLDivElement> | undefined;
 
   state.root.className = mergeClasses(