feat(react-draggable-dialog): create draggable dialog with handle

package.json

@@ -23,6 +23,9 @@
     "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@fluentui/react-components": "^9.44.4",
     "@griffel/shadow-dom": "~0.1.0",
     "@nx/devkit": "16.1.4",

packages/react-draggable-dialog/package.json

@@ -2,11 +2,16 @@
   "name": "@fluentui-contrib/react-draggable-dialog",
   "version": "0.0.1",
   "private": true,
+  "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@dnd-kit/modifiers": "^7.0.0"
+  },
   "peerDependencies": {
     "@fluentui/react-components": ">=9.35.1 <10.0.0",
-    "@types/react": ">=16.8.0 <19.0.0",
     "@types/react-dom": ">=16.8.0 <19.0.0",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0"
+    "@types/react": ">=16.8.0 <19.0.0",
+    "react-dom": ">=16.8.0 <19.0.0",
+    "react": ">=16.8.0 <19.0.0"
   }
 }

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

@@ -4,6 +4,10 @@ import { DraggableDialog } from './DraggableDialog';
 
 describe('DraggableDialog', () => {
   it('should render', () => {
-    render(<DraggableDialog />);
+    render(
+      <DraggableDialog open>
+        <div>Content</div>
+      </DraggableDialog>
+    );
   });
 });

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

@@ -1,8 +1,98 @@
 import * as React from 'react';
-import { mergeClasses } from '@fluentui/react-components';
-import { useStyles } from './DraggableDialog.styles';
+import {
+  DndContext,
+  useSensor,
+  MouseSensor,
+  TouchSensor,
+  KeyboardSensor,
+  useSensors,
+  DragEndEvent,
+  PointerSensor,
+} from '@dnd-kit/core';
+import { Dialog, useId } from '@fluentui/react-components';
 
-export const DraggableDialog: React.FC = () => {
-  const styles = useStyles();
-  return <div className={mergeClasses(styles.root)}>Hello World!</div>;
+import { DraggableDialogContextProvider } from '../../contexts/DraggableDialogContext';
+import { DraggableDialogProps } from './DraggableDialog.types';
+import { getParsedDraggableMargin, restrictToMarginModifier } from './utils';
+
+export const DraggableDialog: React.FC<DraggableDialogProps> = (props) => {
+  const {
+    margin,
+    keepInViewport,
+    id,
+    announcements,
+    position: defaultPosition,
+  } = {
+    id: useId('draggable-dialog-'),
+    keepInViewport: true,
+    ...props,
+    position: { x: 0, y: 0, ...props.position },
+    margin: getParsedDraggableMargin(props.margin),
+  };
+
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [hasBeenDragged, setHasBeenDragged] = React.useState(false);
+  const [position, setPosition] = React.useState(defaultPosition);
+
+  const mouseSensor = useSensor(MouseSensor);
+  const pointerSensor = useSensor(PointerSensor);
+  const touchSensor = useSensor(TouchSensor);
+  const keyboardSensor = useSensor(KeyboardSensor);
+  const sensors = useSensors(
+    pointerSensor,
+    mouseSensor,
+    touchSensor,
+    keyboardSensor
+  );
+
+  const onDragEnd = React.useCallback((event: DragEndEvent) => {
+    setPosition(({ x, y }) => ({
+      x: x + event.delta.x,
+      y: y + event.delta.y,
+    }));
+    setIsDragging(false);
+  }, []);
+
+  const onDragStart = React.useCallback(() => {
+    setHasBeenDragged(true);
+    setIsDragging(true);
+  }, []);
+
+  const restrictToMargin = React.useMemo(() => {
+    return restrictToMarginModifier({ margin, keepInViewport });
+  }, [margin, keepInViewport]);
+
+  const dndAnnouncements = React.useMemo(() => {
+    if (!announcements) {
+      return;
+    }
+
+    return {
+      onDragStart: () => announcements.start,
+      onDragEnd: () => announcements.end,
+    };
+  }, [announcements]);
+
+  return (
+    <DndContext
+      sensors={sensors}
+      modifiers={[restrictToMargin]}
+      accessibility={{
+        announcements: dndAnnouncements,
+      }}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+    >
+      <DraggableDialogContextProvider
+        value={{
+          id,
+          hasBeenDragged,
+          position,
+          isDragging,
+        }}
+      >
+        <Dialog {...props} />
+      </DraggableDialogContextProvider>
+    </DndContext>
+  );
 };

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

@@ -0,0 +1,68 @@
+import { DialogProps } from '@fluentui/react-components';
+
+export type DraggableMarginAxis = {
+  mainAxis?: number;
+  crossAxis?: number;
+};
+
+export type DraggableMarginViewport = {
+  top?: number;
+  end?: number;
+  bottom?: number;
+  start?: number;
+};
+
+export type DraggableMargin =
+  | number
+  | DraggableMarginAxis
+  | DraggableMarginViewport;
+
+export type DraggableDialogProps = DialogProps & {
+  /**
+   * Unique identifier for the draggable dialog.
+   */
+  id?: string;
+
+  /**
+   * Whether the element should remain in the viewport when dragged.
+   * @default true
+   */
+  keepInViewport?: boolean;
+
+  /**
+   * The margin from the viewport to keep the element in when dragged. Only used when keepInViewport is true.
+   * @default 0
+   */
+  margin?: DraggableMargin;
+
+  /**
+   * The initial position of the draggable dialog.
+   * @default { x: 0, y: 0 }
+   */
+  position?: {
+    /**
+     * A initial x coordinate of the draggable dialog.
+     */
+    x?: number;
+
+    /**
+     * A initial y coordinate of the draggable dialog.
+     */
+    y?: number;
+  };
+
+  /**
+   * Text to be announced by screen readers when the dialog is dragged.
+   */
+  announcements?: {
+    /**
+     * Announces the start of a drag action.
+     */
+    start?: string;
+
+    /**
+     * Announces the end of a drag action.
+     */
+    end?: string;
+  };
+};