feat: implement motion for Drawer

change/@fluentui-react-components-05ea9e2c-59c4-4b95-8d7a-e6fc6ee1bb5c.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: make useTransitionPresence hook",
+  "packageName": "@fluentui/react-components",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-dialog-58d6263b-fb53-461c-8144-1c5ac2ff9003.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add motion to dialog",
+  "packageName": "@fluentui/react-dialog",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-drawer-906d4815-2dd6-43b5-af6e-4ef4571ed915.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: add transition on open/close",
+  "packageName": "@fluentui/react-drawer",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-utilities-02937573-2ff4-49a6-8fec-9dbc38b1644a.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: make useTransitionPresence hook",
+  "packageName": "@fluentui/react-utilities",
+  "email": "marcosvmmoura@gmail.com",
+  "dependentChangeType": "patch"
+}

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

@@ -1109,6 +1109,9 @@ import { useMenuTriggerContext_unstable } from '@fluentui/react-menu';
 import { useMergedRefs } from '@fluentui/react-utilities';
 import { useModalAttributes } from '@fluentui/react-tabster';
 import { UseModalAttributesOptions } from '@fluentui/react-tabster';
+import { useMotionPresence } from '@fluentui/react-utilities';
+import { UseMotionPresenceEvents } from '@fluentui/react-utilities';
+import { UseMotionPresenceState } from '@fluentui/react-utilities';
 import { useObservedElement } from '@fluentui/react-tabster';
 import { useOption_unstable } from '@fluentui/react-combobox';
 import { useOptionGroup_unstable } from '@fluentui/react-combobox';
@@ -3459,6 +3462,12 @@ export { useModalAttributes }
 
 export { UseModalAttributesOptions }
 
+export { useMotionPresence }
+
+export { UseMotionPresenceEvents }
+
+export { UseMotionPresenceState }
+
 export { useObservedElement }
 
 export { useOption_unstable }

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

@@ -11,8 +11,11 @@ import { ARIAButtonType } from '@fluentui/react-aria';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { ContextSelector } from '@fluentui/react-context-selector';
+import type { ExtractSlotProps } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { JSXElementConstructor } from 'react';
+import { MotionShorthand } from '@fluentui/react-motion-preview';
+import { MotionState } from '@fluentui/react-motion-preview';
 import type { PortalProps } from '@fluentui/react-portal';
 import { Provider } from 'react';
 import * as React_2 from 'react';
@@ -84,7 +87,8 @@ export type DialogContentState = ComponentState<DialogContentSlots>;
 
 // @public (undocumented)
 export type DialogContextValue = {
-    open: boolean;
+    open: MotionShorthand<DialogSurfaceElement>;
+    motion: MotionState<DialogSurfaceElement>;
     inertTrapFocus: boolean;
     dialogTitleId?: string;
     isNestedDialog: boolean;
@@ -117,7 +121,7 @@ export type DialogOpenChangeEventHandler = (event: DialogOpenChangeEvent, data:
 // @public (undocumented)
 export type DialogProps = ComponentProps<Partial<DialogSlots>> & {
     modalType?: DialogModalType;
-    open?: boolean;
+    open?: MotionShorthand<DialogSurfaceElement>;
     defaultOpen?: boolean;
     onOpenChange?: DialogOpenChangeEventHandler;
     children: [JSX.Element, JSX.Element] | JSX.Element;
@@ -156,12 +160,15 @@ export const DialogSurfaceProvider: Provider<boolean | undefined>;
 
 // @public (undocumented)
 export type DialogSurfaceSlots = {
-    backdrop?: Slot<'div'>;
+    backdrop?: Slot<DialogBackdropProps>;
     root: Slot<'div'>;
 };
 
 // @public
-export type DialogSurfaceState = ComponentState<DialogSurfaceSlots> & Pick<PortalProps, 'mountNode'>;
+export type DialogSurfaceState = ComponentState<DialogSurfaceSlots> & {
+    motion: MotionState<DialogSurfaceElement>;
+    backdropMotion: MotionState<DialogSurfaceElement>;
+} & Pick<PortalProps, 'mountNode'>;
 
 // @public
 export const DialogTitle: ForwardRefComponent<DialogTitleProps>;

packages/react-components/react-dialog/package.json

@@ -36,16 +36,17 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-utilities": "^9.13.5",
-    "@fluentui/react-jsx-runtime": "^9.0.12",
     "@fluentui/keyboard-keys": "^9.0.6",
-    "@fluentui/react-context-selector": "^9.1.36",
-    "@fluentui/react-shared-contexts": "^9.9.2",
     "@fluentui/react-aria": "^9.3.38",
+    "@fluentui/react-context-selector": "^9.1.36",
     "@fluentui/react-icons": "^2.0.217",
+    "@fluentui/react-jsx-runtime": "^9.0.3",
+    "@fluentui/react-motion-preview": "0.2.10",
+    "@fluentui/react-portal": "^9.3.9",
+    "@fluentui/react-shared-contexts": "^9.9.2",
     "@fluentui/react-tabster": "^9.13.2",
     "@fluentui/react-theme": "^9.1.14",
-    "@fluentui/react-portal": "^9.3.19",
+    "@fluentui/react-utilities": "^9.13.5",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },

packages/react-components/react-dialog/src/components/Dialog/Dialog.types.ts

@@ -2,6 +2,7 @@ import type * as React from 'react';
 import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
 import type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';
 import type { DialogSurfaceElement } from '../DialogSurface/DialogSurface.types';
+import type { MotionShorthand } from '@fluentui/react-motion-preview';
 
 export type DialogSlots = {};
 
@@ -68,7 +69,7 @@ export type DialogProps = ComponentProps<Partial<DialogSlots>> & {
    * Controls the open state of the dialog
    * @default false
    */
-  open?: boolean;
+  open?: MotionShorthand<DialogSurfaceElement>;
   /**
    * Default value for the uncontrolled open state of the dialog.
    * @default false

packages/react-components/react-dialog/src/components/Dialog/useDialog.ts

@@ -6,6 +6,7 @@ import { DialogContext } from '../../contexts';
 
 import type { DialogOpenChangeData, DialogProps, DialogState } from './Dialog.types';
 import { useModalAttributes } from '@fluentui/react-tabster';
+import { useMotion } from '@fluentui/react-motion-preview';
 
 /**
  * Create the state required to render Dialog.
@@ -26,6 +27,8 @@ export const useDialog_unstable = (props: DialogProps): DialogState => {
     initialState: false,
   });
 
+  const motion = useMotion(open);
+
   const requestOpenChange = useEventCallback((data: DialogOpenChangeData) => {
     onOpenChange?.(data.event, data);
 
@@ -36,7 +39,7 @@ export const useDialog_unstable = (props: DialogProps): DialogState => {
     }
   });
 
-  const focusRef = useFocusFirstElement(open, modalType);
+  const focusRef = useFocusFirstElement(motion.canRender, modalType);
   const disableBodyScroll = useDisableBodyScroll();
   const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');
 
@@ -52,13 +55,12 @@ export const useDialog_unstable = (props: DialogProps): DialogState => {
   });
 
   return {
-    components: {
-      backdrop: 'div',
-    },
-    inertTrapFocus,
     open,
+    motion,
+    components: {},
+    inertTrapFocus,
     modalType,
-    content: open ? content : null,
+    content: motion.canRender ? content : null,
     trigger,
     requestOpenChange,
     dialogTitleId: useId('dialog-title-'),

packages/react-components/react-dialog/src/components/Dialog/useDialogContextValues.ts

@@ -3,14 +3,15 @@ import type { DialogContextValues, DialogState } from './Dialog.types';
 
 export function useDialogContextValues_unstable(state: DialogState): DialogContextValues {
   const {
-    modalType,
-    open,
     dialogRef,
     dialogTitleId,
-    isNestedDialog,
     inertTrapFocus,
-    requestOpenChange,
+    isNestedDialog,
     modalAttributes,
+    modalType,
+    motion,
+    open,
+    requestOpenChange,
     triggerAttributes,
   } = state;
 
@@ -19,15 +20,16 @@ export function useDialogContextValues_unstable(state: DialogState): DialogConte
    * there is no sense to memoize it
    */
   const dialog: DialogContextValue = {
-    open,
-    modalType,
     dialogRef,
     dialogTitleId,
-    isNestedDialog,
     inertTrapFocus,
+    isNestedDialog,
     modalAttributes,
-    triggerAttributes,
+    modalType,
+    motion,
+    open,
     requestOpenChange,
+    triggerAttributes,
   };
 
   const dialogSurface: DialogSurfaceContextValue = false;

packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.types.ts

@@ -1,6 +1,11 @@
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';
 import type { PortalProps } from '@fluentui/react-portal';
 import { DialogSurfaceContextValue } from '../../contexts';
+import { MotionShorthand, MotionState } from '@fluentui/react-motion-preview';
+
+export type DialogBackdropProps = ExtractSlotProps<Slot<'div'>> & {
+  motion?: MotionShorthand<HTMLDivElement>;
+};
 
 export type DialogSurfaceSlots = {
   /**
@@ -10,7 +15,7 @@ export type DialogSurfaceSlots = {
    * The backdrop should have `aria-hidden="true"`.
    *
    */
-  backdrop?: Slot<'div'>;
+  backdrop?: Slot<DialogBackdropProps>;
   root: Slot<'div'>;
 };
 
@@ -31,4 +36,7 @@ export type DialogSurfaceContextValues = {
 /**
  * State used in rendering DialogSurface
  */
-export type DialogSurfaceState = ComponentState<DialogSurfaceSlots> & Pick<PortalProps, 'mountNode'>;
+export type DialogSurfaceState = ComponentState<DialogSurfaceSlots> &
+  Pick<PortalProps, 'mountNode'> & {
+    motion: MotionState<DialogSurfaceElement>;
+  };

packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts

@@ -6,7 +6,7 @@ import {
   isResolvedShorthand,
   slot,
 } from '@fluentui/react-utilities';
-import type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';
+import { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';
 import { useDialogContext_unstable } from '../../contexts';
 import { Escape } from '@fluentui/keyboard-keys';
 
@@ -26,7 +26,7 @@ export const useDialogSurface_unstable = (
   const modalType = useDialogContext_unstable(ctx => ctx.modalType);
   const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);
   const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);
-  const open = useDialogContext_unstable(ctx => ctx.open);
+  const motion = useDialogContext_unstable(ctx => ctx.motion);
   const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);
   const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);
 
@@ -58,16 +58,20 @@ export const useDialogSurface_unstable = (
     }
   });
 
-  const backdrop = slot.optional(props.backdrop, {
-    renderByDefault: open && modalType !== 'non-modal',
-    defaultProps: {
-      'aria-hidden': 'true',
-    },
-    elementType: 'div',
-  });
+  const backdrop =
+    motion.canRender && modalType !== 'non-modal'
+      ? slot.optional(props.backdrop, {
+          defaultProps: {
+            'aria-hidden': 'true',
+          },
+          elementType: 'div',
+        })
+      : undefined;
+
   if (backdrop) {
     backdrop.onClick = handledBackdropClick;
   }
+
   return {
     components: { backdrop: 'div', root: 'div' },
     backdrop,
@@ -81,9 +85,11 @@ export const useDialogSurface_unstable = (
         ...props,
         ...modalAttributes,
         onKeyDown: handleKeyDown,
-        ref: useMergedRefs(ref, dialogRef),
+        ref: useMergedRefs(ref, dialogRef, motion.ref),
       }),
       { elementType: 'div' },
     ),
+
+    motion,
   };
 };