@os-design/drag-sort 1.0.44 → 1.0.46

package/dist/DragAndDrop.d.ts

@@ -1,6 +1,6 @@
 import { type PortalProps } from '@os-design/portal';
 import React from 'react';
-import { type DragEndHandler } from './utils/useDragEffect.js';
+import { type DragStartHandler, type DragEndHandler } from './utils/useDragEffect.js';
 export interface DragAndDropProps {
     /**
      * The container in which the dragged node will be rendered.
@@ -32,6 +32,11 @@ export interface DragAndDropProps {
      * @default 250
      */
     transitionDelayMs?: number;
+    /**
+     * The callback that is called when the drag is started.
+     * @default undefined
+     */
+    onDragStart?: DragStartHandler;
     /**
      * The callback that is called when the drag is completed.
      * @default undefined
@@ -47,6 +52,6 @@ export interface DragAndDropProps {
  * The container containing one or more lists with draggable nodes.
  */
 declare const DragAndDrop: React.FC<DragAndDropProps>;
-export type { DragEndHandler } from './utils/useDragEffect.js';
+export type { DragStartHandler, DragEndHandler, } from './utils/useDragEffect.js';
 export default DragAndDrop;
 //# sourceMappingURL=DragAndDrop.d.ts.map

package/dist/DragAndDrop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDrop.d.ts","sourceRoot":"","sources":["../src/DragAndDrop.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAU7D,OAAO,KAON,MAAM,OAAO,CAAC;AAIf,OAAsB,EACpB,KAAK,cAAc,EAEpB,MAAM,0BAA0B,CAAC;AAKlC,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAOD;;GAEG;AACH,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmJ3C,CAAC;AAEF,YAAY,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE/D,eAAe,WAAW,CAAC"}
+{"version":3,"file":"DragAndDrop.d.ts","sourceRoot":"","sources":["../src/DragAndDrop.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAU7D,OAAO,KAON,MAAM,OAAO,CAAC;AAIf,OAAsB,EACpB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EAEpB,MAAM,0BAA0B,CAAC;AAKlC,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAChD;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAOD;;GAEG;AACH,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAyJ3C,CAAC;AAEF,YAAY,EACV,gBAAgB,EAChB,cAAc,GACf,MAAM,0BAA0B,CAAC;AAElC,eAAe,WAAW,CAAC"}

package/dist/DragAndDrop.js

@@ -21,6 +21,7 @@ const DragAndDrop = ({
   autoScrollDistPercent = 20,
   autoScrollMaxSpeedPx = 100,
   transitionDelayMs = 250,
+  onDragStart = () => {},
   onDragEnd = () => {},
   children
 }) => {
@@ -56,7 +57,7 @@ const DragAndDrop = ({
     ms: transitionDelayMs,
     enabled: !!draggedNode
   });
-  const onDragStart = useCallback((pos, startPos) => {
+  const onDragStartInternal = useCallback((pos, startPos) => {
     const startNode = startNodeRef.current;
     if (!startNode) return;
     const [,, nodeRef] = startNode.node;
@@ -71,8 +72,13 @@ const DragAndDrop = ({
         y: startPos.y - rect.y
       }
     });
+    onDragStart({
+      listId: startNode.list.id,
+      index: startNode.node[4],
+      id: startNode.node[5]
+    });
     startNodeRef.current = null;
-  }, []);
+  }, [onDragStart]);
   const onDragMove = useCallback(pos => {
     setCursorPosition(pos);
   }, []);
@@ -83,7 +89,7 @@ const DragAndDrop = ({
     onMouseDown,
     onTouchStart
   } = useDrag({
-    onDragStart,
+    onDragStart: onDragStartInternal,
     onDragMove,
     onDragEnd: dragEndHandler,
     minMouseDistPx,

package/dist/Droppable.d.ts

@@ -5,12 +5,12 @@ export interface DroppableChildrenProps {
      * The reference to the list.
      * If a virtual list is used, pass it to the outerRef prop.
      */
-    ref: RefObject<HTMLDivElement>;
+    ref: RefObject<HTMLDivElement | null>;
     /**
      * The reference to the container inside the virtual list.
      * Pass it to the innerRef prop.
      */
-    innerRef: RefObject<HTMLDivElement>;
+    innerRef: RefObject<HTMLDivElement | null>;
 }
 export interface DroppableProps {
     /**

package/dist/Droppable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Droppable.d.ts","sourceRoot":"","sources":["../src/Droppable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAiB,EAGf,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAK7B,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,GAAG,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAC/B;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACrC;AAED,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,iBAAiB,EAAE,iBAAiB,CAAC;IACrC;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9D;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAuFvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Droppable.d.ts","sourceRoot":"","sources":["../src/Droppable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAEZ,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAiB,EAGf,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAK7B,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,GAAG,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACtC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CAC5C;AAED,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,iBAAiB,EAAE,iBAAiB,CAAC;IACrC;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC9D;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA8EvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/Droppable.js

@@ -1,5 +1,5 @@
 import useMemoObject from '@os-design/use-memo-object';
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import NodeList from './utils/NodeList.js';
 import useDragAndDrop from './utils/useDragAndDrop.js';
 import { DroppableContext } from './utils/useDroppable.js';
@@ -55,18 +55,18 @@ const Droppable = ({
     const listId = listRef.current.id;
     return () => deregisterList(listId);
   }, [deregisterList, registerList]);
-  const registerNode = useCallback(props => listRef.current.add(props), []);
-  const deregisterNode = useCallback(node => {
+  const registerNode = props => listRef.current.add(props);
+  const deregisterNode = node => {
     listRef.current.remove(node);
-  }, []);
+  };
 
   // Handlers that determine whether a user clicks on the node
-  const mouseDownHandler = useCallback((e, node) => {
+  const mouseDownHandler = (e, node) => {
     onMouseDown(e, listRef.current, node);
-  }, [onMouseDown]);
-  const touchStartHandler = useCallback((e, node) => {
+  };
+  const touchStartHandler = (e, node) => {
     onTouchStart(e, listRef.current, node);
-  }, [onTouchStart]);
+  };
   const droppableContext = useMemoObject({
     registerNode,
     deregisterNode,

package/dist/utils/NodeList.d.ts

@@ -2,7 +2,7 @@ import React, { type CSSProperties, type RefObject } from 'react';
 export type Node = [Node, Node, RefObject<any>, (style: CSSProperties) => void, number, string] | null;
 export type ExistingNode = Exclude<Node, null>;
 export interface NodeProps {
-    ref: React.MutableRefObject<any>;
+    ref: React.RefObject<any>;
     setStyle: (style: CSSProperties) => void;
     index: number;
     id: string;
@@ -24,8 +24,8 @@ interface RenderDraggedNodeProps {
 export type RenderDraggedNode = (props: RenderDraggedNodeProps) => React.ReactNode;
 interface InitProps {
     id: string;
-    ref: RefObject<HTMLDivElement>;
-    innerRef: RefObject<HTMLDivElement>;
+    ref: RefObject<HTMLDivElement | null>;
+    innerRef: RefObject<HTMLDivElement | null>;
     horizontal: boolean;
     renderDraggedNode: RenderDraggedNode;
 }
@@ -41,12 +41,12 @@ declare class NodeList {
     /**
      * The ref to the list.
      */
-    ref: RefObject<HTMLDivElement>;
+    ref: RefObject<HTMLDivElement | null>;
     /**
      * The inner ref to the list.
      * Used by the virtual list.
      */
-    innerRef: RefObject<HTMLDivElement>;
+    innerRef: RefObject<HTMLDivElement | null>;
     /**
      * Whether the list is horizontal.
      */

package/dist/utils/NodeList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeList.d.ts","sourceRoot":"","sources":["../../src/utils/NodeList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlE,MAAM,MAAM,IAAI,GACZ,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,GAC5E,IAAI,CAAC;AAET,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAE/C,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,sBAAsB;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,MAAM,iBAAiB,GAAG,CAC9B,KAAK,EAAE,sBAAsB,KAC1B,KAAK,CAAC,SAAS,CAAC;AAErB,UAAU,SAAS;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED;;;GAGG;AACH,cAAM,QAAQ;IACZ;;OAEG;IACI,EAAE,EAAE,MAAM,CAAC;IAElB;;OAEG;IACI,GAAG,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAEtC;;;OAGG;IACI,QAAQ,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAE3C;;OAEG;IACI,UAAU,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACI,iBAAiB,EAAE,iBAAiB,CAAC;IAE5C;;OAEG;IACH,OAAO,CAAC,IAAI,CAAO;IAEnB;;OAEG;IACH,OAAO,CAAC,IAAI,CAAO;IAEnB;;OAEG;IACH,OAAO,CAAC,SAAS,CAAoC;gBAElC,KAAK,EAAE,SAAS;IAW5B,OAAO;IAIP,OAAO;IAId;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAezB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAenB;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,QAAQ;IAMvB;;;;OAIG;IACI,GAAG,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY;IA2C1C;;;;OAIG;IACI,MAAM,CAAC,IAAI,EAAE,YAAY;IAuBzB,WAAW,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI;IAIhD,cAAc,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI;CAI3D;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"NodeList.d.ts","sourceRoot":"","sources":["../../src/utils/NodeList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlE,MAAM,MAAM,IAAI,GACZ,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,GAC5E,IAAI,CAAC;AAET,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAE/C,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,sBAAsB;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,MAAM,iBAAiB,GAAG,CAC9B,KAAK,EAAE,sBAAsB,KAC1B,KAAK,CAAC,SAAS,CAAC;AAErB,UAAU,SAAS;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACtC,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3C,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED;;;GAGG;AACH,cAAM,QAAQ;IACZ;;OAEG;IACI,EAAE,EAAE,MAAM,CAAC;IAElB;;OAEG;IACI,GAAG,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAE7C;;;OAGG;IACI,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAElD;;OAEG;IACI,UAAU,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACI,iBAAiB,EAAE,iBAAiB,CAAC;IAE5C;;OAEG;IACH,OAAO,CAAC,IAAI,CAAO;IAEnB;;OAEG;IACH,OAAO,CAAC,IAAI,CAAO;IAEnB;;OAEG;IACH,OAAO,CAAC,SAAS,CAAoC;gBAElC,KAAK,EAAE,SAAS;IAW5B,OAAO;IAIP,OAAO;IAId;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAezB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAenB;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,QAAQ;IAMvB;;;;OAIG;IACI,GAAG,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY;IA2C1C;;;;OAIG;IACI,MAAM,CAAC,IAAI,EAAE,YAAY;IAuBzB,WAAW,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI;IAIhD,cAAc,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI;CAI3D;AAED,eAAe,QAAQ,CAAC"}

package/dist/utils/useAppendClassName.d.ts

@@ -2,6 +2,6 @@ import { type RefObject } from 'react';
 /**
  * Adds a new class name to the element.
  */
-declare const useAppendClassName: (ref: RefObject<HTMLElement>, className: string) => void;
+declare const useAppendClassName: (ref: RefObject<HTMLElement | null>, className: string) => void;
 export default useAppendClassName;
 //# sourceMappingURL=useAppendClassName.d.ts.map

package/dist/utils/useAppendClassName.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAppendClassName.d.ts","sourceRoot":"","sources":["../../src/utils/useAppendClassName.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;AAElD;;GAEG;AACH,QAAA,MAAM,kBAAkB,GAAI,KAAK,SAAS,CAAC,WAAW,CAAC,EAAE,WAAW,MAAM,SAYzE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"useAppendClassName.d.ts","sourceRoot":"","sources":["../../src/utils/useAppendClassName.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,OAAO,CAAC;AAElD;;GAEG;AACH,QAAA,MAAM,kBAAkB,GACtB,KAAK,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,WAAW,MAAM,SAalB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/utils/useDragEffect.d.ts

@@ -12,6 +12,7 @@ export interface ItemLocation {
     index: number;
     id: string;
 }
+export type DragStartHandler = (dragged: ItemLocation) => void;
 export type DragEndHandler = (dragged: ItemLocation, target: ItemLocation) => void;
 interface UseDragEffectProps {
     draggedNode: DraggedNode | null;

package/dist/utils/useDragEffect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDragEffect.d.ts","sourceRoot":"","sources":["../../src/utils/useDragEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGpD,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,SAAS,MAAM,gBAAgB,CAAC;AACvC,OAAO,QAAQ,EAAE,EACf,KAAK,YAAY,EAGlB,MAAM,eAAe,CAAC;AAUvB,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAOD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,MAAM,cAAc,GAAG,CAC3B,OAAO,EAAE,YAAY,EACrB,MAAM,EAAE,YAAY,KACjB,IAAI,CAAC;AAEV,UAAU,kBAAkB;IAC1B,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,cAAc,EAAE,QAAQ,CAAC;IACzB,YAAY,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,SAAS,EAAE,cAAc,CAAC;CAC3B;AAeD,QAAA,MAAM,aAAa,GAAI,OAAO,kBAAkB,SAoa/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"useDragEffect.d.ts","sourceRoot":"","sources":["../../src/utils/useDragEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGpD,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,SAAS,MAAM,gBAAgB,CAAC;AACvC,OAAO,QAAQ,EAAE,EACf,KAAK,YAAY,EAGlB,MAAM,eAAe,CAAC;AAUvB,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAOD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG,CAC3B,OAAO,EAAE,YAAY,EACrB,MAAM,EAAE,YAAY,KACjB,IAAI,CAAC;AAEV,UAAU,kBAAkB;IAC1B,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,cAAc,EAAE,QAAQ,CAAC;IACzB,YAAY,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,SAAS,EAAE,cAAc,CAAC;CAC3B;AAeD,QAAA,MAAM,aAAa,GAAI,OAAO,kBAAkB,SAoa/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/utils/useGeneratedId.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGeneratedId.d.ts","sourceRoot":"","sources":["../../src/utils/useGeneratedId.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,cAAc,cACoC,CAAC;AAEzD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"useGeneratedId.d.ts","sourceRoot":"","sources":["../../src/utils/useGeneratedId.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,cAAc,cAEoC,CAAC;AAEzD,eAAe,cAAc,CAAC"}

package/dist/utils/useGeneratedId.js

@@ -1,3 +1,5 @@
 import { useMemo } from 'react';
-const useGeneratedId = () => useMemo(() => Math.random().toString(16).slice(2), []);
+const useGeneratedId = () =>
+// eslint-disable-next-line react-hooks/purity
+useMemo(() => Math.random().toString(16).slice(2), []);
 export default useGeneratedId;

package/dist/utils/useInitRect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInitRect.d.ts","sourceRoot":"","sources":["../../src/utils/useInitRect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAEhD,QAAA,MAAM,WAAW,GAAI,MAAM,SAAS,CAAC,WAAW,CAAC;;;;;QAYtC,CAAC;AAEZ,eAAe,WAAW,CAAC"}
+{"version":3,"file":"useInitRect.d.ts","sourceRoot":"","sources":["../../src/utils/useInitRect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAE5D,QAAA,MAAM,WAAW,GAAI,MAAM,SAAS,CAAC,WAAW,CAAC;WAEtC,MAAM;WACN,MAAM;eACF,MAAM;gBACL,MAAM;QAiBrB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/utils/useInitRect.js

@@ -1,12 +1,16 @@
-import { useMemo } from 'react';
-const useInitRect = ref => useMemo(() => {
-  if (!ref || !ref.current) return null;
-  const rect = ref.current.getBoundingClientRect();
-  return {
-    initX: rect.x,
-    initY: rect.y,
-    initWidth: rect.width,
-    initHeight: rect.height
-  };
-}, [ref]);
+import { useEffect, useState } from 'react';
+const useInitRect = ref => {
+  const [rect, setRect] = useState(null);
+  useEffect(() => {
+    if (!ref || !ref.current) return;
+    const domRect = ref.current.getBoundingClientRect();
+    setRect({
+      initX: domRect.x,
+      initY: domRect.y,
+      initWidth: domRect.width,
+      initHeight: domRect.height
+    });
+  }, [ref]);
+  return rect;
+};
 export default useInitRect;

package/dist/utils/useInitScrollOffset.d.ts

@@ -1,5 +1,5 @@
 import { type RefObject } from 'react';
-declare const useInitScrollOffset: (ref?: RefObject<HTMLElement>) => {
+declare const useInitScrollOffset: (ref?: RefObject<HTMLElement | null>) => {
     initScrollLeft: number;
     initScrollTop: number;
 } | null;

package/dist/utils/useInitScrollOffset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInitScrollOffset.d.ts","sourceRoot":"","sources":["../../src/utils/useInitScrollOffset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAGhD,QAAA,MAAM,mBAAmB,GAAI,MAAM,SAAS,CAAC,WAAW,CAAC;;;QAU9C,CAAC;AAEZ,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"useInitScrollOffset.d.ts","sourceRoot":"","sources":["../../src/utils/useInitScrollOffset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG5D,QAAA,MAAM,mBAAmB,GAAI,MAAM,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;oBAE5C,MAAM;mBACP,MAAM;QAexB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/utils/useInitScrollOffset.js

@@ -1,11 +1,15 @@
-import { useMemo } from 'react';
+import { useEffect, useState } from 'react';
 import getElementScroll from './getElementScroll.js';
-const useInitScrollOffset = ref => useMemo(() => {
-  if (!ref || !ref.current) return null;
-  const scrollOffset = getElementScroll(ref.current);
-  return {
-    initScrollLeft: scrollOffset.scrollLeft,
-    initScrollTop: scrollOffset.scrollTop
-  };
-}, [ref]);
+const useInitScrollOffset = ref => {
+  const [scrollOffset, setScrollOffset] = useState(null);
+  useEffect(() => {
+    if (!ref || !ref.current) return;
+    const offset = getElementScroll(ref.current);
+    setScrollOffset({
+      initScrollLeft: offset.scrollLeft,
+      initScrollTop: offset.scrollTop
+    });
+  }, [ref]);
+  return scrollOffset;
+};
 export default useInitScrollOffset;

package/dist/utils/useTargetList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTargetList.d.ts","sourceRoot":"","sources":["../../src/utils/useTargetList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,KAAK,SAAS,EAAkC,MAAM,OAAO,CAAC;AACvE,OAAO,SAAS,MAAM,gBAAgB,CAAC;AAGvC,QAAA,MAAM,aAAa,GACjB,UAAU,QAAQ,GAAG,IAAI,EACzB,cAAc,SAAS,CAAC,SAAS,CAAC,2CAoBnC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"useTargetList.d.ts","sourceRoot":"","sources":["../../src/utils/useTargetList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,KAAK,SAAS,EAAoC,MAAM,OAAO,CAAC;AACzE,OAAO,SAAS,MAAM,gBAAgB,CAAC;AAGvC,QAAA,MAAM,aAAa,GACjB,UAAU,QAAQ,GAAG,IAAI,EACzB,cAAc,SAAS,CAAC,SAAS,CAAC,2CA2BnC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/utils/useTargetList.js

@@ -1,18 +1,22 @@
 import useThrottle from '@os-design/use-throttle';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import useScrollEventByPoint from './useScrollEventByPoint.js';
 const useTargetList = (position, listStoreRef) => {
   const [number, setNumber] = useState(0);
-  const targetList = useMemo(() => {
-    if (!position || !listStoreRef.current) return null;
+  const [targetList, setTargetList] = useState(null);
+  useEffect(() => {
+    if (!position || !listStoreRef.current) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setTargetList(null);
+      return;
+    }
     const {
       x,
       y
     } = position;
     const list = listStoreRef.current.findByPosition(x, y);
-    return list || null;
-  }, [listStoreRef, position, number]); // eslint-disable-line react-hooks/exhaustive-deps
-
+    setTargetList(list || null);
+  }, [listStoreRef, position, number]);
   const forceUpdate = useCallback(() => {
     setNumber(n => n + 1);
   }, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/drag-sort",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "type": "module",
@@ -23,28 +23,28 @@
     "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx --out-dir dist",
     "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly --declaration --declarationDir dist",
     "build": "yarn clean && npm-run-all 'build:*'",
-    "ncu": "ncu -u '/^(?!(react|@types/react|react-dom|@types/react-dom)$).*$/'"
+    "ncu": "ncu -u '/^(?!(react-window)$).*$/'"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@os-design/portal": "^1.0.26",
-    "@os-design/use-auto-scroll": "^1.0.30",
-    "@os-design/use-drag": "^1.0.29",
-    "@os-design/use-event": "^1.0.31",
-    "@os-design/use-memo-object": "^1.0.27",
-    "@os-design/use-prevent-default-event": "^1.0.28",
-    "@os-design/use-throttle": "^1.0.30"
+    "@os-design/portal": "^1.0.28",
+    "@os-design/use-auto-scroll": "^1.0.32",
+    "@os-design/use-drag": "^1.0.31",
+    "@os-design/use-event": "^1.0.33",
+    "@os-design/use-memo-object": "^1.0.29",
+    "@os-design/use-prevent-default-event": "^1.0.30",
+    "@os-design/use-throttle": "^1.0.32"
   },
   "devDependencies": {
-    "@os-design/omit-emotion-props": "^1.0.29",
-    "@os-design/use-size": "^1.0.32",
+    "@os-design/omit-emotion-props": "^1.0.31",
+    "@os-design/use-size": "^1.0.34",
     "react-window": "^1.8.11"
   },
   "peerDependencies": {
-    "react": "18",
-    "react-dom": "18"
+    "react": "19",
+    "react-dom": "19"
   },
-  "gitHead": "60ba6c5b1658a4a302a3542e71e2ab3ce6407665"
+  "gitHead": "f333f60e39273574d2227cf0ee70b0c8897b2dde"
 }

package/src/DragAndDrop.tsx

@@ -20,6 +20,7 @@ import ListStore from './utils/ListStore.js';
 import NodeList, { type ExistingNode } from './utils/NodeList.js';
 import { DragAndDropContext } from './utils/useDragAndDrop.js';
 import useDragEffect, {
+  type DragStartHandler,
   type DragEndHandler,
   type DraggedNode,
 } from './utils/useDragEffect.js';
@@ -58,6 +59,11 @@ export interface DragAndDropProps {
    * @default 250
    */
   transitionDelayMs?: number;
+  /**
+   * The callback that is called when the drag is started.
+   * @default undefined
+   */
+  onDragStart?: DragStartHandler;
   /**
    * The callback that is called when the drag is completed.
    * @default undefined
@@ -85,6 +91,7 @@ const DragAndDrop: React.FC<DragAndDropProps> = ({
   autoScrollDistPercent = 20,
   autoScrollMaxSpeedPx = 100,
   transitionDelayMs = 250,
+  onDragStart = () => {},
   onDragEnd = () => {},
   children,
 }) => {
@@ -121,7 +128,7 @@ const DragAndDrop: React.FC<DragAndDropProps> = ({
     enabled: !!draggedNode,
   });
 
-  const onDragStart = useCallback<OnDragStart>(
+  const onDragStartInternal = useCallback<OnDragStart>(
     (pos: Position, startPos: Position) => {
       const startNode = startNodeRef.current;
       if (!startNode) return;
@@ -137,9 +144,14 @@ const DragAndDrop: React.FC<DragAndDropProps> = ({
           y: startPos.y - rect.y,
         },
       });
+      onDragStart({
+        listId: startNode.list.id,
+        index: startNode.node[4],
+        id: startNode.node[5],
+      });
       startNodeRef.current = null;
     },
-    []
+    [onDragStart]
   );
 
   const onDragMove = useCallback<OnDragMove>((pos: Position) => {
@@ -151,7 +163,7 @@ const DragAndDrop: React.FC<DragAndDropProps> = ({
   }, []);
 
   const { onMouseDown, onTouchStart } = useDrag({
-    onDragStart,
+    onDragStart: onDragStartInternal,
     onDragMove,
     onDragEnd: dragEndHandler,
     minMouseDistPx,
@@ -227,6 +239,9 @@ const DragAndDrop: React.FC<DragAndDropProps> = ({
   );
 };
 
-export type { DragEndHandler } from './utils/useDragEffect.js';
+export type {
+  DragStartHandler,
+  DragEndHandler,
+} from './utils/useDragEffect.js';
 
 export default DragAndDrop;

package/src/Droppable.tsx

@@ -3,7 +3,6 @@ import React, {
   type MouseEvent,
   type RefObject,
   type TouchEvent,
-  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -22,12 +21,12 @@ export interface DroppableChildrenProps {
    * The reference to the list.
    * If a virtual list is used, pass it to the outerRef prop.
    */
-  ref: RefObject<HTMLDivElement>;
+  ref: RefObject<HTMLDivElement | null>;
   /**
    * The reference to the container inside the virtual list.
    * Pass it to the innerRef prop.
    */
-  innerRef: RefObject<HTMLDivElement>;
+  innerRef: RefObject<HTMLDivElement | null>;
 }
 
 export interface DroppableProps {
@@ -102,27 +101,18 @@ const Droppable: React.FC<DroppableProps> = ({
     return () => deregisterList(listId);
   }, [deregisterList, registerList]);
 
-  const registerNode = useCallback(
-    (props: NodeProps) => listRef.current.add(props),
-    []
-  );
-  const deregisterNode = useCallback((node: ExistingNode) => {
+  const registerNode = (props: NodeProps) => listRef.current.add(props);
+  const deregisterNode = (node: ExistingNode) => {
     listRef.current.remove(node);
-  }, []);
+  };
 
   // Handlers that determine whether a user clicks on the node
-  const mouseDownHandler = useCallback(
-    (e: MouseEvent, node: ExistingNode) => {
-      onMouseDown(e, listRef.current, node);
-    },
-    [onMouseDown]
-  );
-  const touchStartHandler = useCallback(
-    (e: TouchEvent, node: ExistingNode) => {
-      onTouchStart(e, listRef.current, node);
-    },
-    [onTouchStart]
-  );
+  const mouseDownHandler = (e: MouseEvent, node: ExistingNode) => {
+    onMouseDown(e, listRef.current, node);
+  };
+  const touchStartHandler = (e: TouchEvent, node: ExistingNode) => {
+    onTouchStart(e, listRef.current, node);
+  };
 
   const droppableContext = useMemoObject({
     registerNode,

package/src/utils/NodeList.ts

@@ -10,7 +10,7 @@ export type Node =
 export type ExistingNode = Exclude<Node, null>;
 
 export interface NodeProps {
-  ref: React.MutableRefObject<any>;
+  ref: React.RefObject<any>;
   setStyle: (style: CSSProperties) => void;
   index: number;
   id: string;
@@ -37,8 +37,8 @@ export type RenderDraggedNode = (
 
 interface InitProps {
   id: string;
-  ref: RefObject<HTMLDivElement>;
-  innerRef: RefObject<HTMLDivElement>;
+  ref: RefObject<HTMLDivElement | null>;
+  innerRef: RefObject<HTMLDivElement | null>;
   horizontal: boolean;
   renderDraggedNode: RenderDraggedNode;
 }
@@ -56,13 +56,13 @@ class NodeList {
   /**
    * The ref to the list.
    */
-  public ref: RefObject<HTMLDivElement>;
+  public ref: RefObject<HTMLDivElement | null>;
 
   /**
    * The inner ref to the list.
    * Used by the virtual list.
    */
-  public innerRef: RefObject<HTMLDivElement>;
+  public innerRef: RefObject<HTMLDivElement | null>;
 
   /**
    * Whether the list is horizontal.

package/src/utils/useAppendClassName.ts

@@ -3,7 +3,10 @@ import { type RefObject, useEffect } from 'react';
 /**
  * Adds a new class name to the element.
  */
-const useAppendClassName = (ref: RefObject<HTMLElement>, className: string) => {
+const useAppendClassName = (
+  ref: RefObject<HTMLElement | null>,
+  className: string
+) => {
   useEffect(() => {
     const element = ref.current;
     if (!element) return () => {};

package/src/utils/useDragEffect.ts

@@ -41,6 +41,8 @@ export interface ItemLocation {
   id: string;
 }
 
+export type DragStartHandler = (dragged: ItemLocation) => void;
+
 export type DragEndHandler = (
   dragged: ItemLocation,
   target: ItemLocation

package/src/utils/useGeneratedId.ts

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 
 const useGeneratedId = () =>
+  // eslint-disable-next-line react-hooks/purity
   useMemo(() => Math.random().toString(16).slice(2), []);
 
 export default useGeneratedId;

package/src/utils/useInitRect.ts

@@ -1,17 +1,27 @@
-import { type RefObject, useMemo } from 'react';
+import { type RefObject, useEffect, useState } from 'react';
 
-const useInitRect = (ref?: RefObject<HTMLElement>) =>
-  useMemo(() => {
-    if (!ref || !ref.current) return null;
+const useInitRect = (ref?: RefObject<HTMLElement>) => {
+  const [rect, setRect] = useState<{
+    initX: number;
+    initY: number;
+    initWidth: number;
+    initHeight: number;
+  } | null>(null);
 
-    const rect = ref.current.getBoundingClientRect();
+  useEffect(() => {
+    if (!ref || !ref.current) return;
 
-    return {
-      initX: rect.x,
-      initY: rect.y,
-      initWidth: rect.width,
-      initHeight: rect.height,
-    };
+    const domRect = ref.current.getBoundingClientRect();
+
+    setRect({
+      initX: domRect.x,
+      initY: domRect.y,
+      initWidth: domRect.width,
+      initHeight: domRect.height,
+    });
   }, [ref]);
 
+  return rect;
+};
+
 export default useInitRect;

package/src/utils/useInitScrollOffset.ts

@@ -1,16 +1,24 @@
-import { type RefObject, useMemo } from 'react';
+import { type RefObject, useEffect, useState } from 'react';
 import getElementScroll from './getElementScroll.js';
 
-const useInitScrollOffset = (ref?: RefObject<HTMLElement>) =>
-  useMemo(() => {
-    if (!ref || !ref.current) return null;
+const useInitScrollOffset = (ref?: RefObject<HTMLElement | null>) => {
+  const [scrollOffset, setScrollOffset] = useState<{
+    initScrollLeft: number;
+    initScrollTop: number;
+  } | null>(null);
 
-    const scrollOffset = getElementScroll(ref.current);
+  useEffect(() => {
+    if (!ref || !ref.current) return;
 
-    return {
-      initScrollLeft: scrollOffset.scrollLeft,
-      initScrollTop: scrollOffset.scrollTop,
-    };
+    const offset = getElementScroll(ref.current);
+
+    setScrollOffset({
+      initScrollLeft: offset.scrollLeft,
+      initScrollTop: offset.scrollTop,
+    });
   }, [ref]);
 
+  return scrollOffset;
+};
+
 export default useInitScrollOffset;

package/src/utils/useTargetList.ts

@@ -1,6 +1,6 @@
 import type { Position } from '@os-design/use-drag';
 import useThrottle from '@os-design/use-throttle';
-import { type RefObject, useCallback, useMemo, useState } from 'react';
+import { type RefObject, useCallback, useEffect, useState } from 'react';
 import ListStore from './ListStore.js';
 import useScrollEventByPoint from './useScrollEventByPoint.js';
 
@@ -9,13 +9,20 @@ const useTargetList = (
   listStoreRef: RefObject<ListStore>
 ) => {
   const [number, setNumber] = useState(0);
+  const [targetList, setTargetList] = useState<NonNullable<
+    ReturnType<ListStore['findByPosition']>
+  > | null>(null);
 
-  const targetList = useMemo(() => {
-    if (!position || !listStoreRef.current) return null;
+  useEffect(() => {
+    if (!position || !listStoreRef.current) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setTargetList(null);
+      return;
+    }
     const { x, y } = position;
     const list = listStoreRef.current.findByPosition(x, y);
-    return list || null;
-  }, [listStoreRef, position, number]); // eslint-disable-line react-hooks/exhaustive-deps
+    setTargetList(list || null);
+  }, [listStoreRef, position, number]);
 
   const forceUpdate = useCallback(() => {
     setNumber((n) => n + 1);