@dnd-kit/sortable - npm Package Compare versions

Comparing version 7.0.0-next-20224191800 to 7.0.0-next-2022419212032

CHANGELOG.md

 # @dnd-kit/sortable
 
-## 7.0.0-next-20224191800
+## 7.0.0-next-2022419212032
 
 ### Major Changes
 
-- [#660](https://github.com/clauderic/dnd-kit/pull/660) [`30bbd12`](https://github.com/clauderic/dnd-kit/commit/30bbd12f9606c2e99523cb9ece465041cb37e916) Thanks [@clauderic](https://github.com/clauderic)! - The default `sortableKeyboardCoordinates` function that is exported from the `@dnd-kit/sortable` package has been updated to better handle cases where the collision rectangle is overlapping droppable rectangles. For example, for `down` arrow key, the default function had logic that would only consider collisions against droppables that were below the `bottom` edge of the collision rect. This was problematic when the collision rect was overlapping droppable rects, because it meant that it's bottom edge was below the top edge of the droppable, and that resulted in that droppable being skipped.
+- [#660](https://github.com/clauderic/dnd-kit/pull/660) [`30bbd12`](https://github.com/clauderic/dnd-kit/commit/30bbd12f9606c2e99523cb9ece465041cb37e916) Thanks [@clauderic](https://github.com/clauderic)! - Changes to the default `sortableKeyboardCoordinates` KeyboardSensor coordinate getter.
 
+  #### Better handling of variable sizes
+
+  The default `sortableKeyboardCoordinates` function now has better handling of lists that have items of variable sizes. We recommend that consumers re-order lists `onDragOver` instead of `onDragEnd` when sorting lists of variable sizes via the keyboard for optimal compatibility.
+
+  #### Better handling of overlapping droppables
+
+  The default `sortableKeyboardCoordinates` function that is exported from the `@dnd-kit/sortable` package has been updated to better handle cases where the collision rectangle is overlapping droppable rectangles. For example, for `down` arrow key, the default function had logic that would only consider collisions against droppables that were below the `bottom` edge of the collision rect. This was problematic when the collision rect was overlapping droppable rects, because it meant that it's bottom edge was below the top edge of the droppable, and that resulted in that droppable being skipped.
+
   ```diff
@@ -69,7 +77,7 @@ - collisionRect.bottom > droppableRect.top
 
-- [#685](https://github.com/clauderic/dnd-kit/pull/685) [`4b286e4`](https://github.com/clauderic/dnd-kit/commit/4b286e41288f5f50cdcdb24a663c314a91cda7cb) Thanks [@tmcw](https://github.com/tmcw)! - Faster (and safer) equal implementation.
+- [#749](https://github.com/clauderic/dnd-kit/pull/749) [`188a450`](https://github.com/clauderic/dnd-kit/commit/188a4507b99d8e8fdaa50bd26deb826c86608e18) Thanks [@clauderic](https://github.com/clauderic)! - Faster (and safer) equal implementation.
 
-- Updated dependencies [[`4173087`](https://github.com/clauderic/dnd-kit/commit/417308704454c50f88ab305ab450a99bde5034b0), [`59ca82b`](https://github.com/clauderic/dnd-kit/commit/59ca82b9f228f34c7731ece87aef5d9633608b57), [`7161f70`](https://github.com/clauderic/dnd-kit/commit/7161f702c9fe06f8dafa6449d48b918070ca46fb), [`40707ce`](https://github.com/clauderic/dnd-kit/commit/40707ce6f388957203d6df4ccbeef460450ffd7d), [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9), [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9), [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc), [`77e3d44`](https://github.com/clauderic/dnd-kit/commit/77e3d44502383d2f9a9f9af014b053619b3e37b3), [`e302bd4`](https://github.com/clauderic/dnd-kit/commit/e302bd4488bdfb6735c97ac42c1f4a0b1e8bfdf9), [`59ca82b`](https://github.com/clauderic/dnd-kit/commit/59ca82b9f228f34c7731ece87aef5d9633608b57), [`5f3c700`](https://github.com/clauderic/dnd-kit/commit/5f3c7009698d15936fd20f30f11ad3b23cd7886f), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc), [`e6e242c`](https://github.com/clauderic/dnd-kit/commit/e6e242cbc718ed687a26f5c622eeed4dbd6c2425), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc), [`10f6836`](https://github.com/clauderic/dnd-kit/commit/10f683631103b1d919f2fbca1177141b9369d2cf), [`c1b3b5a`](https://github.com/clauderic/dnd-kit/commit/c1b3b5a0be5759b707e22c4e1b1236aaa82773a2), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc)]:
-  - @dnd-kit/core@6.0.0-next-20224191800
-  - @dnd-kit/utilities@3.2.0-next-20224191800
+- Updated dependencies [[`4173087`](https://github.com/clauderic/dnd-kit/commit/417308704454c50f88ab305ab450a99bde5034b0), [`59ca82b`](https://github.com/clauderic/dnd-kit/commit/59ca82b9f228f34c7731ece87aef5d9633608b57), [`7161f70`](https://github.com/clauderic/dnd-kit/commit/7161f702c9fe06f8dafa6449d48b918070ca46fb), [`40707ce`](https://github.com/clauderic/dnd-kit/commit/40707ce6f388957203d6df4ccbeef460450ffd7d), [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9), [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9), [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc), [`77e3d44`](https://github.com/clauderic/dnd-kit/commit/77e3d44502383d2f9a9f9af014b053619b3e37b3), [`5811986`](https://github.com/clauderic/dnd-kit/commit/5811986e7544a5e80039870a015e38df805eaad1), [`e302bd4`](https://github.com/clauderic/dnd-kit/commit/e302bd4488bdfb6735c97ac42c1f4a0b1e8bfdf9), [`188a450`](https://github.com/clauderic/dnd-kit/commit/188a4507b99d8e8fdaa50bd26deb826c86608e18), [`59ca82b`](https://github.com/clauderic/dnd-kit/commit/59ca82b9f228f34c7731ece87aef5d9633608b57), [`5f3c700`](https://github.com/clauderic/dnd-kit/commit/5f3c7009698d15936fd20f30f11ad3b23cd7886f), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc), [`e6e242c`](https://github.com/clauderic/dnd-kit/commit/e6e242cbc718ed687a26f5c622eeed4dbd6c2425), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc), [`10f6836`](https://github.com/clauderic/dnd-kit/commit/10f683631103b1d919f2fbca1177141b9369d2cf), [`c1b3b5a`](https://github.com/clauderic/dnd-kit/commit/c1b3b5a0be5759b707e22c4e1b1236aaa82773a2), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc)]:
+  - @dnd-kit/core@6.0.0-next-2022419212032
+  - @dnd-kit/utilities@3.2.0-next-2022419212032
 
@@ -76,0 +84,0 @@ ## 6.0.1

dist/hooks/useSortable.d.ts

 /// <reference types="react" />
 import { UseDraggableArguments, UseDroppableArguments } from '@dnd-kit/core';
-import type { SortingStrategy } from '../types';
+import type { SortableData, SortingStrategy } from '../types';
 import type { AnimateLayoutChanges, NewIndexGetter, SortableTransition } from './types';
@@ -15,2 +15,5 @@ export interface Arguments extends UseDraggableArguments, Pick<UseDroppableArguments, 'resizeObserverConfig'> {
     attributes: import("@dnd-kit/core").DraggableAttributes;
+    data: SortableData & {
+        [x: string]: any;
+    };
     rect: import("react").MutableRefObject<import("@dnd-kit/core").ClientRect | null>;
@@ -17,0 +20,0 @@ index: number;

dist/index.d.ts

@@ -8,2 +8,3 @@ export { SortableContext } from './components';
 export { arrayMove, arraySwap } from './utilities';
-export type { SortingStrategy } from './types';
+export { hasSortableData } from './types';
+export type { SortableData, SortingStrategy } from './types';

dist/sortable.cjs.development.js

@@ -543,2 +543,3 @@ 'use strict';
     attributes,
+    data,
     rect,
@@ -584,2 +585,16 @@ index,
 
+function hasSortableData(entry) {
+  if (!entry) {
+    return false;
+  }
+
+  const data = entry.data.current;
+
+  if (data && 'sortable' in data && typeof data.sortable === 'object' && 'containerId' in data.sortable && 'items' in data.sortable && 'index' in data.sortable) {
+    return true;
+  }
+
+  return false;
+}
+
 const directions = [core.KeyboardCode.Down, core.KeyboardCode.Right, core.KeyboardCode.Up, core.KeyboardCode.Left];
@@ -609,3 +624,3 @@ const sortableKeyboardCoordinates = (event, {
 
-      const rect = entry == null ? void 0 : entry.rect.current;
+      const rect = droppableRects.get(entry.id);
 
@@ -660,20 +675,24 @@ if (!rect) {
     if (closestId != null) {
+      const activeDroppable = droppableContainers.get(active.id);
       const newDroppable = droppableContainers.get(closestId);
+      const newRect = newDroppable ? droppableRects.get(newDroppable.id) : null;
       const newNode = newDroppable == null ? void 0 : newDroppable.node.current;
-      const newRect = newDroppable == null ? void 0 : newDroppable.rect.current;
 
-      if (newNode && newRect) {
+      if (newNode && newRect && activeDroppable && newDroppable) {
         const newScrollAncestors = core.getScrollableAncestors(newNode);
         const hasDifferentScrollAncestors = newScrollAncestors.some((element, index) => scrollableAncestors[index] !== element);
-        const offset = hasDifferentScrollAncestors ? {
+        const hasSameContainer = isSameContainer(activeDroppable, newDroppable);
+        const isAfterActive = isAfter(activeDroppable, newDroppable);
+        const offset = hasDifferentScrollAncestors || !hasSameContainer ? {
           x: 0,
           y: 0
         } : {
-          x: collisionRect.width - newRect.width,
-          y: collisionRect.height - newRect.height
+          x: isAfterActive ? collisionRect.width - newRect.width : 0,
+          y: isAfterActive ? collisionRect.height - newRect.height : 0
         };
-        const newCoordinates = {
-          x: newRect.left - offset.x,
-          y: newRect.top - offset.y
+        const rectCoordinates = {
+          x: newRect.left,
+          y: newRect.top
         };
+        const newCoordinates = offset.x && offset.y ? rectCoordinates : utilities.subtract(rectCoordinates, offset);
         return newCoordinates;
@@ -687,2 +706,22 @@ }
 
+function isSameContainer(a, b) {
+  if (!hasSortableData(a) || !hasSortableData(b)) {
+    return false;
+  }
+
+  return a.data.current.sortable.containerId === b.data.current.sortable.containerId;
+}
+
+function isAfter(a, b) {
+  if (!hasSortableData(a) || !hasSortableData(b)) {
+    return false;
+  }
+
+  if (!isSameContainer(a, b)) {
+    return false;
+  }
+
+  return a.data.current.sortable.index < b.data.current.sortable.index;
+}
+
 exports.SortableContext = SortableContext;
@@ -693,2 +732,3 @@ exports.arrayMove = arrayMove;
 exports.defaultNewIndexGetter = defaultNewIndexGetter;
+exports.hasSortableData = hasSortableData;
 exports.horizontalListSortingStrategy = horizontalListSortingStrategy;
@@ -695,0 +735,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,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,t){return e.reduce((e,r,n)=>{const i=t.get(r);return i&&(e[n]=i),e},Array(e.length))}function a(e){return null!==e&&e>=0}const d={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},l={scaleX:1,scaleY:1},u=r.createContext({activeIndex:-1,containerId:"Sortable",disableTransforms:!1,items:[],overIndex:-1,useDragOverlay:!1,sortedRects:[],strategy:c}),f=({id:e,items:t,activeIndex:r,overIndex:n})=>o(t,r,n).indexOf(e),g=({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"},p=i.CSS.Transition.toString({property:"transform",duration:0,easing:"linear"}),v={roleDescription:"sortable"},h=[n.KeyboardCode.Down,n.KeyboardCode.Right,n.KeyboardCode.Up,n.KeyboardCode.Left];exports.SortableContext=function({children:e,id:o,items:a,strategy:d=c}){const{active:l,dragOverlay:f,droppableRects:g,over:x,measureDroppableContainers:p,measuringScheduled:v}=n.useDndContext(),h=i.useUniqueId("Sortable",o),I=Boolean(null!==f.rect),y=t.useMemo(()=>a.map(e=>"string"==typeof e?e:e.id),[a]),b=l?y.indexOf(l.id):-1,m=x?y.indexOf(x.id):-1,w=t.useRef(y),C=!function(e,t){if(e===t)return!0;if(e.length!==t.length)return!1;for(let r=0;r<e.length;r++)if(e[r]!==t[r])return!1;return!0}(y,w.current),R=-1!==m&&-1===b||C;i.useIsomorphicLayoutEffect(()=>{C&&!v&&p(y)},[C,y,p,v]),t.useEffect(()=>{w.current=y},[y]);const S=t.useMemo(()=>({activeIndex:b,containerId:h,disableTransforms:R,items:y,overIndex:m,useDragOverlay:I,sortedRects:s(y,g),strategy:d}),[b,h,R,y,m,g,I,d]);return r.createElement(u.Provider,{value:S},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=g,exports.defaultNewIndexGetter=f,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 a=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,...d}:null}return i>r&&i<=n?{x:-s.width-a,y:0,...d}:i<r&&i>=n?{x:s.width+a,y:0,...d}:{x:0,y:0,...d}},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,collisionRect:r,droppableRects:i,droppableContainers:o,over:s,scrollableAncestors:a}})=>{if(h.includes(e.code)){if(e.preventDefault(),!t||!r)return;const d=[];o.getEnabled().forEach(t=>{if(!t||(null==t?void 0:t.disabled))return;const i=null==t?void 0:t.rect.current;if(i)switch(e.code){case n.KeyboardCode.Down:r.top<i.top&&d.push(t);break;case n.KeyboardCode.Up:r.top>i.top&&d.push(t);break;case n.KeyboardCode.Left:r.left>i.left&&d.push(t);break;case n.KeyboardCode.Right:r.left<i.left&&d.push(t)}});const c=n.closestCorners({active:t,collisionRect:r,droppableRects:i,droppableContainers:d,pointerCoordinates:null});let l=n.getFirstCollision(c,"id");if(l===(null==s?void 0:s.id)&&c.length>1&&(l=c[1].id),null!=l){const e=o.get(l),t=null==e?void 0:e.node.current,i=null==e?void 0:e.rect.current;if(t&&i){const e=n.getScrollableAncestors(t).some((e,t)=>a[t]!==e)?{x:0,y:0}:{x:r.width-i.width,y:r.height-i.height};return{x:i.left-e.x,y:i.top-e.y}}}}},exports.useSortable=function({animateLayoutChanges:e=g,attributes:r,disabled:o,data:s,getNewIndex:d=f,id:c,strategy:l,resizeObserverConfig:h,transition:I=x}){const{items:y,containerId:b,activeIndex:m,disableTransforms:w,sortedRects:C,overIndex:R,useDragOverlay:S,strategy:D}=t.useContext(u),O=y.indexOf(c),N=t.useMemo(()=>({sortable:{containerId:b,index:O,items:y},...s}),[b,s,O,y]),E=t.useMemo(()=>y.slice(y.indexOf(c)),[y,c]),{rect:K,node:L,isOver:A,setNodeRef:M}=n.useDroppable({id:c,data:N,resizeObserverConfig:{updateMeasurementsFor:E,...h}}),{active:T,activatorEvent:k,activeNodeRect:q,attributes:X,setNodeRef:Y,listeners:z,isDragging:F,over:U,setActivatorNodeRef:j,transform:B}=n.useDraggable({id:c,data:N,attributes:{...v,...r},disabled:o}),P=i.useCombinedRefs(M,Y),_=Boolean(T),G=_&&!w&&a(m)&&a(R),H=!S&&F,J=H&&G?B:null,Q=G?null!=J?J:(null!=l?l:D)({rects:C,activeNodeRect:q,activeIndex:m,overIndex:R,index:O}):null,V=a(m)&&a(R)?d({id:c,items:y,activeIndex:m,overIndex:R}):O,W=null==T?void 0:T.id,Z=t.useRef({activeId:W,items:y,newIndex:V,containerId:b}),$=y!==Z.current.items,ee=e({active:T,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:L,rect:K});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:T,activeIndex:m,attributes:X,rect:K,index:O,newIndex:V,items:y,isOver:A,isSorting:_,isDragging:F,listeners:z,node:L,overIndex:R,over:U,setNodeRef:P,setActivatorNodeRef:j,setDroppableNodeRef:M,setDraggableNodeRef:Y,transform:null!=te?te:Q,transition:te||$&&Z.current.newIndex===O?p:H&&!i.isKeyboardEvent(k)||!I?void 0:_||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,...l}: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,...l}:r<e&&r>=i?{x:0,y:s.height+a,...l}:{x:0,y:0,...l}};
+"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,t){return e.reduce((e,r,n)=>{const i=t.get(r);return i&&(e[n]=i),e},Array(e.length))}function a(e){return null!==e&&e>=0}const d={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},l={scaleX:1,scaleY:1},u=r.createContext({activeIndex:-1,containerId:"Sortable",disableTransforms:!1,items:[],overIndex:-1,useDragOverlay:!1,sortedRects:[],strategy:c}),f=({id:e,items:t,activeIndex:r,overIndex:n})=>o(t,r,n).indexOf(e),x=({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)),g={duration:200,easing:"ease"},p=i.CSS.Transition.toString({property:"transform",duration:0,easing:"linear"}),v={roleDescription:"sortable"};function h(e){if(!e)return!1;const t=e.data.current;return!!(t&&"sortable"in t&&"object"==typeof t.sortable&&"containerId"in t.sortable&&"items"in t.sortable&&"index"in t.sortable)}const b=[n.KeyboardCode.Down,n.KeyboardCode.Right,n.KeyboardCode.Up,n.KeyboardCode.Left];function I(e,t){return!(!h(e)||!h(t))&&e.data.current.sortable.containerId===t.data.current.sortable.containerId}exports.SortableContext=function({children:e,id:o,items:a,strategy:d=c}){const{active:l,dragOverlay:f,droppableRects:x,over:g,measureDroppableContainers:p,measuringScheduled:v}=n.useDndContext(),h=i.useUniqueId("Sortable",o),b=Boolean(null!==f.rect),I=t.useMemo(()=>a.map(e=>"string"==typeof e?e:e.id),[a]),y=l?I.indexOf(l.id):-1,m=g?I.indexOf(g.id):-1,w=t.useRef(I),C=!function(e,t){if(e===t)return!0;if(e.length!==t.length)return!1;for(let r=0;r<e.length;r++)if(e[r]!==t[r])return!1;return!0}(I,w.current),R=-1!==m&&-1===y||C;i.useIsomorphicLayoutEffect(()=>{C&&!v&&p(I)},[C,I,p,v]),t.useEffect(()=>{w.current=I},[I]);const S=t.useMemo(()=>({activeIndex:y,containerId:h,disableTransforms:R,items:I,overIndex:m,useDragOverlay:b,sortedRects:s(I,x),strategy:d}),[y,h,R,I,m,x,b,d]);return r.createElement(u.Provider,{value:S},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=x,exports.defaultNewIndexGetter=f,exports.hasSortableData=h,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 a=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,...d}:null}return i>r&&i<=n?{x:-s.width-a,y:0,...d}:i<r&&i>=n?{x:s.width+a,y:0,...d}:{x:0,y:0,...d}},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,collisionRect:r,droppableRects:o,droppableContainers:s,over:a,scrollableAncestors:d}})=>{if(b.includes(e.code)){if(e.preventDefault(),!t||!r)return;const u=[];s.getEnabled().forEach(t=>{if(!t||(null==t?void 0:t.disabled))return;const i=o.get(t.id);if(i)switch(e.code){case n.KeyboardCode.Down:r.top<i.top&&u.push(t);break;case n.KeyboardCode.Up:r.top>i.top&&u.push(t);break;case n.KeyboardCode.Left:r.left>i.left&&u.push(t);break;case n.KeyboardCode.Right:r.left<i.left&&u.push(t)}});const f=n.closestCorners({active:t,collisionRect:r,droppableRects:o,droppableContainers:u,pointerCoordinates:null});let x=n.getFirstCollision(f,"id");if(x===(null==a?void 0:a.id)&&f.length>1&&(x=f[1].id),null!=x){const e=s.get(t.id),a=s.get(x),u=a?o.get(a.id):null,f=null==a?void 0:a.node.current;if(f&&u&&e&&a){const t=n.getScrollableAncestors(f).some((e,t)=>d[t]!==e),o=I(e,a),s=(l=a,!(!h(c=e)||!h(l))&&!!I(c,l)&&c.data.current.sortable.index<l.data.current.sortable.index),x=t||!o?{x:0,y:0}:{x:s?r.width-u.width:0,y:s?r.height-u.height:0},g={x:u.left,y:u.top};return x.x&&x.y?g:i.subtract(g,x)}}}var c,l},exports.useSortable=function({animateLayoutChanges:e=x,attributes:r,disabled:o,data:s,getNewIndex:d=f,id:c,strategy:l,resizeObserverConfig:h,transition:b=g}){const{items:I,containerId:y,activeIndex:m,disableTransforms:w,sortedRects:C,overIndex:R,useDragOverlay:S,strategy:D}=t.useContext(u),O=I.indexOf(c),N=t.useMemo(()=>({sortable:{containerId:y,index:O,items:I},...s}),[y,s,O,I]),E=t.useMemo(()=>I.slice(I.indexOf(c)),[I,c]),{rect:K,node:L,isOver:A,setNodeRef:M}=n.useDroppable({id:c,data:N,resizeObserverConfig:{updateMeasurementsFor:E,...h}}),{active:T,activatorEvent:k,activeNodeRect:q,attributes:X,setNodeRef:Y,listeners:j,isDragging:z,over:F,setActivatorNodeRef:U,transform:B}=n.useDraggable({id:c,data:N,attributes:{...v,...r},disabled:o}),P=i.useCombinedRefs(M,Y),_=Boolean(T),G=_&&!w&&a(m)&&a(R),H=!S&&z,J=H&&G?B:null,Q=G?null!=J?J:(null!=l?l:D)({rects:C,activeNodeRect:q,activeIndex:m,overIndex:R,index:O}):null,V=a(m)&&a(R)?d({id:c,items:I,activeIndex:m,overIndex:R}):O,W=null==T?void 0:T.id,Z=t.useRef({activeId:W,items:I,newIndex:V,containerId:y}),$=I!==Z.current.items,ee=e({active:T,containerId:y,isDragging:z,isSorting:_,id:c,index:O,items:I,newIndex:Z.current.newIndex,previousItems:Z.current.items,previousContainerId:Z.current.containerId,transition:b,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:L,rect:K});return t.useEffect(()=>{_&&Z.current.newIndex!==V&&(Z.current.newIndex=V),y!==Z.current.containerId&&(Z.current.containerId=y),I!==Z.current.items&&(Z.current.items=I),W!==Z.current.activeId&&(Z.current.activeId=W)},[W,_,V,y,I]),{active:T,activeIndex:m,attributes:X,data:N,rect:K,index:O,newIndex:V,items:I,isOver:A,isSorting:_,isDragging:z,listeners:j,node:L,overIndex:R,over:F,setNodeRef:P,setActivatorNodeRef:U,setDroppableNodeRef:M,setDraggableNodeRef:Y,transform:null!=te?te:Q,transition:te||$&&Z.current.newIndex===O?p:H&&!i.isKeyboardEvent(k)||!b?void 0:_||ee?i.CSS.Transition.toString({...b,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,...l}: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,...l}:r<e&&r>=i?{x:0,y:s.height+a,...l}:{x:0,y:0,...l}};
 //# sourceMappingURL=sortable.cjs.production.min.js.map

dist/sortable.esm.js

 import React, { useMemo, useRef, useEffect, useState, useContext } from 'react';
 import { useDndContext, getClientRect, useDroppable, useDraggable, closestCorners, getFirstCollision, getScrollableAncestors, KeyboardCode } from '@dnd-kit/core';
-import { useUniqueId, useIsomorphicLayoutEffect, CSS, useCombinedRefs, isKeyboardEvent } from '@dnd-kit/utilities';
+import { useUniqueId, useIsomorphicLayoutEffect, CSS, useCombinedRefs, isKeyboardEvent, subtract } from '@dnd-kit/utilities';
 
@@ -536,2 +536,3 @@ /**
     attributes,
+    data,
     rect,
@@ -577,2 +578,16 @@ index,
 
+function hasSortableData(entry) {
+  if (!entry) {
+    return false;
+  }
+
+  const data = entry.data.current;
+
+  if (data && 'sortable' in data && typeof data.sortable === 'object' && 'containerId' in data.sortable && 'items' in data.sortable && 'index' in data.sortable) {
+    return true;
+  }
+
+  return false;
+}
+
 const directions = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
@@ -602,3 +617,3 @@ const sortableKeyboardCoordinates = (event, {
 
-      const rect = entry == null ? void 0 : entry.rect.current;
+      const rect = droppableRects.get(entry.id);
 
@@ -653,20 +668,24 @@ if (!rect) {
     if (closestId != null) {
+      const activeDroppable = droppableContainers.get(active.id);
       const newDroppable = droppableContainers.get(closestId);
+      const newRect = newDroppable ? droppableRects.get(newDroppable.id) : null;
       const newNode = newDroppable == null ? void 0 : newDroppable.node.current;
-      const newRect = newDroppable == null ? void 0 : newDroppable.rect.current;
 
-      if (newNode && newRect) {
+      if (newNode && newRect && activeDroppable && newDroppable) {
         const newScrollAncestors = getScrollableAncestors(newNode);
         const hasDifferentScrollAncestors = newScrollAncestors.some((element, index) => scrollableAncestors[index] !== element);
-        const offset = hasDifferentScrollAncestors ? {
+        const hasSameContainer = isSameContainer(activeDroppable, newDroppable);
+        const isAfterActive = isAfter(activeDroppable, newDroppable);
+        const offset = hasDifferentScrollAncestors || !hasSameContainer ? {
           x: 0,
           y: 0
         } : {
-          x: collisionRect.width - newRect.width,
-          y: collisionRect.height - newRect.height
+          x: isAfterActive ? collisionRect.width - newRect.width : 0,
+          y: isAfterActive ? collisionRect.height - newRect.height : 0
         };
-        const newCoordinates = {
-          x: newRect.left - offset.x,
-          y: newRect.top - offset.y
+        const rectCoordinates = {
+          x: newRect.left,
+          y: newRect.top
         };
+        const newCoordinates = offset.x && offset.y ? rectCoordinates : subtract(rectCoordinates, offset);
         return newCoordinates;
@@ -680,3 +699,23 @@ }
 
-export { SortableContext, arrayMove, arraySwap, defaultAnimateLayoutChanges, defaultNewIndexGetter, horizontalListSortingStrategy, rectSortingStrategy, rectSwappingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy };
+function isSameContainer(a, b) {
+  if (!hasSortableData(a) || !hasSortableData(b)) {
+    return false;
+  }
+
+  return a.data.current.sortable.containerId === b.data.current.sortable.containerId;
+}
+
+function isAfter(a, b) {
+  if (!hasSortableData(a) || !hasSortableData(b)) {
+    return false;
+  }
+
+  if (!isSameContainer(a, b)) {
+    return false;
+  }
+
+  return a.data.current.sortable.index < b.data.current.sortable.index;
+}
+
+export { SortableContext, arrayMove, arraySwap, defaultAnimateLayoutChanges, defaultNewIndexGetter, hasSortableData, horizontalListSortingStrategy, rectSortingStrategy, rectSwappingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy };
 //# sourceMappingURL=sortable.esm.js.map

dist/types/index.d.ts

@@ -1,9 +0,3 @@
-import type { ClientRect } from '@dnd-kit/core';
-import type { Transform } from '@dnd-kit/utilities';
-export declare type SortingStrategy = (args: {
-    activeNodeRect: ClientRect | null;
-    activeIndex: number;
-    index: number;
-    rects: ClientRect[];
-    overIndex: number;
-}) => Transform | null;
+export type { SortableData } from './data';
+export type { SortingStrategy } from './strategies';
+export { hasSortableData } from './type-guard';

package.json

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

218172

increased by6.74%

Number of package files

37

increased by8.82%

Lines of code

1480

increased by6.02%

Dependency changes

• Updated@dnd-kit/utilities@^3.2.0-next-2022419212032