Version Packages

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

Releases

@dnd-kit/core@4.0.0

Major Changes

• #337 05d6a78 Thanks @clauderic! - React updates in non-synthetic event handlers are now batched to reduce re-renders and prepare for React 18.

  Also fixed issues with collision detection:

  • Defer measurement of droppable node rects until second render after dragging.
  • Use DragOverlay's width and height in collision rect (if it is used)

• #427 f96cb5d Thanks @clauderic! - - Using transform-agnostic measurements for the DragOverlay node.

  • Renamed the overlayNode property to dragOverlay on the DndContextDescriptor interface.

• #372 dbc9601 Thanks @clauderic! - Refactored DroppableContainers type from Record<UniqueIdentifier, DroppableContainer to a custom instance that extends the Map constructor and adds a few other methods such as toArray(), getEnabled() and getNodeFor(id).

  A unique key property was also added to the DraggableNode and DroppableContainer interfaces. This prevents potential race conditions in the mount and cleanup effects of useDraggable and useDroppable. It's possible for the clean-up effect to run after another React component using useDraggable or useDroppable mounts, which causes the newly mounted element to accidentally be un-registered.

• #379 8d70540 Thanks @clauderic! - The layoutMeasuring prop of DndContext has been renamed to measuring.

  The options that could previously be passed to the layoutMeasuring prop now need to be passed as:

  <DndContext
  - layoutMeasuring={options}
  + measuring={{
  +   droppable: options
  + }}

  The LayoutMeasuring type has been renamed to MeasuringConfiguration. The LayoutMeasuringStrategy and LayoutMeasuringFrequency enums have also been renamed to MeasuringStrategy and MeasuringFrequency.

  This refactor allows consumers to configure how to measure both droppable and draggable nodes. By default, @dnd-kit ignores transforms when measuring draggable nodes. This beahviour can now be configured:

  import {
    DndContext,
    getBoundingClientRect,
    MeasuringConfiguration,
  } from '@dnd-kit/core';
  
  const measuringConfig: MeasuringConfiguration = {
    draggable: {
      measure: getBoundingClientRect,
    },
  };
  
  function App() {
    return <DndContext measuring={measuringConfig} />;
  }

• #350 a13dbb6 Thanks @wmain! - Breaking change: The CollisionDetection interface has been refactored. It now receives an object that contains the active draggable node, along with the collisionRect and an array of droppableContainers.

  If you've built custom collision detection algorithms, you'll need to update them. Refer to this PR for examples of how to refactor collision detection functions to the new CollisionDetection interface.

  The sortableKeyboardCoordinates method has also been updated since it relies on the closestCorners collision detection algorithm. If you were using collision detection strategies in a custom sortableKeyboardCoordinates method, you'll need to update those as well.

Minor Changes

• #334 13be602 Thanks @trentmwillis! - Now passing activatorEvent as an argument to modifiers

• #376 aede2cc Thanks @clauderic! - Mouse, Pointer, Touch sensors now cancel dragging on visibility change and window resize. The Keyboard sensor already cancelled dragging on window resize. It now also cancels dragging on visibility change.

• #399 a32a4c5 Thanks @supersebh! - Added support for tolerance in DistanceConstrain. As soon as the tolerance is exceeded, the drag operation will be aborted, unless it has already started (because distance criteria was met).

  Example usage:

  // Require the pointer be moved by 10 pixels vertically to initiate drag operation
  // Abort if the pointer is moved by more than 5 pixels horizontally.
  {
    distance: {y: 10},
    tolerance: {x: 5},
  }
  

  Be careful not to pick conflicting settings for distance and tolerance if used together. For example, picking a tolerance that is lower than the distance in the same axis would result in the activation constraint never being met.

• #408 dea715c Thanks @wmain! - The collision rect is now completely based on the position of the DragOverlay when it is used. Previously, only the width and height properties of the DragOverlay were used for the collision rect, while the top, left, bottom and right properties were derived from the active node rect. This new approach is more aligned with developers would expect, but could cause issues for consumers that were relying on the previous (incorrect) behavior.

• #433 c447880 Thanks @clauderic! - Fix unwanted animations when items in sortable context change

• #415 2ba6dfe Thanks @cantrellnm! - Prevent getScrollableAncestors from continuing to search if a fixed position node is found.

• #377 422d083 Thanks @clauderic! - Pointer, Mouse and Touch sensors now stop propagation of click events once activation constraints are met.

• #375 c4b21b4 Thanks @clauderic! - Prevent context menu from opening when pointer sensor is active

• 5a41340 Thanks @clauderic! - Pointer, Mouse and Touch sensors now prevent selection changes and clear any existing selection ranges once activation constraints are met.

• e2ee0dc Thanks @clauderic! - Reset the over internal state of <DndContext /> on drop.

• 1fe9b5c Thanks @clauderic! - Sensors may now specify a static setup method that will be invoked when <DndContext> mounts. The setup method may optionally also return a teardown function that will be invoked when the <DndContext> associated with that sensor unmounts.

Patch Changes

• #430 46ec5e4 Thanks @clauderic! - Fix duplicate scroll ancestor detection. In some scenarios, an element could be added twice to the list of detected scrollable ancestors, resulting in invalid offsets.

• #371 7006464 Thanks @clauderic! - fix: do not wrap consumer-defined handlers in batchedUpdates

• 1fe9b5c Thanks @clauderic! - The TouchSensor attempts to prevent the default browser behavior of scrolling the page by calling event.preventDefault() in the touchmove event listener. This wasn't working in iOS Safari due to a bug with dynamically attached touchmove event listeners. Adding a non-passive, non-capture touchmove event listener before dynamically attaching other touchmove event listeners solves the issue.

• Updated dependencies [0e628bc, 13be602, 1f5ca27]:

  • @dnd-kit/utilities@3.0.0

@dnd-kit/sortable@5.0.0

Major Changes

• #427 f96cb5d Thanks @clauderic! - - Using transform-agnostic measurements for the DragOverlay node.

  • Renamed the overlayNode property to dragOverlay on the DndContextDescriptor interface.

• 9cfac05 Thanks @clauderic! - Renamed the wasSorting property to wasDragging on the SortableContext and AnimateLayoutChanges interfaces.

Minor Changes

• #433 c447880 Thanks @clauderic! - Fix unwanted animations when items in sortable context change

Patch Changes

• #372 dbc9601 Thanks @clauderic! - Refactored DroppableContainers type from Record<UniqueIdentifier, DroppableContainer to a custom instance that extends the Map constructor and adds a few other methods such as toArray(), getEnabled() and getNodeFor(id).

  A unique key property was also added to the DraggableNode and DroppableContainer interfaces. This prevents potential race conditions in the mount and cleanup effects of useDraggable and useDroppable. It's possible for the clean-up effect to run after another React component using useDraggable or useDroppable mounts, which causes the newly mounted element to accidentally be un-registered.

• #350 a13dbb6 Thanks @wmain! - Breaking change: The CollisionDetection interface has been refactored. It now receives an object that contains the active draggable node, along with the collisionRect and an array of droppableContainers.

  If you've built custom collision detection algorithms, you'll need to update them. Refer to this PR for examples of how to refactor collision detection functions to the new CollisionDetection interface.

  The sortableKeyboardCoordinates method has also been updated since it relies on the closestCorners collision detection algorithm. If you were using collision detection strategies in a custom sortableKeyboardCoordinates method, you'll need to update those as well.

• 86d1f27 Thanks @clauderic! - Fixed a bug in the horizontalListSortingStrategy where it did not check if the currentRect was undefined.

• e42a711 Thanks @clauderic! - Fixed a bug with the default layout animation function where it could return true initially even if the list had not been sorted yet. Now checking the wasDragging property to ensure no layout animation occurs if wasDragging is false.

• #341 e02b737 Thanks @clauderic! - Return undefined instead of null for transition in useSortable

• Updated dependencies [13be602, aede2cc, 05d6a78, a32a4c5, f96cb5d, dea715c, dbc9601, 46ec5e4, 7006464, 0e628bc, c447880, 2ba6dfe, 8d70540, 13be602, 422d083, c4b21b4, 5a41340, a13dbb6, e2ee0dc, 1fe9b5c, 1fe9b5c, 1f5ca27]:

  • @dnd-kit/core@4.0.0
  • @dnd-kit/utilities@3.0.0

@dnd-kit/utilities@3.0.0

Major Changes

• #373 1f5ca27 Thanks @clauderic! - Added react to peerDependencies of @dnd-kit/utilities

Minor Changes

• #334 13be602 Thanks @trentmwillis! - Move Coordinates interface along with getEventCoordinates, isMouseEvent and isTouchEvent helpers to @dnd-kit/utilities

Patch Changes

• #437 0e628bc Thanks @chestozo! - Added PointerEvent support to the getEventCoordinates method. This fixes testing the PointerSensor with Cypress (getEventCoordinates does not support pointer events #436)

@dnd-kit/modifiers@4.0.0

Minor Changes

• #334 13be602 Thanks @trentmwillis! - Add snapCenterToCursor modifier

Patch Changes

• #437 0e628bc Thanks @chestozo! - Added PointerEvent support to the getEventCoordinates method. This fixes testing the PointerSensor with Cypress (getEventCoordinates does not support pointer events #436)

• Updated dependencies [13be602, aede2cc, 05d6a78, a32a4c5, f96cb5d, dea715c, dbc9601, 46ec5e4, 7006464, 0e628bc, c447880, 2ba6dfe, 8d70540, 13be602, 422d083, c4b21b4, 5a41340, a13dbb6, e2ee0dc, 1fe9b5c, 1fe9b5c, 1f5ca27]:

  • @dnd-kit/core@4.0.0
  • @dnd-kit/utilities@3.0.0

[shauntrennery]

Any update as to when this will be released?

[clauderic]

For anyone that is wondering, you can install @dnd-kit packages tagged with the next tag on npm to get the latest version of master:

I'm hoping to get a couple more changes in the next version before releasing it since it's already a major release.