fix(react-draggable-dialog): improve calculation performance after motion upgrade on Dialog

change/@fluentui-contrib-react-draggable-dialog-b05a7a57-73fc-486a-be98-8e342c1c8829.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: improve calculation performance after motion upgrade on Dialog",
+  "packageName": "@fluentui-contrib/react-draggable-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -25,8 +25,8 @@
     "@babel/preset-env": "7.27.1",
     "@babel/preset-react": "7.27.1",
     "@babel/preset-typescript": "7.27.1",
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@fluentui/react": "^8.120.2",
     "@fluentui/react-components": "^9.70.0",

packages/react-draggable-dialog/jest.config.ts

@@ -1,10 +1,15 @@
 /* eslint-disable */
 import { readFileSync } from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 // Reading the SWC compilation config and remove the "exclude"
 // for the test files to be compiled by SWC
 const { exclude: _, ...swcJestConfig } = JSON.parse(
-  readFileSync(`${__dirname}/.swcrc`, 'utf-8')
+  readFileSync(join(__dirname, '.swcrc'), 'utf-8')
 );
 
 // disable .swcrc look-up by SWC core because we're passing in swcJestConfig ourselves.
@@ -19,11 +24,11 @@
 // swcJestConfig.module.noInterop = false;
 
 export default {
-  displayName: 'button',
+  displayName: 'react-draggable-dialog',
   preset: '../../jest.preset.js',
   transform: {
     '^.+\\.[tj]sx?$': ['@swc/jest', swcJestConfig],
   },
   moduleFileExtensions: ['js', 'ts', 'tsx', 'html'],
-  coverageDirectory: '../../coverage/packages/button',
+  coverageDirectory: '../../coverage/packages/react-draggable-dialog',
 };

packages/react-draggable-dialog/package.json

@@ -3,9 +3,9 @@
   "version": "0.2.1",
   "dependencies": {
     "@swc/helpers": "~0.5.11",
-    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/utilities": "^3.2.2",
-    "@dnd-kit/modifiers": "^7.0.0"
+    "@dnd-kit/modifiers": "^9.0.0"
   },
   "peerDependencies": {
     "@fluentui/react-components": ">=9.70.0 <10.0.0",

packages/react-draggable-dialog/src/components/DraggableDialog/DraggableDialog.test.tsx

@@ -2,13 +2,16 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 
 import { DraggableDialog } from './DraggableDialog';
+import { DraggableDialogSurface } from '../DraggableDialogSurface';
 
 describe('DraggableDialog', () => {
   it('should render', () => {
     const text = 'Context';
     const { getByText } = render(
       <DraggableDialog open>
-        <div>{text}</div>
+        <DraggableDialogSurface>
+          <div>{text}</div>
+        </DraggableDialogSurface>
       </DraggableDialog>
     );
 

packages/react-draggable-dialog/src/components/DraggableDialog/DraggableDialog.tsx

@@ -9,7 +9,7 @@ import { useDraggableDialog } from './useDraggableDialog';
 /**
  * DraggableDialog is a wrapper around the Dialog component that makes it draggable.
  */
-export const DraggableDialog: React.FC<DraggableDialogProps> = (props) => {
+export const DraggableDialog: React.FC<DraggableDialogProps> = React.memo((props) => {
   const { contextValue, dialogProps, ...dndProps } = useDraggableDialog(props);
 
   return (
@@ -19,4 +19,6 @@ export const DraggableDialog: React.FC<DraggableDialogProps> = (props) => {
       </DraggableDialogContextProvider>
     </DndContext>
   );
-};
+});
+
+DraggableDialog.displayName = 'DraggableDialog';

packages/react-draggable-dialog/src/components/DraggableDialog/useDraggableDialog.test.ts

@@ -19,8 +19,8 @@ describe('DraggableDialog', () => {
       'sensors',
       'modifiers',
       'accessibility',
-      'contextValue',
       'dialogProps',
+      'contextValue',
     ]);
     expect(result.current.modifiers).toHaveLength(1);
     expect(result.current.accessibility).toEqual(undefined);
@@ -47,10 +47,10 @@ describe('DraggableDialog', () => {
     const sensorNames = result.current.sensors.map(({ sensor }) => sensor.name);
 
     expect(sensorNames).toStrictEqual([
-      'PointerSensor',
+      'KeyboardSensor',
       'MouseSensor',
+      'PointerSensor',
       'TouchSensor',
-      'KeyboardSensor',
     ]);
   });
 

packages/react-draggable-dialog/src/components/DraggableDialog/useDraggableDialog.ts

@@ -11,14 +11,14 @@ import {
   useSensor,
   useSensors,
 } from '@dnd-kit/core';
-import { useId } from '@fluentui/react-components';
+import { useAnimationFrame, useId } from '@fluentui/react-components';
 
 import {
   DraggableDialogProps,
   DraggableDialogState,
 } from './DraggableDialog.types';
 import { getParsedDraggableMargin } from './utils/getParsedDraggableMargin';
-import { restrictToMarginModifier } from './utils/restrictToMarginModifier';
+import { restrictToBoundaryModifier } from './utils/restrictToBoundaryModifier';
 
 /**
  * This function is used to partition the props into two separate objects. The first object contains
@@ -68,36 +68,52 @@ export const useDraggableDialog = (
     },
     dialogProps,
   } = usePartitionedDraggableProps(props);
+
   const [dropPosition, setDropPosition] = React.useState({ x: 0, y: 0 });
   const [hasBeenDragged, setHasBeenDragged] = React.useState(false);
 
+  const [setOnDragAnimationFrame, cancelOnDragAnimationFrame] =
+    useAnimationFrame();
+
+  const keyboardSensor = useSensor(KeyboardSensor);
   const mouseSensor = useSensor(MouseSensor);
   const pointerSensor = useSensor(PointerSensor);
   const touchSensor = useSensor(TouchSensor);
-  const keyboardSensor = useSensor(KeyboardSensor);
   const sensors = useSensors(
-    pointerSensor,
+    keyboardSensor,
     mouseSensor,
-    touchSensor,
-    keyboardSensor
+    pointerSensor,
+    touchSensor
   );
 
   const onDragMove = React.useCallback(
     ({ active }: DragMoveEvent | DragEndEvent) => {
-      const { translated: rect } = active.rect.current;
-
-      if (!onPositionChange || !rect) {
-        return;
-      }
-
-      const position = {
-        x: rect.left,
-        y: rect.top,
-      };
+      cancelOnDragAnimationFrame();
+      setOnDragAnimationFrame(() => {
+        const { translated: rect } = active.rect.current;
+
+        if (!onPositionChange || !rect) {
+          return;
+        }
+
+        onPositionChange({
+          x: rect.left,
+          y: rect.top,
+        });
+      });
+    },
+    [cancelOnDragAnimationFrame, setOnDragAnimationFrame, onPositionChange]
+  );
 
-      onPositionChange(position);
+  const setInitialDropPosition = React.useCallback(
+    ({ x, y }: typeof dropPosition) => {
+      setHasBeenDragged(true);
+      setDropPosition({
+        x,
+        y,
+      });
     },
-    [onPositionChange]
+    []
   );
 
   const onDragEnd = React.useCallback(
@@ -114,22 +130,11 @@ export const useDraggableDialog = (
       });
       onDragMove(event);
     },
-    [onDragMove]
-  );
-
-  const setInitialDropPosition = React.useCallback(
-    ({ x, y }: typeof dropPosition) => {
-      setHasBeenDragged(true);
-      setDropPosition({
-        x,
-        y,
-      });
-    },
-    []
+    [onDragMove, setInitialDropPosition]
   );
 
   const modifiers = React.useMemo(() => {
-    return [restrictToMarginModifier({ margin, boundary })];
+    return [restrictToBoundaryModifier({ margin, boundary })];
   }, [margin, boundary]);
 
   const accessibility = React.useMemo(() => {
@@ -154,17 +159,10 @@ export const useDraggableDialog = (
     };
   }, [announcements]);
 
-  const contextValue = {
-    hasDraggableParent: true,
-    setDropPosition: setInitialDropPosition,
-    dropPosition,
-    position,
-    onPositionChange,
-    id,
-    hasBeenDragged,
-    margin,
-    boundary,
-  };
+  React.useEffect(
+    () => () => cancelOnDragAnimationFrame(),
+    [cancelOnDragAnimationFrame]
+  );
 
   return React.useMemo(
     () => ({
@@ -173,17 +171,33 @@ export const useDraggableDialog = (
       sensors,
       modifiers,
       accessibility,
-      contextValue,
       dialogProps,
+      contextValue: {
+        hasDraggableParent: true,
+        dropPosition,
+        position,
+        onPositionChange,
+        id,
+        hasBeenDragged,
+        margin,
+        boundary,
+        setDropPosition: () => undefined, // deprecated but needed for compatibility
+      },
     }),
     [
       onDragMove,
       onDragEnd,
       sensors,
       modifiers,
       accessibility,
-      contextValue,
       dialogProps,
+      dropPosition,
+      position,
+      onPositionChange,
+      id,
+      hasBeenDragged,
+      margin,
+      boundary,
     ]
   );
 };

packages/react-draggable-dialog/src/components/DraggableDialog/utils/restrictToMarginModifier.ts → packages/react-draggable-dialog/src/components/DraggableDialog/utils/restrictToBoundaryModifier.ts

@@ -6,12 +6,12 @@ import {
   DraggableDialogMarginViewport,
 } from '../DraggableDialog.types';
 
-type RestrictToMarginModifierOptions = {
+type RestrictToBoundaryModifierOptions = {
   margin: Required<DraggableDialogMarginViewport>;
 } & Pick<DraggableDialogProps, 'boundary'>;
 
-type RestrictToMarginModifier = (
-  options: RestrictToMarginModifierOptions
+type RestrictToBoundaryModifier = (
+  options: RestrictToBoundaryModifierOptions
 ) => Modifier;
 
 const getRectWithMargin = (
@@ -26,7 +26,7 @@ const getRectWithMargin = (
   left: rect.left + margin.start,
 });
 
-export const restrictToMarginModifier: RestrictToMarginModifier =
+export const restrictToBoundaryModifier: RestrictToBoundaryModifier =
   ({ margin, boundary }) =>
   ({ windowRect, containerNodeRect, transform, ...modifier }) => {
     if (!boundary) {

packages/react-draggable-dialog/src/components/DraggableDialogHandle/DraggableDialogHandle.tsx

@@ -8,26 +8,25 @@ import { useDraggableDialogHandle } from './useDraggableDialogHandle';
 /**
  * DraggableDialogHandle is the handle element that can be used to drag the DraggableDialog.
  */
-export const DraggableDialogHandle: React.FC<DraggableDialogHandleProps> = ({
-  children,
-  className,
-}) => {
-  const styles = useStyles();
-  const { setActivatorNodeRef, attributes, listeners } =
-    useDraggableDialogHandle();
+export const DraggableDialogHandle: React.FC<DraggableDialogHandleProps> =
+  React.memo(({ children, className }) => {
+    const styles = useStyles();
+    const { setActivatorNodeRef, attributes, listeners } =
+      useDraggableDialogHandle();
 
-  const child = React.Children.only(children);
-  const classnames = mergeClasses(
-    'fui-DraggableDialogHandle',
-    styles.root,
-    child.props.className,
-    className
-  );
+    const child = React.Children.only(children);
 
-  return React.cloneElement(child, {
-    ref: setActivatorNodeRef,
-    className: classnames,
-    ...attributes,
-    ...listeners,
+    return React.cloneElement(child, {
+      ref: setActivatorNodeRef,
+      className: mergeClasses(
+        'fui-DraggableDialogHandle',
+        styles.root,
+        child.props.className,
+        className
+      ),
+      ...attributes,
+      ...listeners,
+    });
   });
-};
+
+DraggableDialogHandle.displayName = 'DraggableDialogHandle';

packages/react-draggable-dialog/src/components/DraggableDialogSurface/DraggableDialogSurface.test.tsx

@@ -2,23 +2,16 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 import { DraggableDialogSurface } from './DraggableDialogSurface';
 
-jest.mock('../../contexts/DraggableDialogContext', () => ({
-  __esModule: true,
-  ...jest.requireActual('../../contexts/DraggableDialogContext'),
-}));
-
 describe('DraggableDialogSurface', () => {
-  let consoleErrorMock: jest.SpyInstance;
+  let consoleErrorSpy: jest.SpyInstance;
 
-  beforeEach(() => {
-    consoleErrorMock = jest
+  beforeAll(() => {
+    consoleErrorSpy = jest
       .spyOn(console, 'error')
       .mockImplementation((error: string) => error);
   });
 
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
+  afterAll(() => jest.resetAllMocks());
 
   it('should render', () => {
     const text = 'Surface';
@@ -38,7 +31,7 @@ describe('DraggableDialogSurface', () => {
       </DraggableDialogSurface>
     );
 
-    expect(consoleErrorMock).toHaveBeenCalledWith(expect.any(String));
+    expect(consoleErrorSpy).toHaveBeenCalledWith(expect.any(String));
   });
 
   it('should render DialogSurface with draggable class', () => {