@dnd-kit/sortable - npm Package Compare versions

Comparing version 5.0.0-next-202172315242 to 5.0.0-next-20217252926

CHANGELOG.md

 # @dnd-kit/sortable
 
-## 5.0.0-next-202172315242
+## 5.0.0-next-20217252926
 
@@ -10,2 +10,6 @@ ### Major Changes
 
+### Minor Changes
+
+- [#433](https://github.com/clauderic/dnd-kit/pull/433) [`c447880`](https://github.com/clauderic/dnd-kit/commit/c447880656b6bee2915d5a5f01d3ddfbd5705fa2) Thanks [@clauderic](https://github.com/clauderic)! - Fix unwanted animations when items in sortable context change
+
 ### Patch Changes
@@ -25,5 +29,5 @@
 
-- Updated dependencies [[`13be602`](https://github.com/clauderic/dnd-kit/commit/13be602229c6d5723b3ae98bca7b8f45f0773366), [`aede2cc`](https://github.com/clauderic/dnd-kit/commit/aede2cc42d488435cf65f19b63ba6bb7702b3fde), [`05d6a78`](https://github.com/clauderic/dnd-kit/commit/05d6a78a17cbaacd8dffed685dfea5a6ea3d38a8), [`a32a4c5`](https://github.com/clauderic/dnd-kit/commit/a32a4c5f6228b9f03bf460b8403a38b8c3de493f), [`f96cb5d`](https://github.com/clauderic/dnd-kit/commit/f96cb5d5e45a1000104892244201a70cbe8e6553), [`dea715c`](https://github.com/clauderic/dnd-kit/commit/dea715c342b2d998a9f1562cacb5e70c77562c92), [`dbc9601`](https://github.com/clauderic/dnd-kit/commit/dbc9601c922e1d6944a63f66ee647f203abee595), [`46ec5e4`](https://github.com/clauderic/dnd-kit/commit/46ec5e4c6e3ca9fa849666f90fef426b3c465cf0), [`7006464`](https://github.com/clauderic/dnd-kit/commit/700646468683e4820269534c6352cca93bb5a987), [`2ba6dfe`](https://github.com/clauderic/dnd-kit/commit/2ba6dfe6b080b90b13aa8d9eb07331515a0d2faa), [`8d70540`](https://github.com/clauderic/dnd-kit/commit/8d70540771d1455c326310b438a198d2516e1d04), [`13be602`](https://github.com/clauderic/dnd-kit/commit/13be602229c6d5723b3ae98bca7b8f45f0773366), [`422d083`](https://github.com/clauderic/dnd-kit/commit/422d0831173a893099ba924bf7bbc465640fc15d), [`c4b21b4`](https://github.com/clauderic/dnd-kit/commit/c4b21b4ee17cba31c10928eb227848026f54222a), [`a13dbb6`](https://github.com/clauderic/dnd-kit/commit/a13dbb66586edbf2998c7b251e236604255fd227), [`1f5ca27`](https://github.com/clauderic/dnd-kit/commit/1f5ca27b17879861c2c545160c2046a747544846)]:
-  - @dnd-kit/core@4.0.0-next-202172315242
-  - @dnd-kit/utilities@3.0.0-next-202172315242
+- Updated dependencies [[`13be602`](https://github.com/clauderic/dnd-kit/commit/13be602229c6d5723b3ae98bca7b8f45f0773366), [`aede2cc`](https://github.com/clauderic/dnd-kit/commit/aede2cc42d488435cf65f19b63ba6bb7702b3fde), [`05d6a78`](https://github.com/clauderic/dnd-kit/commit/05d6a78a17cbaacd8dffed685dfea5a6ea3d38a8), [`a32a4c5`](https://github.com/clauderic/dnd-kit/commit/a32a4c5f6228b9f03bf460b8403a38b8c3de493f), [`f96cb5d`](https://github.com/clauderic/dnd-kit/commit/f96cb5d5e45a1000104892244201a70cbe8e6553), [`dea715c`](https://github.com/clauderic/dnd-kit/commit/dea715c342b2d998a9f1562cacb5e70c77562c92), [`dbc9601`](https://github.com/clauderic/dnd-kit/commit/dbc9601c922e1d6944a63f66ee647f203abee595), [`46ec5e4`](https://github.com/clauderic/dnd-kit/commit/46ec5e4c6e3ca9fa849666f90fef426b3c465cf0), [`7006464`](https://github.com/clauderic/dnd-kit/commit/700646468683e4820269534c6352cca93bb5a987), [`c447880`](https://github.com/clauderic/dnd-kit/commit/c447880656b6bee2915d5a5f01d3ddfbd5705fa2), [`2ba6dfe`](https://github.com/clauderic/dnd-kit/commit/2ba6dfe6b080b90b13aa8d9eb07331515a0d2faa), [`8d70540`](https://github.com/clauderic/dnd-kit/commit/8d70540771d1455c326310b438a198d2516e1d04), [`13be602`](https://github.com/clauderic/dnd-kit/commit/13be602229c6d5723b3ae98bca7b8f45f0773366), [`422d083`](https://github.com/clauderic/dnd-kit/commit/422d0831173a893099ba924bf7bbc465640fc15d), [`c4b21b4`](https://github.com/clauderic/dnd-kit/commit/c4b21b4ee17cba31c10928eb227848026f54222a), [`a13dbb6`](https://github.com/clauderic/dnd-kit/commit/a13dbb66586edbf2998c7b251e236604255fd227), [`1f5ca27`](https://github.com/clauderic/dnd-kit/commit/1f5ca27b17879861c2c545160c2046a747544846)]:
+  - @dnd-kit/core@4.0.0-next-20217252926
+  - @dnd-kit/utilities@3.0.0-next-20217252926
 
@@ -30,0 +34,0 @@ ## 4.0.0

dist/hooks/types.d.ts

@@ -6,2 +6,3 @@ import type { Active, UniqueIdentifier } from '@dnd-kit/core';
     active: Active | null;
+    containerId: UniqueIdentifier;
     isDragging: boolean;
@@ -11,6 +12,8 @@ isSorting: boolean;
     index: number;
+    items: UniqueIdentifier[];
+    previousItems: UniqueIdentifier[];
+    previousContainerId: UniqueIdentifier;
     newIndex: number;
-    items: UniqueIdentifier[];
     transition: SortableTransition | null;
     wasSorting: boolean;
 }) => boolean;

dist/hooks/utilities/useDerivedTransform.d.ts

 /// <reference types="react" />
 import { LayoutRect } from '@dnd-kit/core';
-import type { Transform } from '@dnd-kit/utilities';
+import { Transform } from '@dnd-kit/utilities';
 interface Arguments {
@@ -10,3 +10,3 @@ rect: React.MutableRefObject<LayoutRect | null>;
 }
-export declare function useDerivedTransform({ rect, disabled, index, node }: Arguments): Transform | null;
+export declare function useDerivedTransform({ disabled, index, node, rect }: Arguments): Transform | null;
 export {};

dist/sortable.cjs.development.js

@@ -314,5 +314,9 @@ 'use strict';
 const defaultAnimateLayoutChanges = ({
+  containerId,
   isSorting,
   index,
+  items,
   newIndex,
+  previousItems,
+  previousContainerId,
   transition
@@ -324,2 +328,6 @@ }) => {
 
+  if (previousItems !== items && index === newIndex) {
+    return false;
+  }
+
   if (isSorting) {
@@ -329,3 +337,3 @@ return true;
 
-  return newIndex !== index;
+  return newIndex !== index && containerId === previousContainerId;
 };
@@ -352,11 +360,11 @@ const defaultTransition = {
 function useDerivedTransform({
-  rect,
   disabled,
   index,
-  node
+  node,
+  rect
 }) {
   const [derivedTransform, setDerivedtransform] = React.useState(null);
-  const prevIndex = React.useRef(index);
-  React.useEffect(() => {
-    if (!disabled && index !== prevIndex.current && node.current) {
+  const previousIndex = React.useRef(index);
+  utilities.useIsomorphicLayoutEffect(() => {
+    if (!disabled && index !== previousIndex.current && node.current) {
       const initial = rect.current;
@@ -379,4 +387,4 @@
 
-    if (index !== prevIndex.current) {
-      prevIndex.current = index;
+    if (index !== previousIndex.current) {
+      previousIndex.current = index;
     }
@@ -463,5 +471,9 @@ }, [disabled, index, node, rect]);
   const newIndex = isValidIndex(activeIndex) && isValidIndex(overIndex) ? arrayMove(items, activeIndex, overIndex).indexOf(id) : index;
+  const prevItems = React.useRef(items);
+  const itemsHaveChanged = items !== prevItems.current;
   const prevNewIndex = React.useRef(newIndex);
+  const previousContainerId = React.useRef(containerId);
   const shouldAnimateLayoutChanges = animateLayoutChanges({
     active,
+    containerId,
     isDragging,
@@ -473,2 +485,4 @@ isSorting,
     newIndex: prevNewIndex.current,
+    previousItems: prevItems.current,
+    previousContainerId: previousContainerId.current,
     transition,
@@ -484,6 +498,14 @@ wasSorting: wasSorting.current
   React.useEffect(() => {
-    if (isSorting) {
+    if (isSorting && prevNewIndex.current !== newIndex) {
       prevNewIndex.current = newIndex;
     }
-  }, [isSorting, newIndex]);
+
+    if (containerId !== previousContainerId.current) {
+      previousContainerId.current = containerId;
+    }
+
+    if (items !== prevItems.current) {
+      prevItems.current = items;
+    }
+  }, [isSorting, newIndex, containerId, items]);
   return {
@@ -509,4 +531,5 @@ active,
   function getTransition() {
-    if (derivedTransform) {
-      // Temporarily disable transitions for a single frame to set up derived transforms
+    if ( // Temporarily disable transitions for a single frame to set up derived transforms
+    derivedTransform || // Or to prevent items jumping to back to their "new" position when items change
+    itemsHaveChanged && prevNewIndex.current === index) {
       return disabledTransition;
@@ -513,0 +536,0 @@ }

dist/sortable.cjs.production.min.js

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

dist/sortable.esm.js

@@ -307,5 +307,9 @@ import React, { useMemo, useRef, useEffect, useState, useContext } from 'react';
 const defaultAnimateLayoutChanges = ({
+  containerId,
   isSorting,
   index,
+  items,
   newIndex,
+  previousItems,
+  previousContainerId,
   transition
@@ -317,2 +321,6 @@ }) => {
 
+  if (previousItems !== items && index === newIndex) {
+    return false;
+  }
+
   if (isSorting) {
@@ -322,3 +330,3 @@ return true;
 
-  return newIndex !== index;
+  return newIndex !== index && containerId === previousContainerId;
 };
@@ -345,11 +353,11 @@ const defaultTransition = {
 function useDerivedTransform({
-  rect,
   disabled,
   index,
-  node
+  node,
+  rect
 }) {
   const [derivedTransform, setDerivedtransform] = useState(null);
-  const prevIndex = useRef(index);
-  useEffect(() => {
-    if (!disabled && index !== prevIndex.current && node.current) {
+  const previousIndex = useRef(index);
+  useIsomorphicLayoutEffect(() => {
+    if (!disabled && index !== previousIndex.current && node.current) {
       const initial = rect.current;
@@ -372,4 +380,4 @@
 
-    if (index !== prevIndex.current) {
-      prevIndex.current = index;
+    if (index !== previousIndex.current) {
+      previousIndex.current = index;
     }
@@ -456,5 +464,9 @@ }, [disabled, index, node, rect]);
   const newIndex = isValidIndex(activeIndex) && isValidIndex(overIndex) ? arrayMove(items, activeIndex, overIndex).indexOf(id) : index;
+  const prevItems = useRef(items);
+  const itemsHaveChanged = items !== prevItems.current;
   const prevNewIndex = useRef(newIndex);
+  const previousContainerId = useRef(containerId);
   const shouldAnimateLayoutChanges = animateLayoutChanges({
     active,
+    containerId,
     isDragging,
@@ -466,2 +478,4 @@ isSorting,
     newIndex: prevNewIndex.current,
+    previousItems: prevItems.current,
+    previousContainerId: previousContainerId.current,
     transition,
@@ -477,6 +491,14 @@ wasSorting: wasSorting.current
   useEffect(() => {
-    if (isSorting) {
+    if (isSorting && prevNewIndex.current !== newIndex) {
       prevNewIndex.current = newIndex;
     }
-  }, [isSorting, newIndex]);
+
+    if (containerId !== previousContainerId.current) {
+      previousContainerId.current = containerId;
+    }
+
+    if (items !== prevItems.current) {
+      prevItems.current = items;
+    }
+  }, [isSorting, newIndex, containerId, items]);
   return {
@@ -502,4 +524,5 @@ active,
   function getTransition() {
-    if (derivedTransform) {
-      // Temporarily disable transitions for a single frame to set up derived transforms
+    if ( // Temporarily disable transitions for a single frame to set up derived transforms
+    derivedTransform || // Or to prevent items jumping to back to their "new" position when items change
+    itemsHaveChanged && prevNewIndex.current === index) {
       return disabledTransition;
@@ -506,0 +529,0 @@ }

package.json

 {
   "name": "@dnd-kit/sortable",
-  "version": "5.0.0-next-202172315242",
+  "version": "5.0.0-next-20217252926",
   "description": "Official sortable preset and sensors for dnd kit",
@@ -29,3 +29,3 @@ "author": "Claudéric Demers",
   "dependencies": {
-    "@dnd-kit/utilities": "^3.0.0-next-202172315242",
+    "@dnd-kit/utilities": "^3.0.0-next-20217252926",
     "tslib": "^2.0.0"
@@ -35,6 +35,6 @@ },
     "react": ">=16.8.0",
-    "@dnd-kit/core": "^4.0.0-next-202172315242"
+    "@dnd-kit/core": "^4.0.0-next-20217252926"
   },
   "devDependencies": {
-    "@dnd-kit/core": "^4.0.0-next-202172315242"
+    "@dnd-kit/core": "^4.0.0-next-20217252926"
   },
@@ -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

Improved metrics

Total package byte prevSize

176163

increased by4.38%

Lines of code

1305

increased by3.49%

Dependency changes

• Updated@dnd-kit/utilities@^3.0.0-next-20217252926