feat: adds mountNode to DialogSurface and Toaster (#29003)

microsoft · Aug 29, 2023 · 3ef92a4 · 3ef92a4
1 parent 3162ff5
commit 3ef92a4
Show file tree

Hide file tree

Showing 10 changed files with 32 additions and 10 deletions.
diff --git a/change/@fluentui-react-dialog-255eaef7-254c-458a-8755-43716637aeb0.json b/change/@fluentui-react-dialog-255eaef7-254c-458a-8755-43716637aeb0.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: adds mountNode to DialogSurface API",
+  "packageName": "@fluentui/react-dialog",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-toast-8957c28e-fa82-41fd-9dd4-b9efd30f398e.json b/change/@fluentui-react-toast-8957c28e-fa82-41fd-9dd4-b9efd30f398e.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: adds mountNode to Toaster API",
+  "packageName": "@fluentui/react-toast",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-dialog/etc/react-dialog.api.md b/packages/react-components/react-dialog/etc/react-dialog.api.md
@@ -12,6 +12,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { JSXElementConstructor } from 'react';
+import type { PortalProps } from '@fluentui/react-portal';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
@@ -129,7 +130,7 @@ export const dialogSurfaceClassNames: SlotClassNames<DialogSurfaceSlots>;
 export type DialogSurfaceElement = HTMLElement;
 
 // @public
-export type DialogSurfaceProps = ComponentProps<DialogSurfaceSlots>;
+export type DialogSurfaceProps = ComponentProps<DialogSurfaceSlots> & Pick<PortalProps, 'mountNode'>;
 
 // @public (undocumented)
 export type DialogSurfaceSlots = {
@@ -138,7 +139,7 @@ export type DialogSurfaceSlots = {
 };
 
 // @public
-export type DialogSurfaceState = ComponentState<DialogSurfaceSlots>;
+export type DialogSurfaceState = ComponentState<DialogSurfaceSlots> & Pick<PortalProps, 'mountNode'>;
 
 // @public
 export const DialogTitle: ForwardRefComponent<DialogTitleProps>;

diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.types.ts b/packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.types.ts
@@ -1,4 +1,5 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { PortalProps } from '@fluentui/react-portal';
 import { DialogSurfaceContextValue } from '../../contexts';
 
 export type DialogSurfaceSlots = {
@@ -21,7 +22,7 @@ export type DialogSurfaceElement = HTMLElement;
 /**
  * DialogSurface Props
  */
-export type DialogSurfaceProps = ComponentProps<DialogSurfaceSlots>;
+export type DialogSurfaceProps = ComponentProps<DialogSurfaceSlots> & Pick<PortalProps, 'mountNode'>;
 
 export type DialogSurfaceContextValues = {
   dialogSurface: DialogSurfaceContextValue;
@@ -30,4 +31,4 @@ export type DialogSurfaceContextValues = {
 /**
  * State used in rendering DialogSurface
  */
-export type DialogSurfaceState = ComponentState<DialogSurfaceSlots>;
+export type DialogSurfaceState = ComponentState<DialogSurfaceSlots> & Pick<PortalProps, 'mountNode'>;
diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/renderDialogSurface.tsx b/packages/react-components/react-dialog/src/components/DialogSurface/renderDialogSurface.tsx
@@ -15,7 +15,7 @@ export const renderDialogSurface_unstable = (state: DialogSurfaceState, contextV
   assertSlots<DialogSurfaceSlots>(state);
 
   return (
-    <Portal>
+    <Portal mountNode={state.mountNode}>
       {state.backdrop && <state.backdrop />}
       <DialogSurfaceProvider value={contextValues.dialogSurface}>
         <state.root />

diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts
@@ -71,6 +71,7 @@ export const useDialogSurface_unstable = (
   return {
     components: { backdrop: 'div', root: 'div' },
     backdrop,
+    mountNode: props.mountNode,
     root: slot.always(
       getNativeElementProps(props.as ?? 'div', {
         tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150

diff --git a/packages/react-components/react-toast/etc/react-toast.api.md b/packages/react-components/react-toast/etc/react-toast.api.md
@@ -13,6 +13,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { JSXElementConstructor } from 'react';
+import type { PortalProps } from '@fluentui/react-portal';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
@@ -70,7 +71,7 @@ export const Toaster: React_2.FC<ToasterProps>;
 export const toasterClassNames: SlotClassNames<ToasterSlots>;
 
 // @public
-export type ToasterProps = Omit<ComponentProps<ToasterSlots>, 'children'> & Partial<ToasterOptions> & {
+export type ToasterProps = Omit<ComponentProps<ToasterSlots>, 'children'> & Partial<ToasterOptions> & Pick<PortalProps, 'mountNode'> & {
     announce?: Announce;
 };
 
@@ -80,7 +81,7 @@ export type ToasterSlots = {
 };
 
 // @public
-export type ToasterState = ComponentState<ToasterSlotsInternal> & Pick<AriaLiveProps, 'announceRef'> & Pick<Required<ToasterProps>, 'announce'> & {
+export type ToasterState = ComponentState<ToasterSlotsInternal> & Pick<AriaLiveProps, 'announceRef'> & Pick<PortalProps, 'mountNode'> & Pick<Required<ToasterProps>, 'announce'> & {
     offset: ToasterOptions['offset'] | undefined;
     renderAriaLive: boolean;
     dir: 'rtl' | 'ltr';

diff --git a/packages/react-components/react-toast/src/components/Toaster/Toaster.types.ts b/packages/react-components/react-toast/src/components/Toaster/Toaster.types.ts
@@ -1,4 +1,5 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { PortalProps } from '@fluentui/react-portal';
 import { ToasterOptions } from '../../state/types';
 import { Announce, AriaLiveProps } from '../AriaLive';
 
@@ -21,7 +22,8 @@ export type ToasterSlotsInternal = ToasterSlots & {
  * Toaster Props
  */
 export type ToasterProps = Omit<ComponentProps<ToasterSlots>, 'children'> &
-  Partial<ToasterOptions> & {
+  Partial<ToasterOptions> &
+  Pick<PortalProps, 'mountNode'> & {
     /**
      * User override API for aria-live narration for toasts
      */
@@ -33,6 +35,7 @@ export type ToasterProps = Omit<ComponentProps<ToasterSlots>, 'children'> &
  */
 export type ToasterState = ComponentState<ToasterSlotsInternal> &
   Pick<AriaLiveProps, 'announceRef'> &
+  Pick<PortalProps, 'mountNode'> &
   Pick<Required<ToasterProps>, 'announce'> & {
     offset: ToasterOptions['offset'] | undefined;
     renderAriaLive: boolean;

diff --git a/packages/react-components/react-toast/src/components/Toaster/renderToaster.tsx b/packages/react-components/react-toast/src/components/Toaster/renderToaster.tsx
@@ -21,7 +21,7 @@ export const renderToaster_unstable = (state: ToasterState) => {
     <>
       {renderAriaLive ? <AriaLive announceRef={announceRef} /> : null}
       {hasToasts ? (
-        <Portal>
+        <Portal mountNode={state.mountNode}>
           {state.bottomStart ? <state.bottomStart /> : null}
           {state.bottomEnd ? <state.bottomEnd /> : null}
           {state.topStart ? <state.topStart /> : null}

diff --git a/packages/react-components/react-toast/src/components/Toaster/useToaster.tsx b/packages/react-components/react-toast/src/components/Toaster/useToaster.tsx
@@ -23,7 +23,7 @@ import { useToastAnnounce } from './useToastAnnounce';
  * @param props - props from this instance of Toaster
  */
 export const useToaster_unstable = (props: ToasterProps): ToasterState => {
-  const { offset, announce: announceProp, ...rest } = props;
+  const { offset, announce: announceProp, mountNode, ...rest } = props;
   const announceRef = React.useRef<Announce>(() => null);
   const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus, closeAllToasts } =
     useToaster<HTMLDivElement>(rest);
@@ -71,6 +71,7 @@ export const useToaster_unstable = (props: ToasterProps): ToasterState => {
   };
   return {
     dir,
+    mountNode,
     components: { root: 'div', bottomStart: 'div', bottomEnd: 'div', topStart: 'div', topEnd: 'div' },
     root: slot.always(rootProps, { elementType: 'div' }),
     bottomStart: usePositionSlot(TOAST_POSITIONS.bottomStart),