diff --git a/change/@fluentui-react-dialog-255eaef7-254c-458a-8755-43716637aeb0.json b/change/@fluentui-react-dialog-255eaef7-254c-458a-8755-43716637aeb0.json new file mode 100644 index 0000000000000..3488f04b33d2e --- /dev/null +++ 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 new file mode 100644 index 0000000000000..a8e29b6243f80 --- /dev/null +++ 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 index 12530a9efaac3..ddb7ec00b9efe 100644 --- 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; export type DialogSurfaceElement = HTMLElement; // @public -export type DialogSurfaceProps = ComponentProps; +export type DialogSurfaceProps = ComponentProps & Pick; // @public (undocumented) export type DialogSurfaceSlots = { @@ -138,7 +139,7 @@ export type DialogSurfaceSlots = { }; // @public -export type DialogSurfaceState = ComponentState; +export type DialogSurfaceState = ComponentState & Pick; // @public export const DialogTitle: ForwardRefComponent; 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 index a0d72f37fc604..81026a777eeb2 100644 --- 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; +export type DialogSurfaceProps = ComponentProps & Pick; export type DialogSurfaceContextValues = { dialogSurface: DialogSurfaceContextValue; @@ -30,4 +31,4 @@ export type DialogSurfaceContextValues = { /** * State used in rendering DialogSurface */ -export type DialogSurfaceState = ComponentState; +export type DialogSurfaceState = ComponentState & Pick; diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/renderDialogSurface.tsx b/packages/react-components/react-dialog/src/components/DialogSurface/renderDialogSurface.tsx index c217a9c15ea5e..bc62c58f11b17 100644 --- 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(state); return ( - + {state.backdrop && } diff --git a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts index ddfd5f4a8720a..9cd9f3b35863e 100644 --- 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 index 3bb8b851afd7e..3fb8b053f514d 100644 --- 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; export const toasterClassNames: SlotClassNames; // @public -export type ToasterProps = Omit, 'children'> & Partial & { +export type ToasterProps = Omit, 'children'> & Partial & Pick & { announce?: Announce; }; @@ -80,7 +81,7 @@ export type ToasterSlots = { }; // @public -export type ToasterState = ComponentState & Pick & Pick, 'announce'> & { +export type ToasterState = ComponentState & Pick & Pick & Pick, '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 index da16f0ec1f4d2..6ab42791f6262 100644 --- 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, 'children'> & - Partial & { + Partial & + Pick & { /** * User override API for aria-live narration for toasts */ @@ -33,6 +35,7 @@ export type ToasterProps = Omit, 'children'> & */ export type ToasterState = ComponentState & Pick & + Pick & Pick, '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 index 520b5d5ad9960..38789e585b32e 100644 --- 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 ? : null} {hasToasts ? ( - + {state.bottomStart ? : null} {state.bottomEnd ? : null} {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 index cae22466c8741..cf792d56760ca 100644 --- 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(() => null); const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus, closeAllToasts } = useToaster(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),