v1.4.0

Release date: 2026-02-19

Summary

This release improves list drag/drop accuracy, introduces optional live list reordering, and hardens demo behavior for responsive Kanban and swimlane isolation.

Highlights

List drag/drop accuracy and live behavior

• Added optional liveReorder?: boolean on DragDropList for real-time reorder while dragging.
• Stabilized drop target resolution for both vertical and horizontal lists.
• Improved placement logic so dropping on a target item consistently lands in the expected slot.
• Added nearest-target resolution when multiple draggable targets are present.
• Added container-gap insertion handling backed by item DOM metadata (data-rdk-item-id).

Core maintainability

• Refactored monitor math into useDragDropMonitor.logic.ts while keeping API behavior unchanged.
• Expanded monitor test coverage for edge and regression scenarios.

Demo fixes and polish

• ImageGallery: disabled native image drag so dragging works from image surfaces.
• DashboardWidgets and ImageGallery: enabled liveReorder for smoother interaction.
• RichKanban: fixed column layout responsiveness on desktop/mobile widths.
• SwimlanesKanban: fixed cross-lane data contamination with unique lane-scoped column IDs and drag guards.
• ExampleWrapper: improved responsive header layout handling.

Dependency update

• Updated @atlaskit/pragmatic-drag-and-drop to ^1.7.7.

Breaking changes

• None.

Migration notes

No migration is required.

To enable live list reordering:

<DragDropList
  items={items}
  onReorder={handleReorder}
  liveReorder
/>

Validation checklist

• Library lint, tests, typecheck, and build: pass.
• Demo lint, typecheck, and build: pass.

Links

• Changelog: packages/react-dragdrop-kit/CHANGELOG.md
• Known Issues: KNOWN_ISSUES.md

Release Notes - v1.3.0

Release date: 2026-02-16

Summary

This release focuses on core reorder correctness, optional list drag enhancements, Kanban index stability, demo completeness, and quality hardening.

Highlights

New list capabilities (non-breaking)

• Added optional dragHandle?: string to DragDropList for handle-only drag start.
• Added optional selectedIds?: string[] and multiDragEnabled?: boolean for opt-in multi-item drag.
• Existing DragDropList behavior remains unchanged when these props are omitted.

Reorder correctness improvements

• Fixed boundary and last-item reorder instability in list flows.
• Added closest-edge metadata on list item drop targets.
• Added destination-index normalization utilities to make same-list and boundary drops deterministic.
• Applied equivalent normalization logic in Kanban card/column drop math.

Demo improvements

• Fixed filtered-list reorder data-loss in:
  • Todo List
  • Image Gallery
  • Multi Select
  • Grid Layout
• Added and routed missing examples:
  • custom-preview
  • drop-indicator
  • basic-kanban
  • rich-kanban
  • swimlanes-kanban
  • wip-limits-kanban

Tooling and quality

• Added ESLint configuration for the library package.
• Expanded regression coverage:
  • drag monitor reorder behavior
  • multi-drag block reorder behavior
  • drag-handle gating behavior
  • destination-index normalization behavior

Validation

• Library:
  • lint: pass
  • tests: pass
  • typecheck: pass
  • build: pass
• Demo:
  • lint: pass
  • typecheck: pass
  • build: pass

Breaking changes

• None.

Migration notes

No migration required for existing consumers.

To use new optional features:

<DragDropList
  items={items}
  onReorder={handleReorder}
  renderItem={renderItem}
  dragHandle="[data-drag-handle]"
  selectedIds={selectedIds}
  multiDragEnabled
/>

🚀 Get Started

Visit the demo application

---

Full Changelog: CHANGELOG.md

Questions? Open an issue on GitHub

Made with ❤️ by Yourstruggle11

Release Notes - v1.2.0

Major Feature: Kanban Board Support

I am thrilled to announce the release of react-dragdrop-kit v1.2.0, featuring a complete, production-ready Kanban board implementation!

What's New

Kanban Board Module

A fully-featured, headless Kanban board with enterprise-level functionality:

import {
  KanbanBoard,
  type KanbanBoardState,
  type DropResult,
  applyDragResult,
} from 'react-dragdrop-kit/kanban';

Key Features

✅ Drag & Drop

• Move cards within columns
• Move cards between columns
• Reorder columns by dragging headers
• Cancel by dropping outside board

✅ Headless Architecture

• Complete styling control
• Works with any UI framework
• Render props pattern
• Type-safe with full TypeScript support

✅ Accessibility

• Screen reader announcements
• Keyboard navigation ready
• ARIA attributes
• Live region updates

✅ Performance

• Optimized rendering with memoization
• Lightweight bundle (~9KB minified)
• Tree-shakeable exports
• Virtual scrolling compatible

✅ Developer Experience

• Simple, intuitive API
• Comprehensive TypeScript types
• Helper utilities included
• Migration guide from react-beautiful-dnd

Bundle Size

Module	Size (Minified)
Main (react-dragdrop-kit)	5.3KB
Kanban (react-dragdrop-kit/kanban)	9.4KB
Total (if using both)	14.7KB

Demo Application Enhancements

The demo now includes a spectacular Kanban board showcase with:

• 🎨 4 Themes: Modern, Minimal, Colorful, Dark
• ✨ 3 Drag Animations: Rotate, Scale, Lift
• ⚙️ 10+ Customization Options: Gaps, compact mode, toggles for all features
• 🎯 Rich Card Features: Priority badges, avatars, tags, due dates
• 🛠️ Toolbar Actions: Reset, shuffle, settings toggle

Quick Start

import { useState } from 'react';
import { KanbanBoard, applyDragResult } from 'react-dragdrop-kit/kanban';

function MyKanban() {
  const [state, setState] = useState({
    columns: [
      { id: 'todo', title: 'To Do', cardIds: ['task-1'] },
      { id: 'done', title: 'Done', cardIds: [] },
    ],
    cards: {
      'task-1': { id: 'task-1', title: 'My first task' },
    },
  });

  const handleDragEnd = (result) => {
    if (!result.destination) return;
    setState(applyDragResult(state, result));
  };

  return (
    <KanbanBoard
      state={state}
      onDragEnd={handleDragEnd}
      renderColumn={(col) => <div>{col.title}</div>}
      renderCard={(card) => <div>{card.title}</div>}
    />
  );
}

📦 Installation

npm install react-dragdrop-kit@1.2.0

🔄 Migration

From v1.1.0

No breaking changes! Simply upgrade:

npm install react-dragdrop-kit@latest

From react-beautiful-dnd

See our comprehensive migration guide in /docs/kanban.md

📚 Documentation

• Kanban Guide: /docs/kanban.md
• API Reference: Full TypeScript definitions included
• Examples: Check the demo app in /apps/demo
• Migration Guide: From react-beautiful-dnd

🧪 Testing

All features thoroughly tested:

• ✅ 38 unit tests passing
• ✅ TypeScript compilation clean
• ✅ Build successful
• ✅ Demo app running smoothly

🎯 Use Cases

Perfect for:

• Project management tools
• Task tracking systems
• Workflow builders
• Agile boards
• Issue trackers
• Content organization
• Any drag-and-drop board interface

🙏 Credits

• Built with @atlaskit/pragmatic-drag-and-drop
• Inspired by react-beautiful-dnd API design
• Community feedback and contributions

🐛 Bug Fixes

• Fixed TypeScript type issues in test files
• Updated card property from content to title for consistency

📈 Stats

• Components: 6 new (3 public, 3 internal)
• Hooks: 2 new
• Utilities: 5 new helper functions
• Types: 15+ new TypeScript interfaces
• Tests: 29 new unit tests
• Documentation: 300+ lines

🔮 Future Roadmap

• Keyboard navigation (useKeyboardDnd hook)
• Virtual scrolling examples
• E2E tests with Playwright
• Additional themes and presets
• Performance benchmarks

🚀 Get Started

Visit the demo application and click the "🗂️ Kanban Board" tab to see it in action!

---

Full Changelog: CHANGELOG.md

Questions? Open an issue on GitHub

Made with ❤️ by Yourstruggle11

react-dragdrop-kit v1.0.0

🎉 What’s new in v1.0.0

• Initial public release of react-dragdrop-kit
• Sortable lists (vertical/horizontal)
• Custom item renderer + drag preview
• Drop indicator styling hook
• TypeScript types included
• Lightweight build; only dist/ shipped

📦 Install

npm i react-dragdrop-kit