@dnd-kit/sortable - npm Package Compare versions

Comparing version 5.0.0-next-2021621163226 to 5.0.0-next-2021621215041

CHANGELOG.md

 # @dnd-kit/sortable
 
-## 5.0.0-next-2021621163226
+## 5.0.0-next-2021621215041
 
 ### Patch Changes
 
+- [#372](https://github.com/clauderic/dnd-kit/pull/372) [`dbc9601`](https://github.com/clauderic/dnd-kit/commit/dbc9601c922e1d6944a63f66ee647f203abee595) Thanks [@clauderic](https://github.com/clauderic)! - Refactored `DroppableContainers` type from `Record<UniqueIdentifier, DroppableContainer` to a custom instance that extends the [`Map` constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and adds a few other methods such as `toArray()`, `getEnabled()` and `getNodeFor(id)`.
+
+  A unique `key` property was also added to the `DraggableNode` and `DroppableContainer` interfaces. This prevents potential race conditions in the mount and cleanup effects of `useDraggable` and `useDroppable`. It's possible for the clean-up effect to run after another React component using `useDraggable` or `useDroppable` mounts, which causes the newly mounted element to accidentally be un-registered.
+
 - [#350](https://github.com/clauderic/dnd-kit/pull/350) [`a13dbb6`](https://github.com/clauderic/dnd-kit/commit/a13dbb66586edbf2998c7b251e236604255fd227) Thanks [@wmain](https://github.com/wmain)! - Breaking change: The `CollisionDetection` interface has been refactored. It now receives an object that contains the `active` draggable node, along with the `collisionRect` and an array of `droppableContainers`.
@@ -15,5 +19,5 @@
 
-- Updated dependencies [[`13be602`](https://github.com/clauderic/dnd-kit/commit/13be602229c6d5723b3ae98bca7b8f45f0773366), [`05d6a78`](https://github.com/clauderic/dnd-kit/commit/05d6a78a17cbaacd8dffed685dfea5a6ea3d38a8), [`7006464`](https://github.com/clauderic/dnd-kit/commit/700646468683e4820269534c6352cca93bb5a987), [`13be602`](https://github.com/clauderic/dnd-kit/commit/13be602229c6d5723b3ae98bca7b8f45f0773366), [`a13dbb6`](https://github.com/clauderic/dnd-kit/commit/a13dbb66586edbf2998c7b251e236604255fd227)]:
-  - @dnd-kit/core@4.0.0-next-2021621163226
-  - @dnd-kit/utilities@2.1.0-next-2021621163226
+- Updated dependencies [[`13be602`](https://github.com/clauderic/dnd-kit/commit/13be602229c6d5723b3ae98bca7b8f45f0773366), [`05d6a78`](https://github.com/clauderic/dnd-kit/commit/05d6a78a17cbaacd8dffed685dfea5a6ea3d38a8), [`dbc9601`](https://github.com/clauderic/dnd-kit/commit/dbc9601c922e1d6944a63f66ee647f203abee595), [`7006464`](https://github.com/clauderic/dnd-kit/commit/700646468683e4820269534c6352cca93bb5a987), [`13be602`](https://github.com/clauderic/dnd-kit/commit/13be602229c6d5723b3ae98bca7b8f45f0773366), [`a13dbb6`](https://github.com/clauderic/dnd-kit/commit/a13dbb66586edbf2998c7b251e236604255fd227)]:
+  - @dnd-kit/core@4.0.0-next-2021621215041
+  - @dnd-kit/utilities@2.1.0-next-2021621215041
 
@@ -20,0 +24,0 @@ ## 4.0.0

dist/sortable.cjs.development.js

@@ -537,3 +537,3 @@ 'use strict';
     const filteredContainers = [];
-    Object.values(droppableContainers).forEach(entry => {
+    droppableContainers.getEnabled().forEach(entry => {
       if (!entry || (entry == null ? void 0 : entry.disabled)) {
@@ -595,3 +595,3 @@ return;
 
-      const newNode = (_droppableContainers$ = droppableContainers[closestId]) == null ? void 0 : _droppableContainers$.node.current;
+      const newNode = (_droppableContainers$ = droppableContainers.get(closestId)) == null ? void 0 : _droppableContainers$.node.current;
 
@@ -598,0 +598,0 @@ if (newNode) {

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,overlayNode: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=[];Object.values(o).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[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:N}=r.useDroppable({id:c,data:C}),{active:K,activeNodeRect:O,activatorEvent:q,attributes:A,setNodeRef:j,listeners:k,isDragging:M,over:X,transform:Y}=r.useDraggable({id:c,data:C,attributes:{...h,...o},disabled:a}),B=n.useCombinedRefs(N,j),U=Boolean(K),F=U&&I.current&&!w&&i(b)&&i(m),P=!L&&M,V=P&&F?Y: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:K,isDragging:M,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:K,attributes:A,activatorEvent:q,rect:D,index:T,isSorting:U,isDragging:M,listeners:k,node:E,overIndex:m,over:X,setNodeRef:B,setDroppableNodeRef:N,setDraggableNodeRef:j,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"),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,overlayNode: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:N}=r.useDroppable({id:c,data:C}),{active:K,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(N,k),U=Boolean(K),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:K,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:K,attributes:A,activatorEvent:q,rect:D,index:T,isSorting:U,isDragging:X,listeners:M,node:E,overIndex:m,over:Y,setNodeRef:B,setDroppableNodeRef:N,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}};
 //# sourceMappingURL=sortable.cjs.production.min.js.map

dist/sortable.esm.js

@@ -530,3 +530,3 @@ import React, { useMemo, useRef, useEffect, useState, useContext } from 'react';
     const filteredContainers = [];
-    Object.values(droppableContainers).forEach(entry => {
+    droppableContainers.getEnabled().forEach(entry => {
       if (!entry || (entry == null ? void 0 : entry.disabled)) {
@@ -588,3 +588,3 @@ return;
 
-      const newNode = (_droppableContainers$ = droppableContainers[closestId]) == null ? void 0 : _droppableContainers$.node.current;
+      const newNode = (_droppableContainers$ = droppableContainers.get(closestId)) == null ? void 0 : _droppableContainers$.node.current;
 
@@ -591,0 +591,0 @@ if (newNode) {

package.json

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

167402

increased by0.63%

Dependency changes

• Updated@dnd-kit/utilities@^2.1.0-next-2021621215041