Skip to content

CHANGELOG.md

Latest commit

 

History

History
585 lines (386 loc) · 46.1 KB

CHANGELOG.md

File metadata and controls

585 lines (386 loc) · 46.1 KB

@dnd-kit/react

0.4.0

Minor Changes

  • #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

0.3.2

Patch Changes

  • Updated dependencies [7260746]:
    • @dnd-kit/dom@0.3.2
    • @dnd-kit/abstract@0.3.2
    • @dnd-kit/state@0.3.2

0.3.1

Patch Changes

  • Updated dependencies [4341114]:
    • @dnd-kit/abstract@0.3.1
    • @dnd-kit/dom@0.3.1
    • @dnd-kit/state@0.3.1

0.3.0

Minor Changes

  • 6a59647 Thanks @clauderic! - Allow plugins, sensors, and modifiers to accept a function that receives the defaults, making it easy to extend or configure them without replacing the entire array.

    // Add a plugin alongside the defaults
const manager = new DragDropManager({
  plugins: (defaults) => [...defaults, MyPlugin],
});
    // Configure a default plugin in React
<DragDropProvider
  plugins={(defaults) => [
    ...defaults,
    Feedback.configure({dropAnimation: null}),
  ]}
/>

    Previously, passing plugins, sensors, or modifiers would replace the defaults entirely, requiring consumers to import and spread defaultPreset. The function form receives the default values as an argument, so consumers can add, remove, or configure individual entries without needing to know or maintain the full default list.

  • 68e44de Thanks @clauderic! - Add isSortableOperation type guard and export SortableDraggable/SortableDroppable types.

    isSortableOperation(operation) narrows a DragOperationSnapshot so that source is typed as SortableDraggable and target as SortableDroppable, providing typed access to sortable-specific properties like index, initialIndex, group, and initialGroup.

    Re-exported from all framework packages (@dnd-kit/react/sortable, @dnd-kit/vue/sortable, @dnd-kit/svelte/sortable, @dnd-kit/solid/sortable).

Patch Changes

  • 5d64078 Thanks @clauderic! - Add dropAnimation prop to the DragOverlay component to allow consumers to disable or customize the drop animation that plays when a drag operation ends. Set to null to disable, pass {duration, easing} to customize timing, or provide a custom animation function for full control.

  • Updated dependencies [6a59647, 5d64078, 863ce2b, 863ce2b, e8ae539, 41d7e27, 68e44de]:

    • @dnd-kit/abstract@0.3.0
    • @dnd-kit/dom@0.3.0
    • @dnd-kit/state@0.3.0

0.2.4

Patch Changes

  • #1874 de27fbc Thanks @clauderic! - Expose ergonomic type aliases for drag and drop event handlers: CollisionEvent, BeforeDragStartEvent, DragStartEvent, DragMoveEvent, DragOverEvent, and DragEndEvent. These types are re-exported from @dnd-kit/dom and @dnd-kit/react for convenience.

  • Updated dependencies [de27fbc, c2097c9, be7cfe3, 6d80680, 0923bc6, 5f1b19a]:

    • @dnd-kit/abstract@0.2.4
    • @dnd-kit/dom@0.2.4
    • @dnd-kit/state@0.2.4

0.2.3

Patch Changes

  • Updated dependencies [f90571d]:
    • @dnd-kit/dom@0.2.3
    • @dnd-kit/abstract@0.2.3
    • @dnd-kit/state@0.2.3

0.2.2

Patch Changes

  • Updated dependencies [5c80bcf]:
    • @dnd-kit/dom@0.2.2
    • @dnd-kit/abstract@0.2.2
    • @dnd-kit/state@0.2.2

0.2.1

Patch Changes

  • Updated dependencies [d7f4130]:
    • @dnd-kit/dom@0.2.1
    • @dnd-kit/abstract@0.2.1
    • @dnd-kit/state@0.2.1

0.2.0

Patch Changes

  • #1823 3058ede Thanks @github-actions! - Simplified instance management of manager to fix a bug where the manager returned by useDragDropManager was null on first mount.

  • Updated dependencies [e95a9c8, e95a9c8, 9849887]:

    • @dnd-kit/abstract@0.2.0
    • @dnd-kit/dom@0.2.0
    • @dnd-kit/state@0.2.0

0.1.21

Patch Changes

  • Updated dependencies [3d6219d]:
    • @dnd-kit/dom@0.1.21
    • @dnd-kit/abstract@0.1.21
    • @dnd-kit/state@0.1.21

0.1.20

Patch Changes

  • Updated dependencies [3ba5a90, 98d4cd4, 32448ff]:
    • @dnd-kit/dom@0.1.20
    • @dnd-kit/state@0.1.20
    • @dnd-kit/abstract@0.1.20

0.1.19

Patch Changes

  • Updated dependencies [cc7feac, d848327]:
    • @dnd-kit/dom@0.1.19
    • @dnd-kit/state@0.1.19
    • @dnd-kit/abstract@0.1.19

0.1.18

Patch Changes

  • #1715 e502979 Thanks @github-actions! - Improved TypeScript generics for better type safety and flexibility

    • Enhanced DragDropManager to accept generic type parameters with proper constraints, allowing for more flexible type usage while maintaining type safety
    • Updated DragDropProvider to support custom generic types for draggable and droppable entities
    • Modified React hooks (useDragDropManager, useDragDropMonitor, useDragOperation) to properly infer and return the correct generic types
    • Changed from concrete Draggable and Droppable types to generic parameters constrained by Data type

  • #1715 d6b5736 Thanks @github-actions! - : Added disabled prop to temporarily disable <DragOverlay> without unmounting it. The disabled prop accepts either a boolean or function that receives the source as input and returns a boolean, which can be useful to disable the <DragOverlay> based on the type or data of the source.

  • #1714 6a27d87 Thanks @clauderic! - Refactor renderer to better handle calls to useOptimistic to update state during transitions.

  • Updated dependencies [e502979, 88942be, 9326d43, 7af261f, b9b182e, bb790c9]:

    • @dnd-kit/dom@0.1.18
    • @dnd-kit/abstract@0.1.18
    • @dnd-kit/state@0.1.18

0.1.17

Patch Changes

  • Updated dependencies [cfb94d4]:
    • @dnd-kit/dom@0.1.17
    • @dnd-kit/abstract@0.1.17
    • @dnd-kit/state@0.1.17

0.1.16

Patch Changes

  • Updated dependencies [93911cc, 0f68bb6]:
    • @dnd-kit/dom@0.1.16
    • @dnd-kit/abstract@0.1.16
    • @dnd-kit/state@0.1.16

0.1.15

Patch Changes

  • Updated dependencies [5539a5a]:
    • @dnd-kit/dom@0.1.15
    • @dnd-kit/abstract@0.1.15
    • @dnd-kit/state@0.1.15

0.1.14

Patch Changes

0.1.13

Patch Changes

0.1.12

Patch Changes

  • Updated dependencies [2e0e2e2, b86867b, a913f5e]:
    • @dnd-kit/dom@0.1.12
    • @dnd-kit/abstract@0.1.12
    • @dnd-kit/state@0.1.12

0.1.11

Patch Changes

  • Updated dependencies [2370665]:
    • @dnd-kit/dom@0.1.11
    • @dnd-kit/abstract@0.1.11
    • @dnd-kit/state@0.1.11

0.1.10

Patch Changes

  • Updated dependencies [a0f5c44]:
    • @dnd-kit/dom@0.1.10
    • @dnd-kit/abstract@0.1.10
    • @dnd-kit/state@0.1.10

0.1.9

Patch Changes

  • Updated dependencies [ffdbf52]:
    • @dnd-kit/dom@0.1.9
    • @dnd-kit/abstract@0.1.9
    • @dnd-kit/state@0.1.9

0.1.8

Patch Changes

0.1.7

Patch Changes

  • Updated dependencies [0618852]:
    • @dnd-kit/dom@0.1.7
    • @dnd-kit/abstract@0.1.7
    • @dnd-kit/state@0.1.7

0.1.6

Patch Changes

0.1.5

Patch Changes

0.1.4

Patch Changes

  • Updated dependencies [b1d798d]:
    • @dnd-kit/dom@0.1.4
    • @dnd-kit/abstract@0.1.4
    • @dnd-kit/state@0.1.4

0.1.3

Patch Changes

0.1.2

Patch Changes

  • #1658 42bec2c Thanks @github-actions! - Add 'use client' directive to DragDropProvider component

    This change ensures proper client-side rendering in Next.js applications by explicitly marking the DragDropProvider component as a client component.

  • #1658 ee55f58 Thanks @github-actions! - Refactor the drag operation system to improve code organization and maintainability:

    • Split dragOperation.ts into multiple focused files:
      • operation.ts - Core drag operation logic
      • status.ts - Status management
      • actions.ts - Drag actions
    • Update imports and exports to reflect new file structure
    • Improve type definitions and exports

  • Updated dependencies [ee55f58, 4682570, f8d69b0, d04e9a2, ee55f58, 374f81f]:

    • @dnd-kit/state@0.1.2
    • @dnd-kit/abstract@0.1.2
    • @dnd-kit/dom@0.1.2

0.1.1

Patch Changes

  • #1656 a4f5fc3 Thanks @github-actions! - - Update DragDropEventHandlers types to be non nullable.
    • Export DragDropEvents and allow them to be generic
    • Allow DragDropProvider to be passed Data as a generic
  • Updated dependencies [569b6e3, a176848, f13cbc9]:
    • @dnd-kit/dom@0.1.1
    • @dnd-kit/abstract@0.1.1
    • @dnd-kit/state@0.1.1

0.1.0

Minor Changes

Patch Changes

0.0.10

Patch Changes

  • #1606 76d2d65 Thanks @github-actions! - Introduce the useDragDropMonitor hook to the @dnd-kit/react package. This hook allows you to monitor drag and drop events within a DragDropProvider.

  • 349f0c0 Thanks @clauderic! - Fixed incorrect types for the useDragDropMonitor hook.

  • Updated dependencies [2c53eb9, 3155941, 082836e]:

    • @dnd-kit/dom@0.0.10
    • @dnd-kit/abstract@0.0.10
    • @dnd-kit/state@0.0.10

0.0.9

Patch Changes

  • #1600 d86bbc7 Thanks @github-actions! - Added alignment configuration option to draggable instances to let consumers decide how to align the draggable during the drop animation and while keyboard sorting. Defaults to the center of the target shape.

  • #1600 2b76c19 Thanks @github-actions! - Added style and tag props to <DragOverlay> component.

  • #1600 b8898bc Thanks @github-actions! - Re-export isSortable from @dnd-kit/react/sortable so React consumers don't have to import it from @dnd-kit/dom/sortable.

  • #1600 c5f25c8 Thanks @github-actions! - Force synchronous re-render when isDragSource property is updated from true to false to enable seamless transition into idle state after drop animation. Without this change, the drop animation can finish before React has had a chance to update the drag source styles back to its idle state, which can cause some flickering.

  • Updated dependencies [e36d954, bb4abcd, d86bbc7, f433fb2, 7dc0103, cff3c3c, b7f1cf8, f87d633, 860759b, 54e416f, 3e629cc, c51778d, 86ed6c8, afedea9, ce31da7]:

    • @dnd-kit/abstract@0.0.9
    • @dnd-kit/dom@0.0.9
    • @dnd-kit/state@0.0.9

0.0.8

Patch Changes

  • #1598 426339d Thanks @github-actions! - Added the <DragOverlay> component to ease migration for consumers of @dnd-kit/core migrating to @dnd-kit/react

  • #1598 3ea0d31 Thanks @github-actions! - Added optional register argument to instances of Entity to disable automatic registration of instances that have a manager supplied on initialization.

  • #1598 e7fafec Thanks @github-actions! - Prevent the Feedback element that has the popover attribute from being accidentally closed during the drag operation, which would take it out of the top layer.

  • #1597 6978d81 Thanks @clauderic! - Introduce useDeepSignal hook, which keeps track of which properties are read on an object and automatically re-renders the component when a read signal changes.

  • Updated dependencies [0de7456, c9716cf, 3ea0d31, 3cf4db1, 74eedef, 42e7256]:

    • @dnd-kit/dom@0.0.8
    • @dnd-kit/abstract@0.0.8
    • @dnd-kit/state@0.0.8

0.0.7

Patch Changes

0.0.6

Patch Changes

0.0.5

Patch Changes

  • Updated dependencies [e9be505]:
    • @dnd-kit/abstract@0.0.5
    • @dnd-kit/dom@0.0.5
    • @dnd-kit/state@0.0.5

0.0.4

Patch Changes

  • #1443 2ccc27c Thanks @clauderic! - Added status property to draggable instances to know the current status of a draggable instance. Useful to know if an instance is being dropped.

  • #1443 e0d80f5 Thanks @clauderic! - Refactor the lifecycle to allow manager to be optional and provided later during the lifecycle of draggable / droppable / sortable instances.

  • #1443 794cf2f Thanks @clauderic! - Removed options and options.register from Entity base class. Passing an undefined manager when instantiating Draggable and Droppable now has the same effect.

  • Updated dependencies [2ccc27c, 1b9df29, 4dbcb1c, a4d9150, e0d80f5, 794cf2f]:

    • @dnd-kit/abstract@0.0.4
    • @dnd-kit/dom@0.0.4
    • @dnd-kit/state@0.0.4

0.0.3

Patch Changes

  • 8530c12 Thanks @clauderic! - Fixed lifecycle related issues.

  • #1440 86e5191 Thanks @clauderic! - Fixed a bug where useDraggable, useDroppable and useSortable would not un-register from the old manager and re-register themselves with the new manager when its reference changes.

  • 8530c12 Thanks @clauderic! - Add lazy import for DragDropProvider.

  • #1440 5ccd5e6 Thanks @clauderic! - Update modifiers on the Draggable instances when useDraggable receives updated modifiers

  • #1440 8f421ee Thanks @clauderic! - Add "use client" hints to @dnd-kit/react exports.

  • Updated dependencies [8530c12, 8e45c2a, 5ccd5e6, 886de33]:

    • @dnd-kit/dom@0.0.3
    • @dnd-kit/abstract@0.0.3
    • @dnd-kit/state@0.0.3

0.0.2

Patch Changes