@dnd-kit/sortable - npm Package Compare versions

Comparing version 6.0.0 to 6.0.1-next-20222110525

CHANGELOG.md

 # @dnd-kit/sortable
 
+## 6.0.1-next-20222110525
+
+### Patch Changes
+
+- [#642](https://github.com/clauderic/dnd-kit/pull/642) [`15a6017`](https://github.com/clauderic/dnd-kit/commit/15a6017c4c2dd66911751877cc448456d0e5c96f) Thanks [@vosatom](https://github.com/vosatom)! - Fixed an issue that affected `SortableContext` performance. The `sortedRects` property of the `SortableContext` provider were being recomputed whenever coordinates changed rather than only when the order of the items changed.
+
+- Updated dependencies [[`b3b185d`](https://github.com/clauderic/dnd-kit/commit/b3b185dc675b61fe2e3d1a8462728c81c3150b99)]:
+  - @dnd-kit/core@5.0.2-next-20222110525
+
 ## 6.0.0
@@ -4,0 +13,0 @@

dist/hooks/useSortable.d.ts

@@ -14,9 +14,3 @@ /// <reference types="react" />
     activeIndex: number;
-    attributes: {
-        role: string;
-        tabIndex: number;
-        'aria-pressed': boolean | undefined;
-        'aria-roledescription': string;
-        'aria-describedby': string;
-    };
+    attributes: import("@dnd-kit/core").DraggableAttributes;
     rect: import("react").MutableRefObject<import("@dnd-kit/core").ClientRect | null>;
@@ -23,0 +17,0 @@ index: number;

dist/sortable.cjs.development.js

@@ -282,3 +282,2 @@ 'use strict';
   const previousItemsRef = React.useRef(items);
-  const sortedRects = getSortedRects(items, droppableRects);
   const itemsHaveChanged = !isEqual(items, previousItemsRef.current);
@@ -301,5 +300,5 @@ const disableTransforms = overIndex !== -1 && activeIndex === -1 || itemsHaveChanged;
     useDragOverlay,
-    sortedRects,
+    sortedRects: getSortedRects(items, droppableRects),
     strategy
-  }), [activeIndex, containerId, disableTransforms, items, overIndex, sortedRects, useDragOverlay, strategy]);
+  }), [activeIndex, containerId, disableTransforms, items, overIndex, droppableRects, useDragOverlay, strategy]);
   return React__default.createElement(Context.Provider, {
@@ -306,0 +305,0 @@ value: contextValue

dist/sortable.cjs.production.min.js

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

dist/sortable.esm.js

@@ -275,3 +275,2 @@ import React, { useMemo, useRef, useEffect, useState, useContext } from 'react';
   const previousItemsRef = useRef(items);
-  const sortedRects = getSortedRects(items, droppableRects);
   const itemsHaveChanged = !isEqual(items, previousItemsRef.current);
@@ -294,5 +293,5 @@ const disableTransforms = overIndex !== -1 && activeIndex === -1 || itemsHaveChanged;
     useDragOverlay,
-    sortedRects,
+    sortedRects: getSortedRects(items, droppableRects),
     strategy
-  }), [activeIndex, containerId, disableTransforms, items, overIndex, sortedRects, useDragOverlay, strategy]);
+  }), [activeIndex, containerId, disableTransforms, items, overIndex, droppableRects, useDragOverlay, strategy]);
   return React.createElement(Context.Provider, {
@@ -299,0 +298,0 @@ value: contextValue

package.json

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

195570

increased by0.21%

Worsened metrics

Lines of code

1366

decreased by-0.58%

Number of low quality alerts

3

increased by50%

No dependency changes