react-reorder-list 0.10.1 → 0.10.3

package/dist/index.d.mts

@@ -0,0 +1,21 @@
+import { o as DivProps, p as ReorderListProps } from "./types-CRxTdmXH.mjs";
+import { JSX } from "react";
+
+//#region src/components.d.ts
+declare function ReorderIcon({
+  children,
+  style,
+  ...props
+}: DivProps): JSX.Element;
+declare function ReorderList({
+  useOnlyIconToDrag,
+  selectedItemOpacity,
+  animationDuration,
+  preserveOrder,
+  onPositionChange,
+  disabled,
+  props,
+  children
+}: ReorderListProps): JSX.Element;
+//#endregion
+export { ReorderIcon, ReorderList as default };

package/dist/index.mjs

@@ -0,0 +1,279 @@
+import React, { Children, cloneElement, createRef, isValidElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+//#region src/constants.ts
+const scrollThreshold = {
+	x: 10,
+	y: 100
+};
+//#endregion
+//#region src/hooks.ts
+function useDraggable(initValue = false) {
+	const [draggable, setDraggable] = useState(initValue);
+	const enableDragging = useCallback(() => setDraggable(true), []);
+	const disableDragging = useCallback(() => setDraggable(false), []);
+	return {
+		draggable,
+		onMouseEnter: enableDragging,
+		onMouseLeave: disableDragging,
+		onTouchStart: enableDragging,
+		onTouchEnd: disableDragging
+	};
+}
+function useStateWithHistory(initValue) {
+	const [state, setState] = useState(initValue);
+	const [prevState, setPrevState] = useState();
+	function setStateWithHistory(value) {
+		setPrevState(state);
+		setState(value);
+	}
+	return [
+		state,
+		prevState,
+		setStateWithHistory
+	];
+}
+//#endregion
+//#region src/icons.tsx
+function PiDotsSixVerticalBold(props) {
+	return /* @__PURE__ */ React.createElement("span", props, /* @__PURE__ */ React.createElement("svg", {
+		viewBox: "0 0 256 256",
+		fill: "currentColor",
+		width: "1.25rem",
+		height: "1.25rem"
+	}, /* @__PURE__ */ React.createElement("path", { d: "M108,60A16,16,0,1,1,92,44,16,16,0,0,1,108,60Zm56,16a16,16,0,1,0-16-16A16,16,0,0,0,164,76ZM92,112a16,16,0,1,0,16,16A16,16,0,0,0,92,112Zm72,0a16,16,0,1,0,16,16A16,16,0,0,0,164,112ZM92,180a16,16,0,1,0,16,16A16,16,0,0,0,92,180Zm72,0a16,16,0,1,0,16,16A16,16,0,0,0,164,180Z" })));
+}
+//#endregion
+//#region src/lib/react.ts
+function calculateBoundingBoxes(children) {
+	const boundingBoxes = {};
+	Children.forEach(children, (child) => {
+		const { key } = child;
+		if (key) boundingBoxes[key] = child.props.ref.current.getBoundingClientRect();
+	});
+	return boundingBoxes;
+}
+//#endregion
+//#region src/lib/utils.ts
+const areOrdersEqual = (a, b) => a.length === b.length && a.every((key, index) => key === b[index]);
+function swap(array, i, j) {
+	const temp = array[i];
+	array[i] = array[j];
+	array[j] = temp;
+}
+//#endregion
+//#region src/components.tsx
+if (typeof window !== "undefined") import("drag-drop-touch");
+function Animation({ duration, children }) {
+	const [boundingBox, prevBoundingBox, setBoundingBox] = useStateWithHistory({});
+	useLayoutEffect(() => {
+		if (duration > 0) setBoundingBox(calculateBoundingBoxes(children));
+		else setBoundingBox({});
+	}, [children]);
+	useLayoutEffect(() => {
+		if (duration <= 0 || !prevBoundingBox || !Object.keys(prevBoundingBox).length) return;
+		children.forEach((child) => {
+			const { key } = child;
+			if (key == null) return;
+			const domNode = child.props.ref.current;
+			if (!domNode) return;
+			const { left: prevLeft, top: prevTop } = prevBoundingBox[key] || {};
+			const { left, top } = boundingBox[key] || {};
+			const changeInX = prevLeft - left;
+			const changeInY = prevTop - top;
+			if (!changeInX && !changeInY) return;
+			requestAnimationFrame(() => {
+				domNode.style.transform = `translate(${changeInX}px, ${changeInY}px)`;
+				domNode.style.transition = "none";
+				requestAnimationFrame(() => {
+					domNode.style.transform = "";
+					domNode.style.transition = `transform ${duration}ms`;
+				});
+			});
+		});
+	}, [boundingBox]);
+	return children;
+}
+function ReorderIcon({ children = /* @__PURE__ */ React.createElement(PiDotsSixVerticalBold, null), style, ...props }) {
+	return /* @__PURE__ */ React.createElement("span", {
+		style: {
+			cursor: "grab",
+			...style
+		},
+		...props
+	}, children);
+}
+function ReorderItem({ useOnlyIconToDrag, disable, ref, style, children, onTouchEnd: propOnTouchEnd, ...events }) {
+	const { draggable, onTouchEnd: draggableOnTouchEnd, ...draggableProps } = useDraggable();
+	const recursiveClone = (children) => Children.map(children, (child) => {
+		if (!isValidElement(child)) return child;
+		return cloneElement(child, child.type === ReorderIcon ? draggableProps : {}, recursiveClone(child.props.children));
+	});
+	const recursiveChildren = useMemo(() => useOnlyIconToDrag ? recursiveClone(children) : children, [useOnlyIconToDrag, children]);
+	return /* @__PURE__ */ React.createElement("div", {
+		ref,
+		draggable: !disable && draggable,
+		style: {
+			...style,
+			touchAction: "pan-y",
+			cursor: useOnlyIconToDrag ? "default" : "grab"
+		},
+		...!disable && {
+			...events,
+			...!useOnlyIconToDrag && draggableProps,
+			onTouchEnd: (event) => {
+				draggableOnTouchEnd(event);
+				propOnTouchEnd(event);
+			}
+		}
+	}, recursiveChildren);
+}
+function ReorderList({ useOnlyIconToDrag = false, selectedItemOpacity = .5, animationDuration = 300, preserveOrder = true, onPositionChange, disabled = false, props, children }) {
+	const containerRef = useRef(null);
+	const itemRefs = useRef(/* @__PURE__ */ new Map());
+	const [order, setOrder] = useState([]);
+	const [dragState, setDragState] = useState();
+	const [isAnimating, setIsAnimating] = useState(false);
+	const [scroll, setScroll] = useState();
+	const childMap = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		Children.forEach(children, (child) => {
+			if (!isValidElement(child)) return;
+			const { key, props } = child;
+			if (key != null) map.set(key, {
+				child,
+				disabled: props["data-disable-reorder"]
+			});
+		});
+		return map;
+	}, [children]);
+	const orderedChildren = useMemo(() => {
+		if (!order.length) return [];
+		return order.flatMap((key, orderIndex) => {
+			const entry = childMap.get(key);
+			if (!entry) return [];
+			const { child, disabled } = entry;
+			const ref = getRef(key);
+			const isSelected = dragState?.currentIndex === orderIndex;
+			return /* @__PURE__ */ React.createElement(ReorderItem, {
+				key,
+				ref,
+				useOnlyIconToDrag,
+				disable: disabled,
+				style: { opacity: isSelected ? selectedItemOpacity : 1 },
+				onDragStart: (event) => {
+					event.stopPropagation();
+					setDragState({
+						startIndex: orderIndex,
+						currentIndex: orderIndex,
+						startOrder: [...order],
+						startRect: ref.current?.getBoundingClientRect?.() || void 0
+					});
+				},
+				onDragEnter: (event) => {
+					event.stopPropagation();
+					if (!dragState || dragState.currentIndex === orderIndex || isAnimating) return;
+					const { width: startWidth, height: startHeight } = dragState.startRect || {
+						width: 0,
+						height: 0
+					};
+					const { left, top, width, height } = event.currentTarget.getBoundingClientRect();
+					if (event.clientX - left > Math.min(startWidth, width) || event.clientY - top > Math.min(startHeight, height)) return;
+					setDragState((prev) => prev ? {
+						...prev,
+						currentIndex: orderIndex
+					} : void 0);
+					setOrder(() => {
+						const newOrder = [...dragState.startOrder];
+						const shiftForward = dragState.startIndex < orderIndex;
+						const increment = shiftForward ? 1 : -1;
+						let currentPos = dragState.startIndex;
+						for (let index = dragState.startIndex + increment; shiftForward ? index <= orderIndex : index >= orderIndex; index += increment) {
+							const key = dragState.startOrder[index];
+							if (childMap.get(key)?.disabled) continue;
+							swap(newOrder, currentPos, index);
+							currentPos = index;
+						}
+						return newOrder;
+					});
+					setIsAnimating(true);
+					setTimeout(() => setIsAnimating(false), animationDuration);
+				},
+				onDragEnd: handleDragEnd,
+				onTouchMove: (event) => {
+					if (!dragState) return;
+					const { clientX, screenX, clientY, screenY } = event.touches[0];
+					const left = clientX < scrollThreshold.x ? -5 : innerWidth - screenX < scrollThreshold.x ? 5 : 0;
+					const top = clientY < scrollThreshold.y ? -10 : innerHeight - screenY < scrollThreshold.y ? 10 : 0;
+					setScroll(left || top ? {
+						left,
+						top
+					} : void 0);
+				},
+				onTouchEnd: () => setScroll(void 0)
+			}, child);
+		});
+	}, [
+		childMap,
+		order,
+		dragState,
+		isAnimating,
+		useOnlyIconToDrag,
+		selectedItemOpacity,
+		animationDuration
+	]);
+	function getRef(key) {
+		if (!itemRefs.current.has(key)) itemRefs.current.set(key, createRef());
+		return itemRefs.current.get(key);
+	}
+	function handleDragEnd(event) {
+		if (event) {
+			event.stopPropagation();
+			if (dragState && dragState.currentIndex !== dragState.startIndex) onPositionChange?.({
+				start: dragState.startIndex,
+				end: dragState.currentIndex,
+				oldOrder: dragState.startOrder,
+				newOrder: order,
+				revert: () => setOrder(dragState.startOrder)
+			});
+		}
+		setDragState(void 0);
+		setScroll(void 0);
+	}
+	useEffect(() => {
+		const currentKeys = [];
+		Children.forEach(children, (child) => {
+			if (!isValidElement(child)) return;
+			const { key } = child;
+			if (key != null) currentKeys.push(key);
+		});
+		let newOrder;
+		if (preserveOrder) {
+			const currentKeySet = new Set(currentKeys);
+			const orderSet = new Set(order);
+			const newKeys = currentKeys.filter((key) => !orderSet.has(key));
+			newOrder = [...order.filter((key) => currentKeySet.has(key)), ...newKeys];
+		} else newOrder = currentKeys;
+		if (!areOrdersEqual(order, newOrder)) {
+			if (dragState) setDragState(void 0);
+			setOrder(newOrder);
+		}
+	}, [children]);
+	useEffect(() => {
+		if (!scroll) return;
+		const { left, top } = scroll;
+		const { scrollWidth, scrollHeight } = document.body;
+		const interval = setInterval(() => {
+			if (left < 0 || top < 0 || scrollWidth - scrollX > innerWidth - left || scrollHeight - scrollY > innerHeight - top) scrollBy({
+				left,
+				top,
+				behavior: "instant"
+			});
+		}, 20);
+		return () => clearInterval(interval);
+	}, [scroll]);
+	return /* @__PURE__ */ React.createElement("div", {
+		ref: containerRef,
+		...props
+	}, disabled ? children : /* @__PURE__ */ React.createElement(Animation, { duration: dragState && !scroll ? animationDuration : 0 }, orderedChildren));
+}
+//#endregion
+export { ReorderIcon, ReorderList as default };

package/dist/types-CRxTdmXH.d.mts

@@ -0,0 +1,50 @@
+import { CSSProperties, DetailedHTMLProps, DragEventHandler, HTMLAttributes, Key, MouseEventHandler, ReactElement, ReactNode, RefObject, TouchEventHandler } from "react";
+
+//#region src/types.d.ts
+type AnimationProps = {
+  duration: number;
+  children: Child[];
+};
+type BoundingBox = Record<string, DOMRect>;
+type Child = ReactElement<{
+  ref: RefObject<HTMLElement>;
+}>;
+type Order = Key[];
+type DivDragEventHandler = DragEventHandler<HTMLDivElement>;
+type DivMouseEventHandler = MouseEventHandler<HTMLDivElement>;
+type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+type DivRef = RefObject<HTMLDivElement | null>;
+type DivTouchEventHandler = TouchEventHandler<HTMLDivElement>;
+type PositionChangeHandler = (event: {
+  start: number;
+  end: number;
+  oldOrder: Order;
+  newOrder: Order;
+  revert: RevertHandler;
+}) => void;
+type ReorderItemProps = {
+  useOnlyIconToDrag: boolean;
+  disable?: boolean;
+  ref: DivRef;
+  style: CSSProperties;
+  onDragStart?: DivDragEventHandler;
+  onDragEnter: DivDragEventHandler;
+  onDragEnd: DivDragEventHandler;
+  onTouchMove: DivTouchEventHandler;
+  onTouchEnd: DivTouchEventHandler;
+  children: ReactNode;
+};
+type ReorderListProps = {
+  useOnlyIconToDrag?: boolean;
+  selectedItemOpacity?: number;
+  animationDuration?: number;
+  preserveOrder?: boolean;
+  onPositionChange?: PositionChangeHandler;
+  disabled?: boolean;
+  props?: DivProps;
+  children?: ReactNode;
+};
+type RevertHandler = () => void;
+type IconProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+//#endregion
+export { DivMouseEventHandler as a, DivTouchEventHandler as c, PositionChangeHandler as d, ReorderItemProps as f, DivDragEventHandler as i, IconProps as l, RevertHandler as m, BoundingBox as n, DivProps as o, ReorderListProps as p, Child as r, DivRef as s, AnimationProps as t, Order as u };

package/dist/types.d.mts

@@ -0,0 +1,2 @@
+import { a as DivMouseEventHandler, c as DivTouchEventHandler, d as PositionChangeHandler, f as ReorderItemProps, i as DivDragEventHandler, l as IconProps, m as RevertHandler, n as BoundingBox, o as DivProps, p as ReorderListProps, r as Child, s as DivRef, t as AnimationProps, u as Order } from "./types-CRxTdmXH.mjs";
+export { AnimationProps, BoundingBox, Child, DivDragEventHandler, DivMouseEventHandler, DivProps, DivRef, DivTouchEventHandler, IconProps, Order, PositionChangeHandler, ReorderItemProps, ReorderListProps, RevertHandler };

package/dist/types.mjs

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-reorder-list",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "description": "A simple react component that facilitates the reordering of JSX/HTML elements through drag-and-drop functionality, allowing for easy position changes.",
   "license": "MIT",
   "author": "Sahil Aggarwal <aggarwalsahil2004@gmail.com>",
@@ -15,15 +15,14 @@
   },
   "type": "module",
   "exports": {
-    ".": "./dist/index.js",
-    "./types": "./dist/types.js"
+    ".": "./dist/index.mjs",
+    "./types": "./dist/types.mjs"
   },
-  "main": "dist/index.js",
   "files": [
     "dist"
   ],
   "sideEffects": true,
-  "types": "dist/index.d.ts",
+  "types": "./dist/index.d.ts",
   "dependencies": {
     "drag-drop-touch": "^1.3.1"
   },
@@ -35,7 +34,7 @@
     "@types/react": "^19.2.14",
     "prettier-package-json": "^2.8.0",
     "release-it": "^19.2.4",
-    "tsup": "^8.5.1",
+    "tsdown": "^0.21.0",
     "typescript": "^5.9.3"
   },
   "keywords": [
@@ -50,8 +49,8 @@
   ],
   "scripts": {
     "build": "pnpm i && pnpm run compile",
-    "compile": "tsup",
-    "dev": "tsup --watch",
+    "compile": "tsdown",
+    "dev": "tsdown --watch",
     "dry-release": "release-it --ci --dry-run",
     "prettier": "prettier-package-json --write package.json",
     "pub": "pnpm login && pnpm publish",

package/dist/chunks/chunk-RWSH3ATP.js

@@ -1,248 +0,0 @@
-import React2, { useRef, useState, useMemo, Children, isValidElement, createRef, useEffect, useLayoutEffect, useCallback, cloneElement } from 'react';
-
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
-// src/constants.ts
-var scrollThreshold = { x: 10, y: 100 };
-function useDraggable(initValue = false) {
-  const [draggable, setDraggable] = useState(initValue);
-  const enableDragging = useCallback(() => setDraggable(true), []);
-  const disableDragging = useCallback(() => setDraggable(false), []);
-  return { draggable, onMouseEnter: enableDragging, onMouseLeave: disableDragging, onTouchStart: enableDragging, onTouchEnd: disableDragging };
-}
-function useStateWithHistory(initValue) {
-  const [state, setState] = useState(initValue);
-  const [prevState, setPrevState] = useState();
-  function setStateWithHistory(value) {
-    setPrevState(state);
-    setState(value);
-  }
-  return [state, prevState, setStateWithHistory];
-}
-function PiDotsSixVerticalBold(props) {
-  return /* @__PURE__ */ React2.createElement("span", __spreadValues({}, props), /* @__PURE__ */ React2.createElement("svg", { viewBox: "0 0 256 256", fill: "currentColor", width: "1.25rem", height: "1.25rem" }, /* @__PURE__ */ React2.createElement("path", { d: "M108,60A16,16,0,1,1,92,44,16,16,0,0,1,108,60Zm56,16a16,16,0,1,0-16-16A16,16,0,0,0,164,76ZM92,112a16,16,0,1,0,16,16A16,16,0,0,0,92,112Zm72,0a16,16,0,1,0,16,16A16,16,0,0,0,164,112ZM92,180a16,16,0,1,0,16,16A16,16,0,0,0,92,180Zm72,0a16,16,0,1,0,16,16A16,16,0,0,0,164,180Z" })));
-}
-function calculateBoundingBoxes(children) {
-  const boundingBoxes = {};
-  Children.forEach(children, (child) => {
-    const { key } = child;
-    if (key) boundingBoxes[key] = child.props.ref.current.getBoundingClientRect();
-  });
-  return boundingBoxes;
-}
-
-// src/lib/utils.ts
-var areOrdersEqual = (a, b) => a.length === b.length && a.every((key, index) => key === b[index]);
-function swap(array, i, j) {
-  const temp = array[i];
-  array[i] = array[j];
-  array[j] = temp;
-}
-
-// src/components.tsx
-if (typeof window !== "undefined") import('drag-drop-touch');
-function Animation({ duration, children }) {
-  const [boundingBox, prevBoundingBox, setBoundingBox] = useStateWithHistory({});
-  useLayoutEffect(() => {
-    if (duration > 0) setBoundingBox(calculateBoundingBoxes(children));
-    else setBoundingBox({});
-  }, [children]);
-  useLayoutEffect(() => {
-    if (duration <= 0 || !prevBoundingBox || !Object.keys(prevBoundingBox).length) return;
-    children.forEach((child) => {
-      const { key } = child;
-      if (!key) return;
-      const domNode = child.props.ref.current;
-      if (!domNode) return;
-      const { left: prevLeft, top: prevTop } = prevBoundingBox[key] || {};
-      const { left, top } = boundingBox[key] || {};
-      const changeInX = prevLeft - left;
-      const changeInY = prevTop - top;
-      if (!changeInX && !changeInY) return;
-      requestAnimationFrame(() => {
-        domNode.style.transform = `translate(${changeInX}px, ${changeInY}px)`;
-        domNode.style.transition = "none";
-        requestAnimationFrame(() => {
-          domNode.style.transform = "";
-          domNode.style.transition = `transform ${duration}ms`;
-        });
-      });
-    });
-  }, [boundingBox]);
-  return children;
-}
-function ReorderIcon(_a) {
-  var _b = _a, { children = /* @__PURE__ */ React2.createElement(PiDotsSixVerticalBold, null), style } = _b, props = __objRest(_b, ["children", "style"]);
-  return /* @__PURE__ */ React2.createElement("span", __spreadValues({ style: __spreadValues({ cursor: "grab" }, style) }, props), children);
-}
-function ReorderItem(_a) {
-  var _b = _a, { useOnlyIconToDrag, disable, ref, style, children, onTouchEnd: propOnTouchEnd } = _b, events = __objRest(_b, ["useOnlyIconToDrag", "disable", "ref", "style", "children", "onTouchEnd"]);
-  const _a2 = useDraggable(), { draggable, onTouchEnd: draggableOnTouchEnd } = _a2, draggableProps = __objRest(_a2, ["draggable", "onTouchEnd"]);
-  const recursiveClone = (children2) => Children.map(children2, (child) => {
-    if (!isValidElement(child)) return child;
-    return cloneElement(child, child.type === ReorderIcon ? draggableProps : {}, recursiveClone(child.props.children));
-  });
-  const recursiveChildren = useMemo(() => useOnlyIconToDrag ? recursiveClone(children) : children, [useOnlyIconToDrag, children]);
-  return /* @__PURE__ */ React2.createElement(
-    "div",
-    __spreadValues({
-      ref,
-      draggable: !disable && draggable,
-      style: __spreadProps(__spreadValues({}, style), { touchAction: "pan-y", cursor: useOnlyIconToDrag ? "default" : "grab" })
-    }, !disable && __spreadProps(__spreadValues(__spreadValues({}, events), !useOnlyIconToDrag && draggableProps), {
-      onTouchEnd: (event) => {
-        draggableOnTouchEnd(event);
-        propOnTouchEnd(event);
-      }
-    })),
-    recursiveChildren
-  );
-}
-function ReorderList({ useOnlyIconToDrag = false, selectedItemOpacity = 0.5, animationDuration = 300, preserveOrder = true, onPositionChange, disabled = false, props, children }) {
-  const containerRef = useRef(null);
-  const itemRefs = useRef(/* @__PURE__ */ new Map());
-  const [order, setOrder] = useState([]);
-  const [dragState, setDragState] = useState();
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [scroll, setScroll] = useState();
-  const childMap = useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    Children.forEach(children, (child) => {
-      if (!isValidElement(child)) return;
-      const { key, props: props2 } = child;
-      if (!key) return;
-      map.set(key, { child, disabled: props2["data-disable-reorder"] });
-    });
-    return map;
-  }, [children]);
-  const orderedChildren = useMemo(() => {
-    if (!order.length) return [];
-    return order.flatMap((key, orderIndex) => {
-      const { child, disabled: disabled2 } = childMap.get(key) || {};
-      if (!isValidElement(child)) return [];
-      const ref = getRef(key);
-      const isSelected = (dragState == null ? void 0 : dragState.currentIndex) === orderIndex;
-      return /* @__PURE__ */ React2.createElement(
-        ReorderItem,
-        {
-          key,
-          ref,
-          useOnlyIconToDrag,
-          disable: disabled2,
-          style: { opacity: isSelected ? selectedItemOpacity : 1 },
-          onDragStart: (event) => {
-            var _a, _b;
-            event.stopPropagation();
-            setDragState({ startIndex: orderIndex, currentIndex: orderIndex, startOrder: [...order], startRect: ((_b = (_a = ref.current) == null ? void 0 : _a.getBoundingClientRect) == null ? void 0 : _b.call(_a)) || void 0 });
-          },
-          onDragEnter: (event) => {
-            event.stopPropagation();
-            if (!dragState || dragState.currentIndex === orderIndex || isAnimating) return;
-            const { width: startWidth, height: startHeight } = dragState.startRect || { width: 0, height: 0 };
-            const { left, top, width, height } = event.currentTarget.getBoundingClientRect();
-            if (event.clientX - left > Math.min(startWidth, width) || event.clientY - top > Math.min(startHeight, height)) return;
-            setDragState((prev) => prev ? __spreadProps(__spreadValues({}, prev), { currentIndex: orderIndex }) : void 0);
-            setOrder(() => {
-              var _a;
-              const newOrder = [...dragState.startOrder];
-              const shiftForward = dragState.startIndex < orderIndex;
-              const increment = shiftForward ? 1 : -1;
-              let currentPos = dragState.startIndex;
-              for (let index = dragState.startIndex + increment; shiftForward ? index <= orderIndex : index >= orderIndex; index += increment) {
-                const key2 = dragState.startOrder[index];
-                if ((_a = childMap.get(key2)) == null ? void 0 : _a.disabled) continue;
-                swap(newOrder, currentPos, index);
-                currentPos = index;
-              }
-              return newOrder;
-            });
-            setIsAnimating(true);
-            setTimeout(() => setIsAnimating(false), animationDuration);
-          },
-          onDragEnd: handleDragEnd,
-          onTouchMove: (event) => {
-            if (!dragState) return;
-            const { clientX, screenX, clientY, screenY } = event.touches[0];
-            const left = clientX < scrollThreshold.x ? -5 : innerWidth - screenX < scrollThreshold.x ? 5 : 0;
-            const top = clientY < scrollThreshold.y ? -10 : innerHeight - screenY < scrollThreshold.y ? 10 : 0;
-            setScroll(left || top ? { left, top } : void 0);
-          },
-          onTouchEnd: () => setScroll(void 0)
-        },
-        child
-      );
-    });
-  }, [childMap, order, dragState, isAnimating, useOnlyIconToDrag, selectedItemOpacity, animationDuration]);
-  function getRef(key) {
-    if (!itemRefs.current.has(key)) itemRefs.current.set(key, createRef());
-    return itemRefs.current.get(key);
-  }
-  function handleDragEnd(event) {
-    if (event) {
-      event.stopPropagation();
-      if (dragState && dragState.currentIndex !== dragState.startIndex) onPositionChange == null ? void 0 : onPositionChange({ start: dragState.startIndex, end: dragState.currentIndex, oldOrder: dragState.startOrder, newOrder: order, revert: () => setOrder(dragState.startOrder) });
-    }
-    setDragState(void 0);
-    setScroll(void 0);
-  }
-  useEffect(() => {
-    const currentKeys = [];
-    Children.forEach(children, (child) => {
-      const { key } = child;
-      if (key) currentKeys.push(key);
-    });
-    let newOrder;
-    if (preserveOrder) {
-      const currentKeySet = new Set(currentKeys);
-      const newKeys = currentKeys.filter((key) => !order.includes(key));
-      const filteredOrder = order.filter((key) => currentKeySet.has(key));
-      newOrder = [...filteredOrder, ...newKeys];
-    } else newOrder = currentKeys;
-    if (!areOrdersEqual(order, newOrder)) {
-      if (dragState) setDragState(void 0);
-      setOrder(newOrder);
-    }
-  }, [children]);
-  useEffect(() => {
-    if (!scroll) return;
-    const { left, top } = scroll;
-    const { scrollWidth, scrollHeight } = document.body;
-    const interval = setInterval(() => {
-      if (left < 0 || top < 0 || scrollWidth - scrollX > innerWidth - left || scrollHeight - scrollY > innerHeight - top) scrollBy({ left, top, behavior: "instant" });
-    }, 20);
-    return () => clearInterval(interval);
-  }, [scroll]);
-  return /* @__PURE__ */ React2.createElement("div", __spreadValues({ ref: containerRef }, props), disabled ? children : /* @__PURE__ */ React2.createElement(Animation, { duration: dragState && !scroll ? animationDuration : 0 }, orderedChildren));
-}
-
-export { ReorderIcon, ReorderList };

package/dist/components.d.ts

@@ -1,7 +0,0 @@
-import { JSX } from 'react';
-import { ReorderListProps, DivProps } from './types.js';
-
-declare function ReorderIcon({ children, style, ...props }: DivProps): JSX.Element;
-declare function ReorderList({ useOnlyIconToDrag, selectedItemOpacity, animationDuration, preserveOrder, onPositionChange, disabled, props, children }: ReorderListProps): JSX.Element;
-
-export { ReorderIcon, ReorderList as default };

package/dist/components.js

@@ -1 +0,0 @@
-export { ReorderIcon, ReorderList as default } from './chunks/chunk-RWSH3ATP.js';

package/dist/index.d.ts

@@ -1,3 +0,0 @@
-export { ReorderIcon, default } from './components.js';
-import 'react';
-import './types.js';

package/dist/index.js

@@ -1 +0,0 @@
-export { ReorderIcon, ReorderList as default } from './chunks/chunk-RWSH3ATP.js';

package/dist/types.d.ts

@@ -1,49 +0,0 @@
-import { Key, DetailedHTMLProps, HTMLAttributes, ReactNode, ReactElement, RefObject, DragEventHandler, MouseEventHandler, TouchEventHandler, CSSProperties } from 'react';
-
-type AnimationProps = {
-    duration: number;
-    children: Child[];
-};
-type BoundingBox = Record<string, DOMRect>;
-type Child = ReactElement<{
-    ref: RefObject<HTMLElement>;
-}>;
-type Order = Key[];
-type DivDragEventHandler = DragEventHandler<HTMLDivElement>;
-type DivMouseEventHandler = MouseEventHandler<HTMLDivElement>;
-type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-type DivRef = RefObject<HTMLDivElement | null>;
-type DivTouchEventHandler = TouchEventHandler<HTMLDivElement>;
-type PositionChangeHandler = (event: {
-    start: number;
-    end: number;
-    oldOrder: Order;
-    newOrder: Order;
-    revert: RevertHandler;
-}) => void;
-type ReorderItemProps = {
-    useOnlyIconToDrag: boolean;
-    disable?: boolean;
-    ref: DivRef;
-    style: CSSProperties;
-    onDragStart?: DivDragEventHandler;
-    onDragEnter: DivDragEventHandler;
-    onDragEnd: DivDragEventHandler;
-    onTouchMove: DivTouchEventHandler;
-    onTouchEnd: DivTouchEventHandler;
-    children: ReactNode;
-};
-type ReorderListProps = {
-    useOnlyIconToDrag?: boolean;
-    selectedItemOpacity?: number;
-    animationDuration?: number;
-    preserveOrder?: boolean;
-    onPositionChange?: PositionChangeHandler;
-    disabled?: boolean;
-    props?: DivProps;
-    children?: ReactNode;
-};
-type RevertHandler = () => void;
-type IconProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
-
-export type { AnimationProps, BoundingBox, Child, DivDragEventHandler, DivMouseEventHandler, DivProps, DivRef, DivTouchEventHandler, IconProps, Order, PositionChangeHandler, ReorderItemProps, ReorderListProps, RevertHandler };

package/dist/types.js

@@ -1 +0,0 @@
-