react-reorder-list 0.10.1 → 0.10.2

package/dist/index.d.mts

@@ -0,0 +1,21 @@
+import { DivProps, ReorderListProps } from "./types.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,284 @@
+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) 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) return;
+			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 { child, disabled } = childMap.get(key) || {};
+			if (!isValidElement(child)) return [];
+			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) => {
+			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));
+			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.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 { 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.2",
   "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,10 +15,10 @@
   },
   "type": "module",
   "exports": {
-    ".": "./dist/index.js",
-    "./types": "./dist/types.js"
+    ".": "./dist/index.mjs",
+    "./types": "./dist/types.mjs"
   },
-  "main": "dist/index.js",
+  "main": "dist/index.mjs",
   "files": [
     "dist"
   ],
@@ -35,7 +35,7 @@
     "@types/react": "^19.2.14",
     "prettier-package-json": "^2.8.0",
     "release-it": "^19.2.4",
-    "tsup": "^8.5.1",
+    "tsdown": "^0.20.3",
     "typescript": "^5.9.3"
   },
   "keywords": [
@@ -50,8 +50,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 @@
-