feat(components): [modal] add draggable modal

[wzc520pyfm]

trafficstars

Closes #2647

📝 Description

Add a brief description

This pr adds dragging behavior to modal by providing useDraggable hook.

⛳️ Current behavior (updates)

Please describe the current behavior that you are modifying

No

🚀 New behavior

Please describe the behavior or changes this PR adds

This pr adds dragging behavior to modal by providing useDraggable hook.

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

No

👀Preview

https://github.com/nextui-org/nextui/assets/69044080/b064eaf8-b4f9-4b28-9eb0-b01c44a8dd66

Summary by CodeRabbit

• New Features

  • Enhanced modal components with draggable header functionality and overflow handling.
  • Introduced DraggableTemplate and DraggableOverflowTemplate components for improved user interaction.

• Documentation

  • Updated modal documentation with import adjustments and behavior descriptions for draggable features.

• Tests

  • Added tests to ensure the correct functionality of draggable modals and overflow handling.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 09b5b8defba9613ec0ccad580739f6e8a4b60540

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@nextui-org/modal	Minor
@nextui-org/use-draggable	Minor
@nextui-org/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nextui-storybook-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2024 1:05pm

[vercel[bot]]

@wzc520pyfm is attempting to deploy a commit to the NextUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai[bot]]

[!WARNING]

Rate limit exceeded

@wzc520pyfm has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 17 minutes and 17 seconds before requesting another review.

How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

Commits

Files that changed from the base of the PR and between 0c282dd9e975e3f3210cc869a01d20166472e007 and 09b5b8defba9613ec0ccad580739f6e8a4b60540.

Walkthrough

The recent updates enhance modal components in a React application by introducing draggable functionality using Next.js UI. This includes the addition of new hooks for dragging, updates to modal components to support draggability, and improved documentation and examples to aid developers in implementing and understanding the new features.

Changes

File Path	Change Summary
.../modal/index.ts .../modal/src/index.ts	Added imports and exports related to draggable functionality.
.../modal.mdx .../modal/draggable*.ts	Enhanced modal components with draggable features and updated documentation.
.../modal/package.json .../use-draggable/package.json	Added new dependencies for draggable functionality.
.../modal/src/modal-header.tsx .../modal/__tests__/modal.test.tsx	Updated modal header props and tests for draggable modals.
.../use-draggable/*	Introduced new hooks and configurations for handling draggable functionality.

Assessment against linked issues

Objective	Addressed	Explanation
Make modal draggable and change position [#2647]	✅
Implement draggable modals with overflow handling	✅

Possibly related PRs

• #3691: This PR addresses modal positioning when the keyboard appears, which is directly related to the modal functionality being enhanced in the main PR, particularly regarding user interaction and visibility of modal content.

Suggested labels

📋 Scope : Docs

Suggested reviewers

• wingkwong
• jrgarciadev

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example: -- I pushed a fix in commit <commit_id>, please review it. -- Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples: -- @coderabbitai generate unit testing code for this file. -- @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: -- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase. -- @coderabbitai read src/utils.ts and generate unit testing code. -- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format. -- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[wzc520pyfm]

Looks good from the videos. Can you also add it in storybook and add some tests for it?

OK, I have finished. I added it in storybook and add three tests for draggable. Review pls.

[wzc520pyfm]

please update pnpm-lock.yaml and make sure the build and tests can pass.

sorry, i don't know that i need to update lockfile. i have updated it. The build and test can pass at my local env.

But i don't have permission to trigger deployment on github.

[wzc520pyfm]

I think during the dragging, the text shouldn't be highlighted.

Agree, I have implemented it now.

[wzc520pyfm]

Thanks for the PR! I noticed that the dialog becomes immovable when the screen is resized to mobile dimensions. We'll need to address this behavior.

dialog-mobile-dimensions.mov

It looks like moveend is triggered in advance. I found that this seems to be caused by the conflict between modal's touchmove behavior and document.body's touchmove behavior. Maybe it can be solved by disabling the touchmove of document.body.🤔

[wzc520pyfm]

Thanks for the PR! I noticed that the dialog becomes immovable when the screen is resized to mobile dimensions. We'll need to address this behavior. dialog-mobile-dimensions.mov

It looks like moveend is triggered in advance. I found that this seems to be caused by the conflict between modal's touchmove behavior and document.body's touchmove behavior. Maybe it can be solved by disabling the touchmove of document.body.🤔

@ryo-manba I have fixed it. Review pls.

[wzc520pyfm]

Please resolve conflicts. Thanks.

Tonight!

[wingkwong]

Thanks. No rush. This is marked as v2.5.0. We'll have v2.4.7 release soon. I'll revisit after that.