react-dragdrop-kit 1.1.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.
@@ -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
@@ -1,2 +1,2 @@
1
- "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;
1
+ "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;
2
2
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -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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"}
@@ -0,0 +1,2 @@
1
+ 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};
2
+ //# sourceMappingURL=kanban.esm.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"kanban.esm.js","sources":["../src/kanban/context.ts","../src/kanban/components/KanbanColumnView.tsx","../src/kanban/components/KanbanCardView.tsx","../src/kanban/utils/reorder.ts","../src/kanban/hooks/useKanbanDnd.ts","../src/kanban/components/KanbanBoard.tsx","../src/kanban/hooks/useAutoscroll.ts","../src/kanban/utils/dom.ts","../src/kanban/utils/dndMath.ts","../src/kanban/a11y/Announcer.tsx"],"sourcesContent":["/**\r\n * Kanban Board Context\r\n *\r\n * Internal context for sharing board state between components.\r\n */\r\n\r\nimport { createContext, useContext } from 'react';\r\nimport type { KanbanBoardState, KanbanDragState } from './types';\r\n\r\nexport interface KanbanContextValue {\r\n state: KanbanBoardState;\r\n dragState: KanbanDragState;\r\n isDragDisabled?: (id: string, type: 'CARD' | 'COLUMN') => boolean;\r\n}\r\n\r\nexport const KanbanContext = createContext<KanbanContextValue | null>(null);\r\n\r\nexport function useKanbanContext(): KanbanContextValue {\r\n const context = useContext(KanbanContext);\r\n if (!context) {\r\n throw new Error('Kanban components must be used within KanbanBoard');\r\n }\r\n return context;\r\n}\r\n","/**\r\n * Kanban Column View (Headless)\r\n *\r\n * Headless component for rendering draggable columns with drop zones.\r\n */\r\n\r\nimport React, { useRef, useEffect, useState, useCallback } from 'react';\nimport { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\r\nimport type { KanbanColumnViewProps, DragProvided, DragSnapshot } from '../types';\r\n\r\nconst KANBAN_COLUMN = 'kanban-column';\r\nconst KANBAN_COLUMN_DROP_ZONE = 'kanban-column-drop-zone';\r\n\r\nexport function KanbanColumnView({\n column,\n cardIds,\n children,\n isDragDisabled = false,\n index,\r\n}: KanbanColumnViewProps) {\r\n const columnRef = useRef<HTMLDivElement>(null);\r\n const dropZoneRef = useRef<HTMLDivElement>(null);\r\n const [isDragging, setIsDragging] = useState(false);\r\n const [isDraggingOver, setIsDraggingOver] = useState(false);\r\n\r\n // Make column header draggable\r\n const createDraggableColumn = useCallback(\r\n (element: HTMLElement) => {\r\n if (isDragDisabled) return () => {};\r\n\r\n return draggable({\r\n element,\r\n getInitialData: () => ({\r\n type: KANBAN_COLUMN,\r\n id: column.id,\r\n index,\r\n }),\r\n onDragStart: () => setIsDragging(true),\r\n onDrop: () => setIsDragging(false),\r\n });\r\n },\r\n [column.id, index, isDragDisabled]\r\n );\r\n\r\n // Make column header a drop target for column reordering\r\n const createColumnDropTarget = useCallback(\r\n (element: HTMLElement) => {\r\n if (isDragDisabled) return () => {};\r\n\r\n return dropTargetForElements({\r\n element,\r\n getData: ({ input, element }) => {\r\n const data = { type: KANBAN_COLUMN, id: column.id, index };\r\n return attachClosestEdge(data, { input, element, allowedEdges: ['left', 'right'] });\r\n },\r\n canDrop: ({ source }) => source.data.type === KANBAN_COLUMN && source.data.id !== column.id,\r\n });\r\n },\r\n [column.id, index, isDragDisabled]\r\n );\r\n\r\n // Make card list area a drop zone for cards\r\n const createCardDropZone = useCallback(\r\n (element: HTMLElement) => {\r\n return dropTargetForElements({\r\n element,\r\n getData: () => ({\r\n type: KANBAN_COLUMN_DROP_ZONE,\r\n columnId: column.id,\r\n }),\r\n canDrop: ({ source }) => source.data.type === 'kanban-card',\r\n onDragEnter: () => setIsDraggingOver(true),\r\n onDragLeave: () => setIsDraggingOver(false),\r\n onDrop: () => setIsDraggingOver(false),\r\n });\r\n },\r\n [column.id]\r\n );\r\n\r\n useEffect(() => {\r\n const columnElement = columnRef.current;\r\n const dropZoneElement = dropZoneRef.current;\r\n if (!columnElement || !dropZoneElement) return;\r\n\r\n const cleanups = [\r\n createDraggableColumn(columnElement),\r\n createColumnDropTarget(columnElement),\r\n createCardDropZone(dropZoneElement),\r\n ];\r\n\r\n return () => {\r\n cleanups.forEach((cleanup) => cleanup());\r\n };\r\n }, [createDraggableColumn, createColumnDropTarget, createCardDropZone]);\r\n\r\n const provided: DragProvided = {\r\n draggableProps: {\r\n 'data-draggable-id': column.id,\r\n 'data-draggable-type': 'COLUMN',\r\n style: isDragging ? { opacity: 0.5 } : undefined,\r\n },\r\n dragHandleProps: {\n tabIndex: 0,\n role: 'button',\n 'aria-roledescription': 'draggable column',\n 'aria-label': `${column.title}, ${cardIds.length} cards, press space to pick up`,\n },\n innerRef: columnRef,\n dropZoneRef,\n };\n\r\n const snapshot: DragSnapshot = {\r\n isDragging,\r\n isDraggingOver,\r\n };\r\n\r\n // Pass both refs through provided\r\n return <>{children(provided, snapshot)}</>;\n}\n","/**\r\n * Kanban Card View (Headless)\r\n *\r\n * Headless component for rendering draggable cards.\r\n */\r\n\r\nimport React, { useRef, useEffect, useState, useCallback } from 'react';\r\nimport { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';\r\nimport { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\r\nimport { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';\r\nimport type { KanbanCardViewProps, DragProvided, DragSnapshot } from '../types';\r\n\r\nconst KANBAN_CARD = 'kanban-card';\r\n\r\nexport function KanbanCardView({\r\n card,\r\n children,\r\n isDragDisabled = false,\r\n index,\r\n columnId,\r\n}: KanbanCardViewProps) {\r\n const cardRef = useRef<HTMLDivElement>(null);\r\n const [isDragging, setIsDragging] = useState(false);\r\n const [isDraggingOver, setIsDraggingOver] = useState(false);\r\n\r\n const createDraggable = useCallback(\r\n (element: HTMLElement) => {\r\n if (isDragDisabled) return () => {};\r\n\r\n return draggable({\r\n element,\r\n getInitialData: () => ({\r\n type: KANBAN_CARD,\r\n id: card.id,\r\n index,\r\n columnId,\r\n }),\r\n onDragStart: () => setIsDragging(true),\r\n onDrop: () => setIsDragging(false),\r\n });\r\n },\r\n [card.id, index, columnId, isDragDisabled]\r\n );\r\n\r\n const createDropTarget = useCallback(\r\n (element: HTMLElement) => {\r\n if (isDragDisabled) return () => {};\r\n\r\n return dropTargetForElements({\r\n element,\r\n getData: ({ input, element }) => {\r\n const data = { type: KANBAN_CARD, id: card.id, index, columnId };\r\n return attachClosestEdge(data, { input, element, allowedEdges: ['top', 'bottom'] });\r\n },\r\n canDrop: ({ source }) => source.data.type === KANBAN_CARD && source.data.id !== card.id,\r\n onDragEnter: () => setIsDraggingOver(true),\r\n onDragLeave: () => setIsDraggingOver(false),\r\n onDrop: () => setIsDraggingOver(false),\r\n });\r\n },\r\n [card.id, index, columnId, isDragDisabled]\r\n );\r\n\r\n useEffect(() => {\r\n const element = cardRef.current;\r\n if (!element || isDragDisabled) return;\r\n\r\n return combine(createDraggable(element), createDropTarget(element));\r\n }, [createDraggable, createDropTarget, isDragDisabled]);\r\n\r\n const provided: DragProvided = {\r\n draggableProps: {\r\n 'data-draggable-id': card.id,\r\n 'data-draggable-type': 'CARD',\r\n style: isDragging ? { opacity: 0.5 } : undefined,\r\n },\r\n dragHandleProps: {\n tabIndex: 0,\n role: 'button',\n 'aria-roledescription': 'draggable card',\n 'aria-label': `${card.title}, press space to pick up`,\n },\n innerRef: cardRef,\n };\n\r\n const snapshot: DragSnapshot = {\r\n isDragging,\r\n isDraggingOver,\r\n };\r\n\r\n return <>{children(provided, snapshot)}</>;\r\n}\r\n","/**\r\n * Kanban Reorder Utilities\r\n *\r\n * Functions for reordering cards and columns in a Kanban board.\r\n */\r\n\r\nimport type { KanbanBoardState, DragLocation } from '../types';\n\r\n/**\r\n * Reorder an array by moving an item from one index to another\r\n */\r\nexport function reorderArray<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 normalizeReorderDestinationIndex(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\r\n/**\r\n * Move a card within the same column\r\n */\r\nexport function reorderCardInColumn(\r\n state: KanbanBoardState,\r\n columnId: string,\r\n startIndex: number,\r\n endIndex: number\r\n): KanbanBoardState {\r\n const column = state.columns.find((col) => col.id === columnId);\r\n if (!column) return state;\r\n\r\n const newCardIds = reorderArray(column.cardIds, startIndex, endIndex);\r\n\r\n return {\r\n ...state,\r\n columns: state.columns.map((col) =>\r\n col.id === columnId ? { ...col, cardIds: newCardIds } : col\r\n ),\r\n };\r\n}\r\n\r\n/**\r\n * Move a card from one column to another\r\n */\r\nexport function moveCardBetweenColumns(\r\n state: KanbanBoardState,\r\n source: DragLocation,\r\n destination: DragLocation,\r\n cardId: string\r\n): KanbanBoardState {\r\n const sourceColumn = state.columns.find((col) => col.id === source.columnId);\r\n const destColumn = state.columns.find((col) => col.id === destination.columnId);\r\n\r\n if (!sourceColumn || !destColumn) return state;\r\n\r\n // Remove from source\r\n const newSourceCardIds = [...sourceColumn.cardIds];\r\n newSourceCardIds.splice(source.index, 1);\r\n\r\n // Add to destination\r\n const newDestCardIds = [...destColumn.cardIds];\r\n newDestCardIds.splice(destination.index, 0, cardId);\r\n\r\n return {\r\n ...state,\r\n columns: state.columns.map((col) => {\r\n if (col.id === source.columnId) {\r\n return { ...col, cardIds: newSourceCardIds };\r\n }\r\n if (col.id === destination.columnId) {\r\n return { ...col, cardIds: newDestCardIds };\r\n }\r\n return col;\r\n }),\r\n };\r\n}\r\n\r\n/**\r\n * Reorder columns\r\n */\r\nexport function reorderColumns(\r\n state: KanbanBoardState,\r\n startIndex: number,\r\n endIndex: number\r\n): KanbanBoardState {\r\n return {\r\n ...state,\r\n columns: reorderArray(state.columns, startIndex, endIndex),\r\n };\r\n}\r\n\r\n/**\r\n * Apply a drag result to the board state\r\n * This is a convenience function that handles all reorder cases\r\n */\r\nexport function applyDragResult(\r\n state: KanbanBoardState,\r\n result: {\r\n type: 'CARD' | 'COLUMN';\r\n source: DragLocation;\r\n destination?: DragLocation;\r\n draggableId: string;\r\n }\r\n): KanbanBoardState {\r\n // No destination = drag canceled\r\n if (!result.destination) {\r\n return state;\r\n }\r\n\r\n const { source, destination, type } = result;\r\n\r\n // Column reorder\r\n if (type === 'COLUMN') {\r\n if (source.index === destination.index) {\r\n return state; // No change\r\n }\r\n return reorderColumns(state, source.index, destination.index);\r\n }\r\n\r\n // Card reorder\r\n if (type === 'CARD') {\r\n // Same column\r\n if (source.columnId === destination.columnId) {\r\n if (source.index === destination.index) {\r\n return state; // No change\r\n }\r\n return reorderCardInColumn(\r\n state,\r\n source.columnId!,\r\n source.index,\r\n destination.index\r\n );\r\n }\r\n\r\n // Different columns\r\n return moveCardBetweenColumns(state, source, destination, result.draggableId);\r\n }\r\n\r\n return state;\r\n}\r\n","/**\r\n * Core Kanban DnD Hook\r\n *\r\n * Main hook that manages drag-and-drop state for the Kanban board.\r\n */\r\n\r\nimport { useState, 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 { KanbanDragState, DropResult, DragLocation, KanbanBoardState } from '../types';\nimport { normalizeReorderDestinationIndex } from '../utils/reorder';\n\r\nconst KANBAN_CARD = 'kanban-card';\r\nconst KANBAN_COLUMN = 'kanban-column';\r\n\r\nexport interface UseKanbanDndOptions {\r\n onDragStart?: (draggable: { id: string; type: 'CARD' | 'COLUMN' }) => void;\r\n onDragEnd: (result: DropResult, stateBefore: KanbanBoardState) => void;\r\n state: KanbanBoardState;\r\n disabled?: boolean;\r\n}\r\n\r\nexport function useKanbanDnd({ onDragStart, onDragEnd, state, disabled }: UseKanbanDndOptions) {\r\n const [dragState, setDragState] = useState<KanbanDragState>({\r\n draggingId: null,\r\n draggingType: null,\r\n source: null,\r\n destination: null,\r\n });\r\n\r\n useEffect(() => {\r\n if (disabled) return;\r\n\r\n const cleanup = monitorForElements({\r\n onDragStart({ source }) {\r\n const typeRaw = source.data.type as string;\r\n const id = source.data.id as string;\r\n const columnId = source.data.columnId as string | undefined;\r\n const index = source.data.index as number;\r\n\r\n const type: 'CARD' | 'COLUMN' = typeRaw === KANBAN_CARD ? 'CARD' : 'COLUMN';\r\n\r\n const sourceLocation: DragLocation = {\r\n columnId: type === 'CARD' ? columnId : undefined,\r\n index,\r\n };\r\n\r\n setDragState({\r\n draggingId: id,\r\n draggingType: type,\r\n source: sourceLocation,\r\n destination: sourceLocation,\r\n });\r\n\r\n onDragStart?.({ id, type });\r\n },\r\n\r\n onDrop({ source, location }) {\n const sourceType = source.data.type as string;\n const sourceId = source.data.id as string;\n const sourceIndex = source.data.index as number;\n const sourceColumnId = source.data.columnId as string | undefined;\n\r\n // Find the drop target\r\n const dropTargets = location.current.dropTargets;\r\n\r\n let destination: DragLocation | undefined;\r\n\r\n if (sourceType === KANBAN_CARD) {\n // Card drop - find column drop target\n const columnTarget = dropTargets.find((target) =>\n target.data.type === 'kanban-column-drop-zone'\n );\n\n if (columnTarget) {\n const destColumnId = columnTarget.data.columnId as string;\n const sourceColumn = state.columns.find((column) => column.id === sourceColumnId);\n const destColumn = state.columns.find((column) => column.id === destColumnId);\n if (sourceColumn && destColumn) {\n const cardTarget = dropTargets.find((target) =>\n target.data.type === KANBAN_CARD && target.data.id !== sourceId\n );\n\n let rawDestinationIndex = destColumn.cardIds.length;\n if (cardTarget) {\n // Dropping on another card\n const destIndex = cardTarget.data.index as number;\n const edge = extractClosestEdge(cardTarget.data);\n rawDestinationIndex = edge === 'bottom' ? destIndex + 1 : destIndex;\n }\n\n const isSameColumn = sourceColumnId === destColumnId;\n const normalizedIndex = normalizeReorderDestinationIndex({\n itemCount: isSameColumn ? sourceColumn.cardIds.length : destColumn.cardIds.length,\n sourceIndex,\n rawDestinationIndex,\n isSameList: isSameColumn,\n });\n\n destination = {\n columnId: destColumnId,\n index: normalizedIndex,\n };\n }\n }\n } else if (sourceType === KANBAN_COLUMN) {\n // Column drop\n const columnTarget = dropTargets.find((target) =>\n target.data.type === KANBAN_COLUMN && target.data.id !== sourceId\n );\n\n if (columnTarget) {\n const destIndex = columnTarget.data.index as number;\n const edge = extractClosestEdge(columnTarget.data);\n const rawDestinationIndex =\n edge === 'bottom' || edge === 'right' ? destIndex + 1 : destIndex;\n\n destination = {\n index: normalizeReorderDestinationIndex({\n itemCount: state.columns.length,\n sourceIndex,\n rawDestinationIndex,\n isSameList: true,\n }),\n };\n }\n }\n\r\n const result: DropResult = {\r\n type: sourceType === KANBAN_CARD ? 'CARD' : 'COLUMN',\r\n source: {\r\n columnId: sourceColumnId,\r\n index: sourceIndex,\r\n },\r\n destination,\r\n draggableId: sourceId,\r\n };\r\n\r\n setDragState({\r\n draggingId: null,\r\n draggingType: null,\r\n source: null,\r\n destination: null,\r\n });\r\n\r\n onDragEnd(result, state);\r\n },\r\n });\r\n\r\n return cleanup;\r\n }, [disabled, onDragStart, onDragEnd, state]);\r\n\r\n return dragState;\r\n}\r\n","/**\r\n * Kanban Board Component\r\n *\r\n * High-level component that composes the Kanban board with all features.\r\n */\r\n\r\nimport React, { useMemo } from 'react';\nimport type { KanbanBoardProps, KanbanCard, KanbanColumn } from '../types';\nimport { KanbanContext } from '../context';\r\nimport { KanbanColumnView } from './KanbanColumnView';\r\nimport { KanbanCardView } from './KanbanCardView';\r\nimport { useKanbanDnd } from '../hooks/useKanbanDnd';\r\n\r\nexport function KanbanBoard({\r\n state,\r\n onDragEnd,\r\n onDragStart,\r\n renderColumn,\r\n renderCard,\r\n getCardKey,\r\n getColumnKey,\r\n isDragDisabled,\r\n className,\r\n style,\r\n}: KanbanBoardProps) {\r\n const dragState = useKanbanDnd({\r\n state,\r\n onDragEnd,\r\n onDragStart,\r\n disabled: false,\r\n });\r\n\r\n const contextValue = useMemo(\r\n () => ({\r\n state,\r\n dragState,\r\n isDragDisabled,\r\n }),\r\n [state, dragState, isDragDisabled]\r\n );\r\n\r\n const defaultGetCardKey = (card: KanbanCard) => card.id;\n const defaultGetColumnKey = (column: KanbanColumn) => column.id;\n\r\n const cardKeyExtractor = getCardKey || defaultGetCardKey;\r\n const columnKeyExtractor = getColumnKey || defaultGetColumnKey;\r\n\r\n return (\r\n <KanbanContext.Provider value={contextValue}>\r\n <div\r\n className={className}\r\n style={{\r\n display: 'flex',\r\n gap: '16px',\r\n ...style,\r\n }}\r\n >\r\n {state.columns.map((column, columnIndex) => (\r\n <KanbanColumnView\r\n key={columnKeyExtractor(column)}\r\n column={column}\r\n cardIds={column.cardIds}\r\n index={columnIndex}\r\n isDragDisabled={isDragDisabled?.(column.id, 'COLUMN')}\r\n >\r\n {(columnProvided, columnSnapshot) => (\r\n <div\n ref={columnProvided.innerRef}\n {...columnProvided.draggableProps}\n style={{\n minWidth: '250px',\n display: 'flex',\r\n flexDirection: 'column',\r\n ...columnProvided.draggableProps.style,\r\n }}\r\n >\r\n {/* Column header (draggable) */}\r\n <div {...columnProvided.dragHandleProps}>\r\n {renderColumn(column, columnProvided, columnSnapshot)}\r\n </div>\r\n\r\n {/* Card drop zone */}\r\n <div\n ref={columnProvided.dropZoneRef}\n style={{\n flex: 1,\n minHeight: '100px',\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: '8px',\r\n }}\r\n >\r\n {column.cardIds.map((cardId, cardIndex) => {\r\n const card = state.cards[cardId];\r\n if (!card) return null;\r\n\r\n return (\r\n <KanbanCardView\r\n key={cardKeyExtractor(card)}\r\n card={card}\r\n index={cardIndex}\r\n columnId={column.id}\r\n isDragDisabled={isDragDisabled?.(card.id, 'CARD')}\r\n >\r\n {(cardProvided, cardSnapshot) => (\n <div\n ref={cardProvided.innerRef}\n {...cardProvided.draggableProps}\n {...cardProvided.dragHandleProps}\n >\n {renderCard(card, cardProvided, cardSnapshot)}\r\n </div>\r\n )}\r\n </KanbanCardView>\r\n );\r\n })}\r\n </div>\r\n </div>\r\n )}\r\n </KanbanColumnView>\r\n ))}\r\n </div>\r\n </KanbanContext.Provider>\r\n );\r\n}\r\n","/**\r\n * Autoscroll Hook\r\n *\r\n * Automatically scrolls containers when dragging near edges.\r\n */\r\n\r\nimport { useEffect, useRef, useCallback } from 'react';\r\nimport type { AutoscrollConfig } from '../types';\r\nimport { isNearEdge, calculateScrollSpeed } from '../utils/dndMath';\r\nimport { getScrollParent, scrollBy, isScrollable } from '../utils/dom';\r\n\r\nconst DEFAULT_CONFIG: AutoscrollConfig = {\r\n threshold: 50, // px from edge\r\n maxSpeed: 20, // px per frame\r\n enabled: true,\r\n};\r\n\r\n/**\r\n * Hook for autoscrolling containers during drag\r\n */\r\nexport function useAutoscroll(\r\n containerRef: React.RefObject<HTMLElement>,\r\n isDragging: boolean,\r\n config: Partial<AutoscrollConfig> = {}\r\n) {\r\n const { threshold, maxSpeed, enabled } = { ...DEFAULT_CONFIG, ...config };\r\n const rafRef = useRef<number>();\r\n const lastMousePosRef = useRef<{ x: number; y: number } | null>(null);\r\n\r\n const handleMouseMove = useCallback(\r\n (event: MouseEvent) => {\r\n lastMousePosRef.current = { x: event.clientX, y: event.clientY };\r\n },\r\n []\r\n );\r\n\r\n const performScroll = useCallback(() => {\r\n if (!enabled || !isDragging || !containerRef.current || !lastMousePosRef.current) {\r\n return;\r\n }\r\n\r\n const container = containerRef.current;\r\n const scrollParent = getScrollParent(container);\r\n if (!scrollParent) return;\r\n\r\n const rect = scrollParent.getBoundingClientRect();\r\n const mousePos = lastMousePosRef.current;\r\n const scrollability = isScrollable(scrollParent);\r\n\r\n const nearEdge = isNearEdge(mousePos, rect, threshold);\r\n\r\n if (nearEdge.edge) {\r\n const speed = calculateScrollSpeed(nearEdge.distance, threshold, maxSpeed);\r\n\r\n const delta = { x: 0, y: 0 };\r\n\r\n if (scrollability.vertical) {\r\n if (nearEdge.edge === 'top') {\r\n delta.y = -speed;\r\n } else if (nearEdge.edge === 'bottom') {\r\n delta.y = speed;\r\n }\r\n }\r\n\r\n if (scrollability.horizontal) {\r\n if (nearEdge.edge === 'left') {\r\n delta.x = -speed;\r\n } else if (nearEdge.edge === 'right') {\r\n delta.x = speed;\r\n }\r\n }\r\n\r\n if (delta.x !== 0 || delta.y !== 0) {\r\n scrollBy(scrollParent, delta);\r\n }\r\n }\r\n\r\n rafRef.current = requestAnimationFrame(performScroll);\r\n }, [enabled, isDragging, containerRef, threshold, maxSpeed]);\r\n\r\n useEffect(() => {\r\n if (!enabled || !isDragging) {\r\n if (rafRef.current) {\r\n cancelAnimationFrame(rafRef.current);\r\n rafRef.current = undefined;\r\n }\r\n lastMousePosRef.current = null;\r\n return;\r\n }\r\n\r\n window.addEventListener('mousemove', handleMouseMove);\r\n rafRef.current = requestAnimationFrame(performScroll);\r\n\r\n return () => {\r\n window.removeEventListener('mousemove', handleMouseMove);\r\n if (rafRef.current) {\r\n cancelAnimationFrame(rafRef.current);\r\n }\r\n };\r\n }, [enabled, isDragging, handleMouseMove, performScroll]);\r\n}\r\n","/**\r\n * DOM Utilities\r\n *\r\n * Helper functions for DOM measurements and manipulation.\r\n */\r\n\r\n/**\r\n * Safely get bounding client rect for an element\r\n */\r\nexport function getBoundingRect(element: HTMLElement | null): DOMRect | null {\r\n if (!element) return null;\r\n return element.getBoundingClientRect();\r\n}\r\n\r\n/**\r\n * Get scrollable parent of an element\r\n */\r\nexport function getScrollParent(element: HTMLElement | null): HTMLElement | null {\r\n if (!element) return null;\r\n\r\n let parent = element.parentElement;\r\n\r\n while (parent) {\r\n const { overflow, overflowY } = window.getComputedStyle(parent);\r\n if (/(auto|scroll)/.test(overflow + overflowY)) {\r\n return parent;\r\n }\r\n parent = parent.parentElement;\r\n }\r\n\r\n return document.documentElement as HTMLElement;\r\n}\r\n\r\n/**\r\n * Scroll an element by a delta\r\n */\r\nexport function scrollBy(\r\n element: HTMLElement,\r\n delta: { x?: number; y?: number }\r\n): void {\r\n if (delta.x) {\r\n element.scrollLeft += delta.x;\r\n }\r\n if (delta.y) {\r\n element.scrollTop += delta.y;\r\n }\r\n}\r\n\r\n/**\r\n * Check if an element is scrollable\r\n */\r\nexport function isScrollable(element: HTMLElement): {\r\n vertical: boolean;\r\n horizontal: boolean;\r\n} {\r\n const { overflow, overflowY, overflowX } = window.getComputedStyle(element);\r\n\r\n const hasVerticalScroll = /(auto|scroll)/.test(overflow + overflowY);\r\n const hasHorizontalScroll = /(auto|scroll)/.test(overflow + overflowX);\r\n\r\n return {\r\n vertical: hasVerticalScroll && element.scrollHeight > element.clientHeight,\r\n horizontal: hasHorizontalScroll && element.scrollWidth > element.clientWidth,\r\n };\r\n}\r\n\r\n/**\r\n * Get element's scroll position\r\n */\r\nexport function getScrollPosition(element: HTMLElement): { x: number; y: number } {\r\n if (element === document.documentElement) {\r\n return {\r\n x: window.pageXOffset || document.documentElement.scrollLeft,\r\n y: window.pageYOffset || document.documentElement.scrollTop,\r\n };\r\n }\r\n\r\n return {\r\n x: element.scrollLeft,\r\n y: element.scrollTop,\r\n };\r\n}\r\n\r\n/**\r\n * Get maximum scroll for an element\r\n */\r\nexport function getMaxScroll(element: HTMLElement): { x: number; y: number } {\r\n return {\r\n x: element.scrollWidth - element.clientWidth,\r\n y: element.scrollHeight - element.clientHeight,\r\n };\r\n}\r\n\r\n/**\r\n * Clamp scroll position to valid range\r\n */\r\nexport function clampScroll(\r\n scroll: { x: number; y: number },\r\n maxScroll: { x: number; y: number }\r\n): { x: number; y: number } {\r\n return {\r\n x: Math.max(0, Math.min(scroll.x, maxScroll.x)),\r\n y: Math.max(0, Math.min(scroll.y, maxScroll.y)),\r\n };\r\n}\r\n\r\n/**\r\n * Get all data attributes from an element as an object\r\n */\r\nexport function getDataAttributes(element: HTMLElement): Record<string, string> {\r\n const data: Record<string, string> = {};\r\n for (const key in element.dataset) {\r\n data[key] = element.dataset[key] || '';\r\n }\r\n return data;\r\n}\r\n\r\n/**\r\n * Find closest ancestor with a data attribute\r\n */\r\nexport function findClosestWithData(\r\n element: HTMLElement | null,\r\n dataKey: string\r\n): HTMLElement | null {\r\n let current = element;\r\n while (current) {\r\n if (current.dataset[dataKey]) {\r\n return current;\r\n }\r\n current = current.parentElement;\r\n }\r\n return null;\r\n}\r\n","/**\r\n * DnD Math Utilities\r\n *\r\n * Helper functions for collision detection and positioning calculations.\r\n */\r\n\r\n/**\r\n * Calculate the distance from a point to a rectangle's edges\r\n */\r\nexport function distanceToEdge(\r\n point: { x: number; y: number },\r\n rect: DOMRect\r\n): {\r\n top: number;\r\n right: number;\r\n bottom: number;\r\n left: number;\r\n} {\r\n return {\r\n top: point.y - rect.top,\r\n right: rect.right - point.x,\r\n bottom: rect.bottom - point.y,\r\n left: point.x - rect.left,\r\n };\r\n}\r\n\r\n/**\r\n * Get the closest edge of a rectangle to a point\r\n */\r\nexport function getClosestEdge(\r\n point: { x: number; y: number },\r\n rect: DOMRect\r\n): 'top' | 'right' | 'bottom' | 'left' {\r\n const distances = distanceToEdge(point, rect);\r\n const entries = Object.entries(distances) as Array<[keyof typeof distances, number]>;\r\n const sorted = entries.sort((a, b) => a[1] - b[1]);\r\n return sorted[0][0];\r\n}\r\n\r\n/**\r\n * Check if a point is within a threshold distance from an edge\r\n */\r\nexport function isNearEdge(\r\n point: { x: number; y: number },\r\n rect: DOMRect,\r\n threshold: number\r\n): { edge: 'top' | 'right' | 'bottom' | 'left' | null; distance: number } {\r\n const distances = distanceToEdge(point, rect);\r\n\r\n for (const [edge, distance] of Object.entries(distances)) {\r\n if (distance < threshold) {\r\n return {\r\n edge: edge as 'top' | 'right' | 'bottom' | 'left',\r\n distance,\r\n };\r\n }\r\n }\r\n\r\n return { edge: null, distance: Infinity };\r\n}\r\n\r\n/**\r\n * Calculate scroll speed based on distance from edge\r\n * Closer to edge = faster scroll\r\n */\r\nexport function calculateScrollSpeed(\r\n distance: number,\r\n threshold: number,\r\n maxSpeed: number\r\n): number {\r\n if (distance >= threshold) return 0;\r\n const ratio = (threshold - distance) / threshold;\r\n return ratio * maxSpeed;\r\n}\r\n\r\n/**\r\n * Check if a point is inside a rectangle\r\n */\r\nexport function isPointInRect(point: { x: number; y: number }, rect: DOMRect): boolean {\r\n return (\r\n point.x >= rect.left &&\r\n point.x <= rect.right &&\r\n point.y >= rect.top &&\r\n point.y <= rect.bottom\r\n );\r\n}\r\n\r\n/**\r\n * Calculate the center point of a rectangle\r\n */\r\nexport function getRectCenter(rect: DOMRect): { x: number; y: number } {\r\n return {\r\n x: rect.left + rect.width / 2,\r\n y: rect.top + rect.height / 2,\r\n };\r\n}\r\n\r\n/**\r\n * Calculate vertical drop position based on mouse Y relative to element center\r\n */\r\nexport function getVerticalDropPosition(\r\n mouseY: number,\r\n elementRect: DOMRect\r\n): 'top' | 'bottom' {\r\n const center = getRectCenter(elementRect);\r\n return mouseY < center.y ? 'top' : 'bottom';\r\n}\r\n\r\n/**\r\n * Calculate horizontal drop position based on mouse X relative to element center\r\n */\r\nexport function getHorizontalDropPosition(\r\n mouseX: number,\r\n elementRect: DOMRect\r\n): 'left' | 'right' {\r\n const center = getRectCenter(elementRect);\r\n return mouseX < center.x ? 'left' : 'right';\r\n}\r\n","/**\r\n * Announcer Component\r\n *\r\n * Provides screen reader announcements for drag-and-drop operations.\r\n */\r\n\r\nimport React, { createContext, useContext, useEffect, useRef } from 'react';\r\n\r\ninterface AnnouncerContextValue {\r\n announce: (message: string, politeness?: 'polite' | 'assertive') => void;\r\n}\r\n\r\nconst AnnouncerContext = createContext<AnnouncerContextValue | null>(null);\r\n\r\n/**\r\n * Hook to access the announcer context\r\n */\r\nexport function useAnnouncer(): AnnouncerContextValue {\r\n const context = useContext(AnnouncerContext);\r\n if (!context) {\r\n throw new Error('useAnnouncer must be used within AnnouncerProvider');\r\n }\r\n return context;\r\n}\r\n\r\n/**\r\n * Props for AnnouncerProvider\r\n */\r\nexport interface AnnouncerProviderProps {\r\n /** Child components */\r\n children: React.ReactNode;\r\n /** Default politeness level */\r\n politeness?: 'polite' | 'assertive';\r\n}\r\n\r\n/**\r\n * Provider component that creates a live region for screen reader announcements\r\n */\r\nexport function AnnouncerProvider({\r\n children,\r\n politeness = 'polite',\r\n}: AnnouncerProviderProps) {\r\n const politeRef = useRef<HTMLDivElement>(null);\r\n const assertiveRef = useRef<HTMLDivElement>(null);\r\n const timeoutRef = useRef<NodeJS.Timeout>();\r\n\r\n const announce = (message: string, announcePoliteness: 'polite' | 'assertive' = politeness) => {\r\n const regionRef = announcePoliteness === 'assertive' ? assertiveRef : politeRef;\r\n\r\n if (!regionRef.current) return;\r\n\r\n // Clear existing timeout\r\n if (timeoutRef.current) {\r\n clearTimeout(timeoutRef.current);\r\n }\r\n\r\n // Clear the region first\r\n regionRef.current.textContent = '';\r\n\r\n // Set the new message after a brief delay to ensure screen readers pick it up\r\n timeoutRef.current = setTimeout(() => {\r\n if (regionRef.current) {\r\n regionRef.current.textContent = message;\r\n }\r\n }, 100);\r\n };\r\n\r\n useEffect(() => {\r\n return () => {\r\n if (timeoutRef.current) {\r\n clearTimeout(timeoutRef.current);\r\n }\r\n };\r\n }, []);\r\n\r\n const value: AnnouncerContextValue = {\r\n announce,\r\n };\r\n\r\n return (\r\n <AnnouncerContext.Provider value={value}>\r\n {children}\r\n {/* Polite live region */}\r\n <div\r\n ref={politeRef}\r\n role=\"status\"\r\n aria-live=\"polite\"\r\n aria-atomic=\"true\"\r\n style={{\r\n position: 'absolute',\r\n width: '1px',\r\n height: '1px',\r\n padding: '0',\r\n margin: '-1px',\r\n overflow: 'hidden',\r\n clip: 'rect(0, 0, 0, 0)',\r\n whiteSpace: 'nowrap',\r\n border: '0',\r\n }}\r\n />\r\n {/* Assertive live region */}\r\n <div\r\n ref={assertiveRef}\r\n role=\"alert\"\r\n aria-live=\"assertive\"\r\n aria-atomic=\"true\"\r\n style={{\r\n position: 'absolute',\r\n width: '1px',\r\n height: '1px',\r\n padding: '0',\r\n margin: '-1px',\r\n overflow: 'hidden',\r\n clip: 'rect(0, 0, 0, 0)',\r\n whiteSpace: 'nowrap',\r\n border: '0',\r\n }}\r\n />\r\n </AnnouncerContext.Provider>\r\n );\r\n}\r\n\r\n/**\r\n * Generate announcement messages for different drag events\r\n */\r\nexport const announcements = {\r\n onDragStart: (itemName: string, position: number, totalItems: number): string =>\r\n `Picked up ${itemName}. Position ${position + 1} of ${totalItems}.`,\r\n\r\n onDragMove: (itemName: string, newPosition: number, totalItems: number): string =>\r\n `${itemName} moved to position ${newPosition + 1} of ${totalItems}.`,\r\n\r\n onDragEnd: (itemName: string, from: string, to: string, position: number): string =>\r\n from === to\r\n ? `${itemName} dropped. Position ${position + 1} in ${to}.`\r\n : `${itemName} moved from ${from} to ${to}. Position ${position + 1}.`,\r\n\r\n onDragCancel: (itemName: string, column: string): string =>\r\n `Drag cancelled. ${itemName} returned to ${column}.`,\r\n\r\n onColumnMove: (columnName: string, position: number, totalColumns: number): string =>\r\n `${columnName} moved to position ${position + 1} of ${totalColumns}.`,\r\n};\r\n"],"names":["KanbanContext","createContext","KANBAN_COLUMN","KanbanColumnView","column","cardIds","children","isDragDisabled","index","columnRef","useRef","dropZoneRef","isDragging","setIsDragging","useState","isDraggingOver","setIsDraggingOver","createDraggableColumn","useCallback","element","draggable","getInitialData","type","id","onDragStart","onDrop","createColumnDropTarget","dropTargetForElements","getData","input","data","attachClosestEdge","allowedEdges","canDrop","source","createCardDropZone","columnId","onDragEnter","onDragLeave","useEffect","columnElement","current","dropZoneElement","cleanups","forEach","cleanup","provided","draggableProps","style","opacity","undefined","dragHandleProps","tabIndex","role","title","length","innerRef","snapshot","React","createElement","Fragment","KANBAN_CARD","KanbanCardView","card","cardRef","createDraggable","createDropTarget","combine","reorderArray","list","startIndex","endIndex","result","Array","from","removed","splice","normalizeReorderDestinationIndex","params","itemCount","sourceIndex","rawDestinationIndex","isSameList","maxRaw","clampedRaw","Math","max","min","adjusted","maxFinal","applyDragResult","state","destination","Object","assign","columns","reorderColumns","find","col","newCardIds","map","reorderCardInColumn","cardId","sourceColumn","destColumn","newSourceCardIds","newDestCardIds","moveCardBetweenColumns","draggableId","useKanbanDnd","onDragEnd","disabled","dragState","setDragState","draggingId","draggingType","monitorForElements","typeRaw","sourceLocation","location","sourceType","sourceId","sourceColumnId","dropTargets","columnTarget","target","destColumnId","cardTarget","destIndex","extractClosestEdge","isSameColumn","normalizedIndex","edge","KanbanBoard","renderColumn","renderCard","getCardKey","getColumnKey","className","contextValue","useMemo","cardKeyExtractor","columnKeyExtractor","Provider","value","display","gap","columnIndex","key","columnProvided","columnSnapshot","ref","minWidth","flexDirection","flex","minHeight","cardIndex","cards","cardProvided","cardSnapshot","DEFAULT_CONFIG","threshold","maxSpeed","enabled","useAutoscroll","containerRef","config","rafRef","lastMousePosRef","handleMouseMove","event","x","clientX","y","clientY","performScroll","scrollParent","parent","parentElement","overflow","overflowY","window","getComputedStyle","test","document","documentElement","getScrollParent","rect","getBoundingClientRect","mousePos","scrollability","overflowX","hasVerticalScroll","hasHorizontalScroll","vertical","scrollHeight","clientHeight","horizontal","scrollWidth","clientWidth","isScrollable","nearEdge","point","distances","top","right","bottom","left","distanceToEdge","distance","entries","Infinity","isNearEdge","speed","calculateScrollSpeed","delta","scrollLeft","scrollTop","scrollBy","requestAnimationFrame","addEventListener","removeEventListener","cancelAnimationFrame","AnnouncerContext","useAnnouncer","context","useContext","Error","AnnouncerProvider","politeness","politeRef","assertiveRef","timeoutRef","clearTimeout","announce","message","announcePoliteness","regionRef","textContent","setTimeout","position","width","height","padding","margin","clip","whiteSpace","border","announcements","itemName","totalItems","onDragMove","newPosition","to","onDragCancel","onColumnMove","columnName","totalColumns"],"mappings":"ubAeO,MAAMA,EAAgBC,EAAyC,MCJhEC,EAAgB,gBAGN,SAAAC,GAAiBC,OAC/BA,EAAMC,QACNA,EAAOC,SACPA,EAAQC,eACRA,GAAiB,EAAKC,MACtBA,IAEA,MAAMC,EAAYC,EAAuB,MACnCC,EAAcD,EAAuB,OACpCE,EAAYC,GAAiBC,GAAS,IACtCC,EAAgBC,GAAqBF,GAAS,GAG/CG,EAAwBC,EAC3BC,GACKZ,EAAuB,OAEpBa,EAAU,CACfD,UACAE,eAAgB,KAAO,CACrBC,KAAMpB,EACNqB,GAAInB,EAAOmB,GACXf,UAEFgB,YAAa,IAAMX,GAAc,GACjCY,OAAQ,IAAMZ,GAAc,KAGhC,CAACT,EAAOmB,GAAIf,EAAOD,IAIfmB,EAAyBR,EAC5BC,GACKZ,EAAuB,OAEpBoB,EAAsB,CAC3BR,UACAS,QAAS,EAAGC,QAAOV,cACjB,MAAMW,EAAO,CAAER,KAAMpB,EAAeqB,GAAInB,EAAOmB,GAAIf,SACnD,OAAOuB,EAAkBD,EAAM,CAAED,QAAOV,UAASa,aAAc,CAAC,OAAQ,YAE1EC,QAAS,EAAGC,YAAaA,EAAOJ,KAAKR,OAASpB,GAAiBgC,EAAOJ,KAAKP,KAAOnB,EAAOmB,KAG7F,CAACnB,EAAOmB,GAAIf,EAAOD,IAIf4B,EAAqBjB,EACxBC,GACQQ,EAAsB,CAC3BR,UACAS,QAAS,KAAO,CACdN,KAxDsB,0BAyDtBc,SAAUhC,EAAOmB,KAEnBU,QAAS,EAAGC,YAAkC,gBAArBA,EAAOJ,KAAKR,KACrCe,YAAa,IAAMrB,GAAkB,GACrCsB,YAAa,IAAMtB,GAAkB,GACrCS,OAAQ,IAAMT,GAAkB,KAGpC,CAACZ,EAAOmB,KAGVgB,EAAU,KACR,MAAMC,EAAgB/B,EAAUgC,QAC1BC,EAAkB/B,EAAY8B,QACpC,IAAKD,IAAkBE,EAAiB,OAExC,MAAMC,EAAW,CACf1B,EAAsBuB,GACtBd,EAAuBc,GACvBL,EAAmBO,IAGrB,MAAO,KACLC,EAASC,QAASC,GAAYA,OAE/B,CAAC5B,EAAuBS,EAAwBS,IAEnD,MAAMW,EAAyB,CAC7BC,eAAgB,CACd,oBAAqB3C,EAAOmB,GAC5B,sBAAuB,SACvByB,MAAOpC,EAAa,CAAEqC,QAAS,SAAQC,GAEzCC,gBAAiB,CACfC,SAAU,EACVC,KAAM,SACN,uBAAwB,mBACxB,aAAc,GAAGjD,EAAOkD,UAAUjD,EAAQkD,wCAE5CC,SAAU/C,EACVE,eAGI8C,EAAyB,CAC7B7C,aACAG,kBAIF,OAAO2C,EAAAC,cAAAD,EAAAE,SAAA,KAAGtD,EAASwC,EAAUW,GAC/B,CC3GA,MAAMI,EAAc,cAEJ,SAAAC,GAAeC,KAC7BA,EAAIzD,SACJA,EAAQC,eACRA,GAAiB,EAAKC,MACtBA,EAAK4B,SACLA,IAEA,MAAM4B,EAAUtD,EAAuB,OAChCE,EAAYC,GAAiBC,GAAS,IACtCC,EAAgBC,GAAqBF,GAAS,GAE/CmD,EAAkB/C,EACrBC,GACKZ,EAAuB,OAEpBa,EAAU,CACfD,UACAE,eAAgB,KAAO,CACrBC,KAAMuC,EACNtC,GAAIwC,EAAKxC,GACTf,QACA4B,aAEFZ,YAAa,IAAMX,GAAc,GACjCY,OAAQ,IAAMZ,GAAc,KAGhC,CAACkD,EAAKxC,GAAIf,EAAO4B,EAAU7B,IAGvB2D,EAAmBhD,EACtBC,GACKZ,EAAuB,OAEpBoB,EAAsB,CAC3BR,UACAS,QAAS,EAAGC,QAAOV,cACjB,MAAMW,EAAO,CAAER,KAAMuC,EAAatC,GAAIwC,EAAKxC,GAAIf,QAAO4B,YACtD,OAAOL,EAAkBD,EAAM,CAAED,QAAOV,UAASa,aAAc,CAAC,MAAO,aAEzEC,QAAS,EAAGC,YAAaA,EAAOJ,KAAKR,OAASuC,GAAe3B,EAAOJ,KAAKP,KAAOwC,EAAKxC,GACrFc,YAAa,IAAMrB,GAAkB,GACrCsB,YAAa,IAAMtB,GAAkB,GACrCS,OAAQ,IAAMT,GAAkB,KAGpC,CAAC+C,EAAKxC,GAAIf,EAAO4B,EAAU7B,IAG7BgC,EAAU,KACR,MAAMpB,EAAU6C,EAAQvB,QACxB,GAAKtB,IAAWZ,EAEhB,OAAO4D,EAAQF,EAAgB9C,GAAU+C,EAAiB/C,KACzD,CAAC8C,EAAiBC,EAAkB3D,IAEvC,MAAMuC,EAAyB,CAC7BC,eAAgB,CACd,oBAAqBgB,EAAKxC,GAC1B,sBAAuB,OACvByB,MAAOpC,EAAa,CAAEqC,QAAS,SAAQC,GAEzCC,gBAAiB,CACfC,SAAU,EACVC,KAAM,SACN,uBAAwB,iBACxB,aAAc,GAAGU,EAAKT,iCAExBE,SAAUQ,GAGNP,EAAyB,CAC7B7C,aACAG,kBAGF,OAAO2C,EAAAC,cAAAD,EAAAE,SAAA,KAAGtD,EAASwC,EAAUW,GAC/B,UChFgBW,EAAgBC,EAAWC,EAAoBC,GAC7D,MAAMC,EAASC,MAAMC,KAAKL,IACnBM,GAAWH,EAAOI,OAAON,EAAY,GAE5C,OADAE,EAAOI,OAAOL,EAAU,EAAGI,GACpBH,CACT,CAEM,SAAUK,EAAiCC,GAM/C,MAAMC,UAAEA,EAASC,YAAEA,EAAWC,oBAAEA,EAAmBC,WAAEA,GAAeJ,EAEpE,GAAIC,GAAa,EAAG,OAAO,EAE3B,MAAMI,EAASJ,EACTK,EAAaC,KAAKC,IAAI,EAAGD,KAAKE,IAAIN,EAAqBE,IACvDK,EAAWN,GAAcF,EAAcI,EAAaA,EAAa,EAAIA,EACrEK,EAAWP,EAAaH,EAAY,EAAIA,EAE9C,OAAOM,KAAKC,IAAI,EAAGD,KAAKE,IAAIC,EAAUC,GACxC,CA8EgB,SAAAC,EACdC,EACAnB,GAQA,IAAKA,EAAOoB,YACV,OAAOD,EAGT,MAAMzD,OAAEA,EAAM0D,YAAEA,EAAWtE,KAAEA,GAASkD,EAGtC,MAAa,WAATlD,EACEY,EAAO1B,QAAUoF,EAAYpF,MACxBmF,WAjCXA,EACArB,EACAC,GAEA,OAAAsB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACKH,GAAK,CACRI,QAAS3B,EAAauB,EAAMI,QAASzB,EAAYC,IAErD,CA2BWyB,CAAeL,EAAOzD,EAAO1B,MAAOoF,EAAYpF,OAI5C,SAATc,EAEEY,EAAOE,WAAawD,EAAYxD,SAC9BF,EAAO1B,QAAUoF,EAAYpF,MACxBmF,EAtGT,SACJA,EACAvD,EACAkC,EACAC,GAEA,MAAMnE,EAASuF,EAAMI,QAAQE,KAAMC,GAAQA,EAAI3E,KAAOa,GACtD,IAAKhC,EAAQ,OAAOuF,EAEpB,MAAMQ,EAAa/B,EAAahE,EAAOC,QAASiE,EAAYC,GAE5D,OAAAsB,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACKH,GAAK,CACRI,QAASJ,EAAMI,QAAQK,IAAKF,GAC1BA,EAAI3E,KAAOa,iCAAgB8D,GAAG,CAAE7F,QAAS8F,IAAeD,IAG9D,CAuFaG,CACLV,EACAzD,EAAOE,SACPF,EAAO1B,MACPoF,EAAYpF,OAtFd,SACJmF,EACAzD,EACA0D,EACAU,GAEA,MAAMC,EAAeZ,EAAMI,QAAQE,KAAMC,GAAQA,EAAI3E,KAAOW,EAAOE,UAC7DoE,EAAab,EAAMI,QAAQE,KAAMC,GAAQA,EAAI3E,KAAOqE,EAAYxD,UAEtE,IAAKmE,IAAiBC,EAAY,OAAOb,EAGzC,MAAMc,EAAmB,IAAIF,EAAalG,SAC1CoG,EAAiB7B,OAAO1C,EAAO1B,MAAO,GAGtC,MAAMkG,EAAiB,IAAIF,EAAWnG,SAGtC,OAFAqG,EAAe9B,OAAOgB,EAAYpF,MAAO,EAAG8F,GAE5CT,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACKH,GAAK,CACRI,QAASJ,EAAMI,QAAQK,IAAKF,GACtBA,EAAI3E,KAAOW,EAAOE,SACpByD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAYI,GAAG,CAAE7F,QAASoG,IAExBP,EAAI3E,KAAOqE,EAAYxD,SACzByD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAYI,GAAG,CAAE7F,QAASqG,IAErBR,IAGb,CA4DWS,CAAuBhB,EAAOzD,EAAQ0D,EAAapB,EAAOoC,aAG5DjB,CACT,CChJA,MAAM9B,EAAc,cACd3D,EAAgB,gBAShB,SAAU2G,GAAarF,YAAEA,EAAWsF,UAAEA,EAASnB,MAAEA,EAAKoB,SAAEA,IAC5D,MAAOC,EAAWC,GAAgBnG,EAA0B,CAC1DoG,WAAY,KACZC,aAAc,KACdjF,OAAQ,KACR0D,YAAa,OA6Hf,OA1HArD,EAAU,KACR,GAAIwE,EAAU,OAsHd,OApHgBK,EAAmB,CACjC,WAAA5F,EAAYU,OAAEA,IACZ,MAAMmF,EAAUnF,EAAOJ,KAAKR,KACtBC,EAAKW,EAAOJ,KAAKP,GACjBa,EAAWF,EAAOJ,KAAKM,SACvB5B,EAAQ0B,EAAOJ,KAAKtB,MAEpBc,EAA0B+F,IAAYxD,EAAc,OAAS,SAE7DyD,EAA+B,CACnClF,SAAmB,SAATd,EAAkBc,OAAWc,EACvC1C,SAGFyG,EAAa,CACXC,WAAY3F,EACZ4F,aAAc7F,EACdY,OAAQoF,EACR1B,YAAa0B,IAGf9F,SAAAA,EAAc,CAAED,KAAID,QACrB,EAED,MAAAG,EAAOS,OAAEA,EAAMqF,SAAEA,IACf,MAAMC,EAAatF,EAAOJ,KAAKR,KACzBmG,EAAWvF,EAAOJ,KAAKP,GACvByD,EAAc9C,EAAOJ,KAAKtB,MAC1BkH,EAAiBxF,EAAOJ,KAAKM,SAG7BuF,EAAcJ,EAAS9E,QAAQkF,YAErC,IAAI/B,EAEJ,GAAI4B,IAAe3D,EAAa,CAE9B,MAAM+D,EAAeD,EAAY1B,KAAM4B,GAChB,4BAArBA,EAAO/F,KAAKR,MAGd,GAAIsG,EAAc,CAChB,MAAME,EAAeF,EAAa9F,KAAKM,SACjCmE,EAAeZ,EAAMI,QAAQE,KAAM7F,GAAWA,EAAOmB,KAAOmG,GAC5DlB,EAAab,EAAMI,QAAQE,KAAM7F,GAAWA,EAAOmB,KAAOuG,GAChE,GAAIvB,GAAgBC,EAAY,CAC9B,MAAMuB,EAAaJ,EAAY1B,KAAM4B,GACnCA,EAAO/F,KAAKR,OAASuC,GAAegE,EAAO/F,KAAKP,KAAOkG,GAGzD,IAAIxC,EAAsBuB,EAAWnG,QAAQkD,OAC7C,GAAIwE,EAAY,CAEd,MAAMC,EAAYD,EAAWjG,KAAKtB,MAElCyE,EAA+B,WADlBgD,EAAmBF,EAAWjG,MACDkG,EAAY,EAAIA,CAC3D,CAED,MAAME,EAAeR,IAAmBI,EAClCK,EAAkBtD,EAAiC,CACvDE,UAAWmD,EAAe3B,EAAalG,QAAQkD,OAASiD,EAAWnG,QAAQkD,OAC3EyB,cACAC,sBACAC,WAAYgD,IAGdtC,EAAc,CACZxD,SAAU0F,EACVtH,MAAO2H,EAEV,CACF,CACF,MAAM,GAAIX,IAAetH,EAAe,CAEvC,MAAM0H,EAAeD,EAAY1B,KAAM4B,GACrCA,EAAO/F,KAAKR,OAASpB,GAAiB2H,EAAO/F,KAAKP,KAAOkG,GAG3D,GAAIG,EAAc,CAChB,MAAMI,EAAYJ,EAAa9F,KAAKtB,MAC9B4H,EAAOH,EAAmBL,EAAa9F,MACvCmD,EACK,WAATmD,GAA8B,UAATA,EAAmBJ,EAAY,EAAIA,EAE1DpC,EAAc,CACZpF,MAAOqE,EAAiC,CACtCE,UAAWY,EAAMI,QAAQxC,OACzByB,cACAC,sBACAC,YAAY,IAGjB,CACF,CAED,MAAMV,EAAqB,CACzBlD,KAAMkG,IAAe3D,EAAc,OAAS,SAC5C3B,OAAQ,CACNE,SAAUsF,EACVlH,MAAOwE,GAETY,cACAgB,YAAaa,GAGfR,EAAa,CACXC,WAAY,KACZC,aAAc,KACdjF,OAAQ,KACR0D,YAAa,OAGfkB,EAAUtC,EAAQmB,EACnB,KAIF,CAACoB,EAAUvF,EAAasF,EAAWnB,IAE/BqB,CACT,CC5IM,SAAUqB,GAAY1C,MAC1BA,EAAKmB,UACLA,EAAStF,YACTA,EAAW8G,aACXA,EAAYC,WACZA,EAAUC,WACVA,EAAUC,aACVA,EAAYlI,eACZA,EAAcmI,UACdA,EAAS1F,MACTA,IAEA,MAAMgE,EAAYH,EAAa,CAC7BlB,QACAmB,YACAtF,cACAuF,UAAU,IAGN4B,EAAeC,EACnB,KAAO,CACLjD,QACAqB,YACAzG,mBAEF,CAACoF,EAAOqB,EAAWzG,IAMfsI,EAAmBL,GAHC,CAACzE,GAAqBA,EAAKxC,IAI/CuH,EAAqBL,GAHC,CAACrI,GAAyBA,EAAOmB,IAK7D,OACEmC,gBAAC1D,EAAc+I,SAAS,CAAAC,MAAOL,GAC7BjF,EACEC,cAAA,MAAA,CAAA+E,UAAWA,EACX1F,MACE6C,OAAAC,OAAA,CAAAmD,QAAS,OACTC,IAAK,QACFlG,IAGJ2C,EAAMI,QAAQK,IAAI,CAAChG,EAAQ+I,IAC1BzF,EAACC,cAAAxD,GACCiJ,IAAKN,EAAmB1I,GACxBA,OAAQA,EACRC,QAASD,EAAOC,QAChBG,MAAO2I,EACP5I,eAAgBA,eAAAA,EAAiBH,EAAOmB,GAAI,WAE3C,CAAC8H,EAAgBC,IAChB5F,EAAAC,cAAA,MAAAkC,OAAAC,OAAA,CACEyD,IAAKF,EAAe7F,UAChB6F,EAAetG,gBACnBC,MAAK6C,OAAAC,OAAA,CACH0D,SAAU,QACVP,QAAS,OACTQ,cAAe,UACZJ,EAAetG,eAAeC,SAInCU,EAAAC,cAAA,MAAAkC,OAAAC,OAAA,CAAA,EAASuD,EAAelG,iBACrBmF,EAAalI,EAAQiJ,EAAgBC,IAIxC5F,EAAAC,cAAA,MAAA,CACE4F,IAAKF,EAAe1I,YACpBqC,MAAO,CACL0G,KAAM,EACNC,UAAW,QACXV,QAAS,OACTQ,cAAe,SACfP,IAAK,QAGN9I,EAAOC,QAAQ+F,IAAI,CAACE,EAAQsD,KAC3B,MAAM7F,EAAO4B,EAAMkE,MAAMvD,GACzB,OAAKvC,EAGHL,EAAAC,cAACG,EAAc,CACbsF,IAAKP,EAAiB9E,GACtBA,KAAMA,EACNvD,MAAOoJ,EACPxH,SAAUhC,EAAOmB,GACjBhB,eAAgBA,aAAA,EAAAA,EAAiBwD,EAAKxC,GAAI,SAEzC,CAACuI,EAAcC,IACdrG,EAAAC,cAAA,MAAAkC,OAAAC,OAAA,CACEyD,IAAKO,EAAatG,UACdsG,EAAa/G,eACb+G,EAAa3G,iBAEhBoF,EAAWxE,EAAM+F,EAAcC,KAhBtB,YA8BtC,CCjHA,MAAMC,EAAmC,CACvCC,UAAW,GACXC,SAAU,GACVC,SAAS,GAML,SAAUC,EACdC,EACAzJ,EACA0J,EAAoC,CAAA,GAEpC,MAAML,UAAEA,EAASC,SAAEA,EAAQC,QAAEA,GAAStE,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAQkE,GAAmBM,GAC3DC,EAAS7J,IACT8J,EAAkB9J,EAAwC,MAE1D+J,EAAkBvJ,EACrBwJ,IACCF,EAAgB/H,QAAU,CAAEkI,EAAGD,EAAME,QAASC,EAAGH,EAAMI,UAEzD,IAGIC,EAAgB7J,EAAY,KAChC,KAAKiJ,GAAYvJ,GAAeyJ,EAAa5H,SAAY+H,EAAgB/H,SACvE,OAGF,MACMuI,ECzBJ,SAA0B7J,GAC9B,IAAKA,EAAS,OAAO,KAErB,IAAI8J,EAAS9J,EAAQ+J,cAErB,KAAOD,GAAQ,CACb,MAAME,SAAEA,EAAQC,UAAEA,GAAcC,OAAOC,iBAAiBL,GACxD,GAAI,gBAAgBM,KAAKJ,EAAWC,GAClC,OAAOH,EAETA,EAASA,EAAOC,aACjB,CAED,OAAOM,SAASC,eAClB,CDWyBC,CADHrB,EAAa5H,SAE/B,IAAKuI,EAAc,OAEnB,MAAMW,EAAOX,EAAaY,wBACpBC,EAAWrB,EAAgB/H,QAC3BqJ,ECIJ,SAAuB3K,GAI3B,MAAMgK,SAAEA,EAAQC,UAAEA,EAASW,UAAEA,GAAcV,OAAOC,iBAAiBnK,GAE7D6K,EAAoB,gBAAgBT,KAAKJ,EAAWC,GACpDa,EAAsB,gBAAgBV,KAAKJ,EAAWY,GAE5D,MAAO,CACLG,SAAUF,GAAqB7K,EAAQgL,aAAehL,EAAQiL,aAC9DC,WAAYJ,GAAuB9K,EAAQmL,YAAcnL,EAAQoL,YAErE,CDjB0BC,CAAaxB,GAE7ByB,WENRC,EACAf,EACA1B,GAEA,MAAM0C,EAtCQ,SACdD,EACAf,GAOA,MAAO,CACLiB,IAAKF,EAAM7B,EAAIc,EAAKiB,IACpBC,MAAOlB,EAAKkB,MAAQH,EAAM/B,EAC1BmC,OAAQnB,EAAKmB,OAASJ,EAAM7B,EAC5BkC,KAAML,EAAM/B,EAAIgB,EAAKoB,KAEzB,CAuBoBC,CAAeN,EAAOf,GAExC,IAAK,MAAOvD,EAAM6E,KAAapH,OAAOqH,QAAQP,GAC5C,GAAIM,EAAWhD,EACb,MAAO,CACL7B,KAAMA,EACN6E,YAKN,MAAO,CAAE7E,KAAM,KAAM6E,SAAUE,IACjC,CFVqBC,CAAWvB,EAAUF,EAAM1B,GAE5C,GAAIwC,EAASrE,KAAM,CACjB,MAAMiF,WEcVJ,EACAhD,EACAC,GAEA,OAAI+C,GAAYhD,EAAkB,GACnBA,EAAYgD,GAAYhD,EACxBC,CACjB,CFrBoBoD,CAAqBb,EAASQ,SAAUhD,EAAWC,GAE3DqD,EAAQ,CAAE5C,EAAG,EAAGE,EAAG,GAErBiB,EAAcI,WACM,QAAlBO,EAASrE,KACXmF,EAAM1C,GAAKwC,EACgB,WAAlBZ,EAASrE,OAClBmF,EAAM1C,EAAIwC,IAIVvB,EAAcO,aACM,SAAlBI,EAASrE,KACXmF,EAAM5C,GAAK0C,EACgB,UAAlBZ,EAASrE,OAClBmF,EAAM5C,EAAI0C,IAIE,IAAZE,EAAM5C,GAAuB,IAAZ4C,EAAM1C,GCpCjB,SACd1J,EACAoM,GAEIA,EAAM5C,IACRxJ,EAAQqM,YAAcD,EAAM5C,GAE1B4C,EAAM1C,IACR1J,EAAQsM,WAAaF,EAAM1C,EAE/B,CD2BQ6C,CAAS1C,EAAcuC,EAE1B,CAEDhD,EAAO9H,QAAUkL,sBAAsB5C,IACtC,CAACZ,EAASvJ,EAAYyJ,EAAcJ,EAAWC,IAElD3H,EAAU,IACH4H,GAAYvJ,GASjByK,OAAOuC,iBAAiB,YAAanD,GACrCF,EAAO9H,QAAUkL,sBAAsB5C,GAEhC,KACLM,OAAOwC,oBAAoB,YAAapD,GACpCF,EAAO9H,SACTqL,qBAAqBvD,EAAO9H,YAd1B8H,EAAO9H,UACTqL,qBAAqBvD,EAAO9H,SAC5B8H,EAAO9H,aAAUS,QAEnBsH,EAAgB/H,QAAU,OAa3B,CAAC0H,EAASvJ,EAAY6J,EAAiBM,GAC5C,CGxFA,MAAMgD,EAAmB9N,EAA4C,eAKrD+N,IACd,MAAMC,EAAUC,EAAWH,GAC3B,IAAKE,EACH,MAAM,IAAIE,MAAM,sDAElB,OAAOF,CACT,CAeM,SAAUG,GAAkB9N,SAChCA,EAAQ+N,WACRA,EAAa,WAEb,MAAMC,EAAY5N,EAAuB,MACnC6N,EAAe7N,EAAuB,MACtC8N,EAAa9N,IAuBnB6B,EAAU,IACD,KACDiM,EAAW/L,SACbgM,aAAaD,EAAW/L,UAG3B,IAEH,MAAMuG,EAA+B,CACnC0F,SA9Be,CAACC,EAAiBC,EAA6CP,KAC9E,MAAMQ,EAAmC,cAAvBD,EAAqCL,EAAeD,EAEjEO,EAAUpM,UAGX+L,EAAW/L,SACbgM,aAAaD,EAAW/L,SAI1BoM,EAAUpM,QAAQqM,YAAc,GAGhCN,EAAW/L,QAAUsM,WAAW,KAC1BF,EAAUpM,UACZoM,EAAUpM,QAAQqM,YAAcH,IAEjC,QAeL,OACEjL,gBAACqK,EAAiBhF,SAAS,CAAAC,MAAOA,GAC/B1I,EAEDoD,EAAAC,cAAA,MAAA,CACE4F,IAAK+E,EACLjL,KAAK,SAAQ,YACH,SAAQ,cACN,OACZL,MAAO,CACLgM,SAAU,WACVC,MAAO,MACPC,OAAQ,MACRC,QAAS,IACTC,OAAQ,OACRjE,SAAU,SACVkE,KAAM,mBACNC,WAAY,SACZC,OAAQ,OAIZ7L,EAAAC,cAAA,MAAA,CACE4F,IAAKgF,EACLlL,KAAK,QAAO,YACF,YAAW,cACT,OACZL,MAAO,CACLgM,SAAU,WACVC,MAAO,MACPC,OAAQ,MACRC,QAAS,IACTC,OAAQ,OACRjE,SAAU,SACVkE,KAAM,mBACNC,WAAY,SACZC,OAAQ,OAKlB,CAKa,MAAAC,EAAgB,CAC3BhO,YAAa,CAACiO,EAAkBT,EAAkBU,IAChD,aAAaD,eAAsBT,EAAW,QAAQU,KAExDC,WAAY,CAACF,EAAkBG,EAAqBF,IAClD,GAAGD,uBAA8BG,EAAc,QAAQF,KAEzD5I,UAAW,CAAC2I,EAAkB/K,EAAcmL,EAAYb,IACtDtK,IAASmL,EACL,GAAGJ,uBAA8BT,EAAW,QAAQa,KACpD,GAAGJ,gBAAuB/K,QAAWmL,eAAgBb,EAAW,KAEtEc,aAAc,CAACL,EAAkBrP,IAC/B,mBAAmBqP,iBAAwBrP,KAE7C2P,aAAc,CAACC,EAAoBhB,EAAkBiB,IACnD,GAAGD,uBAAgChB,EAAW,QAAQiB"}
package/dist/kanban.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";var e=require("react"),t=require("@atlaskit/pragmatic-drag-and-drop/element/adapter"),n=require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge"),r=require("@atlaskit/pragmatic-drag-and-drop/combine");const a=e.createContext(null),o="kanban-column";function i({column:r,cardIds:a,children:i,isDragDisabled:d=!1,index:s}){const c=e.useRef(null),l=e.useRef(null),[u,g]=e.useState(!1),[m,p]=e.useState(!1),f=e.useCallback(e=>d?()=>{}:t.draggable({element:e,getInitialData:()=>({type:o,id:r.id,index:s}),onDragStart:()=>g(!0),onDrop:()=>g(!1)}),[r.id,s,d]),b=e.useCallback(e=>d?()=>{}:t.dropTargetForElements({element:e,getData:({input:e,element:t})=>{const a={type:o,id:r.id,index:s};return n.attachClosestEdge(a,{input:e,element:t,allowedEdges:["left","right"]})},canDrop:({source:e})=>e.data.type===o&&e.data.id!==r.id}),[r.id,s,d]),x=e.useCallback(e=>t.dropTargetForElements({element:e,getData:()=>({type:"kanban-column-drop-zone",columnId:r.id}),canDrop:({source:e})=>"kanban-card"===e.data.type,onDragEnter:()=>p(!0),onDragLeave:()=>p(!1),onDrop:()=>p(!1)}),[r.id]);e.useEffect(()=>{const e=c.current,t=l.current;if(!e||!t)return;const n=[f(e),b(e),x(t)];return()=>{n.forEach(e=>e())}},[f,b,x]);const D={draggableProps:{"data-draggable-id":r.id,"data-draggable-type":"COLUMN",style:u?{opacity:.5}:void 0},dragHandleProps:{tabIndex:0,role:"button","aria-roledescription":"draggable column","aria-label":`${r.title}, ${a.length} cards, press space to pick up`},innerRef:c,dropZoneRef:l},y={isDragging:u,isDraggingOver:m};return e.createElement(e.Fragment,null,i(D,y))}const d="kanban-card";function s({card:a,children:o,isDragDisabled:i=!1,index:s,columnId:c}){const l=e.useRef(null),[u,g]=e.useState(!1),[m,p]=e.useState(!1),f=e.useCallback(e=>i?()=>{}:t.draggable({element:e,getInitialData:()=>({type:d,id:a.id,index:s,columnId:c}),onDragStart:()=>g(!0),onDrop:()=>g(!1)}),[a.id,s,c,i]),b=e.useCallback(e=>i?()=>{}:t.dropTargetForElements({element:e,getData:({input:e,element:t})=>{const r={type:d,id:a.id,index:s,columnId:c};return n.attachClosestEdge(r,{input:e,element:t,allowedEdges:["top","bottom"]})},canDrop:({source:e})=>e.data.type===d&&e.data.id!==a.id,onDragEnter:()=>p(!0),onDragLeave:()=>p(!1),onDrop:()=>p(!1)}),[a.id,s,c,i]);e.useEffect(()=>{const e=l.current;if(e&&!i)return r.combine(f(e),b(e))},[f,b,i]);const x={draggableProps:{"data-draggable-id":a.id,"data-draggable-type":"CARD",style:u?{opacity:.5}:void 0},dragHandleProps:{tabIndex:0,role:"button","aria-roledescription":"draggable card","aria-label":`${a.title}, press space to pick up`},innerRef:l},D={isDragging:u,isDraggingOver:m};return e.createElement(e.Fragment,null,o(x,D))}function c(e,t,n){const r=Array.from(e),[a]=r.splice(t,1);return r.splice(n,0,a),r}function l(e){const{itemCount:t,sourceIndex:n,rawDestinationIndex:r,isSameList:a}=e;if(t<=0)return 0;const o=t,i=Math.max(0,Math.min(r,o)),d=a&&n<i?i-1:i,s=a?t-1:t;return Math.max(0,Math.min(d,s))}const u="kanban-card",g="kanban-column";function m({onDragStart:r,onDragEnd:a,state:o,disabled:i}){const[d,s]=e.useState({draggingId:null,draggingType:null,source:null,destination:null});return e.useEffect(()=>{if(i)return;return t.monitorForElements({onDragStart({source:e}){const t=e.data.type,n=e.data.id,a=e.data.columnId,o=e.data.index,i=t===u?"CARD":"COLUMN",d={columnId:"CARD"===i?a:void 0,index:o};s({draggingId:n,draggingType:i,source:d,destination:d}),null==r||r({id:n,type:i})},onDrop({source:e,location:t}){const r=e.data.type,i=e.data.id,d=e.data.index,c=e.data.columnId,m=t.current.dropTargets;let p;if(r===u){const e=m.find(e=>"kanban-column-drop-zone"===e.data.type);if(e){const t=e.data.columnId,r=o.columns.find(e=>e.id===c),a=o.columns.find(e=>e.id===t);if(r&&a){const e=m.find(e=>e.data.type===u&&e.data.id!==i);let o=a.cardIds.length;if(e){const t=e.data.index;o="bottom"===n.extractClosestEdge(e.data)?t+1:t}const s=c===t,g=l({itemCount:s?r.cardIds.length:a.cardIds.length,sourceIndex:d,rawDestinationIndex:o,isSameList:s});p={columnId:t,index:g}}}}else if(r===g){const e=m.find(e=>e.data.type===g&&e.data.id!==i);if(e){const t=e.data.index,r=n.extractClosestEdge(e.data),a="bottom"===r||"right"===r?t+1:t;p={index:l({itemCount:o.columns.length,sourceIndex:d,rawDestinationIndex:a,isSameList:!0})}}}const f={type:r===u?"CARD":"COLUMN",source:{columnId:c,index:d},destination:p,draggableId:i};s({draggingId:null,draggingType:null,source:null,destination:null}),a(f,o)}})},[i,r,a,o]),d}const p={threshold:50,maxSpeed:20,enabled:!0};const f=e.createContext(null);exports.AnnouncerProvider=function({children:t,politeness:n="polite"}){const r=e.useRef(null),a=e.useRef(null),o=e.useRef();e.useEffect(()=>()=>{o.current&&clearTimeout(o.current)},[]);const i={announce:(e,t=n)=>{const i="assertive"===t?a:r;i.current&&(o.current&&clearTimeout(o.current),i.current.textContent="",o.current=setTimeout(()=>{i.current&&(i.current.textContent=e)},100))}};return e.createElement(f.Provider,{value:i},t,e.createElement("div",{ref:r,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:a,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"}}))},exports.KanbanBoard=function({state:t,onDragEnd:n,onDragStart:r,renderColumn:o,renderCard:d,getCardKey:c,getColumnKey:l,isDragDisabled:u,className:g,style:p}){const f=m({state:t,onDragEnd:n,onDragStart:r,disabled:!1}),b=e.useMemo(()=>({state:t,dragState:f,isDragDisabled:u}),[t,f,u]),x=c||(e=>e.id),D=l||(e=>e.id);return e.createElement(a.Provider,{value:b},e.createElement("div",{className:g,style:Object.assign({display:"flex",gap:"16px"},p)},t.columns.map((n,r)=>e.createElement(i,{key:D(n),column:n,cardIds:n.cardIds,index:r,isDragDisabled:null==u?void 0:u(n.id,"COLUMN")},(r,a)=>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),o(n,r,a)),e.createElement("div",{ref:r.dropZoneRef,style:{flex:1,minHeight:"100px",display:"flex",flexDirection:"column",gap:"8px"}},n.cardIds.map((r,a)=>{const o=t.cards[r];return o?e.createElement(s,{key:x(o),card:o,index:a,columnId:n.id,isDragDisabled:null==u?void 0:u(o.id,"CARD")},(t,n)=>e.createElement("div",Object.assign({ref:t.innerRef},t.draggableProps,t.dragHandleProps),d(o,t,n))):null})))))))},exports.KanbanCardView=s,exports.KanbanColumnView=i,exports.announcements={onDragStart:(e,t,n)=>`Picked up ${e}. Position ${t+1} of ${n}.`,onDragMove:(e,t,n)=>`${e} moved to position ${t+1} of ${n}.`,onDragEnd:(e,t,n,r)=>t===n?`${e} dropped. Position ${r+1} in ${n}.`:`${e} moved from ${t} to ${n}. Position ${r+1}.`,onDragCancel:(e,t)=>`Drag cancelled. ${e} returned to ${t}.`,onColumnMove:(e,t,n)=>`${e} moved to position ${t+1} of ${n}.`},exports.applyDragResult=function(e,t){if(!t.destination)return e;const{source:n,destination:r,type:a}=t;return"COLUMN"===a?n.index===r.index?e:function(e,t,n){return Object.assign(Object.assign({},e),{columns:c(e.columns,t,n)})}(e,n.index,r.index):"CARD"===a?n.columnId===r.columnId?n.index===r.index?e:function(e,t,n,r){const a=e.columns.find(e=>e.id===t);if(!a)return e;const o=c(a.cardIds,n,r);return Object.assign(Object.assign({},e),{columns:e.columns.map(e=>e.id===t?Object.assign(Object.assign({},e),{cardIds:o}):e)})}(e,n.columnId,n.index,r.index):function(e,t,n,r){const a=e.columns.find(e=>e.id===t.columnId),o=e.columns.find(e=>e.id===n.columnId);if(!a||!o)return e;const i=[...a.cardIds];i.splice(t.index,1);const d=[...o.cardIds];return d.splice(n.index,0,r),Object.assign(Object.assign({},e),{columns:e.columns.map(e=>e.id===t.columnId?Object.assign(Object.assign({},e),{cardIds:i}):e.id===n.columnId?Object.assign(Object.assign({},e),{cardIds:d}):e)})}(e,n,r,t.draggableId):e},exports.reorderArray=c,exports.useAnnouncer=function(){const t=e.useContext(f);if(!t)throw new Error("useAnnouncer must be used within AnnouncerProvider");return t},exports.useAutoscroll=function(t,n,r={}){const{threshold:a,maxSpeed:o,enabled:i}=Object.assign(Object.assign({},p),r),d=e.useRef(),s=e.useRef(null),c=e.useCallback(e=>{s.current={x:e.clientX,y:e.clientY}},[]),l=e.useCallback(()=>{if(!(i&&n&&t.current&&s.current))return;const e=function(e){if(!e)return null;let t=e.parentElement;for(;t;){const{overflow:e,overflowY:n}=window.getComputedStyle(t);if(/(auto|scroll)/.test(e+n))return t;t=t.parentElement}return document.documentElement}(t.current);if(!e)return;const r=e.getBoundingClientRect(),c=s.current,u=function(e){const{overflow:t,overflowY:n,overflowX:r}=window.getComputedStyle(e),a=/(auto|scroll)/.test(t+n),o=/(auto|scroll)/.test(t+r);return{vertical:a&&e.scrollHeight>e.clientHeight,horizontal:o&&e.scrollWidth>e.clientWidth}}(e),g=function(e,t,n){const r=function(e,t){return{top:e.y-t.top,right:t.right-e.x,bottom:t.bottom-e.y,left:e.x-t.left}}(e,t);for(const[e,t]of Object.entries(r))if(t<n)return{edge:e,distance:t};return{edge:null,distance:1/0}}(c,r,a);if(g.edge){const t=function(e,t,n){return e>=t?0:(t-e)/t*n}(g.distance,a,o),n={x:0,y:0};u.vertical&&("top"===g.edge?n.y=-t:"bottom"===g.edge&&(n.y=t)),u.horizontal&&("left"===g.edge?n.x=-t:"right"===g.edge&&(n.x=t)),0===n.x&&0===n.y||function(e,t){t.x&&(e.scrollLeft+=t.x),t.y&&(e.scrollTop+=t.y)}(e,n)}d.current=requestAnimationFrame(l)},[i,n,t,a,o]);e.useEffect(()=>i&&n?(window.addEventListener("mousemove",c),d.current=requestAnimationFrame(l),()=>{window.removeEventListener("mousemove",c),d.current&&cancelAnimationFrame(d.current)}):(d.current&&(cancelAnimationFrame(d.current),d.current=void 0),void(s.current=null)),[i,n,c,l])},exports.useKanbanDnd=m;
2
+ //# sourceMappingURL=kanban.js.map