8.0.0

Improvements

23% faster 🏃

We have shipped dragging performance improvements of 23% from cold start and 6% during subsequent drags

Measured on a list with 500 Draggables

We did this by:

• Less DOM reads #609
• Less state shape checking due to moving closer to an internal state machine #493
• No more double rendering of Draggable components for each mouse / touch movement #566. This involved working around a react-motion issue.
• Audit and removal of redundant memoization layers. As a part of this work we ended up dropping reselect

18% smaller 🥗 #525

Our production builds have gone from 38 kb to 31 kb (gzip), a 18% reduction ↓. The cost can be as low as 23 kb if you can deduplicate our dependencies (redux, react-redux and react-motion are the main ones)

We did this by:

• Moving closer to an internal state machine #493. This resulted in less boilerplate code
• Refactoring 🤓
• Dropping reselect and redux-thunk as dependencies. Not that they were very big to start with, but they were no longer needed.
• Stripping out invariant messages in production builds #597. Thanks @TrySound!!!
• More aggressive use of production checks (process.env.NODE_ENV === 'production') to strip out developer messaging in production builds
• Moving to babel 7 #590. @TrySound did a great job getting this in!
• Removing timing debug code in production builds #603 Thanks @TrySound !!

Development messaging 🔊❤️

Taking inspiration from React, we have introduced a number of development only warnings to assist you with correctly using react-beautiful-dnd:

• provided.innerRef: will now throw an exception if not provided with a HTMLElement. A common error is to incorrectly provide an instance of a component rather than a DOM reference. We also created a guide to assist users to correctly use the provided.innerRef callbacks: Using innerRef.
• DroppableProvided > placeholder: if not included as a child of a Droppable a warning will be printed. Not including the placeholder can lead to space not being created in a list when being dragged over
• Nested scroll containers: we currently do not support Droppables that are in multiple scroll containers. Only single-level scroll containers are currently supported. We hope to add support for nested scroll containers soon: #131. In the meantime, we now warn users that nested scroll containers are not supported if we detect a nested scroll container.

These messages will be stripped in production builds

Improved recovery from any internal errors 🏋️

Errors can happen (I know right!?). If react-beautiful-dnd encounters an error in its code then it will attempt to recover as best as it can: clearing any existing drags and firing the appropriate DragDropContext > hook functions. It will also log some helpful debug information in the console in development builds (process.env.ENV !== 'production')

Engineering health 👩‍⚕️

• Moving closer to an internal state machine #493
• Fixing flakey browser test timeout issue #575. Thanks @RajaBellebon and @TrySound
• Moved from flow 0.73 to 0.75 #584
• Moving to prettier for style consistency enforcement rather than eslint. Still using eslint for non-style linting #552
• Upgrading dev dependencies to latest versions #584
• Continued investment in test improvement and refactoring #493
• Adding stylelint for internal examples #527. Thanks @xxhomey19

Other

• Allowing keyboard dragging between overlapping lists #317
• Fixing typo in README.md #535 Thanks @ipanasenko
• Fixing link to portal guide #430. Thanks @gtgalone
• Adding Chinese 🇨🇳 translation to the repo #578. Thanks @chinanf-boy

Features

Drop information in the DraggableStateSnapshot #559

We expose information to allow you to style a Draggable while it is being dragged. This is done using the DraggableStateSnapshot. We are adding an additional property isDropAnimating which will be set to true when the Draggable is drop animating. Not all drops have a drop animation. We do not animate a drop if the Draggable is already in the correct spot when the drop occurs. This is commonly the case when dragging with a keyboard. isDragging will continue to be set to true even when a drop is occurring. The drop animation is still apart of the 'drag' interaction and is not important when it comes to our public api. However, you can use the new isDropAnimating property to apply some styles specifically when dropping if you would like to.

type DraggableStateSnapshot = {|
  isDragging: boolean,
+  isDropAnimating: boolean,
  draggingOver: ?DroppableId,
|};

This resulted in a minor version change

Changes

DraggableProvided > DraggableProps > DraggableStyle

Previously we were clearing the margin off a dragging item. We realised this was not needed. Rather than keeping the margin property around, we have decided to keep things as clean as possible and remove it.

type DraggingStyle = {|
  position: 'fixed',
  width: number,
  height: number,
  boxSizing: 'border-box',
  pointerEvents: 'none',
  top: number,
  left: number,
-  margin: 0,
  transition: 'none',
  transform: ?string,
  zIndex: ZIndex,
|}

This is a breaking change 💥 as it is the removal of a property. Risk of breakage: low. This will only cause an issue if you were monkey patching the margin property.

7.1.3

Big news, we now have a logo! 🎉

Fixes

• Dragging a Draggable from within a disabled Droppable now works as expected with keyboard dragging #509 #430. Thanks @nmain for finding the original issue
• Fixing link to portal guide from the README.md #505. Thanks @gtgalone!!

Improvements

• Adding stylelint to assist with example correctness #496. Thanks @xxhomey19 !!

7.1.2

Other

Really should have been in 7.1.1 😊

• Bumping Redux to version 4.0 #477
• Bumping dev dependencies #477

7.1.1

Improvements

Getting (more) serious about the CSS Box Model 📦#471

This is an internal cleanup

Over time our internal css box model representation has grown increasingly sophisticated. As a part of this release we have pulled this logic out into its own repo.

Introducing css-box-model 📦

A new micro library which provides detailed CSS Box Model information for a HTMLElement. Any time you are using Element.getBoundingClientRect() you might want to consider using css-box-model. The library is stand alone so you can use it in your own unrelated projects.

react-beautiful-dnd now leverages css-box-model heavily #471. By doing this we where able to move a lot of css box model logic and tests out of the project. This has helped make the box model logic itself more robust as well as making the react-beautiful-dnd project easier to follow

Fixes

• A Droppable that is itself scrollable will now work correctly #461. Thanks @izorg for raising this one. (This bug was the catalyst for #471)

Other

• Updated flowtype to version 0.71.0
• New basic cross list example #478. Thanks @atomicpages!!

7.1.0

Features

Automatic focus retention for cross list movement 🎩✨ #449

We now are smart about giving focus to a mounting draggable if it had focus while dragging
If you had any custom post drag focus logic you can now remove it

When you move component from one list to another in react, the default behaviour is for the component to loose focus. This is because the old DOM element is being destroyed and a new one is being created. Previously we recommended that you bolt on your own auto focus management to ensure that when moving to a new list that focus is maintained.

Given that this behaviour is so intuitive and important for keyboard dragging we have baked it right into the library.

We will now automatically focus on a drag handle if:

• It was unmounted at the end of a drag
• It had focus
• It is enabled when mounted
• No other elements have gained browser focus

We have sweated the details to make sure we are only focusing on what we should be.

Old behaviour

Without adding on your own post drag focus management this is what it was like

New behaviour 🤩

Without any custom post drag focus management

Thanks @petegleeson and @Blasz for helping me brainstorm and review this one

Fixes

• We already where attempting to give focus to a draggable if it moves into a React.Portal while dragging #406. However, this focus logic would not have worked if the Draggable and drag handle where not the same element. This has been fixed as a part of #449

7.0.2

Fixes

• Fixing auto scrolling when scrolling a scroll container with a scrollable window #445

Other

• Upgrading to flowtype 0.70.0 #446
• Upgrading internal dev dependencies to the latest versions #446

7.0.1

Fixes

• A Draggable placeholder will now take up the correct size regardless of whether it is a compressed flex sibling #439
• Moving a Draggable to an empty Droppable that has a border will now drop in the correct location #439

Before	After

A Droppable with a blue border

7.0.0

Improvements

We have now moved to React 16 🎉 #202 #406

This is a breaking change 💥 as we now expect a minimum peer dependency version of React 16.3.1.

You will need to upgrade your dependency on React:

# npm
npm install react@^16.3.1 --save

# yarn
yarn add react@^16.3.1

By simply moving to React 16 consumers get a fairly nice performance improvement when reordering items in DragDropContext > onDragEnd:

Description	React 15	React 16	Reduction
Moving an item a single position forward in a list	120ms	51ms	58%
Moving an item from the top of a list to the bottom	370ms	274ms	26%
Moving an item a single position forward in a column of a board	71ms	23ms	67%
Moving an item between columns in a board	230ms	151ms	34%

Data set

List: 500 items
Board: 500 items spread into four equal columns

As a part of this upgrade we have also moved away from the deprecated React lifecycle methods internally 🤘.

Draggable api cleanup #8

We no longer require you to insert a sibling placeholder element for a Draggable:

<Draggable draggableId="draggable-1" index={0}>
  {(provided, snapshot) => (
-  <div>
      <div
        ref={provided.innerRef}
        {...provided.draggableProps}
        {...provided.dragHandleProps}
      >
        Drag me!
      </div>
-    {provided.placeholder}
-   </div>
  )}
</Draggable>;

So clean!! We also have the additional benefit of not requiring consumers to wrap Draggable elements in another node. This allows for much cleaner HTML.

Semantic <table> reordering

Due to the changes to the Draggable api it is now possible to have semantic html <table>s that are able to be reordered. We have also created a table pattern to assist you in creating reorderable tables regardless of layout.

React.Portal support

As a part of this release we have not swapped over to using React.Portal by default for dragging items. This is because we found a big performance hit in using them - especially when dragging items with a lot of children. However, if you need to use portals we have created a using a portal pattern to help you implement your own React.Portal solution in just a few lines of code.

Additionally, we have also done some internal work to ensure that using a React.Portal works correctly. Including ensuring that Draggable's moved in or out of a portal retain browser focus if it had it.

You can see this in action in our portal example (source) or table portal example (source).

Fixes

• No longer starting a mouse drag if a modifier key is pressed #420. Thanks @smogg for finding this issue
• No longer double rendering components when a ref changes #406
• A console.warn no longer printed when a component as quickly mounted / unmounted #279. Thanks to @seap, @humphreybc, @jeanpaulsio, @lukebatchelor, @coffeedoughnuts, @nodefiend, and @chrisjhoughton

Other

• We now cancel a drag if the page visibility changes #83. Thanks @grady-lad for initiating this change and seeing it through!
• We now record the sizes of our bundles and their treeshaked sizes within the library itself so we can more quickly see any size regressions #405. Thanks @TrySound!!
• Now providing cjs and esm bundles rather than requiring file traversal #429. This also prevents importing files that are not public api (eg import something from 'react-beautifull-dnd/dist/something.js') Thanks @TrySound!!

Changes

Draggable

No more sibling placeholder required

<Draggable draggableId="draggable-1" index={0}>
  {(provided, snapshot) => (
-  <div>
      <div
        ref={provided.innerRef}
        {...provided.draggableProps}
        {...provided.dragHandleProps}
      >
        Drag me!
      </div>
-    {provided.placeholder}
-   </div>
  )}
</Draggable>;

DraggableProvided

placeholder has been removed

type DraggableProvided = {|
  innerRef: (?HTMLElement) => void,
  draggableProps: DraggableProps,
  dragHandleProps: ?DragHandleProps,
-  placeholder: ?ReactElement,
|}

DraggableProvided > DragHandleProps

Event handlers have been updated

type DragHandleProps = {|
+  onFocus: () => void,
+  onBlur: () => void,
  onMouseDown: (event: MouseEvent) => void,
  onKeyDown: (event: KeyboardEvent) => void,
  onTouchStart: (event: TouchEvent) => void,
- onTouchMove: (event: TouchEvent) => void,
  'data-react-beautiful-dnd-drag-handle': string,
  'aria-roledescription': string,
  tabIndex: number,
  draggable: boolean,
  onDragStart: (event: DragEvent) => void,
|}

6.0.2

Fixes

• Adding a work around for a webkit bug which prevented native scroll blocking from working in iOS 11.3 #413. Thanks to @watlandc for raising this so promptly after the release of iOS 11.3. Also thanks to @seancurtis, @treshugart and @Blasz for their help getting this across the line.

We have added a temporary work around. If you are interested in this issue feel free to get involved in the webkit issue and subscribe to our follow up issue #417
This resulted in a patch change

Improvements

• Improvements in the language used in our screen reader guide. Thanks Karen Bywater for her huge work cleaning this file up
• Upgrading flow to 0.69.0 #409

6.0.1

Fixes

• Correctly blocking dragging of button elements that contain an SVGElement (or other Element type) (more information about interactive child blocking). Thanks @LouisCuvelier for raising this!

This resulted in a patch version change

Improvements

• Upgrading flow to version 0.68. Thanks @TrySound for your large efforts in making this a reality! Thanks also to @SimenB for jumping on the review!
• Upgrading all dependencies to the latest versions #402 .
• Upgrading dependencies flow versions and adding esm builds to them to improve code sharing (alexreardon/memoize-one#19, alexreardon/raf-schd#8)
• No longer using console.log for debug information in development environments #402.
• Publishing flow definitions in esm build #402 (Previously was just in the lib build)

Thanks @Blasz for a number of reviews

Reminder: React 16 upgrade coming soon! 💥

We will be moving to a streamlined React 16 api very soon #202. You can expect a breaking change which forces a minimum version of React 16.2 in the next little while. At this stage we are not planning on being backwards compatible with older versions of React. If you have any thoughts you would like to share please head to #202.