Releases: clauderic/dnd-kit
@dnd-kit/vue@0.4.0
Minor Changes
-
#1915
9b24dffThanks @clauderic! - Redesign event type system to follow the DOM EventMap pattern. IntroducesDragDropEventMapfor event object types andDragDropEventHandlersfor event handler signatures, replacing the ambiguously namedDragDropEvents. Event type aliases (CollisionEvent,DragStartEvent, etc.) now derive directly fromDragDropEventMaprather than usingParameters<>extraction.Migration guide
DragDropEventshas been split into two types:DragDropEventMap— maps event names to event object types (likeWindowEventMap)DragDropEventHandlers— maps event names to(event, manager) => voidhandler signatures
- If you were importing
DragDropEventsto type event objects, useDragDropEventMapinstead:// Before type MyEvent = Parameters<DragDropEvents<D, P, M>['dragend']>[0]; // After type MyEvent = DragDropEventMap<D, P, M>['dragend'];
- If you were importing
DragDropEventsto type event handlers, useDragDropEventHandlersinstead:// Before const handler: DragDropEvents<D, P, M>['dragend'] = (event, manager) => {}; // After const handler: DragDropEventHandlers<D, P, M>['dragend'] = ( event, manager ) => {};
- The
DragDropEventsre-export from@dnd-kit/reactand@dnd-kit/solidhas been removed. ImportDragDropEventMaporDragDropEventHandlersfrom@dnd-kit/abstractdirectly if needed. - Convenience aliases (
CollisionEvent,DragStartEvent,DragEndEvent, etc.) are unchanged and continue to work as before.
-
#1938
e69387dThanks @clauderic! - Added per-entity plugin configuration and movedfeedbackfrom the Draggable entity to the Feedback plugin.Draggable entities now accept a
pluginsproperty for per-entity plugin configuration, using the existingPlugin.configure()pattern. Plugins can read per-entity options viasource.pluginConfig(PluginClass).The
feedbackproperty ('default' | 'move' | 'clone' | 'none') has been moved from the Draggable entity toFeedbackOptions. Drop animation can also now be configured per-draggable.Plugins listed in an entity's
pluginsarray 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
feedbackproperty 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
-
#1971
8fc1962Thanks @clauderic! - Added LICENSE file to all published packages. -
#1953
cdaebffThanks @ImBaedin! - Fix sortable type narrowing soisSortable(event.operation.source)narrows to a sortable draggable with access toinitialIndex, and re-export the drag event type aliases from@dnd-kit/vue. -
#1985
ed65220Thanks @tenianon! - fix: preserve DragDropProvider emits type in built declaration files -
Updated dependencies [
4bc7e71,87bf1e6,521f760,c001272,cde61e4,78af13b,1328af8,532ae9b,267c97c,bfff7de,a5935e0,462e435,9b24dff,8fc1962,88d5ef9,8115a57,688e00f,cdaebff,e69387d,11ff2eb,7489265,4e35963,5a2ed80]:- @dnd-kit/dom@0.4.0
- @dnd-kit/abstract@0.4.0
- @dnd-kit/state@0.4.0
@dnd-kit/svelte@0.4.0
Minor Changes
-
#1915
9b24dffThanks @clauderic! - Redesign event type system to follow the DOM EventMap pattern. IntroducesDragDropEventMapfor event object types andDragDropEventHandlersfor event handler signatures, replacing the ambiguously namedDragDropEvents. Event type aliases (CollisionEvent,DragStartEvent, etc.) now derive directly fromDragDropEventMaprather than usingParameters<>extraction.Migration guide
DragDropEventshas been split into two types:DragDropEventMap— maps event names to event object types (likeWindowEventMap)DragDropEventHandlers— maps event names to(event, manager) => voidhandler signatures
- If you were importing
DragDropEventsto type event objects, useDragDropEventMapinstead:// Before type MyEvent = Parameters<DragDropEvents<D, P, M>['dragend']>[0]; // After type MyEvent = DragDropEventMap<D, P, M>['dragend'];
- If you were importing
DragDropEventsto type event handlers, useDragDropEventHandlersinstead:// Before const handler: DragDropEvents<D, P, M>['dragend'] = (event, manager) => {}; // After const handler: DragDropEventHandlers<D, P, M>['dragend'] = ( event, manager ) => {};
- The
DragDropEventsre-export from@dnd-kit/reactand@dnd-kit/solidhas been removed. ImportDragDropEventMaporDragDropEventHandlersfrom@dnd-kit/abstractdirectly if needed. - Convenience aliases (
CollisionEvent,DragStartEvent,DragEndEvent, etc.) are unchanged and continue to work as before.
-
#1938
e69387dThanks @clauderic! - Added per-entity plugin configuration and movedfeedbackfrom the Draggable entity to the Feedback plugin.Draggable entities now accept a
pluginsproperty for per-entity plugin configuration, using the existingPlugin.configure()pattern. Plugins can read per-entity options viasource.pluginConfig(PluginClass).The
feedbackproperty ('default' | 'move' | 'clone' | 'none') has been moved from the Draggable entity toFeedbackOptions. Drop animation can also now be configured per-draggable.Plugins listed in an entity's
pluginsarray 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
feedbackproperty 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})], });
-
#1976
a78e9dbThanks @clauderic! - RemoveOptimisticSortingPluginfrom Svelte adapter defaults to prevent conflicts with Svelte 5's{#each}reconciliation. The plugin physically reorders DOM elements during drag, which breaks Svelte's internal effect linked list, causing incorrect mutations or an infinite loop when state is updated.Visual sorting during drag is now achieved by calling
move()in anonDragOverhandler, which routes all DOM reordering through Svelte's own reconciler. Update your sortable components to use the snapshot pattern:let snapshot = []; function onDragStart() { snapshot = items.slice(); } function onDragOver(event) { items = move(items, event); } function onDragEnd(event) { if (event.canceled) items = snapshot; }
Patch Changes
-
#1971
8fc1962Thanks @clauderic! - Added LICENSE file to all published packages. -
#1974
5323c96Thanks @clauderic! - fix: guard element cleanup in sortable attach functions to prevent clearing element references during active drag operations -
#1975
4114b29Thanks @clauderic! - fix: sync collisionDetector property in createSortable reactive effect -
Updated dependencies [
4bc7e71,87bf1e6,521f760,c001272,cde61e4,78af13b,1328af8,532ae9b,267c97c,bfff7de,a5935e0,462e435,9b24dff,8fc1962,88d5ef9,8115a57,688e00f,cdaebff,e69387d,11ff2eb,7489265,4e35963,5a2ed80]:- @dnd-kit/dom@0.4.0
- @dnd-kit/abstract@0.4.0
- @dnd-kit/state@0.4.0
@dnd-kit/state@0.4.0
Patch Changes
- #1971
8fc1962Thanks @clauderic! - Added LICENSE file to all published packages.
@dnd-kit/solid@0.4.0
Minor Changes
-
#1915
9b24dffThanks @clauderic! - Redesign event type system to follow the DOM EventMap pattern. IntroducesDragDropEventMapfor event object types andDragDropEventHandlersfor event handler signatures, replacing the ambiguously namedDragDropEvents. Event type aliases (CollisionEvent,DragStartEvent, etc.) now derive directly fromDragDropEventMaprather than usingParameters<>extraction.Migration guide
DragDropEventshas been split into two types:DragDropEventMap— maps event names to event object types (likeWindowEventMap)DragDropEventHandlers— maps event names to(event, manager) => voidhandler signatures
- If you were importing
DragDropEventsto type event objects, useDragDropEventMapinstead:// Before type MyEvent = Parameters<DragDropEvents<D, P, M>['dragend']>[0]; // After type MyEvent = DragDropEventMap<D, P, M>['dragend'];
- If you were importing
DragDropEventsto type event handlers, useDragDropEventHandlersinstead:// Before const handler: DragDropEvents<D, P, M>['dragend'] = (event, manager) => {}; // After const handler: DragDropEventHandlers<D, P, M>['dragend'] = ( event, manager ) => {};
- The
DragDropEventsre-export from@dnd-kit/reactand@dnd-kit/solidhas been removed. ImportDragDropEventMaporDragDropEventHandlersfrom@dnd-kit/abstractdirectly if needed. - Convenience aliases (
CollisionEvent,DragStartEvent,DragEndEvent, etc.) are unchanged and continue to work as before.
-
#1938
e69387dThanks @clauderic! - Added per-entity plugin configuration and movedfeedbackfrom the Draggable entity to the Feedback plugin.Draggable entities now accept a
pluginsproperty for per-entity plugin configuration, using the existingPlugin.configure()pattern. Plugins can read per-entity options viasource.pluginConfig(PluginClass).The
feedbackproperty ('default' | 'move' | 'clone' | 'none') has been moved from the Draggable entity toFeedbackOptions. Drop animation can also now be configured per-draggable.Plugins listed in an entity's
pluginsarray 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
feedbackproperty 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
-
#1971
8fc1962Thanks @clauderic! - Added LICENSE file to all published packages. -
Updated dependencies [
4bc7e71,87bf1e6,521f760,c001272,cde61e4,78af13b,1328af8,532ae9b,267c97c,bfff7de,a5935e0,462e435,9b24dff,8fc1962,88d5ef9,8115a57,688e00f,cdaebff,e69387d,11ff2eb,7489265,4e35963,5a2ed80]:- @dnd-kit/dom@0.4.0
- @dnd-kit/abstract@0.4.0
- @dnd-kit/state@0.4.0
@dnd-kit/react@0.4.0
Minor Changes
-
#1915
9b24dffThanks @clauderic! - Redesign event type system to follow the DOM EventMap pattern. IntroducesDragDropEventMapfor event object types andDragDropEventHandlersfor event handler signatures, replacing the ambiguously namedDragDropEvents. Event type aliases (CollisionEvent,DragStartEvent, etc.) now derive directly fromDragDropEventMaprather than usingParameters<>extraction.Migration guide
DragDropEventshas been split into two types:DragDropEventMap— maps event names to event object types (likeWindowEventMap)DragDropEventHandlers— maps event names to(event, manager) => voidhandler signatures
- If you were importing
DragDropEventsto type event objects, useDragDropEventMapinstead:// Before type MyEvent = Parameters<DragDropEvents<D, P, M>['dragend']>[0]; // After type MyEvent = DragDropEventMap<D, P, M>['dragend'];
- If you were importing
DragDropEventsto type event handlers, useDragDropEventHandlersinstead:// Before const handler: DragDropEvents<D, P, M>['dragend'] = (event, manager) => {}; // After const handler: DragDropEventHandlers<D, P, M>['dragend'] = ( event, manager ) => {};
- The
DragDropEventsre-export from@dnd-kit/reactand@dnd-kit/solidhas been removed. ImportDragDropEventMaporDragDropEventHandlersfrom@dnd-kit/abstractdirectly if needed. - Convenience aliases (
CollisionEvent,DragStartEvent,DragEndEvent, etc.) are unchanged and continue to work as before.
-
#1938
e69387dThanks @clauderic! - Added per-entity plugin configuration and movedfeedbackfrom the Draggable entity to the Feedback plugin.Draggable entities now accept a
pluginsproperty for per-entity plugin configuration, using the existingPlugin.configure()pattern. Plugins can read per-entity options viasource.pluginConfig(PluginClass).The
feedbackproperty ('default' | 'move' | 'clone' | 'none') has been moved from the Draggable entity toFeedbackOptions. Drop animation can also now be configured per-draggable.Plugins listed in an entity's
pluginsarray 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
feedbackproperty 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
-
#1987
462e435Thanks @clauderic! - fix: resolve DTS build errors with TypeScript 5.9 on Node 20Add explicit return type annotations to avoid
[dispose]serialization failures during declaration emit, and fixuseRefreadonly errors for React 19 type compatibility. -
#1971
8fc1962Thanks @clauderic! - Added LICENSE file to all published packages. -
#1924
8e3e5eeThanks @clauderic! - FixuseDeepSignalcallingflushSyncfrom within a React lifecycle method.When signal updates are triggered synchronously from a React effect (e.g. during a
useEffectbatch), callingflushSyncdirectly violates React's internal invariant. The synchronous re-render is now deferred to a microtask viaqueueMicrotask, which runs after the current React batch completes but before the next paint. -
Updated dependencies [
4bc7e71,87bf1e6,521f760,c001272,cde61e4,78af13b,1328af8,532ae9b,267c97c,bfff7de,a5935e0,462e435,9b24dff,8fc1962,88d5ef9,8115a57,688e00f,cdaebff,e69387d,11ff2eb,7489265,4e35963,5a2ed80]:- @dnd-kit/dom@0.4.0
- @dnd-kit/abstract@0.4.0
- @dnd-kit/state@0.4.0
@dnd-kit/helpers@0.4.0
Minor Changes
-
#1915
9b24dffThanks @clauderic! - Redesign event type system to follow the DOM EventMap pattern. IntroducesDragDropEventMapfor event object types andDragDropEventHandlersfor event handler signatures, replacing the ambiguously namedDragDropEvents. Event type aliases (CollisionEvent,DragStartEvent, etc.) now derive directly fromDragDropEventMaprather than usingParameters<>extraction.Migration guide
DragDropEventshas been split into two types:DragDropEventMap— maps event names to event object types (likeWindowEventMap)DragDropEventHandlers— maps event names to(event, manager) => voidhandler signatures
- If you were importing
DragDropEventsto type event objects, useDragDropEventMapinstead:// Before type MyEvent = Parameters<DragDropEvents<D, P, M>['dragend']>[0]; // After type MyEvent = DragDropEventMap<D, P, M>['dragend'];
- If you were importing
DragDropEventsto type event handlers, useDragDropEventHandlersinstead:// Before const handler: DragDropEvents<D, P, M>['dragend'] = (event, manager) => {}; // After const handler: DragDropEventHandlers<D, P, M>['dragend'] = ( event, manager ) => {};
- The
DragDropEventsre-export from@dnd-kit/reactand@dnd-kit/solidhas been removed. ImportDragDropEventMaporDragDropEventHandlersfrom@dnd-kit/abstractdirectly if needed. - Convenience aliases (
CollisionEvent,DragStartEvent,DragEndEvent, etc.) are unchanged and continue to work as before.
Patch Changes
@dnd-kit/geometry@0.4.0
Patch Changes
-
#1971
8fc1962Thanks @clauderic! - Added LICENSE file to all published packages. -
Updated dependencies [
8fc1962]:- @dnd-kit/state@0.4.0
@dnd-kit/dom@0.4.0
Minor Changes
-
#1909
87bf1e6Thanks @clauderic! - Addaccelerationandthresholdoptions to theAutoScrollerplugin.accelerationcontrols the base scroll speed multiplier (default:25).thresholdcontrols the percentage of container dimensions that defines the scroll activation zone (default:0.2). Accepts a single number for both axes or{ x, y }for per-axis control. Setting an axis to0disables auto-scrolling on that axis.
AutoScroller.configure({ acceleration: 15, threshold: {x: 0, y: 0.3}, });
-
#1966
521f760Thanks @lixiaoyan! - Sortablepluginsnow acceptsCustomizable<Plugins>, allowing a function that receives the default plugins to extend them rather than replace them.This prevents accidentally losing the default Sortable plugins (
SortableKeyboardPlugin,OptimisticSortingPlugin) when adding per-entity plugin configuration such asFeedback.configure().// Extend defaults useSortable({ id: 'item', index: 0, plugins: (defaults) => [ ...defaults, Feedback.configure({feedback: 'clone'}), ], }); // Replace defaults (same behavior as before) useSortable({ id: 'item', index: 0, plugins: [MyPlugin], });
-
#1938
c001272Thanks @clauderic! - TheDropAnimationFunctioncontext now includessource, providing access to the draggable entity for conditional animation logic.Feedback.configure({ dropAnimation: async (context) => { if (context.source.type === 'service-draggable') return; // custom animation... }, });
-
#1923
cde61e4Thanks @clauderic! - Batch entity identity changes to prevent collision oscillation during virtualized sorting.When entities swap ids (e.g. as
react-windowrecycles 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
idchanges are now deferred to a microtask and flushed atomically in a singlebatch(), 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)
-
#2001
78af13bThanks @lixiaoyan! - Support a callback form for thefeedbackoption in theFeedbackplugin, allowing the feedback type to be chosen dynamically based on the source and manager context (e.g. activator type).Feedback.configure({ feedback: (source, manager) => { return isKeyboardEvent(manager.dragOperation.activatorEvent) ? 'clone' : 'default'; }, });
-
#1908
1328af8Thanks @clauderic! - AddkeyboardTransitionoption to theFeedbackplugin for customizing or disabling the CSS transition applied when moving elements via keyboard.By default, keyboard-driven moves animate with
250ms cubic-bezier(0.25, 1, 0.5, 1). You can now customize thedurationandeasing, or set the option tonullto disable the transition entirely.Feedback.configure({ keyboardTransition: {duration: 150, easing: 'ease-out'}, });
-
#1919
bfff7deThanks @clauderic! - The Feedback plugin now supports full CSStransformproperty for compatibility with libraries like react-window v2 that position elements via transforms. Transform-related CSS transitions are filtered out to prevent conflicts with Feedback-managed properties. The ResizeObserver computes shapes from CSS values rather than re-measuring the element, avoiding mid-transition measurement errors. Sortable'sanimate()cancels CSS transitions on transform-related properties before measuring to ensure correct FLIP deltas. -
#1915
9b24dffThanks @clauderic! - Redesign event type system to follow the DOM EventMap pattern. IntroducesDragDropEventMapfor event object types andDragDropEventHandlersfor event handler signatures, replacing the ambiguously namedDragDropEvents. Event type aliases (CollisionEvent,DragStartEvent, etc.) now derive directly fromDragDropEventMaprather than usingParameters<>extraction.Migration guide
DragDropEventshas been split into two types:DragDropEventMap— maps event names to event object types (likeWindowEventMap)DragDropEventHandlers— maps event names to(event, manager) => voidhandler signatures
- If you were importing
DragDropEventsto type event objects, useDragDropEventMapinstead:// Before type MyEvent = Parameters<DragDropEvents<D, P, M>['dragend']>[0]; // After type MyEvent = DragDropEventMap<D, P, M>['dragend'];
- If you were importing
DragDropEventsto type event handlers, useDragDropEventHandlersinstead:// Before const handler: DragDropEvents<D, P, M>['dragend'] = (event, manager) => {}; // After const handler: DragDropEventHandlers<D, P, M>['dragend'] = ( event, manager ) => {};
- The
DragDropEventsre-export from@dnd-kit/reactand@dnd-kit/solidhas been removed. ImportDragDropEventMaporDragDropEventHandlersfrom@dnd-kit/abstractdirectly if needed. - Convenience aliases (
CollisionEvent,DragStartEvent,DragEndEvent, etc.) are unchanged and continue to work as before.
-
#1938
e69387dThanks @clauderic! - Added per-entity plugin configuration and movedfeedbackfrom the Draggable entity to the Feedback plugin.Draggable entities now accept a
pluginsproperty for per-entity plugin configuration, using the existingPlugin.configure()pattern. Plugins can read per-entity options viasource.pluginConfig(PluginClass).The
feedbackproperty ('default' | 'move' | 'clone' | 'none') has been moved from the Draggable entity toFeedbackOptions. Drop animation can also now be configured per-draggable.Plugins listed in an entity's
pluginsarray 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
feedbackproperty 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})], });
-
#1905
11ff2ebThanks @clauderic! - RenamedStyleSheetManagertoStyleInjectorand centralized CSPnonceconfiguration.The
StyleInjectorplugin now accepts anonceoption that is applied to all injected<style>elements. Thenonceoptions have been removed from theCursor,PreventSelection, andFeedbackplugin options.Before:
const manager = new DragDropManager({ plugins: (defaults) => [ ...defaults, Cursor.configure({nonce: 'abc123'}), PreventSelection.configure({nonce: 'abc123'}), ], });
After:
const manager = new DragDropManager({ plugins: (defaults) => [ ...defaults, StyleInjector.configure({nonce: 'abc123'}), ], });
The
CursorandPreventSelectionplugins now route their style injection through theStyleInjector, so all injected styles respect the centralizednonceconfiguration.
@dnd-kit/collision@0.4.0
@dnd-kit/abstract@0.4.0
Minor Changes
-
#1923
cde61e4Thanks @clauderic! - Batch entity identity changes to prevent collision oscillation during virtualized sorting.When entities swap ids (e.g. as
react-windowrecycles 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
idchanges are now deferred to a microtask and flushed atomically in a singlebatch(), 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
9b24dffThanks @clauderic! - Redesign event type system to follow the DOM EventMap pattern. IntroducesDragDropEventMapfor event object types andDragDropEventHandlersfor event handler signatures, replacing the ambiguously namedDragDropEvents. Event type aliases (CollisionEvent,DragStartEvent, etc.) now derive directly fromDragDropEventMaprather than usingParameters<>extraction.Migration guide
DragDropEventshas been split into two types:DragDropEventMap— maps event names to event object types (likeWindowEventMap)DragDropEventHandlers— maps event names to(event, manager) => voidhandler signatures
- If you were importing
DragDropEventsto type event objects, useDragDropEventMapinstead:// Before type MyEvent = Parameters<DragDropEvents<D, P, M>['dragend']>[0]; // After type MyEvent = DragDropEventMap<D, P, M>['dragend'];
- If you were importing
DragDropEventsto type event handlers, useDragDropEventHandlersinstead:// Before const handler: DragDropEvents<D, P, M>['dragend'] = (event, manager) => {}; // After const handler: DragDropEventHandlers<D, P, M>['dragend'] = ( event, manager ) => {};
- The
DragDropEventsre-export from@dnd-kit/reactand@dnd-kit/solidhas been removed. ImportDragDropEventMaporDragDropEventHandlersfrom@dnd-kit/abstractdirectly if needed. - Convenience aliases (
CollisionEvent,DragStartEvent,DragEndEvent, etc.) are unchanged and continue to work as before.
-
#1938
e69387dThanks @clauderic! - Added per-entity plugin configuration and movedfeedbackfrom the Draggable entity to the Feedback plugin.Draggable entities now accept a
pluginsproperty for per-entity plugin configuration, using the existingPlugin.configure()pattern. Plugins can read per-entity options viasource.pluginConfig(PluginClass).The
feedbackproperty ('default' | 'move' | 'clone' | 'none') has been moved from the Draggable entity toFeedbackOptions. Drop animation can also now be configured per-draggable.Plugins listed in an entity's
pluginsarray 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
feedbackproperty 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
a5935e0Thanks @clauderic! - fix: ensure onDragStart fires before onDragOver when an element is both draggable and droppable -
#1987
462e435Thanks @clauderic! - fix: resolve DTS build errors with TypeScript 5.9 on Node 20Add explicit return type annotations to avoid
[dispose]serialization failures during declaration emit, and fixuseRefreadonly errors for React 19 type compatibility. -
#1971
8fc1962Thanks @clauderic! - Added LICENSE file to all published packages. -
#1933
8115a57Thanks @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 likeFeedbackthat resolveStyleInjectorfrom the registry during construction, sinceStyleInjectorwould not yet be registered.This also prevented users from configuring
StyleInjectorwith a CSPnoncewithout breaking drag feedback:plugins: (defaults) => [ ...defaults, StyleInjector.configure({nonce: 'abc123'}), ];
-
#1936
4e35963Thanks @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