React Beautiful Dnd Versions Save

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

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;

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.

Fixes

• Fixing issue with flow where a type was being used without being imported #677

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

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

Fixes

• Droppables with scroll containers in IE11 are now having their scroll listeners correctly released after a drag finishes #646

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

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!!

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

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!