@os-design/drag-sort 1.0.44 → 1.0.45

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/drag-sort",
-  "version": "1.0.44",
+  "version": "1.0.45",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "type": "module",
@@ -29,22 +29,22 @@
     "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.27",
+    "@os-design/use-auto-scroll": "^1.0.31",
+    "@os-design/use-drag": "^1.0.30",
+    "@os-design/use-event": "^1.0.32",
+    "@os-design/use-memo-object": "^1.0.28",
+    "@os-design/use-prevent-default-event": "^1.0.29",
+    "@os-design/use-throttle": "^1.0.31"
   },
   "devDependencies": {
-    "@os-design/omit-emotion-props": "^1.0.29",
-    "@os-design/use-size": "^1.0.32",
+    "@os-design/omit-emotion-props": "^1.0.30",
+    "@os-design/use-size": "^1.0.33",
     "react-window": "^1.8.11"
   },
   "peerDependencies": {
     "react": "18",
     "react-dom": "18"
   },
-  "gitHead": "60ba6c5b1658a4a302a3542e71e2ab3ce6407665"
+  "gitHead": "7a2aee283bdbdba8ba69a3212769ad321beaaed2"
 }

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/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