diff --git a/change/@fluentui-react-drawer-f26a20ea-8196-4280-adda-bbfb8ed23c93.json b/change/@fluentui-react-drawer-f26a20ea-8196-4280-adda-bbfb8ed23c93.json new file mode 100644 index 0000000000000..594d865944c29 --- /dev/null +++ b/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": "marcosvmmoura@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-drawer/library/etc/react-drawer.api.md b/packages/react-components/react-drawer/library/etc/react-drawer.api.md index 36ac6cf5e7fd5..4d0f95d33be44 100644 --- a/packages/react-components/react-drawer/library/etc/react-drawer.api.md +++ b/packages/react-components/react-drawer/library/etc/react-drawer.api.md @@ -171,7 +171,9 @@ export type OverlayDrawerSlots = { }; // @public -export type OverlayDrawerState = ComponentState & Required & Pick; +export type OverlayDrawerState = ComponentState & Required & Pick & { + hasMountNodeElement?: boolean; +}; // @public export const renderDrawer_unstable: (state: DrawerState, contextValue: DrawerContextValue) => JSX.Element; diff --git a/packages/react-components/react-drawer/library/package.json b/packages/react-components/react-drawer/library/package.json index 8c5f1b20f7696..a8f98648a9d9b 100644 --- a/packages/react-components/react-drawer/library/package.json +++ b/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", diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.test.tsx b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.test.tsx index c5fac00a4b414..79c25963fdd95 100644 --- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.test.tsx +++ b/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( + + Default OverlayDrawer + , + ); + + const mountNodeElement = baseElement.querySelector(`.${customClassName}`); + const drawerInsideMountNode = mountNodeElement?.querySelector('#drawer'); + + expect(mountNodeElement).toBeTruthy(); + expect(drawerInsideMountNode).toBeTruthy(); + }); }); diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.types.ts b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.types.ts index 4d606dbf1e2ce..556ea67318f81 100644 --- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.types.ts +++ b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/OverlayDrawer.types.ts @@ -54,4 +54,6 @@ export type OverlayDrawerProps = ComponentProps & */ export type OverlayDrawerState = ComponentState & Required & - Pick; + Pick & { + hasMountNodeElement: boolean; + }; diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawer.tsx b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawer.tsx index 55baea2872473..2cf78fee5dabc 100644 --- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawer.tsx +++ b/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, }; diff --git a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts b/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts index 4eff0a94554c0..703db2272833a 100644 --- a/packages/react-components/react-drawer/library/src/components/OverlayDrawer/useOverlayDrawerStyles.styles.ts +++ b/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 | undefined; state.root.className = mergeClasses(