hello-pangea/dnd

Beautiful and accessible drag and drop for lists with React.

@hello-pangea/dnd

Beautiful and accessible drag and drop for lists with React

Play with this example if you want!

Core characteristics

• Beautiful and natural movement of items 💐
• Accessible: powerful keyboard and screen reader support ♿️
• Extremely performant 🚀
• Clean and powerful api which is simple to get started with
• Plays extremely well with standard browser interactions
• Unopinionated styling
• No creation of additional wrapper dom nodes - flexbox and focus management friendly!

Get started 👩‍🏫

Alex Reardon has created a free course on egghead.io 🥚 (using react-beautiful-dnd) to help you get started with @hello-pangea/dnd as quickly as possible.

Currently supported feature set ✅

• Vertical lists ↕
• Horizontal lists ↔
• Movement between lists (▤ ↔ ▤)
• Virtual list support 👾 - unlocking 10,000 items @ 60fps
• Combining items
• Mouse 🐭, keyboard 🎹♿️ and touch 👉📱 (mobile, tablet and so on) support
• Multi drag support
• Incredible screen reader support ♿️ - we provide an amazing experience for english screen readers out of the box 📦. We also provide complete customisation control and internationalisation support for those who need it 💖
• Conditional dragging and conditional dropping
• Multiple independent lists on the one page
• Flexible item sizes - the draggable items can have different heights (vertical lists) or widths (horizontal lists)
• Add and remove items during a drag
• Compatible with semantic <table> reordering - table pattern
• Auto scrolling - automatically scroll containers and the window as required during a drag (even with keyboard 🔥)
• Custom drag handles - you can drag a whole item by just a part of it
• Able to move the dragging item to another element while dragging (clone, portal) - Reparenting your <Draggable />
• Create scripted drag and drop experiences 🎮
• Allows extensions to support for any input type you like 🕹
• 🌲 Tree support through the @atlaskit/tree package
• A <Droppable /> list can be a scroll container (without a scrollable parent) or be the child of a scroll container (that also does not have a scrollable parent)
• Independent nested lists - a list can be a child of another list, but you cannot drag items from the parent list into a child list
• Server side rendering (SSR) compatible - see resetServerContext()
• Plays well with nested interactive elements by default

Motivation 🤔

@hello-pangea/dnd exists to create beautiful drag and drop for lists that anyone can use - even people who cannot see. For a good overview of the history and motivations of the project you can take a look at these external resources:

• 📖 Rethinking drag and drop
• 🎧 React podcast: fast, accessible and beautiful drag and drop

Not for everyone ✌️

There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing react-dnd. It does an incredible job at providing a great set of drag and drop primitives which work especially well with the wildly inconsistent html5 drag and drop feature. @hello-pangea/dnd is a higher level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists and so on). Within that subset of functionality @hello-pangea/dnd offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by react-dnd. One shortcoming is that grid layouts are not supported (yet). So @hello-pangea/dnd might not be for you depending on what your use case is.

Documentation 📖

About 👋

• Installation
• Examples and samples
• Get started (This is using react-beautiful-dnd)
• Design principles
• Animations
• Accessibility
• Browser support

Sensors 🔉

The ways in which somebody can start and control a drag

• Mouse dragging 🐭
• Touch dragging 👉📱
• Keyboard dragging 🎹♿️
• Create your own sensor (allows for any input type as well as scripted experiences)

API 🏋️‍

• <DragDropContext /> - Wraps the part of your application you want to have drag and drop enabled for
• <Droppable /> - An area that can be dropped into. Contains <Draggable />s
• <Draggable /> - What can be dragged around
• resetServerContext() - Utility for server side rendering (SSR)

Guides 🗺

• <DragDropContext /> responders - onDragStart, onDragUpdate, onDragEnd and onBeforeDragStart
• Combining <Draggable />s
• Common setup issues
• Using innerRef
• Setup problem detection and error recovery
• Rules for draggableId and droppableIds
• Browser focus retention
• Customising or skipping the drop animation
• Auto scrolling
• Controlling the screen reader
• Use the html5 doctype
• TypeScript: type information
• Dragging <svg>s
• Avoiding image flickering
• Non-visible preset styles
• How we detect scroll containers
• How we use dom events - Useful if you need to build on top of @hello-pangea/dnd
• Adding <Draggable />s during a drag (11.x behaviour) - ⚠️ Advanced
• Setting up Content Security Policy

Patterns 👷‍

• Virtual lists 👾
• Multi drag
• Tables
• Reparenting a <Draggable /> - Using our cloning API or your own portal

Support 👩‍⚕️

• Engineering health
• Community and addons
• Release notes and changelog
• Upgrading
• Road map
• Media

Read this in other languages 🌎

⚠️ These following translations are based on react-beautiful-dnd.

• 한글/Korean
• На русском/Russian
• Português/Portuguese
• Ελληνικά/Greek

Creator ✍️

Alex Reardon @alexandereardon

Alex is no longer personally maintaning this project. The other wonderful maintainers are carrying this project forward.

Maintainers 🛠️

• Gabriel Santerre @100terres
• Reece Carolan @Xhale1
• Many @Atlassian's have contributed to the original react-beautiful-dnd. Atlassian is no longer involved with this project.

Collaborators 🤝

• Bogdan Chadkin @IAmTrySound

Thanks 🤗

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.

dnd's Issues

Move from Flow to TypeScript

Description

Related to: atlassian/react-beautiful-dnd#982

• Minimal TypeScript support with declaration file (#3)
• Upgrade Storybook to v6 (Built-in TypeScript support) (#9)
• Upgrade @rollup/* (#13)
• Move Storybook and stories to TypeScript (#14)
• Move our tests to TypeScript (#15)
• Move our source files to TypeScript (#10)
• #131
• #134
• (Nice to have) Help wanted #132

[Idea] Give the people a better bug report template

Right now I think the template for reporting bugs is outdated:

Currently the template from DND

Common issues setup guide

We have created a common setup issues guide to help you troubleshoot common setup problems:

https://github.com/react-forked/dnd/blob/master/docs/guides/common-setup-issues.md

Check your console

In development builds we log warnings to the console for common setup issues. Please have a look to see if it can give you information in overcoming your issue

Are you new to rfd?

If you are new to @react-forked/dnd we recommend taking at look at our getting started course: https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd (This is using react-beautiful-dnd)

It will give you a good base understanding of how everything fits together. This can often be the best help in overcoming your issue.

Duplicates

Before raising a feature request or bug please search through our open and closed issues to see if there is something similar. If you do find one similar you can show it is important to you by adding a reaction (such as 👍) to the issue

Open and closed issues:
https://github.com/react-forked/dnd/issues?utf8=%E2%9C%93&q=is%3Aopen%20is%3Aclosed%20is%3Aissue%20

Expected behavior

Actual behavior

Steps to reproduce

Suggested solution?

Do you have any ideas on how we could fix this?
It is okay if you have no idea!

What version of React are you using?

Take a look at your package.json
Ensure that it satisfies our peer dependency version - see our package.json. (Currently it is "^16.8.0")

What version of @react-forked/dnd are you running?

We will only look into issues that are effecting the latest version. At this stage we are not releasing fixes for previous releases

What browser are you using?

Keep in mind our supported browser matrix https://confluence.atlassian.com/cloud/supported-browsers-744721663.html
If you raise a bug that is not in a supported version we will not be fixing it

Demo

Please provide an example to show the issue. Here is a boilerplate to help you get started:
https://codesandbox.io/s/k260nyxq9v

If you paste a big block of code it can be difficult to debug it.

If it is a visual bug, a video or a gif would be helpful also.

Issues without demo's may not be investigated

Note: stale issues will be removed

When a maintainer asks a question about an issue and it is not responded to within a reasonable time frame then the issue will be closed. We don't want this to happen - but we also do not want to accumulate stale issues

A better template is needed for better bug reports. Personally, I would recommend the template (or something similar) such as Material-UI:
Material-ui Template issues

Move our source files to TypeScript

Description

Related to: #8

• Run flowts ./src to convert Flow files and code to Typescript using https://github.com/zxbodya/flowts
• Fix any typing issues
• Adjust eslint
• Adjust rollup (build to JS and emit declaration file)

[v16.0.0] New organization and maintainer :tada:

Hello fellow GitHubers 👋

As some of you might have noticed, it can be difficult to manage a complex open source project alone and it can have an impact on how long it takes to fix issues. Like for the issue with react 18! Again sorry to have kept you waiting for weeks without any answer. 😞

To make sure it doesn't happen again and to help with all the work ahead of us on this project, we are welcoming a new maintainer @Xhale1 🎉 Thanks to him we have a working version with react 18. (I love the open source community ❤️)

We also plan in the future (sooner than late) to give second life to other un-maintained projects we like and want to keep alive. Some of those projects might not be react related. For this reason we'll rename and move the project to a new organization. This organization is named hello-pangea! If you want new feature and bug fixes, you should plan to migrate to @hello-pangea/dnd. The migration will be as simple as doing a find and replace!

If you want to be a part of this new adventure let us know on discord 👉 https://discord.gg/zKhPpmvCEv

Thank you for your support!

Here's a rough list of what's needed to begin this new chapter:

• add new maintainer @Xhale1 🎉
• add discord join link
• change package name references from @react-forked/dnd to @hello-pangea/dnd
• change github path references from https://github.com/react-forked/dnd to https://github.com/hello-pangea/dnd
• rename existing hello-pangea/dnd repo to hello-pangea/dnd-old
• transfert the ownership of this repo to hello-pangea org
• change domain name from dnd.react-forked.com to dnd.hellopangea.com
• grant repo access to circleci @Xhale1
• make sure circleci works
• make sure all actions continue to work (except circleci and netlify)
• drop netlify
• add vercel @Xhale1
• merge pr containing all the change related to the transfert
• write a blog post about the release, the new name and the new team member! Blog post available here: https://dev.to/100terres/whats-up-with-rfd-578a
• release major version 16.0.0
• deprecate @react-forked/dnd on npm to let people know they should use @hello-pangea/dnd instead of @react-forked/dnd mentioning the blog post (using npm deprecate command)
• let people know on react-beautiful-dnd repo what's happening

Small suggestion for "Not for everyone" section in README/docs

Hi, thank you so much for creating this fork. I really like react-beautiful-dnd.

I have a recommendation for the documentation. You can see in this issue, as well as many others like it, that the library does not currently support grid layouts. It's clear from a discussion in threads like these that grid layouts are a relatively common use case, and yet the documentation doesn't make it clear that the library can't do it, leading many to waste time learning the library before having to use another.

I think it would be a good idea in the "Not for everyone" section to make it extremely clear that the library does not support lists with grid layouts. Or, of course, someone could introduce that feature in this fork 😁

Add react and react-dom v18 as peer dependencies

[v15.0.0] Support react v18

Everything that need to be done in order to support react v18 will be tracked in this issue. You can also have a look at the React v18 milestone.

We are in the early stage of the investigation, so the list is not yet exhaustive. New issue will be added as we discover them.

Must have

• #319
• #318
• #320
• #317

Nice to have

• #393

Setup dependabot.yml

Description

We'll try to have this repo up-to-date ! 🚀

https://docs.github.com/en/free-pro-team@latest/github/administering-a-repository/configuration-options-for-dependency-updates

Need help?

Hi @100terres,

First of all, thank you for your effort!

I would love to start contributing and help giving a second life to the beautiful dnd project. What do you think would be the best channel to discuss possible contributions? Maybe a discord server / github discussions?

Let me know what you think.

Cheers

Improve eslint to lint almost all our files

Description

This is simplify to avoid mistake.

Migrate documentation link to `dnd.react-forked.com`

See: #346 (comment)

Some of the links are still pointing to react-forked-dnd.netlify.com.

Error: Invariant failed: Cannot find droppable entry with id [#] (using virtuoso with nested lists)

Expected behavior

Being able to move an element from a sublist nested in a list to another sublist using virtualization (react-virtuoso)

Actual behavior

I have a main list which each item has a sublist, when I move a draggable item from sublist to another sublist and while scrolling down I get this error: Error: Invariant failed: Cannot find droppable entry with id [#], I assume the droppable component of the source sublist is unmounted when the item of virtualized list disappears and due to that the error is shown but I'm not sure if this is a real bug, it's worth mentioning that this behavior works perfectly if I don't use a virtual list

Steps to reproduce

Create a list and per each item create a sublist, apply virtualization to the main list and try to move an item of any sublist to another sublist (preferably to a sublist far from source sublist) the error happens when the sublist item container is unmounted by the virtualization

Suggested solution?

What version of React are you using?

(Currently it is "^17.0.2")

What version of @hello-pangea/dnd are you running?

(Currently it is "^15.0.0")

What browser are you using?

Demo

https://codesandbox.io/s/silent-currying-2ffv1m?file=/src/index.js

Test against both react version (v16 and v17)

• https://medium.com/welldone-software/two-ways-to-run-tests-on-different-versions-of-the-same-library-f-e-react-17-react-16-afb7f861d1e9
• Inspiration https://github.com/welldone-software/why-did-you-render/tree/master

Support strict mode with react v18

Related issue from original repo: atlassian/react-beautiful-dnd#2350

Support Virtual lists that don't use absolute position

Description

I have been using react-beautiful-dnd in a project that has a virtualized table. I was happy to see that this awesome library has been picked up for maintaining by someone, and I'm hoping a slight change can be made to the mode='virtual' droppable.

My virtualized table doesn't use absolute position to render the items in the windowed list, because they are table elements and absolute position doesn't play nicely with html tables. Unfortunately, the virtual mode of droppable appears to assume that items in the virtual list have been positioned according to their index in the list, and doesn't change the translate values when first dragging. I've tried to create a placeholder row to keep items shifted down, but the position calculations get messed up. I found the following lines that seem to be the culprit:

dnd/src/view/draggable/connected-draggable.ts

Lines 295 to 300 in 02daac9

	if (isAfterCriticalInVirtualList) {
	// In a virtual list the removal of a dragging item does
	// not cause the list to collapse. So when something is 'displaced'
	// we can just leave it in the original spot.
	return getFallback(combineTargetFor);
	}

In my case, removing a virtual item does cause the list to collapse. I'm curious if there's a prop we could add to disable this behavior for certain types of virtual lists? I hacked my node_modules by allowing me to pass a prop (I just called it nonAbsolute) that I can set to true, and in ConnectedDraggable I don't set isAfterCriticalInVirtualList to true if that's true:

dnd/src/state/get-lift-effect.ts

Line 55 in 02daac9

inVirtualList: home.descriptor.mode === 'virtual',

- inVirtualList: home.descriptor.mode === 'virtual',
+ inVirtualList: home.descriptor.mode === 'virtual' && !home.descriptor.nonAbsolute,

I did searches and it seemed to only affect that check, but I'm not sure if it'll have a ripple effect. I'm open to other ideas. Here's a codesandbox that illustrates the issue:

https://codesandbox.io/s/virtual-table-issue-6vns4h?file=/index.js

Support gap used between the draggables in flexbox

Expected behavior

When using gap, with flex it should work properly and similar to margin property.

Actual behavior

When dragging the placeholder is too small and when dropping it lands slightly off place and then snaps back to its correct position.

Demo

https://codesandbox.io/s/vertical-list-with-flex-gap-mt4ugc?file=/src/App.tsx

Roadmap

This issue will serve as a living document of our short and long-term goals for this project.

In no particular order:

• Design a new documentation site using Docusaurus
• Remove redux connected api in favor of redux hooks
• Add new examples to storybook
  • MUI
  • react-virtuoso
  • Tailwind
  • AntD
  • More (?)
• [long-term] support grid layout

Clean up any unused `Flow` related code or definitions

Upgrade @rollup/*

Description

Related to: #8

It is due and it will be easier to make rollup work with TypeScript if we have it up-to-date.

Shadow Root Support

Hello everyone,

Can we add support for shadow Root similarly to this pull request => atlassian/react-beautiful-dnd#2319 ?

Thank you!

Saad

More control over autoScroll

Hi,

This library is awesome. It has greatly empowered my projects. However, I would like to make a feature request: disabling autoScroll dynamically. For my current use case, I need to be able to drag elements without scrolling the container of my Droppables. Trying to dynamically set overflow CSS parameter of the container that contains my Droppables does not work -- there seems to be some sort of override. But, there are many use cases where disabling autoScroll, particularly while dragging something, would be useful or convenient.

As far as I can tell (and I would love to be corrected), this library does not support disabling autoScroll, or controlling the speed of autoScroll, or customizing the margins at which it begins, etc. I am requesting that this feature be added - the ability for the user to set autoScrolling thresholds, and to dynamically enable or disable it.

The original react-beautiful-dnd library also had many similar requests. The following are some examples:

• atlassian/react-beautiful-dnd#1902
• atlassian/react-beautiful-dnd#460

The second issue in particular is interesting, due to this comment: atlassian/react-beautiful-dnd#460 (comment). That comment contains a link to this repository, where the @mjuopperi forked the repository, and was able to add an autoScroll option to the DragDropContext actually without much fuss.

If given the assurance that this feature would be accepted if I were to implement it, I'll go figure it out and set up a pull request ASAP. Actually, regardless of whether or not it will be accepted as a contribution to this library, I'll probably go tinker with it. But please let me know if this feature request would be accepted.

Thank you.

Tree package examples

In the README, it has been given that --> 🌲 Tree support through the @atlaskit/tree package

But there are no examples of how to use it in the storybook docs, any help on how to implement that would be great!

Synchronize commits from `react-beautiful-dnd`

Improve release toolchain

Setup

• husky
• commitlint
• commitizen with @commitlint/cz-commitlint
• conventional commits
• conventional changelog
• release-it

Change dependency manager from Dependabot to Renovate

see: https://github.com/apps/renovate

Move Storybook and stories to TypeScript

Description

Related to: #8

• Run flowts ./stories and flowts ./.storybook to convert Flow files and code to Typescript using https://github.com/zxbodya/flowts
• Adjust Storybook config
• Fix any typing issues
• Adjust eslint

Upgrade Storybook to v6

Description

Related to: #8

This version has a built-in Typescript support. It will make the migration of our codebase to Typescript easier.

Horizontal scroll issue

Hey guys, it seams the after a certain number of columns the placeholder does not work properly. Any idea what could it be?

Edit: the actual number is 6, cannot drop a column after the 6th one

Expected behavior

To scroll and create a space for dropping just as it happens for the 2/3 columns

Actual behavior

After a certain number of columns the placeholder does not seams be working any more

Steps to reproduce

Suggested solution?

What version of React are you using?

^18.2.0

What version of @hello-pangea/dnd are you running?

^16.0.0

What browser are you using?

Electron

Demo

https://www.veed.io/view/4943c614-68ef-4a0b-afd1-cc8c6b315fcb

Remove `console.warn` and `console.error` from the jest test report

When we've upgraded jest from v26 to v27 console.warn and console.error coming from the lib started to appear in the report of the tests.

Support `Flow` type definition

Add Flow type declaration

Bump depedencies

`resetServerContext` not working (in Next.js)

Expected behavior

resetServerContext should prevent hydratation error in a SSR environment (see documentation)

Actual behavior

It throw hydratation errors (at least on Next.JS) while it was working with react-beautiful-dnd

Steps to reproduce

• Create a simple sortable list with Droppable, Draggable and DragDropContext
• Add resetServerContext() in Next.js’ custom Document
• Look at the console:

Warning: Prop `aria-describedby` did not match. Server: "rfd-hidden-text-0-hidden-text-0" Client: "rfd-hidden-text-1-hidden-text-1"

and

@react-forked/dnd

Unable to find any drag handles in the context "1"

👷‍ This is a development only message. It will be removed in production builds.

@react-forked/dnd

A setup problem was encountered.

> Invariant failed: Draggable[id: item-1]: Unable to find drag handle

👷‍ This is a development only message. It will be removed in production builds.

Suggested solution?

Check what diverged from react-beautiful-dnd? Doesn't seem to have any difference 🤔

What version of React are you using?

17.0.2

What version of @react-forked/dnd are you running?

14.0.2

What browser are you using?

Chrome 101.0.4951.64 and Firefox 100.0.2 on macOS 12.3.1

Demo

I created a simple test with original and forked libs, with both SSR and client-side-only implementations

• react-beautiful-dnd (working): https://codesandbox.io/s/nextjs-react-beautiful-dnd-jfvitx?file=/pages/_document.js
• @react-forked/dnd (not working): https://codesandbox.io/s/nextjs-react-forked-dnd-i9tlgl?file=/pages/_document.js

Horizonal Sortable debug

Maybe it's my fault, but I cannot track the bug (I already had it with the react-beautiful-dnd one): I have a sortable list made of divs (Boxes actually because I'm working with material-ui v4). I followed all rules (and the video tutorials), but when I instantiate everything, the divs in the box do not move when the dragged item goes above them. They go left altogether when I reach the very end of the list.

Unfortunately, debugging is very difficult, so before opening a real issue, I guess some might have suggestions to track this down.

Small notice: everything works correctly on the same project with a vertical list.

Error: Invariant failed: Cannot find droppable entry with id

Cannot use virtualized list for Droppable elements. On my project I use lot of this Droppable zones in list, so I need virtualization. But its not supported right now. I think that its quick fix. Just add boolean in props which create Dropable zones during drag. Its bad for performance but its up to you if you want this. Please add this boolean for enable/disable this feature. Thanks

Migrate from `Enzyme` to `@testing-library/react`

To be able to test rfd with react v18 we'll need to migrate our tests that are using Enzyme to @testing-library/react.

Read this blog post for more information: https://dev.to/wojtekmaj/enzyme-is-dead-now-what-ekl

⚠️ Currently migrating the codebase to TypeScript ⚠️

If you are considering opening a pull request, I’ll suggest you wait a bit until the migration to TypeScript is completed. If you open an issue, I’ll let you know once it is done.

Flicker after synchronous state update with react-query

Hey 👋 Love the library, thanks for taking over react-beautiful-dnd, adding typing, supporting React 18 ... it's great!
I had this issue pop up while making the switch from react-beautiful-dnd, which makes me think it's a small regression

Expected behavior

Making a synchronous state update through react-query's setQueryData should not cause a flicker. By "flicker", I mean that the dropped element goes back to its original place then to the right place.

Actual behavior

The dropped element goes back to its original place for a time

Steps to reproduce

0. Implement onDragEnd to make an optimistic synchronous update, using react-query's setQueryData.
1. Drop an item.
2. Witness the flicker.

Suggested solution?

Under the hood, react-query uses react's hook useSyncExternalStore. My best guess is that @hello-pangea/dnd does not wait for the state update before moving the dropped item back to its original place, as is described here

We try hard to ensure that an entire lifecycle is completed before a new one starts. If you find that not to be the case - it is a bug: please raise it!

What version of React are you using?

18.2.0

What version of @hello-pangea/dnd are you running?

16.0.0

What browser are you using?

Chrome Version 105.0.5195.102

Demo

Minimal use case implemented in this sandbox: https://codesandbox.io/s/react-beautiful-dnd-flicker-after-synchronous-update-with-reactquery-n207n1

Screen.Recording.2022-09-19.at.11.26.44.mov

Note: To enhance the issue on this dummy example, I faked a costly rendering time.

Horizontal scrolling not working with vertical scrolling

Great idea to fork the dnd project! This has been raised a couple of times in the old repo so I think it would be a great first bug to fix. Basically horizontal scrolling doesn't work when you drag an item to the edge of the screen. It only appears to be an issue when the columns are also using vertical scrolling.

• atlassian/react-beautiful-dnd#131
• atlassian/react-beautiful-dnd#1783
• atlassian/react-beautiful-dnd#1783
• atlassian/react-beautiful-dnd#1680
• atlassian/react-beautiful-dnd#2003
• atlassian/react-beautiful-dnd#2028

Unexpected behavior in horizontal dragging

I added flex-wrap: wrap; to this elemen, make it multiline:

but when I drag it:

The remaining elements moved together, how do I fix it!

Run cypress for react v16, v17 and v18

Currently our specs are done on our storybook app. With our current setup it will be diffulct to build storybook with a different react version then the one we have in the our package.json.

We've tried with some aliases, but it was not working since storybook code was expecting react 18.

  const reactMajorVersion = process.env.REACT_MAJOR_VERSION;
  const isOldReactVersion = ['16', '17'].includes(reactMajorVersion);
  const reactModuleSufix = isOldReactVersion ? `-${reactMajorVersion}` : '';

  webpackConfig.resolve.alias = {
    ...config.resolve.alias,
    react: require.resolve(`react${reactModuleSufix}`), // react-16 or react-17
    'react-dom': require.resolve(`react-dom${reactModuleSufix}`), // react-dom-16 or react-dom-17
  };

We'll need to move our cypress tests away from storybook and build a small app where we have full control over the configuration and can easily swap react versions.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Use matchDepNames instead of matchPackageNames

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update pnpm to v8.15.7

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(dev-deps): update dependency express to v4.19.2 [SECURITY]
• chore(deps): Replace dependency eslint-plugin-node with eslint-plugin-n 14.0.0
• chore(deps): update dependency @babel/runtime to ^7.24.4
• chore(deps): update dependency node to v20.12.2
• chore(dev-deps): update all non-major development dependencies (@atlaskit/css-reset, @atlaskit/theme, @babel/core, @babel/preset-env, @commitlint/cli, @commitlint/config-conventional, @emotion/styled, @storybook/addon-docs, @storybook/addon-essentials, @storybook/addon-storysource, @storybook/manager-api, @storybook/react, @storybook/react-webpack5, @storybook/theming, @swc/core, @testing-library/react, @types/node, @types/react, @types/react-dom, @types/react-virtualized, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, babel-plugin-module-resolver, cypress, eslint-plugin-cypress, eslint-plugin-react-hooks, lighthouse, react, react-dom, release-it, rollup, storybook, stylelint, typescript)
• ci: update Node.js to v20.12.2
• chore(deps): update dependency react-redux to v9
• chore(deps): update dependency redux to v5
• chore(deps): update pnpm to v9
• chore(dev-deps): update dependency @types/markdown-it to v14
• chore(dev-deps): update dependency eslint to v9
• chore(dev-deps): update dependency eslint-plugin-cypress to v3
• chore(dev-deps): update dependency eslint-plugin-jest to v28
• chore(dev-deps): update dependency lighthouse to v12
• chore(dev-deps): update testing-library monorepo (major) (@testing-library/dom, @testing-library/react)
• ci: update Node.js to v22
• ci: update wagoid/commitlint-github-action action to v6
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

circleci

.circleci/config.yml

• browser-tools 1.4.8
• cimg/node 20.11.1-browsers
• cimg/node 20.11.1-browsers
• cimg/node 20.11.1-browsers
• cimg/node 20.11.1-browsers
• cimg/node 20.11.1-browsers
• cimg/node 20.11.1-browsers
• cimg/node 20.11.1-browsers

github-actions

.github/workflows/chromatic.yml

• actions/checkout v4
• actions/setup-node v4
• actions/cache v4
• pnpm/action-setup v2
• chromaui/action v11

.github/workflows/commitlint.yml

• actions/checkout v4
• wagoid/commitlint-github-action v5

nodenv

.node-version

• node 20.11.1

npm

package.json

• @babel/runtime ^7.24.1
• css-box-model ^1.2.1
• memoize-one ^6.0.0
• raf-schd ^4.0.3
• react-redux ^8.1.3
• redux ^4.2.1
• use-memo-one ^1.1.3
• @atlaskit/css-reset 6.7.1
• @atlaskit/theme 12.6.6
• @babel/core 7.24.3
• @babel/eslint-parser 7.24.1
• @babel/plugin-transform-class-properties 7.24.1
• @babel/plugin-transform-modules-commonjs 7.24.1
• @babel/plugin-transform-object-assign 7.24.1
• @babel/plugin-transform-private-methods 7.24.1
• @babel/plugin-transform-private-property-in-object 7.24.1
• @babel/plugin-transform-runtime 7.24.3
• @babel/preset-env 7.24.3
• @babel/preset-react 7.24.1
• @babel/preset-typescript 7.24.1
• @commitlint/cli 19.2.1
• @commitlint/config-conventional 19.1.0
• @commitlint/cz-commitlint 19.2.0
• @emotion/eslint-plugin 11.11.0
• @emotion/react 11.11.4
• @emotion/styled 11.11.0
• @jest/environment 29.7.0
• @release-it/conventional-changelog 8.0.1
• @rollup/plugin-babel 6.0.4
• @rollup/plugin-commonjs 25.0.7
• @rollup/plugin-json 6.1.0
• @rollup/plugin-node-resolve 15.2.3
• @rollup/plugin-replace 5.0.5
• @rollup/plugin-strip 3.0.4
• @rollup/plugin-terser 0.4.4
• @storybook/addon-docs 8.0.4
• @storybook/addon-essentials 8.0.4
• @storybook/addon-storysource 8.0.4
• @storybook/addon-webpack5-compiler-swc 1.0.2
• @storybook/manager-api 8.0.4
• @storybook/react 8.0.4
• @storybook/react-webpack5 8.0.4
• @storybook/theming 8.0.4
• @swc/core 1.4.8
• @testing-library/dom 9.3.4
• @testing-library/jest-dom 6.4.2
• @testing-library/react 14.2.2
• @testing-library/react-16-17 12.1.5
• @types/express 4.17.21
• @types/fs-extra 11.0.4
• @types/jest 29.5.12
• @types/jest-axe 3.5.9
• @types/jsdom 21.1.6
• @types/markdown-it 13.0.7
• @types/node 20.11.30
• @types/raf-schd 4.0.3
• @types/react 18.2.69
• @types/react-dom 18.2.22
• @types/react-redux 7.1.33
• @types/react-virtualized 9.21.29
• @types/react-window 1.8.8
• @types/seedrandom 3.0.8
• @typescript-eslint/eslint-plugin 7.3.1
• @typescript-eslint/parser 7.3.1
• babel-jest 29.7.0
• babel-loader 9.1.3
• babel-plugin-dev-expression 0.2.3
• babel-plugin-module-resolver 5.0.0
• commitizen 4.3.0
• cross-env 7.0.3
• csstype 3.1.3
• cypress 13.7.1
• dotenv 16.4.5
• eslint 8.57.0
• eslint-config-airbnb 19.0.4
• eslint-config-prettier 9.1.0
• eslint-import-resolver-typescript 3.6.1
• eslint-plugin-cypress 2.15.1
• eslint-plugin-es5 1.5.0
• eslint-plugin-import 2.29.1
• eslint-plugin-jest 27.9.0
• eslint-plugin-jsx-a11y 6.8.0
• eslint-plugin-node 11.1.0
• eslint-plugin-prettier 5.1.3
• eslint-plugin-react 7.34.1
• eslint-plugin-react-hooks 4.6.0
• eslint-plugin-storybook 0.8.0
• express 4.19.1
• fast-glob 3.3.2
• fs-extra 11.2.0
• husky 9.0.11
• jest 29.7.0
• jest-axe 8.0.0
• jest-environment-jsdom 29.7.0
• jest-junit 16.0.0
• jest-watch-typeahead 2.2.2
• jsdom 24.0.0
• lighthouse 11.7.0
• markdown-it 14.1.0
• memory-fs 0.5.0
• postcss-styled-syntax 0.6.4
• prettier 3.2.5
• raf-stub 3.0.0
• react 18.2.0
• react-16 16.14.0
• react-17 17.0.2
• react-dom 18.2.0
• react-dom-16 16.14.0
• react-dom-17 17.0.2
• react-virtualized 9.22.5
• react-window 1.8.10
• release-it 17.1.1
• require-from-string 2.0.2
• rimraf 5.0.5
• rollup 4.13.0
• rollup-plugin-dts 6.1.0
• seedrandom 3.0.5
• storybook 8.0.4
• styled-components 6.1.8
• stylelint 16.3.0
• stylelint-config-recommended 14.0.0
• stylelint-config-standard 36.0.0
• ts-node ^10.9.2
• typescript 5.4.3
• wait-on 7.2.0
• webpack 5.91.0
• react ^16.8.5 || ^17.0.0 || ^18.0.0
• react-dom ^16.8.5 || ^17.0.0 || ^18.0.0
• pnpm 8.15.4

---

• Check this box to trigger a request for Renovate to run again on this repository

Move our tests to TypeScript

Description

Related to: #8

• Run flowts ./test to convert Flow files and code to Typescript using https://github.com/zxbodya/flowts
• Adjust jest config
• Fix any typing issues
• Make sure are typing tests with Flow and Typescript are still working
• Adjust eslint

are old pr's from altassian considered to be incorporated?

Description

Add existing pr's from altassian to the codebase.
i am looking forward especially to this one. which should improve ux for differently sized draggables on droppables

atlassian/react-beautiful-dnd#2291

Run test suite for react v16, v17 and v18

Blocked by: #318

ResizeObserver loop completed with undelivered notifications

Expected behavior

No error message

Actual behavior

Error message "ResizeObserver loop completed with undelivered notifications"

Steps to reproduce

https://virtuoso.dev/react-beautiful-dnd/

In the source code you will find this:
// Virtuoso's resize observer can this error,
// which is caught by DnD and aborts dragging.

window.addEventListener('error', (e) => {
  if (e.message === 'ResizeObserver loop completed with undelivered notifications.' || e.message === 'ResizeObserver loop limit exceeded') {
    e.stopImmediatePropagation()
  }
})

Virtoso is only stopping the error message from throwing. But in real it is a bug. When you remove this code the table is not working anymore because dnd is throwing a lot of errors.

Suggested solution

Sadly no idea.

What version of React are you using?

17.0.1

What version of @react-forked/dnd are you running?

13.0.1

What browser are you using?

Firefox and Chrome

Side informatin / Suggestion:

I only found this repo via the github issue here: Link to github issue react-beautiful-dnd. I think to get more attention to this repo it is important to release at least one version higher than react-beautiful-dnd and maybe you want to open an Issue (eg. "Following up project DND" or anything else) in react-beautiful-dnd to redirect the people searching for alternatives to this repo.

Update documentation related to `Flow` and `TypeScript`

Release v14.0.0 :tada:

What todo:

• Prepare a blog post regarding this release
• Communicate on some issues on the original repo
• Bump version in the package.json
• Publish to npm
• Release note on GitHub

Vertical drag with Safari 15 on iOS is cancelled when the address bar grow

Issue originally opened on react-beautiful-dnd repository: atlassian/react-beautiful-dnd#2367

In iOS 15 Safari shows/hides address bar at appropriate scroll position, and every show/hide will fire resize event. The library cancels dragging on resize event, so automatic scrolling causes cancellation.

Expected behavior

Does not cancel dragging on scroll.

Actual behavior

Does cancel dragging on scroll toward top edge.

Steps to reproduce

1. Open below "vertical list" example in Safari landscape mode.
2. https://codesandbox.io/s/k260nyxq9v
3. Scroll toward bottom edge, you'll find address bar is shrunk.
4. Drag item toward top edge
5. At some point of scrolling, Safari shows address bar.
6. Dragging is cancelled.

Suggested solution?

Remove resize event listener, or make it optional.

Add TypeScript declaration files

Description

Related to: #8

As we want to support typescript a first step toward this would be to mantain our own declaration file right in this project.

We can use this declaration file as a base.

Upgrade Node.js to latest LTS version (Avalaible for our CI)

Description

The goal is to be up to date. Upgrade to a version supported by CircleCI.

Based on this and this it should be Node.js v14.9.0 (Cypress could be on v14.7.0)