@dnd-kit/sortable - npm Package Compare versions

Comparing version 6.0.0-next-202209154910 to 6.0.0-next-202209161019

CHANGELOG.md

 # @dnd-kit/sortable
 
-## 6.0.0-next-202209154910
+## 6.0.0-next-202209161019
 
@@ -97,5 +97,7 @@ ### Major Changes
 
+- [#566](https://github.com/clauderic/dnd-kit/pull/566) [`d315df0`](https://github.com/clauderic/dnd-kit/commit/d315df07022178460a52d6021a41227878b876b8) Thanks [@clauderic](https://github.com/clauderic)! - Fixed a bug where sortable item position was not updated when quickly dragging different sortable items.
+
 - Updated dependencies [[`f3ad20d`](https://github.com/clauderic/dnd-kit/commit/f3ad20d5b2c2f2ca7b82c193c9af5eef38c5ce11), [`02edd26`](https://github.com/clauderic/dnd-kit/commit/02edd2691b24bb49f2e7c9f9a3f282031bf658b7), [`c6c67cb`](https://github.com/clauderic/dnd-kit/commit/c6c67cb9cbc6e61027f7bb084fd2232160037d5e), [`6310227`](https://github.com/clauderic/dnd-kit/commit/63102272d0d63dae349e2e9f638277e16a7d5970), [`528c67e`](https://github.com/clauderic/dnd-kit/commit/528c67e4c617dfc0ce5221496aa8b222ffc82ddb), [`02edd26`](https://github.com/clauderic/dnd-kit/commit/02edd2691b24bb49f2e7c9f9a3f282031bf658b7)]:
-  - @dnd-kit/core@5.0.0-next-202209154910
-  - @dnd-kit/utilities@3.1.0-next-202209154910
+  - @dnd-kit/core@5.0.0-next-202209161019
+  - @dnd-kit/utilities@3.1.0-next-202209161019
 
@@ -102,0 +104,0 @@ ## 5.1.0

dist/components/SortableContext.d.ts

@@ -1,2 +0,2 @@
-import React, { MutableRefObject } from 'react';
+import React from 'react';
 import { ClientRect, UniqueIdentifier } from '@dnd-kit/core';
@@ -21,3 +21,2 @@ import type { SortingStrategy } from '../types';
     strategy: SortingStrategy;
-    wasDragging: MutableRefObject<boolean>;
 }
@@ -24,0 +23,0 @@ export declare const Context: React.Context<ContextDescriptor>;

dist/sortable.cjs.development.js

@@ -259,6 +259,3 @@ 'use strict';
   sortedRects: [],
-  strategy: rectSortingStrategy,
-  wasDragging: {
-    current: false
-  }
+  strategy: rectSortingStrategy
 });
@@ -283,3 +280,2 @@ function SortableContext({
   const isDragging = active != null;
-  const wasDragging = React.useRef(false);
   const activeIndex = active ? items.indexOf(active.id) : -1;
@@ -299,8 +295,2 @@ const overIndex = over ? items.indexOf(over.id) : -1;
   }, [items]);
-  React.useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      wasDragging.current = isDragging;
-    }, 100);
-    return () => clearTimeout(timeoutId);
-  }, [isDragging]);
   const contextValue = React.useMemo(() => ({
@@ -314,5 +304,4 @@ activeIndex,
     sortedRects,
-    strategy,
-    wasDragging
-  }), [activeIndex, containerId, disableTransforms, items, overIndex, sortedRects, useDragOverlay, strategy, wasDragging]);
+    strategy
+  }), [activeIndex, containerId, disableTransforms, items, overIndex, sortedRects, useDragOverlay, strategy]);
   return React__default.createElement(Context.Provider, {
@@ -439,4 +428,3 @@ value: contextValue
     useDragOverlay,
-    strategy: globalStrategy,
-    wasDragging
+    strategy: globalStrategy
   } = React.useContext(Context);
@@ -487,3 +475,3 @@ const index = items.indexOf(id);
   const isSorting = Boolean(active);
-  const displaceItem = isSorting && wasDragging.current && !disableTransforms && isValidIndex(activeIndex) && isValidIndex(overIndex);
+  const displaceItem = isSorting && !disableTransforms && isValidIndex(activeIndex) && isValidIndex(overIndex);
   const shouldDisplaceDragSource = !useDragOverlay && isDragging;
@@ -505,6 +493,10 @@ const dragSourceDisplacement = shouldDisplaceDragSource && displaceItem ? transform : null;
   }) : index;
-  const prevItems = React.useRef(items);
-  const itemsHaveChanged = items !== prevItems.current;
-  const prevNewIndex = React.useRef(newIndex);
-  const previousContainerId = React.useRef(containerId);
+  const activeId = active == null ? void 0 : active.id;
+  const previous = React.useRef({
+    activeId,
+    items,
+    newIndex,
+    containerId
+  });
+  const itemsHaveChanged = items !== previous.current.items;
   const shouldAnimateLayoutChanges = animateLayoutChanges({
@@ -518,7 +510,7 @@ active,
     items,
-    newIndex: prevNewIndex.current,
-    previousItems: prevItems.current,
-    previousContainerId: previousContainerId.current,
+    newIndex: previous.current.newIndex,
+    previousItems: previous.current.items,
+    previousContainerId: previous.current.containerId,
     transition,
-    wasDragging: wasDragging.current
+    wasDragging: previous.current.activeId != null
   });
@@ -532,14 +524,18 @@ const derivedTransform = useDerivedTransform({
   React.useEffect(() => {
-    if (isSorting && prevNewIndex.current !== newIndex) {
-      prevNewIndex.current = newIndex;
+    if (isSorting && previous.current.newIndex !== newIndex) {
+      previous.current.newIndex = newIndex;
     }
 
-    if (containerId !== previousContainerId.current) {
-      previousContainerId.current = containerId;
+    if (containerId !== previous.current.containerId) {
+      previous.current.containerId = containerId;
     }
 
-    if (items !== prevItems.current) {
-      prevItems.current = items;
+    if (items !== previous.current.items) {
+      previous.current.items = items;
     }
-  }, [isSorting, newIndex, containerId, items]);
+
+    if (activeId !== previous.current.activeId) {
+      previous.current.activeId = activeId;
+    }
+  }, [activeId, isSorting, newIndex, containerId, items]);
   return {
@@ -572,3 +568,3 @@ active,
     derivedTransform || // Or to prevent items jumping to back to their "new" position when items change
-    itemsHaveChanged && prevNewIndex.current === index) {
+    itemsHaveChanged && previous.current.newIndex === index) {
       return disabledTransition;
@@ -575,0 +571,0 @@ }

dist/sortable.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("@dnd-kit/core"),i=require("@dnd-kit/utilities");function o(e,t,r){const n=e.slice();return n.splice(r<0?n.length+r:r,0,n.splice(t,1)[0]),n}function s(e){return null!==e&&e>=0}const a={scaleX:1,scaleY:1},c=({rects:e,activeIndex:t,overIndex:r,index:n})=>{const i=o(e,r,t),s=e[n],a=i[n];return a&&s?{x:a.left-s.left,y:a.top-s.top,scaleX:a.width/s.width,scaleY:a.height/s.height}:null},d={scaleX:1,scaleY:1},l=r.createContext({activeIndex:-1,containerId:"Sortable",disableTransforms:!1,items:[],overIndex:-1,useDragOverlay:!1,sortedRects:[],strategy:c,wasDragging:{current:!1}}),u=({id:e,items:t,activeIndex:r,overIndex:n})=>o(t,r,n).indexOf(e),f=({containerId:e,isSorting:t,wasDragging:r,index:n,items:i,newIndex:o,previousItems:s,previousContainerId:a,transition:c})=>!(!c||!r||s!==i&&n===o||!t&&(o===n||e!==a)),g={duration:200,easing:"ease"},p=i.CSS.Transition.toString({property:"transform",duration:0,easing:"linear"}),x={roleDescription:"sortable"},h=[n.KeyboardCode.Down,n.KeyboardCode.Right,n.KeyboardCode.Up,n.KeyboardCode.Left];exports.SortableContext=function({children:e,id:o,items:s,strategy:a=c}){const{active:d,dragOverlay:u,droppableRects:f,over:g,measureDroppableContainers:p,measuringScheduled:x}=n.useDndContext(),h=i.useUniqueId("Sortable",o),v=Boolean(null!==u.rect),y=t.useMemo(()=>s.map(e=>"string"==typeof e?e:e.id),[s]),b=null!=d,I=t.useRef(!1),m=d?y.indexOf(d.id):-1,w=g?y.indexOf(g.id):-1,C=t.useRef(y),R=function(e,t){return e.reduce((e,r,n)=>{const i=t.get(r);return i&&(e[n]=i),e},Array(e.length))}(y,f),S=(D=C.current,!(y.join()===D.join()));var D;const O=-1!==w&&-1===m||S;i.useIsomorphicLayoutEffect(()=>{S&&b&&!x&&p(y)},[S,y,b,p,x]),t.useEffect(()=>{C.current=y},[y]),t.useEffect(()=>{const e=setTimeout(()=>{I.current=b},100);return()=>clearTimeout(e)},[b]);const E=t.useMemo(()=>({activeIndex:m,containerId:h,disableTransforms:O,items:y,overIndex:w,useDragOverlay:v,sortedRects:R,strategy:a,wasDragging:I}),[m,h,O,y,w,R,v,a,I]);return r.createElement(l.Provider,{value:E},e)},exports.arrayMove=o,exports.arraySwap=function(e,t,r){const n=e.slice();return n[t]=e[r],n[r]=e[t],n},exports.defaultAnimateLayoutChanges=f,exports.defaultNewIndexGetter=u,exports.horizontalListSortingStrategy=({rects:e,activeNodeRect:t,activeIndex:r,overIndex:n,index:i})=>{var o;const s=null!=(o=e[r])?o:t;if(!s)return null;const c=function(e,t,r){const n=e[t],i=e[t-1],o=e[t+1];return n&&(i||o)?r<t?i?n.left-(i.left+i.width):o.left-(n.left+n.width):o?o.left-(n.left+n.width):n.left-(i.left+i.width):0}(e,i,r);if(i===r){const t=e[n];return t?{x:r<n?t.left+t.width-(s.left+s.width):t.left-s.left,y:0,...a}:null}return i>r&&i<=n?{x:-s.width-c,y:0,...a}:i<r&&i>=n?{x:s.width+c,y:0,...a}:{x:0,y:0,...a}},exports.rectSortingStrategy=c,exports.rectSwappingStrategy=({activeIndex:e,index:t,rects:r,overIndex:n})=>{let i,o;return t===e&&(i=r[t],o=r[n]),t===n&&(i=r[t],o=r[e]),o&&i?{x:o.left-i.left,y:o.top-i.top,scaleX:o.width/i.width,scaleY:o.height/i.height}:null},exports.sortableKeyboardCoordinates=(e,{context:{active:t,droppableContainers:r,collisionRect:i,scrollableAncestors:o}})=>{if(h.includes(e.code)){if(e.preventDefault(),!t||!i)return;const s=[];r.getEnabled().forEach(t=>{if(!t||(null==t?void 0:t.disabled))return;const r=null==t?void 0:t.rect.current;if(r)switch(e.code){case n.KeyboardCode.Down:i.top+i.height<=r.top&&s.push(t);break;case n.KeyboardCode.Up:i.top>=r.top+r.height&&s.push(t);break;case n.KeyboardCode.Left:i.left>=r.left+r.width&&s.push(t);break;case n.KeyboardCode.Right:i.left+i.width<=r.left&&s.push(t)}});const a=n.closestCorners({active:t,collisionRect:i,droppableContainers:s,pointerCoordinates:null}),c=n.getFirstCollision(a,"id");if(null!=c){const e=r.get(c),t=null==e?void 0:e.node.current,s=null==e?void 0:e.rect.current;if(t&&s){const e=n.getScrollableAncestors(t).some((e,t)=>o[t]!==e)?{x:0,y:0}:{x:i.width-s.width,y:i.height-s.height};return{x:s.left-e.x,y:s.top-e.y}}}}},exports.useSortable=function({animateLayoutChanges:e=f,attributes:r,disabled:o,data:a,getNewIndex:c=u,id:d,strategy:h,resizeObserverConfig:v,transition:y=g}){const{items:b,containerId:I,activeIndex:m,disableTransforms:w,sortedRects:C,overIndex:R,useDragOverlay:S,strategy:D,wasDragging:O}=t.useContext(l),E=b.indexOf(d),N=t.useMemo(()=>({sortable:{containerId:I,index:E,items:b},...a}),[I,a,E,b]),K=t.useMemo(()=>b.slice(b.indexOf(d)),[b,d]),{collisions:L,rect:T,node:M,isOver:k,setNodeRef:q}=n.useDroppable({id:d,data:N,resizeObserverConfig:{updateMeasurementsFor:K,...v}}),{active:A,activeNodeRect:X,activatorEvent:Y,attributes:j,setNodeRef:z,listeners:F,isDragging:U,over:B,transform:P}=n.useDraggable({id:d,data:N,attributes:{...x,...r},disabled:o}),_=i.useCombinedRefs(q,z),G=Boolean(A),H=G&&O.current&&!w&&s(m)&&s(R),J=!S&&U,Q=J&&H?P:null,V=H?null!=Q?Q:(null!=h?h:D)({rects:C,activeNodeRect:X,activeIndex:m,overIndex:R,index:E}):null,W=s(m)&&s(R)?c({id:d,items:b,activeIndex:m,overIndex:R}):E,Z=t.useRef(b),$=b!==Z.current,ee=t.useRef(W),te=t.useRef(I),re=e({active:A,containerId:I,isDragging:U,isSorting:G,id:d,index:E,items:b,newIndex:ee.current,previousItems:Z.current,previousContainerId:te.current,transition:y,wasDragging:O.current}),ne=function({disabled:e,index:r,node:o,rect:s}){const[a,c]=t.useState(null),d=t.useRef(r);return i.useIsomorphicLayoutEffect(()=>{if(!e&&r!==d.current&&o.current){const e=s.current;if(e){const t=n.getClientRect(o.current,{ignoreTransform:!0}),r={x:e.left-t.left,y:e.top-t.top,scaleX:e.width/t.width,scaleY:e.height/t.height};(r.x||r.y)&&c(r)}}r!==d.current&&(d.current=r)},[e,r,o,s]),t.useEffect(()=>{a&&requestAnimationFrame(()=>{c(null)})},[a]),a}({disabled:!re,index:E,node:M,rect:T});return t.useEffect(()=>{G&&ee.current!==W&&(ee.current=W),I!==te.current&&(te.current=I),b!==Z.current&&(Z.current=b)},[G,W,I,b]),{active:A,activeIndex:m,attributes:j,activatorEvent:Y,collisions:L,rect:T,index:E,newIndex:W,items:b,isOver:k,isSorting:G,isDragging:U,listeners:F,node:M,overIndex:R,over:B,setNodeRef:_,setDroppableNodeRef:q,setDraggableNodeRef:z,transform:null!=ne?ne:V,transition:ne||$&&ee.current===E?p:!J&&y&&(G||re)?i.CSS.Transition.toString({...y,property:"transform"}):void 0}},exports.verticalListSortingStrategy=({activeIndex:e,activeNodeRect:t,index:r,rects:n,overIndex:i})=>{var o;const s=null!=(o=n[e])?o:t;if(!s)return null;if(r===e){const t=n[i];return t?{x:0,y:e<i?t.top+t.height-(s.top+s.height):t.top-s.top,...d}:null}const a=function(e,t,r){const n=e[t],i=e[t-1],o=e[t+1];return n?r<t?i?n.top-(i.top+i.height):o?o.top-(n.top+n.height):0:o?o.top-(n.top+n.height):i?n.top-(i.top+i.height):0:0}(n,r,e);return r>e&&r<=i?{x:0,y:-s.height-a,...d}:r<e&&r>=i?{x:0,y:s.height+a,...d}:{x:0,y:0,...d}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("@dnd-kit/core"),i=require("@dnd-kit/utilities");function o(e,t,r){const n=e.slice();return n.splice(r<0?n.length+r:r,0,n.splice(t,1)[0]),n}function s(e){return null!==e&&e>=0}const a={scaleX:1,scaleY:1},d=({rects:e,activeIndex:t,overIndex:r,index:n})=>{const i=o(e,r,t),s=e[n],a=i[n];return a&&s?{x:a.left-s.left,y:a.top-s.top,scaleX:a.width/s.width,scaleY:a.height/s.height}:null},c={scaleX:1,scaleY:1},l=r.createContext({activeIndex:-1,containerId:"Sortable",disableTransforms:!1,items:[],overIndex:-1,useDragOverlay:!1,sortedRects:[],strategy:d}),u=({id:e,items:t,activeIndex:r,overIndex:n})=>o(t,r,n).indexOf(e),f=({containerId:e,isSorting:t,wasDragging:r,index:n,items:i,newIndex:o,previousItems:s,previousContainerId:a,transition:d})=>!(!d||!r||s!==i&&n===o||!t&&(o===n||e!==a)),x={duration:200,easing:"ease"},g=i.CSS.Transition.toString({property:"transform",duration:0,easing:"linear"}),p={roleDescription:"sortable"},h=[n.KeyboardCode.Down,n.KeyboardCode.Right,n.KeyboardCode.Up,n.KeyboardCode.Left];exports.SortableContext=function({children:e,id:o,items:s,strategy:a=d}){const{active:c,dragOverlay:u,droppableRects:f,over:x,measureDroppableContainers:g,measuringScheduled:p}=n.useDndContext(),h=i.useUniqueId("Sortable",o),v=Boolean(null!==u.rect),I=t.useMemo(()=>s.map(e=>"string"==typeof e?e:e.id),[s]),y=null!=c,b=c?I.indexOf(c.id):-1,m=x?I.indexOf(x.id):-1,w=t.useRef(I),C=function(e,t){return e.reduce((e,r,n)=>{const i=t.get(r);return i&&(e[n]=i),e},Array(e.length))}(I,f),S=(R=w.current,!(I.join()===R.join()));var R;const D=-1!==m&&-1===b||S;i.useIsomorphicLayoutEffect(()=>{S&&y&&!p&&g(I)},[S,I,y,g,p]),t.useEffect(()=>{w.current=I},[I]);const O=t.useMemo(()=>({activeIndex:b,containerId:h,disableTransforms:D,items:I,overIndex:m,useDragOverlay:v,sortedRects:C,strategy:a}),[b,h,D,I,m,C,v,a]);return r.createElement(l.Provider,{value:O},e)},exports.arrayMove=o,exports.arraySwap=function(e,t,r){const n=e.slice();return n[t]=e[r],n[r]=e[t],n},exports.defaultAnimateLayoutChanges=f,exports.defaultNewIndexGetter=u,exports.horizontalListSortingStrategy=({rects:e,activeNodeRect:t,activeIndex:r,overIndex:n,index:i})=>{var o;const s=null!=(o=e[r])?o:t;if(!s)return null;const d=function(e,t,r){const n=e[t],i=e[t-1],o=e[t+1];return n&&(i||o)?r<t?i?n.left-(i.left+i.width):o.left-(n.left+n.width):o?o.left-(n.left+n.width):n.left-(i.left+i.width):0}(e,i,r);if(i===r){const t=e[n];return t?{x:r<n?t.left+t.width-(s.left+s.width):t.left-s.left,y:0,...a}:null}return i>r&&i<=n?{x:-s.width-d,y:0,...a}:i<r&&i>=n?{x:s.width+d,y:0,...a}:{x:0,y:0,...a}},exports.rectSortingStrategy=d,exports.rectSwappingStrategy=({activeIndex:e,index:t,rects:r,overIndex:n})=>{let i,o;return t===e&&(i=r[t],o=r[n]),t===n&&(i=r[t],o=r[e]),o&&i?{x:o.left-i.left,y:o.top-i.top,scaleX:o.width/i.width,scaleY:o.height/i.height}:null},exports.sortableKeyboardCoordinates=(e,{context:{active:t,droppableContainers:r,collisionRect:i,scrollableAncestors:o}})=>{if(h.includes(e.code)){if(e.preventDefault(),!t||!i)return;const s=[];r.getEnabled().forEach(t=>{if(!t||(null==t?void 0:t.disabled))return;const r=null==t?void 0:t.rect.current;if(r)switch(e.code){case n.KeyboardCode.Down:i.top+i.height<=r.top&&s.push(t);break;case n.KeyboardCode.Up:i.top>=r.top+r.height&&s.push(t);break;case n.KeyboardCode.Left:i.left>=r.left+r.width&&s.push(t);break;case n.KeyboardCode.Right:i.left+i.width<=r.left&&s.push(t)}});const a=n.closestCorners({active:t,collisionRect:i,droppableContainers:s,pointerCoordinates:null}),d=n.getFirstCollision(a,"id");if(null!=d){const e=r.get(d),t=null==e?void 0:e.node.current,s=null==e?void 0:e.rect.current;if(t&&s){const e=n.getScrollableAncestors(t).some((e,t)=>o[t]!==e)?{x:0,y:0}:{x:i.width-s.width,y:i.height-s.height};return{x:s.left-e.x,y:s.top-e.y}}}}},exports.useSortable=function({animateLayoutChanges:e=f,attributes:r,disabled:o,data:a,getNewIndex:d=u,id:c,strategy:h,resizeObserverConfig:v,transition:I=x}){const{items:y,containerId:b,activeIndex:m,disableTransforms:w,sortedRects:C,overIndex:S,useDragOverlay:R,strategy:D}=t.useContext(l),O=y.indexOf(c),N=t.useMemo(()=>({sortable:{containerId:b,index:O,items:y},...a}),[b,a,O,y]),E=t.useMemo(()=>y.slice(y.indexOf(c)),[y,c]),{collisions:K,rect:L,node:M,isOver:T,setNodeRef:k}=n.useDroppable({id:c,data:N,resizeObserverConfig:{updateMeasurementsFor:E,...v}}),{active:q,activeNodeRect:A,activatorEvent:X,attributes:Y,setNodeRef:j,listeners:z,isDragging:F,over:U,transform:B}=n.useDraggable({id:c,data:N,attributes:{...p,...r},disabled:o}),P=i.useCombinedRefs(k,j),_=Boolean(q),G=_&&!w&&s(m)&&s(S),H=!R&&F,J=H&&G?B:null,Q=G?null!=J?J:(null!=h?h:D)({rects:C,activeNodeRect:A,activeIndex:m,overIndex:S,index:O}):null,V=s(m)&&s(S)?d({id:c,items:y,activeIndex:m,overIndex:S}):O,W=null==q?void 0:q.id,Z=t.useRef({activeId:W,items:y,newIndex:V,containerId:b}),$=y!==Z.current.items,ee=e({active:q,containerId:b,isDragging:F,isSorting:_,id:c,index:O,items:y,newIndex:Z.current.newIndex,previousItems:Z.current.items,previousContainerId:Z.current.containerId,transition:I,wasDragging:null!=Z.current.activeId}),te=function({disabled:e,index:r,node:o,rect:s}){const[a,d]=t.useState(null),c=t.useRef(r);return i.useIsomorphicLayoutEffect(()=>{if(!e&&r!==c.current&&o.current){const e=s.current;if(e){const t=n.getClientRect(o.current,{ignoreTransform:!0}),r={x:e.left-t.left,y:e.top-t.top,scaleX:e.width/t.width,scaleY:e.height/t.height};(r.x||r.y)&&d(r)}}r!==c.current&&(c.current=r)},[e,r,o,s]),t.useEffect(()=>{a&&requestAnimationFrame(()=>{d(null)})},[a]),a}({disabled:!ee,index:O,node:M,rect:L});return t.useEffect(()=>{_&&Z.current.newIndex!==V&&(Z.current.newIndex=V),b!==Z.current.containerId&&(Z.current.containerId=b),y!==Z.current.items&&(Z.current.items=y),W!==Z.current.activeId&&(Z.current.activeId=W)},[W,_,V,b,y]),{active:q,activeIndex:m,attributes:Y,activatorEvent:X,collisions:K,rect:L,index:O,newIndex:V,items:y,isOver:T,isSorting:_,isDragging:F,listeners:z,node:M,overIndex:S,over:U,setNodeRef:P,setDroppableNodeRef:k,setDraggableNodeRef:j,transform:null!=te?te:Q,transition:te||$&&Z.current.newIndex===O?g:!H&&I&&(_||ee)?i.CSS.Transition.toString({...I,property:"transform"}):void 0}},exports.verticalListSortingStrategy=({activeIndex:e,activeNodeRect:t,index:r,rects:n,overIndex:i})=>{var o;const s=null!=(o=n[e])?o:t;if(!s)return null;if(r===e){const t=n[i];return t?{x:0,y:e<i?t.top+t.height-(s.top+s.height):t.top-s.top,...c}:null}const a=function(e,t,r){const n=e[t],i=e[t-1],o=e[t+1];return n?r<t?i?n.top-(i.top+i.height):o?o.top-(n.top+n.height):0:o?o.top-(n.top+n.height):i?n.top-(i.top+i.height):0:0}(n,r,e);return r>e&&r<=i?{x:0,y:-s.height-a,...c}:r<e&&r>=i?{x:0,y:s.height+a,...c}:{x:0,y:0,...c}};
 //# sourceMappingURL=sortable.cjs.production.min.js.map

dist/sortable.esm.js

@@ -252,6 +252,3 @@ import React, { useMemo, useRef, useEffect, useState, useContext } from 'react';
   sortedRects: [],
-  strategy: rectSortingStrategy,
-  wasDragging: {
-    current: false
-  }
+  strategy: rectSortingStrategy
 });
@@ -276,3 +273,2 @@ function SortableContext({
   const isDragging = active != null;
-  const wasDragging = useRef(false);
   const activeIndex = active ? items.indexOf(active.id) : -1;
@@ -292,8 +288,2 @@ const overIndex = over ? items.indexOf(over.id) : -1;
   }, [items]);
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      wasDragging.current = isDragging;
-    }, 100);
-    return () => clearTimeout(timeoutId);
-  }, [isDragging]);
   const contextValue = useMemo(() => ({
@@ -307,5 +297,4 @@ activeIndex,
     sortedRects,
-    strategy,
-    wasDragging
-  }), [activeIndex, containerId, disableTransforms, items, overIndex, sortedRects, useDragOverlay, strategy, wasDragging]);
+    strategy
+  }), [activeIndex, containerId, disableTransforms, items, overIndex, sortedRects, useDragOverlay, strategy]);
   return React.createElement(Context.Provider, {
@@ -432,4 +421,3 @@ value: contextValue
     useDragOverlay,
-    strategy: globalStrategy,
-    wasDragging
+    strategy: globalStrategy
   } = useContext(Context);
@@ -480,3 +468,3 @@ const index = items.indexOf(id);
   const isSorting = Boolean(active);
-  const displaceItem = isSorting && wasDragging.current && !disableTransforms && isValidIndex(activeIndex) && isValidIndex(overIndex);
+  const displaceItem = isSorting && !disableTransforms && isValidIndex(activeIndex) && isValidIndex(overIndex);
   const shouldDisplaceDragSource = !useDragOverlay && isDragging;
@@ -498,6 +486,10 @@ const dragSourceDisplacement = shouldDisplaceDragSource && displaceItem ? transform : null;
   }) : index;
-  const prevItems = useRef(items);
-  const itemsHaveChanged = items !== prevItems.current;
-  const prevNewIndex = useRef(newIndex);
-  const previousContainerId = useRef(containerId);
+  const activeId = active == null ? void 0 : active.id;
+  const previous = useRef({
+    activeId,
+    items,
+    newIndex,
+    containerId
+  });
+  const itemsHaveChanged = items !== previous.current.items;
   const shouldAnimateLayoutChanges = animateLayoutChanges({
@@ -511,7 +503,7 @@ active,
     items,
-    newIndex: prevNewIndex.current,
-    previousItems: prevItems.current,
-    previousContainerId: previousContainerId.current,
+    newIndex: previous.current.newIndex,
+    previousItems: previous.current.items,
+    previousContainerId: previous.current.containerId,
     transition,
-    wasDragging: wasDragging.current
+    wasDragging: previous.current.activeId != null
   });
@@ -525,14 +517,18 @@ const derivedTransform = useDerivedTransform({
   useEffect(() => {
-    if (isSorting && prevNewIndex.current !== newIndex) {
-      prevNewIndex.current = newIndex;
+    if (isSorting && previous.current.newIndex !== newIndex) {
+      previous.current.newIndex = newIndex;
     }
 
-    if (containerId !== previousContainerId.current) {
-      previousContainerId.current = containerId;
+    if (containerId !== previous.current.containerId) {
+      previous.current.containerId = containerId;
     }
 
-    if (items !== prevItems.current) {
-      prevItems.current = items;
+    if (items !== previous.current.items) {
+      previous.current.items = items;
     }
-  }, [isSorting, newIndex, containerId, items]);
+
+    if (activeId !== previous.current.activeId) {
+      previous.current.activeId = activeId;
+    }
+  }, [activeId, isSorting, newIndex, containerId, items]);
   return {
@@ -565,3 +561,3 @@ active,
     derivedTransform || // Or to prevent items jumping to back to their "new" position when items change
-    itemsHaveChanged && prevNewIndex.current === index) {
+    itemsHaveChanged && previous.current.newIndex === index) {
       return disabledTransition;
@@ -568,0 +564,0 @@ }

package.json

 {
   "name": "@dnd-kit/sortable",
-  "version": "6.0.0-next-202209154910",
+  "version": "6.0.0-next-202209161019",
   "description": "Official sortable preset and sensors for dnd kit",
@@ -29,3 +29,3 @@ "author": "Claudéric Demers",
   "dependencies": {
-    "@dnd-kit/utilities": "^3.1.0-next-202209154910",
+    "@dnd-kit/utilities": "^3.1.0-next-202209161019",
     "tslib": "^2.0.0"
@@ -35,6 +35,6 @@ },
     "react": ">=16.8.0",
-    "@dnd-kit/core": "^5.0.0-next-202209154910"
+    "@dnd-kit/core": "^5.0.0-next-202209161019"
   },
   "devDependencies": {
-    "@dnd-kit/core": "^5.0.0-next-202209154910"
+    "@dnd-kit/core": "^5.0.0-next-202209161019"
   },
@@ -41,0 +41,0 @@ "publishConfig": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

193017

decreased by-0.53%

Lines of code

1382

decreased by-0.79%

Dependency changes

• Updated@dnd-kit/utilities@^3.1.0-next-202209161019