npm - react-dragdrop-kit - Versions diffs - 1.2.0 → 1.3.0 - Mend

react-dragdrop-kit 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/README.md +289 -337
package/dist/index.esm.js +1 -1
package/dist/index.esm.js.map +1 -1
package/dist/index.js +1 -1
package/dist/index.js.map +1 -1
package/dist/kanban.esm.js +1 -1
package/dist/kanban.esm.js.map +1 -1
package/dist/kanban.js +1 -1
package/dist/kanban.js.map +1 -1
package/dist/src/components/DragDropList.d.ts +1 -1
package/dist/src/components/DraggableItemWrapper.d.ts +1 -1
package/dist/src/hooks/useDragDropMonitor.d.ts +5 -2
package/dist/src/kanban/types.d.ts +3 -1
package/dist/src/kanban/utils/reorder.d.ts +6 -0
package/dist/src/types/index.d.ts +5 -0
package/dist/src/utils/order.d.ts +7 -0
package/package.json +1 -1

package/dist/index.esm.js CHANGED Viewed

@@ -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

package/dist/index.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.esm.js","sources":["../src/styles/defaultStyles.ts","../src/components/DraggableItemWrapper.tsx","../src/hooks/useDragDropMonitor.ts","../src/utils/order.ts","../src/components/DragDropList.tsx"],"sourcesContent":["export const defaultStyles = {\r\n container: {\r\n default: {\r\n minHeight: \"200px\",\r\n transition: \"all 0.2s ease\",\r\n borderRadius: \"8px\",\r\n border: \"1px solid #e2e8f0\",\r\n backgroundColor: \"#ffffff\",\r\n display: \"flex\",\r\n flexDirection: \"column\" as const,\r\n gap: \"16px\",\r\n padding: \"16px\",\r\n },\r\n dragging: {\r\n backgroundColor: \"rgba(66, 153, 225, 0.05)\",\r\n borderColor: \"#3182ce\",\r\n },\r\n horizontal: {\r\n flexDirection: \"row\" as const,\r\n flexWrap: \"wrap\" as const,\r\n },\r\n },\r\n item: {\r\n default: {\r\n transition: \"all 0.2s ease\",\r\n cursor: \"grab\",\r\n userSelect: \"none\" as const,\r\n position: \"relative\" as const,\r\n },\r\n dragging: {\r\n opacity: 0.5,\r\n cursor: \"grabbing\",\r\n },\r\n hover: {\r\n transform: \"scale(1.02)\",\r\n boxShadow: \"0 4px 6px rgba(0, 0, 0, 0.1)\",\r\n },\r\n disabled: {\r\n cursor: \"not-allowed\",\r\n opacity: 0.6,\r\n },\r\n },\r\n preview: {\r\n position: \"fixed\" as const,\r\n pointerEvents: \"none\" as const,\r\n zIndex: 9999,\r\n opacity: 0.8,\r\n transform: \"rotate(2deg)\",\r\n boxShadow: \"0 10px 20px rgba(0, 0, 0, 0.15)\",\r\n },\r\n dropIndicator: {\r\n position: \"absolute\" as const,\r\n height: \"2px\",\r\n backgroundColor: \"#3182ce\",\r\n left: 0,\r\n right: 0,\r\n zIndex: 10,\r\n transition: \"all 0.2s ease\",\r\n },\r\n};\r\n","import React, { useEffect, useRef, useState, useCallback } from \"react\";\r\nimport { combine } from \"@atlaskit/pragmatic-drag-and-drop/combine\";\r\nimport {\r\n draggable,\r\n dropTargetForElements,\r\n} from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\r\nimport type { DraggableItemWrapperProps, DraggableItem } from \"../types\";\r\nimport { defaultStyles } from \"../styles/defaultStyles\";\r\n\r\nconst DRAGGABLE_ITEM = \"draggable-item\";\r\n\r\nexport function DraggableItemWrapper<T extends DraggableItem>({\r\n item,\r\n index,\r\n children,\r\n className = \"\",\r\n style = {},\r\n dragPreviewClassName = \"\",\r\n dragPreviewStyle = {},\r\n onDragStart,\r\n onDragEnd,\r\n disabled = false,\r\n showDropIndicator = false,\r\n dropIndicatorClassName = \"\",\r\n dropIndicatorStyle = {},\r\n dropIndicatorPosition = \"bottom\",\r\n}: DraggableItemWrapperProps<T>) {\r\n const elementRef = useRef<HTMLDivElement>(null);\r\n const [isDragging, setIsDragging] = useState(false);\r\n const [isHovered, setIsHovered] = useState(false);\r\n const [dropPosition, setDropPosition] = useState<\"top\" \| \"bottom\" \| null>(\r\n null\r\n );\r\n\r\n const getItemStyles = (): React.CSSProperties => {\r\n const baseStyle = { ...defaultStyles.item.default };\r\n\r\n if (disabled) {\r\n Object.assign(baseStyle, defaultStyles.item.disabled);\r\n } else if (isDragging) {\r\n Object.assign(baseStyle, defaultStyles.item.dragging);\r\n } else if (isHovered) {\r\n Object.assign(baseStyle, defaultStyles.item.hover);\r\n }\r\n\r\n return { ...baseStyle, ...style };\r\n };\r\n\r\n const getPreviewStyles = (): React.CSSProperties => {\r\n return { ...defaultStyles.preview, ...dragPreviewStyle };\r\n };\r\n\r\n const createDraggable = useCallback(\r\n (element: HTMLElement) => {\r\n if (disabled) return () => {};\r\n\r\n return draggable({\r\n element,\r\n getInitialData: () => ({\r\n type: DRAGGABLE_ITEM,\r\n id: item.id,\r\n index,\r\n }),\r\n onGenerateDragPreview: ({ nativeSetDragImage }) => {\r\n const previewElement = element.cloneNode(true) as HTMLElement;\r\n const previewStyles = getPreviewStyles();\r\n\r\n // Apply custom preview class if provided\r\n if (dragPreviewClassName) {\r\n previewElement.className = dragPreviewClassName;\r\n }\r\n\r\n Object.assign(previewElement.style, previewStyles, {\r\n width: `${element?.offsetWidth \|\| 100}px`,\r\n height: `${element?.offsetHeight \|\| 50}px`,\r\n });\r\n\r\n document.body.appendChild(previewElement);\r\n if (nativeSetDragImage) {\r\n nativeSetDragImage(previewElement, 20, 20);\r\n }\r\n requestAnimationFrame(() => previewElement.remove());\r\n },\r\n onDragStart: () => {\r\n setIsDragging(true);\r\n onDragStart?.(item, index);\r\n },\r\n onDrop: () => {\r\n setIsDragging(false);\r\n onDragEnd?.(item, index);\r\n },\r\n });\r\n },\r\n [\r\n item,\r\n index,\r\n dragPreviewClassName,\r\n dragPreviewStyle,\r\n onDragStart,\r\n onDragEnd,\r\n disabled,\r\n ]\r\n );\r\n\r\n const createDropTarget = useCallback(\r\n (element: HTMLElement) => {\r\n if (disabled) return () => {};\r\n\r\n return dropTargetForElements({\r\n element,\r\n getData: () => ({\r\n type: DRAGGABLE_ITEM,\r\n id: item.id,\r\n index,\r\n }),\r\n canDrop: (args: any) => args.source.data?.type === DRAGGABLE_ITEM,\r\n getIsSticky: () => true,\r\n onDragEnter: ({ source, self }: any) => {\r\n if (source.data?.id !== self.data?.id) {\r\n setIsHovered(true);\r\n if (showDropIndicator) {\r\n setDropPosition(dropIndicatorPosition);\r\n }\r\n }\r\n },\r\n onDragLeave: () => {\r\n setIsHovered(false);\r\n setDropPosition(null);\r\n },\r\n onDrop: () => {\r\n setIsHovered(false);\r\n setDropPosition(null);\r\n },\r\n });\r\n },\r\n [item.id, index, disabled, showDropIndicator, dropIndicatorPosition]\r\n );\r\n\r\n useEffect(() => {\r\n const element = elementRef.current;\r\n if (!element) return;\r\n\r\n element.setAttribute(\"data-index\", index.toString());\r\n\r\n if (disabled) {\r\n // provide a no-op cleanup to satisfy all code paths\r\n return () => {};\r\n }\r\n\r\n // normal draggable + droptarget setup\r\n return combine(createDraggable(element), createDropTarget(element));\r\n }, [index, createDraggable, createDropTarget, disabled]);\r\n\r\n return (\r\n <div ref={elementRef} className={className} style={getItemStyles()}>\r\n {showDropIndicator && dropPosition === \"top\" && (\r\n <div\r\n className={dropIndicatorClassName}\r\n style={{\r\n ...defaultStyles.dropIndicator,\r\n ...dropIndicatorStyle,\r\n top: -1,\r\n }}\r\n />\r\n )}\r\n {children}\r\n {showDropIndicator && dropPosition === \"bottom\" && (\r\n <div\r\n className={dropIndicatorClassName}\r\n style={{\r\n ...defaultStyles.dropIndicator,\r\n ...dropIndicatorStyle,\r\n bottom: -1,\r\n }}\r\n />\r\n )}\r\n </div>\r\n );\r\n}\r\n","import { monitorForElements } from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\r\nimport { extractClosestEdge } from \"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge\";\r\nimport type { DraggableItem, OrderUpdate } from \"../types\";\r\nimport { reorder, calculateOrderUpdates } from \"../utils/order\";\r\n\r\nexport function useDragDropMonitor<T extends DraggableItem>({\r\n items,\r\n onReorder,\r\n disabled = false,\r\n}: {\r\n items: T[];\r\n onReorder: (newItems: T[], orderUpdates: OrderUpdate[]) => void;\r\n disabled?: boolean;\r\n}) {\r\n if (disabled) {\r\n return () => {};\r\n }\r\n\r\n\r\n const handleDrop = ({ location, source }: any) => {\r\n const sourceIndex = source.data?.index as number;\r\n if (sourceIndex === undefined) return;\r\n\r\n const { dropTargets } = location.current;\r\n const destinationTarget = dropTargets.find(\r\n (target: any) =>\r\n target.data?.type === \"draggable-item\" &&\r\n target.data?.id !== source.data?.id\r\n );\r\n\r\n if (!destinationTarget) return;\r\n\r\n const edge = extractClosestEdge(destinationTarget);\r\n const targetIndex = Number(\r\n destinationTarget.element.getAttribute(\"data-index\")\r\n );\r\n const destinationIndex = edge === \"bottom\" ? targetIndex + 1 : targetIndex;\r\n\r\n if (sourceIndex !== destinationIndex) {\r\n const oldItems = [...items];\r\n const newItems = reorder(items, sourceIndex, destinationIndex);\r\n const orderUpdates = calculateOrderUpdates(oldItems, newItems);\r\n onReorder(newItems, orderUpdates);\r\n }\r\n };\r\n\r\n return monitorForElements({\r\n onDrop: handleDrop,\r\n });\r\n}\r\n","import type { DraggableItem, OrderUpdate } from '../types';\r\n\r\nexport function reorder<T>(list: T[], startIndex: number, endIndex: number): T[] {\r\n const result = Array.from(list);\r\n const [removed] = result.splice(startIndex, 1);\r\n result.splice(endIndex, 0, removed);\r\n return result;\r\n}\r\n\r\nexport function calculateOrderUpdates<T extends DraggableItem>(oldItems: T[], newItems: T[]): OrderUpdate[] {\r\n const affected = newItems.filter((item, i) => item.id !== oldItems[i]?.id);\r\n const orderList = affected.slice().sort((a, b) => a.position - b.position).map(i => i.position);\r\n return affected.map((item, i) => ({ id: item.id, newPosition: orderList[i] }));\r\n}\r\n","import React, { useEffect, useRef, useState, useCallback } from \"react\";\r\nimport { combine } from \"@atlaskit/pragmatic-drag-and-drop/combine\";\r\nimport { dropTargetForElements } from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\r\nimport { DraggableItemWrapper } from \"./DraggableItemWrapper\";\r\nimport type { DragDropListProps, DraggableItem } from \"../types\";\r\nimport { useDragDropMonitor } from \"../hooks/useDragDropMonitor\";\r\nimport { defaultStyles } from \"../styles/defaultStyles\";\r\n\r\nexport function DragDropList<T extends DraggableItem>({\r\n items,\r\n onReorder,\r\n renderItem,\r\n containerClassName = \"\",\r\n containerStyle = {},\r\n itemClassName = \"\",\r\n itemStyle = {},\r\n dragPreviewClassName = \"\",\r\n dragPreviewStyle = {},\r\n onDragStart,\r\n onDragEnd,\r\n disabled = false,\r\n gap,\r\n direction = \"vertical\",\r\n showDropIndicator = false,\r\n dropIndicatorClassName = \"\",\r\n dropIndicatorStyle = {},\r\n dropIndicatorPosition = \"bottom\",\r\n}: DragDropListProps<T>) {\r\n const containerRef = useRef<HTMLDivElement>(null);\r\n const monitor = useDragDropMonitor({ items, onReorder, disabled });\r\n const [isDraggingOver, setIsDraggingOver] = useState(false);\r\n\r\n const getContainerStyles = (): React.CSSProperties => {\r\n const baseStyle = { ...defaultStyles.container.default };\r\n\r\n if (direction === \"horizontal\") {\r\n Object.assign(baseStyle, defaultStyles.container.horizontal);\r\n }\r\n\r\n if (isDraggingOver) {\r\n Object.assign(baseStyle, defaultStyles.container.dragging);\r\n }\r\n\r\n if (gap !== undefined) {\r\n baseStyle.gap = typeof gap === \"number\" ? `${gap}px` : gap;\r\n }\r\n\r\n return { ...baseStyle, ...containerStyle };\r\n };\r\n\r\n const createDropTarget = useCallback(\r\n (element: HTMLElement) => {\r\n if (disabled) return () => {};\r\n\r\n return dropTargetForElements({\r\n element,\r\n getData: () => ({ type: \"container\" }),\r\n onDragEnter: () => setIsDraggingOver(true),\r\n onDragLeave: () => setIsDraggingOver(false),\r\n onDrop: () => setIsDraggingOver(false),\r\n });\r\n },\r\n [disabled]\r\n );\r\n\r\n useEffect(() => {\r\n const element = containerRef.current;\r\n if (!element \|\| disabled) return;\r\n\r\n return combine(createDropTarget(element), monitor);\r\n }, [createDropTarget, monitor, disabled]);\r\n\r\n return (\r\n <div\r\n ref={containerRef}\r\n className={containerClassName}\r\n style={getContainerStyles()}\r\n >\r\n {items.map((item, index) => (\r\n <DraggableItemWrapper\r\n key={item.id}\r\n item={item}\r\n index={index}\r\n className={itemClassName}\r\n style={itemStyle}\r\n dragPreviewClassName={dragPreviewClassName}\r\n dragPreviewStyle={dragPreviewStyle}\r\n onDragStart={onDragStart}\r\n onDragEnd={onDragEnd}\r\n disabled={disabled}\r\n showDropIndicator={showDropIndicator}\r\n dropIndicatorClassName={dropIndicatorClassName}\r\n dropIndicatorStyle={dropIndicatorStyle}\r\n dropIndicatorPosition={dropIndicatorPosition}\r\n >\r\n {renderItem(item, index)}\r\n </DraggableItemWrapper>\r\n ))}\r\n </div>\r\n );\r\n}\r\n"],"names":["defaultStyles","container","default","minHeight","transition","borderRadius","border","backgroundColor","display","flexDirection","gap","padding","dragging","borderColor","horizontal","flexWrap","item","cursor","userSelect","position","opacity","hover","transform","boxShadow","disabled","preview","pointerEvents","zIndex","dropIndicator","height","left","right","DRAGGABLE_ITEM","DraggableItemWrapper","index","children","className","style","dragPreviewClassName","dragPreviewStyle","onDragStart","onDragEnd","showDropIndicator","dropIndicatorClassName","dropIndicatorStyle","dropIndicatorPosition","elementRef","useRef","isDragging","setIsDragging","useState","isHovered","setIsHovered","dropPosition","setDropPosition","createDraggable","useCallback","element","draggable","getInitialData","type","id","onGenerateDragPreview","nativeSetDragImage","previewElement","cloneNode","previewStyles","Object","assign","width","offsetWidth","offsetHeight","document","body","appendChild","requestAnimationFrame","remove","onDrop","createDropTarget","dropTargetForElements","getData","canDrop","args","_a","source","data","getIsSticky","onDragEnter","self","_b","onDragLeave","useEffect","current","setAttribute","toString","combine","React","createElement","ref","baseStyle","getItemStyles","top","bottom","useDragDropMonitor","items","onReorder","monitorForElements","location","sourceIndex","undefined","dropTargets","destinationTarget","find","target","_c","edge","extractClosestEdge","targetIndex","Number","getAttribute","destinationIndex","oldItems","newItems","list","startIndex","endIndex","result","Array","from","removed","splice","reorder","orderUpdates","affected","filter","i","orderList","slice","sort","a","b","map","newPosition","calculateOrderUpdates","DragDropList","renderItem","containerClassName","containerStyle","itemClassName","itemStyle","direction","containerRef","monitor","isDraggingOver","setIsDraggingOver","getContainerStyles","key"],"mappings":"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"}
1	+ {"version":3,"file":"index.esm.js","sources":["../src/styles/defaultStyles.ts","../src/components/DraggableItemWrapper.tsx","../src/utils/order.ts","../src/hooks/useDragDropMonitor.ts","../src/components/DragDropList.tsx"],"sourcesContent":["export const defaultStyles = {\r\n container: {\r\n default: {\r\n minHeight: \"200px\",\r\n transition: \"all 0.2s ease\",\r\n borderRadius: \"8px\",\r\n border: \"1px solid #e2e8f0\",\r\n backgroundColor: \"#ffffff\",\r\n display: \"flex\",\r\n flexDirection: \"column\" as const,\r\n gap: \"16px\",\r\n padding: \"16px\",\r\n },\r\n dragging: {\r\n backgroundColor: \"rgba(66, 153, 225, 0.05)\",\r\n borderColor: \"#3182ce\",\r\n },\r\n horizontal: {\r\n flexDirection: \"row\" as const,\r\n flexWrap: \"wrap\" as const,\r\n },\r\n },\r\n item: {\r\n default: {\r\n transition: \"all 0.2s ease\",\r\n cursor: \"grab\",\r\n userSelect: \"none\" as const,\r\n position: \"relative\" as const,\r\n },\r\n dragging: {\r\n opacity: 0.5,\r\n cursor: \"grabbing\",\r\n },\r\n hover: {\r\n transform: \"scale(1.02)\",\r\n boxShadow: \"0 4px 6px rgba(0, 0, 0, 0.1)\",\r\n },\r\n disabled: {\r\n cursor: \"not-allowed\",\r\n opacity: 0.6,\r\n },\r\n },\r\n preview: {\r\n position: \"fixed\" as const,\r\n pointerEvents: \"none\" as const,\r\n zIndex: 9999,\r\n opacity: 0.8,\r\n transform: \"rotate(2deg)\",\r\n boxShadow: \"0 10px 20px rgba(0, 0, 0, 0.15)\",\r\n },\r\n dropIndicator: {\r\n position: \"absolute\" as const,\r\n height: \"2px\",\r\n backgroundColor: \"#3182ce\",\r\n left: 0,\r\n right: 0,\r\n zIndex: 10,\r\n transition: \"all 0.2s ease\",\r\n },\r\n};\r\n","import React, { useEffect, useRef, useState, useCallback } from \"react\";\r\nimport { combine } from \"@atlaskit/pragmatic-drag-and-drop/combine\";\r\nimport {\n draggable,\n dropTargetForElements,\n} from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\nimport { attachClosestEdge } from \"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge\";\nimport type { DraggableItemWrapperProps, DraggableItem } from \"../types\";\nimport { defaultStyles } from \"../styles/defaultStyles\";\n\r\nconst DRAGGABLE_ITEM = \"draggable-item\";\r\n\r\nexport function DraggableItemWrapper<T extends DraggableItem>({\r\n item,\r\n index,\r\n children,\r\n className = \"\",\r\n style = {},\r\n dragPreviewClassName = \"\",\r\n dragPreviewStyle = {},\r\n onDragStart,\r\n onDragEnd,\r\n disabled = false,\r\n showDropIndicator = false,\r\n dropIndicatorClassName = \"\",\n dropIndicatorStyle = {},\n dropIndicatorPosition = \"bottom\",\n direction = \"vertical\",\n dragHandle,\n}: DraggableItemWrapperProps<T>) {\n const elementRef = useRef<HTMLDivElement>(null);\r\n const [isDragging, setIsDragging] = useState(false);\r\n const [isHovered, setIsHovered] = useState(false);\r\n const [dropPosition, setDropPosition] = useState<\"top\" \| \"bottom\" \| null>(\r\n null\r\n );\r\n\r\n const getItemStyles = (): React.CSSProperties => {\r\n const baseStyle = { ...defaultStyles.item.default };\r\n\r\n if (disabled) {\r\n Object.assign(baseStyle, defaultStyles.item.disabled);\r\n } else if (isDragging) {\r\n Object.assign(baseStyle, defaultStyles.item.dragging);\r\n } else if (isHovered) {\r\n Object.assign(baseStyle, defaultStyles.item.hover);\r\n }\r\n\r\n return { ...baseStyle, ...style };\r\n };\r\n\r\n const getPreviewStyles = (): React.CSSProperties => {\r\n return { ...defaultStyles.preview, ...dragPreviewStyle };\r\n };\r\n\r\n const createDraggable = useCallback(\n (element: HTMLElement) => {\n if (disabled) return () => {};\n const dragHandleElement = dragHandle\n ? element.querySelector(dragHandle)\n : undefined;\n\n return draggable({\n element,\n dragHandle: dragHandleElement ?? undefined,\n canDrag: () => !dragHandle \|\| Boolean(dragHandleElement),\n getInitialData: () => ({\n type: DRAGGABLE_ITEM,\n id: item.id,\n index,\r\n }),\r\n onGenerateDragPreview: ({ nativeSetDragImage }) => {\r\n const previewElement = element.cloneNode(true) as HTMLElement;\r\n const previewStyles = getPreviewStyles();\r\n\r\n // Apply custom preview class if provided\r\n if (dragPreviewClassName) {\r\n previewElement.className = dragPreviewClassName;\r\n }\r\n\r\n Object.assign(previewElement.style, previewStyles, {\r\n width: `${element?.offsetWidth \|\| 100}px`,\r\n height: `${element?.offsetHeight \|\| 50}px`,\r\n });\r\n\r\n document.body.appendChild(previewElement);\r\n if (nativeSetDragImage) {\r\n nativeSetDragImage(previewElement, 20, 20);\r\n }\r\n requestAnimationFrame(() => previewElement.remove());\r\n },\r\n onDragStart: () => {\r\n setIsDragging(true);\r\n onDragStart?.(item, index);\r\n },\r\n onDrop: () => {\r\n setIsDragging(false);\r\n onDragEnd?.(item, index);\r\n },\r\n });\r\n },\r\n [\r\n item,\r\n index,\n dragHandle,\n dragPreviewClassName,\n dragPreviewStyle,\n onDragStart,\n onDragEnd,\r\n disabled,\r\n ]\r\n );\r\n\r\n const createDropTarget = useCallback(\r\n (element: HTMLElement) => {\r\n if (disabled) return () => {};\r\n\r\n return dropTargetForElements({\n element,\n getData: ({ input, element: targetElement }) => {\n const baseData = {\n type: DRAGGABLE_ITEM,\n id: item.id,\n index,\n };\n const allowedEdges =\n direction === \"horizontal\" ? ([\"left\", \"right\"] as const) : ([\"top\", \"bottom\"] as const);\n\n return attachClosestEdge(baseData, {\n input,\n element: targetElement,\n allowedEdges: [...allowedEdges],\n });\n },\n canDrop: ({ source }) => source.data?.type === DRAGGABLE_ITEM,\n getIsSticky: () => true,\n onDragEnter: ({ source, self }) => {\n if (source.data?.id !== self.data?.id) {\n setIsHovered(true);\n if (showDropIndicator) {\n setDropPosition(dropIndicatorPosition);\r\n }\r\n }\r\n },\r\n onDragLeave: () => {\r\n setIsHovered(false);\r\n setDropPosition(null);\r\n },\r\n onDrop: () => {\r\n setIsHovered(false);\r\n setDropPosition(null);\r\n },\r\n });\n },\n [item.id, index, direction, disabled, showDropIndicator, dropIndicatorPosition]\n );\n\r\n useEffect(() => {\r\n const element = elementRef.current;\r\n if (!element) return;\r\n\r\n element.setAttribute(\"data-index\", index.toString());\r\n\r\n if (disabled) {\r\n // provide a no-op cleanup to satisfy all code paths\r\n return () => {};\r\n }\r\n\r\n // normal draggable + droptarget setup\r\n return combine(createDraggable(element), createDropTarget(element));\r\n }, [index, createDraggable, createDropTarget, disabled]);\r\n\r\n return (\r\n <div ref={elementRef} className={className} style={getItemStyles()}>\r\n {showDropIndicator && dropPosition === \"top\" && (\r\n <div\r\n className={dropIndicatorClassName}\r\n style={{\r\n ...defaultStyles.dropIndicator,\r\n ...dropIndicatorStyle,\r\n top: -1,\r\n }}\r\n />\r\n )}\r\n {children}\r\n {showDropIndicator && dropPosition === \"bottom\" && (\r\n <div\r\n className={dropIndicatorClassName}\r\n style={{\r\n ...defaultStyles.dropIndicator,\r\n ...dropIndicatorStyle,\r\n bottom: -1,\r\n }}\r\n />\r\n )}\r\n </div>\r\n );\r\n}\r\n","import type { DraggableItem, OrderUpdate } from '../types';\n\nexport function reorder<T>(list: T[], startIndex: number, endIndex: number): T[] {\n const result = Array.from(list);\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n return result;\n}\n\nexport function normalizeDestinationIndex(params: {\n itemCount: number;\n sourceIndex: number;\n rawDestinationIndex: number;\n isSameList: boolean;\n}): number {\n const { itemCount, sourceIndex, rawDestinationIndex, isSameList } = params;\n\n if (itemCount <= 0) return 0;\n\n const maxRaw = itemCount;\n const clampedRaw = Math.max(0, Math.min(rawDestinationIndex, maxRaw));\n const adjusted = isSameList && sourceIndex < clampedRaw ? clampedRaw - 1 : clampedRaw;\n const maxFinal = isSameList ? itemCount - 1 : itemCount;\n\n return Math.max(0, Math.min(adjusted, maxFinal));\n}\n\nexport function reorderMany<T>(list: T[], selectedIndexes: number[], rawDestinationIndex: number): T[] {\n const uniqueIndexes = Array.from(\n new Set(selectedIndexes.filter((index) => index >= 0 && index < list.length))\n ).sort((a, b) => a - b);\n\n if (uniqueIndexes.length === 0) return list;\n\n const selectedSet = new Set(uniqueIndexes);\n const moving = uniqueIndexes.map((index) => list[index]);\n const remaining = list.filter((_, index) => !selectedSet.has(index));\n\n const clampedRaw = Math.max(0, Math.min(rawDestinationIndex, list.length));\n const removedBeforeDestination = uniqueIndexes.filter((index) => index < clampedRaw).length;\n const insertionIndex = Math.max(\n 0,\n Math.min(clampedRaw - removedBeforeDestination, remaining.length)\n );\n\n const result = [...remaining];\n result.splice(insertionIndex, 0, ...moving);\n return result;\n}\n\nexport function calculateOrderUpdates<T extends DraggableItem>(oldItems: T[], newItems: T[]): OrderUpdate[] {\n const oldIndexById = new Map(oldItems.map((item, index) => [item.id, index]));\n\n return newItems.flatMap((item, index) => {\n const oldIndex = oldIndexById.get(item.id);\n if (oldIndex === undefined \|\| oldIndex === index) return [];\n return [{ id: item.id, newPosition: index, moved: true }];\n });\n}\n","import { useCallback, useEffect } from \"react\";\nimport { monitorForElements } from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\nimport { extractClosestEdge } from \"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge\";\nimport type { ElementEventPayloadMap } from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\nimport type { DraggableItem, OrderUpdate } from \"../types\";\nimport {\n reorder,\n reorderMany,\n normalizeDestinationIndex,\n calculateOrderUpdates,\n} from \"../utils/order\";\n\nexport function useDragDropMonitor<T extends DraggableItem>({\n items,\n onReorder,\n disabled = false,\n direction = \"vertical\",\n selectedIds = [],\n multiDragEnabled = false,\n}: {\n items: T[];\n onReorder: (newItems: T[], orderUpdates: OrderUpdate[]) => void;\n disabled?: boolean;\n direction?: \"vertical\" \| \"horizontal\";\n selectedIds?: string[];\n multiDragEnabled?: boolean;\n}) {\n const handleDrop = useCallback(\n ({ location, source }: ElementEventPayloadMap[\"onDrop\"]) => {\n const sourceId = source.data?.id as string \| undefined;\n const sourceIndex = source.data?.index as number \| undefined;\n if (sourceId === undefined \|\| sourceIndex === undefined) return;\n\n const { dropTargets } = location.current;\n const destinationTarget = dropTargets.find(\n (target) =>\n target.data?.type === \"draggable-item\" &&\n target.data?.id !== sourceId\n );\n const containerTarget = dropTargets.find(\n (target) => target.data?.type === \"container\"\n );\n\n if (!destinationTarget && !containerTarget) return;\n\n let rawDestinationIndex = items.length;\n if (destinationTarget) {\n const targetIndex = Number(destinationTarget.data?.index);\n if (!Number.isFinite(targetIndex)) return;\n const edge = extractClosestEdge(destinationTarget.data);\n const isAfter =\n edge === \"bottom\" \|\| (direction === \"horizontal\" && edge === \"right\");\n rawDestinationIndex = isAfter ? targetIndex + 1 : targetIndex;\n }\n\n const oldItems = [...items];\n let newItems: T[] = items;\n\n if (multiDragEnabled) {\n const selectedSet = new Set(selectedIds);\n if (!selectedSet.has(sourceId)) {\n selectedSet.clear();\n }\n selectedSet.add(sourceId);\n\n const selectedIndexes = items\n .map((item, index) => (selectedSet.has(item.id) ? index : -1))\n .filter((index) => index !== -1);\n\n if (selectedIndexes.length > 1) {\n newItems = reorderMany(items, selectedIndexes, rawDestinationIndex);\n } else {\n const destinationIndex = normalizeDestinationIndex({\n itemCount: items.length,\n sourceIndex,\n rawDestinationIndex,\n isSameList: true,\n });\n newItems = reorder(items, sourceIndex, destinationIndex);\n }\n } else {\n const destinationIndex = normalizeDestinationIndex({\n itemCount: items.length,\n sourceIndex,\n rawDestinationIndex,\n isSameList: true,\n });\n newItems = reorder(items, sourceIndex, destinationIndex);\n }\n\n const isChanged = newItems.some((item, index) => item.id !== oldItems[index]?.id);\n if (!isChanged) return;\n\n const orderUpdates = calculateOrderUpdates(oldItems, newItems);\n onReorder(newItems, orderUpdates);\n },\n [items, onReorder, direction, selectedIds, multiDragEnabled]\n );\n\n useEffect(() => {\n if (disabled) return;\n return monitorForElements({\n onDrop: handleDrop,\n });\n }, [disabled, handleDrop]);\n\n return useCallback(() => {}, []);\n}\n","import React, { useEffect, useRef, useState, useCallback } from \"react\";\nimport { dropTargetForElements } from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\nimport { DraggableItemWrapper } from \"./DraggableItemWrapper\";\nimport type { DragDropListProps, DraggableItem } from \"../types\";\nimport { useDragDropMonitor } from \"../hooks/useDragDropMonitor\";\nimport { defaultStyles } from \"../styles/defaultStyles\";\r\n\r\nexport function DragDropList<T extends DraggableItem>({\r\n items,\r\n onReorder,\r\n renderItem,\r\n containerClassName = \"\",\r\n containerStyle = {},\r\n itemClassName = \"\",\r\n itemStyle = {},\r\n dragPreviewClassName = \"\",\r\n dragPreviewStyle = {},\r\n onDragStart,\r\n onDragEnd,\r\n disabled = false,\r\n gap,\r\n direction = \"vertical\",\r\n showDropIndicator = false,\r\n dropIndicatorClassName = \"\",\n dropIndicatorStyle = {},\n dropIndicatorPosition = \"bottom\",\n dragHandle,\n selectedIds = [],\n multiDragEnabled = false,\n}: DragDropListProps<T>) {\n const containerRef = useRef<HTMLDivElement>(null);\n useDragDropMonitor({\n items,\n onReorder,\n disabled,\n direction,\n selectedIds,\n multiDragEnabled,\n });\n const [isDraggingOver, setIsDraggingOver] = useState(false);\n\r\n const getContainerStyles = (): React.CSSProperties => {\r\n const baseStyle = { ...defaultStyles.container.default };\r\n\r\n if (direction === \"horizontal\") {\r\n Object.assign(baseStyle, defaultStyles.container.horizontal);\r\n }\r\n\r\n if (isDraggingOver) {\r\n Object.assign(baseStyle, defaultStyles.container.dragging);\r\n }\r\n\r\n if (gap !== undefined) {\r\n baseStyle.gap = typeof gap === \"number\" ? `${gap}px` : gap;\r\n }\r\n\r\n return { ...baseStyle, ...containerStyle };\r\n };\r\n\r\n const createDropTarget = useCallback(\r\n (element: HTMLElement) => {\r\n if (disabled) return () => {};\r\n\r\n return dropTargetForElements({\r\n element,\r\n getData: () => ({ type: \"container\" }),\r\n onDragEnter: () => setIsDraggingOver(true),\r\n onDragLeave: () => setIsDraggingOver(false),\r\n onDrop: () => setIsDraggingOver(false),\r\n });\r\n },\r\n [disabled]\r\n );\r\n\r\n useEffect(() => {\n const element = containerRef.current;\n if (!element \|\| disabled) return;\n\n return createDropTarget(element);\n }, [createDropTarget, disabled]);\n\r\n return (\r\n <div\r\n ref={containerRef}\r\n className={containerClassName}\r\n style={getContainerStyles()}\r\n >\r\n {items.map((item, index) => (\r\n <DraggableItemWrapper\r\n key={item.id}\r\n item={item}\r\n index={index}\r\n className={itemClassName}\r\n style={itemStyle}\r\n dragPreviewClassName={dragPreviewClassName}\r\n dragPreviewStyle={dragPreviewStyle}\r\n onDragStart={onDragStart}\r\n onDragEnd={onDragEnd}\r\n disabled={disabled}\r\n showDropIndicator={showDropIndicator}\r\n dropIndicatorClassName={dropIndicatorClassName}\n dropIndicatorStyle={dropIndicatorStyle}\n dropIndicatorPosition={dropIndicatorPosition}\n direction={direction}\n dragHandle={dragHandle}\n >\n {renderItem(item, index)}\n </DraggableItemWrapper>\n ))}\r\n </div>\r\n );\r\n}\r\n"],"names":["defaultStyles","container","default","minHeight","transition","borderRadius","border","backgroundColor","display","flexDirection","gap","padding","dragging","borderColor","horizontal","flexWrap","item","cursor","userSelect","position","opacity","hover","transform","boxShadow","disabled","preview","pointerEvents","zIndex","dropIndicator","height","left","right","DRAGGABLE_ITEM","DraggableItemWrapper","index","children","className","style","dragPreviewClassName","dragPreviewStyle","onDragStart","onDragEnd","showDropIndicator","dropIndicatorClassName","dropIndicatorStyle","dropIndicatorPosition","direction","dragHandle","elementRef","useRef","isDragging","setIsDragging","useState","isHovered","setIsHovered","dropPosition","setDropPosition","createDraggable","useCallback","element","dragHandleElement","querySelector","undefined","draggable","canDrag","Boolean","getInitialData","type","id","onGenerateDragPreview","nativeSetDragImage","previewElement","cloneNode","previewStyles","Object","assign","width","offsetWidth","offsetHeight","document","body","appendChild","requestAnimationFrame","remove","onDrop","createDropTarget","dropTargetForElements","getData","input","targetElement","baseData","attachClosestEdge","allowedEdges","canDrop","source","_a","data","getIsSticky","onDragEnter","self","_b","onDragLeave","useEffect","current","setAttribute","toString","combine","React","createElement","ref","baseStyle","getItemStyles","top","bottom","reorder","list","startIndex","endIndex","result","Array","from","removed","splice","normalizeDestinationIndex","params","itemCount","sourceIndex","rawDestinationIndex","isSameList","maxRaw","clampedRaw","Math","max","min","adjusted","maxFinal","useDragDropMonitor","items","onReorder","selectedIds","multiDragEnabled","handleDrop","location","sourceId","dropTargets","destinationTarget","find","target","containerTarget","length","targetIndex","Number","_c","isFinite","edge","extractClosestEdge","oldItems","newItems","selectedSet","Set","has","clear","add","selectedIndexes","map","filter","uniqueIndexes","sort","a","b","moving","remaining","_","removedBeforeDestination","insertionIndex","reorderMany","destinationIndex","isChanged","some","orderUpdates","oldIndexById","Map","flatMap","oldIndex","get","newPosition","moved","calculateOrderUpdates","monitorForElements","DragDropList","renderItem","containerClassName","containerStyle","itemClassName","itemStyle","containerRef","isDraggingOver","setIsDraggingOver","getContainerStyles","key"],"mappings":"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"}

package/dist/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react"),t=require("@atlaskit/pragmatic-drag-and-drop/combine"),r=require("@atlaskit/pragmatic-drag-and-drop/element/adapter"),a=require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");const o={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"}},i="draggable-item";function n({item:a,index:n,children:s,className:d="",style:l={},dragPreviewClassName:c="",dragPreviewStyle:g={},onDragStart:p,onDragEnd:u,disabled:m=!1,showDropIndicator:b=!1,dropIndicatorClassName:f="",dropIndicatorStyle:v={},dropIndicatorPosition:x="bottom"}){const D=e.useRef(null),[y,S]=e.useState(!1),[h,I]=e.useState(!1),[j,O]=e.useState(null),w=e.useCallback(e=>m?()=>{}:r.draggable({element:e,getInitialData:()=>({type:i,id:a.id,index:n}),onGenerateDragPreview:({nativeSetDragImage:t})=>{const r=e.cloneNode(!0),a=Object.assign(Object.assign({},o.preview),g);c&&(r.className=c),Object.assign(r.style,a,{width:`${(null==e?void 0:e.offsetWidth)||100}px`,height:`${(null==e?void 0:e.offsetHeight)||50}px`}),document.body.appendChild(r),t&&t(r,20,20),requestAnimationFrame(()=>r.remove())},onDragStart:()=>{S(!0),null==p||p(a,n)},onDrop:()=>{S(!1),null==u||u(a,n)}}),[a,n,c,g,p,u,m]),C=e.useCallback(e=>m?()=>{}:r.dropTargetForElements({element:e,getData:()=>({type:i,id:a.id,index:n}),canDrop:e=>{var t;return(null===(t=e.source.data)||void 0===t?void 0:t.type)===i},getIsSticky:()=>!0,onDragEnter:({source:e,self:t})=>{var r,a;(null===(r=e.data)||void 0===r?void 0:r.id)!==(null===(a=t.data)||void 0===a?void 0:a.id)&&(I(!0),b&&O(x))},onDragLeave:()=>{I(!1),O(null)},onDrop:()=>{I(!1),O(null)}}),[a.id,n,m,b,x]);return e.useEffect(()=>{const e=D.current;if(e)return e.setAttribute("data-index",n.toString()),m?()=>{}:t.combine(w(e),C(e))},[n,w,C,m]),e.createElement("div",{ref:D,className:d,style:(()=>{const e=Object.assign({},o.item.default);return m?Object.assign(e,o.item.disabled):y?Object.assign(e,o.item.dragging):h&&Object.assign(e,o.item.hover),Object.assign(Object.assign({},e),l)})()},b&&"top"===j&&e.createElement("div",{className:f,style:Object.assign(Object.assign(Object.assign({},o.dropIndicator),v),{top:-1})}),s,b&&"bottom"===j&&e.createElement("div",{className:f,style:Object.assign(Object.assign(Object.assign({},o.dropIndicator),v),{bottom:-1})}))}function s({items:e,onReorder:t,disabled:o=!1}){if(o)return()=>{};return r.monitorForElements({onDrop:({location:r,source:o})=>{var i;const n=null===(i=o.data)||void 0===i?void 0:i.index;if(void 0===n)return;const{dropTargets:s}=r.current,d=s.find(e=>{var t,r,a;return"draggable-item"===(null===(t=e.data)||void 0===t?void 0:t.type)&&(null===(r=e.data)||void 0===r?void 0:r.id)!==(null===(a=o.data)||void 0===a?void 0:a.id)});if(!d)return;const l=a.extractClosestEdge(d),c=Number(d.element.getAttribute("data-index")),g="bottom"===l?c+1:c;if(n!==g){const r=[...e],a=function(e,t,r){const a=Array.from(e),[o]=a.splice(t,1);return a.splice(r,0,o),a}(e,n,g),o=function(e,t){const r=t.filter((t,r)=>{var a;return t.id!==(null===(a=e[r])||void 0===a?void 0:a.id)}),a=r.slice().sort((e,t)=>e.position-t.position).map(e=>e.position);return r.map((e,t)=>({id:e.id,newPosition:a[t]}))}(r,a);t(a,o)}}})}exports.DragDropList=function({items:a,onReorder:i,renderItem:d,containerClassName:l="",containerStyle:c={},itemClassName:g="",itemStyle:p={},dragPreviewClassName:u="",dragPreviewStyle:m={},onDragStart:b,onDragEnd:f,disabled:v=!1,gap:x,direction:D="vertical",showDropIndicator:y=!1,dropIndicatorClassName:S="",dropIndicatorStyle:h={},dropIndicatorPosition:I="bottom"}){const j=e.useRef(null),O=s({items:a,onReorder:i,disabled:v}),[w,C]=e.useState(!1),E=e.useCallback(e=>v?()=>{}:r.dropTargetForElements({element:e,getData:()=>({type:"container"}),onDragEnter:()=>C(!0),onDragLeave:()=>C(!1),onDrop:()=>C(!1)}),[v]);return e.useEffect(()=>{const e=j.current;if(e&&!v)return t.combine(E(e),O)},[E,O,v]),e.createElement("div",{ref:j,className:l,style:(()=>{const e=Object.assign({},o.container.default);return"horizontal"===D&&Object.assign(e,o.container.horizontal),w&&Object.assign(e,o.container.dragging),void 0!==x&&(e.gap="number"==typeof x?`${x}px`:x),Object.assign(Object.assign({},e),c)})()},a.map((t,r)=>e.createElement(n,{key:t.id,item:t,index:r,className:g,style:p,dragPreviewClassName:u,dragPreviewStyle:m,onDragStart:b,onDragEnd:f,disabled:v,showDropIndicator:y,dropIndicatorClassName:S,dropIndicatorStyle:h,dropIndicatorPosition:I},d(t,r))))},exports.DraggableItemWrapper=n,exports.defaultStyles=o,exports.useDragDropMonitor=s;
+"use strict";var e=require("react"),t=require("@atlaskit/pragmatic-drag-and-drop/element/adapter"),a=require("@atlaskit/pragmatic-drag-and-drop/combine"),r=require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");const n={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"}},i="draggable-item";function o({item:o,index:s,children:d,className:l="",style:c={},dragPreviewClassName:g="",dragPreviewStyle:u={},onDragStart:m,onDragEnd:p,disabled:b=!1,showDropIndicator:f=!1,dropIndicatorClassName:v="",dropIndicatorStyle:h={},dropIndicatorPosition:x="bottom",direction:D="vertical",dragHandle:y}){const I=e.useRef(null),[S,w]=e.useState(!1),[C,E]=e.useState(!1),[j,O]=e.useState(null),N=e.useCallback(e=>{if(b)return()=>{};const a=y?e.querySelector(y):void 0;return t.draggable({element:e,dragHandle:null!=a?a:void 0,canDrag:()=>!y||Boolean(a),getInitialData:()=>({type:i,id:o.id,index:s}),onGenerateDragPreview:({nativeSetDragImage:t})=>{const a=e.cloneNode(!0),r=Object.assign(Object.assign({},n.preview),u);g&&(a.className=g),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:()=>{w(!0),null==m||m(o,s)},onDrop:()=>{w(!1),null==p||p(o,s)}})},[o,s,y,g,u,m,p,b]),k=e.useCallback(e=>b?()=>{}:t.dropTargetForElements({element:e,getData:({input:e,element:t})=>{const a={type:i,id:o.id,index:s},n="horizontal"===D?["left","right"]:["top","bottom"];return r.attachClosestEdge(a,{input:e,element:t,allowedEdges:[...n]})},canDrop:({source:e})=>{var t;return(null===(t=e.data)||void 0===t?void 0:t.type)===i},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)&&(E(!0),f&&O(x))},onDragLeave:()=>{E(!1),O(null)},onDrop:()=>{E(!1),O(null)}}),[o.id,s,D,b,f,x]);return e.useEffect(()=>{const e=I.current;if(e)return e.setAttribute("data-index",s.toString()),b?()=>{}:a.combine(N(e),k(e))},[s,N,k,b]),e.createElement("div",{ref:I,className:l,style:(()=>{const e=Object.assign({},n.item.default);return b?Object.assign(e,n.item.disabled):S?Object.assign(e,n.item.dragging):C&&Object.assign(e,n.item.hover),Object.assign(Object.assign({},e),c)})()},f&&"top"===j&&e.createElement("div",{className:v,style:Object.assign(Object.assign(Object.assign({},n.dropIndicator),h),{top:-1})}),d,f&&"bottom"===j&&e.createElement("div",{className:v,style:Object.assign(Object.assign(Object.assign({},n.dropIndicator),h),{bottom:-1})}))}function s(e,t,a){const r=Array.from(e),[n]=r.splice(t,1);return r.splice(a,0,n),r}function d(e){const{itemCount:t,sourceIndex:a,rawDestinationIndex:r,isSameList:n}=e;if(t<=0)return 0;const i=t,o=Math.max(0,Math.min(r,i)),s=n&&a<o?o-1:o,d=n?t-1:t;return Math.max(0,Math.min(s,d))}function l({items:a,onReorder:n,disabled:i=!1,direction:o="vertical",selectedIds:l=[],multiDragEnabled:c=!1}){const g=e.useCallback(({location:e,source:t})=>{var i,g,u;const m=null===(i=t.data)||void 0===i?void 0:i.id,p=null===(g=t.data)||void 0===g?void 0:g.index;if(void 0===m||void 0===p)return;const{dropTargets:b}=e.current,f=b.find(e=>{var t,a;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)!==m}),v=b.find(e=>{var t;return"container"===(null===(t=e.data)||void 0===t?void 0:t.type)});if(!f&&!v)return;let h=a.length;if(f){const e=Number(null===(u=f.data)||void 0===u?void 0:u.index);if(!Number.isFinite(e))return;const t=r.extractClosestEdge(f.data);h="bottom"===t||"horizontal"===o&&"right"===t?e+1:e}const x=[...a];let D=a;if(c){const e=new Set(l);e.has(m)||e.clear(),e.add(m);const t=a.map((t,a)=>e.has(t.id)?a:-1).filter(e=>-1!==e);if(t.length>1)D=function(e,t,a){const r=Array.from(new Set(t.filter(t=>t>=0&&t<e.length))).sort((e,t)=>e-t);if(0===r.length)return e;const n=new Set(r),i=r.map(t=>e[t]),o=e.filter((e,t)=>!n.has(t)),s=Math.max(0,Math.min(a,e.length)),d=r.filter(e=>e<s).length,l=Math.max(0,Math.min(s-d,o.length)),c=[...o];return c.splice(l,0,...i),c}(a,t,h);else{const e=d({itemCount:a.length,sourceIndex:p,rawDestinationIndex:h,isSameList:!0});D=s(a,p,e)}}else{const e=d({itemCount:a.length,sourceIndex:p,rawDestinationIndex:h,isSameList:!0});D=s(a,p,e)}const y=D.some((e,t)=>{var a;return e.id!==(null===(a=x[t])||void 0===a?void 0:a.id)});if(!y)return;const I=function(e,t){const a=new Map(e.map((e,t)=>[e.id,t]));return t.flatMap((e,t)=>{const r=a.get(e.id);return void 0===r||r===t?[]:[{id:e.id,newPosition:t,moved:!0}]})}(x,D);n(D,I)},[a,n,o,l,c]);return e.useEffect(()=>{if(!i)return t.monitorForElements({onDrop:g})},[i,g]),e.useCallback(()=>{},[])}exports.DragDropList=function({items:a,onReorder:r,renderItem:i,containerClassName:s="",containerStyle:d={},itemClassName:c="",itemStyle:g={},dragPreviewClassName:u="",dragPreviewStyle:m={},onDragStart:p,onDragEnd:b,disabled:f=!1,gap:v,direction:h="vertical",showDropIndicator:x=!1,dropIndicatorClassName:D="",dropIndicatorStyle:y={},dropIndicatorPosition:I="bottom",dragHandle:S,selectedIds:w=[],multiDragEnabled:C=!1}){const E=e.useRef(null);l({items:a,onReorder:r,disabled:f,direction:h,selectedIds:w,multiDragEnabled:C});const[j,O]=e.useState(!1),N=e.useCallback(e=>f?()=>{}:t.dropTargetForElements({element:e,getData:()=>({type:"container"}),onDragEnter:()=>O(!0),onDragLeave:()=>O(!1),onDrop:()=>O(!1)}),[f]);return e.useEffect(()=>{const e=E.current;if(e&&!f)return N(e)},[N,f]),e.createElement("div",{ref:E,className:s,style:(()=>{const e=Object.assign({},n.container.default);return"horizontal"===h&&Object.assign(e,n.container.horizontal),j&&Object.assign(e,n.container.dragging),void 0!==v&&(e.gap="number"==typeof v?`${v}px`:v),Object.assign(Object.assign({},e),d)})()},a.map((t,a)=>e.createElement(o,{key:t.id,item:t,index:a,className:c,style:g,dragPreviewClassName:u,dragPreviewStyle:m,onDragStart:p,onDragEnd:b,disabled:f,showDropIndicator:x,dropIndicatorClassName:D,dropIndicatorStyle:y,dropIndicatorPosition:I,direction:h,dragHandle:S},i(t,a))))},exports.DraggableItemWrapper=o,exports.defaultStyles=n,exports.useDragDropMonitor=l;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../src/styles/defaultStyles.ts","../src/components/DraggableItemWrapper.tsx","../src/hooks/useDragDropMonitor.ts","../src/utils/order.ts","../src/components/DragDropList.tsx"],"sourcesContent":["export const defaultStyles = {\r\n container: {\r\n default: {\r\n minHeight: \"200px\",\r\n transition: \"all 0.2s ease\",\r\n borderRadius: \"8px\",\r\n border: \"1px solid #e2e8f0\",\r\n backgroundColor: \"#ffffff\",\r\n display: \"flex\",\r\n flexDirection: \"column\" as const,\r\n gap: \"16px\",\r\n padding: \"16px\",\r\n },\r\n dragging: {\r\n backgroundColor: \"rgba(66, 153, 225, 0.05)\",\r\n borderColor: \"#3182ce\",\r\n },\r\n horizontal: {\r\n flexDirection: \"row\" as const,\r\n flexWrap: \"wrap\" as const,\r\n },\r\n },\r\n item: {\r\n default: {\r\n transition: \"all 0.2s ease\",\r\n cursor: \"grab\",\r\n userSelect: \"none\" as const,\r\n position: \"relative\" as const,\r\n },\r\n dragging: {\r\n opacity: 0.5,\r\n cursor: \"grabbing\",\r\n },\r\n hover: {\r\n transform: \"scale(1.02)\",\r\n boxShadow: \"0 4px 6px rgba(0, 0, 0, 0.1)\",\r\n },\r\n disabled: {\r\n cursor: \"not-allowed\",\r\n opacity: 0.6,\r\n },\r\n },\r\n preview: {\r\n position: \"fixed\" as const,\r\n pointerEvents: \"none\" as const,\r\n zIndex: 9999,\r\n opacity: 0.8,\r\n transform: \"rotate(2deg)\",\r\n boxShadow: \"0 10px 20px rgba(0, 0, 0, 0.15)\",\r\n },\r\n dropIndicator: {\r\n position: \"absolute\" as const,\r\n height: \"2px\",\r\n backgroundColor: \"#3182ce\",\r\n left: 0,\r\n right: 0,\r\n zIndex: 10,\r\n transition: \"all 0.2s ease\",\r\n },\r\n};\r\n","import React, { useEffect, useRef, useState, useCallback } from \"react\";\r\nimport { combine } from \"@atlaskit/pragmatic-drag-and-drop/combine\";\r\nimport {\r\n draggable,\r\n dropTargetForElements,\r\n} from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\r\nimport type { DraggableItemWrapperProps, DraggableItem } from \"../types\";\r\nimport { defaultStyles } from \"../styles/defaultStyles\";\r\n\r\nconst DRAGGABLE_ITEM = \"draggable-item\";\r\n\r\nexport function DraggableItemWrapper<T extends DraggableItem>({\r\n item,\r\n index,\r\n children,\r\n className = \"\",\r\n style = {},\r\n dragPreviewClassName = \"\",\r\n dragPreviewStyle = {},\r\n onDragStart,\r\n onDragEnd,\r\n disabled = false,\r\n showDropIndicator = false,\r\n dropIndicatorClassName = \"\",\r\n dropIndicatorStyle = {},\r\n dropIndicatorPosition = \"bottom\",\r\n}: DraggableItemWrapperProps<T>) {\r\n const elementRef = useRef<HTMLDivElement>(null);\r\n const [isDragging, setIsDragging] = useState(false);\r\n const [isHovered, setIsHovered] = useState(false);\r\n const [dropPosition, setDropPosition] = useState<\"top\" \| \"bottom\" \| null>(\r\n null\r\n );\r\n\r\n const getItemStyles = (): React.CSSProperties => {\r\n const baseStyle = { ...defaultStyles.item.default };\r\n\r\n if (disabled) {\r\n Object.assign(baseStyle, defaultStyles.item.disabled);\r\n } else if (isDragging) {\r\n Object.assign(baseStyle, defaultStyles.item.dragging);\r\n } else if (isHovered) {\r\n Object.assign(baseStyle, defaultStyles.item.hover);\r\n }\r\n\r\n return { ...baseStyle, ...style };\r\n };\r\n\r\n const getPreviewStyles = (): React.CSSProperties => {\r\n return { ...defaultStyles.preview, ...dragPreviewStyle };\r\n };\r\n\r\n const createDraggable = useCallback(\r\n (element: HTMLElement) => {\r\n if (disabled) return () => {};\r\n\r\n return draggable({\r\n element,\r\n getInitialData: () => ({\r\n type: DRAGGABLE_ITEM,\r\n id: item.id,\r\n index,\r\n }),\r\n onGenerateDragPreview: ({ nativeSetDragImage }) => {\r\n const previewElement = element.cloneNode(true) as HTMLElement;\r\n const previewStyles = getPreviewStyles();\r\n\r\n // Apply custom preview class if provided\r\n if (dragPreviewClassName) {\r\n previewElement.className = dragPreviewClassName;\r\n }\r\n\r\n Object.assign(previewElement.style, previewStyles, {\r\n width: `${element?.offsetWidth \|\| 100}px`,\r\n height: `${element?.offsetHeight \|\| 50}px`,\r\n });\r\n\r\n document.body.appendChild(previewElement);\r\n if (nativeSetDragImage) {\r\n nativeSetDragImage(previewElement, 20, 20);\r\n }\r\n requestAnimationFrame(() => previewElement.remove());\r\n },\r\n onDragStart: () => {\r\n setIsDragging(true);\r\n onDragStart?.(item, index);\r\n },\r\n onDrop: () => {\r\n setIsDragging(false);\r\n onDragEnd?.(item, index);\r\n },\r\n });\r\n },\r\n [\r\n item,\r\n index,\r\n dragPreviewClassName,\r\n dragPreviewStyle,\r\n onDragStart,\r\n onDragEnd,\r\n disabled,\r\n ]\r\n );\r\n\r\n const createDropTarget = useCallback(\r\n (element: HTMLElement) => {\r\n if (disabled) return () => {};\r\n\r\n return dropTargetForElements({\r\n element,\r\n getData: () => ({\r\n type: DRAGGABLE_ITEM,\r\n id: item.id,\r\n index,\r\n }),\r\n canDrop: (args: any) => args.source.data?.type === DRAGGABLE_ITEM,\r\n getIsSticky: () => true,\r\n onDragEnter: ({ source, self }: any) => {\r\n if (source.data?.id !== self.data?.id) {\r\n setIsHovered(true);\r\n if (showDropIndicator) {\r\n setDropPosition(dropIndicatorPosition);\r\n }\r\n }\r\n },\r\n onDragLeave: () => {\r\n setIsHovered(false);\r\n setDropPosition(null);\r\n },\r\n onDrop: () => {\r\n setIsHovered(false);\r\n setDropPosition(null);\r\n },\r\n });\r\n },\r\n [item.id, index, disabled, showDropIndicator, dropIndicatorPosition]\r\n );\r\n\r\n useEffect(() => {\r\n const element = elementRef.current;\r\n if (!element) return;\r\n\r\n element.setAttribute(\"data-index\", index.toString());\r\n\r\n if (disabled) {\r\n // provide a no-op cleanup to satisfy all code paths\r\n return () => {};\r\n }\r\n\r\n // normal draggable + droptarget setup\r\n return combine(createDraggable(element), createDropTarget(element));\r\n }, [index, createDraggable, createDropTarget, disabled]);\r\n\r\n return (\r\n <div ref={elementRef} className={className} style={getItemStyles()}>\r\n {showDropIndicator && dropPosition === \"top\" && (\r\n <div\r\n className={dropIndicatorClassName}\r\n style={{\r\n ...defaultStyles.dropIndicator,\r\n ...dropIndicatorStyle,\r\n top: -1,\r\n }}\r\n />\r\n )}\r\n {children}\r\n {showDropIndicator && dropPosition === \"bottom\" && (\r\n <div\r\n className={dropIndicatorClassName}\r\n style={{\r\n ...defaultStyles.dropIndicator,\r\n ...dropIndicatorStyle,\r\n bottom: -1,\r\n }}\r\n />\r\n )}\r\n </div>\r\n );\r\n}\r\n","import { monitorForElements } from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\r\nimport { extractClosestEdge } from \"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge\";\r\nimport type { DraggableItem, OrderUpdate } from \"../types\";\r\nimport { reorder, calculateOrderUpdates } from \"../utils/order\";\r\n\r\nexport function useDragDropMonitor<T extends DraggableItem>({\r\n items,\r\n onReorder,\r\n disabled = false,\r\n}: {\r\n items: T[];\r\n onReorder: (newItems: T[], orderUpdates: OrderUpdate[]) => void;\r\n disabled?: boolean;\r\n}) {\r\n if (disabled) {\r\n return () => {};\r\n }\r\n\r\n\r\n const handleDrop = ({ location, source }: any) => {\r\n const sourceIndex = source.data?.index as number;\r\n if (sourceIndex === undefined) return;\r\n\r\n const { dropTargets } = location.current;\r\n const destinationTarget = dropTargets.find(\r\n (target: any) =>\r\n target.data?.type === \"draggable-item\" &&\r\n target.data?.id !== source.data?.id\r\n );\r\n\r\n if (!destinationTarget) return;\r\n\r\n const edge = extractClosestEdge(destinationTarget);\r\n const targetIndex = Number(\r\n destinationTarget.element.getAttribute(\"data-index\")\r\n );\r\n const destinationIndex = edge === \"bottom\" ? targetIndex + 1 : targetIndex;\r\n\r\n if (sourceIndex !== destinationIndex) {\r\n const oldItems = [...items];\r\n const newItems = reorder(items, sourceIndex, destinationIndex);\r\n const orderUpdates = calculateOrderUpdates(oldItems, newItems);\r\n onReorder(newItems, orderUpdates);\r\n }\r\n };\r\n\r\n return monitorForElements({\r\n onDrop: handleDrop,\r\n });\r\n}\r\n","import type { DraggableItem, OrderUpdate } from '../types';\r\n\r\nexport function reorder<T>(list: T[], startIndex: number, endIndex: number): T[] {\r\n const result = Array.from(list);\r\n const [removed] = result.splice(startIndex, 1);\r\n result.splice(endIndex, 0, removed);\r\n return result;\r\n}\r\n\r\nexport function calculateOrderUpdates<T extends DraggableItem>(oldItems: T[], newItems: T[]): OrderUpdate[] {\r\n const affected = newItems.filter((item, i) => item.id !== oldItems[i]?.id);\r\n const orderList = affected.slice().sort((a, b) => a.position - b.position).map(i => i.position);\r\n return affected.map((item, i) => ({ id: item.id, newPosition: orderList[i] }));\r\n}\r\n","import React, { useEffect, useRef, useState, useCallback } from \"react\";\r\nimport { combine } from \"@atlaskit/pragmatic-drag-and-drop/combine\";\r\nimport { dropTargetForElements } from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\r\nimport { DraggableItemWrapper } from \"./DraggableItemWrapper\";\r\nimport type { DragDropListProps, DraggableItem } from \"../types\";\r\nimport { useDragDropMonitor } from \"../hooks/useDragDropMonitor\";\r\nimport { defaultStyles } from \"../styles/defaultStyles\";\r\n\r\nexport function DragDropList<T extends DraggableItem>({\r\n items,\r\n onReorder,\r\n renderItem,\r\n containerClassName = \"\",\r\n containerStyle = {},\r\n itemClassName = \"\",\r\n itemStyle = {},\r\n dragPreviewClassName = \"\",\r\n dragPreviewStyle = {},\r\n onDragStart,\r\n onDragEnd,\r\n disabled = false,\r\n gap,\r\n direction = \"vertical\",\r\n showDropIndicator = false,\r\n dropIndicatorClassName = \"\",\r\n dropIndicatorStyle = {},\r\n dropIndicatorPosition = \"bottom\",\r\n}: DragDropListProps<T>) {\r\n const containerRef = useRef<HTMLDivElement>(null);\r\n const monitor = useDragDropMonitor({ items, onReorder, disabled });\r\n const [isDraggingOver, setIsDraggingOver] = useState(false);\r\n\r\n const getContainerStyles = (): React.CSSProperties => {\r\n const baseStyle = { ...defaultStyles.container.default };\r\n\r\n if (direction === \"horizontal\") {\r\n Object.assign(baseStyle, defaultStyles.container.horizontal);\r\n }\r\n\r\n if (isDraggingOver) {\r\n Object.assign(baseStyle, defaultStyles.container.dragging);\r\n }\r\n\r\n if (gap !== undefined) {\r\n baseStyle.gap = typeof gap === \"number\" ? `${gap}px` : gap;\r\n }\r\n\r\n return { ...baseStyle, ...containerStyle };\r\n };\r\n\r\n const createDropTarget = useCallback(\r\n (element: HTMLElement) => {\r\n if (disabled) return () => {};\r\n\r\n return dropTargetForElements({\r\n element,\r\n getData: () => ({ type: \"container\" }),\r\n onDragEnter: () => setIsDraggingOver(true),\r\n onDragLeave: () => setIsDraggingOver(false),\r\n onDrop: () => setIsDraggingOver(false),\r\n });\r\n },\r\n [disabled]\r\n );\r\n\r\n useEffect(() => {\r\n const element = containerRef.current;\r\n if (!element \|\| disabled) return;\r\n\r\n return combine(createDropTarget(element), monitor);\r\n }, [createDropTarget, monitor, disabled]);\r\n\r\n return (\r\n <div\r\n ref={containerRef}\r\n className={containerClassName}\r\n style={getContainerStyles()}\r\n >\r\n {items.map((item, index) => (\r\n <DraggableItemWrapper\r\n key={item.id}\r\n item={item}\r\n index={index}\r\n className={itemClassName}\r\n style={itemStyle}\r\n dragPreviewClassName={dragPreviewClassName}\r\n dragPreviewStyle={dragPreviewStyle}\r\n onDragStart={onDragStart}\r\n onDragEnd={onDragEnd}\r\n disabled={disabled}\r\n showDropIndicator={showDropIndicator}\r\n dropIndicatorClassName={dropIndicatorClassName}\r\n dropIndicatorStyle={dropIndicatorStyle}\r\n dropIndicatorPosition={dropIndicatorPosition}\r\n >\r\n {renderItem(item, index)}\r\n </DraggableItemWrapper>\r\n ))}\r\n </div>\r\n );\r\n}\r\n"],"names":["defaultStyles","container","default","minHeight","transition","borderRadius","border","backgroundColor","display","flexDirection","gap","padding","dragging","borderColor","horizontal","flexWrap","item","cursor","userSelect","position","opacity","hover","transform","boxShadow","disabled","preview","pointerEvents","zIndex","dropIndicator","height","left","right","DRAGGABLE_ITEM","DraggableItemWrapper","index","children","className","style","dragPreviewClassName","dragPreviewStyle","onDragStart","onDragEnd","showDropIndicator","dropIndicatorClassName","dropIndicatorStyle","dropIndicatorPosition","elementRef","useRef","isDragging","setIsDragging","useState","isHovered","setIsHovered","dropPosition","setDropPosition","createDraggable","useCallback","element","draggable","getInitialData","type","id","onGenerateDragPreview","nativeSetDragImage","previewElement","cloneNode","previewStyles","Object","assign","width","offsetWidth","offsetHeight","document","body","appendChild","requestAnimationFrame","remove","onDrop","createDropTarget","dropTargetForElements","getData","canDrop","args","_a","source","data","getIsSticky","onDragEnter","self","_b","onDragLeave","useEffect","current","setAttribute","toString","combine","React","createElement","ref","baseStyle","getItemStyles","top","bottom","useDragDropMonitor","items","onReorder","monitorForElements","location","sourceIndex","undefined","dropTargets","destinationTarget","find","target","_c","edge","extractClosestEdge","targetIndex","Number","getAttribute","destinationIndex","oldItems","newItems","list","startIndex","endIndex","result","Array","from","removed","splice","reorder","orderUpdates","affected","filter","i","orderList","slice","sort","a","b","map","newPosition","calculateOrderUpdates","renderItem","containerClassName","containerStyle","itemClassName","itemStyle","direction","containerRef","monitor","isDraggingOver","setIsDraggingOver","getContainerStyles","key"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../src/styles/defaultStyles.ts","../src/components/DraggableItemWrapper.tsx","../src/utils/order.ts","../src/hooks/useDragDropMonitor.ts","../src/components/DragDropList.tsx"],"sourcesContent":["export const defaultStyles = {\r\n container: {\r\n default: {\r\n minHeight: \"200px\",\r\n transition: \"all 0.2s ease\",\r\n borderRadius: \"8px\",\r\n border: \"1px solid #e2e8f0\",\r\n backgroundColor: \"#ffffff\",\r\n display: \"flex\",\r\n flexDirection: \"column\" as const,\r\n gap: \"16px\",\r\n padding: \"16px\",\r\n },\r\n dragging: {\r\n backgroundColor: \"rgba(66, 153, 225, 0.05)\",\r\n borderColor: \"#3182ce\",\r\n },\r\n horizontal: {\r\n flexDirection: \"row\" as const,\r\n flexWrap: \"wrap\" as const,\r\n },\r\n },\r\n item: {\r\n default: {\r\n transition: \"all 0.2s ease\",\r\n cursor: \"grab\",\r\n userSelect: \"none\" as const,\r\n position: \"relative\" as const,\r\n },\r\n dragging: {\r\n opacity: 0.5,\r\n cursor: \"grabbing\",\r\n },\r\n hover: {\r\n transform: \"scale(1.02)\",\r\n boxShadow: \"0 4px 6px rgba(0, 0, 0, 0.1)\",\r\n },\r\n disabled: {\r\n cursor: \"not-allowed\",\r\n opacity: 0.6,\r\n },\r\n },\r\n preview: {\r\n position: \"fixed\" as const,\r\n pointerEvents: \"none\" as const,\r\n zIndex: 9999,\r\n opacity: 0.8,\r\n transform: \"rotate(2deg)\",\r\n boxShadow: \"0 10px 20px rgba(0, 0, 0, 0.15)\",\r\n },\r\n dropIndicator: {\r\n position: \"absolute\" as const,\r\n height: \"2px\",\r\n backgroundColor: \"#3182ce\",\r\n left: 0,\r\n right: 0,\r\n zIndex: 10,\r\n transition: \"all 0.2s ease\",\r\n },\r\n};\r\n","import React, { useEffect, useRef, useState, useCallback } from \"react\";\r\nimport { combine } from \"@atlaskit/pragmatic-drag-and-drop/combine\";\r\nimport {\n draggable,\n dropTargetForElements,\n} from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\nimport { attachClosestEdge } from \"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge\";\nimport type { DraggableItemWrapperProps, DraggableItem } from \"../types\";\nimport { defaultStyles } from \"../styles/defaultStyles\";\n\r\nconst DRAGGABLE_ITEM = \"draggable-item\";\r\n\r\nexport function DraggableItemWrapper<T extends DraggableItem>({\r\n item,\r\n index,\r\n children,\r\n className = \"\",\r\n style = {},\r\n dragPreviewClassName = \"\",\r\n dragPreviewStyle = {},\r\n onDragStart,\r\n onDragEnd,\r\n disabled = false,\r\n showDropIndicator = false,\r\n dropIndicatorClassName = \"\",\n dropIndicatorStyle = {},\n dropIndicatorPosition = \"bottom\",\n direction = \"vertical\",\n dragHandle,\n}: DraggableItemWrapperProps<T>) {\n const elementRef = useRef<HTMLDivElement>(null);\r\n const [isDragging, setIsDragging] = useState(false);\r\n const [isHovered, setIsHovered] = useState(false);\r\n const [dropPosition, setDropPosition] = useState<\"top\" \| \"bottom\" \| null>(\r\n null\r\n );\r\n\r\n const getItemStyles = (): React.CSSProperties => {\r\n const baseStyle = { ...defaultStyles.item.default };\r\n\r\n if (disabled) {\r\n Object.assign(baseStyle, defaultStyles.item.disabled);\r\n } else if (isDragging) {\r\n Object.assign(baseStyle, defaultStyles.item.dragging);\r\n } else if (isHovered) {\r\n Object.assign(baseStyle, defaultStyles.item.hover);\r\n }\r\n\r\n return { ...baseStyle, ...style };\r\n };\r\n\r\n const getPreviewStyles = (): React.CSSProperties => {\r\n return { ...defaultStyles.preview, ...dragPreviewStyle };\r\n };\r\n\r\n const createDraggable = useCallback(\n (element: HTMLElement) => {\n if (disabled) return () => {};\n const dragHandleElement = dragHandle\n ? element.querySelector(dragHandle)\n : undefined;\n\n return draggable({\n element,\n dragHandle: dragHandleElement ?? undefined,\n canDrag: () => !dragHandle \|\| Boolean(dragHandleElement),\n getInitialData: () => ({\n type: DRAGGABLE_ITEM,\n id: item.id,\n index,\r\n }),\r\n onGenerateDragPreview: ({ nativeSetDragImage }) => {\r\n const previewElement = element.cloneNode(true) as HTMLElement;\r\n const previewStyles = getPreviewStyles();\r\n\r\n // Apply custom preview class if provided\r\n if (dragPreviewClassName) {\r\n previewElement.className = dragPreviewClassName;\r\n }\r\n\r\n Object.assign(previewElement.style, previewStyles, {\r\n width: `${element?.offsetWidth \|\| 100}px`,\r\n height: `${element?.offsetHeight \|\| 50}px`,\r\n });\r\n\r\n document.body.appendChild(previewElement);\r\n if (nativeSetDragImage) {\r\n nativeSetDragImage(previewElement, 20, 20);\r\n }\r\n requestAnimationFrame(() => previewElement.remove());\r\n },\r\n onDragStart: () => {\r\n setIsDragging(true);\r\n onDragStart?.(item, index);\r\n },\r\n onDrop: () => {\r\n setIsDragging(false);\r\n onDragEnd?.(item, index);\r\n },\r\n });\r\n },\r\n [\r\n item,\r\n index,\n dragHandle,\n dragPreviewClassName,\n dragPreviewStyle,\n onDragStart,\n onDragEnd,\r\n disabled,\r\n ]\r\n );\r\n\r\n const createDropTarget = useCallback(\r\n (element: HTMLElement) => {\r\n if (disabled) return () => {};\r\n\r\n return dropTargetForElements({\n element,\n getData: ({ input, element: targetElement }) => {\n const baseData = {\n type: DRAGGABLE_ITEM,\n id: item.id,\n index,\n };\n const allowedEdges =\n direction === \"horizontal\" ? ([\"left\", \"right\"] as const) : ([\"top\", \"bottom\"] as const);\n\n return attachClosestEdge(baseData, {\n input,\n element: targetElement,\n allowedEdges: [...allowedEdges],\n });\n },\n canDrop: ({ source }) => source.data?.type === DRAGGABLE_ITEM,\n getIsSticky: () => true,\n onDragEnter: ({ source, self }) => {\n if (source.data?.id !== self.data?.id) {\n setIsHovered(true);\n if (showDropIndicator) {\n setDropPosition(dropIndicatorPosition);\r\n }\r\n }\r\n },\r\n onDragLeave: () => {\r\n setIsHovered(false);\r\n setDropPosition(null);\r\n },\r\n onDrop: () => {\r\n setIsHovered(false);\r\n setDropPosition(null);\r\n },\r\n });\n },\n [item.id, index, direction, disabled, showDropIndicator, dropIndicatorPosition]\n );\n\r\n useEffect(() => {\r\n const element = elementRef.current;\r\n if (!element) return;\r\n\r\n element.setAttribute(\"data-index\", index.toString());\r\n\r\n if (disabled) {\r\n // provide a no-op cleanup to satisfy all code paths\r\n return () => {};\r\n }\r\n\r\n // normal draggable + droptarget setup\r\n return combine(createDraggable(element), createDropTarget(element));\r\n }, [index, createDraggable, createDropTarget, disabled]);\r\n\r\n return (\r\n <div ref={elementRef} className={className} style={getItemStyles()}>\r\n {showDropIndicator && dropPosition === \"top\" && (\r\n <div\r\n className={dropIndicatorClassName}\r\n style={{\r\n ...defaultStyles.dropIndicator,\r\n ...dropIndicatorStyle,\r\n top: -1,\r\n }}\r\n />\r\n )}\r\n {children}\r\n {showDropIndicator && dropPosition === \"bottom\" && (\r\n <div\r\n className={dropIndicatorClassName}\r\n style={{\r\n ...defaultStyles.dropIndicator,\r\n ...dropIndicatorStyle,\r\n bottom: -1,\r\n }}\r\n />\r\n )}\r\n </div>\r\n );\r\n}\r\n","import type { DraggableItem, OrderUpdate } from '../types';\n\nexport function reorder<T>(list: T[], startIndex: number, endIndex: number): T[] {\n const result = Array.from(list);\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n return result;\n}\n\nexport function normalizeDestinationIndex(params: {\n itemCount: number;\n sourceIndex: number;\n rawDestinationIndex: number;\n isSameList: boolean;\n}): number {\n const { itemCount, sourceIndex, rawDestinationIndex, isSameList } = params;\n\n if (itemCount <= 0) return 0;\n\n const maxRaw = itemCount;\n const clampedRaw = Math.max(0, Math.min(rawDestinationIndex, maxRaw));\n const adjusted = isSameList && sourceIndex < clampedRaw ? clampedRaw - 1 : clampedRaw;\n const maxFinal = isSameList ? itemCount - 1 : itemCount;\n\n return Math.max(0, Math.min(adjusted, maxFinal));\n}\n\nexport function reorderMany<T>(list: T[], selectedIndexes: number[], rawDestinationIndex: number): T[] {\n const uniqueIndexes = Array.from(\n new Set(selectedIndexes.filter((index) => index >= 0 && index < list.length))\n ).sort((a, b) => a - b);\n\n if (uniqueIndexes.length === 0) return list;\n\n const selectedSet = new Set(uniqueIndexes);\n const moving = uniqueIndexes.map((index) => list[index]);\n const remaining = list.filter((_, index) => !selectedSet.has(index));\n\n const clampedRaw = Math.max(0, Math.min(rawDestinationIndex, list.length));\n const removedBeforeDestination = uniqueIndexes.filter((index) => index < clampedRaw).length;\n const insertionIndex = Math.max(\n 0,\n Math.min(clampedRaw - removedBeforeDestination, remaining.length)\n );\n\n const result = [...remaining];\n result.splice(insertionIndex, 0, ...moving);\n return result;\n}\n\nexport function calculateOrderUpdates<T extends DraggableItem>(oldItems: T[], newItems: T[]): OrderUpdate[] {\n const oldIndexById = new Map(oldItems.map((item, index) => [item.id, index]));\n\n return newItems.flatMap((item, index) => {\n const oldIndex = oldIndexById.get(item.id);\n if (oldIndex === undefined \|\| oldIndex === index) return [];\n return [{ id: item.id, newPosition: index, moved: true }];\n });\n}\n","import { useCallback, useEffect } from \"react\";\nimport { monitorForElements } from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\nimport { extractClosestEdge } from \"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge\";\nimport type { ElementEventPayloadMap } from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\nimport type { DraggableItem, OrderUpdate } from \"../types\";\nimport {\n reorder,\n reorderMany,\n normalizeDestinationIndex,\n calculateOrderUpdates,\n} from \"../utils/order\";\n\nexport function useDragDropMonitor<T extends DraggableItem>({\n items,\n onReorder,\n disabled = false,\n direction = \"vertical\",\n selectedIds = [],\n multiDragEnabled = false,\n}: {\n items: T[];\n onReorder: (newItems: T[], orderUpdates: OrderUpdate[]) => void;\n disabled?: boolean;\n direction?: \"vertical\" \| \"horizontal\";\n selectedIds?: string[];\n multiDragEnabled?: boolean;\n}) {\n const handleDrop = useCallback(\n ({ location, source }: ElementEventPayloadMap[\"onDrop\"]) => {\n const sourceId = source.data?.id as string \| undefined;\n const sourceIndex = source.data?.index as number \| undefined;\n if (sourceId === undefined \|\| sourceIndex === undefined) return;\n\n const { dropTargets } = location.current;\n const destinationTarget = dropTargets.find(\n (target) =>\n target.data?.type === \"draggable-item\" &&\n target.data?.id !== sourceId\n );\n const containerTarget = dropTargets.find(\n (target) => target.data?.type === \"container\"\n );\n\n if (!destinationTarget && !containerTarget) return;\n\n let rawDestinationIndex = items.length;\n if (destinationTarget) {\n const targetIndex = Number(destinationTarget.data?.index);\n if (!Number.isFinite(targetIndex)) return;\n const edge = extractClosestEdge(destinationTarget.data);\n const isAfter =\n edge === \"bottom\" \|\| (direction === \"horizontal\" && edge === \"right\");\n rawDestinationIndex = isAfter ? targetIndex + 1 : targetIndex;\n }\n\n const oldItems = [...items];\n let newItems: T[] = items;\n\n if (multiDragEnabled) {\n const selectedSet = new Set(selectedIds);\n if (!selectedSet.has(sourceId)) {\n selectedSet.clear();\n }\n selectedSet.add(sourceId);\n\n const selectedIndexes = items\n .map((item, index) => (selectedSet.has(item.id) ? index : -1))\n .filter((index) => index !== -1);\n\n if (selectedIndexes.length > 1) {\n newItems = reorderMany(items, selectedIndexes, rawDestinationIndex);\n } else {\n const destinationIndex = normalizeDestinationIndex({\n itemCount: items.length,\n sourceIndex,\n rawDestinationIndex,\n isSameList: true,\n });\n newItems = reorder(items, sourceIndex, destinationIndex);\n }\n } else {\n const destinationIndex = normalizeDestinationIndex({\n itemCount: items.length,\n sourceIndex,\n rawDestinationIndex,\n isSameList: true,\n });\n newItems = reorder(items, sourceIndex, destinationIndex);\n }\n\n const isChanged = newItems.some((item, index) => item.id !== oldItems[index]?.id);\n if (!isChanged) return;\n\n const orderUpdates = calculateOrderUpdates(oldItems, newItems);\n onReorder(newItems, orderUpdates);\n },\n [items, onReorder, direction, selectedIds, multiDragEnabled]\n );\n\n useEffect(() => {\n if (disabled) return;\n return monitorForElements({\n onDrop: handleDrop,\n });\n }, [disabled, handleDrop]);\n\n return useCallback(() => {}, []);\n}\n","import React, { useEffect, useRef, useState, useCallback } from \"react\";\nimport { dropTargetForElements } from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\nimport { DraggableItemWrapper } from \"./DraggableItemWrapper\";\nimport type { DragDropListProps, DraggableItem } from \"../types\";\nimport { useDragDropMonitor } from \"../hooks/useDragDropMonitor\";\nimport { defaultStyles } from \"../styles/defaultStyles\";\r\n\r\nexport function DragDropList<T extends DraggableItem>({\r\n items,\r\n onReorder,\r\n renderItem,\r\n containerClassName = \"\",\r\n containerStyle = {},\r\n itemClassName = \"\",\r\n itemStyle = {},\r\n dragPreviewClassName = \"\",\r\n dragPreviewStyle = {},\r\n onDragStart,\r\n onDragEnd,\r\n disabled = false,\r\n gap,\r\n direction = \"vertical\",\r\n showDropIndicator = false,\r\n dropIndicatorClassName = \"\",\n dropIndicatorStyle = {},\n dropIndicatorPosition = \"bottom\",\n dragHandle,\n selectedIds = [],\n multiDragEnabled = false,\n}: DragDropListProps<T>) {\n const containerRef = useRef<HTMLDivElement>(null);\n useDragDropMonitor({\n items,\n onReorder,\n disabled,\n direction,\n selectedIds,\n multiDragEnabled,\n });\n const [isDraggingOver, setIsDraggingOver] = useState(false);\n\r\n const getContainerStyles = (): React.CSSProperties => {\r\n const baseStyle = { ...defaultStyles.container.default };\r\n\r\n if (direction === \"horizontal\") {\r\n Object.assign(baseStyle, defaultStyles.container.horizontal);\r\n }\r\n\r\n if (isDraggingOver) {\r\n Object.assign(baseStyle, defaultStyles.container.dragging);\r\n }\r\n\r\n if (gap !== undefined) {\r\n baseStyle.gap = typeof gap === \"number\" ? `${gap}px` : gap;\r\n }\r\n\r\n return { ...baseStyle, ...containerStyle };\r\n };\r\n\r\n const createDropTarget = useCallback(\r\n (element: HTMLElement) => {\r\n if (disabled) return () => {};\r\n\r\n return dropTargetForElements({\r\n element,\r\n getData: () => ({ type: \"container\" }),\r\n onDragEnter: () => setIsDraggingOver(true),\r\n onDragLeave: () => setIsDraggingOver(false),\r\n onDrop: () => setIsDraggingOver(false),\r\n });\r\n },\r\n [disabled]\r\n );\r\n\r\n useEffect(() => {\n const element = containerRef.current;\n if (!element \|\| disabled) return;\n\n return createDropTarget(element);\n }, [createDropTarget, disabled]);\n\r\n return (\r\n <div\r\n ref={containerRef}\r\n className={containerClassName}\r\n style={getContainerStyles()}\r\n >\r\n {items.map((item, index) => (\r\n <DraggableItemWrapper\r\n key={item.id}\r\n item={item}\r\n index={index}\r\n className={itemClassName}\r\n style={itemStyle}\r\n dragPreviewClassName={dragPreviewClassName}\r\n dragPreviewStyle={dragPreviewStyle}\r\n onDragStart={onDragStart}\r\n onDragEnd={onDragEnd}\r\n disabled={disabled}\r\n showDropIndicator={showDropIndicator}\r\n dropIndicatorClassName={dropIndicatorClassName}\n dropIndicatorStyle={dropIndicatorStyle}\n dropIndicatorPosition={dropIndicatorPosition}\n direction={direction}\n dragHandle={dragHandle}\n >\n {renderItem(item, index)}\n </DraggableItemWrapper>\n ))}\r\n </div>\r\n );\r\n}\r\n"],"names":["defaultStyles","container","default","minHeight","transition","borderRadius","border","backgroundColor","display","flexDirection","gap","padding","dragging","borderColor","horizontal","flexWrap","item","cursor","userSelect","position","opacity","hover","transform","boxShadow","disabled","preview","pointerEvents","zIndex","dropIndicator","height","left","right","DRAGGABLE_ITEM","DraggableItemWrapper","index","children","className","style","dragPreviewClassName","dragPreviewStyle","onDragStart","onDragEnd","showDropIndicator","dropIndicatorClassName","dropIndicatorStyle","dropIndicatorPosition","direction","dragHandle","elementRef","useRef","isDragging","setIsDragging","useState","isHovered","setIsHovered","dropPosition","setDropPosition","createDraggable","useCallback","element","dragHandleElement","querySelector","undefined","draggable","canDrag","Boolean","getInitialData","type","id","onGenerateDragPreview","nativeSetDragImage","previewElement","cloneNode","previewStyles","Object","assign","width","offsetWidth","offsetHeight","document","body","appendChild","requestAnimationFrame","remove","onDrop","createDropTarget","dropTargetForElements","getData","input","targetElement","baseData","allowedEdges","attachClosestEdge","canDrop","source","_a","data","getIsSticky","onDragEnter","self","_b","onDragLeave","useEffect","current","setAttribute","toString","combine","React","createElement","ref","baseStyle","getItemStyles","top","bottom","reorder","list","startIndex","endIndex","result","Array","from","removed","splice","normalizeDestinationIndex","params","itemCount","sourceIndex","rawDestinationIndex","isSameList","maxRaw","clampedRaw","Math","max","min","adjusted","maxFinal","useDragDropMonitor","items","onReorder","selectedIds","multiDragEnabled","handleDrop","location","sourceId","dropTargets","destinationTarget","find","target","containerTarget","length","targetIndex","Number","_c","isFinite","edge","extractClosestEdge","oldItems","newItems","selectedSet","Set","has","clear","add","selectedIndexes","map","filter","uniqueIndexes","sort","a","b","moving","remaining","_","removedBeforeDestination","insertionIndex","reorderMany","destinationIndex","isChanged","some","orderUpdates","oldIndexById","Map","flatMap","oldIndex","get","newPosition","moved","calculateOrderUpdates","monitorForElements","renderItem","containerClassName","containerStyle","itemClassName","itemStyle","containerRef","isDraggingOver","setIsDraggingOver","getContainerStyles","key"],"mappings":"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"}

package/dist/kanban.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import e,{createContext as n,useRef as t,useState as r,useCallback as a,useEffect as o,useMemo as i,useContext as d}from"react";import{draggable as c,dropTargetForElements as l,monitorForElements as s}from"@atlaskit/pragmatic-drag-and-drop/element/adapter";import{attachClosestEdge as u,extractClosestEdge as g}from"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";import{combine as m}from"@atlaskit/pragmatic-drag-and-drop/combine";const p=n(null),f="kanban-column";function b({column:n,cardIds:i,children:d,isDragDisabled:s=!1,index:g}){const m=t(null),p=t(null),[b,x]=r(!1),[D,y]=r(!1),v=a(e=>s?()=>{}:c({element:e,getInitialData:()=>({type:f,id:n.id,index:g}),onDragStart:()=>x(!0),onDrop:()=>x(!1)}),[n.id,g,s]),I=a(e=>s?()=>{}:l({element:e,getData:({input:e,element:t})=>{const r={type:f,id:n.id,index:g};return u(r,{input:e,element:t,allowedEdges:["left","right"]})},canDrop:({source:e})=>e.data.type===f&&e.data.id!==n.id}),[n.id,g,s]),h=a(e=>l({element:e,getData:()=>({type:"kanban-column-drop-zone",columnId:n.id}),canDrop:({source:e})=>"kanban-card"===e.data.type,onDragEnter:()=>y(!0),onDragLeave:()=>y(!1),onDrop:()=>y(!1)}),[n.id]);o(()=>{const e=m.current,n=p.current;if(!e||!n)return;const t=[v(e),I(e),h(n)];return()=>{t.forEach(e=>e())}},[v,I,h]);const O={draggableProps:{"data-draggable-id":n.id,"data-draggable-type":"COLUMN",style:b?{opacity:.5}:void 0},dragHandleProps:{tabIndex:0,role:"button","aria-roledescription":"draggable column","aria-label":`${n.title}, press space to pick up`},innerRef:m},E={isDragging:b,isDraggingOver:D},w=Object.assign(Object.assign({},O),{dropZoneRef:p});return e.createElement(e.Fragment,null,d(w,E))}const x="kanban-card";function D({card:n,children:i,isDragDisabled:d=!1,index:s,columnId:g}){const p=t(null),[f,b]=r(!1),[D,y]=r(!1),v=a(e=>d?()=>{}:c({element:e,getInitialData:()=>({type:x,id:n.id,index:s,columnId:g}),onDragStart:()=>b(!0),onDrop:()=>b(!1)}),[n.id,s,g,d]),I=a(e=>d?()=>{}:l({element:e,getData:({input:e,element:t})=>{const r={type:x,id:n.id,index:s,columnId:g};return u(r,{input:e,element:t,allowedEdges:["top","bottom"]})},canDrop:({source:e})=>e.data.type===x&&e.data.id!==n.id,onDragEnter:()=>y(!0),onDragLeave:()=>y(!1),onDrop:()=>y(!1)}),[n.id,s,g,d]);o(()=>{const e=p.current;if(e&&!d)return m(v(e),I(e))},[v,I,d]);const h={draggableProps:{"data-draggable-id":n.id,"data-draggable-type":"CARD",style:f?{opacity:.5}:void 0},dragHandleProps:{tabIndex:0,role:"button","aria-roledescription":"draggable card","aria-label":`${n.title}, press space to pick up`},innerRef:p},O={isDragging:f,isDraggingOver:D};return e.createElement(e.Fragment,null,i(h,O))}const y="kanban-card",v="kanban-column";function I({onDragStart:e,onDragEnd:n,state:t,disabled:a}){const[i,d]=r({draggingId:null,draggingType:null,source:null,destination:null});return o(()=>{if(a)return;return s({onDragStart({source:n}){const t=n.data.type,r=n.data.id,a=n.data.columnId,o=n.data.index,i=t===y?"CARD":"COLUMN",c={columnId:"CARD"===i?a:void 0,index:o};d({draggingId:r,draggingType:i,source:c,destination:c}),null==e||e({id:r,type:i})},onDrop({source:e,location:r}){const a=e.data.type,o=e.data.id,i=e.data.index,c=e.data.columnId,l=r.current.dropTargets;let s;if(a===y){const e=l.find(e=>"kanban-column-drop-zone"===e.data.type);if(e){const n=e.data.columnId,t=l.find(e=>e.data.type===y&&e.data.id!==o);if(t){const e=t.data.index;s={columnId:n,index:"bottom"===g(t)?e+1:e}}else s={columnId:n,index:0}}}else if(a===v){const e=l.find(e=>e.data.type===v&&e.data.id!==o);if(e){const n=e.data.index,t=g(e);s={index:"bottom"===t||"right"===t?n+1:n}}}const u={type:a===y?"CARD":"COLUMN",source:{columnId:c,index:i},destination:s,draggableId:o};d({draggingId:null,draggingType:null,source:null,destination:null}),n(u,t)}})},[a,e,n,t]),i}function h({state:n,onDragEnd:t,onDragStart:r,renderColumn:a,renderCard:o,getCardKey:d,getColumnKey:c,isDragDisabled:l,className:s,style:u}){const g=I({state:n,onDragEnd:t,onDragStart:r,disabled:!1}),m=i(()=>({state:n,dragState:g,isDragDisabled:l}),[n,g,l]),f=d||(e=>e.id),x=c||(e=>e.id);return e.createElement(p.Provider,{value:m},e.createElement("div",{className:s,style:Object.assign({display:"flex",gap:"16px"},u)},n.columns.map((t,r)=>e.createElement(b,{key:x(t),column:t,cardIds:t.cardIds,index:r,isDragDisabled:null==l?void 0:l(t.id,"COLUMN")},(r,i)=>e.createElement("div",Object.assign({ref:r.innerRef},r.draggableProps,{style:Object.assign({minWidth:"250px",display:"flex",flexDirection:"column"},r.draggableProps.style)}),e.createElement("div",Object.assign({},r.dragHandleProps),a(t,r,i)),e.createElement("div",{ref:r.dropZoneRef,style:{flex:1,minHeight:"100px",display:"flex",flexDirection:"column",gap:"8px"}},t.cardIds.map((r,a)=>{const i=n.cards[r];return i?e.createElement(D,{key:f(i),card:i,index:a,columnId:t.id,isDragDisabled:null==l?void 0:l(i.id,"CARD")},(n,t)=>e.createElement("div",Object.assign({ref:n.innerRef},n.draggableProps,n.dragHandleProps),o(i,n,t))):null})))))))}const O={threshold:50,maxSpeed:20,enabled:!0};function E(e,n,r={}){const{threshold:i,maxSpeed:d,enabled:c}=Object.assign(Object.assign({},O),r),l=t(),s=t(null),u=a(e=>{s.current={x:e.clientX,y:e.clientY}},[]),g=a(()=>{if(!(c&&n&&e.current&&s.current))return;const t=function(e){if(!e)return null;let n=e.parentElement;for(;n;){const{overflow:e,overflowY:t}=window.getComputedStyle(n);if(/(auto|scroll)/.test(e+t))return n;n=n.parentElement}return document.documentElement}(e.current);if(!t)return;const r=t.getBoundingClientRect(),a=s.current,o=function(e){const{overflow:n,overflowY:t,overflowX:r}=window.getComputedStyle(e),a=/(auto|scroll)/.test(n+t),o=/(auto|scroll)/.test(n+r);return{vertical:a&&e.scrollHeight>e.clientHeight,horizontal:o&&e.scrollWidth>e.clientWidth}}(t),u=function(e,n,t){const r=function(e,n){return{top:e.y-n.top,right:n.right-e.x,bottom:n.bottom-e.y,left:e.x-n.left}}(e,n);for(const[e,n]of Object.entries(r))if(n<t)return{edge:e,distance:n};return{edge:null,distance:1/0}}(a,r,i);if(u.edge){const e=function(e,n,t){return e>=n?0:(n-e)/n*t}(u.distance,i,d),n={x:0,y:0};o.vertical&&("top"===u.edge?n.y=-e:"bottom"===u.edge&&(n.y=e)),o.horizontal&&("left"===u.edge?n.x=-e:"right"===u.edge&&(n.x=e)),0===n.x&&0===n.y||function(e,n){n.x&&(e.scrollLeft+=n.x),n.y&&(e.scrollTop+=n.y)}(t,n)}l.current=requestAnimationFrame(g)},[c,n,e,i,d]);o(()=>c&&n?(window.addEventListener("mousemove",u),l.current=requestAnimationFrame(g),()=>{window.removeEventListener("mousemove",u),l.current&&cancelAnimationFrame(l.current)}):(l.current&&(cancelAnimationFrame(l.current),l.current=void 0),void(s.current=null)),[c,n,u,g])}const w=n(null);function j(){const e=d(w);if(!e)throw new Error("useAnnouncer must be used within AnnouncerProvider");return e}function C({children:n,politeness:r="polite"}){const a=t(null),i=t(null),d=t();o(()=>()=>{d.current&&clearTimeout(d.current)},[]);const c={announce:(e,n=r)=>{const t="assertive"===n?i:a;t.current&&(d.current&&clearTimeout(d.current),t.current.textContent="",d.current=setTimeout(()=>{t.current&&(t.current.textContent=e)},100))}};return e.createElement(w.Provider,{value:c},n,e.createElement("div",{ref:a,role:"status","aria-live":"polite","aria-atomic":"true",style:{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:"0"}}),e.createElement("div",{ref:i,role:"alert","aria-live":"assertive","aria-atomic":"true",style:{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:"0"}}))}const $={onDragStart:(e,n,t)=>`Picked up ${e}. Position ${n+1} of ${t}.`,onDragMove:(e,n,t)=>`${e} moved to position ${n+1} of ${t}.`,onDragEnd:(e,n,t,r)=>n===t?`${e} dropped. Position ${r+1} in ${t}.`:`${e} moved from ${n} to ${t}. Position ${r+1}.`,onDragCancel:(e,n)=>`Drag cancelled. ${e} returned to ${n}.`,onColumnMove:(e,n,t)=>`${e} moved to position ${n+1} of ${t}.`};function P(e,n,t){const r=Array.from(e),[a]=r.splice(n,1);return r.splice(t,0,a),r}function k(e,n){if(!n.destination)return e;const{source:t,destination:r,type:a}=n;return"COLUMN"===a?t.index===r.index?e:function(e,n,t){return Object.assign(Object.assign({},e),{columns:P(e.columns,n,t)})}(e,t.index,r.index):"CARD"===a?t.columnId===r.columnId?t.index===r.index?e:function(e,n,t,r){const a=e.columns.find(e=>e.id===n);if(!a)return e;const o=P(a.cardIds,t,r);return Object.assign(Object.assign({},e),{columns:e.columns.map(e=>e.id===n?Object.assign(Object.assign({},e),{cardIds:o}):e)})}(e,t.columnId,t.index,r.index):function(e,n,t,r){const a=e.columns.find(e=>e.id===n.columnId),o=e.columns.find(e=>e.id===t.columnId);if(!a||!o)return e;const i=[...a.cardIds];i.splice(n.index,1);const d=[...o.cardIds];return d.splice(t.index,0,r),Object.assign(Object.assign({},e),{columns:e.columns.map(e=>e.id===n.columnId?Object.assign(Object.assign({},e),{cardIds:i}):e.id===t.columnId?Object.assign(Object.assign({},e),{cardIds:d}):e)})}(e,t,r,n.draggableId):e}export{C as AnnouncerProvider,h as KanbanBoard,D as KanbanCardView,b as KanbanColumnView,$ as announcements,k as applyDragResult,P as reorderArray,j as useAnnouncer,E as useAutoscroll,I as useKanbanDnd};
+import e,{createContext as n,useRef as t,useState as r,useCallback as a,useEffect as o,useMemo as i,useContext as d}from"react";import{draggable as c,dropTargetForElements as l,monitorForElements as s}from"@atlaskit/pragmatic-drag-and-drop/element/adapter";import{attachClosestEdge as u,extractClosestEdge as g}from"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";import{combine as m}from"@atlaskit/pragmatic-drag-and-drop/combine";const p=n(null),f="kanban-column";function b({column:n,cardIds:i,children:d,isDragDisabled:s=!1,index:g}){const m=t(null),p=t(null),[b,x]=r(!1),[D,y]=r(!1),v=a(e=>s?()=>{}:c({element:e,getInitialData:()=>({type:f,id:n.id,index:g}),onDragStart:()=>x(!0),onDrop:()=>x(!1)}),[n.id,g,s]),I=a(e=>s?()=>{}:l({element:e,getData:({input:e,element:t})=>{const r={type:f,id:n.id,index:g};return u(r,{input:e,element:t,allowedEdges:["left","right"]})},canDrop:({source:e})=>e.data.type===f&&e.data.id!==n.id}),[n.id,g,s]),h=a(e=>l({element:e,getData:()=>({type:"kanban-column-drop-zone",columnId:n.id}),canDrop:({source:e})=>"kanban-card"===e.data.type,onDragEnter:()=>y(!0),onDragLeave:()=>y(!1),onDrop:()=>y(!1)}),[n.id]);o(()=>{const e=m.current,n=p.current;if(!e||!n)return;const t=[v(e),I(e),h(n)];return()=>{t.forEach(e=>e())}},[v,I,h]);const w={draggableProps:{"data-draggable-id":n.id,"data-draggable-type":"COLUMN",style:b?{opacity:.5}:void 0},dragHandleProps:{tabIndex:0,role:"button","aria-roledescription":"draggable column","aria-label":`${n.title}, ${i.length} cards, press space to pick up`},innerRef:m,dropZoneRef:p},E={isDragging:b,isDraggingOver:D};return e.createElement(e.Fragment,null,d(w,E))}const x="kanban-card";function D({card:n,children:i,isDragDisabled:d=!1,index:s,columnId:g}){const p=t(null),[f,b]=r(!1),[D,y]=r(!1),v=a(e=>d?()=>{}:c({element:e,getInitialData:()=>({type:x,id:n.id,index:s,columnId:g}),onDragStart:()=>b(!0),onDrop:()=>b(!1)}),[n.id,s,g,d]),I=a(e=>d?()=>{}:l({element:e,getData:({input:e,element:t})=>{const r={type:x,id:n.id,index:s,columnId:g};return u(r,{input:e,element:t,allowedEdges:["top","bottom"]})},canDrop:({source:e})=>e.data.type===x&&e.data.id!==n.id,onDragEnter:()=>y(!0),onDragLeave:()=>y(!1),onDrop:()=>y(!1)}),[n.id,s,g,d]);o(()=>{const e=p.current;if(e&&!d)return m(v(e),I(e))},[v,I,d]);const h={draggableProps:{"data-draggable-id":n.id,"data-draggable-type":"CARD",style:f?{opacity:.5}:void 0},dragHandleProps:{tabIndex:0,role:"button","aria-roledescription":"draggable card","aria-label":`${n.title}, press space to pick up`},innerRef:p},w={isDragging:f,isDraggingOver:D};return e.createElement(e.Fragment,null,i(h,w))}function y(e,n,t){const r=Array.from(e),[a]=r.splice(n,1);return r.splice(t,0,a),r}function v(e){const{itemCount:n,sourceIndex:t,rawDestinationIndex:r,isSameList:a}=e;if(n<=0)return 0;const o=n,i=Math.max(0,Math.min(r,o)),d=a&&t<i?i-1:i,c=a?n-1:n;return Math.max(0,Math.min(d,c))}function I(e,n){if(!n.destination)return e;const{source:t,destination:r,type:a}=n;return"COLUMN"===a?t.index===r.index?e:function(e,n,t){return Object.assign(Object.assign({},e),{columns:y(e.columns,n,t)})}(e,t.index,r.index):"CARD"===a?t.columnId===r.columnId?t.index===r.index?e:function(e,n,t,r){const a=e.columns.find(e=>e.id===n);if(!a)return e;const o=y(a.cardIds,t,r);return Object.assign(Object.assign({},e),{columns:e.columns.map(e=>e.id===n?Object.assign(Object.assign({},e),{cardIds:o}):e)})}(e,t.columnId,t.index,r.index):function(e,n,t,r){const a=e.columns.find(e=>e.id===n.columnId),o=e.columns.find(e=>e.id===t.columnId);if(!a||!o)return e;const i=[...a.cardIds];i.splice(n.index,1);const d=[...o.cardIds];return d.splice(t.index,0,r),Object.assign(Object.assign({},e),{columns:e.columns.map(e=>e.id===n.columnId?Object.assign(Object.assign({},e),{cardIds:i}):e.id===t.columnId?Object.assign(Object.assign({},e),{cardIds:d}):e)})}(e,t,r,n.draggableId):e}const h="kanban-card",w="kanban-column";function E({onDragStart:e,onDragEnd:n,state:t,disabled:a}){const[i,d]=r({draggingId:null,draggingType:null,source:null,destination:null});return o(()=>{if(a)return;return s({onDragStart({source:n}){const t=n.data.type,r=n.data.id,a=n.data.columnId,o=n.data.index,i=t===h?"CARD":"COLUMN",c={columnId:"CARD"===i?a:void 0,index:o};d({draggingId:r,draggingType:i,source:c,destination:c}),null==e||e({id:r,type:i})},onDrop({source:e,location:r}){const a=e.data.type,o=e.data.id,i=e.data.index,c=e.data.columnId,l=r.current.dropTargets;let s;if(a===h){const e=l.find(e=>"kanban-column-drop-zone"===e.data.type);if(e){const n=e.data.columnId,r=t.columns.find(e=>e.id===c),a=t.columns.find(e=>e.id===n);if(r&&a){const e=l.find(e=>e.data.type===h&&e.data.id!==o);let t=a.cardIds.length;if(e){const n=e.data.index;t="bottom"===g(e.data)?n+1:n}const d=c===n,u=v({itemCount:d?r.cardIds.length:a.cardIds.length,sourceIndex:i,rawDestinationIndex:t,isSameList:d});s={columnId:n,index:u}}}}else if(a===w){const e=l.find(e=>e.data.type===w&&e.data.id!==o);if(e){const n=e.data.index,r=g(e.data),a="bottom"===r||"right"===r?n+1:n;s={index:v({itemCount:t.columns.length,sourceIndex:i,rawDestinationIndex:a,isSameList:!0})}}}const u={type:a===h?"CARD":"COLUMN",source:{columnId:c,index:i},destination:s,draggableId:o};d({draggingId:null,draggingType:null,source:null,destination:null}),n(u,t)}})},[a,e,n,t]),i}function O({state:n,onDragEnd:t,onDragStart:r,renderColumn:a,renderCard:o,getCardKey:d,getColumnKey:c,isDragDisabled:l,className:s,style:u}){const g=E({state:n,onDragEnd:t,onDragStart:r,disabled:!1}),m=i(()=>({state:n,dragState:g,isDragDisabled:l}),[n,g,l]),f=d||(e=>e.id),x=c||(e=>e.id);return e.createElement(p.Provider,{value:m},e.createElement("div",{className:s,style:Object.assign({display:"flex",gap:"16px"},u)},n.columns.map((t,r)=>e.createElement(b,{key:x(t),column:t,cardIds:t.cardIds,index:r,isDragDisabled:null==l?void 0:l(t.id,"COLUMN")},(r,i)=>e.createElement("div",Object.assign({ref:r.innerRef},r.draggableProps,{style:Object.assign({minWidth:"250px",display:"flex",flexDirection:"column"},r.draggableProps.style)}),e.createElement("div",Object.assign({},r.dragHandleProps),a(t,r,i)),e.createElement("div",{ref:r.dropZoneRef,style:{flex:1,minHeight:"100px",display:"flex",flexDirection:"column",gap:"8px"}},t.cardIds.map((r,a)=>{const i=n.cards[r];return i?e.createElement(D,{key:f(i),card:i,index:a,columnId:t.id,isDragDisabled:null==l?void 0:l(i.id,"CARD")},(n,t)=>e.createElement("div",Object.assign({ref:n.innerRef},n.draggableProps,n.dragHandleProps),o(i,n,t))):null})))))))}const C={threshold:50,maxSpeed:20,enabled:!0};function $(e,n,r={}){const{threshold:i,maxSpeed:d,enabled:c}=Object.assign(Object.assign({},C),r),l=t(),s=t(null),u=a(e=>{s.current={x:e.clientX,y:e.clientY}},[]),g=a(()=>{if(!(c&&n&&e.current&&s.current))return;const t=function(e){if(!e)return null;let n=e.parentElement;for(;n;){const{overflow:e,overflowY:t}=window.getComputedStyle(n);if(/(auto|scroll)/.test(e+t))return n;n=n.parentElement}return document.documentElement}(e.current);if(!t)return;const r=t.getBoundingClientRect(),a=s.current,o=function(e){const{overflow:n,overflowY:t,overflowX:r}=window.getComputedStyle(e),a=/(auto|scroll)/.test(n+t),o=/(auto|scroll)/.test(n+r);return{vertical:a&&e.scrollHeight>e.clientHeight,horizontal:o&&e.scrollWidth>e.clientWidth}}(t),u=function(e,n,t){const r=function(e,n){return{top:e.y-n.top,right:n.right-e.x,bottom:n.bottom-e.y,left:e.x-n.left}}(e,n);for(const[e,n]of Object.entries(r))if(n<t)return{edge:e,distance:n};return{edge:null,distance:1/0}}(a,r,i);if(u.edge){const e=function(e,n,t){return e>=n?0:(n-e)/n*t}(u.distance,i,d),n={x:0,y:0};o.vertical&&("top"===u.edge?n.y=-e:"bottom"===u.edge&&(n.y=e)),o.horizontal&&("left"===u.edge?n.x=-e:"right"===u.edge&&(n.x=e)),0===n.x&&0===n.y||function(e,n){n.x&&(e.scrollLeft+=n.x),n.y&&(e.scrollTop+=n.y)}(t,n)}l.current=requestAnimationFrame(g)},[c,n,e,i,d]);o(()=>c&&n?(window.addEventListener("mousemove",u),l.current=requestAnimationFrame(g),()=>{window.removeEventListener("mousemove",u),l.current&&cancelAnimationFrame(l.current)}):(l.current&&(cancelAnimationFrame(l.current),l.current=void 0),void(s.current=null)),[c,n,u,g])}const j=n(null);function S(){const e=d(j);if(!e)throw new Error("useAnnouncer must be used within AnnouncerProvider");return e}function P({children:n,politeness:r="polite"}){const a=t(null),i=t(null),d=t();o(()=>()=>{d.current&&clearTimeout(d.current)},[]);const c={announce:(e,n=r)=>{const t="assertive"===n?i:a;t.current&&(d.current&&clearTimeout(d.current),t.current.textContent="",d.current=setTimeout(()=>{t.current&&(t.current.textContent=e)},100))}};return e.createElement(j.Provider,{value:c},n,e.createElement("div",{ref:a,role:"status","aria-live":"polite","aria-atomic":"true",style:{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:"0"}}),e.createElement("div",{ref:i,role:"alert","aria-live":"assertive","aria-atomic":"true",style:{position:"absolute",width:"1px",height:"1px",padding:"0",margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",whiteSpace:"nowrap",border:"0"}}))}const k={onDragStart:(e,n,t)=>`Picked up ${e}. Position ${n+1} of ${t}.`,onDragMove:(e,n,t)=>`${e} moved to position ${n+1} of ${t}.`,onDragEnd:(e,n,t,r)=>n===t?`${e} dropped. Position ${r+1} in ${t}.`:`${e} moved from ${n} to ${t}. Position ${r+1}.`,onDragCancel:(e,n)=>`Drag cancelled. ${e} returned to ${n}.`,onColumnMove:(e,n,t)=>`${e} moved to position ${n+1} of ${t}.`};export{P as AnnouncerProvider,O as KanbanBoard,D as KanbanCardView,b as KanbanColumnView,k as announcements,I as applyDragResult,y as reorderArray,S as useAnnouncer,$ as useAutoscroll,E as useKanbanDnd};
 //# sourceMappingURL=kanban.esm.js.map