atlassian/react-beautiful-dnd v7.0.0

7.0.0

on GitHub

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:

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,
|}