react-reorder-list 0.6.2 → 0.6.4

package/dist/hooks.d.ts

@@ -1,6 +1,10 @@
-import { DetailedHTMLProps, HTMLAttributes } from "react";
-export type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-export default function useDraggable(initValue?: boolean): {
+import { MouseEvent, TouchEvent } from "react";
+export declare function useDraggable(initValue?: boolean): {
     draggable: boolean;
-    draggableProps: Props;
+    draggableProps: {
+        onMouseEnter: (event: MouseEvent | TouchEvent) => void;
+        onMouseLeave: (event: MouseEvent | TouchEvent) => void;
+        onTouchStart: (event: MouseEvent | TouchEvent) => void;
+        onTouchEnd: (event: MouseEvent | TouchEvent) => void;
+    };
 };

package/dist/hooks.js

@@ -1,8 +1,14 @@
 import { useState } from "react";
-export default function useDraggable(initValue = false) {
+export function useDraggable(initValue = false) {
     const [draggable, setDraggable] = useState(initValue);
-    const enableDragging = () => setDraggable(true);
-    const disableDragging = () => setDraggable(false);
+    const enableDragging = (event) => {
+        event.stopPropagation();
+        setDraggable(true);
+    };
+    const disableDragging = (event) => {
+        event.stopPropagation();
+        setDraggable(false);
+    };
     const draggableProps = { onMouseEnter: enableDragging, onMouseLeave: disableDragging, onTouchStart: enableDragging, onTouchEnd: disableDragging };
     return { draggable, draggableProps };
 }

package/dist/index.d.ts

@@ -1,6 +1,5 @@
-import React, { ReactNode } from "react";
-import { Props } from "./hooks.js";
-export type { Props } from "./hooks.js";
+import React, { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
+export type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 export type PositionChangeHandler = (params?: {
     start?: number;
     end?: number;

package/dist/index.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { Children, cloneElement, createRef, forwardRef, isValidElement, useEffect, useMemo, useRef, useState } from "react";
 import { PiDotsSixVerticalBold } from "./icons.js";
 import Animation from "./animation.js";
-import useDraggable from "./hooks.js";
+import { useDraggable } from "./hooks.js";
 if (typeof window !== "undefined")
     import("drag-drop-touch");
 const scrollThreshold = { x: 10, y: 100 };
@@ -90,6 +90,9 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
                 setIsAnimating(true);
                 setTimeout(() => setIsAnimating(false), animationDuration);
             }, onDragEnd: handleDragEnd, onTouchMove: (event) => {
+                event.stopPropagation();
+                if (start === -1)
+                    return;
                 const { clientX, screenX, clientY, screenY } = event.touches[0];
                 let left = 0, top = 0;
                 if (clientX < scrollThreshold.x)
@@ -107,6 +110,8 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
 function ReorderItem(_a, ref) {
     var { useOnlyIconToDrag, onTouchEnd: propOnTouchEnd, children } = _a, props = __rest(_a, ["useOnlyIconToDrag", "onTouchEnd", "children"]);
     const _b = useDraggable(), { draggable } = _b, _c = _b.draggableProps, { onTouchEnd: draggableOnTouchEnd } = _c, draggableProps = __rest(_c, ["onTouchEnd"]);
+    if (!draggable)
+        props.onDragStart = undefined;
     const recursiveClone = (children) => Children.map(children, (child) => {
         if (!isValidElement(child))
             return child;
@@ -114,6 +119,7 @@ function ReorderItem(_a, ref) {
     });
     const recursiveChildren = useMemo(() => (useOnlyIconToDrag ? recursiveClone(children) : children), [useOnlyIconToDrag, children]);
     return (React.createElement("div", Object.assign({ ref: ref, draggable: draggable }, props, (!useOnlyIconToDrag && draggableProps), { onTouchEnd: (event) => {
+            event.stopPropagation();
             draggableOnTouchEnd(event);
             propOnTouchEnd(event);
         } }), recursiveChildren));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-reorder-list",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "A simple react component that facilitates the reordering of JSX/HTML elements through drag-and-drop functionality, allowing for easy position changes.",
   "type": "module",
   "main": "dist/index.js",
@@ -26,11 +26,10 @@
   },
   "homepage": "https://github.com/SahilAggarwal2004/react-reorder-list#readme",
   "peerDependencies": {
-    "react": ">=16.0.0",
-    "react-dom": ">=16.0.0"
+    "react": ">=16.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.48"
+    "@types/react": "^18.2.54"
   },
   "dependencies": {
     "drag-drop-touch": "^1.3.1"