Beautiful and accessible drag and drop for lists with React

Overview

⚠️ Maintenance & support

This library continues to be relied upon heavily by Atlassian products, but we are focused on other priorities right now and have no current plans for further feature development or improvements.

It will continue to be here on GitHub and we will still make critical updates (e.g. security fixes, if any) as required, but will not be actively monitoring or replying to issues and pull requests.

We recommend that you don’t raise issues or pull requests, as they will not be reviewed or actioned until further notice.


react beautiful dnd logo

react-beautiful-dnd (rbd)

Beautiful and accessible drag and drop for lists with React

CircleCI branch npm

quote application example

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 👩‍🏫

We have created a free course on egghead.io 🥚 to help you get started with react-beautiful-dnd as quickly as possible.

course-logo

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 🤔

react-beautiful-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:

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. react-beautiful-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 react-beautiful-dnd offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by react-dnd. So react-beautiful-dnd might not be for you depending on what your use case is.

Documentation 📖

About 👋

Sensors 🔉

The ways in which somebody can start and control a drag

API 🏋 ️‍

diagram

Guides 🗺

Patterns 👷‍

Support 👩‍⚕️

Read this in other languages 🌎

Creator ✍️

Alex Reardon @alexandereardon

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

Maintainers

Collaborators 🤝

Comments
  • Rendering Virtualization Support

    Rendering Virtualization Support

    Feature request

    We are evaluating D&D libraries and we found that some, like React Sortable have virtualization features or, work with libraries such as React Virtualized.

    Is rendering virtualization support part of the current plans?

    new feature 🎨 priority: high 🔥 
    opened by carlosagsmendes 57
  • Improve reordering with hugely mixed size Draggables

    Improve reordering with hugely mixed size Draggables

    Bug or feature request?

    Bug.

    In case of mixing large-size draggables and small-size draggables we got a crazy behaviour.

    Expected behavior

    I can properly rearrange large draggables and this should look nice (like on small draggables)

    Actual behavior

    In my real application - I can't rearrange large draggables. Medium-sized draggables can be rearranged only if user will cross another item with center of current draggable. The problem is very huge, because only part of draggable does have dragHandleProps. In my sample - it just looks crazy and it's non-trivially to rearrange large draggable, but possible under specific user action.

    Steps to reproduce

    1. Run demo link;
    2. Try to move "Item 2" (large block) between "Item 0" and "Item 1" in one action (it's impossible)
    3. Try to move "Item 2" before "Item 0" in one action (sometime it works, sometime it doesn't)

    What version of React are you using?

    16.4.1

    What version of react-beautiful-dnd are you running?

    10.0.0

    What browser are you using?

    Chrome (latest stable)

    Demo

    https://codesandbox.io/s/qv629nm036

    Thoughts

    It looks like the problem happens because react-beautiful-dnd uses center of draggable as control point. This is especially incorrect in case of drag handles. And even without drag handles it's better to use mouse position inside of draggable as control point

    priority: high 🔥 improvement ⭐️ 
    opened by rd-dev-ukraine 51
  • Allow dynamic additions / removals of dimensions during a drag

    Allow dynamic additions / removals of dimensions during a drag

    This would need to work for both Draggable and Droppable dimensions

    Needed to facilitate virtualisation #68.

    It would also be useful as its own thing. By supporting this we then unlock lazy loading lists during a drag

    new feature 🎨 
    opened by alexreardon 51
  • Discussion: Virtual list api

    Discussion: Virtual list api

    We are planning on shipping virtual list support #68. However, I am not sure what the api should look like.

    👨‍🏫 Full disclosure: I am not a virtual list expert, so please feel free to correct any inaccuracies in my understanding

    Let's get into it

    One big difference from an API perspective of supporting virtual lists is that the dragging item (<Draggable />) can be removed during a drag. Currently, this is not the case. So in order to support virtual lists we need to support the ability to render a clone as the dragging item.

    import React from "react";
    import ReactDOM from "react-dom";
    import { FixedSizeList as List } from "react-window";
    import { Draggable, VirtualDroppable } from "react-beautiful-dnd";
    
    // Note: this example won't work - it is just to see what an api could look like
    
    const Row = ({ index, style }) => (
      <Draggable draggableId={index}>
        {provided => (
          <div
            {...provided.dragHandleProps}
            {...provided.draggableProps}
            style={{
              ...style,
              ...provided.draggableProps.style
            }}
            ref={provided.innerRef}
          >
            Row {index}
          </div>
        )}
      </Draggable>
    );
    
    const Example = () => (
      <VirtualDroppable
        droppableId="droppable"
        renderDraggingItem={provided => (
          <div
            {...provided.dragHandleProps}
            {...provided.draggableProps}
            ref={provided.innerRef}
          >
            Drag Me
          </div>
        )}
      >
        {droppableProvided => (
          <List
            height={150}
            itemCount={1000}
            itemSize={35}
            width={300}
            innerRef={droppableProvided.innerRef}
          >
            {Row}
            {/* no placeholder needed */}
          </List>
        )}
      </VirtualDroppable>
    );
    const rootElement = document.getElementById("root");
    ReactDOM.render(<Example />, rootElement);
    
    

    Droppable renders a clone?

    Right now I am thinking of having a renderDraggingItem prop on the Droppable (or VirtualDroppable) which would be responsible for rendering the clone.

    Then I think, should we always render the dragging item as a clone? I think not as things are working quite well right now, but it is something to consider.

    Persistent?

    We could get away from needing a clone if we could mark an item in a virtual list as persistent after a drag starts so the react component is never unmounted.

    Droppable placeholder

    This would not be needed for a home list as the full list size would not collapse when an item is removed. A foreign list might need an insertion to make room... Oh dear

    discussion 🗣❤️ 
    opened by alexreardon 48
  • 12.0 Release 🎁

    12.0 Release 🎁

    Want to play with the beta? See https://github.com/atlassian/react-beautiful-dnd/issues/1317#issuecomment-534946979

    I am using this issue as a linking point for things going out in 12.0

    Virutal list project

    • #1225
    • #1310
    • #1104
    Releases 📦 
    opened by alexreardon 46
  • Grid Layout?

    Grid Layout?

    Feature Request

    I'm looking to create a drag-and-drop grid system. I'm able to do this using react-dnd and a column/row layout, but I would love to use react-beautiful-dnd and leverage all the great features you've all built.

    In this issue @oyeanuj mentions a grid layout. You say that grids are "out of scope" and I was just checking in to see if grids are anywhere on the roadmap? Or if you have any recommendations on other libraries or approaches to make a dnd grid.

    Great work on this library @alexreardon! Thanks for your help.

    Demo

    grid-dnd

    duplicate 👻 
    opened by a15n 44
  • Native scrolling on mobile

    Native scrolling on mobile

    I upgraded Dovetail to 2.6.2 and reordering groups & cards now works on mobile (yay!). However one thing I noticed immediately is that it's quite difficult to use since you can't scroll. You have to put your finger right on the edge of the screen. Feel free to play around on dovetailapp.com on your phone to see what I mean, or check out these screenshots.

    I read through the note on native scrolling. I don't really want to introduce drag handles to cards & groups since that increases UI complexity, and I also don't want to reduce the width of the draggable area to less than it already is.

    My suggestion would be introducing a 250ms delay before triggering the reorder. This would let people scroll normally while supporting reorder with a ‘long press’. That's how Trello mobile works and what users have become accustomed to.

    Forgive me if I'm missing some technical aspect. I'm not a ‘real’ developer, just a lowly designer 😂

    priority: high 🔥 improvement ⭐️ 
    opened by humphreybc 43
  • An in-range update of storybook is breaking the build 🚨

    An in-range update of storybook is breaking the build 🚨

    There have been updates to the storybook monorepo:

    🚨 View failing branch.

    This version is covered by your current version range and after updating it in your project the build failed.

    This monorepo update includes releases of one or more dependencies which all belong to the storybook group definition.

    storybook is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

    Status Details
    • ci/circleci: install: Your tests passed on CircleCI! (Details).
    • ci/circleci: test-bundle: Your tests failed on CircleCI (Details).
    • ci/circleci: test-unit: Your tests passed on CircleCI! (Details).
    • ci/circleci: test-browser: Your tests passed on CircleCI! (Details).
    • ci/circleci: validate: Your tests passed on CircleCI! (Details).

    Release Notes for v5.2.4

    Bug Fixes

    • Angular: Fix angular2-template-loader / raw-loader version conflicts (#8269)
    • CSF: Warn when CSF and storiesOf mixed in one file (#8411)
    • Addon API: Clean preview hooks when removing a story (#8408)
    • Update button.svelte (#8369)
    • CSF: Ignore __esModule export (#8317)

    Maintenance

    • Publish top-level .js and .d.ts files (#8354)
    Commits

    The new version differs by 27 commits.

    • 847110e v5.2.4
    • 3e037e7 5.2.4 changelog
    • 8f87998 Angular: Fix angular2-template-loader / raw-loader version conf… (#8269)
    • 8de4a4c CSF: Warn when CSF and storiesOf mixed in one file (#8411)
    • a98aece Addon API: Clean preview hooks when removing a story (#8408)
    • 9594d72 Update button.svelte (#8369)
    • 3628d79 Publish top-level .js and .d.ts files (#8354)
    • b13ca05 add missing types for recommended addon-centered imports (#8120)
    • 81335e2 CSF: Ignore __esModule export (#8317)
    • c3b20db chore: replace link URL from stroybook-chrome-screenshot to sto… (#8402)
    • a5cef76 Fix typo in writing stories section (#8374)
    • 2fdd4e3 Fix link (#8378)
    • 57936d9 Fix typo in Introduction: React UI Testing page (#8359)
    • 5ed61d8 Fix typo in duplicated story warning (#8341)
    • e884d9a Remove next tag from docs (#8323)

    There are 27 commits in total.

    See the full diff

    FAQ and help

    There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


    Your Greenkeeper Bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 42
  • Improve the performance of dimension capturing

    Improve the performance of dimension capturing

    Currently there is a DIMENSION_COLLECTING phase before a drag where we request the dimensions for all of the Droppable and Draggable components. This is quite expensive as it calls .getBoundingClientRect and window.getComputedStyle on all the nodes. We need to think more about how we could improve the performance of this. Some options off the top of my head:

    • (simplier) find a cheaper way of getting the margin values off an element. I had a look and I could not find one, but it is worth further investigation
    • (simplier) allow drag movement before all the dimensions are requested (this would not help with keyboard dragging)
    • (more complex) only request a batch of dimensions (such as those in the current viewport) and request more dimensions as needed. This is tricky because it may jank the scroll, and also will change how we calculate the index of the current item.
    performance 🚀 priority: high 🔥 
    opened by alexreardon 42
  • Add mobile / touch support

    Add mobile / touch support

    Currently the library only supports keyboard and mouse dragging. It would useful to add touch support so that it can be used on touch devices (eg phones and tablets)

    new feature 🎨 
    opened by alexreardon 41
  • Auto scrolling

    Auto scrolling

    Current mitigation: use your trackpack or mouse to scroll while you are dragging. There was actually a lot of work done to make sure scroll is being listened to directly

    Currently when dragging with a mouse the window will not automatically scroll. Nor will scroll containers automatically scroll. We could support this behaviour.

    A few things to consider:

    Scroll containers

    • Currently the library does not do too much with the DOM - it just works. Introducing a feature like this might require an additional export: a scrollable container. Perhaps also even an option for Droppables to support auto scrolling. Should it be opt in or default?
    • Window auto scrolling would be relatively simpler and could probably be turned on by default.
    new feature 🎨 priority: high 🔥 
    opened by alexreardon 35
  • fix(sec): upgrade stylelint to 14.0.0

    fix(sec): upgrade stylelint to 14.0.0

    What happened?

    There are 1 security vulnerabilities found in stylelint 13.13.1

    What did I do?

    Upgrade stylelint from 13.13.1 to 14.0.0 for vulnerability fix

    What did you expect to happen?

    Ideally, no insecure libs should be used.

    The specification of the pull request

    PR Specification from OSCS

    opened by 645775992 1
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • DnD with line drop indicators

    DnD with line drop indicators

    Posted in the @hello-pangea/dnd discussion board as well but posting here for more eyes: https://github.com/hello-pangea/dnd/discussions/441

    Hello! Thanks for all of the amazing work on this library by the maintainers. Has anyone had success in building a DnD experience with vertical drop indicators that doesn't use other libraries?

    I'm specifically looking at something like this: https://codesandbox.io/s/react-beautiful-dnd-react-virtualized-forked-c7sm5b?file=/src/facade/draggable.tsx

    Or something like this: https://codesandbox.io/s/spiking-auto-gap-less-assumptions-o6yw9f

    These examples both depend on the @atlas-kit/drag-and-drop libraries which seem to be in early access & are not guaranteed API stability. Does anyone have any thoughts / success on building out these indicator placeholders with just the props provided by the library, or can provide some pointers on how to go about it?

    idea 🤔 untriaged 
    opened by willwang888 0
  • Item hides when Item is placed in Sidebars

    Item hides when Item is placed in Sidebars

    Expected behavior

    When dragging an Item it hides when Used on sidebars which is placed over other

    but works when Item placed on the main
    I placed exact demo code on the sidebar.

    Actual behavior

    Untitled video - Made with Clipchamp

    Steps to reproduce

    Suggested solution?

    What version of React are you using?

    17.0.2

    What version of react-beautiful-dnd are you running?

    13.1.1

    What browser are you using?

    Demo

    untriaged unconfirmed-bug 
    opened by jaskirat1120 0
  • Error while testing a component that uses React Beautiful DnD with React Testing Library and Jest

    Error while testing a component that uses React Beautiful DnD with React Testing Library and Jest

    Expected behavior

    I am trying to write test for a component that uses react-beautiful-dnd with React Testing Library and Jest. Getting this error:

    TypeError: Cannot read properties of undefined (reading 'droppable')
    
    

    Component roughly looks like this:

    import {useEffect, useState} from "react";
    import type {DropResult} from "react-beautiful-dnd";
    import {DragDropContext, Draggable, Droppable} from "react-beautiful-dnd";
    ........
    
    interface Props {
        ......
    }
    
    
    
    export function Wrapper(props: Props): JSX.Element {
        .....
        
        useEffect(() => {
           .....
        }, [...]);
    
       
    
        return (
            <section>
                <DragDropContext onDragEnd={onDragEnd}>
                    <Droppable droppableId="strength" direction="horizontal">
                        {provided => (
                            <div
                                ref={provided.innerRef}
                                >
                                {data.map((strength, index) => (
                                    <Draggable
                                        key={`drag-${some.id}`}
                                        draggableId={`drag-${some.id}`}
                                        index={index}>
                                        {provided => (
                                            <Component
                                                provided={provided}
                                                key={some.id}
                                                something={some}
                                                editMode={editMode}
                                                onDelete={onDelete}
                                                onUpdate={onUpdate}
                                            />
                                        )}
                                    </Draggable>
                                ))}
                                {provided.placeholder}
                            </div>
                        )}
                    </Droppable>
                </DragDropContext>
                )}
            </section>
        );
    }
    

    The test look like this:

    describe("Some component tests", () => {
        
        ........
        test("Passed strength as props is rendered", async () => {
            const some = [{ 
                id: 1,
                cid: 1,
                position: 1,
                name: "some name",
                draft: false,
             },
            {
                id: 2,
                cid: 1,
                position: 2,
                name: "some name 2",
                draft: false,
            }];
    
            render(
                <StrengthsWrapper
                    editMode={true}
                    curriculum_id={1}
                    toggleVisible={true}
                    strengths={strengths}
                    setToggleVisible={() => null}
                    setUpdatedAt={() => null}
                    setMessage={() => null}
                />,
            );
            
            const some = screen.getByText("some name");
            expect(some).toBeInTheDocument();
        });
    });
    

    Actual behavior

    The test to not give that error

    Steps to reproduce

    I am not sure how one could reproduce the error because the component itself is very complicated. This is what the full error looks like:

    TypeError: Cannot read properties of undefined (reading 'droppable')
    
          45 |         }];
          46 |
        > 47 |         render(
             |         ^
          48 |             <Wrapper
          49 |                 editMode={true}
          50 |                 curriculum_id={1}
    
          at useDroppablePublisher (node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.cjs.js:7408:68)
          at Droppable (node_modules/react-beautiful-dnd/dist/react-beautiful-dnd.cjs.js:8288:3)
          at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
          at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)
          at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19049:16)
          at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
          at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
          at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
          at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
          at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
          at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
          at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
          at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
          at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
          at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23964:7)
          at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22779:12)
          at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22707:5)
          at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:22670:7)
          at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:22293:18)
          at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21881:7)
          at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:25482:3)
          at node_modules/react-dom/cjs/react-dom.development.js:26021:7
          at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:22431:12)
          at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:26020:5)
          at Object.render (node_modules/react-dom/cjs/react-dom.development.js:26103:10)
          at node_modules/@testing-library/react/dist/pure.js:101:25
          at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:22380:12)
          at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
          at render (node_modules/@testing-library/react/dist/pure.js:97:26)
          at Object.<anonymous> (src/tests/Some.test.tsx:47:9)
          at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
          at runJest (node_modules/@jest/core/build/runJest.js:404:19)
    ``
    ### 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?
    React 17.0.1
    <!--
      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-beautiful-dnd` are you running?
    13.0.0
    <!--
      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?
    Chrome
    <!--
    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
    --->
    
    untriaged unconfirmed-bug 
    opened by shamsch 0
Releases(v13.1.1)
  • v13.1.1(Aug 30, 2022)

  • v13.1.0(Mar 21, 2021)

    Features

    You can now import default sensors as useMouseSensor, useKeyboardSensor, or useTouchSensor for individual reuse via sensors prop – Thanks @vladmoroz

    React 17 is now supported 🎉 – Thanks @100terres

    Fixes

    Removed redundant event listener – Thanks @hodovani

    Misc

    Various improvements to the docs and examples – Thanks @theBstar @Ardeshir81 @hednowley @RavenAlly @alexbudure @vkentta @johnrees @agilatakishiyev @petyosi @inokawa @ToriK17 @paulshen @ValentinH @featherbear @GarrisonJ

    Documentation is now available in Greek 🇬🇷 – Thanks @hdks55l

    Story source code is now visible in Storybook – Thanks @2stash

    Various internal changes – Thanks @ValentinH

    Source code(tar.gz)
    Source code(zip)
  • v13.0.0(Feb 24, 2020)

    release banner image

    📷 Cover photo by Matheus Ferrero on Unsplash

    🎧 Release soundtrack: Colder Heavens - Blanco White

    Highlights

    • 🛠 Babel changes: no more unintentional polyfilling!
    • ♿️ More reliable on focus messaging. Verified on VoiceOver, JAWS and NVDA screen readers

    This is a low risk breaking version. It is essentially a bug fix release with some API changes. You might need to make some changes if you were unintentionally relying on our unexpected polyfilling, or if you are overriding our default screen reader messaging, then there will be some stuff for you to do.

    Babel

    This has been marked this as a breaking change 💥 as consumers might have been unknowingly relying on polyfills in rbd as a side effect 😲. This is a very low risk breaking change

    We have moved from @babel/runtime-corejs2 to @babel/runtime #1629. rbd aims to never polyfill anything - it should only use ponyfills (This should be the position of most libraries!) Sadly, choosing to use corejs2 meant that rbd did do polyfilling. We have now fixed this. Moving to @babel/runtime also saved a few kbs which is nice too.

    Thanks @TrySound for making this happen!

    Accessibility

    This is marked as a breaking change 💥 as there have been some changes in API - but they are pretty small. If you are not touching any of the rbd aria-* attributes or DragDropContext | liftInstruction then you can upgrade safely.

    It was discovered by @ccveer that our screen reader on browser focus messages where not being read out for particular HTMLElement types #1695 😦. I went on an accessibility deep dive to figure out what we should do, rather than just changing things until something worked. As a result of this research and experimentation with various screen readers (VoiceOver, JAWS and NVDA), I have made some small modifications to provide more principled and robust on focus announcements.

    Here are some screenshots of things working correctly:

    | VoiceOver | JAWS | NVDA | |-----------|------|------| | voiceover | nvda | jaws |

    If you are providing custom screen reader messages, be sure to check out our updated screen reader guide.

    Changes

    // DragDropContext
    - DragDropContext | liftInstruction
    + DragDropContext | dragHandleUsageInstructions
    
    // Drag handle
    - DragHandleProps | aria-labelledby
    + DragHandleProps | aria-describedby
    + DragHandleProps | role
    

    Usage instructions

    Moving from liftInstruction to dragHandleUsageInstructions to better reflect that we are now using to provide all of the assisted technology usage instructions, and not just the lift instructions. Previously our screen reader preset gave the instruction to start a drag on the drag handle, and other instructions after onDragStart in an announcement. We now give all of the usage instructions on the elements description. This seems to line up best with the intended use of an elements accessible description property. We are now using aria-describedby to set a description on a drag handle with interaction usage instructions as recommended by the W3C. aria-describedby points to a hidden element that contains the text you provide to dragHandleUsageInstructions

    No longer overriding 'name'

    A label one way to control the name of an element. The name is usually the content of the element and is often used to identify an element. We don't want to be touching the name so we are no longer using aria-labelledby

    Adding a role

    Lots of accessibility terminology here! If you are interested in the details check out our screen reader guide

    We now add a role to a drag handle. A drag handle is an interactive element as it has a tabindex. We now also add a role to convert the drag handle into a widget. Adding a role is needed for NVDA (a screen reader) to read out an interactive elements accessibility properties (name, role, value) 😅.

    Once axe-core is updated in Google lighthouse we will also add a aria-roledescription to give a more descriptive role. We didn't want to include this change until lighthouse was okay with it to prevent consumers from getting punished for (incorrect) accessibility violations. You are welcome to add your own aria-roledescription today if you want if you don't mind the lighthouse violation. You can track this change here: #1742

    // Will add this in an upcoming patch release
    DragHandleProps | aria-roledescription="Draggable item"
    

    Fixes

    • The Sensor API will now correctly release forcefully abandoned locks #1699. Thanks @nerdkid93 for finding this one
    • A browser error will no longer be thrown when navigating with turbolinks #1751. Thanks @sdb1228 for raising this, as well as providing a fix and test 👏❤️

    Other

    • Two updates to our table pattern by @elamje!! A new approach suggestion #1692 and a grammar fix #1690 🎉
    Source code(tar.gz)
    Source code(zip)
  • v12.2.0(Dec 5, 2019)

    Overhauled collision engine #930

    Banner RBD v12.2.0

    In this release we have rewritten our collision engine to better account for mixed sized draggables and droppables.

    Mixed sized draggables

    Old collision engine | New collision engine :-------------------------:|:-------------------------: large-items-sucked | big-item-fixed

    Mixed sized droppables

    Old collision engine big-list-broken 2

    New collision engine large-items-nice

    ✍️We wrote a blog which goes deep into the improvements we have made: Overhauling our collision engine

    A huge thanks to @caspersmith who helped us find a new approach to doing item collisions 🎉

    We have listed this as a minor change as it is an intentional change of behaviour

    Fixes

    • More robust server side rendering (SSR) check to ensure we do not use useLayoutEffect on the server to avoid React warnings. We now use the same strategy as React and Redux. #1636. Thanks @LinusCenterstrom for contributing this one!
    • Removes duplicate code from the dimension locking example #1637. Good catch, @CraigEge!
    • Removes duplicate checks in is-position-in-frame #1635. @danieldelcore, nice 👀

    All of these fixes resulted in a patch release (which got absorbed by the minor change

    A new maintainer joins the team!

    @danieldelcore has been added as a maintainer to rbd. Welcome @danieldelcore ! He greatly assisted in creating our new collision engine 👏

    Daniel Del Core joins the fight

    Thanks

    A number of Atlassian's helped get this release over the line. Special shout out to:

    • Jake Miller
    • Ee Venn Soh
    • Tamarah Walsh
    • James Rotanson (for the amazing cover art)
    Source code(tar.gz)
    Source code(zip)
  • v12.1.1(Nov 15, 2019)

    Fixes

    • Moving jest-axe from dependency to devDependency #1614. Thanks @dominykas for the pickup and pull request!

    This resulted in a patch release.

    Source code(tar.gz)
    Source code(zip)
  • v12.1.0(Nov 14, 2019)

    New onBeforeCapture responder #1588

    <DragDropContext /> | onBeforeCapture is called after we know a drag will start, but before any dimensions have been collected from the DOM. It is an opportunity to add or remove <Draggable /> and <Droppable /> components, or modify element sizes.

    ⚠️ Warning: this is pretty powerful and it can be used to do great things, as well as terrible things.

    For more details, check out our responders guide

    In the following example, I am adding a trash bin (<Droppable />) in onBeforeCapture with some items (<Draggable />) in it to show off the kind of thing you can do ♻️

    before-on-capture-2 2019-11-14 16_48_03

    Responder lifecycle
    
    + 1. `onBeforeCapture`: a drag is about to start and dimensions have **not been collected** from the DOM
    2. `onBeforeDragStart`: a drag is about to start and dimensions **have been captured** from the DOM
    3. `onDragStart`: A drag has started
    4. `onDragUpdate`: Something has changed during a drag
    5. `onDragEnd` **(required)**: A drag has ended. It is the responsibility of this responder to synchronously apply changes that has resulted from the drag
    

    This change resulted in a minor version bump

    Fixes

    • Fixing issue with announcer and hot module reloading #1584. Thanks @Mangatt for raising this one ❤️
    • Improving the accessibility of lift instructions #1568. Thanks @flacerdk for finding this and @seancurtis for the fix! @seancurtis went the extra mile and also created a jest-axe help us have even better accessibility coverage. It seems to pick up a bit more than our existing lighthouse build
    • Fixing typo in our reparenting pattern. Thanks @TrySound for raising it

    These fixes resulted in a patch version bump (which got eaten by the minor version bump)

    Source code(tar.gz)
    Source code(zip)
  • v12.0.0(Oct 28, 2019)

    release banner

    🎧💃 Release song: You can call me Al by Paul Simon

    Release at a glance 👀

    New

    • 👾 Virtual list support: unlocking 10,000 items @ 60fps
    • 🎮 Sensor API enabling any input + scripted experiences
    • 👶 Can now drag a clone
    • 🔒 Strict Content Security Policy (CSP) support and guide
    • 🖼 Guide for avoiding image flickering

    Improvements

    • 🏃‍♀️ 10% faster + 25% less memory usage for everyone
    • 🎯 More robust browser focus retention
    • ♿️ Accessibility overhaul with perfect lighthouse score
    • 📱 Dragging with touch now allows for reparenting
    • 🧨 Reworked error handling
    • 🎩 Drop animation now flushed on user scroll
    • 👩‍⚕️ New development only warning for invalid <Draggable /> | index setups
    • 📖 Lots of documentation touch-ups

    Will my app break with 12.0?

    For most people: you can safely upgrade to 12.0! 🎉 If you are doing any of the following then you will need to change some things. This is just a super quick reference to see if you can upgrade safely.

    • Patching onKeyDown, onMouseDown or onTouchStart in DragHandleProps. These event handlers have been removed to support our new sensor approach, and ultimately for good cloning and virtual list support.
    • We have renamed our data-* attributes. So if you were using them (perhaps in a test), then things will break for you
    • We are no longer using aria-roledescription for lift instructions. Please now use <DragDropContext /> | liftInstruction
    • Using @atlaskit/tree 🌲 or something similar? You will need to stay on 11.x for now

    More details on these changes are provided below ↓.

    Virtual list support 👾

    #1125 #1310 #1104

    react-beautiful-dnd (rbd) now allows you to:

    • reorder items within virtual lists
    • move items between virtual lists

    Virtual lists offer an extreme performance improvement over standard lists

    • Standard lists: performance based on total of list items. O(n)
    • Virtual lists: performance based on (roughly) on amount of visible items. Near 0(1) (or 0(visible n))

    With react-beautiful-dnd + virtual lists it is possible to have drag and drop with 10,000 items running at 60fps 🥳

    Here are some examples using react-window:

    virtual-board

    It works with keyboard dragging too! 🎹

    virtual-list-keyboard

    We have created a virtual list guide as well as react-window and react-virtualized examples.

    Have a play with it 🤹‍♂

    Library support for virtual lists

    react-beautiful-dnd is designed to work with existing virtual list solutions and does not have its own virtual list abstraction. There is no official "virtual list" specification or implementation for the web. Different virtual list libraries achieve windowing through various techniques. So we cannot guarantee that react-beautiful-dnd will work with every virtual list library.

    Sensor API 🎮

    sensor api logo

    With our Sensor API it is now possible to:

    • Create drag and drop interactions from any user input
    • Create beautiful scripted experiences

    The public Sensor API is the same API that our mouse, keyboard, and touch sensors use. So it is powerful enough to drive any experience we ship out of the box 📦

    Sensor API documentation 📖

    These are some examples to show off what is possible with the Sensor API. The examples are currently not built to be production-ready. Please reach out if you would like to help improve them or add your own!

    | Voice 🗣 | Webcam 📷 | Thought 🧠 | | :-------: | :---------: | :----------: | | voice sensor | webcam-sensor | thought sensor | | rbd-voice-sensor
    created by @danieldelcore | rbd-webcam-sensor
    created by @kangweichan | rbd-thought-sensor
    created by @charliegerard |

    | With controls | Run sheet | Onboarding | | :--------: | :---------: | :------------: | | controls | multiple-drag-drop-context | onboarding | | Mapping controls to movements | Running scripted experiences along side a user controlled drag | An scripted onboarding experience for a trip planning application |

    ✍️ Raathi Kugarajan has written a blog : "Scripted natural motion with react-beautiful-dnd" which outlines how you can create scripted user behaviour with the Sensor API 👏

    The Sensor API uses a little state machine model which is pretty cool

    data flow

    Also, sensors can be React hooks. Yep! React hooks as public API! 🏄‍♀️

    Cloning API

    The Cloning API is a first-class way of reparenting a <Draggable />s into another DOM location while a drag is occurring. Previously we required you to use your own ReactDOM.createPortal. We now have a mechanism to do this for you!

    When using our cloning API the original <Draggable /> is removed while the drag is being performed; a new clone is rendered (using <Droppable /> | renderClone) into the container element (controllable using <Droppable /> | getContainerForClone)

    Using our cloning API is required for compatibility with virtual lists.

    Cloning API documentation 📖

    Strict Content Security Policy (CSP) support 🔒

    #1050 #1037

    react-beautiful-dnd creates some <style> elements in the <head> and dynamically updates their values as a performance optimisation (see our preset style guide and Dragging React performance forward). This is considered unsafe inline behaviour and will violate the strict CSP policy: Content-Security-Policy: style-src 'self'.

    A new nonce mechanism has been created to allow for usage of the stricter style-src 'self'. A Content Security guide has also been created.

    A huge shout out to @Zweder for this addition. He did an enormous amount of work (#1037) including:

    • Adding support to add a nonce to our <style> element
    • Browser testing: Created a stand-alone server with various CSP implementations. Created a cypress test to ensure that various CSP configurations behave as expected with rbd.
    • Created an initial CSP guide

    Thanks @Zweder ❤️👏

    Guide: avoiding image flickering

    #1311

    A few people have found that when dragging a <Draggable /> that contains an img, certain actions can cause the img to flicker. We have created a new guide that explains what causes image flickering and how you can avoid it.

    Better performance 🏃‍♀️

    Even if you are not using virtual lists, things are getting faster!

    • ~10% faster dragging
    • ~25% less memory usage

    Correction: I originally listed non-virtual list gains as: “30% faster dragging and 45% less memory usage”. However, in preparing a blog I did some deeper investigation and these numbers to not be accurate. So I have updated them

    These gains came from cleaning up some internal abstractions and from rearchitecting our event system to support virtual lists.

    Browser focus management 🕵️‍♂️

    rbd tries to intelligently retain browser focus on the dragging item through the drag and drop lifecycle if it needs to. The previous approach did not work well in a number of scenarios including combining and our new cloning api.

    Internally we have changed to a more robust focus retention solution. We have also created a browser focus guide which goes into detail about the rules that govern when we do and do not give drag handles browser focus.

    We have also moved to cypress.io for our browser focus tests to ensure that our browser focus management is working exactly as we expect.

    Setup problem detection and error recovery

    #1108. #1472. Thanks for raising this @lakesare and @mattkrick. Thanks @thesuperhomie for exploring the problem!

    Historically we have tried hard to ensure that if an error occurs, that the user is given a good experience. However, our error handling strategy had some problems 🤦‍♂️:

    • Multiple logging of the same error
    • Subject to infinite loops for setup problems
    • Logging of errors not caused by rbd
    • Swallowing of all invariant errors, even if they are not rbd ones

    Good news though! All of these problems have been fixed! We also created a new detailed guide which explains exactly what rbd does when it encounters different types of errors. This makes it easier to know how to do you own error handling in collaboration with rbd.

    Setup problem detection and error recovery 📖

    Accessibility 💯

    #1288. Thanks @amitnavale for raising this!

    Stacy London and Sean Curtis have improved the accessibility of rbd as a part of an Atlassian shipit project.

    Accessibility 100%
    1. rbd has moved away from using aria-roledescription for lift instructions. aria-roledescription performed inconsistently with various screen reader setups and did not score well with accessibility audit software. rbd now uses a more robust technique: a visibility hidden element. The text of the element is controlled by <DragDropContext /> | liftInstruction. This instruction is tied to a drag-handle using aria-labelledby. The screen reader guide has been updated.
    2. rbd now has a Google lighthouse build as a part of our CI to ensure that rbd has a perfect accessibility score 💯 (at least according to Google)
    3. We have made some minor modifications to the colours in our examples to improve their contrast ratio.

    Portals now work with touch dragging

    #582. Thanks to @Chariyski, @paceto256, @TrySound

    Previously it was not possible to use your own portal (React.createPortal) with touch dragging (see #582). This was because of how touch events work with DOM element reparenting. The new sensor architecture overcomes this problem. So you are now able to use your own portals with touch dragging! Touch dragging also works perfectly with the new first-class Cloning API

    Scrolling clears a drop animation

    Any scroll event during a drop animation will now fast forward the drop animation. This prevents an item dropping into a strange location and allows the user to get on with what they are trying to do.

    | Before | After | | ------------- |-----------------| | If a user scrolls during a drop animation the drop position does not get updated and looks lame | Any user scroll during a drop animation fast forwards the drop | | no-drop-flush | with-drop-flush |

    🐢 Animations slowed down to make what is going on more obvious

    Index helper

    There are two rules for <Draggable /> | index values:

    • Must be consecutive. [0, 1, 2] and not [3, 5, 8]
    • Must be unique with a <Droppable /> (no duplicates). (Technically this one is covered by the first rule, but it is worth calling out)

    Not obeying these rules can lead to bugs that can be difficult to track down. In order to help people, we have added development only warning messages when you violate either of these rules. See Setup problem detection and error recovery

    Screen Shot 2019-06-25 at 4 21 37 pm

    Bug fixes

    • If a drag started when a home placeholder was animating closed after a completed drag then the collected dimension could include the size of the collapsing placeholder
    • When re-entering a home list that had combine enabled, if you entered below the where the item started then the combine target would be incorrectly calculated #1529. Thanks @kruser for raising this one.
    • Auto scrolling on a position:fixed list now works correctly in ie11 #1317. Thanks @nathanpower for all your efforts on this one!

    Other improvements

    • (Internal) New shared registry. This allows for 0(1) lookups across the application
    • (Internal) Refactored keyboard displacement engine. In order to support virtual lists, we needed to overhaul how we do keyboard movements. Previously we patched an existing data structure to get the new impact. This patching was kinda gnarly and has been a source of brittleness. Patching also fell over when it came to virtual lists as items potentially displaced items are being added and removed during a drag. We now recalculate the data structure every time based on the destination
    • (Internal) A large movement away from enzyme to @testing-library/react in order to test behaviours rather than implementation.
    • Unmounting during a drag will still fire the drag end announcement
    • Restoring shouldRespectForcePress behaviour for touchpads #1401
    • Upgrading to [email protected]
    • Upgrading all dependencies

    Dropping tree support (for now) 🌲😢

    #1547

    In order to get virtual list support across the line we needed to remove the previous dynamic addition and removal behaviour which is required for trees. We do plan on supporting this behaviour again soon - we need it for @atlaskit/tree! For people who are still using this behaviour, you will need to stay on 11.x for now. You can track updates here: #1547

    Adding peer dependency: react-dom

    This is technically a breaking change 💥. However, the risk of breaking anyone is extremely low.

    Previously we did not have a peerDependency on react-dom as we did not call anything from it directly. react-dom would have been required to mount rbd into the DOM with ReactDOM.render(), but rbd did not use react-dom directly. Our new Cloning API uses ReactDOM to create a portal with ReactDOM.createPortal. So we have added react-dom as a peerDependency

      "peerDependencies": {
        "react": "^16.8.5",
    +    "react-dom": "^16.8.5"
      },
    

    Changes

    Updates to our API

    data attributes

    We are now leaning on data attributes a bit more internally. In order to avoid having super long data attributes we have moved to a new naming scheme for our data attributes. I will go into the specific changes for our components in following sections

    - data-react-beautiful-dnd-*
    + data-rbd-*
    

    Ids are strings

    Might break people, but we are simply leaning on pre-exiting types

    It has always required that draggableId and a droppableId be a string. This is communicated in our types. Up until now you technically could, maybe, possibly, sometimes, get away with using a number when nobody was looking and mum was in the other room. However, due to internal changes that is no longer possible. You will now get errors if a draggableId or droppableId is not a string. We will warn you in the console about this setup issue. See Setup problem detection and error recovery

    DraggableRubric

    This is a minor change as it introduces a new type

    We have created a new type DraggableRubric which represents core information about a <Draggable />. It is the same information that was previously available inside of DragStart just without mode which changes depending on the drag type. The type has been pulled out of DragStart for usage elsewhere.

    +type DraggableRubric = {|
    +  draggableId: DraggableId,
    +  type: TypeId,
    +  source: DraggableLocation,
    +|};
    
    // published when a drag starts
    export type DragStart = {|
    -  draggableId: DraggableId,
    -  type: TypeId,
    -  source: DraggableLocation,
    +  ...DraggableRubric,
      mode: MovementMode,
    |};
    

    <Draggable /> | DraggableProvided | DraggableProps

    This is a major change 💥. The break is caused by a renaming of the data attributes. For most consumers this will be a safe upgrade as these data attributes should generally not be leaned on

    The children function now has a type: DraggableChildrenFn and a third argument: DraggableRubric. The rubric allows you to retrieve information about the <Draggable /> from within your children function. The new DraggableRubric value is especially useful when using the new <Droppable /> | renderClone api. See our new reparenting guide

    type DraggableProps = {|
      // inline style
      style: ?DraggableStyle,
    
    -  'data-react-beautiful-dnd-draggable': string,
    
    +  // used for shared global styles
    +  'data-rbd-draggable-context-id': string,
    +  // used for lookups
    +  'data-rbd-draggable-id': string,
      // used to know when a transition ends
      onTransitionEnd: ?(event: TransitionEvent) => void,
    - children: (DraggableProvided, DraggableStateSnapshot) => Node | null+ children: DraggableChildrenFn,
    
    + // New type for draggable children function.
    + // Adding a third argument to children function: DraggableRubric
    + type DraggableChildrenFn = (
       DraggableProvided,
       DraggableStateSnapshot,
    +   DraggableRubric,
    + ) => Node | null;
    |};
    

    <Draggable /> | DraggableProvided | DragHandleProps

    This is a major change 💥. The most likely this to break people is the removal of the on element event listeners. These are no longer required with our new sensor approach. So you no longer need to patch event listeners to add your own. We will still call event.preventDefault() on events that we use so you know whether they are being used for a drag. See how we use dom events

    type DragHandleProps = {|
    +  // focus management is now handled without needing these handlers
    -  onFocus: () => void,
    -  onBlur: () => void,
    
    +  // new sensor api does not require on element event handlers
    -  onMouseDown: (event: MouseEvent) => void,
    -  onKeyDown: (event: KeyboardEvent) => void,
    -  onTouchStart: (event: TouchEvent) => void,
    
    +  // Moving to new data-* format
    -  'data-react-beautiful-dnd-drag-handle': string,
    +  // what draggable the handle belongs to
    +  'data-rbd-drag-handle-draggable-id': DraggableId,
    +  // What DragDropContext the drag handle is in
    +  'data-rbd-drag-handle-context-id': ContextId,
    
    +  // New way of doing lift announcements
    -  'aria-roledescription': string,
    +  // id of drag handle aria description for screen readers
    +  'aria-labelledby': ElementId,
    
      tabIndex: number,
      draggable: boolean,
      onDragStart: (event: DragEvent) => void,
    |};
    

    <Droppable />

    This is a minor change. It enables using a clone as well as virtual lists

    type Props = {|
      // required
      droppableId: DroppableId,
      // optional
      type?: TypeId,
    +  mode?: DroppableMode,
      isDropDisabled?: boolean,
      isCombineEnabled?: boolean,
      direction?: Direction,
      ignoreContainerClipping?: boolean,
    +  renderClone?: DraggableChildrenFn,
    +  getContainerForClone?: () => HTMLElement,
      children: (DroppableProvided, DroppableStateSnapshot) => Node,
    |};
    
    +  type DroppableMode = 'standard' | 'virtual';
    

    <Droppable /> | DroppableProps

    This is a major change 💥. For most consumers, this will be safe as these data attributes should generally not be leaned on

    type DroppableProps = {|
      // used for shared global styles
    -  'data-react-beautiful-dnd-droppable': string,
    +  'data-rbd-droppable-context-id': ContextId,
    +  // Used to lookup
    +  'data-rbd-droppable-id': DroppableId,
    |};
    

    <Droppable /> | DroppableStateSnapshot

    This is a minor change. It adds some more information that is useful when building virtual lists

    type DroppableStateSnapshot = {|
      // Is the Droppable being dragged over?
      isDraggingOver: boolean,
      // What is the id of the draggable that is dragging over the Droppable?
      draggingOverWith: ?DraggableId,
      // What is the id of the draggable that is dragging from this list?
      // Useful for styling the home list when not being dragged over
      draggingFromThisWith: ?DraggableId,
    +  // Whether or not the placeholder is actively being used.
    +  // This is useful information when working with virtual lists
    +  isUsingPlaceholder: boolean,
    |};
    
    

    <DragDropContext />

    This is a minor change. It is goes along with a major change 💥 to how we do lift announcements. Lift announcements are now done by the <DragDropContext /> and not <Draggable /> | DraggableProvided | DragHandleProps

    type Props = {|
      ...Responders,
      // We do not technically need any children for this component
      children: Node | null,
      // Read out by screen readers when focusing on a drag handle
    + liftInstruction?: string,
    + // Used for strict content security policies
    + // See our [content security policy guide](/docs/guides/content-security-policy.md)
    + nonce?: string,
    + // See our [sensor api](/docs/sensors/sensor-api.md)
    + sensors?: Sensor[],
    + enableDefaultSensors?: ?boolean,
    |};
    

    Thanks 🤝

    thanks

    This release has been a huge effort to get across the line. Thank you to everyone who participated in giving feedback, trying out our alpha and beta releases and raising suggestions and bugs. A special thank you to everyone who offered words of encouragement along the way - it helped more than you think.

    A big thank you to the following people for their efforts in supporting this release:

    Source code(tar.gz)
    Source code(zip)
  • v11.0.5(Jul 22, 2019)

    Fix: iOS experience 🛠

    We have released a fix for scrolling and clicking on iOS 📱#1401 (#1396 #1367). A big thanks to @gavrichards and @jimmybillings for their help troubleshooting this one.

    This area is a minefield to get right with issues in webkit as well as firefox.

    Additionally, our force press logic for touchpad input types was not working due to a recent safari behaviour change. Touchpad input types on MacOS are now always respected and shouldRespectForcePress is not consulted. If a force press occurs then a drag will be cancelled. We needed to make this change due to a limitation in the current event system. We have managed to get shouldRespectForcePress working correctly for touchpad input devices in our upcoming 12.0 event system as it gives us a bit more flexibility.

    Other

    • Consistent formatting for foreign language documentation links #1371. Thanks @timhaywood
    • Adding missing detail to responders.md #1369. Thanks @Denchick777

    12.0 alpha versions are out! 🐣

    We have started releasing alpha versions of our upcoming 12.0 release. For now, it would be great to get people to start using it with their existing setups to see if they experience any issues. There are a number of breaking changes, but most consumers will not be affected.

    You can find the latest alpha versions here: #1225

    It would be especially to good to hear from you if you are using an iframe as a portal. We currently have no test coverage for this so it would be good to get a working example to play with

    Don't use the alpha if you are using:

    • Our data-* attributes (their names and values are changing)
    • onTouchStart, onMouseStart, onKeyDown on a drag-handle (they are being removed)

    We will move to beta versions when all of our tests go green ✅

    Source code(tar.gz)
    Source code(zip)
  • v11.0.4(Jun 10, 2019)

    Fixes

    • Fixing incorrect visibility detection for horizontal lists #1344

    This caused a patch release

    Other

    • Adding Portuguese for docs 🇧🇷 #1341. Thanks @dudestein!
    • Adding Russian translation for docs 🇷🇺 #1316. Thanks @vtereshyn!
    • Adding react-beautiful-dnd-test-utils to the community section #1300. Thanks @colinrcummings!

    Soon: v12.0

    We are hard at work on 12.0 for react-beautiful-dnd. The main purpose of the release is to support drag and drop in virtual lists. We are currently shipping alpha versions. There is still a lot of things to decide on and test. If you are interested in helping out please head over to our discussion page

    Source code(tar.gz)
    Source code(zip)
  • v11.0.3(May 8, 2019)

    Fixes

    • Fixing touch dragging for firefox browsers #1296. A recent firefox bug causes touchmove events in capture event listeners to be broken. I have created a firefox bug report. As a workaround we are using non capture listeners for touchmove which is fine for our use case. Thanks @kamilmoskal for reporting the problem
    • Fixing issue where dragging in jsdom could cause an error to be thrown if getComputedStyle was not mocked correctly #1297. See https://github.com/alexreardon/css-box-model/pull/9
    • Fixing flow error #1294. Thanks heaps @TrySound!

    Engineering health

    • Bumping internal dependencies #1297
    Source code(tar.gz)
    Source code(zip)
  • v11.0.2(Apr 29, 2019)

    Encouraging correct usage of keys

    When rendering items in a list React recommends using a key to keep track of the item between re-rendering (docs, guide). In 10.x we covered over some issues when incorrectly using keys. 11.x did not mask incorrect key usage. In this release we have:

    • 👩‍⚕ Restored the old (still somewhat broken) behaviour when incorrectly using keys
    • 👷‍♀ Logging a development only warning when we detect incorrect key usage
    • 👩‍🏫 Created a guide to help you using key with react-beautiful-dnd

    Closes #1274 #1278 #917

    Other

    • Internal linting for useLayoutEffect (#1281)
    Source code(tar.gz)
    Source code(zip)
  • v11.0.1(Apr 24, 2019)

    Fixes

    • Drag handle will no longer steal focus from children that auto focus #1271. Thanks @mDibyo for raising this

    Other

    • Improved documentation wording #1270 by @timhaywood
    • Adding more function component examples in the docs #1266
    • Internal: correctly leveraging eslint-plugin-react-hooks with useMemoOne #1264
    Source code(tar.gz)
    Source code(zip)
  • v11.0.0(Apr 15, 2019)

    The one with hooks 🎣 (almost 🙈)

    This release is mostly internal changes and our public API remains relatively untouched

    The original plan was to move to a totally hooks based api #871. However, we hit a snag: right now it is not possible for a hook to set up context. A Droppable component sets up context for a Draggable to consume. So for now we are sticking with our render prop API. Internally we have moved almost everything over to function components and hooks. (Our error boundary still needs to be a class because function components cannot currently be an error boundary)

    Our internal refactor has also resulted in react-beautiful-dnd now being <StrictMode> compliant

    Sharing the learnings 🎁

    I have given a talk at React Sydney about my journey converting react-beautiful-dnd from class components over to function components and hooks.

    🎬 Deep sea fishing with React hooks

    Breaking changes 💥 #1194

    1. React peer dependency ^16.3.1^16.8.5

    In case you wanted to know why we picked ^16.8.5 🕵️‍♀️

    • Internally we have moved most things to function components and hooks which need ^16.8.0 #871
    • We were still using old school React context. We could have moved to the new context api in our previous ^16.3.1 dependency, but consuming context through useContext in 16.8 has made it a lot easier to shift over.
    • Need to move to ^16.8.4 to use [email protected]. We proposed to get this lowed to ^16.8.0 but the project was not keen. We could still claim our React peer dependency is ^16.8.0, but that could lead to issues with bundlers if using a version >= 16.8.0 and < 16.8.4. It would at least be a warning, and might even be worse.
    • Rather than moving to a peer dependency of ^16.8.4 (for [email protected]) we went to ^16.8.5 as it contained fixes for shallow rendering which could impact some peoples react-beautiful-dnd tests

    2. <Draggable />shouldRespectForceTouch

    2.1 Name change

    shouldRespectForceTouch => shouldRespectForcePress

    - shouldRespectForceTouch
    + shouldRespectForcePress
    

    Moving to shouldRespectForcePress is a clearer name given that force press actions can be fired from mouse inputs too.

    We will be calling event.preventDefault() on the following events from a drag handle if shouldRespectForcePress is set to true (the new default)

    • webkitmouseforcechanged (mouse)
    • touchforcechange (touch)

    For the next little while we log a development warning if you are using the old shouldRespectForceTouch prop

    2.2 Flipping the default

    See #1160. Opting for a better dragging experience out of the box

    - shouldRespectForcePress: true,
    + shouldRespectForcePress: false,
    

    New package: useMemoOne

    One byproduct of our move to use hooks was the creation of a new package!

    useMemoOne: useMemo and useCallback with a stable cache (semantic guarantee)

    useMemo and useCallback cache the most recent result. However, this cache can be destroyed by React when it wants to:

    You may rely on useMemo as a performance optimization, not as a semantic guarantee. In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without useMemo — and then add it to optimize performance. - React docs

    useMemoOne and useCallbackOne are concurrent mode safe alternatives to useMemo and useCallback that do provide semantic guarantee. What this means is that you will always get the same reference for a memoized value so long as there is no input change.

    Other

    • Moving to the new GitHub issue templates to streamline issue creation
    • Fixed broken external link #1235. Thanks @erik-beus!
    • Upgrading to flow 0.96 🤘
    • Fixed issue caused by missing SVGElement in some testing environment #1249. Thanks @hawkeng for raising this

    Open discussions 🗣

    We would love your input on our future direction!

    • Virtual list api #1225
    • Data flow (making good headway on this!) #498
    • Drop decisions #1239

    Thanks ❤️

    • @markerikson for his work on [email protected] which made this release possible
    • @pwolaq for finding a focus management issue with 11.0
    • Everyone who tested the 11.0 beta
    • Everyone involved in our hooks discussion #871 (@YurkaninRyan, @gnapse, @trixn86, @shawninder)
    • React Sydney for hearing me out
    Source code(tar.gz)
    Source code(zip)
  • v10.1.1(Mar 27, 2019)

    Fixes 👩‍⚕️

    • DraggableStateSnapshot and DroppableStateSnapshot are now correctly populated when dropping outside of a Droppable. In 10.1 they where being populated with the home location rather than no location. #1178. Thanks @zmi-jlblatt for finding this one
    • Respecting shouldRespectForceTouch preference for force press touch events that are triggered by some mouse inputs #1192. More information: #1193

    Documentation

    • Fixing broken link in examples page. Thanks @eliotball
    • Updating typo in multi-drag pattern #1171. Thanks @Aarbel
    • Cleaning up the language in our ISSUE_TEMPLATE.md #1202. Thanks @lukyth!

    Engineering health 👷‍♀️

    • Refactoring in preparation for hooks 🎣#871 #1188
    • Bumped all devDependencies #1195
    • Moved to flow 0.95.1

    (Minor) breaking changes are coming soon 💥

    We will soon be publishing 11.0. This will have two minor breaking changes:

    1. Moving React peer dependency from ^16.3.1 to ^16.8.0
    2. shouldRespectForceTouch name change and default swap

    More details: #1194

    Source code(tar.gz)
    Source code(zip)
  • v10.1.0(Mar 11, 2019)

    beautiful-by-jake-small

    🎧🎶 Release notes designed to be listed to with: "Once there were dragons" @ 4:05

    Highlights 🤾‍♀️

    • 👩‍🎨 Stunning animation improvements
    • 📖 Overhauled documentation
    • 📱 More predictable touch dragging
    • 🏠 Simplified home list styling
    • 💅 New project design
    • 📝 Blogs of our learnings

    Beautiful 🏔

    This release pushes react-beautiful-dnd to new summits of interaction design.

    We have removed instant movement (snapping) when moving between lists. Snapping breaks the visual language of moving physical objects around that react-beautiful-dnd is trying to emulate.

    ✅ No snapping when moving between lists

    refreshed-example-2

    ❌ This is what it used to be (snapping in the 🏠 home list after a drop)

    slow-snapping

    You do not need to do anything to get the new animation pattern. I have marked this change as a feature release as it is new design behaviour.

    Blog: Beautiful interactions 📝

    There was a huge amount of work to remove snapping when moving between lists. Who would have thought? Not me 🥵. I wrote a blog which goes over the journey of this feature in depth. Personally, I think it well worth your time!

    📝Blog → Beautiful interactions: Crafting elegant and robust drag and drop animations

    New logo 👩‍🎨

    logo-migration

    We have moved to a logo that encapsulates the playfulness and delight that we are striving for with react-beautiful-dnd

    Blog: Logo creation 📝

    Maryanne Nguyen, a very talented designer at Atlassian, has detailed her creative process in creating the new react-beautiful-dnd logo in a blog 🎨

    📝Blog → maryannemade: react-beautiful-dnd logo

    More predictable touch dragging 📱

    react-beautiful-dnd tries to respect standard browser interactions as much as possible. Currently, the library plays well with force touch interactions:

    If the user force presses on the element before they have moved the element (even if a drag has already started) then the drag is cancelled and the standard force press action occurs. For an anchor, this is a website preview.

    Unfortunately, heavy presses can cancel a drag. It can be tricky at times to get the right amount of pressure to correctly use touch dragging. This can be frustrating for users.

    We have added an option for you to opt-out of respecting force touch interactions. This option will disable force press interactions on the drag handle. However, it allows for a more consistent touch dragging interaction.

    We have added shouldRespectForceTouch as a prop to <Draggable />. It defaults to true in order to respect force touch interactions, but you can set it to false to opt out of respecting force touch

    <Draggable
      draggableId="draggable"
    + shouldRespectForceTouch={false}
    >
    
    </Draggable>
    

    This change resulted in a feature release. The default behaviour matches the behaviour of previous versions.

    Should force touch be respected by default?

    Right now shouldRespectForceTouch defaults to true in order to respect browser interactions. However, for this specific use case, I am thinking that the default could be to not respect force touch in order to have a more consistent touch dragging experience out of the box.

    I have created a request for discussion to collect other people's thoughts on what the default should be.

    Simplified home list styling 🏠

    We have added a new value to the DroppableStateSnapshot: draggingFromThisWith

    type DroppableStateSnapshot = {|
      isDraggingOver: boolean,
      draggingOverWith: ?DraggableId,
    + draggingFromThisWith: ?DraggableId,
    |};
    

    draggingFromThisWith is populated with the draggableId of the dragging item in the 🏠 home list for the entire drag. This allows you to style the home list differently from the other lists if you like. We recommend you do this to make it clear which list the user is dragging from. You can read more about the thinking behind this in my blog

    In this example we set the background-color of the home list to pink when we are dragging over the list. We set the background-color of the home list to blue when not dragging over the home list.

    no-placeholder-when-over-no-list

    Overhauled documentation 📖

    We have totally overhauled our documentation to be easier to find and use information.

    Our README.md was getting too big. It was hard for new comers to know where to start, and it was hard for consumers of the library to quickly find information. We have simplified our README.md and added a comprehensive documentation section which links off to categories of information.

    The README.md now contains a high-level introduction to the project, feature set, how to get started and then links to the rest of the documentation.

    For new comers and evaluators 👶

    Information in the README.md:

    • Big gif showing off what the library is about
    • Reduced badges to the critical subset to reduce noise
    • High level motivation of the project
    • Feature set and limitations
    • Getting started guide
    • An About section which links off information useful to understand, evaluate and get started with the library.

    For consumers 👩‍🎤

    • The documentation has been broken down into more logical independent chunks to make it clearer where to find topical information. Previously API was under a wall of design thinking information which would not be useful to a non-evaluator
    • All documentation pages have a link back to the documentation root for quickly jumping around

    A big thank you to @Noviny for his incredible efforts in helping to create this new information architecture

    Documentation engineering health 👨‍⚕️

    • Added a test to ensure that there are no more broken links 🎉. This is by far the cause of the most issues
    • Added test to ensure consistent usage of component names
    • Added test to ensure all documentation pages end with a backlink to the documentation root

    Refreshed examples 🦸‍♂️ #1096

    We have made our examples brighter and more colourful

    | Previous | New style | | ----------------|-------------| | old style| new style |

    We have also upgraded to Storybook v5 and added our new logo to the header

    new style

    Other improvements

    • Only attaching to the redux devtools when process.env.NODE_ENV === 'development' #1085. Thanks @teleaziz!!
    • More collision engine refinements

    Fixes 🐛

    • A transition for a property other than transform that finished during a drop animation on a Draggable could cause the drop to end suddenly #1096
    • position:fixed lists on ie11 #1091 #1088. Thanks @InvisibleBacon for raising this one
    • Typo in docs #1102. Thanks @jDeppen

    Engineering health

    • Upgraded to flow 0.94 #1119
    • Upgrade of all dev dependencies #1119
    • Moved example website to use emotion 👩‍🎤 #1128
    • Moving browser tests to cypress.io. Also added a few more browser tests #1122

    cypress

    Source code(tar.gz)
    Source code(zip)
  • v10.0.4(Jan 28, 2019)

    Happy new year! 🎉

    I have been off for a month and I had a great time. I could go for another month...

    Here is what we plan on working on next: Up next milestone

    Also, a reminder that we have two planned breaking changes coming up:

    • Moving to a React peer dependency of 16.6+ #984
    • Moving from flow to TypeScript #982. This might not be a breaking change if we have a good flow story 🤞

    Unplanned but possible:

    • Going all in on hooks and creating a new hook based api 🤐😅

    Improvements

    doctype warning 👨‍⚕️ #1068

    We have added a dev only warning to notify you if the pages doctype is supported #1068 #1040. We only support the html5 doctype (<!doctype html>). The doctype impacts a number of measurement calculations. Previously if you used another doctype things might work, but there could be some strange issues depending on your css configuration (eg if you did not have body height: 100%). Rather than trying to account for every strange doctype out there - we print a dev warning to the console! 😊 We also now call this out in the docs.

    My hope is that this change makes it easier to fall into the pit of success

    Just a public service announcement: if you do not add a doctype tag, browsers will use some other doctype such as "Quirks mode". Please add a doctype to your pages!

    <!doctype html>
    

    Other

    • More robust ref type checking #1067. Allows usage of react-frame-component #796. Thanks @jdillick for the ideas
    • Fixing typos in docs #1059 #1062 #1042 #1063 #1011 #1070 #1071. Thanks @niwsa, @mego and @hannesvdvreken!

    Engineering health

    • Upgrading dev dependencies #1065
    • Upgrading to flow 0.91 #1065
    Source code(tar.gz)
    Source code(zip)
  • v10.0.3(Dec 12, 2018)

    Improvements

    🍕 Delicious auto scrolling #349

    Previously when a user picked up a draggable item that was near the edge of a scrollable area it could trigger a large and jarring auto scroll. We have created a solution that gets around this problem in a really elegant way.

    I have created a video which goes over what we did in a bit of detail 📺

    video thumnail

    A big thank you to @ajaymathur and @jjcm for their huge help with this one

    ❤️ Docs

    • New: Common setup guide: Common setup issues that are hard for us to catch in code. We also linked to this from our ISSUE_TEMPLATE.md
    • New: Identifiers guide: How to use identifiers (draggableId and droppableId) successfully in react-beautiful-dnd
    • Fixing typo in README.md link #970. Thanks @fzembow!!
    • Fixing links #955. Thanks @Blasz!!
    • Removing outdated reference to Draggable > type #952. Thanks @DmitryGonchar!!
    • Fixing incorrect drop animation naming in our drop animation guide

    Other

    • Avoiding extra DOM read for Droppables #966. Thanks @woohling!
    • Adding extra dev only checks for Draggable and Droppable boolean props #945.

    👋 Remember: null is not a valid boolean prop type. Either pass in true, false or undefined to get the React defaultProp value.

    • Added new media section #943
    • Updated collaborators list in README.md #943

    👩‍⚕️ Engineering health

    • Adding additional server-side rendering test to ensure that client hydration works correctly #960. Thanks @petegleeson for the prior work on this
    • Fixed flaky builds on CircleCi caused by flow crashing. Thanks @TrySound for your help with this one! #1008 #1007
    • Moved to flow 0.88
    • Moved to storybook 4x #989
    • Moved back from emotion to my first love: styled-components 4x for examples.
    • Upgrading dev dependencies #1005

    📣 Announcement: breaking change coming

    We have two planned breaking changes coming up in early 2019:

    • Moving to a React peer dependency of 16.6+ #984
    • Moving from flow to TypeScript #982

    My hope is to batch these two breaking changes into a single breaking change release

    Source code(tar.gz)
    Source code(zip)
  • v10.0.2(Nov 21, 2018)

    Fixes

    • Better scroll container detection for the <body> element. Fixes compatability issue with Semantic UI #904. We also wrote a new guide: how we detect scroll containers. Thanks @MohammedAl-Mahdawi for raising this and @seancurtis for helping me work through it.

    Improvements

    • Improved cross axis movement into an empty list #936. Allows for movement of bigger items into a list that might not have enough current space for it. Thanks @lukyth for raising this one!
    • Even more spacing accuracy for different box model configurations #919. Also created a spacing stress test example
    • Adding more detail to issue creation template #934
    • Removing unneeded Array.prototype.find message from docs #933. Thanks @wuweiweiwu!
    • Adding note about styled-components 4.0 api change to docs #926. Thanks @balonsom!!
    • Improvements to README.md #943
    Source code(tar.gz)
    Source code(zip)
  • v10.0.1(Nov 13, 2018)

    Fixes

    • Now correctly forwarding component flow types #910. Previously they were being lost in a HOC. Huge thank you to @TrySound for this one! He also added a flow test to ensure there is no regressions on this 👏
    • Fixed misaligned cross-axis drop placement and keyboard movement in some cases #913 #918
    Source code(tar.gz)
    Source code(zip)
  • v10.0.0(Nov 11, 2018)

    marketing

    🎧🎶 Release notes designed to be listed to with Angus & Julia Stone - Chateau (ARTY Remix)

    Release at a glance 🤩

    🚀 30% faster 💥 smarter collision engine 🎹 more robust keyboard movement system 🎳 new: combine items 🐣 new: add and remove items during a drag 🌲 new: tree library @atlaskit/tree by @Confluence

    I know right!? Pretty awesome!! Okay, lets get into the details

    ✌️ Low risk breaking change 9.x10.x

    This release is a listed as a breaking change 💥. However, the risk of actual breakage is very low. Most consumers should be able to upgrade without any issues 👍. We will call out any breaking changes in these releases notes.

    Features

    Combining Draggables #511

    react-beautiful-dnd now supports the combining of Draggables 🤩

    combining

    • 👩‍🔬 Designed to work intuitively in conjunction with reordering
    • 🕺 Works on both the vertical and horizontal axis
    • 🎹 Full keyboard support
    • ♿️ English screen reader messaging baked in. (You can override the defaults - see our screen reader guide)

    We have created a combining guide which will show you how you can use the new feature and the thinking behind it.

    I am biased, but the combining guide is really worth a read! The logic for doing combining in conjunction with reordering is very cool

    Add and remove Draggables while dragging #484

    react-beautiful-dnd now supports the adding and removing of Draggables during a drag. This is a powerful feature that unlocks a lot of behaviors

    | Lazy loading | Trees! (Read more below) | |--------------|--------| | lazy-loading 2018-11-01 17_01_21 | hover_to_expand |

    We have created a guide to help you use this new feature.

    New tree library: @atlaskit/tree 🌲🎉

    In conjunction with this release, we have also released a new tree library: @atlaskit/tree!!! 🎉 It is a beautiful and accessible tree implementation built on top of react-beautiful-dnd

    • Display and interact with your own tree structure
    • Mouse 🐭, touch 📱 and keyboard support 🎹
    • Dropping on a closed group will add the dragging item to the group
    • Dragging over a collapsed group will expand the group after a small timer
    • Dragging an expanded group will collapse the group as the drag starts
    • Lazy loading of subtrees
    • Does not render any DOM ❤️

    | Hover to expand | Drop onto expanded parent | Drop onto collapsed parent | Drop on another item to create new group | | ----------------|---------------------------|-----------------------------|-----------------------------| | hover_to_expand | drop_onto_expanded_parent | drop_onto_collapsed_parent | drop_to_nest |

    Improvements

    🚀 Speed

    We have significantly improved the performance of react-beautiful-dnd.

    • 🤘 30% more frames when dragging
    • 🤩 66% more frames for drop animations in low resource environments

    You can read about how we did this in our blog "Grabbing the flame 🔥"

    💥 Smarter collision engine

    Our collision engine has been rebuilt in order to take into account:

    • the direction a user is currently moving in, and
    • what items are currently displaced

    This results in a much more consistent and natural movement experience.

    collision

    There was a flaw in the previous engine where edge detection did not consider what was already displaced.

    The collision engine is now aware of displacement and so will now always shift items when the visible center goes over the visible edge of an item - even if the visible edge is displaced.

    The collision engine is also now aware of the direction a user is currently moving in which is used to facilitate our new combining mode.

    🎹 More robust keyboard movement system

    The internal keyboard movement system has been completely rebuilt to provide more spacing flexibility and resilience. Improvements:

    • Drastically improved spacing flexibility. Can now use margin safely on any edge of a Draggable (as long as it does not lead to margin collapsing between items) #201
    • Moving from a patch based system, where each movement patches the previous one, to a system where every movement is computed from scratch based on the current displacement. This also means the algorithm is self healing. If a movement ever looks off (which it shouldn't), then the next move will correct the misalignment
    • The new placement system is now what we use to calculate drop placements for consistency

    | Example of old spacing issue | Now handled correctly | |------------------------------|-----------------------| | beautiful-dnd | margin-fix |

    More drop animation control

    We have moved to using only CSS for the drop animation for performance reasons (you can read more about that in "Grabbing the flame 🔥").

    As a side benefit of this you are now able to tweak the drop animation, or opt out of it completely. We recommend not opting out the drop animation as it is important communication for the user.

    | Your own animation | No animation (not recommended) | | -------------------|--------------------------------| | custom-drop-animation | no-drop-animation |

    We have created a drop animation guide to assist you

    Cleaner development build messaging

    We have made our development build warnings and error message prettier and more informative

    logging

    We only long warnings if there are actual setup issues (not just for fun!). That said, if you want to, you are now able to disable all warnings:

    // disable all development only warnings
    window['__react-beautiful-dnd-disable-dev-warnings'] = true;
    

    We have also added tests to ensure that these messages are correctly dropped from production builds.

    Better ie11 support #320 #724

    Previously we required consumers to polyfill Array.prototype.find in order for react-beautiful-dnd to work in ie11. We now bake in our own light ponyfills so that you are not required to polyfill anything to use react-beautiful-dnd in ie11

    🔬 Smaller

    react-beautiful-dnd 10.0.0 is actually a little bit smaller than 9.x. Which is amazing considering how many new capabilities the library has!

    screen shot 2018-11-12 at 11 35 23 am

    ~~Hooks~~ → Responders

    ~~DragDropContext > Responders~~ DragDropContext > Responders

    Recently React announced a new alpha Hooks API. To avoid overloading the term Hook and confusing people, we have replaced our usage of the word Hook to Responder. The names of the actual ~~Hooks~~ Responders are unchanged:

    • onBeforeDragStart
    • onDragStart
    • onDragUpdate
    • onDragEnd

    This is a type name change, as well as changing how we refer to them in the docs.

    
    -type HookProvided = {|
    +type ResponderProvided = {|
      announce: Announce,
    |};
    
    -type OnBeforeDragStartHook = (start: DragStart) => mixed;
    +type OnBeforeDragStartResponder = (start: DragStart) => mixed;
    
    -type OnDragStartHook = (
    +type OnDragStartResponder = (
      start: DragStart,
      provided: ResponderProvided,
    ) => mixed;
    
    -type OnDragUpdateHook = (
    +type OnDragUpdateResponder = (
      update: DragUpdate,
      provided: ResponderProvided,
    ) => mixed;
    
    -type OnDragEndHook = (
    +type OnDragEndResponder = (
      result: DropResult,
      provided: ResponderProvided,
    ) => mixed;
    
    
    -type Hooks = {|
    -  onBeforeDragStart?: OnBeforeDragStartHook,
    -  onDragStart?: OnDragStartHook,
    -  onDragUpdate?: OnDragUpdateHook,
    -  // always required
    -  onDragEnd: OnDragEndHook,
    -|};
    +type Responders = {|
    +  onBeforeDragStart?: OnBeforeDragStartResponder,
    +  onDragStart?: OnDragStartResponder,
    +  onDragUpdate?: OnDragUpdateResponder,
    +  // always required
    +  onDragEnd: OnDragEndResponder,
    +|};
    

    This is a breaking change 💥. But it should be a fairly trivial type rename if you are using flow or TypeScript. This would only impact you if you are directly importing the types:

    - // this would now break:
    -import type { OnDragStartHook } from 'react-beautiful-dnd`
    
    +// need to use the new type name:
    +import type { OnDragStartResponder } from 'react-beautiful-dnd`
    

    Responder timings

    In order to improve consistency we now force onDragStart and onDragUpdate to be in the tick after the snapshot values are updated. Previously there were in the same tick. We do this to ensure there is a full React render before calling the hooks. This was generally the case anyway so consumers should not be impacted. I found some very edge case scenarios where onDragStart could be batched into the same render pass by React as a snapshot update.

    You can read all the timing details in our Responder guide.

    This could be classified as a breaking change 💥, although the risk of breakage is almost nothing. In fact, it fixed a bug we found in one case 🤷‍

    More information in Responders 🕵️‍♀️

    The values provided to the Responders now has some new information!

    DragStart now contains mode

    DragStart is supplied to onDragStart

    type DragStart = {|
      draggableId: DraggableId,
      type: TypeId,
      source: DraggableLocation,
    + mode: MovementMode,
    |};
    
    + type MovementMode = 'FLUID' | 'SNAP';
    

    There are two seperate modes that a drag can be in

    • 'FLUID': everything is done in response to highly granular input (eg mouse)
    • 'SNAP': items move in response to commands (eg keyboard)

    SNAP may also include our new programmatic dragging mode we have planned #162

    DragUpdate (and DragResult) now contain combine

    DragUpdate is supplied to onDragUpdate DropResult is supplied to onDragEnd

    In order to facilitate the new combining mode a DragUpdate and DragResult now contain combine information

    type DragUpdate = {|
      ...DragStart,
      // may not have any destination (drag to nowhere)
      destination: ?DraggableLocation,
    +  // populated when a draggable is dragging over another in combine mode
    +  combine: ?Combine,
    |};
    
    + // details of the item that is being combined with
    + type Combine = {|
    +   draggableId: DraggableId,
    +   droppableId: DroppableId,
    + |};
    
    // DropResult gets these too it it extends DragUpdate
    
    type DropResult = {|
      ...DragUpdate,
      reason: DropReason,
    |};
    

    New data for a Draggable 👨‍🎨

    We now provide your Draggable with more information for you to use!

    type DraggableStateSnapshot = {|
      isDragging: boolean,
      isDropAnimating: boolean,
      draggingOver: ?DroppableId,
    +  // Information about a drop animation
    +  dropAnimation: ?DropAnimation
    +  // the id of a draggable that you are combining with
    +  combineWith: ?DraggableId,
    +  // a combine target is being dragged over by
    +  combineTargetFor: ?DraggableId,
    +  // What type of movement is being done: 'FLUID' or 'SNAP'
    +  mode: ?MovementMode,
    |};
    
    + // information about a drop animation that you can patch if you like
    + type DropAnimation = {|
    +   duration: number,
    +   curve: string,
    +   moveTo: Position,
    +   opacity: ?number,
    +   scale: ?number,
    + |};
    

    Moved to CSS for the drop animation

    As mentioned previously, we have moved to using a CSS animation for our drop animation. We where able to maintain the exact same visual animation using CSS as we where with a spring based animation. You can read more about this in "Grabbing the flame 🔥".

    Breaking change 💥. We previously rendered a Draggable at 60fps to get it to its home location. Now we let CSS do it. If you were patching the drop animation then this change will break you. Good news, it will now be much easier for you! Check out our drop animation guide.

    Other improvements

    • Throw an error when consumer forgets to pass a Draggable an index prop (a common setup error)
    • No longer throwing an error if trying to announce screen reader messages after a DragDropContext is unmounted. It will now print a dev only warning explaining any problems and how you could avoid dropping screen reader messages #556
    • Added a development only warning to let consumers know if they are not meeting the required React peer dependency version. npm will warn you about this, but we are getting a lot of issues about this. So we decided to bake our own warning into the library
    • Now has partial support for lists in a position:fixed container
    • Mentioning in the docs that indexes need to be dense and start from 0 #892
    • Given the docs a lot of love 📖❤️

    Fixes

    • Drag Handle unmount performance #543
    • Aborting and drag due to an error when using ReactDOM.createPortal could cause the drag to lock
    • Preventing cross axis movement to invisible locations
    • Cross axis movement will now align correctly when entering the last position of a list #785
    • Auto scrolling shudder when near the end of a scrollable list #764
    • A cross axis move that results in a shift in window scroll is now accounted for

    Engineering health

    • Added test to ensure consistent file naming within repo
    • Added test to ensure all developer warnings and any other console.* statements are removed in production builds
    • Added test to ensure styles applied to selectors are valid and pass stylelint
    • Upgrade to flow 0.86 #851

    👋❤️ Community documentation

    We have a new Community section and Addons section in our docs. If you have something that you would like to submit please pull request.

    Thanks to these people who have already added content:

    We would like your input

    We have a few request for discussion (RFD) issues that would benefit from more input:

    • RFD: What would a React 16.7 hooks api look like? #871
    • RFD: Placement of Responders and flow of data #498

    Thanks

    This release has been months of hard work in the making. Thank you to everybody who has contributed to, and supported this release. A special thanks to:

    Source code(tar.gz)
    Source code(zip)
  • v9.0.2(Aug 30, 2018)

    Engineering health

    • Moving to babel v7 #590. We have been on the prerelease version of this for a while, and it is great to see version 7 move to a stable release! Thanks @TrySound!
    • Upgrading to flow 0.79.1
    • Upgrading our devDependencies to latest versions #590
    Source code(tar.gz)
    Source code(zip)
  • v9.0.1(Aug 19, 2018)

    Fixes

    • Fixing memory leak when unmounting DragDropContext #720. Thanks @faiwer for finding this one, and for the great issue detail!

    Improvements

    • More flexible flow type for DragDropContext > hook functions #695. Thanks @kylehalleman!!!
    • More information in the documentation about using interactive elements (such as button) as drag handles. #704 Thanks @kylehalleman!

    Changes

    DragDropContext > hook functions now allow you to return a value from your hook function if you want. However, we do not do anything with these returned values. This is also called out in the docs #695

    - type OnBeforeDragStartHook = (start: DragStart) => void;
    - type OnDragStartHook = (start: DragStart, provided: HookProvided) => void;
    - type OnDragUpdateHook = (update: DragUpdate, provided: HookProvided) => void;
    - type OnDragEndHook = (result: DropResult, provided: HookProvided) => void;
    
    + type OnBeforeDragStartHook = (start: DragStart) => mixed;
    + type OnDragStartHook = (start: DragStart, provided: HookProvided) => mixed;
    + type OnDragUpdateHook = (update: DragUpdate, provided: HookProvided) => mixed;
    + type OnDragEndHook = (result: DropResult, provided: HookProvided) => mixed;
    
    Source code(tar.gz)
    Source code(zip)
  • v9.0.0(Aug 9, 2018)

    Changes

    onDragStart: Getting the timing right

    Summary: we have made the timings of the DragDropContext > Hook functions more consistent, created a new hook: onBeforeDragStart and created a guide for hooks

    We keep having timing issues popping up relating to onDragStart. It can break some use cases if it is called before we update the Draggable and Droppable components, and it can break some use cases if it is called after. Rather than trying to make onDragStart work for both cases we have created a new hook: onBeforeDragStart.

    onDragStart, onDragUpdate and onDragEnd are now called consistantly after the Draggable and Droppable components have been updated. If you need to do some work just before Draggable and Droppable components have their initial snapshot values updated, then you can use onBeforeDragUpdate.

    We have created a guide for hooks which explains all of the hooks in detail and the timings in which the hooks are called.

    This is a breaking change 💥. It has been listed as a breaking change as it will break consumers who are following our dimension locking table reordering strategry.

    Fixes

    • Fixing broken test file name which caused repository cloning errors in some environments #697. There was a backspace character in a filename? I know! Thanks @lukebatchelor for the fix, @TrySound for your input and @pashadow for raising the issue

    Improvements

    • Upgrading to flow 0.78 #686
    • Upgrading babel #687. Thanks @TrySound
    • Fixing greenkeeper lock file updates #684. Thanks @MarshallOfSound
    • Loosing dependency version range for prop-types #681.
    Source code(tar.gz)
    Source code(zip)
  • v8.0.7(Aug 1, 2018)

  • v8.0.6(Aug 1, 2018)

    Improvements

    Getting started course released #363 🤩

    We have created a free course on egghead.io to help people get started with react-beautiful-dnd as quickly as possible. Even if you have been using react-beautiful-dnd for a while, you may still learn something new - especially in the later lessons

    Course logo

    Others

    • Moving to flow v0.77 #673
    • Adding TypeScript example to the README.md #666. Thanks @abeaudoin2013!
    • Adding more detailed information to our recommended Droppable performance optimisation #660. Thanks @aditigoel23 for raising this one

    Fixes

    • The DragDropContext > onDragStart hook is now called before the first render of a Draggable or Droppable during a drag #676. This fixes usages of dimension locking for table reordering. This restores the timing behaviour of 7.x
    • Now correctly consuming the redux v4.0 flowtyped definitions #650. This was causing issues for users of redux with v4.0 defintions. Thanks for raising this @chmanie!

    Engineering health

    • Enabled 2FA on npm for all publishes 👍
    • Bumping dev dependencies #673, #635. Thanks @TrySound
    • Moving to test cafe for browser testing #661. As a result of this we are now running browser tests that perform mouse, keyboard and touch dragging. We are also running these tests in chrome: headless and firefox: headless which is pretty awesome 🎸. Thanks @RajaBellebon and @MarshallOfSound for getting this added.
    • Adding build check to ensure that yarn.lock files are checked in #655. Thanks @MarshallOfSound
    • Removing object-rest-spread plugin from dev dependencies #635. Thanks @TrySound
    Source code(tar.gz)
    Source code(zip)
  • v8.0.5(Jul 18, 2018)

  • v8.0.4(Jul 17, 2018)

    Fixes

    • In some versions of jsdom (such as the one that ships in create-react-app the SVGElement constructor does not exist. Running the check el instanceof SVGElement would cause an exception. We are now more defensive in our usage of the SVGElement constructor #641

    Improvements

    • Bumping raf-schd to the latest version #643
    Source code(tar.gz)
    Source code(zip)
  • v8.0.3(Jul 11, 2018)

    Fixes

    • If you had a scrollbar on the cross axis of a Droppable then a user would be unable to auto scroll backwards through the list. Scrollbars, am I right? Anyway, we now account for this #628. Thanks @SimchaShats for raising this one
    • Fixing incorrect invariant condition which was preventing dynamic updates to Droppable > isDropDisabled #617. Thanks @ntelkedzhiev for your persistance with this one

    Engineering health

    • Wider use of prettier #629
    • Refactor of Draggable to save about 20 lines 😊 #627
    • Breaking massive drag-handle.spec.js file into lots of spec files #627
    • Upgrading babel and rollup #624. Thanks @TrySound!
    • Moving puppeteer browser test to non-headless with xvfb to reduce build flakes #630. Thanks @MarshallOfSound!!
    Source code(tar.gz)
    Source code(zip)
  • v8.0.2(Jul 6, 2018)

    Improvements

    Adding docs for dragging <svg> elements #613

    If you are attempting to use a <svg> (a SVGElement) as a Draggable or drag handle react-beautiful-dnd will now give you a more helpful error messaging in development builds. We have also created a dragging <svg>s guide to help you with dragging SVGs if you want to.

    Thanks for raising this @mikesobol

    Fixes

    • Fixing DragDropContext > Hooks timing issue #618. Thanks for raising it @ntelkedzhiev
    Source code(tar.gz)
    Source code(zip)
  • v8.0.1(Jul 4, 2018)

    Fixes

    • We added some unnecessary defensive event blocking which broke some nested interactive element experiences. These unnecessary checks have been removed #615. Thanks @eduludi for picking this one up!
    Source code(tar.gz)
    Source code(zip)
Auth-Form-Design - Beautiful Auth Form Designed using React 🥰

Auth-Form-Design - Beautiful Auth Form Designed using React ??. Implemented Password Strength Checker with Password Suggestion and designed with the principle of mobile-first design. ??

Samarpan Dasgupta 1 Aug 6, 2022
Responsive styles for react-native and react-native-web

React Native Responsive Styles rn-responsive-styles Create responsive styles for react-native and react-native-web with minimal rerenders This library

Kheva Mann 18 Oct 5, 2022
React-masonry - An easy to use and simple masonry layout for React Js based on flexbox column

React Masonry An easy to use and simple masonry layout for React Js based on fle

null 15 Sep 2, 2022
React-Grid-Layout is a grid layout system much like Packery or Gridster, for React.

A draggable and resizable grid layout with responsive breakpoints, for React.

RGL 16.7k Nov 29, 2022
React-layout - Layout component for React. Handling the overall layout of a page

Layout Handling the overall layout of a page. ⚠️ Note: Implemented with flex lay

uiw 2 Jul 10, 2022
React Responsive Grid Layout makes it easy to develop fluid layouts for mobile, tablet and desktop using ReactJs, Styled Components, CSS and Flexbox.

React Responsive Grid Layout makes it easy to develop fluid layouts for mobile, tablet and desktop using ReactJs, Styled Components, CSS and Flexbox.

Taras Pysarskyi 14 Sep 26, 2022
A draggable and resizable grid layout with responsive breakpoints, for React.

React-Grid-Layout React-Grid-Layout is a grid layout system much like Packery or Gridster, for React. Unlike those systems, it is responsive and suppo

Samuel Reed 16.7k Nov 30, 2022
React components that allow you to divide a page or container into nestable anchored, scrollable and resizable spaces.

React Spaces An easy to understand and nestable layout system, React Spaces allow you to divide a page or container into anchored, scrollable and resi

Allan Eagle 1.1k Dec 3, 2022
The UI design language and React library for Conversational UI

The UI design language and React library for Conversational UI

Alibaba 1.5k Nov 29, 2022
My portfolio website simulating macOS's GUI, developed with React and tailwindcss.

My portfolio website simulating macOS's GUI, developed with React and tailwindcss.

Xiaohan Zou 2.8k Dec 7, 2022
🍏 macOS Big Sur UI clone for the web built with React, Next.js, TypeScript, and Tailwind CSS

?? Giant Sur A simple UI clone of macOS Big Sur for the web. Technologies React Next.js TypeScript Tailwind CSS Docker Jest Enzyme Demo https://giants

Soroush Chehresa 78 Oct 14, 2022
FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved.

FlexLayout is a layout manager that arranges React components in multiple tab sets, tabs can be resized and moved.

Caplin 630 Nov 26, 2022
A powerful React component to abstract over flexbox and create any layout on any browser

FlexView A powerful React component to abstract over flexbox and create any layout on any browser. Install yarn add react-flexview Why The flexbox AP

buildo 277 Nov 11, 2022
Simple react component to center content horizontally and vertically

React Center Simple react component to center content horizontally and vertically ###Install npm install --save react-center Don't forget to manually

Anton Matveev 11 Mar 29, 2020
Make your React Components aware of their width and height!

Make your React Components aware of their width and/or height! Hyper Responsive Components! Performant. Easy to use. Extensive browser support. Suppor

Sean Matheson 1.9k Dec 2, 2022
🤸 Configurable grid and layout engine for React

gymnast is a configurable grid for React With gymnast, you can eliminate your layout css or reduce it to just a few lines. Learn how to use gymnast in

gymnast.js 38 May 7, 2022
Auto Responsive Layout Library For React

autoresponsive-react Auto responsive grid layout library for React. Who are using ⭐ ⭐ ⭐ alibaba/ice ⭐ ⭐ ⭐ ice-lab/react-materials ⭐ ⭐ ⭐ ant-design/ant

达峰的夏天 1.5k Dec 5, 2022
A no-frills flexbox grid system for React, powered by styled-components.

Quick Jump Quick Jump Features Requirements Installation Using yarn Using npm Usage Basic Example Responsive Example Upgrading Documentation Grid.Prov

Garet McKinley 860 Sep 20, 2022
React splitter component, written in TypeScript.

Splitters for React v. 1.2.0 New version changes fixed issue v. 1.1.0 New version changes fixed issue with getBoundingClientRect in React 16 NPM Demo

Martin Novák 147 Sep 29, 2022