react-dragdrop-kit 1.0.0 → 1.2.0

package/dist/src/kanban/types.d.ts

@@ -0,0 +1,185 @@
+/**
+ * Kanban Board Types
+ *
+ * Type definitions for the Kanban board feature.
+ * Follows a normalized state pattern for efficient cross-column operations.
+ */
+import type React from 'react';
+export type Id = string;
+/**
+ * Represents a single card in the Kanban board
+ */
+export interface KanbanCard {
+    /** Unique identifier for the card */
+    id: Id;
+    /** Card title */
+    title: string;
+    /** Additional custom fields */
+    [key: string]: any;
+}
+/**
+ * Represents a column in the Kanban board
+ */
+export interface KanbanColumn {
+    /** Unique identifier for the column */
+    id: Id;
+    /** Column title */
+    title: string;
+    /** Ordered list of card IDs in this column */
+    cardIds: Id[];
+    /** Additional custom fields */
+    [key: string]: any;
+}
+/**
+ * Normalized state structure for the Kanban board
+ * Separates column ordering from card data for efficient updates
+ */
+export interface KanbanBoardState {
+    /** Ordered list of columns */
+    columns: KanbanColumn[];
+    /** Flat lookup object for all cards (by ID) */
+    cards: Record<Id, KanbanCard>;
+}
+/**
+ * Location within the Kanban board
+ */
+export interface DragLocation {
+    /** Column ID (undefined for column reorder operations) */
+    columnId?: Id;
+    /** Index within the column or board */
+    index: number;
+}
+/**
+ * Result of a drag-and-drop operation
+ * Similar to react-beautiful-dnd's DropResult for migration compatibility
+ */
+export interface DropResult {
+    /** Type of draggable that was moved */
+    type: 'CARD' | 'COLUMN';
+    /** Source location before drag */
+    source: DragLocation;
+    /** Destination location after drop (undefined if canceled) */
+    destination?: DragLocation;
+    /** ID of the dragged item */
+    draggableId: Id;
+}
+/**
+ * Props provided to render functions with drag-and-drop state and handlers
+ */
+export interface DragProvided {
+    /** Props to spread on the draggable element */
+    draggableProps: React.HTMLAttributes<HTMLElement> & {
+        'data-draggable-id': Id;
+        'data-draggable-type': 'CARD' | 'COLUMN';
+    };
+    /** Props to spread on the drag handle element (can be same as draggable) */
+    dragHandleProps: React.HTMLAttributes<HTMLElement> & {
+        tabIndex: number;
+        role: string;
+        'aria-roledescription': string;
+    };
+    /** Ref to attach to the draggable element */
+    innerRef: React.RefObject<HTMLElement>;
+}
+/**
+ * Snapshot of current drag state
+ */
+export interface DragSnapshot {
+    /** Whether this element is currently being dragged */
+    isDragging: boolean;
+    /** Whether a drag is happening over this drop zone */
+    isDraggingOver?: boolean;
+    /** ID of the item being dragged (if any) */
+    draggingId?: Id;
+}
+/**
+ * Props for KanbanBoard component
+ */
+export interface KanbanBoardProps {
+    /** Current board state (controlled) */
+    state: KanbanBoardState;
+    /** Callback fired when drag ends */
+    onDragEnd: (result: DropResult, stateBefore: KanbanBoardState) => void;
+    /** Callback fired when drag starts (optional) */
+    onDragStart?: (draggable: {
+        id: Id;
+        type: 'CARD' | 'COLUMN';
+    }) => void;
+    /** Render function for a column */
+    renderColumn: (column: KanbanColumn, provided: DragProvided, snapshot: DragSnapshot) => React.ReactNode;
+    /** Render function for a card */
+    renderCard: (card: KanbanCard, provided: DragProvided, snapshot: DragSnapshot) => React.ReactNode;
+    /** Custom key extractor for cards (default: card.id) */
+    getCardKey?: (card: KanbanCard) => string;
+    /** Custom key extractor for columns (default: column.id) */
+    getColumnKey?: (column: KanbanColumn) => string;
+    /** Callback to determine if a drag should be disabled */
+    isDragDisabled?: (id: Id, type: 'CARD' | 'COLUMN') => boolean;
+    /** Class name for the board container */
+    className?: string;
+    /** Inline styles for the board container */
+    style?: React.CSSProperties;
+}
+/**
+ * Props for KanbanColumnView (headless)
+ */
+export interface KanbanColumnViewProps {
+    /** Column data */
+    column: KanbanColumn;
+    /** Card IDs in this column */
+    cardIds: Id[];
+    /** Render prop with provided props and snapshot */
+    children: (provided: DragProvided, snapshot: DragSnapshot) => React.ReactNode;
+    /** Whether column dragging is disabled */
+    isDragDisabled?: boolean;
+    /** Column index in the board */
+    index: number;
+}
+/**
+ * Props for KanbanCardView (headless)
+ */
+export interface KanbanCardViewProps {
+    /** Card data */
+    card: KanbanCard;
+    /** Render prop with provided props and snapshot */
+    children: (provided: DragProvided, snapshot: DragSnapshot) => React.ReactNode;
+    /** Whether card dragging is disabled */
+    isDragDisabled?: boolean;
+    /** Card index within its column */
+    index: number;
+    /** Parent column ID */
+    columnId: Id;
+}
+/**
+ * Internal drag state managed by useKanbanDnd
+ */
+export interface KanbanDragState {
+    /** Currently dragging item ID */
+    draggingId: Id | null;
+    /** Type of item being dragged */
+    draggingType: 'CARD' | 'COLUMN' | null;
+    /** Source location */
+    source: DragLocation | null;
+    /** Current destination (updates during drag) */
+    destination: DragLocation | null;
+}
+/**
+ * Autoscroll configuration
+ */
+export interface AutoscrollConfig {
+    /** Distance from edge to trigger autoscroll (px) */
+    threshold: number;
+    /** Maximum scroll speed (px per frame) */
+    maxSpeed: number;
+    /** Whether autoscroll is enabled */
+    enabled: boolean;
+}
+/**
+ * Live region announcement
+ */
+export interface LiveAnnouncement {
+    /** Message to announce */
+    message: string;
+    /** Politeness level */
+    politeness: 'polite' | 'assertive';
+}

package/dist/src/kanban/utils/dndMath.d.ts

@@ -0,0 +1,61 @@
+/**
+ * DnD Math Utilities
+ *
+ * Helper functions for collision detection and positioning calculations.
+ */
+/**
+ * Calculate the distance from a point to a rectangle's edges
+ */
+export declare function distanceToEdge(point: {
+    x: number;
+    y: number;
+}, rect: DOMRect): {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+/**
+ * Get the closest edge of a rectangle to a point
+ */
+export declare function getClosestEdge(point: {
+    x: number;
+    y: number;
+}, rect: DOMRect): 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Check if a point is within a threshold distance from an edge
+ */
+export declare function isNearEdge(point: {
+    x: number;
+    y: number;
+}, rect: DOMRect, threshold: number): {
+    edge: 'top' | 'right' | 'bottom' | 'left' | null;
+    distance: number;
+};
+/**
+ * Calculate scroll speed based on distance from edge
+ * Closer to edge = faster scroll
+ */
+export declare function calculateScrollSpeed(distance: number, threshold: number, maxSpeed: number): number;
+/**
+ * Check if a point is inside a rectangle
+ */
+export declare function isPointInRect(point: {
+    x: number;
+    y: number;
+}, rect: DOMRect): boolean;
+/**
+ * Calculate the center point of a rectangle
+ */
+export declare function getRectCenter(rect: DOMRect): {
+    x: number;
+    y: number;
+};
+/**
+ * Calculate vertical drop position based on mouse Y relative to element center
+ */
+export declare function getVerticalDropPosition(mouseY: number, elementRect: DOMRect): 'top' | 'bottom';
+/**
+ * Calculate horizontal drop position based on mouse X relative to element center
+ */
+export declare function getHorizontalDropPosition(mouseX: number, elementRect: DOMRect): 'left' | 'right';

package/dist/src/kanban/utils/dom.d.ts

@@ -0,0 +1,62 @@
+/**
+ * DOM Utilities
+ *
+ * Helper functions for DOM measurements and manipulation.
+ */
+/**
+ * Safely get bounding client rect for an element
+ */
+export declare function getBoundingRect(element: HTMLElement | null): DOMRect | null;
+/**
+ * Get scrollable parent of an element
+ */
+export declare function getScrollParent(element: HTMLElement | null): HTMLElement | null;
+/**
+ * Scroll an element by a delta
+ */
+export declare function scrollBy(element: HTMLElement, delta: {
+    x?: number;
+    y?: number;
+}): void;
+/**
+ * Check if an element is scrollable
+ */
+export declare function isScrollable(element: HTMLElement): {
+    vertical: boolean;
+    horizontal: boolean;
+};
+/**
+ * Get element's scroll position
+ */
+export declare function getScrollPosition(element: HTMLElement): {
+    x: number;
+    y: number;
+};
+/**
+ * Get maximum scroll for an element
+ */
+export declare function getMaxScroll(element: HTMLElement): {
+    x: number;
+    y: number;
+};
+/**
+ * Clamp scroll position to valid range
+ */
+export declare function clampScroll(scroll: {
+    x: number;
+    y: number;
+}, maxScroll: {
+    x: number;
+    y: number;
+}): {
+    x: number;
+    y: number;
+};
+/**
+ * Get all data attributes from an element as an object
+ */
+export declare function getDataAttributes(element: HTMLElement): Record<string, string>;
+/**
+ * Find closest ancestor with a data attribute
+ */
+export declare function findClosestWithData(element: HTMLElement | null, dataKey: string): HTMLElement | null;

package/dist/src/kanban/utils/reorder.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Kanban Reorder Utilities
+ *
+ * Functions for reordering cards and columns in a Kanban board.
+ */
+import type { KanbanBoardState, DragLocation } from '../types';
+/**
+ * Reorder an array by moving an item from one index to another
+ */
+export declare function reorderArray<T>(list: T[], startIndex: number, endIndex: number): T[];
+/**
+ * Move a card within the same column
+ */
+export declare function reorderCardInColumn(state: KanbanBoardState, columnId: string, startIndex: number, endIndex: number): KanbanBoardState;
+/**
+ * Move a card from one column to another
+ */
+export declare function moveCardBetweenColumns(state: KanbanBoardState, source: DragLocation, destination: DragLocation, cardId: string): KanbanBoardState;
+/**
+ * Reorder columns
+ */
+export declare function reorderColumns(state: KanbanBoardState, startIndex: number, endIndex: number): KanbanBoardState;
+/**
+ * Apply a drag result to the board state
+ * This is a convenience function that handles all reorder cases
+ */
+export declare function applyDragResult(state: KanbanBoardState, result: {
+    type: 'CARD' | 'COLUMN';
+    source: DragLocation;
+    destination?: DragLocation;
+    draggableId: string;
+}): KanbanBoardState;

package/dist/{styles → src/styles}/defaultStyles.d.ts

@@ -58,4 +58,3 @@ export declare const defaultStyles: {
         transition: string;
     };
 };
-//# sourceMappingURL=defaultStyles.d.ts.map

package/dist/{types → src/types}/index.d.ts

@@ -26,6 +26,7 @@ export type DragDropListProps<T extends DraggableItem> = {
     showDropIndicator?: boolean;
     dropIndicatorClassName?: string;
     dropIndicatorStyle?: React.CSSProperties;
+    dropIndicatorPosition?: "top" | "bottom";
 };
 export type DraggableItemWrapperProps<T extends DraggableItem> = {
     item: T;
@@ -41,5 +42,5 @@ export type DraggableItemWrapperProps<T extends DraggableItem> = {
     showDropIndicator?: boolean;
     dropIndicatorClassName?: string;
     dropIndicatorStyle?: React.CSSProperties;
+    dropIndicatorPosition?: "top" | "bottom";
 };
-//# sourceMappingURL=index.d.ts.map

package/dist/{utils → src/utils}/order.d.ts

@@ -1,4 +1,3 @@
 import type { DraggableItem, OrderUpdate } from '../types';
 export declare function reorder<T>(list: T[], startIndex: number, endIndex: number): T[];
 export declare function calculateOrderUpdates<T extends DraggableItem>(oldItems: T[], newItems: T[]): OrderUpdate[];
-//# sourceMappingURL=order.d.ts.map

package/package.json

@@ -1,18 +1,23 @@
 {
   "name": "react-dragdrop-kit",
   "author": "Souvik Sen <https://github.com/Yourstruggle11>",
-  "version": "1.0.0",
-  "description": "A flexible, lightweight React drag-and-drop kit for building sortable lists, grids, and boards with ease.",
+  "version": "1.2.0",
+  "description": "A flexible, lightweight React drag-and-drop kit for building sortable lists, grids, and kanban boards with ease.",
   "license": "MIT",
 
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/src/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/src/index.d.ts",
       "import": "./dist/index.esm.js",
       "require": "./dist/index.js"
+    },
+    "./kanban": {
+      "types": "./dist/src/kanban/index.d.ts",
+      "import": "./dist/kanban.esm.js",
+      "require": "./dist/kanban.js"
     }
   },
   "files": ["dist", "README.md", "LICENSE"],
@@ -21,8 +26,9 @@
     "build": "rollup -c",
     "dev": "rollup -c -w",
     "test": "jest",
+    "typecheck": "tsc -p tsconfig.build.json --noEmit",
+    "build:types": "tsc -p tsconfig.build.json",
     "lint": "eslint src/**/*.{ts,tsx}",
-
     "sync-docs": "shx cp -f ../../README.md ./README.md && shx cp -f ../../LICENSE ./LICENSE",
     "prepack": "npm run build && npm run sync-docs",
     "postpack": "shx rm -f ./README.md ./LICENSE",
@@ -60,6 +66,9 @@
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.0.0",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^30.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
@@ -70,6 +79,7 @@
     "rollup": "^3.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "shx": "^0.4.0",
+    "ts-jest": "^29.4.1",
     "tslib": "^2.0.0",
     "typescript": "^5.0.0"
   },

package/dist/components/DragDropList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DragDropList.d.ts","sourceRoot":"","sources":["../../src/components/DragDropList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAIjE,wBAAgB,YAAY,CAAC,CAAC,SAAS,aAAa,EAAE,EACpD,KAAK,EACL,SAAS,EACT,UAAU,EACV,kBAAuB,EACvB,cAAmB,EACnB,aAAkB,EAClB,SAAc,EACd,oBAAyB,EACzB,gBAAqB,EACrB,WAAW,EACX,SAAS,EACT,QAAgB,EAChB,GAAG,EACH,SAAsB,EACtB,iBAAyB,EACzB,sBAA2B,EAC3B,kBAAuB,GACxB,EAAE,iBAAiB,CAAC,CAAC,CAAC,qBAwEtB"}

package/dist/components/DraggableItemWrapper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DraggableItemWrapper.d.ts","sourceRoot":"","sources":["../../src/components/DraggableItemWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAMxE,OAAO,KAAK,EAAE,yBAAyB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAKzE,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,aAAa,EAAE,EAC5D,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAc,EACd,KAAU,EACV,oBAAyB,EACzB,gBAAqB,EACrB,WAAW,EACX,SAAS,EACT,QAAgB,EAChB,iBAAyB,EACzB,sBAA2B,EAC3B,kBAAuB,GACxB,EAAE,yBAAyB,CAAC,CAAC,CAAC,qBAoK9B"}

package/dist/hooks/useDragDropMonitor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDragDropMonitor.d.ts","sourceRoot":"","sources":["../../src/hooks/useDragDropMonitor.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE3D,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,aAAa,EAAE,EAC1D,KAAK,EACL,SAAS,EACT,QAAgB,GACjB,EAAE;IACD,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,mFA4DA"}

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/styles/defaultStyles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"defaultStyles.d.ts","sourceRoot":"","sources":["../../src/styles/defaultStyles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DzB,CAAC"}

package/dist/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,aAAa,IAAI;IACvD,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IAChE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACxD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,yBAAyB,CAAC,CAAC,SAAS,aAAa,IAAI;IAC/D,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC1C,CAAC"}

package/dist/utils/order.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"order.d.ts","sourceRoot":"","sources":["../../src/utils/order.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE3D,wBAAgB,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,EAAE,CAK/E;AAED,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,aAAa,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,WAAW,EAAE,CAI1G"}