@formkit/drag-and-drop - npm Package Compare versions

Comparing version 0.1.6 to 0.2.0

846

index.d.ts

		@@ -25,2 +25,3 @@ /**
		}
		type NativeDragEffects = "link" \| "none" \| "copy" \| "move";
		/**
		@@ -30,8 +31,22 @@ * The configuration object for a given parent.
		interface ParentConfig<T> {
		[key: string]: any;
		/**
		* A function that returns whether a given parent accepts a given node.
		*/
		accepts?: (targetParentData: ParentRecord<T>, initialParentData: ParentRecord<T>, lastParentData: ParentRecord<T>, state: DragState<T> \| TouchState<T>) => boolean;
		accepts?: (targetParentData: ParentRecord<T>, initialParentData: ParentRecord<T>, currentParentData: ParentRecord<T>, state: BaseDragState<T>) => boolean;
		activeDescendantClass?: string;
		/**
		* The data transfer effect to use for the drag operation.
		*/
		dragEffectAllowed: NativeDragEffects;
		/**
		* The data transfer effect to use for the drag operation.
		*/
		dragDropEffect: NativeDragEffects;
		/**
		* A function that returns the image to use for the drag operation. This is
		* invoked for native operations. The clonedNode is what will be set as the drag
		* image, but this can be updated.
		*/
		dragImage?: (data: NodeDragEventData<T>, draggedNodes: Array<NodeRecord<T>>) => HTMLElement;
		/**
		* A flag to disable dragability of all nodes in the parent.
		@@ -48,2 +63,3 @@ */
		draggable?: (child: HTMLElement) => boolean;
		draggedNodes: (data: NodeEventData<T>) => Array<NodeRecord<T>>;
		/**
		@@ -54,2 +70,11 @@ * The class to add to a node when it is being dragged.
		/**
		* Accepts array of "dragged nodes" and applies dragstart classes to them.
		*/
		dragstartClasses: (node: NodeRecord<T>, nodes: Array<NodeRecord<T>>, config: ParentConfig<T>, isSynthDrag?: boolean) => void;
		dragPlaceholderClass?: string;
		/**
		* The configuration object for the drop and swap plugin.
		*/
		dropSwapConfig?: DropSwapConfig<T>;
		/**
		* The class to add to a node when the node is dragged over it.
		@@ -59,2 +84,6 @@ */
		/**
		* The class to add to a parent when it is dragged over.
		*/
		dropZoneParentClass?: string;
		/**
		* A flag to indicate whether the parent itself is a dropZone.
		@@ -68,26 +97,49 @@ */
		group?: string;
		handleParentBlur: (data: ParentEventData<T>, state: BaseDragState<T>) => void;
		handleParentFocus: (data: ParentEventData<T>, state: BaseDragState<T>) => void;
		handleNodeKeydown: (data: NodeEventData<T>, state: DragState<T>) => void;
		handleParentKeydown: (data: ParentKeydownEventData<T>, state: DragState<T>) => void;
		/**
		* Function that is called when dragend or touchend event occurs.
		*/
		handleEnd: (data: NodeDragEventData<T> \| NodeTouchEventData<T>) => void;
		handleDragend: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		/**
		* Function that is called when dragstart event occurs.
		*/
		handleDragstart: (data: NodeDragEventData<T>) => void;
		handleDragstart: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		handleEnd: (state: DragState<T> \| SynthDragState<T>) => void;
		handleNodeDrop: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		handleNodePointerup: (data: NodePointerEventData<T>, state: DragState<T>) => void;
		handleParentScroll: (data: ParentEventData<T>, state: DragState<T> \| BaseDragState<T> \| SynthDragState<T>) => void;
		/**
		* Function that is called when touchstart event occurs.
		*/
		handleTouchstart: (data: NodeTouchEventData<T>) => void;
		handleNodeTouchstart: (data: NodePointerEventData<T>, state: DragState<T>) => void;
		/**
		* Function that is called when a dragenter event is triggered on the node.
		*/
		handleNodeDragenter: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		/**
		* Dragleave event on node
		*/
		handleNodeDragleave: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		/**
		* Function that is called when a dragover event is triggered on the parent.
		*/
		handleDragoverParent: (data: ParentDragEventData<T>) => void;
		handleParentDragover: (data: ParentDragEventData<T>, state: DragState<T>) => void;
		/**
		* Drop event on parent
		*/
		handleParentDrop: (data: ParentDragEventData<T>, state: DragState<T>) => void;
		/**
		* Function that is called when a dragover event is triggered on a node.
		*/
		handleDragoverNode: (data: NodeDragEventData<T>) => void;
		handleNodeDragover: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		handlePointercancel: (data: NodeDragEventData<T> \| NodePointerEventData<T>, state: DragState<T> \| SynthDragState<T> \| BaseDragState<T>) => void;
		handleNodePointerdown: (data: NodePointerEventData<T>, state: DragState<T>) => void;
		/**
		* Function that is called when a touchmove event is triggered on a node.
		* Function that is called when either a pointermove or touchmove event is fired
		* where now the "dragged" node is being moved programatically.
		*/
		handleTouchmove: (data: NodeTouchEventData<T>) => void;
		handleNodePointermove: (data: NodePointerEventData<T>, state: DragState<T>) => void;
		/**
		@@ -97,3 +149,3 @@ * Function that is called when a node that is being moved by touchmove event
		*/
		handleTouchOverNode: (data: TouchOverNodeEvent<T>) => void;
		handleNodePointerover: (data: PointeroverNodeEvent<T>, state: SynthDragState<T>) => void;
		/**
		@@ -103,15 +155,19 @@ * Function that is called when a node that is being moved by touchmove event
		*/
		handleTouchOverParent: (e: TouchOverParentEvent<T>) => void;
		handleParentPointerover: (e: PointeroverParentEvent<T>, state: SynthDragState<T>) => void;
		/**
		* Config option for insert plugin.
		*/
		insertConfig?: InsertConfig<T>;
		/**
		* A flag to indicate whether long touch is enabled.
		*/
		longTouch?: boolean;
		longPress?: boolean;
		/**
		* The class to add to a node when a long touch action is performed.
		*/
		longTouchClass?: string;
		longPressClass?: string;
		/**
		* The time in milliseconds to wait before a long touch is performed.
		*/
		longTouchTimeout?: number;
		longPressTimeout?: any;
		/**
		@@ -121,10 +177,27 @@ * The name of the parent (used for accepts function for increased specificity).
		name?: string;
		multiDrag?: boolean;
		/**
		* If set to false, the library will not use the native drag and drop API.
		*/
		nativeDrag?: boolean;
		/**
		* Function that is called when a sort operation is to be performed.
		*/
		performSort: (state: DragState<T> \| TouchState<T>, data: NodeDragEventData<T> \| NodeTouchEventData<T>) => void;
		performSort: ({ parent, draggedNodes, targetNode, }: {
		parent: ParentRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		targetNode: NodeRecord<T>;
		}) => void;
		/**
		* Function that is called when a transfer operation is to be performed.
		*/
		performTransfer: (state: DragState<T> \| TouchState<T>, data: NodeEventData<T> \| ParentEventData<T>) => void;
		performTransfer: ({ currentParent, targetParent, initialParent, draggedNodes, initialIndex, state, targetNode, }: {
		currentParent: ParentRecord<T>;
		targetParent: ParentRecord<T>;
		initialParent: ParentRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		initialIndex: number;
		state: BaseDragState<T> \| DragState<T> \| SynthDragState<T>;
		targetNode?: NodeRecord<T>;
		}) => void;
		/**
		@@ -135,5 +208,14 @@ * An array of functions to use for a given parent.
		/**
		* Takes a given node and reapplies the drag classes.
		*/
		reapplyDragClasses: (node: Node, parentData: ParentData<T>) => void;
		/**
		* Invoked when the remapping of a given parent's nodes is finished.
		*/
		remapFinished: (data: ParentData<T>) => void;
		/**
		* The root element to use for the parent.
		*/
		root: Document \| ShadowRoot;
		selectedClass?: string;
		/**
		@@ -144,2 +226,6 @@ * Function that is called when a node is set up.
		/**
		* Called when the value of the parent is changed and the nodes are remapped.
		*/
		setupNodeRemap: SetupNode;
		/**
		* The scroll behavior of the parent.
		@@ -163,2 +249,12 @@ *
		/**
		* The class to add to a parent when it is dragged over.
		*/
		synthDropZoneParentClass?: string;
		/**
		* A function that returns the image to use for the drag operation. This is
		* invoked for synth drag operations operations. The clonedNode is what will
		* be set as the drag image, but this can be updated.
		*/
		synthDragImage?: (data: NodePointerEventData<T>, draggedNodes: Array<NodeRecord<T>>) => HTMLElement;
		/**
		* Function that is called when a node is torn down.
		@@ -168,2 +264,14 @@ */
		/**
		* Called when the value of the parent is changed and the nodes are remapped.
		*/
		tearDownNodeRemap: TearDownNode;
		/**
		* Property to identify the parent record who is the ancestor of the current parent.
		*/
		treeAncestor?: boolean;
		/**
		* Property to identify which group of tree descendants the current parent belongs to.
		*/
		treeGroup?: string;
		/**
		* The threshold for a drag to be considered a valid sort
		@@ -177,6 +285,39 @@ * operation.
		/**
		* The class to add to a node when it is being dragged via touch.
		* The class to add to a node when it is being synthetically dragged.
		*/
		touchDraggingClass?: string;
		touchDropZoneClass?: string;
		synthDraggingClass?: string;
		/**
		* On synth drag start, this is applied to the dragged node(s) (not their
		* representations being dragged).
		*/
		synthDragPlaceholderClass?: string;
		/**
		* When hovering over a node, this class is applied to the node.
		*/
		synthDropZoneClass?: string;
		/**
		* When a node receives focus, this class is applied to the node.
		*/
		synthActiveDescendantClass?: string;
		/**
		* Config option to allow recursive copying of computed styles of dragged
		* element to the cloned one that will be dragged (only for synthetic drag).
		*/
		deepCopyStyles?: boolean;
		/**
		* Callback function for when a sort operation is performed.
		*/
		onSort?: SortEvent;
		/**
		* Callback function for when a transfer operation is performed.
		*/
		onTransfer?: TransferEvent;
		/**
		* Fired when a drag is started, whether native drag or synthetic
		*/
		onDragstart?: DragstartEvent;
		/**
		* Fired when a drag is ended, whether native drag or synthetic
		*/
		onDragend?: DragendEvent;
		}
		@@ -207,2 +348,11 @@ /**
		abortControllers: Record<string, AbortController>;
		/**
		* The private classes of the node (used for preventing erroneous removal of
		* classes).
		*/
		privateClasses: Array<string>;
		/**
		* Set on parentData indicating that the current parent is nested beneath an ancestor.
		*/
		nestedParent?: ParentRecord<T>;
		}
		@@ -230,2 +380,17 @@ /**
		abortControllers: Record<string, AbortController>;
		/**
		* Set by the insertion plugin to define the coordinates for a given node.
		*/
		range?: {
		ascending?: {
		y: number[];
		x: number[];
		vertical: boolean;
		};
		descending?: {
		y: number[];
		x: number[];
		vertical: boolean;
		};
		};
		}
		@@ -252,9 +417,9 @@ /**
		/**
		* The data passed to the node event listener when the event is a touch event.
		* The data passed to the node event listener when the event is a pointer event (not a native drag event).
		*/
		interface NodeTouchEventData<T> extends NodeEventData<T> {
		interface NodePointerEventData<T> extends NodeEventData<T> {
		/**
		* The event that was triggered.
		*/
		e: TouchEvent;
		e: PointerEvent;
		/**
		@@ -265,2 +430,22 @@ * The data of the target node.
		}
		interface ParentPointerEventData<T> extends ParentEventData<T> {
		/**
		* The event that was triggered.
		*/
		e: PointerEvent;
		/**
		* The data of the target node.
		*/
		targetData: ParentTargetData<T>;
		}
		interface ParentKeydownEventData<T> extends ParentEventData<T> {
		/**
		* The event that was triggered.
		*/
		e: KeyboardEvent;
		/**
		* The data of the target node.
		*/
		targetData: ParentTargetData<T>;
		}
		/**
		@@ -347,6 +532,7 @@ * The data passed to the parent event listener.
		*/
		interface TouchOverNodeEvent<T> extends Event {
		interface PointeroverNodeEvent<T> extends Event {
		detail: {
		e: TouchEvent;
		e: PointerEvent;
		targetData: NodeTargetData<T>;
		state: SynthDragState<T>;
		};
		@@ -358,6 +544,7 @@ }
		*/
		interface TouchOverParentEvent<T> extends Event {
		interface PointeroverParentEvent<T> extends Event {
		detail: {
		e: TouchEvent;
		e: PointerEvent;
		targetData: ParentTargetData<T>;
		state: SynthDragState<T>;
		};
		@@ -405,2 +592,6 @@ }
		tearDownNodeRemap?: TearDownNode;
		/**
		* Called when all nodes have finished remapping for a given parent
		*/
		remapFinished?: () => void;
		}
		@@ -420,2 +611,6 @@ /**
		type TearDownNode = <T>(data: TearDownNodeData<T>) => void;
		type RemapFinished = <T>(data: RemapFinishedData<T>) => void;
		interface RemapFinishedData<T> {
		parent: ParentRecord<T>;
		}
		/**
		@@ -425,18 +620,4 @@ * The payload of when the setupNode function is called in a given plugin.
		interface SetupNodeData<T> {
		/**
		* The node that is being set up.
		*/
		node: Node;
		/**
		* The data of the node that is being set up.
		*/
		nodeData: NodeData<T>;
		/**
		* The parent of the node that is being set up.
		*/
		parent: HTMLElement;
		/**
		* The data of the parent of the node that is being set up.
		*/
		parentData: ParentData<T>;
		node: NodeRecord<T>;
		parent: ParentRecord<T>;
		}
		@@ -447,55 +628,10 @@ /**
		interface TearDownNodeData<T> {
		/**
		* The node that is being torn down.
		*/
		node: Node;
		/**
		* The data of the node that is being torn down.
		*/
		nodeData?: NodeData<T>;
		/**
		* The parent of the node that is being torn down.
		*/
		parent: HTMLElement;
		/**
		* The data of the parent of the node that is being torn down.
		*/
		parentData: ParentData<T>;
		node: {
		el: Node;
		data?: NodeData<T>;
		};
		parent: ParentRecord<T>;
		}
		type EventHandlers = Record<string, (e: Event) => void>;
		/**
		* The state of the current drag. TouchState is only created when a touch start
		* event has occurred.
		*/
		interface TouchState<T> extends DragState<T> {
		/**
		* A flag to indicate whether the dragged (touched) node is moving.
		*/
		touchMoving: boolean;
		/**
		* The left position of the touch start.
		*/
		touchStartLeft: number;
		/**
		* The top position of the touch start.
		*/
		touchStartTop: number;
		/**
		* The node that was most recently touched.
		*/
		touchedNode: HTMLElement;
		/**
		* The timeout for a long touch.
		*/
		longTouchTimeout: ReturnType<typeof setTimeout> \| undefined;
		/**
		* A flag to indicate whether a long touch has occurred.
		*/
		longTouch: boolean;
		/**
		* The display of the touched node.
		*/
		touchedNodeDisplay: string \| undefined;
		}
		/**
		* The state of the current drag. State is only created when a drag start
		@@ -516,3 +652,3 @@ * event is triggered.
		* @param initialParent - The parent that the dragged node was initially in.
		* @param lastParent - The parent that the dragged node was most recently in.
		* @param currentParent - The parent that the dragged node was most recently in.
		* @param lastValue - The last value of the dragged node.
		@@ -528,8 +664,35 @@ * @param originalZIndex - The original z-index of the dragged node.
		*/
		interface DragState<T> extends DragStateProps<T> {
		type SynthDragState<T> = SynthDragStateProps & DragState<T>;
		interface SynthDragStateProps {
		/**
		* The node that was most recently clicked (used optionally).
		* Element
		*/
		activeNode: NodeRecord<T> \| undefined;
		clonedDraggedNode: HTMLElement;
		/**
		* Direction of the synthetic drag scroll
		*/
		synthScrollDirection: "up" \| "down" \| "left" \| "right" \| undefined;
		/**
		* The display of the synthetic node.
		*/
		draggedNodeDisplay: string;
		/**
		* Flag indcating whether a scrollable el is being scrolled via.
		* synthetic drag.
		*/
		synthDragScrolling: boolean;
		/**
		* Pointer id of dragged el
		*/
		pointerId: number;
		scrollElement: HTMLElement \| undefined;
		animationFrameId: number \| undefined;
		}
		type DragState<T> = DragStateProps<T> & BaseDragState<T>;
		type BaseDragState<T> = {
		activeState?: {
		node: NodeRecord<T>;
		parent: ParentRecord<T>;
		};
		/**
		* The nodes that will be updated by a drag action (sorted).
		@@ -539,2 +702,29 @@ */
		/**
		* The last value the dragged node targeted.
		*/
		currentTargetValue: T \| undefined;
		emit: (event: string, data: unknown) => void;
		on: (event: string, callback: CallableFunction) => void;
		newActiveDescendant?: NodeRecord<T>;
		/**
		* The original z-index of the dragged node.
		*/
		originalZIndex?: string;
		pointerSelection: boolean;
		preventEnter: boolean;
		/**
		* Flag indicating that the remap just finished.
		*/
		remapJustFinished: boolean;
		selectedState?: {
		nodes: Array<NodeRecord<T>>;
		parent: ParentRecord<T>;
		};
		};
		interface DragStateProps<T> {
		/**
		* The nodes that will be updated by a drag action (sorted).
		*/
		affectedNodes: Array<NodeRecord<T>>;
		/**
		* Indicates whether the dragged node is moving to a node with a higher index
		@@ -557,2 +747,7 @@ * or not.
		/**
		* The parent that the dragged node was most recently in.
		*/
		currentParent: ParentRecord<T>;
		currentTargetValue: T \| undefined;
		/**
		* The node that is being dragged.
		@@ -566,2 +761,6 @@ */
		/**
		* Values to be inserted during sort and transfer operations.
		*/
		dynamicValues: Array<T>;
		/**
		* The direction that the dragged node is moving into a dragover node.
		@@ -579,31 +778,22 @@ */
		/**
		* The parent that the dragged node was most recently in.
		* longPress - A flag to indicate whether a long press has occurred.
		*/
		lastParent: ParentRecord<T>;
		longPress: boolean;
		/**
		* The last value of the dragged node.
		* Long press timeout
		*/
		lastValue: any;
		longPressTimeout: number;
		/**
		* The last value the dragged node targeted.
		* scrollEls
		*/
		lastTargetValue: any;
		scrollEls: Array<[HTMLElement, AbortController]>;
		/**
		* The original z-index of the dragged node.
		* The top position of pointerdown.
		*/
		originalZIndex: string \| undefined;
		startTop: number;
		/**
		* A flag to prevent a sort operation from firing until the mutation observer
		* has had a chance to update the data of the remapped nodes.
		* The left position of the pointerdown.
		*/
		preventEnter: boolean;
		startLeft: number;
		/**
		* Flag indicating that the remap just finished.
		*/
		remapJustFinished: boolean;
		/**
		* The nearest parent that is scrollable.
		*/
		scrollParent: HTMLElement;
		/**
		* The index of the node that the dragged node is moving into.
		@@ -617,27 +807,39 @@ */
		}
		interface DragStateProps<T> {
		coordinates: {
		x: number;
		y: number;
		};
		type SortEvent = <T>(data: SortEventData<T>) => void;
		type TransferEvent = <T>(data: TransferEventData<T>) => void;
		type DragstartEvent = <T>(data: DragstartEventData<T>, state: DragState<T>) => void;
		type DragendEvent = <T>(data: DragendEventData<T>) => void;
		interface SortEventData<T> {
		parent: ParentRecord<T>;
		previousValues: Array<T>;
		values: Array<T>;
		previousNodes: Array<NodeRecord<T>>;
		nodes: Array<NodeRecord<T>>;
		draggedNode: NodeRecord<T>;
		previousPosition: number;
		position: number;
		}
		interface TransferEventData<T> {
		sourceParent: ParentRecord<T>;
		targetParent: ParentRecord<T>;
		initialParent: ParentRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		initialIndex: number;
		initialParent: ParentRecord<T>;
		lastParent: ParentRecord<T>;
		scrollParent: HTMLElement;
		targetIndex: number;
		state: BaseDragState<T> \| DragState<T> \| SynthDragState<T>;
		targetNode?: NodeRecord<T>;
		}
		interface TouchStateProps {
		coordinates: {
		x: number;
		y: number;
		};
		touchedNode: HTMLElement;
		touchStartLeft: number;
		touchStartTop: number;
		touchMoving: boolean;
		scrollParent: HTMLElement;
		interface DragstartEventData<T> {
		parent: ParentRecord<T>;
		values: Array<T>;
		draggedNode: NodeRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		position: number;
		}
		interface ScrollData<T> {
		state: DragState<T> \| TouchState<T>;
		interface DragendEventData<T> {
		parent: ParentRecord<T>;
		values: Array<T>;
		draggedNode: NodeRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		}
		interface ScrollData {
		xThresh: number;
		@@ -649,137 +851,63 @@ yThresh: number;
		y: number;
		clientWidth: number;
		clientHeight: number;
		scrollHeight: number;
		scrollWidth: number;
		}
		interface Coordinates {
		top: number;
		bottom: number;
		left: number;
		right: number;
		height: number;
		width: number;
		height: number;
		}

		declare function throttle(callback: any, limit: number): (...args: any[]) => void;
		/**
		* Check to see if code is running in a browser.
		*
		* @internal
		*/
		declare const isBrowser: boolean;
		declare function addClass(els: Array<Node \| HTMLElement \| Element>, className: string \| undefined, omitAppendPrivateClass?: boolean): void;
		declare function removeClass(els: Array<Node \| HTMLElement \| Element>, className: string \| undefined): void;
		/**
		* Used for getting the closest scrollable parent of a given element.
		*
		* @param node - The element to get the closest scrollable parent of.
		*
		* @internal
		*/
		declare function getScrollParent(childNode: HTMLElement): HTMLElement;
		/**
		* Used for setting a single event listener on x number of events for a given
		* element.
		*
		* @param el - The element to set the event listener on.
		*
		* @param events - An array of events to set the event listener on.
		*
		* @param fn - The function to run when the event is triggered.
		*
		* @param remove - Whether or not to remove the event listener.
		*
		* @internal
		*/
		declare function events(el: Node \| HTMLElement, events: Array<string>, fn: any, remove?: boolean): void;
		declare function getElFromPoint<T>(eventData: NodeEventData<T>): NodeFromPoint<T> \| ParentFromPoint<T> \| undefined;
		/**
		* Checks to see that a given element and its parent node are instances of
		* HTML Elements.
		*
		* @param {unknown} el - The element to check.
		*
		* @returns {boolean} - Whether or not provided element is of type Node.
		*/
		declare function isNode(el: unknown): el is Node;
		/**
		* Takes a given el and event handlers, assigns them, and returns the used abort
		* controller.
		*
		* @param el - The element to add the event listeners to.
		* @param events - The events to add to the element.
		* @returns - The abort controller used for the event listeners.
		*/
		declare function addEvents(el: Document \| ShadowRoot \| Node \| HTMLElement, events: EventHandlers \| any): AbortController;
		declare function copyNodeStyle(sourceNode: Node, targetNode: Node, omitKeys?: boolean): void;
		declare function eventCoordinates(data: DragEvent \| TouchEvent): {
		x: number;
		y: number;
		};

		interface MultiDragConfig<T> {
		/**
		* Class added when a node is being dragged.
		*/
		draggingClass?: string;
		/**
		* Class added when a node is being dragged over a dropZone.
		*/
		dropZoneClass?: string;
		/**
		* Function to set which values of a given parent are "selected". This is
		* called on dragstart or touchstart.
		*/
		selections?: (parentValues: Array<T>, parent: HTMLElement) => Array<T>;
		/**
		* Class added when a node is being (touch) dragged.
		*/
		touchDraggingClass?: string;
		/**
		* Class added when a node is being (touch) dragged over a dropZone.
		*/
		touchDropZoneClass?: string;
		/**
		* Function that is called when dragend event occurrs event occurs.
		*/
		multiHandleEnd: (data: NodeDragEventData<T> \| NodeTouchEventData<T>) => void;
		/**
		* Function that is called when dragstart occurs.
		*/
		multiHandleDragstart: (data: NodeDragEventData<T>) => void;
		/**
		* Function that is called when dragstart event occurs.
		*/
		multiHandleTouchstart: (data: NodeTouchEventData<T>) => void;
		multiReapplyDragClasses: (data: NodeDragEventData<T> \| NodeTouchEventData<T>) => void;
		/**
		* An array of functions to use for a given parent.
		*/
		plugins?: Array<DNDPlugin>;
		type StateEvents = "start" \| "dragstart" \| "synthdragstart" \| "end" \| "dragend" \| "synthdragend";
		interface ShouldSwapData<T> {
		sourceParent: ParentRecord<T>;
		targetParent: ParentRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		targetNodes: Array<NodeRecord<T>>;
		state: BaseDragState<T> \| DragState<T> \| SynthDragState<T>;
		}
		interface MultiDragState<T> {
		selectedNodes: Array<NodeRecord<T>>;
		activeNode: NodeRecord<T> \| undefined;
		isTouch: boolean;
		interface DropSwapConfig<T> {
		shouldSwap?: (data: ShouldSwapData<T>) => boolean;
		handleNodeDragover?: (data: NodeDragEventData<unknown>, state: DragState<unknown>) => void;
		handleParentDragover?: (data: ParentDragEventData<unknown>, state: DragState<unknown>) => void;
		handleParentPointerover?: (e: PointeroverParentEvent<unknown>, state: DragState<unknown>) => void;
		handleNodePointerover?: (data: PointeroverNodeEvent<unknown>, state: SynthDragState<unknown>) => void;
		}
		interface DropSwapState {
		draggedOverNodes: Array<NodeRecord<unknown>>;
		initialDraggedIndex: number \| undefined;
		transferred: boolean;
		}
		interface InsertConfig<T> {
		insertPoint: (parent: ParentRecord<T>) => HTMLElement;
		insertEvent?: (data: InsertEvent<T>) => void;
		handleNodeDragover?: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		handleParentDragover?: (data: ParentDragEventData<T>, state: DragState<T>) => void;
		handleParentPointerover?: (data: PointeroverParentEvent<T>, state: SynthDragState<T>) => void;
		handleNodePointerover?: (data: PointeroverNodeEvent<T>, state: SynthDragState<T>) => void;
		handleEnd?: (data: NodeDragEventData<T> \| NodePointerEventData<T>) => void;
		}
		interface InsertState<T> {
		insertPoint: HTMLElement \| null;
		draggedOverNodes: Array<NodeRecord<T>>;
		draggedOverParent: ParentRecord<T> \| null;
		targetIndex: number;
		ascending: boolean;
		coordinates: {
		x: number;
		y: number;
		};
		}
		interface InsertEvent<T> {
		sourceParent: ParentRecord<T>;
		targetParent: ParentRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		targetNodes: Array<NodeRecord<T>>;
		state: BaseDragState<T> \| DragState<T> \| SynthDragState<T>;
		}

		declare const multiDragState: MultiDragState<any>;
		declare function multiDrag<T>(multiDragConfig?: Partial<MultiDragConfig<T>>): (parent: HTMLElement) => {
		setup(): void;
		tearDownNodeRemap<T>(data: TearDownNodeData<T>): void;
		tearDownNode<T_1>(data: TearDownNodeData<T_1>): void;
		setupNodeRemap<T_2>(data: SetupNodeData<T_2>): void;
		setupNode<T_3>(data: SetupNodeData<T_3>): void;
		} \| undefined;
		declare function multiReapplyDragClasses<T>(node: Node, parentData: ParentData<T>): void;
		declare function multiHandleEnd<T>(data: NodeEventData<T>): void;
		declare function selectionsEnd<T>(data: NodeEventData<T>, state: DragState<T> \| TouchState<T>): void;
		declare function multiHandleDragstart<T>(data: NodeEventData<T>): void;
		declare function multiDragstart<T>(data: NodeDragEventData<T>): void;
		declare function multiHandleTouchstart<T>(data: NodeEventData<T>): void;
		declare function multiTouchstart<T>(data: NodeTouchEventData<T>): void;
		declare function handleSelections<T>(data: NodeEventData<T>, selectedValues: Array<T>, state: DragState<T> \| TouchState<T>, x: number, y: number): {
		data: NodeEventData<T>;
		state: DragState<T> \| TouchState<T>;
		x: number;
		y: number;
		};
		declare function stackNodes<T>({ data, state, x, y, }: {
		data: NodeEventData<T>;
		state: DragState<T> \| TouchState<T>;
		x: number;
		y: number;
		}): void;

		interface AnimationsConfig {
		@@ -797,35 +925,29 @@ duration?: number;

		interface SelectionsConfig<T> {
		handleClick?: (data: NodeEventData<T>) => void;
		handleKeydown?: (data: NodeEventData<T>) => void;
		selectedClass?: string;
		clickawayDeselect?: boolean;
		}

		declare function selections<T>(selectionsConfig?: SelectionsConfig<T>): (parent: HTMLElement) => {
		declare function insert<T>(insertConfig: InsertConfig<T>): (parent: HTMLElement) => {
		teardown(): void;
		setup(): void;
		tearDown(): void;
		tearDownNode<T>(data: TearDownNodeData<T>): void;
		setupNode<T_1>(data: SetupNodeData<T_1>): void;
		remapFinished(): void;
		} \| undefined;

		interface SwapConfig<T> extends ParentConfig<T> {
		}
		declare function swap<T>(swapConfig?: Partial<SwapConfig<T>>): (parent: HTMLElement) => {
		declare function dropOrSwap<T>(dropSwapConfig?: DropSwapConfig<T>): (parent: HTMLElement) => {
		setup(): void;
		} \| undefined;

		interface PlaceConfig<T> extends ParentConfig<T> {
		}
		declare function place<T>(placeConfig?: Partial<PlaceConfig<T>>): (parent: HTMLElement) => {
		setup(): void;
		} \| undefined;

		/**
		* Check to see if code is running in a browser.
		*
		* @internal
		*/
		declare const isBrowser: boolean;
		declare const touchDevice: boolean;
		declare const nodes: NodesData<any>;
		declare const parents: ParentsData<any>;
		declare const treeAncestors: Record<string, HTMLElement>;
		declare function createEmitter(): ((eventName: string, data: any) => void)[];
		declare const emit: (eventName: string, data: any) => void;
		declare const on: (eventName: string, data: any) => void;
		/**
		* The state of the drag and drop. Is undefined until either dragstart or
		* touchstart is called.
		* The state of the drag and drop.
		*/
		declare let state: DragState<any> \| TouchState<any> \| undefined;
		declare let state: BaseDragState<unknown>;
		declare function resetState(): void;
		@@ -839,18 +961,7 @@ /**
		*/
		declare function setDragState<T>(dragStateProps: DragStateProps<T>): DragState<T>;
		declare function setTouchState<T>(dragState: DragState<T>, touchStateProps: TouchStateProps): TouchState<T>;
		declare function dragStateProps<T>(data: NodeDragEventData<T> \| NodeTouchEventData<T>): DragStateProps<T>;
		declare function performSort<T>(state: DragState<T> \| TouchState<T>, data: NodeDragEventData<T> \| NodeTouchEventData<T>): void;
		declare function parentValues<T>(parent: HTMLElement, parentData: ParentData<T>): Array<T>;
		declare function setParentValues<T>(parent: HTMLElement, parentData: ParentData<T>, values: Array<any>): void;
		declare function dragValues<T>(state: DragState<T> \| TouchState<T>): Array<T>;
		declare function setDragState<T>(dragStateProps: (SynthDragStateProps & DragStateProps<T>) \| DragStateProps<T> \| undefined): DragState<T> \| SynthDragState<T>;
		/**
		* Utility function to update parent config.
		*/
		declare function updateConfig<T>(parent: HTMLElement, config: Partial<ParentConfig<T>>): void;
		/**
		* Initializes the drag and drop functionality for a given parent.
		*
		* @param {DragAndDrop} dragAndDrop - The drag and drop configuration.
		* @param {HTMLElement} dragAndDrop.parent - The parent element.
		*
		@@ -860,3 +971,35 @@ * @returns void
		declare function dragAndDrop<T>({ parent, getValues, setValues, config, }: DragAndDrop<T>): void;
		declare function dragStateProps<T>(data: NodeDragEventData<T> \| NodePointerEventData<T>, draggedNodes: Array<NodeRecord<T>>): DragStateProps<T>;
		declare function performSort<T>({ parent, draggedNodes, targetNode, }: {
		parent: ParentRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		targetNode: NodeRecord<T>;
		}): void;
		declare function handleParentBlur<T>(_data: ParentEventData<T>, _state: BaseDragState<T> \| DragState<T> \| SynthDragState<T>): void;
		declare function handleParentFocus<T>(data: ParentEventData<T>, state: BaseDragState<T> \| DragState<T> \| SynthDragState<T>): void;
		declare function performTransfer<T>({ currentParent, targetParent, initialParent, draggedNodes, initialIndex, targetNode, state, }: {
		currentParent: ParentRecord<T>;
		targetParent: ParentRecord<T>;
		initialParent: ParentRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		initialIndex: number;
		state: BaseDragState<T> \| DragState<T> \| SynthDragState<T>;
		targetNode?: NodeRecord<T>;
		}): void;
		declare function parentValues<T>(parent: HTMLElement, parentData: ParentData<T>): Array<T>;
		declare function setParentValues<T>(parent: HTMLElement, parentData: ParentData<T>, values: Array<any>): void;
		declare function dragValues<T>(state: DragState<T>): Array<T>;
		/**
		* Utility function to update parent config.
		*/
		declare function updateConfig<T>(parent: HTMLElement, config: Partial<ParentConfig<T>>): void;
		declare function handleParentDrop<T>(data: ParentEventData<T>, state: DragState<T>): void;
		declare function tearDown(parent: HTMLElement): void;
		declare function isDragState<T>(state: BaseDragState<T>): state is DragState<T> \| SynthDragState<T>;
		declare function isSynthDragState<T>(state: BaseDragState<T>): state is SynthDragState<T>;
		declare function setAttrs(el: HTMLElement, attrs: Record<string, string>): void;
		declare function setupNode<T>(data: SetupNodeData<T>): void;
		declare function setupNodeRemap<T>(data: SetupNodeData<T>): void;
		declare function tearDownNodeRemap<T>(data: TearDownNodeData<T>): void;
		declare function tearDownNode<T>(data: TearDownNodeData<T>): void;
		/**
		@@ -873,25 +1016,39 @@ * Remaps the data of the parent element's children.
		declare function remapFinished(): void;
		declare function handleDragstart<T>(data: NodeEventData<T>): void;
		declare function dragstartClasses(el: HTMLElement \| Node \| Element, draggingClass: string \| undefined, dropZoneClass: string \| undefined): void;
		declare function initDrag<T>(eventData: NodeDragEventData<T>): DragState<T>;
		declare function dragstart<T>(data: NodeDragEventData<T>): void;
		declare function handleTouchOverNode<T>(e: TouchOverNodeEvent<T>): void;
		declare function setupNode<T>(data: SetupNodeData<T>): void;
		declare function setupNodeRemap<T>(data: SetupNodeData<T>): void;
		declare function tearDownNodeRemap<T>(data: TearDownNodeData<T>): void;
		declare function tearDownNode<T>(data: TearDownNodeData<T>): void;
		declare function handleEnd<T>(eventData: NodeEventData<T>): void;
		declare function end<T>(_eventData: NodeEventData<T>, state: DragState<T> \| TouchState<T>): void;
		declare function handleTouchstart<T>(eventData: NodeEventData<T>): void;
		declare function initTouch<T>(data: NodeTouchEventData<T>): TouchState<T>;
		declare function handleTouchedNode<T>(data: NodeTouchEventData<T>, touchState: TouchState<T>): void;
		declare function handleLongTouch<T>(data: NodeEventData<T>, touchState: TouchState<T>): void;
		declare function handleTouchmove<T>(eventData: NodeTouchEventData<T>): void;
		declare function handleDragoverNode<T>(data: NodeDragEventData<T>): void;
		declare function handleDragoverParent<T>(data: ParentEventData<T>): void;
		declare function handleTouchOverParent<T>(e: TouchOverParentEvent<T>): void;
		declare function validateTransfer<T>(data: ParentEventData<T>, state: DragState<T> \| TouchState<T>): boolean;
		declare function validateSort<T>(data: NodeDragEventData<T> \| NodeTouchEventData<T>, state: DragState<T> \| TouchState<T>, x: number, y: number): boolean;
		declare function sort<T>(data: NodeDragEventData<T> \| NodeTouchEventData<T>, state: DragState<T> \| TouchState<T>): void;
		declare function validateDragstart(data: NodeEventData<any>): boolean;
		/**
		* Responsible for assigning dragstart classes to the dragged nodes.
		*/
		declare function handleDragstart<T>(data: NodeDragEventData<T>, state: BaseDragState<T>): void;
		declare function handleNodePointerdown<T>(data: NodePointerEventData<T>, state: BaseDragState<T>): void;
		declare function dragstartClasses<T>(_node: NodeRecord<T>, nodes: Array<NodeRecord<T>>, config: ParentConfig<T>, isSynth?: boolean): void;
		declare function initDrag<T>(data: NodeDragEventData<T>, draggedNodes: Array<NodeRecord<T>>): DragState<T>;
		declare function validateDragHandle<T>(data: NodeDragEventData<T> \| NodePointerEventData<T>): boolean;
		declare function handleClickNode<T>(_data: NodeEventData<T>): void;
		declare function handleClickParent<T>(_data: ParentEventData<T>): void;
		declare function handleNodeKeydown<T>(_data: NodeEventData<T>): void;
		declare function handleParentKeydown<T>(data: ParentKeydownEventData<T>, state: BaseDragState<T>): void;
		declare function preventSortOnScroll(): () => void;
		declare function handleNodePointerover<T>(e: PointeroverNodeEvent<T>): void;
		declare function handleNodeDrop<T>(data: NodeDragEventData<T>, state: DragState<T> \| SynthDragState<T>): void;
		declare function handleDragend<T>(data: NodeDragEventData<T>, state: DragState<T>): void;
		declare function handlePointercancel<T>(data: NodeEventData<T>, state: DragState<T> \| SynthDragState<T> \| BaseDragState<T>): void;
		declare function handleEnd<T>(state: DragState<T> \| SynthDragState<T>): void;
		declare function handleNodeTouchstart<T>(data: NodeEventData<T>, _state: BaseDragState<T>): void;
		declare function handleNodePointerup<T>(data: NodePointerEventData<T>, state: DragState<T> \| SynthDragState<T> \| BaseDragState<T>): void;
		declare function handleNodePointermove<T>(data: NodePointerEventData<T>, state: SynthDragState<T> \| BaseDragState<T>): void;
		declare function handleLongPress<T>(data: NodePointerEventData<T>, dragState: DragState<T>): void;
		declare function synthMove<T>(data: NodePointerEventData<T>, state: SynthDragState<T>): void;
		declare function handleNodeDragover<T>(data: NodeDragEventData<T>, state: DragState<T>): void;
		declare function handleParentDragover<T>(data: ParentDragEventData<T>, state: DragState<T>): void;
		declare function handleParentPointerover<T>(e: PointeroverParentEvent<T>): void;
		declare function validateTransfer<T>({ currentParent, targetParent, initialParent, draggedNodes, state, }: {
		currentParent: ParentRecord<T>;
		targetParent: ParentRecord<T>;
		initialParent: ParentRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		state: BaseDragState<T>;
		}): boolean;
		declare function validateSort<T>(data: NodeDragEventData<T> \| NodePointerEventData<T>, state: DragState<T>, x: number, y: number): boolean;
		declare function sort<T>(data: NodeDragEventData<T> \| NodePointerEventData<T>, state: DragState<T>): void;
		/**
		* Event listener used for all nodes.
		@@ -903,17 +1060,42 @@ *
		declare function nodeEventData<T>(callback: any): (e: Event) => NodeEventData<T> \| undefined;
		declare function performTransfer<T>(state: DragState<T> \| TouchState<T>, data: NodeEventData<T> \| ParentEventData<T>): void;
		/**
		* Used when the dragged element enters into a parent other than its own.
		*/
		declare function transfer<T>(data: NodeEventData<T> \| ParentEventData<T>, state: DragState<T>): void;
		declare function parentEventData<T>(callback: any): (e: Event) => NodeEventData<T> \| undefined;
		declare function noDefault(e: Event): void;
		declare function throttle(callback: any, limit: number): (...args: any[]) => void;
		declare function addNodeClass<T>(els: Array<Node \| HTMLElement \| Element>, className: string \| undefined, omitAppendPrivateClass?: boolean): void;
		declare function addParentClass<T>(els: Array<HTMLElement>, className: string \| undefined, omitAppendPrivateClass?: boolean): void;
		declare function addClass(el: Node \| HTMLElement \| Element, className: string \| undefined, data: NodeData<any> \| ParentData<any> \| undefined, omitAppendPrivateClass?: boolean): NodeData<any> \| ParentData<any> \| undefined;
		declare function removeClass(els: Array<Node \| HTMLElement \| Element>, className: string \| undefined): void;
		declare function getElFromPoint<T>(coordinates: {
		x: number;
		y: number;
		}, e: PointerEvent, state: SynthDragState<T>): NodeFromPoint<T> \| ParentFromPoint<T> \| undefined;
		/**
		* Checks to see that a given element and its parent node are instances of
		* HTML Elements.
		*
		* @param eventData
		* @param {unknown} el - The element to check.
		*
		* @param state
		* @returns {boolean} - Whether or not provided element is of type Node.
		*/
		declare function isNode(el: unknown): el is Node;
		/**
		* Takes a given el and event handlers, assigns them, and returns the used abort
		* controller.
		*
		* @internal
		*
		* @returns void
		* @param el - The element to add the event listeners to.
		* @param events - The events to add to the element.
		* @returns - The abort controller used for the event listeners.
		*/
		declare function transfer<T>(data: NodeEventData<T> \| ParentEventData<T>, state: DragState<T> \| TouchState<T>): void;
		declare function parentEventData<T>(callback: any): (e: Event) => NodeEventData<T> \| undefined;
		declare function addEvents(el: Document \| ShadowRoot \| Node \| HTMLElement, events: EventHandlers \| any): AbortController;
		declare function copyNodeStyle(sourceNode: HTMLElement, targetNode: HTMLElement, omitKeys?: boolean): void;
		declare function eventCoordinates(data: DragEvent \| PointerEvent): {
		x: number;
		y: number;
		};
		declare function getRealCoords(el: HTMLElement): Coordinates;

		export { type DNDPlugin, type DNDPluginData, type DragAndDrop, type DragAndDropData, type DragState, type DragStateProps, type EventHandlers, type Node, type NodeData, type NodeDragEventData, type NodeEvent, type NodeEventData, type NodeFromPoint, type NodeRecord, type NodeTargetData, type NodeTouchEventData, type NodesData, type ParentConfig, type ParentData, type ParentDragEventData, type ParentEventData, type ParentFromPoint, type ParentObservers, type ParentRecord, type ParentTargetData, type ParentsData, type PluginData, type ScrollData, type SetupNode, type SetupNodeData, type TearDownNode, type TearDownNodeData, type TouchOverNodeEvent, type TouchOverParentEvent, type TouchState, type TouchStateProps, addClass, addEvents, animations, copyNodeStyle, dragAndDrop, dragStateProps, dragValues, dragstart, dragstartClasses, end, eventCoordinates, events, getElFromPoint, getScrollParent, handleDragoverNode, handleDragoverParent, handleDragstart, handleEnd, handleLongTouch, handleSelections, handleTouchOverNode, handleTouchOverParent, handleTouchedNode, handleTouchmove, handleTouchstart, initDrag, initTouch, isBrowser, isNode, multiDrag, multiDragState, multiDragstart, multiHandleDragstart, multiHandleEnd, multiHandleTouchstart, multiReapplyDragClasses, multiTouchstart, nodeEventData, nodes, parentEventData, parentValues, parents, performSort, performTransfer, place, remapFinished, remapNodes, removeClass, resetState, selections, selectionsEnd, setDragState, setParentValues, setTouchState, setupNode, setupNodeRemap, sort, stackNodes, state, swap, tearDown, tearDownNode, tearDownNodeRemap, throttle, transfer, updateConfig, validateSort, validateTransfer };
		export { type BaseDragState, type Coordinates, type DNDPlugin, type DNDPluginData, type DragAndDrop, type DragAndDropData, type DragState, type DragStateProps, type DragendEvent, type DragendEventData, type DragstartEvent, type DragstartEventData, type DropSwapConfig, type DropSwapState, type EventHandlers, type InsertConfig, type InsertEvent, type InsertState, type NativeDragEffects, type Node, type NodeData, type NodeDragEventData, type NodeEvent, type NodeEventData, type NodeFromPoint, type NodePointerEventData, type NodeRecord, type NodeTargetData, type NodesData, type ParentConfig, type ParentData, type ParentDragEventData, type ParentEventData, type ParentFromPoint, type ParentKeydownEventData, type ParentObservers, type ParentPointerEventData, type ParentRecord, type ParentTargetData, type ParentsData, type PluginData, type PointeroverNodeEvent, type PointeroverParentEvent, type RemapFinished, type RemapFinishedData, type ScrollData, type SetupNode, type SetupNodeData, type ShouldSwapData, type SortEvent, type SortEventData, type StateEvents, type SynthDragState, type SynthDragStateProps, type TearDownNode, type TearDownNodeData, type TransferEvent, type TransferEventData, addClass, addEvents, addNodeClass, addParentClass, animations, copyNodeStyle, createEmitter, dragAndDrop, dragStateProps, dragValues, dragstartClasses, dropOrSwap, emit, eventCoordinates, getElFromPoint, getRealCoords, handleClickNode, handleClickParent, handleDragend, handleDragstart, handleEnd, handleLongPress, handleNodeDragover, handleNodeDrop, handleNodeKeydown, handleNodePointerdown, handleNodePointermove, handleNodePointerover, handleNodePointerup, handleNodeTouchstart, handleParentBlur, handleParentDragover, handleParentDrop, handleParentFocus, handleParentKeydown, handleParentPointerover, handlePointercancel, initDrag, insert, isBrowser, isDragState, isNode, isSynthDragState, noDefault, nodeEventData, nodes, on, parentEventData, parentValues, parents, performSort, performTransfer, preventSortOnScroll, remapFinished, remapNodes, removeClass, resetState, setAttrs, setDragState, setParentValues, setupNode, setupNodeRemap, sort, state, synthMove, tearDown, tearDownNode, tearDownNodeRemap, throttle, touchDevice, transfer, treeAncestors, updateConfig, validateDragHandle, validateDragstart, validateSort, validateTransfer };

package.json

		{
		"name": "@formkit/drag-and-drop",
		"version": "0.1.6",
		"version": "0.2.0",
		"description": "Drag and drop package.",
		@@ -47,4 +47,2 @@ "main": "./index.cjs",
		"tests-frameworks": "cd tests-frameworks && pnpm run dev",
		"playground-nuxt": "cd playground/nuxt && pnpm run dev",
		"playground-next": "cd playground/next && pnpm run dev",
		"docs": "cd docs && pnpm run dev",
		@@ -51,0 +49,0 @@ "build": "jiti build.ts",

478

react/index.d.ts

		@@ -6,2 +6,3 @@ import { RefObject, Dispatch, SetStateAction } from 'react';
		}
		type NativeDragEffects = "link" \| "none" \| "copy" \| "move";
		/**
		@@ -11,8 +12,22 @@ * The configuration object for a given parent.
		interface ParentConfig<T> {
		[key: string]: any;
		/**
		* A function that returns whether a given parent accepts a given node.
		*/
		accepts?: (targetParentData: ParentRecord<T>, initialParentData: ParentRecord<T>, lastParentData: ParentRecord<T>, state: DragState<T> \| TouchState<T>) => boolean;
		accepts?: (targetParentData: ParentRecord<T>, initialParentData: ParentRecord<T>, currentParentData: ParentRecord<T>, state: BaseDragState<T>) => boolean;
		activeDescendantClass?: string;
		/**
		* The data transfer effect to use for the drag operation.
		*/
		dragEffectAllowed: NativeDragEffects;
		/**
		* The data transfer effect to use for the drag operation.
		*/
		dragDropEffect: NativeDragEffects;
		/**
		* A function that returns the image to use for the drag operation. This is
		* invoked for native operations. The clonedNode is what will be set as the drag
		* image, but this can be updated.
		*/
		dragImage?: (data: NodeDragEventData<T>, draggedNodes: Array<NodeRecord<T>>) => HTMLElement;
		/**
		* A flag to disable dragability of all nodes in the parent.
		@@ -29,2 +44,3 @@ */
		draggable?: (child: HTMLElement) => boolean;
		draggedNodes: (data: NodeEventData<T>) => Array<NodeRecord<T>>;
		/**
		@@ -35,2 +51,11 @@ * The class to add to a node when it is being dragged.
		/**
		* Accepts array of "dragged nodes" and applies dragstart classes to them.
		*/
		dragstartClasses: (node: NodeRecord<T>, nodes: Array<NodeRecord<T>>, config: ParentConfig<T>, isSynthDrag?: boolean) => void;
		dragPlaceholderClass?: string;
		/**
		* The configuration object for the drop and swap plugin.
		*/
		dropSwapConfig?: DropSwapConfig<T>;
		/**
		* The class to add to a node when the node is dragged over it.
		@@ -40,2 +65,6 @@ */
		/**
		* The class to add to a parent when it is dragged over.
		*/
		dropZoneParentClass?: string;
		/**
		* A flag to indicate whether the parent itself is a dropZone.
		@@ -49,26 +78,49 @@ */
		group?: string;
		handleParentBlur: (data: ParentEventData<T>, state: BaseDragState<T>) => void;
		handleParentFocus: (data: ParentEventData<T>, state: BaseDragState<T>) => void;
		handleNodeKeydown: (data: NodeEventData<T>, state: DragState<T>) => void;
		handleParentKeydown: (data: ParentKeydownEventData<T>, state: DragState<T>) => void;
		/**
		* Function that is called when dragend or touchend event occurs.
		*/
		handleEnd: (data: NodeDragEventData<T> \| NodeTouchEventData<T>) => void;
		handleDragend: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		/**
		* Function that is called when dragstart event occurs.
		*/
		handleDragstart: (data: NodeDragEventData<T>) => void;
		handleDragstart: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		handleEnd: (state: DragState<T> \| SynthDragState<T>) => void;
		handleNodeDrop: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		handleNodePointerup: (data: NodePointerEventData<T>, state: DragState<T>) => void;
		handleParentScroll: (data: ParentEventData<T>, state: DragState<T> \| BaseDragState<T> \| SynthDragState<T>) => void;
		/**
		* Function that is called when touchstart event occurs.
		*/
		handleTouchstart: (data: NodeTouchEventData<T>) => void;
		handleNodeTouchstart: (data: NodePointerEventData<T>, state: DragState<T>) => void;
		/**
		* Function that is called when a dragenter event is triggered on the node.
		*/
		handleNodeDragenter: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		/**
		* Dragleave event on node
		*/
		handleNodeDragleave: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		/**
		* Function that is called when a dragover event is triggered on the parent.
		*/
		handleDragoverParent: (data: ParentDragEventData<T>) => void;
		handleParentDragover: (data: ParentDragEventData<T>, state: DragState<T>) => void;
		/**
		* Drop event on parent
		*/
		handleParentDrop: (data: ParentDragEventData<T>, state: DragState<T>) => void;
		/**
		* Function that is called when a dragover event is triggered on a node.
		*/
		handleDragoverNode: (data: NodeDragEventData<T>) => void;
		handleNodeDragover: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		handlePointercancel: (data: NodeDragEventData<T> \| NodePointerEventData<T>, state: DragState<T> \| SynthDragState<T> \| BaseDragState<T>) => void;
		handleNodePointerdown: (data: NodePointerEventData<T>, state: DragState<T>) => void;
		/**
		* Function that is called when a touchmove event is triggered on a node.
		* Function that is called when either a pointermove or touchmove event is fired
		* where now the "dragged" node is being moved programatically.
		*/
		handleTouchmove: (data: NodeTouchEventData<T>) => void;
		handleNodePointermove: (data: NodePointerEventData<T>, state: DragState<T>) => void;
		/**
		@@ -78,3 +130,3 @@ * Function that is called when a node that is being moved by touchmove event
		*/
		handleTouchOverNode: (data: TouchOverNodeEvent<T>) => void;
		handleNodePointerover: (data: PointeroverNodeEvent<T>, state: SynthDragState<T>) => void;
		/**
		@@ -84,15 +136,19 @@ * Function that is called when a node that is being moved by touchmove event
		*/
		handleTouchOverParent: (e: TouchOverParentEvent<T>) => void;
		handleParentPointerover: (e: PointeroverParentEvent<T>, state: SynthDragState<T>) => void;
		/**
		* Config option for insert plugin.
		*/
		insertConfig?: InsertConfig<T>;
		/**
		* A flag to indicate whether long touch is enabled.
		*/
		longTouch?: boolean;
		longPress?: boolean;
		/**
		* The class to add to a node when a long touch action is performed.
		*/
		longTouchClass?: string;
		longPressClass?: string;
		/**
		* The time in milliseconds to wait before a long touch is performed.
		*/
		longTouchTimeout?: number;
		longPressTimeout?: any;
		/**
		@@ -102,10 +158,27 @@ * The name of the parent (used for accepts function for increased specificity).
		name?: string;
		multiDrag?: boolean;
		/**
		* If set to false, the library will not use the native drag and drop API.
		*/
		nativeDrag?: boolean;
		/**
		* Function that is called when a sort operation is to be performed.
		*/
		performSort: (state: DragState<T> \| TouchState<T>, data: NodeDragEventData<T> \| NodeTouchEventData<T>) => void;
		performSort: ({ parent, draggedNodes, targetNode, }: {
		parent: ParentRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		targetNode: NodeRecord<T>;
		}) => void;
		/**
		* Function that is called when a transfer operation is to be performed.
		*/
		performTransfer: (state: DragState<T> \| TouchState<T>, data: NodeEventData<T> \| ParentEventData<T>) => void;
		performTransfer: ({ currentParent, targetParent, initialParent, draggedNodes, initialIndex, state, targetNode, }: {
		currentParent: ParentRecord<T>;
		targetParent: ParentRecord<T>;
		initialParent: ParentRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		initialIndex: number;
		state: BaseDragState<T> \| DragState<T> \| SynthDragState<T>;
		targetNode?: NodeRecord<T>;
		}) => void;
		/**
		@@ -116,5 +189,14 @@ * An array of functions to use for a given parent.
		/**
		* Takes a given node and reapplies the drag classes.
		*/
		reapplyDragClasses: (node: Node, parentData: ParentData<T>) => void;
		/**
		* Invoked when the remapping of a given parent's nodes is finished.
		*/
		remapFinished: (data: ParentData<T>) => void;
		/**
		* The root element to use for the parent.
		*/
		root: Document \| ShadowRoot;
		selectedClass?: string;
		/**
		@@ -125,2 +207,6 @@ * Function that is called when a node is set up.
		/**
		* Called when the value of the parent is changed and the nodes are remapped.
		*/
		setupNodeRemap: SetupNode;
		/**
		* The scroll behavior of the parent.
		@@ -144,2 +230,12 @@ *
		/**
		* The class to add to a parent when it is dragged over.
		*/
		synthDropZoneParentClass?: string;
		/**
		* A function that returns the image to use for the drag operation. This is
		* invoked for synth drag operations operations. The clonedNode is what will
		* be set as the drag image, but this can be updated.
		*/
		synthDragImage?: (data: NodePointerEventData<T>, draggedNodes: Array<NodeRecord<T>>) => HTMLElement;
		/**
		* Function that is called when a node is torn down.
		@@ -149,2 +245,14 @@ */
		/**
		* Called when the value of the parent is changed and the nodes are remapped.
		*/
		tearDownNodeRemap: TearDownNode;
		/**
		* Property to identify the parent record who is the ancestor of the current parent.
		*/
		treeAncestor?: boolean;
		/**
		* Property to identify which group of tree descendants the current parent belongs to.
		*/
		treeGroup?: string;
		/**
		* The threshold for a drag to be considered a valid sort
		@@ -158,6 +266,39 @@ * operation.
		/**
		* The class to add to a node when it is being dragged via touch.
		* The class to add to a node when it is being synthetically dragged.
		*/
		touchDraggingClass?: string;
		touchDropZoneClass?: string;
		synthDraggingClass?: string;
		/**
		* On synth drag start, this is applied to the dragged node(s) (not their
		* representations being dragged).
		*/
		synthDragPlaceholderClass?: string;
		/**
		* When hovering over a node, this class is applied to the node.
		*/
		synthDropZoneClass?: string;
		/**
		* When a node receives focus, this class is applied to the node.
		*/
		synthActiveDescendantClass?: string;
		/**
		* Config option to allow recursive copying of computed styles of dragged
		* element to the cloned one that will be dragged (only for synthetic drag).
		*/
		deepCopyStyles?: boolean;
		/**
		* Callback function for when a sort operation is performed.
		*/
		onSort?: SortEvent;
		/**
		* Callback function for when a transfer operation is performed.
		*/
		onTransfer?: TransferEvent;
		/**
		* Fired when a drag is started, whether native drag or synthetic
		*/
		onDragstart?: DragstartEvent;
		/**
		* Fired when a drag is ended, whether native drag or synthetic
		*/
		onDragend?: DragendEvent;
		}
		@@ -188,2 +329,11 @@ /**
		abortControllers: Record<string, AbortController>;
		/**
		* The private classes of the node (used for preventing erroneous removal of
		* classes).
		*/
		privateClasses: Array<string>;
		/**
		* Set on parentData indicating that the current parent is nested beneath an ancestor.
		*/
		nestedParent?: ParentRecord<T>;
		}
		@@ -211,2 +361,17 @@ /**
		abortControllers: Record<string, AbortController>;
		/**
		* Set by the insertion plugin to define the coordinates for a given node.
		*/
		range?: {
		ascending?: {
		y: number[];
		x: number[];
		vertical: boolean;
		};
		descending?: {
		y: number[];
		x: number[];
		vertical: boolean;
		};
		};
		}
		@@ -233,9 +398,9 @@ /**
		/**
		* The data passed to the node event listener when the event is a touch event.
		* The data passed to the node event listener when the event is a pointer event (not a native drag event).
		*/
		interface NodeTouchEventData<T> extends NodeEventData<T> {
		interface NodePointerEventData<T> extends NodeEventData<T> {
		/**
		* The event that was triggered.
		*/
		e: TouchEvent;
		e: PointerEvent;
		/**
		@@ -246,2 +411,12 @@ * The data of the target node.
		}
		interface ParentKeydownEventData<T> extends ParentEventData<T> {
		/**
		* The event that was triggered.
		*/
		e: KeyboardEvent;
		/**
		* The data of the target node.
		*/
		targetData: ParentTargetData<T>;
		}
		/**
		@@ -300,6 +475,7 @@ * The data passed to the parent event listener.
		*/
		interface TouchOverNodeEvent<T> extends Event {
		interface PointeroverNodeEvent<T> extends Event {
		detail: {
		e: TouchEvent;
		e: PointerEvent;
		targetData: NodeTargetData<T>;
		state: SynthDragState<T>;
		};
		@@ -311,6 +487,7 @@ }
		*/
		interface TouchOverParentEvent<T> extends Event {
		interface PointeroverParentEvent<T> extends Event {
		detail: {
		e: TouchEvent;
		e: PointerEvent;
		targetData: ParentTargetData<T>;
		state: SynthDragState<T>;
		};
		@@ -346,2 +523,6 @@ }
		tearDownNodeRemap?: TearDownNode;
		/**
		* Called when all nodes have finished remapping for a given parent
		*/
		remapFinished?: () => void;
		}
		@@ -355,18 +536,4 @@ type DNDPlugin = (parent: HTMLElement) => DNDPluginData \| undefined;
		interface SetupNodeData<T> {
		/**
		* The node that is being set up.
		*/
		node: Node;
		/**
		* The data of the node that is being set up.
		*/
		nodeData: NodeData<T>;
		/**
		* The parent of the node that is being set up.
		*/
		parent: HTMLElement;
		/**
		* The data of the parent of the node that is being set up.
		*/
		parentData: ParentData<T>;
		node: NodeRecord<T>;
		parent: ParentRecord<T>;
		}
		@@ -377,54 +544,9 @@ /**
		interface TearDownNodeData<T> {
		/**
		* The node that is being torn down.
		*/
		node: Node;
		/**
		* The data of the node that is being torn down.
		*/
		nodeData?: NodeData<T>;
		/**
		* The parent of the node that is being torn down.
		*/
		parent: HTMLElement;
		/**
		* The data of the parent of the node that is being torn down.
		*/
		parentData: ParentData<T>;
		node: {
		el: Node;
		data?: NodeData<T>;
		};
		parent: ParentRecord<T>;
		}
		/**
		* The state of the current drag. TouchState is only created when a touch start
		* event has occurred.
		*/
		interface TouchState<T> extends DragState<T> {
		/**
		* A flag to indicate whether the dragged (touched) node is moving.
		*/
		touchMoving: boolean;
		/**
		* The left position of the touch start.
		*/
		touchStartLeft: number;
		/**
		* The top position of the touch start.
		*/
		touchStartTop: number;
		/**
		* The node that was most recently touched.
		*/
		touchedNode: HTMLElement;
		/**
		* The timeout for a long touch.
		*/
		longTouchTimeout: ReturnType<typeof setTimeout> \| undefined;
		/**
		* A flag to indicate whether a long touch has occurred.
		*/
		longTouch: boolean;
		/**
		* The display of the touched node.
		*/
		touchedNodeDisplay: string \| undefined;
		}
		/**
		* The state of the current drag. State is only created when a drag start
		@@ -445,3 +567,3 @@ * event is triggered.
		* @param initialParent - The parent that the dragged node was initially in.
		* @param lastParent - The parent that the dragged node was most recently in.
		* @param currentParent - The parent that the dragged node was most recently in.
		* @param lastValue - The last value of the dragged node.
		@@ -457,8 +579,35 @@ * @param originalZIndex - The original z-index of the dragged node.
		*/
		interface DragState<T> extends DragStateProps<T> {
		type SynthDragState<T> = SynthDragStateProps & DragState<T>;
		interface SynthDragStateProps {
		/**
		* The node that was most recently clicked (used optionally).
		* Element
		*/
		activeNode: NodeRecord<T> \| undefined;
		clonedDraggedNode: HTMLElement;
		/**
		* Direction of the synthetic drag scroll
		*/
		synthScrollDirection: "up" \| "down" \| "left" \| "right" \| undefined;
		/**
		* The display of the synthetic node.
		*/
		draggedNodeDisplay: string;
		/**
		* Flag indcating whether a scrollable el is being scrolled via.
		* synthetic drag.
		*/
		synthDragScrolling: boolean;
		/**
		* Pointer id of dragged el
		*/
		pointerId: number;
		scrollElement: HTMLElement \| undefined;
		animationFrameId: number \| undefined;
		}
		type DragState<T> = DragStateProps<T> & BaseDragState<T>;
		type BaseDragState<T> = {
		activeState?: {
		node: NodeRecord<T>;
		parent: ParentRecord<T>;
		};
		/**
		* The nodes that will be updated by a drag action (sorted).
		@@ -468,2 +617,29 @@ */
		/**
		* The last value the dragged node targeted.
		*/
		currentTargetValue: T \| undefined;
		emit: (event: string, data: unknown) => void;
		on: (event: string, callback: CallableFunction) => void;
		newActiveDescendant?: NodeRecord<T>;
		/**
		* The original z-index of the dragged node.
		*/
		originalZIndex?: string;
		pointerSelection: boolean;
		preventEnter: boolean;
		/**
		* Flag indicating that the remap just finished.
		*/
		remapJustFinished: boolean;
		selectedState?: {
		nodes: Array<NodeRecord<T>>;
		parent: ParentRecord<T>;
		};
		};
		interface DragStateProps<T> {
		/**
		* The nodes that will be updated by a drag action (sorted).
		*/
		affectedNodes: Array<NodeRecord<T>>;
		/**
		* Indicates whether the dragged node is moving to a node with a higher index
		@@ -486,2 +662,7 @@ * or not.
		/**
		* The parent that the dragged node was most recently in.
		*/
		currentParent: ParentRecord<T>;
		currentTargetValue: T \| undefined;
		/**
		* The node that is being dragged.
		@@ -495,2 +676,6 @@ */
		/**
		* Values to be inserted during sort and transfer operations.
		*/
		dynamicValues: Array<T>;
		/**
		* The direction that the dragged node is moving into a dragover node.
		@@ -508,31 +693,22 @@ */
		/**
		* The parent that the dragged node was most recently in.
		* longPress - A flag to indicate whether a long press has occurred.
		*/
		lastParent: ParentRecord<T>;
		longPress: boolean;
		/**
		* The last value of the dragged node.
		* Long press timeout
		*/
		lastValue: any;
		longPressTimeout: number;
		/**
		* The last value the dragged node targeted.
		* scrollEls
		*/
		lastTargetValue: any;
		scrollEls: Array<[HTMLElement, AbortController]>;
		/**
		* The original z-index of the dragged node.
		* The top position of pointerdown.
		*/
		originalZIndex: string \| undefined;
		startTop: number;
		/**
		* A flag to prevent a sort operation from firing until the mutation observer
		* has had a chance to update the data of the remapped nodes.
		* The left position of the pointerdown.
		*/
		preventEnter: boolean;
		startLeft: number;
		/**
		* Flag indicating that the remap just finished.
		*/
		remapJustFinished: boolean;
		/**
		* The nearest parent that is scrollable.
		*/
		scrollParent: HTMLElement;
		/**
		* The index of the node that the dragged node is moving into.
		@@ -546,14 +722,68 @@ */
		}
		interface DragStateProps<T> {
		coordinates: {
		x: number;
		y: number;
		};
		type SortEvent = <T>(data: SortEventData<T>) => void;
		type TransferEvent = <T>(data: TransferEventData<T>) => void;
		type DragstartEvent = <T>(data: DragstartEventData<T>, state: DragState<T>) => void;
		type DragendEvent = <T>(data: DragendEventData<T>) => void;
		interface SortEventData<T> {
		parent: ParentRecord<T>;
		previousValues: Array<T>;
		values: Array<T>;
		previousNodes: Array<NodeRecord<T>>;
		nodes: Array<NodeRecord<T>>;
		draggedNode: NodeRecord<T>;
		previousPosition: number;
		position: number;
		}
		interface TransferEventData<T> {
		sourceParent: ParentRecord<T>;
		targetParent: ParentRecord<T>;
		initialParent: ParentRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		initialIndex: number;
		initialParent: ParentRecord<T>;
		lastParent: ParentRecord<T>;
		scrollParent: HTMLElement;
		targetIndex: number;
		state: BaseDragState<T> \| DragState<T> \| SynthDragState<T>;
		targetNode?: NodeRecord<T>;
		}
		interface DragstartEventData<T> {
		parent: ParentRecord<T>;
		values: Array<T>;
		draggedNode: NodeRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		position: number;
		}
		interface DragendEventData<T> {
		parent: ParentRecord<T>;
		values: Array<T>;
		draggedNode: NodeRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		}
		interface ShouldSwapData<T> {
		sourceParent: ParentRecord<T>;
		targetParent: ParentRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		targetNodes: Array<NodeRecord<T>>;
		state: BaseDragState<T> \| DragState<T> \| SynthDragState<T>;
		}
		interface DropSwapConfig<T> {
		shouldSwap?: (data: ShouldSwapData<T>) => boolean;
		handleNodeDragover?: (data: NodeDragEventData<unknown>, state: DragState<unknown>) => void;
		handleParentDragover?: (data: ParentDragEventData<unknown>, state: DragState<unknown>) => void;
		handleParentPointerover?: (e: PointeroverParentEvent<unknown>, state: DragState<unknown>) => void;
		handleNodePointerover?: (data: PointeroverNodeEvent<unknown>, state: SynthDragState<unknown>) => void;
		}
		interface InsertConfig<T> {
		insertPoint: (parent: ParentRecord<T>) => HTMLElement;
		insertEvent?: (data: InsertEvent<T>) => void;
		handleNodeDragover?: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		handleParentDragover?: (data: ParentDragEventData<T>, state: DragState<T>) => void;
		handleParentPointerover?: (data: PointeroverParentEvent<T>, state: SynthDragState<T>) => void;
		handleNodePointerover?: (data: PointeroverNodeEvent<T>, state: SynthDragState<T>) => void;
		handleEnd?: (data: NodeDragEventData<T> \| NodePointerEventData<T>) => void;
		}
		interface InsertEvent<T> {
		sourceParent: ParentRecord<T>;
		targetParent: ParentRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		targetNodes: Array<NodeRecord<T>>;
		state: BaseDragState<T> \| DragState<T> \| SynthDragState<T>;
		}

		@@ -560,0 +790,0 @@ type ReactElement<E extends HTMLElement> = E \| RefObject<E>;

484

vue/index.d.ts

		import { Ref } from 'vue';
		import { ParentConfig as ParentConfig$1 } from '../index';

		@@ -7,2 +6,3 @@ interface ParentDragEventData<T> extends ParentEventData<T> {
		}
		type NativeDragEffects = "link" \| "none" \| "copy" \| "move";
		/**
		@@ -12,8 +12,22 @@ * The configuration object for a given parent.
		interface ParentConfig<T> {
		[key: string]: any;
		/**
		* A function that returns whether a given parent accepts a given node.
		*/
		accepts?: (targetParentData: ParentRecord<T>, initialParentData: ParentRecord<T>, lastParentData: ParentRecord<T>, state: DragState<T> \| TouchState<T>) => boolean;
		accepts?: (targetParentData: ParentRecord<T>, initialParentData: ParentRecord<T>, currentParentData: ParentRecord<T>, state: BaseDragState<T>) => boolean;
		activeDescendantClass?: string;
		/**
		* The data transfer effect to use for the drag operation.
		*/
		dragEffectAllowed: NativeDragEffects;
		/**
		* The data transfer effect to use for the drag operation.
		*/
		dragDropEffect: NativeDragEffects;
		/**
		* A function that returns the image to use for the drag operation. This is
		* invoked for native operations. The clonedNode is what will be set as the drag
		* image, but this can be updated.
		*/
		dragImage?: (data: NodeDragEventData<T>, draggedNodes: Array<NodeRecord<T>>) => HTMLElement;
		/**
		* A flag to disable dragability of all nodes in the parent.
		@@ -30,2 +44,3 @@ */
		draggable?: (child: HTMLElement) => boolean;
		draggedNodes: (data: NodeEventData<T>) => Array<NodeRecord<T>>;
		/**
		@@ -36,2 +51,11 @@ * The class to add to a node when it is being dragged.
		/**
		* Accepts array of "dragged nodes" and applies dragstart classes to them.
		*/
		dragstartClasses: (node: NodeRecord<T>, nodes: Array<NodeRecord<T>>, config: ParentConfig<T>, isSynthDrag?: boolean) => void;
		dragPlaceholderClass?: string;
		/**
		* The configuration object for the drop and swap plugin.
		*/
		dropSwapConfig?: DropSwapConfig<T>;
		/**
		* The class to add to a node when the node is dragged over it.
		@@ -41,2 +65,6 @@ */
		/**
		* The class to add to a parent when it is dragged over.
		*/
		dropZoneParentClass?: string;
		/**
		* A flag to indicate whether the parent itself is a dropZone.
		@@ -50,26 +78,49 @@ */
		group?: string;
		handleParentBlur: (data: ParentEventData<T>, state: BaseDragState<T>) => void;
		handleParentFocus: (data: ParentEventData<T>, state: BaseDragState<T>) => void;
		handleNodeKeydown: (data: NodeEventData<T>, state: DragState<T>) => void;
		handleParentKeydown: (data: ParentKeydownEventData<T>, state: DragState<T>) => void;
		/**
		* Function that is called when dragend or touchend event occurs.
		*/
		handleEnd: (data: NodeDragEventData<T> \| NodeTouchEventData<T>) => void;
		handleDragend: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		/**
		* Function that is called when dragstart event occurs.
		*/
		handleDragstart: (data: NodeDragEventData<T>) => void;
		handleDragstart: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		handleEnd: (state: DragState<T> \| SynthDragState<T>) => void;
		handleNodeDrop: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		handleNodePointerup: (data: NodePointerEventData<T>, state: DragState<T>) => void;
		handleParentScroll: (data: ParentEventData<T>, state: DragState<T> \| BaseDragState<T> \| SynthDragState<T>) => void;
		/**
		* Function that is called when touchstart event occurs.
		*/
		handleTouchstart: (data: NodeTouchEventData<T>) => void;
		handleNodeTouchstart: (data: NodePointerEventData<T>, state: DragState<T>) => void;
		/**
		* Function that is called when a dragenter event is triggered on the node.
		*/
		handleNodeDragenter: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		/**
		* Dragleave event on node
		*/
		handleNodeDragleave: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		/**
		* Function that is called when a dragover event is triggered on the parent.
		*/
		handleDragoverParent: (data: ParentDragEventData<T>) => void;
		handleParentDragover: (data: ParentDragEventData<T>, state: DragState<T>) => void;
		/**
		* Drop event on parent
		*/
		handleParentDrop: (data: ParentDragEventData<T>, state: DragState<T>) => void;
		/**
		* Function that is called when a dragover event is triggered on a node.
		*/
		handleDragoverNode: (data: NodeDragEventData<T>) => void;
		handleNodeDragover: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		handlePointercancel: (data: NodeDragEventData<T> \| NodePointerEventData<T>, state: DragState<T> \| SynthDragState<T> \| BaseDragState<T>) => void;
		handleNodePointerdown: (data: NodePointerEventData<T>, state: DragState<T>) => void;
		/**
		* Function that is called when a touchmove event is triggered on a node.
		* Function that is called when either a pointermove or touchmove event is fired
		* where now the "dragged" node is being moved programatically.
		*/
		handleTouchmove: (data: NodeTouchEventData<T>) => void;
		handleNodePointermove: (data: NodePointerEventData<T>, state: DragState<T>) => void;
		/**
		@@ -79,3 +130,3 @@ * Function that is called when a node that is being moved by touchmove event
		*/
		handleTouchOverNode: (data: TouchOverNodeEvent<T>) => void;
		handleNodePointerover: (data: PointeroverNodeEvent<T>, state: SynthDragState<T>) => void;
		/**
		@@ -85,15 +136,19 @@ * Function that is called when a node that is being moved by touchmove event
		*/
		handleTouchOverParent: (e: TouchOverParentEvent<T>) => void;
		handleParentPointerover: (e: PointeroverParentEvent<T>, state: SynthDragState<T>) => void;
		/**
		* Config option for insert plugin.
		*/
		insertConfig?: InsertConfig<T>;
		/**
		* A flag to indicate whether long touch is enabled.
		*/
		longTouch?: boolean;
		longPress?: boolean;
		/**
		* The class to add to a node when a long touch action is performed.
		*/
		longTouchClass?: string;
		longPressClass?: string;
		/**
		* The time in milliseconds to wait before a long touch is performed.
		*/
		longTouchTimeout?: number;
		longPressTimeout?: any;
		/**
		@@ -103,10 +158,27 @@ * The name of the parent (used for accepts function for increased specificity).
		name?: string;
		multiDrag?: boolean;
		/**
		* If set to false, the library will not use the native drag and drop API.
		*/
		nativeDrag?: boolean;
		/**
		* Function that is called when a sort operation is to be performed.
		*/
		performSort: (state: DragState<T> \| TouchState<T>, data: NodeDragEventData<T> \| NodeTouchEventData<T>) => void;
		performSort: ({ parent, draggedNodes, targetNode, }: {
		parent: ParentRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		targetNode: NodeRecord<T>;
		}) => void;
		/**
		* Function that is called when a transfer operation is to be performed.
		*/
		performTransfer: (state: DragState<T> \| TouchState<T>, data: NodeEventData<T> \| ParentEventData<T>) => void;
		performTransfer: ({ currentParent, targetParent, initialParent, draggedNodes, initialIndex, state, targetNode, }: {
		currentParent: ParentRecord<T>;
		targetParent: ParentRecord<T>;
		initialParent: ParentRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		initialIndex: number;
		state: BaseDragState<T> \| DragState<T> \| SynthDragState<T>;
		targetNode?: NodeRecord<T>;
		}) => void;
		/**
		@@ -117,5 +189,14 @@ * An array of functions to use for a given parent.
		/**
		* Takes a given node and reapplies the drag classes.
		*/
		reapplyDragClasses: (node: Node, parentData: ParentData<T>) => void;
		/**
		* Invoked when the remapping of a given parent's nodes is finished.
		*/
		remapFinished: (data: ParentData<T>) => void;
		/**
		* The root element to use for the parent.
		*/
		root: Document \| ShadowRoot;
		selectedClass?: string;
		/**
		@@ -126,2 +207,6 @@ * Function that is called when a node is set up.
		/**
		* Called when the value of the parent is changed and the nodes are remapped.
		*/
		setupNodeRemap: SetupNode;
		/**
		* The scroll behavior of the parent.
		@@ -145,2 +230,12 @@ *
		/**
		* The class to add to a parent when it is dragged over.
		*/
		synthDropZoneParentClass?: string;
		/**
		* A function that returns the image to use for the drag operation. This is
		* invoked for synth drag operations operations. The clonedNode is what will
		* be set as the drag image, but this can be updated.
		*/
		synthDragImage?: (data: NodePointerEventData<T>, draggedNodes: Array<NodeRecord<T>>) => HTMLElement;
		/**
		* Function that is called when a node is torn down.
		@@ -150,2 +245,14 @@ */
		/**
		* Called when the value of the parent is changed and the nodes are remapped.
		*/
		tearDownNodeRemap: TearDownNode;
		/**
		* Property to identify the parent record who is the ancestor of the current parent.
		*/
		treeAncestor?: boolean;
		/**
		* Property to identify which group of tree descendants the current parent belongs to.
		*/
		treeGroup?: string;
		/**
		* The threshold for a drag to be considered a valid sort
		@@ -159,6 +266,39 @@ * operation.
		/**
		* The class to add to a node when it is being dragged via touch.
		* The class to add to a node when it is being synthetically dragged.
		*/
		touchDraggingClass?: string;
		touchDropZoneClass?: string;
		synthDraggingClass?: string;
		/**
		* On synth drag start, this is applied to the dragged node(s) (not their
		* representations being dragged).
		*/
		synthDragPlaceholderClass?: string;
		/**
		* When hovering over a node, this class is applied to the node.
		*/
		synthDropZoneClass?: string;
		/**
		* When a node receives focus, this class is applied to the node.
		*/
		synthActiveDescendantClass?: string;
		/**
		* Config option to allow recursive copying of computed styles of dragged
		* element to the cloned one that will be dragged (only for synthetic drag).
		*/
		deepCopyStyles?: boolean;
		/**
		* Callback function for when a sort operation is performed.
		*/
		onSort?: SortEvent;
		/**
		* Callback function for when a transfer operation is performed.
		*/
		onTransfer?: TransferEvent;
		/**
		* Fired when a drag is started, whether native drag or synthetic
		*/
		onDragstart?: DragstartEvent;
		/**
		* Fired when a drag is ended, whether native drag or synthetic
		*/
		onDragend?: DragendEvent;
		}
		@@ -189,2 +329,11 @@ /**
		abortControllers: Record<string, AbortController>;
		/**
		* The private classes of the node (used for preventing erroneous removal of
		* classes).
		*/
		privateClasses: Array<string>;
		/**
		* Set on parentData indicating that the current parent is nested beneath an ancestor.
		*/
		nestedParent?: ParentRecord<T>;
		}
		@@ -212,2 +361,17 @@ /**
		abortControllers: Record<string, AbortController>;
		/**
		* Set by the insertion plugin to define the coordinates for a given node.
		*/
		range?: {
		ascending?: {
		y: number[];
		x: number[];
		vertical: boolean;
		};
		descending?: {
		y: number[];
		x: number[];
		vertical: boolean;
		};
		};
		}
		@@ -234,9 +398,9 @@ /**
		/**
		* The data passed to the node event listener when the event is a touch event.
		* The data passed to the node event listener when the event is a pointer event (not a native drag event).
		*/
		interface NodeTouchEventData<T> extends NodeEventData<T> {
		interface NodePointerEventData<T> extends NodeEventData<T> {
		/**
		* The event that was triggered.
		*/
		e: TouchEvent;
		e: PointerEvent;
		/**
		@@ -247,2 +411,12 @@ * The data of the target node.
		}
		interface ParentKeydownEventData<T> extends ParentEventData<T> {
		/**
		* The event that was triggered.
		*/
		e: KeyboardEvent;
		/**
		* The data of the target node.
		*/
		targetData: ParentTargetData<T>;
		}
		/**
		@@ -301,6 +475,7 @@ * The data passed to the parent event listener.
		*/
		interface TouchOverNodeEvent<T> extends Event {
		interface PointeroverNodeEvent<T> extends Event {
		detail: {
		e: TouchEvent;
		e: PointerEvent;
		targetData: NodeTargetData<T>;
		state: SynthDragState<T>;
		};
		@@ -312,6 +487,7 @@ }
		*/
		interface TouchOverParentEvent<T> extends Event {
		interface PointeroverParentEvent<T> extends Event {
		detail: {
		e: TouchEvent;
		e: PointerEvent;
		targetData: ParentTargetData<T>;
		state: SynthDragState<T>;
		};
		@@ -347,2 +523,6 @@ }
		tearDownNodeRemap?: TearDownNode;
		/**
		* Called when all nodes have finished remapping for a given parent
		*/
		remapFinished?: () => void;
		}
		@@ -356,18 +536,4 @@ type DNDPlugin = (parent: HTMLElement) => DNDPluginData \| undefined;
		interface SetupNodeData<T> {
		/**
		* The node that is being set up.
		*/
		node: Node;
		/**
		* The data of the node that is being set up.
		*/
		nodeData: NodeData<T>;
		/**
		* The parent of the node that is being set up.
		*/
		parent: HTMLElement;
		/**
		* The data of the parent of the node that is being set up.
		*/
		parentData: ParentData<T>;
		node: NodeRecord<T>;
		parent: ParentRecord<T>;
		}
		@@ -378,54 +544,9 @@ /**
		interface TearDownNodeData<T> {
		/**
		* The node that is being torn down.
		*/
		node: Node;
		/**
		* The data of the node that is being torn down.
		*/
		nodeData?: NodeData<T>;
		/**
		* The parent of the node that is being torn down.
		*/
		parent: HTMLElement;
		/**
		* The data of the parent of the node that is being torn down.
		*/
		parentData: ParentData<T>;
		node: {
		el: Node;
		data?: NodeData<T>;
		};
		parent: ParentRecord<T>;
		}
		/**
		* The state of the current drag. TouchState is only created when a touch start
		* event has occurred.
		*/
		interface TouchState<T> extends DragState<T> {
		/**
		* A flag to indicate whether the dragged (touched) node is moving.
		*/
		touchMoving: boolean;
		/**
		* The left position of the touch start.
		*/
		touchStartLeft: number;
		/**
		* The top position of the touch start.
		*/
		touchStartTop: number;
		/**
		* The node that was most recently touched.
		*/
		touchedNode: HTMLElement;
		/**
		* The timeout for a long touch.
		*/
		longTouchTimeout: ReturnType<typeof setTimeout> \| undefined;
		/**
		* A flag to indicate whether a long touch has occurred.
		*/
		longTouch: boolean;
		/**
		* The display of the touched node.
		*/
		touchedNodeDisplay: string \| undefined;
		}
		/**
		* The state of the current drag. State is only created when a drag start
		@@ -446,3 +567,3 @@ * event is triggered.
		* @param initialParent - The parent that the dragged node was initially in.
		* @param lastParent - The parent that the dragged node was most recently in.
		* @param currentParent - The parent that the dragged node was most recently in.
		* @param lastValue - The last value of the dragged node.
		@@ -458,8 +579,35 @@ * @param originalZIndex - The original z-index of the dragged node.
		*/
		interface DragState<T> extends DragStateProps<T> {
		type SynthDragState<T> = SynthDragStateProps & DragState<T>;
		interface SynthDragStateProps {
		/**
		* The node that was most recently clicked (used optionally).
		* Element
		*/
		activeNode: NodeRecord<T> \| undefined;
		clonedDraggedNode: HTMLElement;
		/**
		* Direction of the synthetic drag scroll
		*/
		synthScrollDirection: "up" \| "down" \| "left" \| "right" \| undefined;
		/**
		* The display of the synthetic node.
		*/
		draggedNodeDisplay: string;
		/**
		* Flag indcating whether a scrollable el is being scrolled via.
		* synthetic drag.
		*/
		synthDragScrolling: boolean;
		/**
		* Pointer id of dragged el
		*/
		pointerId: number;
		scrollElement: HTMLElement \| undefined;
		animationFrameId: number \| undefined;
		}
		type DragState<T> = DragStateProps<T> & BaseDragState<T>;
		type BaseDragState<T> = {
		activeState?: {
		node: NodeRecord<T>;
		parent: ParentRecord<T>;
		};
		/**
		* The nodes that will be updated by a drag action (sorted).
		@@ -469,2 +617,29 @@ */
		/**
		* The last value the dragged node targeted.
		*/
		currentTargetValue: T \| undefined;
		emit: (event: string, data: unknown) => void;
		on: (event: string, callback: CallableFunction) => void;
		newActiveDescendant?: NodeRecord<T>;
		/**
		* The original z-index of the dragged node.
		*/
		originalZIndex?: string;
		pointerSelection: boolean;
		preventEnter: boolean;
		/**
		* Flag indicating that the remap just finished.
		*/
		remapJustFinished: boolean;
		selectedState?: {
		nodes: Array<NodeRecord<T>>;
		parent: ParentRecord<T>;
		};
		};
		interface DragStateProps<T> {
		/**
		* The nodes that will be updated by a drag action (sorted).
		*/
		affectedNodes: Array<NodeRecord<T>>;
		/**
		* Indicates whether the dragged node is moving to a node with a higher index
		@@ -487,2 +662,7 @@ * or not.
		/**
		* The parent that the dragged node was most recently in.
		*/
		currentParent: ParentRecord<T>;
		currentTargetValue: T \| undefined;
		/**
		* The node that is being dragged.
		@@ -496,2 +676,6 @@ */
		/**
		* Values to be inserted during sort and transfer operations.
		*/
		dynamicValues: Array<T>;
		/**
		* The direction that the dragged node is moving into a dragover node.
		@@ -509,31 +693,22 @@ */
		/**
		* The parent that the dragged node was most recently in.
		* longPress - A flag to indicate whether a long press has occurred.
		*/
		lastParent: ParentRecord<T>;
		longPress: boolean;
		/**
		* The last value of the dragged node.
		* Long press timeout
		*/
		lastValue: any;
		longPressTimeout: number;
		/**
		* The last value the dragged node targeted.
		* scrollEls
		*/
		lastTargetValue: any;
		scrollEls: Array<[HTMLElement, AbortController]>;
		/**
		* The original z-index of the dragged node.
		* The top position of pointerdown.
		*/
		originalZIndex: string \| undefined;
		startTop: number;
		/**
		* A flag to prevent a sort operation from firing until the mutation observer
		* has had a chance to update the data of the remapped nodes.
		* The left position of the pointerdown.
		*/
		preventEnter: boolean;
		startLeft: number;
		/**
		* Flag indicating that the remap just finished.
		*/
		remapJustFinished: boolean;
		/**
		* The nearest parent that is scrollable.
		*/
		scrollParent: HTMLElement;
		/**
		* The index of the node that the dragged node is moving into.
		@@ -547,14 +722,68 @@ */
		}
		interface DragStateProps<T> {
		coordinates: {
		x: number;
		y: number;
		};
		type SortEvent = <T>(data: SortEventData<T>) => void;
		type TransferEvent = <T>(data: TransferEventData<T>) => void;
		type DragstartEvent = <T>(data: DragstartEventData<T>, state: DragState<T>) => void;
		type DragendEvent = <T>(data: DragendEventData<T>) => void;
		interface SortEventData<T> {
		parent: ParentRecord<T>;
		previousValues: Array<T>;
		values: Array<T>;
		previousNodes: Array<NodeRecord<T>>;
		nodes: Array<NodeRecord<T>>;
		draggedNode: NodeRecord<T>;
		previousPosition: number;
		position: number;
		}
		interface TransferEventData<T> {
		sourceParent: ParentRecord<T>;
		targetParent: ParentRecord<T>;
		initialParent: ParentRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		initialIndex: number;
		initialParent: ParentRecord<T>;
		lastParent: ParentRecord<T>;
		scrollParent: HTMLElement;
		targetIndex: number;
		state: BaseDragState<T> \| DragState<T> \| SynthDragState<T>;
		targetNode?: NodeRecord<T>;
		}
		interface DragstartEventData<T> {
		parent: ParentRecord<T>;
		values: Array<T>;
		draggedNode: NodeRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		position: number;
		}
		interface DragendEventData<T> {
		parent: ParentRecord<T>;
		values: Array<T>;
		draggedNode: NodeRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		}
		interface ShouldSwapData<T> {
		sourceParent: ParentRecord<T>;
		targetParent: ParentRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		targetNodes: Array<NodeRecord<T>>;
		state: BaseDragState<T> \| DragState<T> \| SynthDragState<T>;
		}
		interface DropSwapConfig<T> {
		shouldSwap?: (data: ShouldSwapData<T>) => boolean;
		handleNodeDragover?: (data: NodeDragEventData<unknown>, state: DragState<unknown>) => void;
		handleParentDragover?: (data: ParentDragEventData<unknown>, state: DragState<unknown>) => void;
		handleParentPointerover?: (e: PointeroverParentEvent<unknown>, state: DragState<unknown>) => void;
		handleNodePointerover?: (data: PointeroverNodeEvent<unknown>, state: SynthDragState<unknown>) => void;
		}
		interface InsertConfig<T> {
		insertPoint: (parent: ParentRecord<T>) => HTMLElement;
		insertEvent?: (data: InsertEvent<T>) => void;
		handleNodeDragover?: (data: NodeDragEventData<T>, state: DragState<T>) => void;
		handleParentDragover?: (data: ParentDragEventData<T>, state: DragState<T>) => void;
		handleParentPointerover?: (data: PointeroverParentEvent<T>, state: SynthDragState<T>) => void;
		handleNodePointerover?: (data: PointeroverNodeEvent<T>, state: SynthDragState<T>) => void;
		handleEnd?: (data: NodeDragEventData<T> \| NodePointerEventData<T>) => void;
		}
		interface InsertEvent<T> {
		sourceParent: ParentRecord<T>;
		targetParent: ParentRecord<T>;
		draggedNodes: Array<NodeRecord<T>>;
		targetNodes: Array<NodeRecord<T>>;
		state: BaseDragState<T> \| DragState<T> \| SynthDragState<T>;
		}

		@@ -564,3 +793,3 @@ type VueElement = HTMLElement \| Ref<HTMLElement \| undefined>;
		parent: HTMLElement \| Ref<HTMLElement \| undefined>;
		values: Ref<Array<T>>;
		values: Ref<Array<T>> \| Array<T>;
		}
		@@ -582,5 +811,6 @@ type VueParentConfig<T> = Partial<ParentConfig<T>>;
		* @param initialValues - The initial values of the parent element.
		*
		* @returns The parent element and values for drag and drop.
		*/
		declare function useDragAndDrop<T>(initialValues: T[], options?: Partial<ParentConfig$1<T>>): [
		declare function useDragAndDrop<T>(initialValues: T[], options?: Partial<VueParentConfig<T>>): [
		Ref<HTMLElement \| undefined>,
		@@ -587,0 +817,0 @@ Ref<T[]>,

index.cjs