@dnd-kit/sortable - npm Package Compare versions

Comparing version 5.0.0 to 5.1.0-next-2021101420823

CHANGELOG.md

 # @dnd-kit/sortable
 
+## 5.1.0-next-2021101420823
+
+### Minor Changes
+
+- [#486](https://github.com/clauderic/dnd-kit/pull/486) [`d86529c`](https://github.com/clauderic/dnd-kit/commit/d86529cde6daa650e9c9edce7f26fb691d71d723) Thanks [@clauderic](https://github.com/clauderic)! - Improvements to better support swappable strategies:
+
+  - Now exporting an `arraySwap` helper to be used instead of `arrayMove` `onDragEnd`.
+  - Added the `getNewIndex` prop on `useSortable`. By default, `useSortable` assumes that items will be moved to their new index using `arrayMove()`, but this isn't always the case, especially when using strategies like `rectSwappingStrategy`. For those scenarios, consumers can now define custom logic that should be used to get the new index for an item on drop, for example, by computing the new order of items using `arraySwap`.
+
+### Patch Changes
+
+- Updated dependencies [[`d973cc6`](https://github.com/clauderic/dnd-kit/commit/d973cc6f5aaca8a01e6da4a958164eb623c4ce9d)]:
+  - @dnd-kit/core@4.0.2-next-2021101420823
+
 ## 5.0.0
@@ -4,0 +18,0 @@

dist/hooks/defaults.d.ts

@@ -1,2 +0,3 @@
-import type { AnimateLayoutChanges, SortableTransition } from './types';
+import type { AnimateLayoutChanges, NewIndexGetter, SortableTransition } from './types';
+export declare const defaultNewIndexGetter: NewIndexGetter;
 export declare const defaultAnimateLayoutChanges: AnimateLayoutChanges;
@@ -3,0 +4,0 @@ export declare const defaultTransition: SortableTransition;

dist/hooks/index.d.ts

 export { useSortable } from './useSortable';
 export type { Arguments as UseSortableArguments } from './useSortable';
-export { defaultAnimateLayoutChanges } from './defaults';
-export type { AnimateLayoutChanges } from './types';
+export { defaultAnimateLayoutChanges, defaultNewIndexGetter } from './defaults';
+export type { AnimateLayoutChanges, NewIndexGetter } from './types';

dist/hooks/types.d.ts

@@ -18,1 +18,8 @@ import type { Active, UniqueIdentifier } from '@dnd-kit/core';
 }) => boolean;
+export interface NewIndexGetterArguments {
+    id: UniqueIdentifier;
+    items: UniqueIdentifier[];
+    activeIndex: number;
+    overIndex: number;
+}
+export declare type NewIndexGetter = (args: NewIndexGetterArguments) => number;

dist/hooks/useSortable.d.ts

 /// <reference types="react" />
 import { UseDraggableArguments } from '@dnd-kit/core';
 import type { SortingStrategy } from '../types';
-import type { AnimateLayoutChanges, SortableTransition } from './types';
+import type { AnimateLayoutChanges, NewIndexGetter, SortableTransition } from './types';
 export interface Arguments extends UseDraggableArguments {
     animateLayoutChanges?: AnimateLayoutChanges;
+    getNewIndex?: NewIndexGetter;
     strategy?: SortingStrategy;
     transition?: SortableTransition | null;
 }
-export declare function useSortable({ animateLayoutChanges, attributes: userDefinedAttributes, disabled, data: customData, id, strategy: localStrategy, transition, }: Arguments): {
+export declare function useSortable({ animateLayoutChanges, attributes: userDefinedAttributes, disabled, data: customData, getNewIndex, id, strategy: localStrategy, transition, }: Arguments): {
     active: import("@dnd-kit/core").Active | null;
@@ -12,0 +13,0 @@ attributes: {

dist/index.d.ts

 export { SortableContext } from './components';
 export type { SortableContextProps } from './components';
-export { useSortable, defaultAnimateLayoutChanges } from './hooks';
-export type { UseSortableArguments, AnimateLayoutChanges } from './hooks';
+export { useSortable, defaultAnimateLayoutChanges, defaultNewIndexGetter, } from './hooks';
+export type { UseSortableArguments, AnimateLayoutChanges, NewIndexGetter, } from './hooks';
 export { horizontalListSortingStrategy, rectSortingStrategy, rectSwappingStrategy, verticalListSortingStrategy, } from './strategies';
 export { sortableKeyboardCoordinates } from './sensors';
-export { arrayMove } from './utilities';
+export { arrayMove, arraySwap } from './utilities';
 export type { SortingStrategy } from './types';

dist/sortable.cjs.development.js

@@ -21,2 +21,12 @@ 'use strict';
 
+/**
+ * Swap an array item to a different position. Returns a new array with the item swapped to the new position.
+ */
+function arraySwap(array, from, to) {
+  const newArray = array.slice();
+  newArray[from] = array[to];
+  newArray[to] = array[from];
+  return newArray;
+}
+
 function getSortedRects(items, layoutRects) {
@@ -316,2 +326,8 @@ return items.reduce((accumulator, id, index) => {
 
+const defaultNewIndexGetter = ({
+  id,
+  items,
+  activeIndex,
+  overIndex
+}) => arrayMove(items, activeIndex, overIndex).indexOf(id);
 const defaultAnimateLayoutChanges = ({
@@ -407,2 +423,3 @@ containerId,
   data: customData,
+  getNewIndex = defaultNewIndexGetter,
   id,
@@ -471,3 +488,8 @@ strategy: localStrategy,
   }) : null;
-  const newIndex = isValidIndex(activeIndex) && isValidIndex(overIndex) ? arrayMove(items, activeIndex, overIndex).indexOf(id) : index;
+  const newIndex = isValidIndex(activeIndex) && isValidIndex(overIndex) ? getNewIndex({
+    id,
+    items,
+    activeIndex,
+    overIndex
+  }) : index;
   const prevItems = React.useRef(items);
@@ -651,3 +673,5 @@ const itemsHaveChanged = items !== prevItems.current;
 exports.arrayMove = arrayMove;
+exports.arraySwap = arraySwap;
 exports.defaultAnimateLayoutChanges = defaultAnimateLayoutChanges;
+exports.defaultNewIndexGetter = defaultNewIndexGetter;
 exports.horizontalListSortingStrategy = horizontalListSortingStrategy;
@@ -654,0 +678,0 @@ exports.rectSortingStrategy = rectSortingStrategy;

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,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,wasDragging:{current:!1}}),u=({containerId:e,isSorting:t,wasDragging:r,index:o,items:n,newIndex:s,previousItems:i,previousContainerId:a,transition:c})=>!(!c||!r||i!==n&&o===s||!t&&(s===o||e!==a)),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=null!=f,m=t.useRef(!1),R=f?y.indexOf(f.id):-1,w=-1!==R,I=g?y.indexOf(g.id):-1,L=t.useRef(y),T=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),C=(S=L.current,!(y.join()===S.join()));var S;const D=-1!==I&&-1===R||C;n.useIsomorphicLayoutEffect(()=>{C&&w&&!h&&p()},[C,w,p,h]),t.useEffect(()=>{L.current=y},[y]),t.useEffect(()=>{const e=setTimeout(()=>{m.current=b},100);return()=>clearTimeout(e)},[b]);const E=t.useMemo(()=>({activeIndex:R,containerId:x,disableTransforms:D,items:y,overIndex:I,useDragOverlay:v,sortedRects:T,strategy:a,wasDragging:m}),[R,x,D,y,I,T,v,a,m]);return r.createElement(d.Provider,{value:E},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 o&&(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:w,useDragOverlay:I,strategy:L,wasDragging:T}=t.useContext(d),C=v.indexOf(f),S=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:S}),{active:N,activeNodeRect:O,activatorEvent:k,attributes:q,setNodeRef:A,listeners:M,isDragging:X,over:Y,transform:j}=o.useDraggable({id:f,data:S,attributes:{...p,...r},disabled:a}),B=n.useCombinedRefs(K,A),U=Boolean(N),P=U&&T.current&&!m&&i(b)&&i(w),V=!I&&X,_=V&&P?j:null,z=P?null!=_?_:(null!=h?h:L)({layoutRects:R,activeNodeRect:O,activeIndex:b,overIndex:w,index:C}):null,F=i(b)&&i(w)?s(v,b,w).indexOf(f):C,G=t.useRef(v),H=v!==G.current,J=t.useRef(F),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,wasDragging:T.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!==F&&(J.current=F),y!==Q.current&&(Q.current=y),v!==G.current&&(G.current=v)},[U,F,y,v]),{active:N,attributes:q,activatorEvent:k,rect:D,index:C,isSorting:U,isDragging:X,listeners:M,node:E,overIndex:w,over:Y,setNodeRef:B,setDroppableNodeRef:K,setDraggableNodeRef:A,transform:null!=Z?Z:z,transition:Z||H&&J.current===C?g:!V&&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}};
+"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,wasDragging:{current:!1}}),u=({id:e,items:t,activeIndex:r,overIndex:o})=>s(t,r,o).indexOf(e),l=({containerId:e,isSorting:t,wasDragging:r,index:o,items:n,newIndex:s,previousItems:i,previousContainerId:a,transition:c})=>!(!c||!r||i!==n&&o===s||!t&&(s===o||e!==a)),g={duration:200,easing:"ease"},p=n.CSS.Transition.toString({property:"transform",duration:0,easing:"linear"}),x={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:x}=o.useDndContext(),h=n.useUniqueId("Sortable",s),v=Boolean(null!==u.rect),y=t.useMemo(()=>i.map(e=>"string"==typeof e?e:e.id),[i]),b=null!=f,I=t.useRef(!1),m=f?y.indexOf(f.id):-1,w=-1!==m,R=g?y.indexOf(g.id):-1,L=t.useRef(y),T=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),C=(S=L.current,!(y.join()===S.join()));var S;const D=-1!==R&&-1===m||C;n.useIsomorphicLayoutEffect(()=>{C&&w&&!x&&p()},[C,w,p,x]),t.useEffect(()=>{L.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:D,items:y,overIndex:R,useDragOverlay:v,sortedRects:T,strategy:a,wasDragging:I}),[m,h,D,y,R,T,v,a,I]);return r.createElement(d.Provider,{value:E},e)},exports.arrayMove=s,exports.arraySwap=function(e,t,r){const o=e.slice();return o[t]=e[r],o[r]=e[t],o},exports.defaultAnimateLayoutChanges=l,exports.defaultNewIndexGetter=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 o&&(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=l,attributes:r,disabled:s,data:a,getNewIndex:c=u,id:f,strategy:h,transition:v=g}){const{items:y,containerId:b,activeIndex:I,disableTransforms:m,sortedRects:w,overIndex:R,useDragOverlay:L,strategy:T,wasDragging:C}=t.useContext(d),S=y.indexOf(f),D=t.useMemo(()=>({sortable:{containerId:b,index:S,items:y},...a}),[b,a,S,y]),{rect:E,node:N,setNodeRef:K}=o.useDroppable({id:f,data:D}),{active:O,activeNodeRect:k,activatorEvent:q,attributes:A,setNodeRef:M,listeners:X,isDragging:Y,over:j,transform:B}=o.useDraggable({id:f,data:D,attributes:{...x,...r},disabled:s}),U=n.useCombinedRefs(K,M),P=Boolean(O),V=P&&C.current&&!m&&i(I)&&i(R),_=!L&&Y,z=_&&V?B:null,F=V?null!=z?z:(null!=h?h:T)({layoutRects:w,activeNodeRect:k,activeIndex:I,overIndex:R,index:S}):null,G=i(I)&&i(R)?c({id:f,items:y,activeIndex:I,overIndex:R}):S,H=t.useRef(y),J=y!==H.current,Q=t.useRef(G),W=t.useRef(b),Z=e({active:O,containerId:b,isDragging:Y,isSorting:P,id:f,index:S,items:y,newIndex:Q.current,previousItems:H.current,previousContainerId:W.current,transition:v,wasDragging:C.current}),$=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:!Z,index:S,node:N,rect:E});return t.useEffect(()=>{P&&Q.current!==G&&(Q.current=G),b!==W.current&&(W.current=b),y!==H.current&&(H.current=y)},[P,G,b,y]),{active:O,attributes:A,activatorEvent:q,rect:E,index:S,isSorting:P,isDragging:Y,listeners:X,node:N,overIndex:R,over:j,setNodeRef:U,setDroppableNodeRef:K,setDraggableNodeRef:M,transform:null!=$?$:F,transition:$||J&&Q.current===S?p:!_&&v&&(P||Z)?n.CSS.Transition.toString({...v,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

@@ -14,2 +14,12 @@ import React, { useMemo, useRef, useEffect, useState, useContext } from 'react';
 
+/**
+ * Swap an array item to a different position. Returns a new array with the item swapped to the new position.
+ */
+function arraySwap(array, from, to) {
+  const newArray = array.slice();
+  newArray[from] = array[to];
+  newArray[to] = array[from];
+  return newArray;
+}
+
 function getSortedRects(items, layoutRects) {
@@ -309,2 +319,8 @@ return items.reduce((accumulator, id, index) => {
 
+const defaultNewIndexGetter = ({
+  id,
+  items,
+  activeIndex,
+  overIndex
+}) => arrayMove(items, activeIndex, overIndex).indexOf(id);
 const defaultAnimateLayoutChanges = ({
@@ -400,2 +416,3 @@ containerId,
   data: customData,
+  getNewIndex = defaultNewIndexGetter,
   id,
@@ -464,3 +481,8 @@ strategy: localStrategy,
   }) : null;
-  const newIndex = isValidIndex(activeIndex) && isValidIndex(overIndex) ? arrayMove(items, activeIndex, overIndex).indexOf(id) : index;
+  const newIndex = isValidIndex(activeIndex) && isValidIndex(overIndex) ? getNewIndex({
+    id,
+    items,
+    activeIndex,
+    overIndex
+  }) : index;
   const prevItems = useRef(items);
@@ -642,3 +664,3 @@ const itemsHaveChanged = items !== prevItems.current;
 
-export { SortableContext, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy, rectSortingStrategy, rectSwappingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy };
+export { SortableContext, arrayMove, arraySwap, defaultAnimateLayoutChanges, defaultNewIndexGetter, horizontalListSortingStrategy, rectSortingStrategy, rectSwappingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy };
 //# sourceMappingURL=sortable.esm.js.map

dist/utilities/index.d.ts

 export { arrayMove } from './arrayMove';
+export { arraySwap } from './arraySwap';
 export { getSortedRects } from './getSortedRects';
 export { isValidIndex } from './isValidIndex';

package.json

 {
   "name": "@dnd-kit/sortable",
-  "version": "5.0.0",
+  "version": "5.1.0-next-2021101420823",
   "description": "Official sortable preset and sensors for dnd kit",
@@ -34,6 +34,6 @@ "author": "Claudéric Demers",
     "react": ">=16.8.0",
-    "@dnd-kit/core": "^4.0.0"
+    "@dnd-kit/core": "^4.0.2-next-2021101420823"
   },
   "devDependencies": {
-    "@dnd-kit/core": "^4.0.0"
+    "@dnd-kit/core": "^4.0.2-next-2021101420823"
   },
@@ -40,0 +40,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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

185737

increased by3.63%

Number of package files

34

increased by3.03%

Lines of code

1370

increased by4.5%

Worsened metrics

Number of low quality alerts

3

increased by50%

No dependency changes