react-reorder-list 0.10.2 → 0.10.3

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { DivProps, ReorderListProps } from "./types.mjs";
+import { o as DivProps, p as ReorderListProps } from "./types-CRxTdmXH.mjs";
 import { JSX } from "react";
 
 //#region src/components.d.ts

package/dist/index.mjs

@@ -1,11 +1,9 @@
 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) {
@@ -33,7 +31,6 @@ function useStateWithHistory(initValue) {
 		setStateWithHistory
 	];
 }
-
 //#endregion
 //#region src/icons.tsx
 function PiDotsSixVerticalBold(props) {
@@ -44,7 +41,6 @@ function PiDotsSixVerticalBold(props) {
 		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) {
@@ -55,7 +51,6 @@ function calculateBoundingBoxes(children) {
 	});
 	return boundingBoxes;
 }
-
 //#endregion
 //#region src/lib/utils.ts
 const areOrdersEqual = (a, b) => a.length === b.length && a.every((key, index) => key === b[index]);
@@ -64,7 +59,6 @@ function swap(array, i, j) {
 	array[i] = array[j];
 	array[j] = temp;
 }
-
 //#endregion
 //#region src/components.tsx
 if (typeof window !== "undefined") import("drag-drop-touch");
@@ -78,7 +72,7 @@ function Animation({ duration, children }) {
 		if (duration <= 0 || !prevBoundingBox || !Object.keys(prevBoundingBox).length) return;
 		children.forEach((child) => {
 			const { key } = child;
-			if (!key) return;
+			if (key == null) return;
 			const domNode = child.props.ref.current;
 			if (!domNode) return;
 			const { left: prevLeft, top: prevTop } = prevBoundingBox[key] || {};
@@ -144,8 +138,7 @@ function ReorderList({ useOnlyIconToDrag = false, selectedItemOpacity = .5, anim
 		Children.forEach(children, (child) => {
 			if (!isValidElement(child)) return;
 			const { key, props } = child;
-			if (!key) return;
-			map.set(key, {
+			if (key != null) map.set(key, {
 				child,
 				disabled: props["data-disable-reorder"]
 			});
@@ -155,8 +148,9 @@ function ReorderList({ useOnlyIconToDrag = false, selectedItemOpacity = .5, anim
 	const orderedChildren = useMemo(() => {
 		if (!order.length) return [];
 		return order.flatMap((key, orderIndex) => {
-			const { child, disabled } = childMap.get(key) || {};
-			if (!isValidElement(child)) return [];
+			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, {
@@ -247,13 +241,15 @@ function ReorderList({ useOnlyIconToDrag = false, selectedItemOpacity = .5, anim
 	useEffect(() => {
 		const currentKeys = [];
 		Children.forEach(children, (child) => {
+			if (!isValidElement(child)) return;
 			const { key } = child;
-			if (key) currentKeys.push(key);
+			if (key != null) currentKeys.push(key);
 		});
 		let newOrder;
 		if (preserveOrder) {
 			const currentKeySet = new Set(currentKeys);
-			const newKeys = currentKeys.filter((key) => !order.includes(key));
+			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)) {
@@ -279,6 +275,5 @@ function ReorderList({ useOnlyIconToDrag = false, selectedItemOpacity = .5, anim
 		...props
 	}, disabled ? children : /* @__PURE__ */ React.createElement(Animation, { duration: dragState && !scroll ? animationDuration : 0 }, orderedChildren));
 }
-
 //#endregion
-export { ReorderIcon, ReorderList as default };
+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

@@ -1,50 +1,2 @@
-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
+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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-reorder-list",
-  "version": "0.10.2",
+  "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>",
@@ -18,12 +18,11 @@
     ".": "./dist/index.mjs",
     "./types": "./dist/types.mjs"
   },
-  "main": "dist/index.mjs",
   "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",
-    "tsdown": "^0.20.3",
+    "tsdown": "^0.21.0",
     "typescript": "^5.9.3"
   },
   "keywords": [