react-reorder-list 0.8.4 → 0.8.6

package/README.md

@@ -181,26 +181,38 @@ export default function App() {
 }
 ```
 
-## ReorderList Component API Reference
+## API Reference
+
+### ReorderList Component
 
 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 | 400 | 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` | `React.DetailedHTMLProps` | No | - | Props to customize the `<ReorderList>` component. |
 
-### Types
+| 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.                                                                                                                   |
+
+## Types
+
+### DivProps
+
+```typescript
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+
+type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+```
 
-#### PositionChangeHandler
+### PositionChangeHandler
 
 ```typescript
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
+
 type RevertHandler = () => void;
 type PositionChangeParams = {
   start?: number; // Index of the item being dragged

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

@@ -0,0 +1,235 @@
+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 };

package/dist/components.d.ts

@@ -0,0 +1,7 @@
+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;
+
+export { ReorderIcon, ReorderList as default };

package/dist/components.js

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

package/dist/index.d.ts

@@ -1,37 +1,3 @@
-import { CSSProperties, DetailedHTMLProps, DragEventHandler, HTMLAttributes, JSX, ReactNode, RefObject, TouchEventHandler } from "react";
-export type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-export type PositionChangeHandler = (event: {
-    start: number;
-    end: number;
-    oldItems: ReactNode[];
-    newItems: ReactNode[];
-    revert: Function;
-}) => void;
-export type ReorderListProps = {
-    useOnlyIconToDrag?: boolean;
-    selectedItemOpacity?: number;
-    animationDuration?: number;
-    watchChildrenUpdates?: boolean;
-    preserveOrder?: boolean;
-    onPositionChange?: PositionChangeHandler;
-    disabled?: boolean;
-    props?: Props;
-    children?: ReactNode;
-};
-export type DivDragEventHandler = DragEventHandler<HTMLDivElement>;
-export type DivTouchEventHandler = TouchEventHandler<HTMLDivElement>;
-export type ReorderItemProps = {
-    useOnlyIconToDrag: boolean;
-    disable: boolean;
-    ref: RefObject<HTMLDivElement | null>;
-    style: CSSProperties;
-    onDragStart?: DivDragEventHandler;
-    onDragEnter: DivDragEventHandler;
-    onDragEnd: DivDragEventHandler;
-    onTouchMove: DivTouchEventHandler;
-    onTouchEnd: DivTouchEventHandler;
-    children: ReactNode;
-};
-export type { IconProps } from "./icons.js";
-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;
+export { ReorderIcon, default } from './components.js';
+import 'react';
+import './types.js';

package/dist/index.js

@@ -1,140 +1 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { Children, cloneElement, createRef, isValidElement, useEffect, useMemo, useRef, useState } from "react";
-import Animation from "./animation.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");
-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: Object.assign(Object.assign({}, style), { touchAction: "pan-y", cursor: useOnlyIconToDrag ? "default" : "grab" }) }, (!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);
-    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(([refs, disableArr], item) => {
-        var _a;
-        return [refs.concat(createRef()), disableArr.concat((_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a["data-disable-reorder"])];
-    }, [[], []]), [items]);
-    const findIndex = (key) => (key ? items.findIndex((item) => { var _a; return ((_a = item === null || item === void 0 ? void 0 : item.key) === null || _a === void 0 ? void 0 : _a.split(".$").at(-1)) === key; }) : -1);
-    useEffect(() => {
-        if (!watchChildrenUpdates)
-            return;
-        if (selected !== -1)
-            handleDragEnd(null, selected, preserveOrder);
-        if (preserveOrder) {
-            const items = [];
-            const newItems = [];
-            Children.forEach(children, (child) => {
-                const index = findIndex(child === null || child === void 0 ? void 0 : child.key);
-                if (index === -1)
-                    newItems.push(child);
-                else
-                    items[index] = child;
-            });
-            setItems(items.filter((item) => item !== undefined).concat(newItems));
-        }
-        else
-            setItems(Children.toArray(children));
-    }, [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 || event === void 0 ? void 0 : event.stopPropagation();
-        if (handlePositionChange && end !== start)
-            onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange({ start, end, oldItems: temp.items, newItems: items, revert: () => setItems(temp.items) });
-        setStart(-1);
-        setSelected(-1);
-    }
-    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(ReorderItem, { key: child.key, ref: refs[i], useOnlyIconToDrag: 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 || _b === void 0 ? 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 items = 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(items, key, index);
-                        key = index;
-                    }
-                    return items;
-                });
-                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 } : undefined);
-            }, onTouchEnd: () => setScroll(undefined) }, child));
-    })))));
-}
+export { ReorderIcon, ReorderList as default } from './chunks/chunk-6VGR3NNS.js';

package/dist/types.d.ts

@@ -0,0 +1,49 @@
+import { ReactNode, DetailedHTMLProps, HTMLAttributes, ReactElement, RefObject, DragEventHandler, MouseEventHandler, TouchEventHandler, CSSProperties } from 'react';
+
+type BoundingBox = {
+    [key: string]: DOMRect;
+};
+type Child = ReactElement<{
+    ref: RefObject<HTMLElement>;
+}>;
+type AnimationProps = {
+    duration: number;
+    children: ReactNode;
+};
+type IconProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+type DivDragEventHandler = DragEventHandler<HTMLDivElement>;
+type DivMouseEventHandler = MouseEventHandler<HTMLDivElement>;
+type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+type DivTouchEventHandler = TouchEventHandler<HTMLDivElement>;
+type PositionChangeHandler = (event: {
+    start: number;
+    end: number;
+    oldItems: ReactNode[];
+    newItems: ReactNode[];
+    revert: Function;
+}) => void;
+type ReorderItemProps = {
+    useOnlyIconToDrag: boolean;
+    disable: boolean;
+    ref: RefObject<HTMLDivElement | null>;
+    style: CSSProperties;
+    onDragStart?: DivDragEventHandler;
+    onDragEnter: DivDragEventHandler;
+    onDragEnd: DivDragEventHandler;
+    onTouchMove: DivTouchEventHandler;
+    onTouchEnd: DivTouchEventHandler;
+    children: ReactNode;
+};
+type ReorderListProps = {
+    useOnlyIconToDrag?: boolean;
+    selectedItemOpacity?: number;
+    animationDuration?: number;
+    watchChildrenUpdates?: boolean;
+    preserveOrder?: boolean;
+    onPositionChange?: PositionChangeHandler;
+    disabled?: boolean;
+    props?: DivProps;
+    children?: ReactNode;
+};
+
+export type { AnimationProps, BoundingBox, Child, DivDragEventHandler, DivMouseEventHandler, DivProps, DivTouchEventHandler, IconProps, PositionChangeHandler, ReorderItemProps, ReorderListProps };

package/dist/types.js

@@ -0,0 +1 @@
+

package/package.json

@@ -1,41 +1,60 @@
 {
   "name": "react-reorder-list",
-  "version": "0.8.4",
+  "version": "0.8.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",
-  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "author": "Sahil Aggarwal <aggarwalsahil2004@gmail.com>",
+  "contributors": [],
+  "homepage": "https://github.com/SahilAggarwal2004/react-reorder-list#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/SahilAggarwal2004/react-reorder-list.git"
   },
-  "keywords": [
-    "react-reorder-list",
-    "react",
-    "reorder",
-    "list",
-    "component",
-    "drag-and-drop",
-    "dnd",
-    "typescript"
-  ],
-  "author": "Sahil Aggarwal",
-  "license": "MIT",
   "bugs": {
     "url": "https://github.com/SahilAggarwal2004/react-reorder-list/issues"
   },
-  "homepage": "https://github.com/SahilAggarwal2004/react-reorder-list#readme",
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./types": "./dist/types.js"
+  },
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": true,
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "drag-drop-touch": "^1.3.1"
+  },
   "peerDependencies": {
     "react": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.1.3",
-    "typescript": "^5.8.3"
-  },
-  "dependencies": {
-    "drag-drop-touch": "^1.3.1"
+    "@release-it/conventional-changelog": "^10.0.4",
+    "@types/react": "^19.2.7",
+    "prettier-package-json": "^2.8.0",
+    "release-it": "^19.2.2",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
   },
+  "keywords": [
+    "component",
+    "dnd",
+    "drag-and-drop",
+    "list",
+    "react",
+    "react-reorder-list",
+    "reorder",
+    "typescript"
+  ],
   "scripts": {
-    "build": "pnpm i && tsc"
+    "build": "pnpm i && pnpm run compile",
+    "compile": "tsup",
+    "dev": "tsup --watch",
+    "dry-release": "release-it --ci --dry-run",
+    "prettier": "prettier-package-json --write package.json",
+    "pub": "pnpm login && pnpm publish",
+    "release": "release-it --ci"
   }
 }

package/dist/animation.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from "react";
-type AnimationProps = {
-    duration: number;
-    children: ReactNode;
-};
-export default function Animation({ duration, children }: AnimationProps): ReactNode;
-export {};

package/dist/animation.js

@@ -1,43 +0,0 @@
-import { useLayoutEffect, Children } from "react";
-import { useStateWithHistory } from "./hooks.js";
-import { getKey } from "./utils.js";
-function calculateBoundingBoxes(children) {
-    const boundingBoxes = {};
-    Children.forEach(children, (child) => {
-        const key = getKey(child);
-        if (key)
-            boundingBoxes[key] = child.props.ref.current.getBoundingClientRect();
-    });
-    return boundingBoxes;
-}
-export default 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;
-}

package/dist/constants.d.ts

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

package/dist/constants.js

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

package/dist/hooks.d.ts

@@ -1,7 +0,0 @@
-export declare function useDraggable(initValue?: boolean): readonly [boolean, {
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
-    onTouchStart: () => void;
-    onTouchEnd: () => void;
-}];
-export declare function useStateWithHistory<T>(initValue: T): readonly [T, T | undefined, (value: T) => void];

package/dist/hooks.js

@@ -1,17 +0,0 @@
-import { useState } from "react";
-export function useDraggable(initValue = false) {
-    const [draggable, setDraggable] = useState(initValue);
-    const enableDragging = () => setDraggable(true);
-    const disableDragging = () => setDraggable(false);
-    const draggableProps = { onMouseEnter: enableDragging, onMouseLeave: disableDragging, onTouchStart: enableDragging, onTouchEnd: disableDragging };
-    return [draggable, draggableProps];
-}
-export function useStateWithHistory(initValue) {
-    const [state, setState] = useState(initValue);
-    const [prevState, setPrevState] = useState();
-    function setStateWithHistory(value) {
-        setPrevState(state);
-        setState(value);
-    }
-    return [state, prevState, setStateWithHistory];
-}

package/dist/icons.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-export type IconProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
-export declare function PiDotsSixVerticalBold(props: IconProps): React.JSX.Element;

package/dist/icons.js

@@ -1,6 +0,0 @@
-import React from "react";
-export function PiDotsSixVerticalBold(props) {
-    return (React.createElement("span", Object.assign({}, props),
-        React.createElement("svg", { viewBox: "0 0 256 256", fill: "currentColor", width: "1.25rem", height: "1.25rem" },
-            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" }))));
-}

package/dist/utils.d.ts

@@ -1,3 +0,0 @@
-import { ReactNode } from "react";
-export declare const getKey: (child: ReactNode) => string | undefined;
-export declare function swap(array: any[], i: number, j: number): void;

package/dist/utils.js

@@ -1,6 +0,0 @@
-export const getKey = (child) => { var _a; return (_a = child === null || child === void 0 ? void 0 : child.key) === null || _a === void 0 ? void 0 : _a.split("/.")[0]; };
-export function swap(array, i, j) {
-    const temp = array[i];
-    array[i] = array[j];
-    array[j] = temp;
-}