react-reorder-list 0.6.4 → 0.6.6

package/dist/hooks.d.ts

@@ -1,10 +1,6 @@
-import { MouseEvent, TouchEvent } from "react";
-export declare function useDraggable(initValue?: boolean): {
-    draggable: boolean;
-    draggableProps: {
-        onMouseEnter: (event: MouseEvent | TouchEvent) => void;
-        onMouseLeave: (event: MouseEvent | TouchEvent) => void;
-        onTouchStart: (event: MouseEvent | TouchEvent) => void;
-        onTouchEnd: (event: MouseEvent | TouchEvent) => void;
-    };
-};
+export declare function useDraggable(initValue?: boolean): readonly [boolean, {
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    onTouchStart: () => void;
+    onTouchEnd: () => void;
+}];

package/dist/hooks.js

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

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
+import React, { CSSProperties, DetailedHTMLProps, DragEventHandler, HTMLAttributes, ReactNode, TouchEventHandler } from "react";
 export type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 export type PositionChangeHandler = (params?: {
     start?: number;
@@ -18,6 +18,18 @@ export type ReorderListProps = {
     props?: Props;
     children?: ReactNode;
 };
+export type DivDragEventHandler = DragEventHandler<HTMLDivElement>;
+export type DivTouchEventHandler = TouchEventHandler<HTMLDivElement>;
+export type ReorderItemProps = {
+    useOnlyIconToDrag: boolean;
+    style: CSSProperties;
+    onDragStart?: DivDragEventHandler;
+    onDragEnter: DivDragEventHandler;
+    onDragEnd: DivDragEventHandler;
+    onTouchMove: DivTouchEventHandler;
+    onTouchEnd: DivTouchEventHandler;
+    children: ReactNode;
+};
 export type { IconProps } from "./icons.js";
 export default function ReorderList({ useOnlyIconToDrag, selectedItemOpacity, animationDuration, watchChildrenUpdates, preserveOrder, onPositionChange, disabled, props, children }: ReorderListProps): React.JSX.Element;
 export declare function ReorderIcon({ children, style, ...props }: Props): React.JSX.Element;

package/dist/index.js

@@ -90,7 +90,6 @@ 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];
@@ -109,7 +108,7 @@ 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"]);
+    const [draggable, _b] = useDraggable(), { onTouchEnd: draggableOnTouchEnd } = _b, draggableProps = __rest(_b, ["onTouchEnd"]);
     if (!draggable)
         props.onDragStart = undefined;
     const recursiveClone = (children) => Children.map(children, (child) => {
@@ -119,8 +118,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);
+            draggableOnTouchEnd();
             propOnTouchEnd(event);
         } }), recursiveChildren));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-reorder-list",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "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,10 +26,10 @@
   },
   "homepage": "https://github.com/SahilAggarwal2004/react-reorder-list#readme",
   "peerDependencies": {
-    "react": ">=16.0.0"
+    "react": ">=17.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.54"
+    "@types/react": "^18.2.55"
   },
   "dependencies": {
     "drag-drop-touch": "^1.3.1"