clauderic/dnd-kit @dnd-kit/abstract@0.4.0

on GitHub

Minor Changes

• #1923 cde61e4 Thanks @clauderic! - Batch entity identity changes to prevent collision oscillation during virtualized sorting.

  When entities swap ids (e.g. as react-window recycles DOM nodes during a drag), multiple registry updates could fire in an interleaved order, causing the collision detector to momentarily see stale or duplicate entries and oscillate between targets.

  Entity id changes are now deferred to a microtask and flushed atomically in a single batch(), ensuring:

  • The collision notifier skips detection while id changes are pending
  • The registry cleans up ghost registrations (stale keys left behind after an id swap)

• #1915 9b24dff Thanks @clauderic! - Redesign event type system to follow the DOM EventMap pattern. Introduces DragDropEventMap for event object types and DragDropEventHandlers for event handler signatures, replacing the ambiguously named DragDropEvents. Event type aliases (CollisionEvent, DragStartEvent, etc.) now derive directly from DragDropEventMap rather than using Parameters<> extraction.

  Migration guide

  • DragDropEvents has been split into two types:
    • DragDropEventMap — maps event names to event object types (like WindowEventMap)
    • DragDropEventHandlers — maps event names to (event, manager) => void handler signatures
  • If you were importing DragDropEvents to type event objects, use DragDropEventMap instead:

    // Before
    type MyEvent = Parameters<DragDropEvents<D, P, M>['dragend']>[0];
    // After
    type MyEvent = DragDropEventMap<D, P, M>['dragend'];

  • If you were importing DragDropEvents to type event handlers, use DragDropEventHandlers instead:

    // Before
    const handler: DragDropEvents<D, P, M>['dragend'] = (event, manager) => {};
    // After
    const handler: DragDropEventHandlers<D, P, M>['dragend'] = (
      event,
      manager
    ) => {};

  • The DragDropEvents re-export from @dnd-kit/react and @dnd-kit/solid has been removed. Import DragDropEventMap or DragDropEventHandlers from @dnd-kit/abstract directly if needed.
  • Convenience aliases (CollisionEvent, DragStartEvent, DragEndEvent, etc.) are unchanged and continue to work as before.

• #1938 e69387d Thanks @clauderic! - Added per-entity plugin configuration and moved feedback from the Draggable entity to the Feedback plugin.

  Draggable entities now accept a plugins property for per-entity plugin configuration, using the existing Plugin.configure() pattern. Plugins can read per-entity options via source.pluginConfig(PluginClass).

  The feedback property ('default' | 'move' | 'clone' | 'none') has been moved from the Draggable entity to FeedbackOptions. Drop animation can also now be configured per-draggable.

  Plugins listed in an entity's plugins array are auto-registered on the manager if not already present. The Sortable class now uses this generic mechanism instead of its own custom registration logic.

  Migration guide

  The feedback property has been moved from the draggable/sortable hook input to per-entity Feedback plugin configuration.

  Before:

  import {FeedbackType} from '@dnd-kit/dom';
  
  useDraggable({id: 'item', feedback: 'clone'});
  useSortable({id: 'item', index: 0, feedback: 'clone'});

  After:

  import {Feedback} from '@dnd-kit/dom';
  
  useDraggable({
    id: 'item',
    plugins: [Feedback.configure({feedback: 'clone'})],
  });
  useSortable({
    id: 'item',
    index: 0,
    plugins: (defaults) => [
      ...defaults,
      Feedback.configure({feedback: 'clone'}),
    ],
  });

  Drop animation can now be configured per-draggable:

  useDraggable({
    id: 'item',
    plugins: [Feedback.configure({feedback: 'clone', dropAnimation: null})],
  });

Patch Changes

• #1982 a5935e0 Thanks @clauderic! - fix: ensure onDragStart fires before onDragOver when an element is both draggable and droppable

• #1987 462e435 Thanks @clauderic! - fix: resolve DTS build errors with TypeScript 5.9 on Node 20

  Add explicit return type annotations to avoid [dispose] serialization failures during declaration emit, and fix useRef readonly errors for React 19 type compatibility.

• #1971 8fc1962 Thanks @clauderic! - Added LICENSE file to all published packages.

• #1933 8115a57 Thanks @clauderic! - Fixed plugin registration order when deduplicating configured plugins.

  When a plugin was provided via Plugin.configure() alongside an internally-registered instance of the same plugin, the dedup logic would reorder it to the end of the registration list. This broke plugins like Feedback that resolve StyleInjector from the registry during construction, since StyleInjector would not yet be registered.

  This also prevented users from configuring StyleInjector with a CSP nonce without breaking drag feedback:

  plugins: (defaults) => [
    ...defaults,
    StyleInjector.configure({nonce: 'abc123'}),
  ];

• #1936 4e35963 Thanks @FreTimmerman! - Infer type of source.data object from type argument

• Updated dependencies [8fc1962]:

  • @dnd-kit/geometry@0.4.0
  • @dnd-kit/state@0.4.0