react-reorder-list 0.8.6 → 0.10.0

package/README.md

@@ -4,10 +4,11 @@ A simple react component that facilitates the reordering of JSX/HTML elements th
 
 ## Features
 
-- Reorders list of elements using drag and drop.
+- Reorders list of elements using drag and drop
 - Easy to use
-- Smooth transition using animation.
-- Listens to children updates. See [listen to children updates](#listen-to-children-updates)
+- Smooth transition using animation
+- Automatically syncs with children updates
+- Preserves user's custom order when children change
 - Disables reordering for individual children. See [disable reordering for individual children](#disable-reordering-for-individual-children)
 - Handles nested lists easily. See [nested list usage](#nested-list-usage)
 
@@ -63,35 +64,42 @@ If set to `false`, an item can be dragged by clicking anywhere inside the item.
 If set to `true`, an item can be dragged only using the `<ReorderIcon>` present inside the item.
 
 ```jsx
-import React from 'react'
-import ReorderList, { ReorderIcon } from 'react-reorder-list'
+import React from "react";
+import ReorderList, { ReorderIcon } from "react-reorder-list";
 
 export default function App() {
-  return <ReorderList useOnlyIconToDrag={true}>
-    {[0, 1, 2, 3, 4].map(i => {
-      return <div key={i}>
-        <ReorderIcon /> {/* Default icon */}
-        <ReorderIcon>
-          {/* Custom icon/component */}
-        </Reordericon>
-        <span>{i}</span>
-      </div>
-    })}
-  </ReorderList>
+  return (
+    <ReorderList useOnlyIconToDrag={true}>
+      {[0, 1, 2, 3, 4].map((i) => {
+        return (
+          <div key={i}>
+            <ReorderIcon /> {/* Default icon */}
+            <ReorderIcon>{/* Custom icon/component */}</ReorderIcon>
+            <span>{i}</span>
+          </div>
+        );
+      })}
+    </ReorderList>
+  );
 }
 ```
 
-#### Listen to Children Updates
+#### Handling Children Updates
 
-`<ReorderList>` can listen to updates to it's children components using the `watchChildrenUpdates` prop as shown below.
+`<ReorderList>` automatically syncs with updates to its children components. When the children change (e.g., items added/removed, or state updates), the component intelligently handles the update based on the `preserveOrder` prop.
 
-If set to `false`, any updates made in children component except reordering by user won't reflect.
+**With `preserveOrder={true}` (default):**
 
-If set to `true`, updates to children like state changes, additions/omissions of children components will reflect in real time.<br>
-Further if `preserveOrder` is set to false, the order in which new children appear will be maintained.<br>
-Whereas if `preserveOrder` is set to true, the order of existing items will be preserved as before the update occured and new items will be placed at the end irrespective of their order in children. Also, if an item is being dragged and an update occurs at that moment, that item will be placed at respective location and `onPositionChange` will be called to prevent any inconsistency.
+- The user's custom reorder is preserved
+- New items are added at the end
+- Removed items are cleanly removed
+- Any in-progress drag is cancelled to prevent inconsistencies
 
-NOTE: The props `watchChildrenUpdates` and `preserveOrder` should be used carefully to avoid any unexpected behaviour
+**With `preserveOrder={false}:`**
+
+- The order resets to match the new children order
+- User's custom ordering is discarded
+- Useful for server-controlled or filtered lists
 
 ```jsx
 import React, { useState } from "react";
@@ -100,27 +108,23 @@ import ReorderList from "react-reorder-list";
 export default function App() {
   const [array, setArray] = useState([0, 1, 2, 3, 4]);
 
-  function setNewArray() {
-    setArray((prev) => {
-      const array = [];
-      prev.forEach((_) => {
-        do {
-          var item = Math.floor(Math.random() * 9);
-        } while (array.includes(item));
-        array.push(item);
-      });
-      return array;
-    });
+  function addItem() {
+    setArray((prev) => [...prev, Math.max(...prev) + 1]);
+  }
+
+  function removeItem() {
+    setArray((prev) => prev.slice(0, -1));
   }
 
   return (
     <div>
-      <ReorderList watchChildrenUpdates={true} animationDuration={200}>
+      <ReorderList preserveOrder={true} animationDuration={200}>
         {array.map((i) => (
           <div key={i}>Item {i}</div>
         ))}
       </ReorderList>
-      <button onClick={setNewArray}>Click me</button>
+      <button onClick={addItem}>Add Item</button>
+      <button onClick={removeItem}>Remove Item</button>
     </div>
   );
 }
@@ -187,16 +191,15 @@ export default function App() {
 
 Here is the full API for the `<ReorderList>` component, these properties can be set on an instance of ReorderList:
 
-| Parameter              | Type                                              | Required | Default | Description                                                                                                                                                         |
-| ---------------------- | ------------------------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `useOnlyIconToDrag`    | `boolean`                                         | No       | false   | See [usage with ReorderIcon](#usage-with-reordericon)                                                                                                               |
-| `selectedItemOpacity`  | `number (0 to 1)`                                 | No       | 0.5     | This determines the opacity of the item being dragged, until released.                                                                                              |
-| `animationDuration`    | `number`                                          | No       | 300     | The duration (in ms) of swapping animation between items. If set to 0, animation will be disabled.                                                                  |
-| `watchChildrenUpdates` | `boolean`                                         | No       | false   | Enable this to listen to any updates in children of `<ReorderList>` and update the state accordingly. See [listen to children updates](#listen-to-children-updates) |
-| `preserveOrder`        | `boolean`                                         | No       | false   | Works along woth `watchChildrenUpdates` to determine whether to preserve existing order or not. See [listen to children updates](#listen-to-children-updates)       |
-| `onPositionChange`     | [`PositionChangeHandler`](#positionchangehandler) | No       | -       | Function to be executed on item position change.                                                                                                                    |
-| `disabled`             | `boolean`                                         | No       | false   | When set to true, `<ReorderList>` will work as a plain `div` with no functionality.                                                                                 |
-| `props`                | [`DivProps`](#divprops)                           | No       | -       | Props to customize the `<ReorderList>` component.                                                                                                                   |
+| Parameter             | Type                                              | Required | Default | Description                                                                                                                                                          |
+| --------------------- | ------------------------------------------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `useOnlyIconToDrag`   | `boolean`                                         | No       | false   | See [usage with ReorderIcon](#usage-with-reordericon)                                                                                                                |
+| `selectedItemOpacity` | `number (0 to 1)`                                 | No       | 0.5     | This determines the opacity of the item being dragged, until released.                                                                                               |
+| `animationDuration`   | `number`                                          | No       | 300     | The duration (in ms) of swapping animation between items. If set to 0, animation will be disabled.                                                                   |
+| `preserveOrder`       | `boolean`                                         | No       | true    | When true, preserves user's custom order when children update. When false, resets to new children order. See [handling children updates](#handling-children-updates) |
+| `onPositionChange`    | [`PositionChangeHandler`](#positionchangehandler) | No       | -       | Function to be executed on item position change.                                                                                                                     |
+| `disabled`            | `boolean`                                         | No       | false   | When set to true, `<ReorderList>` will work as a plain `div` with no functionality.                                                                                  |
+| `props`               | [`DivProps`](#divprops)                           | No       | -       | Props to customize the `<ReorderList>` component.                                                                                                                    |
 
 ## Types
 
@@ -211,17 +214,18 @@ type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement
 ### PositionChangeHandler
 
 ```typescript
-import type { ReactNode } from "react";
+import type { Key } from "react";
 
+type Order = Key[];
 type RevertHandler = () => void;
-type PositionChangeParams = {
-  start?: number; // Index of the item being dragged
-  end?: number; // Index of the item being displaced by the starting item
-  oldItems?: ReactNode[]; // Array of children before reordering
-  newItems?: ReactNode[]; // Array of children after reordering
+
+export type PositionChangeHandler = (event: {
+  start: number; // Index of the item being dragged
+  end: number; // Index where the item was dropped
+  oldOrder: Order; // Array of keys before reordering
+  newOrder: Order; // Array of keys after reordering
   revert: RevertHandler; // A fallback handler to revert the reordering
-};
-type PositionChangeHandler = (params?: PositionChangeParams) => void;
+}) => void;
 ```
 
 ## License

package/dist/chunks/chunk-KM7ZPSG2.js

@@ -0,0 +1,247 @@
+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
+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

@@ -2,6 +2,6 @@ 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, watchChildrenUpdates, preserveOrder, onPositionChange, disabled, props, children }: ReorderListProps): 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 +1 @@
-export { ReorderIcon, ReorderList as default } from './chunks/chunk-6VGR3NNS.js';
+export { ReorderIcon, ReorderList as default } from './chunks/chunk-KM7ZPSG2.js';

package/dist/index.js

@@ -1 +1 @@
-export { ReorderIcon, ReorderList as default } from './chunks/chunk-6VGR3NNS.js';
+export { ReorderIcon, ReorderList as default } from './chunks/chunk-KM7ZPSG2.js';

package/dist/types.d.ts

@@ -1,31 +1,30 @@
-import { ReactNode, DetailedHTMLProps, HTMLAttributes, ReactElement, RefObject, DragEventHandler, MouseEventHandler, TouchEventHandler, CSSProperties } from 'react';
+import { Key, DetailedHTMLProps, HTMLAttributes, ReactNode, ReactElement, RefObject, DragEventHandler, MouseEventHandler, TouchEventHandler, CSSProperties } from 'react';
 
-type BoundingBox = {
-    [key: string]: DOMRect;
+type AnimationProps = {
+    duration: number;
+    children: Child[];
 };
+type BoundingBox = Record<string, DOMRect>;
 type Child = ReactElement<{
     ref: RefObject<HTMLElement>;
 }>;
-type AnimationProps = {
-    duration: number;
-    children: ReactNode;
-};
-type IconProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+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;
-    oldItems: ReactNode[];
-    newItems: ReactNode[];
-    revert: Function;
+    oldOrder: Order;
+    newOrder: Order;
+    revert: RevertHandler;
 }) => void;
 type ReorderItemProps = {
     useOnlyIconToDrag: boolean;
-    disable: boolean;
-    ref: RefObject<HTMLDivElement | null>;
+    disable?: boolean;
+    ref: DivRef;
     style: CSSProperties;
     onDragStart?: DivDragEventHandler;
     onDragEnter: DivDragEventHandler;
@@ -38,12 +37,13 @@ type ReorderListProps = {
     useOnlyIconToDrag?: boolean;
     selectedItemOpacity?: number;
     animationDuration?: number;
-    watchChildrenUpdates?: boolean;
     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, DivTouchEventHandler, IconProps, PositionChangeHandler, ReorderItemProps, ReorderListProps };
+export type { AnimationProps, BoundingBox, Child, DivDragEventHandler, DivMouseEventHandler, DivProps, DivRef, DivTouchEventHandler, IconProps, Order, PositionChangeHandler, ReorderItemProps, ReorderListProps, RevertHandler };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-reorder-list",
-  "version": "0.8.6",
+  "version": "0.10.0",
   "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>",
@@ -31,10 +31,10 @@
     "react": "^19.0.0"
   },
   "devDependencies": {
-    "@release-it/conventional-changelog": "^10.0.4",
-    "@types/react": "^19.2.7",
+    "@release-it/conventional-changelog": "^10.0.5",
+    "@types/react": "^19.2.14",
     "prettier-package-json": "^2.8.0",
-    "release-it": "^19.2.2",
+    "release-it": "^19.2.4",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   },

package/dist/chunks/chunk-6VGR3NNS.js

@@ -1,235 +0,0 @@
-import React2, { useRef, useState, Children, useMemo, createRef, useEffect, isValidElement, 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;
-};
-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];
-}
-var getKey = (child) => {
-  var _a;
-  return (_a = child == null ? void 0 : child.key) == null ? void 0 : _a.split("/.")[0];
-};
-function calculateBoundingBoxes(children) {
-  const boundingBoxes = {};
-  Children.forEach(children, (child) => {
-    const key = getKey(child);
-    if (key) boundingBoxes[key] = child.props.ref.current.getBoundingClientRect();
-  });
-  return boundingBoxes;
-}
-
-// src/constants.ts
-var scrollThreshold = { x: 10, y: 100 };
-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" })));
-}
-
-// src/lib/utils.ts
-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)
-      Children.forEach(children, (child) => {
-        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;
-        if (changeInX || changeInY)
-          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, watchChildrenUpdates = false, preserveOrder = false, onPositionChange, disabled = false, props, children }) {
-  const ref = useRef(null);
-  const [start, setStart] = useState(-1);
-  const [selected, setSelected] = useState(-1);
-  const [items, setItems] = useState(Children.toArray(children));
-  const [temp, setTemp] = useState({ items: [] });
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [scroll, setScroll] = useState();
-  const [refs, disableArr] = useMemo(
-    () => items.reduce(
-      ([refs2, disableArr2], item) => {
-        var _a;
-        return [refs2.concat(createRef()), disableArr2.concat((_a = item == null ? void 0 : item.props) == null ? void 0 : _a["data-disable-reorder"])];
-      },
-      [[], []]
-    ),
-    [items]
-  );
-  const findIndex = (key) => key ? items.findIndex((item) => (item == null ? void 0 : item.key) === key) : -1;
-  useEffect(() => {
-    if (!watchChildrenUpdates) return;
-    if (selected !== -1) handleDragEnd(null, selected, preserveOrder);
-    const items2 = [];
-    const newItems = [];
-    Children.forEach(children, (child, index) => {
-      if (preserveOrder) index = findIndex(child == null ? void 0 : child.key);
-      if (index === -1) newItems.push(child);
-      else items2[index] = child;
-    });
-    setItems(items2.filter((item) => item !== void 0).concat(newItems));
-  }, [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]);
-  function handleDragEnd(event, end = selected, handlePositionChange = true) {
-    event == null ? void 0 : event.stopPropagation();
-    if (handlePositionChange && end !== start) onPositionChange == null ? void 0 : onPositionChange({ start, end, oldItems: temp.items, newItems: items, revert: () => setItems(temp.items) });
-    setStart(-1);
-    setSelected(-1);
-  }
-  return /* @__PURE__ */ React2.createElement("div", __spreadValues({ ref }, props), disabled ? children : /* @__PURE__ */ React2.createElement(Animation, { duration: +(start !== -1 && !scroll) && animationDuration }, items.map((child, i) => {
-    if (!isValidElement(child)) return child;
-    return /* @__PURE__ */ React2.createElement(
-      ReorderItem,
-      {
-        key: child.key,
-        ref: refs[i],
-        useOnlyIconToDrag,
-        disable: disableArr[i],
-        style: { opacity: selected === i ? selectedItemOpacity : 1 },
-        onDragStart: (event) => {
-          var _a, _b;
-          event.stopPropagation();
-          setStart(i);
-          setSelected(i);
-          setTemp({ items, rect: ((_b = (_a = ref.current.childNodes[i]).getBoundingClientRect) == null ? void 0 : _b.call(_a)) || {} });
-        },
-        onDragEnter: (event) => {
-          event.stopPropagation();
-          if (start === -1 || selected === i || isAnimating) return;
-          const { width: startWidth, height: startHeight } = temp.rect;
-          const { left, top, width, height } = event.target.getBoundingClientRect();
-          if (event.clientX - left > Math.min(startWidth, width) || event.clientY - top > Math.min(startHeight, height)) return;
-          setSelected(i);
-          setItems(() => {
-            const items2 = temp.items.slice();
-            const shiftForward = start < i;
-            const increment = shiftForward ? 1 : -1;
-            let key = start;
-            for (let index = start + increment; shiftForward ? index <= i : index >= i; index += increment) {
-              if (disableArr[index]) continue;
-              swap(items2, key, index);
-              key = index;
-            }
-            return items2;
-          });
-          setIsAnimating(true);
-          setTimeout(() => setIsAnimating(false), animationDuration);
-        },
-        onDragEnd: handleDragEnd,
-        onTouchMove: (event) => {
-          if (start === -1) return;
-          const { clientX, screenX, clientY, screenY } = event.touches[0];
-          let left = 0, top = 0;
-          if (clientX < scrollThreshold.x) left = -5;
-          else if (innerWidth - screenX < scrollThreshold.x) left = 5;
-          if (clientY < scrollThreshold.y) top = -10;
-          else if (innerHeight - screenY < scrollThreshold.y) top = 10;
-          setScroll(left || top ? { left, top } : void 0);
-        },
-        onTouchEnd: () => setScroll(void 0)
-      },
-      child
-    );
-  })));
-}
-
-export { ReorderIcon, ReorderList };