react-reorder-list 0.7.2 → 0.8.0

package/CHANGELOG.md

@@ -0,0 +1,56 @@
+# 0.8.0 (06-12-2024)
+
+- **breaking:** Dropped support for React.js v18 in favor of React.js v19.
+
+## 0.7.2 (16-04-2024)
+
+- **change:** Switched from [pnpm](https://pnpm.io/) to [bun](https://bun.sh).
+
+## 0.7.0 (24-03-2024)
+
+- **feat:** Added `data-disable-reorder` prop for children of the `<ReorderList>` component. See [usage with data-disable-reorder](https://www.npmjs.com/package/react-reorder-list#disable-reordering-for-individual-children).
+
+## 0.6.7 (21-03-2024)
+
+- **remove:** Support for invalid React elements.
+
+## 0.6.3 (05-02-2024)
+
+- **fix:** Minor scrolling bug occurring on touch devices.
+
+## 0.6.1 (03-02-2024)
+
+- **fix:** Minor bugs.
+
+## 0.6.0 (27-01-2024)
+
+- **feat:** Added support for touch devices.
+
+## 0.5.0 (26-01-2024)
+
+- **feat:** Added `preserveOrder` prop in the `<ReorderList>` component. See [ReorderList Component API Reference](https://www.npmjs.com/package/react-reorder-list#reorderlist-component-api-reference).
+- **fix:** A bug where the library would not work in production if `useOnlyIconToDrag` was set to `true`.
+
+## 0.4.0 (26-01-2024)
+
+- **feat:** Added `revert` handler/function in the params of the `onPositionChange` handler. See type [PositionChangeHandler](https://www.npmjs.com/package/react-reorder-list#positionchangehandler).
+
+## 0.3.1 (25-01-2024)
+
+- **change:** Renamed `disable` prop to `disabled`. See [ReorderList Component API Reference](https://www.npmjs.com/package/react-reorder-list#reorderlist-component-api-reference).
+- **fixed:** Minor bugs.
+
+## 0.3.0 (24-01-2024)
+
+- **feat:** Added `watchChildrenUpdates` prop in `<ReorderList>`. See [ReorderList Component API Reference](https://www.npmjs.com/package/react-reorder-list#reorderlist-component-api-reference).
+- **improve:** Overall stability.
+
+## 0.2.0 (23-01-2024)
+
+- **feat:** Added `animationDuration` prop in `<ReorderList>` component. See [ReorderList Component API Reference](https://www.npmjs.com/package/react-reorder-list#reorderlist-component-api-reference).
+- **change:** Default value of the `useOnlyIconToDrag` prop to `false`. See [ReorderList Component API Reference](https://www.npmjs.com/package/react-reorder-list#reorderlist-component-api-reference).
+- **improve:** Overall stability.
+
+## 0.1.2 (21-01-2024)
+
+- **docs:** Added more details on [usage with ReorderIcon](https://www.npmjs.com/package/react-reorder-list#usage-with-reordericon).

package/dist/animation.js

@@ -6,7 +6,7 @@ function calculateBoundingBoxes(children) {
     Children.forEach(children, (child) => {
         const key = getKey(child);
         if (key)
-            boundingBoxes[key] = child.ref.current.getBoundingClientRect();
+            boundingBoxes[key] = child.props.ref.current.getBoundingClientRect();
     });
     return boundingBoxes;
 }
@@ -22,11 +22,10 @@ export default function Animation({ duration, children }) {
     useLayoutEffect(() => {
         if (duration > 0 && prevBoundingBox && Object.keys(prevBoundingBox).length)
             Children.forEach(children, (child) => {
-                var _a;
-                const domNode = (_a = child === null || child === void 0 ? void 0 : child.ref) === null || _a === void 0 ? void 0 : _a.current;
                 const key = getKey(child);
                 if (!key)
                     return;
+                const domNode = child.props.ref.current;
                 const { left: prevLeft, top: prevTop } = prevBoundingBox[key] || {};
                 const { left, top } = boundingBox[key];
                 const changeInX = prevLeft - left, changeInY = prevTop - top;

package/dist/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const scrollThreshold: {
+    x: number;
+    y: number;
+};

package/dist/constants.js

@@ -0,0 +1 @@
+export const scrollThreshold = { x: 10, y: 100 };

package/dist/hooks.d.ts

@@ -4,4 +4,4 @@ export declare function useDraggable(initValue?: boolean): readonly [boolean, {
     onTouchStart: () => void;
     onTouchEnd: () => void;
 }];
-export declare function usePrevious<T>(value: T): T | undefined;
+export declare function usePrevious<T>(value: T): T | null;

package/dist/hooks.js

@@ -7,7 +7,7 @@ export function useDraggable(initValue = false) {
     return [draggable, draggableProps];
 }
 export function usePrevious(value) {
-    const prevChildrenRef = useRef();
+    const prevChildrenRef = useRef(null);
     useEffect(() => {
         prevChildrenRef.current = value;
     }, [value]);

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties, DetailedHTMLProps, DragEventHandler, HTMLAttributes, ReactNode, TouchEventHandler } from "react";
+import { CSSProperties, DetailedHTMLProps, DragEventHandler, HTMLAttributes, JSX, ReactNode, RefObject, TouchEventHandler } from "react";
 export type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 export type PositionChangeHandler = (params?: {
     start?: number;
@@ -23,6 +23,7 @@ export type DivTouchEventHandler = TouchEventHandler<HTMLDivElement>;
 export type ReorderItemProps = {
     useOnlyIconToDrag: boolean;
     disable: boolean;
+    ref: RefObject<HTMLDivElement | null>;
     style: CSSProperties;
     onDragStart?: DivDragEventHandler;
     onDragEnter: DivDragEventHandler;
@@ -32,5 +33,5 @@ export type ReorderItemProps = {
     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;
+export declare function ReorderIcon({ children, style, ...props }: Props): JSX.Element;
+export default function ReorderList({ useOnlyIconToDrag, selectedItemOpacity, animationDuration, watchChildrenUpdates, preserveOrder, onPositionChange, disabled, props, children }: ReorderListProps): JSX.Element;

package/dist/index.js

@@ -9,15 +9,34 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { Children, cloneElement, createRef, forwardRef, isValidElement, useEffect, useMemo, useRef, useState } from "react";
+import React, { Children, cloneElement, createRef, isValidElement, useEffect, useMemo, useRef, useState } from "react";
 import Animation from "./animation.js";
-import { PiDotsSixVerticalBold } from "./icons.js";
+import { scrollThreshold } from "./constants.js";
 import { useDraggable } from "./hooks.js";
+import { PiDotsSixVerticalBold } from "./icons.js";
 import { swap } from "./utils.js";
 if (typeof window !== "undefined")
     import("drag-drop-touch");
-const scrollThreshold = { x: 10, y: 100 };
-const ReorderItemRef = forwardRef(ReorderItem);
+export function ReorderIcon(_a) {
+    var { children = React.createElement(PiDotsSixVerticalBold, null), style } = _a, props = __rest(_a, ["children", "style"]);
+    return (React.createElement("span", Object.assign({ style: Object.assign({ cursor: "grab" }, style) }, props), children));
+}
+function ReorderItem(_a) {
+    var { useOnlyIconToDrag, disable, ref, style, children, onTouchEnd: propOnTouchEnd } = _a, events = __rest(_a, ["useOnlyIconToDrag", "disable", "ref", "style", "children", "onTouchEnd"]);
+    const [draggable, _b] = useDraggable(), { onTouchEnd: draggableOnTouchEnd } = _b, draggableProps = __rest(_b, ["onTouchEnd"]);
+    if (!draggable)
+        events.onDragStart = undefined;
+    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 (React.createElement("div", Object.assign({ ref: ref, draggable: !disable && draggable, style: style }, (!disable && Object.assign(Object.assign(Object.assign({}, events), (!useOnlyIconToDrag && draggableProps)), { onTouchEnd: (event) => {
+            draggableOnTouchEnd();
+            propOnTouchEnd(event);
+        } }))), recursiveChildren));
+}
 export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpacity = 0.5, animationDuration = 400, watchChildrenUpdates = false, preserveOrder = false, onPositionChange, disabled = false, props, children }) {
     const ref = useRef(null);
     const [start, setStart] = useState(-1);
@@ -72,11 +91,12 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
     return (React.createElement("div", Object.assign({ ref: ref }, props), disabled ? (children) : (React.createElement(Animation, { duration: +(start !== -1 && !scroll) && animationDuration }, items.map((child, i) => {
         if (!isValidElement(child))
             return child;
-        return (React.createElement(ReorderItemRef, { key: child.key, ref: refs[i], useOnlyIconToDrag: useOnlyIconToDrag, disable: disableArr[i], style: { opacity: selected === i ? selectedItemOpacity : 1, touchAction: "pan-y" }, onDragStart: (event) => {
+        return (React.createElement(ReorderItem, { key: child.key, ref: refs[i], useOnlyIconToDrag: useOnlyIconToDrag, disable: disableArr[i], style: { opacity: selected === i ? selectedItemOpacity : 1, touchAction: "pan-y" }, onDragStart: (event) => {
+                var _a, _b;
                 event.stopPropagation();
                 setStart(i);
                 setSelected(i);
-                setTemp({ items, rect: ref.current.children[i].getBoundingClientRect() });
+                setTemp({ items, rect: ((_b = (_a = ref.current.childNodes[i]).getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a)) || {} });
             }, onDragEnter: (event) => {
                 event.stopPropagation();
                 if (start === -1 || selected === i || isAnimating)
@@ -118,23 +138,3 @@ export default function ReorderList({ useOnlyIconToDrag = false, selectedItemOpa
             }, onTouchEnd: () => setScroll(undefined) }, child));
     })))));
 }
-function ReorderItem(_a, ref) {
-    var { useOnlyIconToDrag, disable, style, children, onTouchEnd: propOnTouchEnd } = _a, events = __rest(_a, ["useOnlyIconToDrag", "disable", "style", "children", "onTouchEnd"]);
-    const [draggable, _b] = useDraggable(), { onTouchEnd: draggableOnTouchEnd } = _b, draggableProps = __rest(_b, ["onTouchEnd"]);
-    if (!draggable)
-        events.onDragStart = undefined;
-    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 (React.createElement("div", Object.assign({ ref: ref, draggable: !disable && draggable, style: style }, (!disable && Object.assign(Object.assign(Object.assign({}, events), (!useOnlyIconToDrag && draggableProps)), { onTouchEnd: (event) => {
-            draggableOnTouchEnd();
-            propOnTouchEnd(event);
-        } }))), recursiveChildren));
-}
-export function ReorderIcon(_a) {
-    var { children = React.createElement(PiDotsSixVerticalBold, null), style } = _a, props = __rest(_a, ["children", "style"]);
-    return (React.createElement("span", Object.assign({ style: Object.assign({ cursor: "grab" }, style) }, props), children));
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-reorder-list",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "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",
@@ -32,9 +32,9 @@
     "react": ">=17.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.79"
+    "@types/react": "^19.0.0"
   },
   "dependencies": {
     "drag-drop-touch": "^1.3.1"
   }
-}
+}