feat(components): [modal] add draggable modal

.changeset/soft-apricots-sleep.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/modal": minor
+"@nextui-org/use-draggable": minor
+---
+
+Add draggable modal

apps/docs/content/components/modal/draggable-overflow.ts

@@ -0,0 +1,46 @@
+const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, useDraggable} from "@nextui-org/react";
+
+export default function App() {
+ const {isOpen, onOpen, onOpenChange} = useDisclosure();
+ const targetRef = React.useRef(null);
+ const dragRef = React.useRef(null);
+ useDraggable({targetRef, dragRef, draggable: true, overflow: true});
+
+ return (
+ <>
+ <Button onPress={onOpen}>Open Modal</Button>
+ <Modal ref={targetRef} isOpen={isOpen} onOpenChange={onOpenChange}>
+ <ModalContent>
+ {(onClose) => (
+ <>
+ <ModalHeader ref={dragRef} className="flex flex-col gap-1">Modal Title</ModalHeader>
+ <ModalBody>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Nullam pulvinar risus non risus hendrerit venenatis.
+ Pellentesque sit amet hendrerit risus, sed porttitor quam.
+ </p>
+ </ModalBody>
+ <ModalFooter>
+ <Button color="danger" variant="light" onPress={onClose}>
+ Close
+ </Button>
+ <Button color="primary" onPress={onClose}>
+ Action
+ </Button>
+ </ModalFooter>
+ </>
+ )}
+ </ModalContent>
+ </Modal>
+ </>
+ );
+}`;
+
+const react = {
+ "/App.jsx": App,
+};
+
+export default {
+ ...react,
+};

apps/docs/content/components/modal/draggable.ts

@@ -0,0 +1,46 @@
+const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, useDraggable} from "@nextui-org/react";
+
+export default function App() {
+ const {isOpen, onOpen, onOpenChange} = useDisclosure();
+ const targetRef = React.useRef(null);
+ const dragRef = React.useRef(null);
+ useDraggable({ targetRef, dragRef });
+
+ return (
+ <>
+ <Button onPress={onOpen}>Open Modal</Button>
+ <Modal ref={targetRef} isOpen={isOpen} onOpenChange={onOpenChange}>
+ <ModalContent>
+ {(onClose) => (
+ <>
+ <ModalHeader ref={dragRef} className="flex flex-col gap-1">Modal Title</ModalHeader>
+ <ModalBody>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Nullam pulvinar risus non risus hendrerit venenatis.
+ Pellentesque sit amet hendrerit risus, sed porttitor quam.
+ </p>
+ </ModalBody>
+ <ModalFooter>
+ <Button color="danger" variant="light" onPress={onClose}>
+ Close
+ </Button>
+ <Button color="primary" onPress={onClose}>
+ Action
+ </Button>
+ </ModalFooter>
+ </>
+ )}
+ </ModalContent>
+ </Modal>
+ </>
+ );
+}`;
+
+const react = {
+ "/App.jsx": App,
+};
+
+export default {
+ ...react,
+};

apps/docs/content/components/modal/index.ts

@@ -8,6 +8,8 @@ import backdrop from "./backdrop";
 import customBackdrop from "./custom-backdrop";
 import customMotion from "./custom-motion";
 import customStyles from "./custom-styles";
+import draggable from "./draggable";
+import draggableOverflow from "./draggable-overflow";
 
 export const modalContent = {
  usage,
@@ -20,4 +22,6 @@ export const modalContent = {
  customBackdrop,
  customMotion,
  customStyles,
+ draggable,
+ draggableOverflow,
 };

apps/docs/content/docs/components/modal.mdx

@@ -41,18 +41,18 @@ NextUI exports 5 modal-related components:
 <ImportTabs
  commands={{
  main: `import {
- Modal, 
- ModalContent, 
- ModalHeader, 
- ModalBody, 
+ Modal,
+ ModalContent,
+ ModalHeader,
+ ModalBody,
  ModalFooter
 } from "@nextui-org/react";`,
  individual:
  `import {
- Modal, 
- ModalContent, 
- ModalHeader, 
- ModalBody, 
+ Modal,
+ ModalContent,
+ ModalHeader,
+ ModalBody,
  ModalFooter
 } from "@nextui-org/modal";`,
  }}
@@ -73,7 +73,7 @@ When the modal opens:
 
 ### Non-dissmissable
 
-By default, the modal can be closed by clicking on the overlay or pressing the <Kbd>Esc</Kbd> key. 
+By default, the modal can be closed by clicking on the overlay or pressing the <Kbd>Esc</Kbd> key.
 You can disable this behavior by setting the following properties:
 
 - Set the `isDismissable` property to `false` to prevent the modal from closing when clicking on the overlay.
@@ -137,6 +137,18 @@ Modal offers a `motionProps` property to customize the `enter` / `exit` animatio
 
 > Learn more about Framer motion variants [here](https://www.framer.com/motion/animation/#variants).
 
+### Draggable
+
+Try to drag the header part.
+
+<CodeDemo title="Draggable" files={modalContent.draggable} />
+
+### Draggable Overflow
+
+Set draggable to true to drag, the default is true. Set overflow to true can drag overflow the viewport.
+
+<CodeDemo title="Draggable" files={modalContent.draggableOverflow} />
+
 ## Slots
 
 - **wrapper**: The wrapper slot of the modal. It wraps the `base` and the `backdrop` slots.

packages/components/modal/__tests__/modal.test.tsx

@@ -1,12 +1,29 @@
 import * as React from "react";
 import {act, render, fireEvent} from "@testing-library/react";
 
-import {Modal, ModalContent, ModalBody, ModalHeader, ModalFooter} from "../src";
+import {Modal, ModalContent, ModalBody, ModalHeader, ModalFooter, useDraggable} from "../src";
 
 // e.g. console.error Warning: Function components cannot be given refs.
 // Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
 const spy = jest.spyOn(console, "error").mockImplementation(() => {});
 
+const ModalDraggable = ({overflow = false}) => {
+ const targetRef = React.useRef(null);
+ const dragRef = React.useRef(null);
+
+ useDraggable({targetRef, dragRef, overflow});
+
+ return (
+ <Modal ref={targetRef} isOpen>
+ <ModalContent>
+ <ModalHeader ref={dragRef}>Modal header</ModalHeader>
+ <ModalBody>Modal body</ModalBody>
+ <ModalFooter>Modal footer</ModalFooter>
+ </ModalContent>
+ </Modal>
+ );
+};
+
 describe("Modal", () => {
  afterEach(() => {
  jest.clearAllMocks();
@@ -108,4 +125,58 @@ describe("Modal", () => {
  fireEvent.keyDown(modal, {key: "Escape"});
  expect(onClose).toHaveBeenCalledTimes(1);
  });
+
+ it("should be rendered a draggable modal", () => {
+ // mock viewport size to 1920x1080
+ jest.spyOn(document.documentElement, "clientWidth", "get").mockImplementation(() => 1920);
+ jest.spyOn(document.documentElement, "clientHeight", "get").mockImplementation(() => 1080);
+ const wrapper = render(<ModalDraggable />);
+
+ const modal = wrapper.getByRole("dialog");
+ const modalHeader = wrapper.getByText("Modal header");
+
+ fireEvent.mouseDown(modalHeader, {clientX: 0, clientY: 0});
+ fireEvent.mouseMove(modalHeader, {clientX: 100, clientY: 50});
+ fireEvent.mouseUp(modalHeader, {clientX: 100, clientY: 50});
+
+ expect(() => wrapper.unmount()).not.toThrow();
+ expect(document.documentElement.clientWidth).toBe(1920);
+ expect(document.documentElement.clientHeight).toBe(1080);
+ expect(modalHeader.style.cursor).toBe("move");
+ expect(modal.style.transform).toBe("translate(100px, 50px)");
+ });
+
+ it("should not drag overflow viewport", () => {
+ // mock viewport size to 1920x1080
+ jest.spyOn(document.documentElement, "clientWidth", "get").mockImplementation(() => 1920);
+ jest.spyOn(document.documentElement, "clientHeight", "get").mockImplementation(() => 1080);
+ const wrapper = render(<ModalDraggable />);
+ const modal = wrapper.getByRole("dialog");
+ const modalHeader = wrapper.getByText("Modal header");
+
+ fireEvent.mouseDown(modalHeader, {clientX: 100, clientY: 50});
+ fireEvent.mouseMove(modalHeader, {clientX: 10000, clientY: 5000});
+ fireEvent.mouseUp(modalHeader, {clientX: 10000, clientY: 5000});
+
+ expect(modal.style.transform).toBe("translate(1920px, 1080px)");
+ });
+
+ test("should be rendered a draggable modal with overflow", () => {
+ // mock viewport size to 1920x1080
+ jest.spyOn(document.documentElement, "clientWidth", "get").mockImplementation(() => 1920);
+ jest.spyOn(document.documentElement, "clientHeight", "get").mockImplementation(() => 1080);
+
+ const wrapper = render(<ModalDraggable overflow />);
+
+ const modal = wrapper.getByRole("dialog");
+ const modalHeader = wrapper.getByText("Modal header");
+
+ fireEvent.mouseDown(modalHeader, {clientX: 0, clientY: 0});
+ fireEvent.mouseMove(modalHeader, {clientX: 2000, clientY: 1500});
+ fireEvent.mouseUp(modalHeader, {clientX: 2000, clientY: 1500});
+
+ expect(document.documentElement.clientWidth).toBe(1920);
+ expect(document.documentElement.clientHeight).toBe(1080);
+ expect(modal.style.transform).toBe("translate(2000px, 1500px)");
+ });
 });

packages/components/modal/package.json

@@ -42,6 +42,7 @@
  },
  "dependencies": {
  "@nextui-org/use-disclosure": "workspace:*",
+ "@nextui-org/use-draggable": "workspace:*",
  "@nextui-org/use-aria-button": "workspace:*",
  "@nextui-org/framer-utils": "workspace:*",
  "@nextui-org/shared-utils": "workspace:*",
@@ -63,6 +64,7 @@
  "@nextui-org/checkbox": "workspace:*",
  "@nextui-org/button": "workspace:*",
  "@nextui-org/link": "workspace:*",
+ "@nextui-org/switch": "workspace:*",
  "react-lorem-component": "0.13.0",
  "framer-motion": "^11.0.22",
  "clean-package": "2.2.0",

packages/components/modal/src/index.ts

@@ -15,6 +15,7 @@ export type {UseDisclosureProps} from "@nextui-org/use-disclosure";
 // export hooks
 export {useModal} from "./use-modal";
 export {useDisclosure} from "@nextui-org/use-disclosure";
+export {useDraggable} from "@nextui-org/use-draggable";
 
 // export context
 export {ModalProvider, useModalContext} from "./modal-context";

packages/components/modal/src/modal-header.tsx

@@ -1,11 +1,16 @@
 import {useEffect} from "react";
 import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
-import {useDOMRef} from "@nextui-org/react-utils";
+import {ReactRef, useDOMRef} from "@nextui-org/react-utils";
 import {clsx} from "@nextui-org/shared-utils";
 
 import {useModalContext} from "./modal-context";
 
-export interface ModalHeaderProps extends HTMLNextUIProps<"header"> {}
+export interface ModalHeaderProps extends HTMLNextUIProps<"header"> {
+ /**
+ * Ref to the DOM node.
+ */
+ ref?: ReactRef<HTMLElement | null>;
+}
 
 const ModalHeader = forwardRef<"header", ModalHeaderProps>((props, ref) => {
  const {as, children, className, ...otherProps} = props;