react-dragdrop-kit 1.1.0 → 1.3.0

package/README.md

@@ -1,196 +1,289 @@
-# react-dragdrop-kit
-
-A flexible and lightweight **drag-and-drop toolkit for React**. Build **sortable lists, grids, and boards** with a simple, fully-controlled API and customizable previews. Powered by Atlassian’s pragmatic drag-and-drop under the hood.
-
-<p>
-  <a href="https://www.npmjs.com/package/react-dragdrop-kit"><img alt="npm" src="https://img.shields.io/npm/v/react-dragdrop-kit.svg?label=react-dragdrop-kit"></a>
-  <a href="https://www.npmjs.com/package/react-dragdrop-kit"><img alt="downloads" src="https://img.shields.io/npm/dm/react-dragdrop-kit.svg"></a>
-  <a href="https://github.com/Yourstruggle11/react-dragdrop-kit"><img alt="license" src="https://img.shields.io/badge/license-MIT-blue.svg"></a>
-</p>
-
----
-
-## ✨ Features
-
-- 🔁 **Sortable** (vertical / horizontal)
-- 🎯 **Controlled**: you own the array, update on `onReorder`
-- 🧩 **Custom render** per item (cards, compact, detailed… anything)
-- 🧲 **Drop indicator** + optional **custom drag preview**
-- 🧪 **TypeScript** types included
-- ⚡ Ships tiny bundles (only `dist/` published)
-
----
-
-## 📦 Install
-
-```bash
-npm i react-dragdrop-kit
-# or
-yarn add react-dragdrop-kit
-# or
-pnpm add react-dragdrop-kit
-````
-
-
-## 🚀 Quick Start (Basic Example)
-
-```tsx
-// examples/basic-example.tsx
-
-import * as React from "react";
-import { DragDropList, type DraggableItem, type OrderUpdate } from "react-dragdrop-kit";
-
-interface TodoItem extends DraggableItem {
-  title: string;
-  completed: boolean;
-}
-
-const initial: TodoItem[] = [
-  { id: "1", position: 0, title: "Learn React", completed: false },
-  { id: "2", position: 1, title: "Build awesome app", completed: false },
-  { id: "3", position: 2, title: "Deploy to production", completed: false },
-];
-
-export default function BasicExample() {
-  const [todos, setTodos] = React.useState(initial);
-
-  const handleReorder = (next: TodoItem[], updates: OrderUpdate[]) => {
-    // keep positions normalized
-    setTodos(next.map((it, i) => ({ ...it, position: i })));
-    // optionally send `updates` to your API
-    // console.log("order updates", updates);
-  };
-
-  return (
-    <DragDropList
-      items={todos}
-      onReorder={handleReorder}
-      renderItem={(item) => (
-        <div style={{ padding: 12, border: "1px solid #e5e7eb", borderRadius: 8 }}>
-          <input
-            type="checkbox"
-            checked={item.completed}
-            onChange={() =>
-              setTodos((prev) =>
-                prev.map((t) => (t.id === item.id ? { ...t, completed: !t.completed } : t))
-              )
-            }
-          />
-          <span style={{ marginLeft: 8 }}>{item.title}</span>
-        </div>
-      )}
-      showDropIndicator
-      gap={8}
-    />
-  );
-}
-```
-
----
-
-## 🎨 Styled Example (Tailwind)
-
-```tsx
-// examples/tailwind-example.tsx
-
-import * as React from "react";
-import { DragDropList } from "react-dragdrop-kit";
-
-export default function TailwindExample() {
-  const [items, setItems] = React.useState([
-    { id: "1", position: 0, name: "Dashboard", icon: "📊" },
-    { id: "2", position: 1, name: "Projects",  icon: "📁" },
-    { id: "3", position: 2, name: "Team",      icon: "👥" },
-    { id: "4", position: 3, name: "Calendar",  icon: "📅" },
-  ]);
-
-  return (
-    <DragDropList
-      items={items}
-      onReorder={(next) => setItems(next.map((it, i) => ({ ...it, position: i })))}
-      containerClassName="bg-gray-50 rounded-xl p-6 space-y-2"
-      itemClassName="bg-white rounded-lg shadow-sm hover:shadow-lg transition-all duration-200 cursor-move"
-      dragPreviewClassName="bg-blue-100 rounded-lg shadow-2xl"
-      showDropIndicator
-      dropIndicatorClassName="bg-blue-500"
-      renderItem={(item) => (
-        <div className="flex items-center p-4 space-x-3">
-          <span className="text-2xl">{item.icon}</span>
-          <span className="font-medium text-gray-700">{item.name}</span>
-          <div className="ml-auto">
-            <svg className="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-              <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
-            </svg>
-          </div>
-        </div>
-      )}
-    />
-  );
-}
-```
-
----
-
-## 🧩 API
-
-### `<DragDropList />`
-
-| Prop                     | Type                                          | Default      | Description                                                                                            |
-| ------------------------ | --------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------ |
-| `items`                  | `Array<DraggableItem & T>`                    | —            | Items to render. Must include `{ id: string; position: number }`. You can extend with your own fields. |
-| `onReorder`              | `(next: T[], updates: OrderUpdate[]) => void` | —            | Called after drop. `next` is the new array; `updates` has id + newPosition.                            |
-| `renderItem`             | `(item: T) => React.ReactNode`                | —            | Custom renderer for each item.                                                                         |
-| `direction`              | `"vertical" \| "horizontal"`                  | `"vertical"` | Drag axis + layout.                                                                                    |
-| `gap`                    | `number`                                      | `0`          | Gap (px) between items.                                                                                |
-| `disabled`               | `boolean`                                     | `false`      | Disable dragging.                                                                                      |
-| `showDropIndicator`      | `boolean`                                     | `false`      | Show a drop indicator while dragging.                                                                  |
-| `dropIndicatorClassName` | `string`                                      | —            | CSS class applied to the drop indicator element.                                                       |
-| `dragPreviewStyle`       | `React.CSSProperties`                         | —            | Inline styles for custom drag preview.                                                                 |
-| `containerClassName`     | `string`                                      | —            | Class applied to the container.                                                                        |
-| `itemClassName`          | `string`                                      | —            | Class applied to each item wrapper.                                                                    |
-| `containerStyle`         | `React.CSSProperties`                         | —            | Inline styles for the container.                                                                       |
-| `itemStyle`              | `React.CSSProperties`                         | —            | Inline styles for each item wrapper.                                                                   |
-| `onDragStart`            | `(item: T, index: number) => void`            | —            | Optional callback when drag starts.                                                                    |
-| `onDragEnd`              | `(item: T, index: number) => void`            | —            | Optional callback when drag ends.                                                                      |
-
-#### Types
-
-```ts
-export type DraggableItem = {
-  id: string;
-  position: number; // 0-based
-};
-
-export type OrderUpdate = {
-  id: string;
-  newPosition: number;
-  // Extend in your app if you need: { oldPosition, moved }
-};
-```
-
----
-
-## 🧠 Strict Mode (React 19)
-
-In dev, React Strict Mode **double-mounts** to surface side effects. If you see duplicate `onReorder` calls in development, ensure your event listeners clean up correctly and keep callback identities stable with `useCallback`. Production builds call once.
-
----
-
-## 📚 More Examples
-
-This repo includes full examples:
-
-* [Basic Example](./examples/basic-example.tsx)
-* [Tailwind Example](./examples/tailwind-example.tsx)
-* [Material UI Example](./examples/material-ui-example.tsx)
-* [Horizontal Kanban](./examples/horizontal-kanban.tsx)
-* [Advanced Features](./examples/advanced-features.tsx)
-* [Styled Components Example](./examples/styled-components-example.tsx)
-
-👉 Explore the [`examples/`](./examples) folder for the complete code.
-
----
-
-## 📝 License
-
-MIT © [Yourstruggle11](https://github.com/Yourstruggle11)
+# react-dragdrop-kit
+
+A flexible, lightweight drag-and-drop toolkit for React.
+Build sortable lists, grids, and Kanban boards with a controlled API and minimal overhead.
+
+[![npm version](https://img.shields.io/npm/v/react-dragdrop-kit.svg)](https://www.npmjs.com/package/react-dragdrop-kit)
+[![npm downloads](https://img.shields.io/npm/dm/react-dragdrop-kit.svg)](https://www.npmjs.com/package/react-dragdrop-kit)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/react-dragdrop-kit)](https://bundlephobia.com/package/react-dragdrop-kit)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Yourstruggle11/react-dragdrop-kit)
+[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/Yourstruggle11/react-dragdrop-kit)
+
+## Why this library
+
+`react-dragdrop-kit` is designed around a controlled data model:
+
+- You own state.
+- The library reports drag intent and reorder results.
+- You decide what to persist and render.
+
+This keeps behavior predictable and easy to integrate with app-specific rules.
+
+## Feature overview
+
+### List and grid drag-and-drop
+
+- Vertical and horizontal list support
+- Controlled reorder callback: `onReorder(newItems, orderUpdates)`
+- Optional visual drop indicator
+- Optional custom drag preview style/class
+- Optional handle-only dragging via `dragHandle`
+- Optional multi-item drag with `selectedIds` + `multiDragEnabled`
+
+### Kanban module
+
+- Card reorder within columns
+- Card movement across columns
+- Column reordering
+- Headless rendering (`renderColumn`, `renderCard`)
+- Accessibility helpers (`AnnouncerProvider`, `useAnnouncer`, `announcements`)
+- Keyboard drag-reorder is planned, not fully shipped yet
+
+### General
+
+- TypeScript-first API
+- Lightweight runtime and tree-shakeable exports
+- Built on `@atlaskit/pragmatic-drag-and-drop`
+
+## Installation
+
+```bash
+npm install react-dragdrop-kit
+# or
+pnpm add react-dragdrop-kit
+# or
+yarn add react-dragdrop-kit
+```
+
+## Package entry points
+
+```ts
+import { DragDropList } from "react-dragdrop-kit";
+```
+
+```ts
+import { KanbanBoard, applyDragResult } from "react-dragdrop-kit/kanban";
+```
+
+## Quick start: sortable list
+
+```tsx
+import { useState } from "react";
+import { DragDropList } from "react-dragdrop-kit";
+
+interface Todo {
+  id: string;
+  position: number;
+  title: string;
+}
+
+export default function TodoList() {
+  const [items, setItems] = useState<Todo[]>([
+    { id: "1", position: 0, title: "Design" },
+    { id: "2", position: 1, title: "Build" },
+    { id: "3", position: 2, title: "Ship" },
+  ]);
+
+  return (
+    <DragDropList
+      items={items}
+      onReorder={(next) =>
+        setItems(next.map((item, index) => ({ ...item, position: index })))
+      }
+      renderItem={(item) => (
+        <div style={{ padding: 12, border: "1px solid #e5e7eb", borderRadius: 8 }}>
+          {item.title}
+        </div>
+      )}
+      showDropIndicator
+      gap={8}
+    />
+  );
+}
+```
+
+## Quick start: drag handle and multi-drag
+
+```tsx
+<DragDropList
+  items={items}
+  onReorder={handleReorder}
+  renderItem={renderItem}
+  dragHandle="[data-drag-handle]"
+  selectedIds={selectedIds}
+  multiDragEnabled
+/>
+```
+
+Behavior notes:
+
+- `dragHandle` is optional. If provided, drag starts only from matching descendants.
+- `multiDragEnabled` is opt-in. Without it, behavior remains single-item drag.
+- `selectedIds` is consumed only when multi-drag is enabled.
+
+## Quick start: Kanban board
+
+```tsx
+import { useCallback, useState } from "react";
+import {
+  KanbanBoard,
+  applyDragResult,
+  type DropResult,
+  type KanbanBoardState,
+} from "react-dragdrop-kit/kanban";
+
+export default function Board() {
+  const [state, setState] = useState<KanbanBoardState>({
+    columns: [
+      { id: "todo", title: "To Do", cardIds: ["task-1", "task-2"] },
+      { id: "done", title: "Done", cardIds: [] },
+    ],
+    cards: {
+      "task-1": { id: "task-1", title: "Design landing page" },
+      "task-2": { id: "task-2", title: "Implement auth" },
+    },
+  });
+
+  const handleDragEnd = useCallback(
+    (result: DropResult, stateBefore: KanbanBoardState) => {
+      if (!result.destination) return;
+      setState(applyDragResult(stateBefore, result));
+    },
+    []
+  );
+
+  return (
+    <KanbanBoard
+      state={state}
+      onDragEnd={handleDragEnd}
+      renderColumn={(column) => <div style={{ padding: 12 }}>{column.title}</div>}
+      renderCard={(card) => <div style={{ padding: 12 }}>{card.title}</div>}
+    />
+  );
+}
+```
+
+## API reference: list module
+
+### Core types
+
+```ts
+type DraggableItem = {
+  id: string;
+  position: number;
+  [key: string]: any;
+};
+
+type OrderUpdate = {
+  id: string;
+  newPosition: number;
+  moved?: boolean;
+};
+```
+
+### DragDropList props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `T[]` | Required | Controlled items. Each item must include `id` and `position`. |
+| `onReorder` | `(newItems: T[], orderUpdates: OrderUpdate[]) => void` | Required | Fired after successful drop/reorder. |
+| `renderItem` | `(item: T, index: number) => ReactNode` | Required | Item renderer. |
+| `containerClassName` | `string` | `""` | Class name for container. |
+| `containerStyle` | `React.CSSProperties` | `{}` | Inline style for container. |
+| `itemClassName` | `string` | `""` | Class for each draggable wrapper. |
+| `itemStyle` | `React.CSSProperties` | `{}` | Style for each draggable wrapper. |
+| `dragPreviewClassName` | `string` | `""` | Class for generated drag preview. |
+| `dragPreviewStyle` | `React.CSSProperties` | `{}` | Style for generated drag preview. |
+| `onDragStart` | `(item: T, index: number) => void` | `undefined` | Callback on item drag start. |
+| `onDragEnd` | `(item: T, index: number) => void` | `undefined` | Callback on item drag end. |
+| `disabled` | `boolean` | `false` | Disables list drag/drop. |
+| `gap` | `number \| string` | `undefined` | Gap applied to container. |
+| `direction` | `"vertical" \| "horizontal"` | `"vertical"` | Layout and closest-edge interpretation. |
+| `showDropIndicator` | `boolean` | `false` | Enables drop indicator line. |
+| `dropIndicatorClassName` | `string` | `""` | Class for drop indicator. |
+| `dropIndicatorStyle` | `React.CSSProperties` | `{}` | Style for drop indicator. |
+| `dropIndicatorPosition` | `"top" \| "bottom"` | `"bottom"` | Indicator position for hovered target item. |
+| `dragHandle` | `string` | `undefined` | CSS selector for handle-only dragging. |
+| `selectedIds` | `string[]` | `[]` | Selected IDs used by multi-drag. |
+| `multiDragEnabled` | `boolean` | `false` | Enables grouped drag behavior. |
+
+## API reference: Kanban module
+
+The full Kanban API is documented in [docs/kanban.md](./docs/kanban.md).
+
+Exports:
+
+- Components: `KanbanBoard`, `KanbanColumnView`, `KanbanCardView`
+- Hooks: `useKanbanDnd`, `useAutoscroll`
+- A11y: `AnnouncerProvider`, `useAnnouncer`, `announcements`
+- Utils: `applyDragResult`, `reorderArray`
+- Types: `KanbanBoardState`, `DropResult`, `KanbanCard`, `KanbanColumn`, and more
+
+## Examples
+
+### Repository examples
+
+- `examples/basic-example.tsx`
+- `examples/advanced-features.tsx`
+- `examples/material-ui-example.tsx`
+- `examples/tailwind-example.tsx`
+- `examples/kanban/basic-kanban.tsx`
+- `examples/kanban/rich-cards-kanban.tsx`
+- `examples/kanban/themed-kanban.tsx`
+- `examples/kanban/accessible-kanban.tsx`
+
+### Demo examples
+
+- List/grid examples under `apps/demo/src/examples/*`
+- Kanban demos:
+  - `apps/demo/src/examples/BasicKanban/index.tsx`
+  - `apps/demo/src/examples/RichKanban/index.tsx`
+  - `apps/demo/src/examples/SwimlanesKanban/index.tsx`
+  - `apps/demo/src/examples/WipLimitsKanban/index.tsx`
+
+## Migration notes
+
+### From react-beautiful-dnd
+
+High-level mapping for Kanban use cases:
+
+- `DragDropContext` -> `KanbanBoard`
+- `Droppable` -> `KanbanColumnView`
+- `Draggable` -> `KanbanCardView`
+
+Important differences:
+
+1. State is normalized (`columns` + `cards`) instead of nested.
+2. IDs are explicit and owned by your app.
+3. Rendering is done via render functions (`renderColumn`, `renderCard`).
+
+## Development notes
+
+### React Strict Mode
+
+In development, React Strict Mode can mount effects twice.
+Ensure listener setup and cleanup are idempotent when integrating custom logic.
+
+## Bundle size
+
+Approximate minified sizes:
+
+- `react-dragdrop-kit`: about 5KB
+- `react-dragdrop-kit/kanban`: about 9KB
+
+## Documentation and links
+
+- [Kanban guide](./docs/kanban.md)
+- [Known issues](./KNOWN_ISSUES.md)
+- [Changelog](./packages/react-dragdrop-kit/CHANGELOG.md)
+- [Examples folder](./examples)
+- [Demo app](https://react-dragdrop-kit.netlify.app/)
+
+## Support
+
+- [Report issues](https://github.com/Yourstruggle11/react-dragdrop-kit/issues)
+- [Request features](https://github.com/Yourstruggle11/react-dragdrop-kit/issues/new)
+
+## License
+
+MIT

package/dist/index.esm.js

@@ -1,2 +1,2 @@
-import e,{useRef as t,useState as a,useCallback as r,useEffect as o}from"react";import{combine as i}from"@atlaskit/pragmatic-drag-and-drop/combine";import{draggable as n,dropTargetForElements as d,monitorForElements as s}from"@atlaskit/pragmatic-drag-and-drop/element/adapter";import{extractClosestEdge as l}from"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";const c={container:{default:{minHeight:"200px",transition:"all 0.2s ease",borderRadius:"8px",border:"1px solid #e2e8f0",backgroundColor:"#ffffff",display:"flex",flexDirection:"column",gap:"16px",padding:"16px"},dragging:{backgroundColor:"rgba(66, 153, 225, 0.05)",borderColor:"#3182ce"},horizontal:{flexDirection:"row",flexWrap:"wrap"}},item:{default:{transition:"all 0.2s ease",cursor:"grab",userSelect:"none",position:"relative"},dragging:{opacity:.5,cursor:"grabbing"},hover:{transform:"scale(1.02)",boxShadow:"0 4px 6px rgba(0, 0, 0, 0.1)"},disabled:{cursor:"not-allowed",opacity:.6}},preview:{position:"fixed",pointerEvents:"none",zIndex:9999,opacity:.8,transform:"rotate(2deg)",boxShadow:"0 10px 20px rgba(0, 0, 0, 0.15)"},dropIndicator:{position:"absolute",height:"2px",backgroundColor:"#3182ce",left:0,right:0,zIndex:10,transition:"all 0.2s ease"}},g="draggable-item";function p({item:s,index:l,children:p,className:m="",style:u={},dragPreviewClassName:b="",dragPreviewStyle:v={},onDragStart:f,onDragEnd:x,disabled:y=!1,showDropIndicator:D=!1,dropIndicatorClassName:h="",dropIndicatorStyle:I={},dropIndicatorPosition:j="bottom"}){const O=t(null),[w,S]=a(!1),[N,C]=a(!1),[E,P]=a(null),k=r(e=>y?()=>{}:n({element:e,getInitialData:()=>({type:g,id:s.id,index:l}),onGenerateDragPreview:({nativeSetDragImage:t})=>{const a=e.cloneNode(!0),r=Object.assign(Object.assign({},c.preview),v);b&&(a.className=b),Object.assign(a.style,r,{width:`${(null==e?void 0:e.offsetWidth)||100}px`,height:`${(null==e?void 0:e.offsetHeight)||50}px`}),document.body.appendChild(a),t&&t(a,20,20),requestAnimationFrame(()=>a.remove())},onDragStart:()=>{S(!0),null==f||f(s,l)},onDrop:()=>{S(!1),null==x||x(s,l)}}),[s,l,b,v,f,x,y]),z=r(e=>y?()=>{}:d({element:e,getData:()=>({type:g,id:s.id,index:l}),canDrop:e=>{var t;return(null===(t=e.source.data)||void 0===t?void 0:t.type)===g},getIsSticky:()=>!0,onDragEnter:({source:e,self:t})=>{var a,r;(null===(a=e.data)||void 0===a?void 0:a.id)!==(null===(r=t.data)||void 0===r?void 0:r.id)&&(C(!0),D&&P(j))},onDragLeave:()=>{C(!1),P(null)},onDrop:()=>{C(!1),P(null)}}),[s.id,l,y,D,j]);return o(()=>{const e=O.current;if(e)return e.setAttribute("data-index",l.toString()),y?()=>{}:i(k(e),z(e))},[l,k,z,y]),e.createElement("div",{ref:O,className:m,style:(()=>{const e=Object.assign({},c.item.default);return y?Object.assign(e,c.item.disabled):w?Object.assign(e,c.item.dragging):N&&Object.assign(e,c.item.hover),Object.assign(Object.assign({},e),u)})()},D&&"top"===E&&e.createElement("div",{className:h,style:Object.assign(Object.assign(Object.assign({},c.dropIndicator),I),{top:-1})}),p,D&&"bottom"===E&&e.createElement("div",{className:h,style:Object.assign(Object.assign(Object.assign({},c.dropIndicator),I),{bottom:-1})}))}function m({items:e,onReorder:t,disabled:a=!1}){if(a)return()=>{};return s({onDrop:({location:a,source:r})=>{var o;const i=null===(o=r.data)||void 0===o?void 0:o.index;if(void 0===i)return;const{dropTargets:n}=a.current,d=n.find(e=>{var t,a,o;return"draggable-item"===(null===(t=e.data)||void 0===t?void 0:t.type)&&(null===(a=e.data)||void 0===a?void 0:a.id)!==(null===(o=r.data)||void 0===o?void 0:o.id)});if(!d)return;const s=l(d),c=Number(d.element.getAttribute("data-index")),g="bottom"===s?c+1:c;if(i!==g){const a=[...e],r=function(e,t,a){const r=Array.from(e),[o]=r.splice(t,1);return r.splice(a,0,o),r}(e,i,g),o=function(e,t){const a=t.filter((t,a)=>{var r;return t.id!==(null===(r=e[a])||void 0===r?void 0:r.id)}),r=a.slice().sort((e,t)=>e.position-t.position).map(e=>e.position);return a.map((e,t)=>({id:e.id,newPosition:r[t]}))}(a,r);t(r,o)}}})}function u({items:n,onReorder:s,renderItem:l,containerClassName:g="",containerStyle:u={},itemClassName:b="",itemStyle:v={},dragPreviewClassName:f="",dragPreviewStyle:x={},onDragStart:y,onDragEnd:D,disabled:h=!1,gap:I,direction:j="vertical",showDropIndicator:O=!1,dropIndicatorClassName:w="",dropIndicatorStyle:S={},dropIndicatorPosition:N="bottom"}){const C=t(null),E=m({items:n,onReorder:s,disabled:h}),[P,k]=a(!1),z=r(e=>h?()=>{}:d({element:e,getData:()=>({type:"container"}),onDragEnter:()=>k(!0),onDragLeave:()=>k(!1),onDrop:()=>k(!1)}),[h]);return o(()=>{const e=C.current;if(e&&!h)return i(z(e),E)},[z,E,h]),e.createElement("div",{ref:C,className:g,style:(()=>{const e=Object.assign({},c.container.default);return"horizontal"===j&&Object.assign(e,c.container.horizontal),P&&Object.assign(e,c.container.dragging),void 0!==I&&(e.gap="number"==typeof I?`${I}px`:I),Object.assign(Object.assign({},e),u)})()},n.map((t,a)=>e.createElement(p,{key:t.id,item:t,index:a,className:b,style:v,dragPreviewClassName:f,dragPreviewStyle:x,onDragStart:y,onDragEnd:D,disabled:h,showDropIndicator:O,dropIndicatorClassName:w,dropIndicatorStyle:S,dropIndicatorPosition:N},l(t,a))))}export{u as DragDropList,p as DraggableItemWrapper,c as defaultStyles,m as useDragDropMonitor};
+import e,{useRef as t,useState as n,useCallback as a,useEffect as r}from"react";import{draggable as i,dropTargetForElements as o,monitorForElements as d}from"@atlaskit/pragmatic-drag-and-drop/element/adapter";import{combine as s}from"@atlaskit/pragmatic-drag-and-drop/combine";import{attachClosestEdge as l,extractClosestEdge as c}from"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";const g={container:{default:{minHeight:"200px",transition:"all 0.2s ease",borderRadius:"8px",border:"1px solid #e2e8f0",backgroundColor:"#ffffff",display:"flex",flexDirection:"column",gap:"16px",padding:"16px"},dragging:{backgroundColor:"rgba(66, 153, 225, 0.05)",borderColor:"#3182ce"},horizontal:{flexDirection:"row",flexWrap:"wrap"}},item:{default:{transition:"all 0.2s ease",cursor:"grab",userSelect:"none",position:"relative"},dragging:{opacity:.5,cursor:"grabbing"},hover:{transform:"scale(1.02)",boxShadow:"0 4px 6px rgba(0, 0, 0, 0.1)"},disabled:{cursor:"not-allowed",opacity:.6}},preview:{position:"fixed",pointerEvents:"none",zIndex:9999,opacity:.8,transform:"rotate(2deg)",boxShadow:"0 10px 20px rgba(0, 0, 0, 0.15)"},dropIndicator:{position:"absolute",height:"2px",backgroundColor:"#3182ce",left:0,right:0,zIndex:10,transition:"all 0.2s ease"}},m="draggable-item";function u({item:d,index:c,children:u,className:p="",style:f={},dragPreviewClassName:b="",dragPreviewStyle:v={},onDragStart:h,onDragEnd:x,disabled:D=!1,showDropIndicator:y=!1,dropIndicatorClassName:I="",dropIndicatorStyle:w={},dropIndicatorPosition:S="bottom",direction:j="vertical",dragHandle:O}){const N=t(null),[C,E]=n(!1),[P,M]=n(!1),[k,z]=n(null),H=a(e=>{if(D)return()=>{};const t=O?e.querySelector(O):void 0;return i({element:e,dragHandle:null!=t?t:void 0,canDrag:()=>!O||Boolean(t),getInitialData:()=>({type:m,id:d.id,index:c}),onGenerateDragPreview:({nativeSetDragImage:t})=>{const n=e.cloneNode(!0),a=Object.assign(Object.assign({},g.preview),v);b&&(n.className=b),Object.assign(n.style,a,{width:`${(null==e?void 0:e.offsetWidth)||100}px`,height:`${(null==e?void 0:e.offsetHeight)||50}px`}),document.body.appendChild(n),t&&t(n,20,20),requestAnimationFrame(()=>n.remove())},onDragStart:()=>{E(!0),null==h||h(d,c)},onDrop:()=>{E(!1),null==x||x(d,c)}})},[d,c,O,b,v,h,x,D]),L=a(e=>D?()=>{}:o({element:e,getData:({input:e,element:t})=>{const n={type:m,id:d.id,index:c};return l(n,{input:e,element:t,allowedEdges:[..."horizontal"===j?["left","right"]:["top","bottom"]]})},canDrop:({source:e})=>{var t;return(null===(t=e.data)||void 0===t?void 0:t.type)===m},getIsSticky:()=>!0,onDragEnter:({source:e,self:t})=>{var n,a;(null===(n=e.data)||void 0===n?void 0:n.id)!==(null===(a=t.data)||void 0===a?void 0:a.id)&&(M(!0),y&&z(S))},onDragLeave:()=>{M(!1),z(null)},onDrop:()=>{M(!1),z(null)}}),[d.id,c,j,D,y,S]);return r(()=>{const e=N.current;if(e)return e.setAttribute("data-index",c.toString()),D?()=>{}:s(H(e),L(e))},[c,H,L,D]),e.createElement("div",{ref:N,className:p,style:(()=>{const e=Object.assign({},g.item.default);return D?Object.assign(e,g.item.disabled):C?Object.assign(e,g.item.dragging):P&&Object.assign(e,g.item.hover),Object.assign(Object.assign({},e),f)})()},y&&"top"===k&&e.createElement("div",{className:I,style:Object.assign(Object.assign(Object.assign({},g.dropIndicator),w),{top:-1})}),u,y&&"bottom"===k&&e.createElement("div",{className:I,style:Object.assign(Object.assign(Object.assign({},g.dropIndicator),w),{bottom:-1})}))}function p(e,t,n){const a=Array.from(e),[r]=a.splice(t,1);return a.splice(n,0,r),a}function f(e){const{itemCount:t,sourceIndex:n,rawDestinationIndex:a,isSameList:r}=e;if(t<=0)return 0;const i=t,o=Math.max(0,Math.min(a,i)),d=r&&n<o?o-1:o,s=r?t-1:t;return Math.max(0,Math.min(d,s))}function b({items:e,onReorder:t,disabled:n=!1,direction:i="vertical",selectedIds:o=[],multiDragEnabled:s=!1}){const l=a(({location:n,source:a})=>{var r,d,l;const g=null===(r=a.data)||void 0===r?void 0:r.id,m=null===(d=a.data)||void 0===d?void 0:d.index;if(void 0===g||void 0===m)return;const{dropTargets:u}=n.current,b=u.find(e=>{var t,n;return"draggable-item"===(null===(t=e.data)||void 0===t?void 0:t.type)&&(null===(n=e.data)||void 0===n?void 0:n.id)!==g}),v=u.find(e=>{var t;return"container"===(null===(t=e.data)||void 0===t?void 0:t.type)});if(!b&&!v)return;let h=e.length;if(b){const e=Number(null===(l=b.data)||void 0===l?void 0:l.index);if(!Number.isFinite(e))return;const t=c(b.data);h="bottom"===t||"horizontal"===i&&"right"===t?e+1:e}const x=[...e];let D=e;if(s){const t=new Set(o);t.has(g)||t.clear(),t.add(g);const n=e.map((e,n)=>t.has(e.id)?n:-1).filter(e=>-1!==e);if(n.length>1)D=function(e,t,n){const a=Array.from(new Set(t.filter(t=>t>=0&&t<e.length))).sort((e,t)=>e-t);if(0===a.length)return e;const r=new Set(a),i=a.map(t=>e[t]),o=e.filter((e,t)=>!r.has(t)),d=Math.max(0,Math.min(n,e.length)),s=a.filter(e=>e<d).length,l=Math.max(0,Math.min(d-s,o.length)),c=[...o];return c.splice(l,0,...i),c}(e,n,h);else{const t=f({itemCount:e.length,sourceIndex:m,rawDestinationIndex:h,isSameList:!0});D=p(e,m,t)}}else{const t=f({itemCount:e.length,sourceIndex:m,rawDestinationIndex:h,isSameList:!0});D=p(e,m,t)}const y=D.some((e,t)=>{var n;return e.id!==(null===(n=x[t])||void 0===n?void 0:n.id)});if(!y)return;const I=function(e,t){const n=new Map(e.map((e,t)=>[e.id,t]));return t.flatMap((e,t)=>{const a=n.get(e.id);return void 0===a||a===t?[]:[{id:e.id,newPosition:t,moved:!0}]})}(x,D);t(D,I)},[e,t,i,o,s]);return r(()=>{if(!n)return d({onDrop:l})},[n,l]),a(()=>{},[])}function v({items:i,onReorder:d,renderItem:s,containerClassName:l="",containerStyle:c={},itemClassName:m="",itemStyle:p={},dragPreviewClassName:f="",dragPreviewStyle:v={},onDragStart:h,onDragEnd:x,disabled:D=!1,gap:y,direction:I="vertical",showDropIndicator:w=!1,dropIndicatorClassName:S="",dropIndicatorStyle:j={},dropIndicatorPosition:O="bottom",dragHandle:N,selectedIds:C=[],multiDragEnabled:E=!1}){const P=t(null);b({items:i,onReorder:d,disabled:D,direction:I,selectedIds:C,multiDragEnabled:E});const[M,k]=n(!1),z=a(e=>D?()=>{}:o({element:e,getData:()=>({type:"container"}),onDragEnter:()=>k(!0),onDragLeave:()=>k(!1),onDrop:()=>k(!1)}),[D]);return r(()=>{const e=P.current;if(e&&!D)return z(e)},[z,D]),e.createElement("div",{ref:P,className:l,style:(()=>{const e=Object.assign({},g.container.default);return"horizontal"===I&&Object.assign(e,g.container.horizontal),M&&Object.assign(e,g.container.dragging),void 0!==y&&(e.gap="number"==typeof y?`${y}px`:y),Object.assign(Object.assign({},e),c)})()},i.map((t,n)=>e.createElement(u,{key:t.id,item:t,index:n,className:m,style:p,dragPreviewClassName:f,dragPreviewStyle:v,onDragStart:h,onDragEnd:x,disabled:D,showDropIndicator:w,dropIndicatorClassName:S,dropIndicatorStyle:j,dropIndicatorPosition:O,direction:I,dragHandle:N},s(t,n))))}export{v as DragDropList,u as DraggableItemWrapper,g as defaultStyles,b as useDragDropMonitor};
 //# sourceMappingURL=index.esm.js.map