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-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

@@ -974,6 +974,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';
@@ -3035,6 +3038,12 @@ export { useModalAttributes }
 
 export { UseModalAttributesOptions }
 
+export { useMotionPresence }
+
+export { UseMotionPresenceEvents }
+
+export { UseMotionPresenceState }
+
 export { useObservedElement }
 
 export { useOption_unstable }

packages/react-components/react-components/src/index.ts

@@ -107,6 +107,7 @@ export {
   useIsSSR,
   useMergedRefs,
   useScrollbarWidth,
+  useMotionPresence,
 } from '@fluentui/react-utilities';
 export type {
   ComponentProps,
@@ -118,6 +119,8 @@ export type {
   SlotClassNames,
   SlotPropsRecord,
   SlotRenderFunction,
+  UseMotionPresenceEvents,
+  UseMotionPresenceState,
 } from '@fluentui/react-utilities';
 
 // Components

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

@@ -126,7 +126,7 @@ export type DrawerInlineSlots = {
 };
 
 // @public
-export type DrawerInlineState = ComponentState<DrawerInlineSlots> & DrawerInlineProps;
+export type DrawerInlineState = ComponentState<DrawerInlineSlots> & DrawerInlineProps & DrawerBaseState;
 
 // @public
 export const DrawerOverlay: ForwardRefComponent<DrawerOverlayProps>;
@@ -143,8 +143,9 @@ export type DrawerOverlaySlots = DialogSurfaceSlots & {
 };
 
 // @public
-export type DrawerOverlayState = ComponentState<DrawerOverlaySlots> & DrawerBaseProps & {
+export type DrawerOverlayState = ComponentState<DrawerOverlaySlots> & DrawerBaseProps & DrawerBaseState & {
     dialog: DialogProps;
+    backdropVisible: boolean;
 };
 
 // @public
@@ -218,13 +219,13 @@ export const useDrawerHeaderTitle_unstable: (props: DrawerHeaderTitleProps, ref:
 export const useDrawerHeaderTitleStyles_unstable: (state: DrawerHeaderTitleState) => DrawerHeaderTitleState;
 
 // @public
-export const useDrawerInline_unstable: (props: DrawerInlineProps, ref: React_2.Ref<HTMLElement>) => DrawerInlineState;
+export const useDrawerInline_unstable: (props: DrawerInlineProps, ref: React_2.Ref<HTMLDivElement>) => DrawerInlineState;
 
 // @public
 export const useDrawerInlineStyles_unstable: (state: DrawerInlineState) => DrawerInlineState;
 
 // @public
-export const useDrawerOverlay_unstable: (props: DrawerOverlayProps, ref: React_2.Ref<HTMLElement>) => DrawerOverlayState;
+export const useDrawerOverlay_unstable: (props: DrawerOverlayProps, ref: React_2.Ref<HTMLDivElement>) => DrawerOverlayState;
 
 // @public
 export const useDrawerOverlayStyles_unstable: (state: DrawerOverlayState) => DrawerOverlayState;

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 { DrawerBaseProps } from '../../util/DrawerBase.types';
+import { DrawerBaseProps, DrawerBaseState } from '../../util/DrawerBase.types';
 
 export type DrawerInlineSlots = {
   root: Slot<'div'>;
@@ -21,4 +21,4 @@ export type DrawerInlineProps = ComponentProps<DrawerInlineSlots> &
 /**
  * State used in rendering DrawerInline
  */
-export type DrawerInlineState = ComponentState<DrawerInlineSlots> & DrawerInlineProps;
+export type DrawerInlineState = ComponentState<DrawerInlineSlots> & DrawerInlineProps & DrawerBaseState;

packages/react-components/react-drawer/src/components/DrawerInline/renderDrawerInline.tsx

@@ -8,7 +8,7 @@ import type { DrawerInlineState, DrawerInlineSlots } from './DrawerInline.types'
 export const renderDrawerInline_unstable = (state: DrawerInlineState) => {
   const { slots, slotProps } = getSlots<DrawerInlineSlots>(state);
 
-  if (!state.open) {
+  if (!state.shouldRender) {
     return null;
   }
 

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

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { getNativeElementProps, useControllableState } from '@fluentui/react-utilities';
+import {
+  getNativeElementProps,
+  useControllableState,
+  useMergedRefs,
+  useMotionPresence,
+} from '@fluentui/react-utilities';
 import type { DrawerInlineProps, DrawerInlineState } from './DrawerInline.types';
 import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';
 
@@ -12,7 +17,10 @@ import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';
  * @param props - props from this instance of DrawerInline
  * @param ref - reference to root HTMLElement of DrawerInline
  */
-export const useDrawerInline_unstable = (props: DrawerInlineProps, ref: React.Ref<HTMLElement>): DrawerInlineState => {
+export const useDrawerInline_unstable = (
+  props: DrawerInlineProps,
+  ref: React.Ref<HTMLDivElement>,
+): DrawerInlineState => {
   const { open: initialOpen, defaultOpen, size, position } = getDefaultDrawerProps(props);
   const { separator = false } = props;
 
@@ -22,19 +30,24 @@ export const useDrawerInline_unstable = (props: DrawerInlineProps, ref: React.Re
     initialState: false,
   });
 
+  const { ref: drawerRef, shouldRender, visible, motionState } = useMotionPresence<HTMLDivElement>(open);
+
   return {
     components: {
       root: 'div',
     },
 
     root: getNativeElementProps('div', {
-      ref,
+      ref: useMergedRefs(ref, drawerRef),
       ...props,
     }),
 
     size,
     position,
     open,
     separator,
+    shouldRender,
+    visible,
+    motionState,
   };
 };

packages/react-components/react-drawer/src/components/DrawerInline/useDrawerInlineStyles.styles.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { DrawerInlineSlots, DrawerInlineState } from './DrawerInline.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';
+import { drawerCSSVars, getDrawerBaseClassNames, useDrawerBaseStyles } from '../../util/useDrawerBaseStyles.styles';
 import { tokens } from '@fluentui/react-theme';
 
 export const drawerInlineClassNames: SlotClassNames<DrawerInlineSlots> = {
@@ -15,6 +15,9 @@ export const drawerInlineClassNames: SlotClassNames<DrawerInlineSlots> = {
 const useStyles = makeStyles({
   root: {
     position: 'relative',
+    transform: 'translateZ(0)',
+    transitionProperty: 'margin',
+    willChange: 'margin',
   },
 
   /* Separator */
@@ -24,6 +27,14 @@ const useStyles = makeStyles({
   separatorRight: {
     ...shorthands.borderLeft('1px', 'solid', tokens.colorNeutralBackground3),
   },
+
+  /* Hidden */
+  hiddenLeft: {
+    marginLeft: `calc(var(${drawerCSSVars.drawerSizeVar}) * -1)`,
+  },
+  hiddenRight: {
+    marginRight: `calc(var(${drawerCSSVars.drawerSizeVar}) * -1)`,
+  },
 });
 
 /**
@@ -33,7 +44,7 @@ export const useDrawerInlineStyles_unstable = (state: DrawerInlineState): Drawer
   const baseStyles = useDrawerBaseStyles();
   const styles = useStyles();
 
-  const separatorClass = React.useMemo(() => {
+  const separatorClass = React.useCallback(() => {
     if (!state.separator) {
       return undefined;
     }
@@ -45,9 +56,9 @@ export const useDrawerInlineStyles_unstable = (state: DrawerInlineState): Drawer
     drawerInlineClassNames.root,
     baseStyles.root,
     styles.root,
-    state.size && baseStyles[state.size],
-    state.position && baseStyles[state.position],
-    separatorClass,
+    getDrawerBaseClassNames(state, baseStyles),
+    !state.visible && (state.position === 'left' ? styles.hiddenLeft : styles.hiddenRight),
+    separatorClass(),
     state.root.className,
   );
 

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

@@ -1,6 +1,6 @@
 import { DialogProps, DialogSurfaceProps, DialogSurfaceSlots } from '@fluentui/react-dialog';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { DrawerBaseProps } from '../../util/DrawerBase.types';
+import { DrawerBaseProps, DrawerBaseState } from '../../util/DrawerBase.types';
 
 export type DrawerOverlaySlots = DialogSurfaceSlots & {
   root: Slot<DialogSurfaceProps>;
@@ -17,6 +17,8 @@ export type DrawerOverlayProps = ComponentProps<DrawerOverlaySlots> &
  * State used in rendering DrawerOverlay
  */
 export type DrawerOverlayState = ComponentState<DrawerOverlaySlots> &
-  DrawerBaseProps & {
+  DrawerBaseProps &
+  DrawerBaseState & {
     dialog: DialogProps;
+    backdropVisible: boolean;
   };

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, resolveShorthand, useMergedRefs, useMotionPresence } from '@fluentui/react-utilities';
 import type { DrawerOverlayProps, DrawerOverlayState } from './DrawerOverlay.types';
-import { DialogProps, DialogSurface } from '@fluentui/react-dialog';
+import { DialogProps, DialogSurface, DialogSurfaceProps } from '@fluentui/react-dialog';
 import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';
 
 /**
@@ -11,27 +11,40 @@ import { getDefaultDrawerProps } from '../../util/getDefaultDrawerProps';
  * before being passed to renderDrawerOverlay_unstable.
  *
  * @param props - props from this instance of DrawerOverlay
- * @param ref - reference to root HTMLElement of DrawerOverlay
+ * @param ref - reference to root HTMLDivElement of DrawerOverlay
  */
 export const useDrawerOverlay_unstable = (
   props: DrawerOverlayProps,
-  ref: React.Ref<HTMLElement>,
+  ref: React.Ref<HTMLDivElement>,
 ): DrawerOverlayState => {
   const { open, defaultOpen, size, position } = getDefaultDrawerProps(props);
   const { modalType = 'modal', inertTrapFocus, onOpenChange } = props;
 
+  const { ref: drawerRef, shouldRender, visible, motionState } = useMotionPresence<HTMLDivElement>(open);
+  const backdropPresence = useMotionPresence<HTMLDivElement>(open);
+  const backdropRef = useMergedRefs(backdropPresence.ref, drawerRef);
+
   return {
     components: {
       root: DialogSurface,
       backdrop: 'div',
     },
 
-    root: getNativeElementProps('div', {
-      ref,
-      ...props,
+    root: resolveShorthand(getNativeElementProps('div', {}), {
+      required: true,
+      defaultProps: {
+        ...props,
+        ref: useMergedRefs(ref, drawerRef),
+        ...(modalType !== 'non-modal' && {
+          backdrop: {
+            ...((props.backdrop || {}) as Record<string, unknown>),
+            ref: backdropRef,
+          },
+        }),
+      } as DialogSurfaceProps,
     }),
     dialog: {
-      open,
+      open: shouldRender,
       defaultOpen,
       onOpenChange,
       inertTrapFocus,
@@ -40,5 +53,9 @@ export const useDrawerOverlay_unstable = (
 
     size,
     position,
+    shouldRender,
+    motionState,
+    visible,
+    backdropVisible: backdropPresence.visible,
   };
 };