docs(react-drawer): improve type descriptions and fix TS circular references

change/@fluentui-react-drawer-abefd0d8-1c44-421b-96e5-723c20a91d46.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "docs: improve types descriptions and fix TS circular references",
+  "packageName": "@fluentui/react-drawer",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -10,6 +10,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { DialogProps } from '@fluentui/react-dialog';
 import { DialogSurfaceProps } from '@fluentui/react-dialog';
+import { DialogSurfaceSlots } from '@fluentui/react-dialog';
 import { DialogTitleSlots } from '@fluentui/react-dialog';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
@@ -115,7 +116,7 @@ export const DrawerInline: ForwardRefComponent<DrawerInlineProps>;
 export const drawerInlineClassNames: SlotClassNames<DrawerInlineSlots>;
 
 // @public
-export type DrawerInlineProps = ComponentProps<DrawerInlineSlots> & DrawerBaseTypes & {
+export type DrawerInlineProps = ComponentProps<DrawerInlineSlots> & DrawerBaseProps & {
     separator?: boolean;
 };
 
@@ -125,7 +126,7 @@ export type DrawerInlineSlots = {
 };
 
 // @public
-export type DrawerInlineState = ComponentState<DrawerInlineSlots> & DrawerBaseTypes & Pick<DrawerInlineProps, 'open' | 'separator'>;
+export type DrawerInlineState = ComponentState<DrawerInlineSlots> & DrawerInlineProps;
 
 // @public
 export const DrawerOverlay: ForwardRefComponent<DrawerOverlayProps>;
@@ -134,20 +135,20 @@ export const DrawerOverlay: ForwardRefComponent<DrawerOverlayProps>;
 export const drawerOverlayClassNames: SlotClassNames<DrawerOverlaySlots>;
 
 // @public
-export type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> & DrawerBaseTypes & Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'>;
+export type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> & DrawerBaseProps & Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'>;
 
 // @public (undocumented)
-export type DrawerOverlaySlots = {
+export type DrawerOverlaySlots = DialogSurfaceSlots & {
     root: Slot<DialogSurfaceProps>;
 };
 
 // @public
-export type DrawerOverlayState = ComponentState<DrawerOverlaySlots> & DrawerBaseTypes & {
+export type DrawerOverlayState = ComponentState<DrawerOverlaySlots> & DrawerBaseProps & {
     dialog: DialogProps;
 };
 
 // @public
-export type DrawerProps = ComponentProps<Partial<DrawerSlots>> & DrawerOverlayProps & DrawerInlineProps & {
+export type DrawerProps = ComponentProps<Partial<DrawerSlots>> & {
     type?: 'inline' | 'overlay';
 };
 

packages/react-components/react-drawer/src/components/Drawer/Drawer.types.ts

@@ -12,18 +12,16 @@ export type DrawerSlots = {
 /**
  * Drawer Props
  */
-export type DrawerProps = ComponentProps<Partial<DrawerSlots>> &
-  DrawerOverlayProps &
-  DrawerInlineProps & {
-    /**
-     * Type of the drawer.
-     * @default overlay
-     *
-     * - 'overlay' - Drawer is hidden by default and can be opened by clicking on the trigger.
-     * - 'inline' - Drawer is stacked with the content
-     */
-    type?: 'inline' | 'overlay';
-  };
+export type DrawerProps = ComponentProps<Partial<DrawerSlots>> & {
+  /**
+   * Type of the drawer.
+   * @default overlay
+   *
+   * - 'overlay' - Drawer is hidden by default and can be opened by clicking on the trigger.
+   * - 'inline' - Drawer is stacked with the content
+   */
+  type?: 'inline' | 'overlay';
+};
 
 /**
  * State used in rendering Drawer

packages/react-components/react-drawer/src/components/DrawerInline/DrawerInline.types.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { DrawerBaseTypes } from '../../util/DrawerBase.types';
+import { DrawerBaseProps } from '../../util/DrawerBase.types';
 
 export type DrawerInlineSlots = {
   root: Slot<'div'>;
@@ -9,7 +9,7 @@ export type DrawerInlineSlots = {
  * DrawerInline Props
  */
 export type DrawerInlineProps = ComponentProps<DrawerInlineSlots> &
-  DrawerBaseTypes & {
+  DrawerBaseProps & {
     /**
      * Whether the drawer has a separator line.
      *
@@ -21,6 +21,4 @@ export type DrawerInlineProps = ComponentProps<DrawerInlineSlots> &
 /**
  * State used in rendering DrawerInline
  */
-export type DrawerInlineState = ComponentState<DrawerInlineSlots> &
-  DrawerBaseTypes &
-  Pick<DrawerInlineProps, 'open' | 'separator'>;
+export type DrawerInlineState = ComponentState<DrawerInlineSlots> & DrawerInlineProps;

packages/react-components/react-drawer/src/components/DrawerOverlay/DrawerOverlay.types.ts

@@ -1,22 +1,22 @@
-import { DialogProps, DialogSurfaceProps } from '@fluentui/react-dialog';
+import { DialogProps, DialogSurfaceProps, DialogSurfaceSlots } from '@fluentui/react-dialog';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { DrawerBaseTypes } from '../../util/DrawerBase.types';
+import { DrawerBaseProps } from '../../util/DrawerBase.types';
 
-export type DrawerOverlaySlots = {
+export type DrawerOverlaySlots = DialogSurfaceSlots & {
   root: Slot<DialogSurfaceProps>;
 };
 
 /**
  * DrawerOverlay Props
  */
 export type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> &
-  DrawerBaseTypes &
+  DrawerBaseProps &
   Pick<DialogProps, 'modalType' | 'onOpenChange' | 'inertTrapFocus'>;
 
 /**
  * State used in rendering DrawerOverlay
  */
 export type DrawerOverlayState = ComponentState<DrawerOverlaySlots> &
-  DrawerBaseTypes & {
+  DrawerBaseProps & {
     dialog: DialogProps;
   };

packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlay.ts

@@ -23,6 +23,7 @@ export const useDrawerOverlay_unstable = (
   return {
     components: {
       root: DialogSurface,
+      backdrop: 'div',
     },
 
     root: getNativeElementProps('div', {

packages/react-components/react-drawer/src/components/DrawerOverlay/useDrawerOverlayStyles.styles.ts

@@ -2,9 +2,11 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { DrawerOverlaySlots, DrawerOverlayState } from './DrawerOverlay.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';
+import * as React from 'react';
 
 export const drawerOverlayClassNames: SlotClassNames<DrawerOverlaySlots> = {
   root: 'fui-DrawerOverlay',
+  backdrop: 'fui-DrawerOverlay__backdrop',
 };
 
 /**
@@ -25,6 +27,8 @@ export const useDrawerOverlayStyles_unstable = (state: DrawerOverlayState): Draw
   const baseStyles = useDrawerBaseStyles();
   const styles = useStyles();
 
+  const backdrop = state.root.backdrop as React.HTMLAttributes<HTMLDivElement>;
+
   state.root.className = mergeClasses(
     drawerOverlayClassNames.root,
     baseStyles.root,
@@ -34,5 +38,9 @@ export const useDrawerOverlayStyles_unstable = (state: DrawerOverlayState): Draw
     state.root.className,
   );
 
+  if (backdrop) {
+    backdrop.className = mergeClasses(drawerOverlayClassNames.backdrop, backdrop.className);
+  }
+
   return state;
 };

packages/react-components/react-drawer/src/util/DrawerBase.types.ts

@@ -1,4 +1,4 @@
-export type DrawerBaseTypes = {
+export type DrawerBaseProps = {
   /**
    * Position of the drawer.
    *

packages/react-components/react-drawer/src/util/getDefaultDrawerProps.ts

@@ -1,6 +1,6 @@
-import { DrawerBaseTypes } from './DrawerBase.types';
+import { DrawerBaseProps } from './DrawerBase.types';
 
-export function getDefaultDrawerProps(props: DrawerBaseTypes) {
+export function getDefaultDrawerProps(props: DrawerBaseProps) {
   const { open = false, defaultOpen = false, size = 'small', position = 'left' } = props;
 
   return {