@dnd-kit/sortable

Minor Changes

• #486 d86529c Thanks @clauderic! - Improvements to better support swappable strategies:

  • Now exporting an arraySwap helper to be used instead of arrayMove onDragEnd.
  • Added the getNewIndex prop on useSortable. By default, useSortable assumes that items will be moved to their new index using arrayMove(), but this isn't always the case, especially when using strategies like rectSwappingStrategy. For those scenarios, consumers can now define custom logic that should be used to get the new index for an item on drop, for example, by computing the new order of items using arraySwap.

Patch Changes

• Updated dependencies [d973cc6]:
  • @dnd-kit/core@4.0.2

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

Patch Changes

• Updated dependencies [d39ab11]:
  • @dnd-kit/core@3.1.0

Minor Changes

• 68960c4 #295 Thanks @akhmadullin! - @dnd-kit/core is now a peerDependency rather than a dependency for other @dnd-kit packages that depend on it, such as @dnd-kit/sortable and @dnd-kit/modifiers. This is done to avoid issues with multiple versions of @dnd-kit/core being installed by some package managers such as Yarn 2.

Patch Changes

• Updated dependencies [ae398de, 8b938ce]:
  • @dnd-kit/core@3.0.4

Patch Changes

• a178857 #214 Thanks @clauderic! - Ensure that consumer defined data passed to useSortable is passed down to both useDraggable and useDroppable.

  The data object that is passed to useDraggable and useDroppable within useSortable also contains the sortable property, which holds a reference to the index of the item, along with the containerId and the items of its parent SortableContext.

Major Changes

• a9d92cf #174 Thanks @clauderic! - Distributed assets now only target modern browsers. Browserlist config:

  defaults
  last 2 version
  not IE 11
  not dead
  

  If you need to support older browsers, include the appropriate polyfills in your project's build process.

Minor Changes

• b7355d1 #207 Thanks @clauderic! - The data argument for useDraggable and useDroppable is now exposed in event handlers and on the active and over objects.

  Example usage:

  import {DndContext, useDraggable, useDroppable} from '@dnd-kit/core';
  
  function Draggable() {
    const {attributes, listeners, setNodeRef, transform} = useDraggable({
      id: 'draggable',
      data: {
        type: 'type1',
      },
    });
  
    /* ... */
  }
  
  function Droppable() {
    const {setNodeRef} = useDroppable({
      id: 'droppable',
      data: {
        accepts: ['type1', 'type2'],
      },
    });
  
    /* ... */
  }
  
  function App() {
    return (
      <DndContext
        onDragEnd={({active, over}) => {
          if (over?.data.current.accepts.includes(active.data.current.type)) {
            // do stuff
          }
        }}
      />
    );
  }
  

Patch Changes

• fb2db94 #212 Thanks @clauderic! - Allow consumers of SortableContext to provide items of shape {id: string}[] or string[]

• Updated dependencies [b7355d1, a9d92cf, b406cb9]:

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

Patch Changes

• 92afb0f #168 Thanks @clauderic! - Make sure that the wasSorting argument of the animateLayoutChanges prop of useSortable always receives the latest value.

• Updated dependencies [bdb1aa2]:

  • @dnd-kit/core@2.1.0

Major Changes

• 8583825 #140 Thanks @clauderic! - Auto-scrolling defaults have been updated, which should generally lead to improved user experience for most consumers.

  The auto-scroller now bases its calculations based on the position of the pointer rather than the edges of the draggable element's rect by default. This change is aligned with how the native HTML 5 Drag & Drop auto-scrolling behaves.

  This behaviour can be customized using the activator option of the autoScroll prop:

  import {AutoScrollActivator, DndContext} from '@dnd-kit/core';
  
  <DndContext autoScroll={{activator: AutoScrollActivator.DraggableRect}} />;
  

  The auto-scroller now also looks at scrollable ancestors in order of appearance in the DOM tree, meaning it will first attempt to scroll the window, and narrow its focus down rather than the old behaviour of looking at scrollable ancestors in order of closeness to the draggable element in the DOM tree (reversed tree order).

  This generally leads to an improved user experience, but can be customized by passing a configuration object to the autoScroll prop that sets the order option to TraversalOrder.ReversedTreeOrder instead of the new default value of TraversalOrder.TreeOrder:

  import {DndContext, TraversalOrder} from '@dnd-kit/core';
  
  <DndContext autoScroll={{order: TraversalOrder.ReversedTreeOrder}} />;
  

  The autoscrolling thresholds, acceleration and interval can now also be customized using the autoScroll prop:

  import {DndContext} from '@dnd-kit/core';
  
  <DndContext
    autoScroll={{
      thresholds: {
        // Left and right 10% of the scroll container activate scrolling
        x: 0.1,
        // Top and bottom 25% of the scroll container activate scrolling
        y: 0.25,
      },
      // Accelerate slower than the default value (10)
      acceleration: 5,
      // Auto-scroll every 10ms instead of the default value of 5ms
      interval: 10,
    }}
  />;
  

  Finally, consumers can now conditionally opt out of scrolling certain scrollable ancestors using the canScroll option of the autoScroll prop:

  import {DndContext} from '@dnd-kit/core';
  
  <DndContext
    autoScroll={{
      canScroll(element) {
        if (element === document.scrollingElement) {
          return false;
        }
  
        return true;
      },
    }}
  />;
  

Patch Changes

• Updated dependencies [8583825]:
  • @dnd-kit/core@2.0.0

Minor Changes

• 79f6088 #144 Thanks @clauderic! - Allow consumers to determine whether to animate layout changes and when to measure nodes. Consumers can now use the animateLayoutChanges prop of useSortable to determine whether layout animations should occur. Consumers can now also decide when to measure layouts, and at what frequency using the layoutMeasuring prop of DndContext. By default, DndContext will measure layouts just-in-time after sorting has begun. Consumers can override this behaviour to either only measure before dragging begins (on mount and after dragging), or always (on mount, before dragging, after dragging). Pairing the layoutMeasuring prop on DndContext and the animateLayoutChanges prop of useSortable opens up a number of new possibilities for consumers, such as animating insertion and removal of items in a sortable list.

Patch Changes

• Updated dependencies [adb7bd5, 79f6088, a76cd5a]:
  • @dnd-kit/core@1.2.0

Patch Changes

• 423610c #56 Thanks @clauderic! - Add MIT license to package.json and distributed files

• Updated dependencies [423610c, 594a24e, fd25eaf]:

  • @dnd-kit/core@1.0.2
  • @dnd-kit/utilities@1.0.2

Patch Changes

• 0b343c7 #52 Thanks @clauderic! - Add repository entry to package.json files

• 78a7b67 Thanks @clauderic! - Fix an issue with the sortable keyboard coordinate getter not excluding disabled droppables.

• Updated dependencies [0b343c7, 5194696, 310bbd6]:

  • @dnd-kit/utilities@1.0.1
  • @dnd-kit/core@1.0.1

Major Changes

• 2912350 Thanks @clauderic! - Initial public release.

Patch Changes

• Updated dependencies [2912350]:
  • @dnd-kit/core@1.0.0
  • @dnd-kit/utilities@1.0.0

Minor Changes

• 7bd4568 #30 - Initial beta release, authored by @clauderic.

Patch Changes

• Updated dependencies [7bd4568]:
  • @dnd-kit/core@0.1.0
  • @dnd-kit/utilities@0.1.0