diff --git a/change/@fluentui-react-drawer-840c300d-046b-4ec7-b733-f88067df7dea.json b/change/@fluentui-react-drawer-840c300d-046b-4ec7-b733-f88067df7dea.json new file mode 100644 index 00000000000000..f31ef092cb0bcf --- /dev/null +++ b/change/@fluentui-react-drawer-840c300d-046b-4ec7-b733-f88067df7dea.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "feat: make dialog slot internal to be used for composition only", + "packageName": "@fluentui/react-drawer", + "email": "marcosvmmoura@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-drawer/etc/react-drawer.api.md b/packages/react-components/react-drawer/etc/react-drawer.api.md index a361dd76f951ac..7d90c3c33e5ea8 100644 --- a/packages/react-components/react-drawer/etc/react-drawer.api.md +++ b/packages/react-components/react-drawer/etc/react-drawer.api.md @@ -131,19 +131,18 @@ export type DrawerInlineState = Required & Dra export const DrawerOverlay: ForwardRefComponent; // @public (undocumented) -export const drawerOverlayClassNames: Omit, 'dialog'>; +export const drawerOverlayClassNames: SlotClassNames; // @public export type DrawerOverlayProps = ComponentProps & Pick & DrawerBaseProps; -// @public (undocumented) +// @public export type DrawerOverlaySlots = DialogSurfaceSlots & { root: Slot; - dialog?: Slot; }; // @public -export type DrawerOverlayState = Omit, 'backdrop'> & Required, 'backdrop'> & Required; }>; diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts index 3f8080b0de4469..8b9ae1b0e6bba3 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts @@ -4,13 +4,24 @@ import type { MotionState } from '@fluentui/react-motion-preview'; import type { DrawerBaseProps, DrawerBaseState } from '../../shared/DrawerBase.types'; +/** + * DrawerOverlay slots + */ export type DrawerOverlaySlots = DialogSurfaceSlots & { + /** + * Slot for the root element. + */ root: Slot; +}; +/** + * DrawerOverlay internal slots for when using with composition API + */ +export type DrawerOverlayInternalSlots = DrawerOverlaySlots & { /** * Slot for the dialog component that wraps the drawer. */ - dialog?: Slot; + dialog: Slot; }; /** @@ -23,7 +34,7 @@ export type DrawerOverlayProps = ComponentProps & /** * State used in rendering DrawerOverlay */ -export type DrawerOverlayState = Omit, 'backdrop'> & +export type DrawerOverlayState = Omit, 'backdrop'> & Required< DrawerBaseState & { backdropMotion: MotionState; diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/renderDrawerOverlay.tsx b/packages/react-components/react-drawer/src/components/DrawerOverlay/renderDrawerOverlay.tsx index b799726ae5d3ff..5cf31a07ecacf7 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/renderDrawerOverlay.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/renderDrawerOverlay.tsx @@ -2,7 +2,7 @@ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { assertSlots } from '@fluentui/react-utilities'; -import type { DrawerOverlayState, DrawerOverlaySlots } from './DrawerOverlay.types'; +import type { DrawerOverlayState, DrawerOverlayInternalSlots } from './DrawerOverlay.types'; /** * Render the final JSX of DrawerOverlay @@ -12,7 +12,7 @@ export const renderDrawerOverlay_unstable = (state: DrawerOverlayState) => { return null; } - assertSlots(state); + assertSlots(state); return ( diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlay.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlay.ts index a7223c94c89d0d..5df5c29305cbfd 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlay.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlay.ts @@ -46,17 +46,23 @@ export const useDrawerOverlay_unstable = ( }, ); - const dialog = slot.optional(props.dialog, { - elementType: Dialog, - renderByDefault: true, - defaultProps: { + const dialog = slot.always( + { open: true, defaultOpen, onOpenChange, inertTrapFocus, modalType, + /* + * children is not needed here because we construct the children in the render function, + * but it's required by DialogProps + */ + children: null as unknown as JSX.Element, + }, + { + elementType: Dialog, }, - }); + ); return { components: { diff --git a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts index 35e7430cb5958f..74bd6230e0678b 100644 --- a/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts @@ -11,7 +11,7 @@ import { useDrawerDurationStyles, } from '../../shared/useDrawerBaseStyles.styles'; -export const drawerOverlayClassNames: Omit, 'dialog'> = { +export const drawerOverlayClassNames: SlotClassNames = { root: 'fui-DrawerOverlay', backdrop: 'fui-DrawerOverlay__backdrop', };