@dnd-kit/sortable - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

CHANGELOG.md

 # @dnd-kit/sortable
 
+## 3.0.1
+
+### Patch Changes
+
+- [`a178857`](https://github.com/clauderic/dnd-kit/commit/a1788579ee12d1c1af8244bdf6a17f3f5ba388a1) [#214](https://github.com/clauderic/dnd-kit/pull/214) Thanks [@clauderic](https://github.com/clauderic)! - Ensure that consumer defined data passed to `useSortable` is passed down to both `useDraggable` and `useDroppable`.
+
+  The `data` object that is passed to `useDraggable` and `useDroppable` within `useSortable` also contains the `sortable` property, which holds a reference to the index of the item, along with the `containerId` and the `items` of its parent `SortableContext`.
+
 ## 3.0.0
@@ -4,0 +12,0 @@

dist/hooks/useSortable.d.ts

@@ -10,3 +10,3 @@ /// <reference types="react" />
 }
-export declare function useSortable({ animateLayoutChanges, attributes: userDefinedAttributes, disabled, id, strategy: localStrategy, transition, }: Arguments): {
+export declare function useSortable({ animateLayoutChanges, attributes: userDefinedAttributes, disabled, data: customData, id, strategy: localStrategy, transition, }: Arguments): {
     active: import("@dnd-kit/core").Active | null;
@@ -13,0 +13,0 @@ attributes: {

dist/sortable.cjs.development.js

@@ -393,2 +393,3 @@ 'use strict';
   disabled,
+  data: customData,
   id,
@@ -409,3 +410,20 @@ strategy: localStrategy,
   } = React.useContext(Context);
+  const index = items.indexOf(id);
+  const data = React.useMemo(() => ({
+    sortable: {
+      containerId,
+      index,
+      items
+    },
+    ...customData
+  }), [containerId, customData, index, items]);
   const {
+    rect,
+    node,
+    setNodeRef: setDroppableNodeRef
+  } = core.useDroppable({
+    id,
+    data
+  });
+  const {
     active,
@@ -422,2 +440,3 @@ activeNodeRect,
     id,
+    data,
     attributes: { ...defaultAttributes,
@@ -428,16 +447,2 @@ ...userDefinedAttributes
   });
-  const index = items.indexOf(id);
-  const data = React.useMemo(() => ({
-    containerId,
-    index,
-    items
-  }), [containerId, index, items]);
-  const {
-    rect,
-    node,
-    setNodeRef: setDroppableNodeRef
-  } = core.useDroppable({
-    id,
-    data
-  });
   const setNodeRef = utilities.useCombinedRefs(setDroppableNodeRef, setDraggableNodeRef);
@@ -444,0 +449,0 @@ const isSorting = Boolean(active);

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"},x=[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:x}=r.useDndContext(),p=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&&!x&&h()},[I,w,h,x]),t.useEffect(()=>{L.current=v},[v]),t.useEffect(()=>{requestAnimationFrame(()=>{R.current=w})},[w]);const D=t.useMemo(()=>({activeIndex:b,containerId:p,disableTransforms:C,items:v,overIndex:m,useDragOverlay:y,sortedRects:S,strategy:a,wasSorting:R}),[b,p,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:{droppableContainers:t,translatedRect:o,scrollableAncestors:n}})=>{if(x.includes(e.code)){if(e.preventDefault(),!o)return;const i=[];Object.entries(t).forEach(([t,n])=>{if(null==n?void 0:n.disabled)return;const s=null==n?void 0:n.node.current;if(!s)return;const a=r.getViewRect(s);switch(e.code){case r.KeyboardCode.Down:o.top+o.height<=a.top&&i.push([t,a]);break;case r.KeyboardCode.Up:o.top>=a.top+a.height&&i.push([t,a]);break;case r.KeyboardCode.Left:o.left>=a.left+a.width&&i.push([t,a]);break;case r.KeyboardCode.Right:o.left+o.width<=a.left&&i.push([t,a])}});const a=r.closestCorners(i,o);if(a){var s;const e=null==(s=t[a])?void 0:s.node.current;if(e){const t=r.getScrollableAncestors(e).some((e,t)=>n[t]!==e),s=r.getViewRect(e),i=t?{x:0,y:0}:{x:o.width-s.width,y:o.height-s.height};return{x:s.left-i.x,y:s.top-i.y}}}}},exports.useSortable=function({animateLayoutChanges:e=u,attributes:o,disabled:a,id:f,strategy:c,transition:x=l}){const{items:p,containerId:y,activeIndex:v,disableTransforms:b,sortedRects:w,overIndex:R,useDragOverlay:m,strategy:L,wasSorting:S}=t.useContext(d),{active:I,activeNodeRect:T,activatorEvent:C,attributes:D,setNodeRef:E,listeners:N,isDragging:K,over:O,transform:q}=r.useDraggable({id:f,attributes:{...h,...o},disabled:a}),A=p.indexOf(f),j=t.useMemo(()=>({containerId:y,index:A,items:p}),[y,A,p]),{rect:k,node:M,setNodeRef:X}=r.useDroppable({id:f,data:j}),Y=n.useCombinedRefs(X,E),B=Boolean(I),U=B&&S.current&&!b&&i(v)&&i(R),F=!m&&K,P=F&&U?q:null,V=U?null!=P?P:(null!=c?c:L)({layoutRects:w,activeNodeRect:T,activeIndex:v,overIndex:R,index:A}):null,_=i(v)&&i(R)?s(p,v,R).indexOf(f):A,z=t.useRef(_),G=e({active:I,isDragging:K,isSorting:B,id:f,index:A,items:p,newIndex:z.current,transition:x,wasSorting:S.current}),H=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:!G,index:A,node:M,rect:k});return t.useEffect(()=>{B&&(z.current=_)},[B,_]),{active:I,attributes:D,activatorEvent:C,rect:k,index:A,isSorting:B,isDragging:K,listeners:N,node:M,overIndex:R,over:O,setNodeRef:Y,setDroppableNodeRef:X,setDraggableNodeRef:E,transform:null!=H?H:V,transition:H?g:F||!x?null:B||G?n.CSS.Transition.toString({...x,property:"transform"}):null}},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"},x=[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:x}=r.useDndContext(),p=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&&!x&&h()},[I,w,h,x]),t.useEffect(()=>{L.current=v},[v]),t.useEffect(()=>{requestAnimationFrame(()=>{R.current=w})},[w]);const D=t.useMemo(()=>({activeIndex:b,containerId:p,disableTransforms:C,items:v,overIndex:m,useDragOverlay:y,sortedRects:S,strategy:a,wasSorting:R}),[b,p,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:{droppableContainers:t,translatedRect:o,scrollableAncestors:n}})=>{if(x.includes(e.code)){if(e.preventDefault(),!o)return;const i=[];Object.entries(t).forEach(([t,n])=>{if(null==n?void 0:n.disabled)return;const s=null==n?void 0:n.node.current;if(!s)return;const a=r.getViewRect(s);switch(e.code){case r.KeyboardCode.Down:o.top+o.height<=a.top&&i.push([t,a]);break;case r.KeyboardCode.Up:o.top>=a.top+a.height&&i.push([t,a]);break;case r.KeyboardCode.Left:o.left>=a.left+a.width&&i.push([t,a]);break;case r.KeyboardCode.Right:o.left+o.width<=a.left&&i.push([t,a])}});const a=r.closestCorners(i,o);if(a){var s;const e=null==(s=t[a])?void 0:s.node.current;if(e){const t=r.getScrollableAncestors(e).some((e,t)=>n[t]!==e),s=r.getViewRect(e),i=t?{x:0,y:0}:{x:o.width-s.width,y:o.height-s.height};return{x:s.left-i.x,y:s.top-i.y}}}}},exports.useSortable=function({animateLayoutChanges:e=u,attributes:o,disabled:a,data:f,id:c,strategy:x,transition:p=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!=x?x: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:p,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||!p?null:U||H?n.CSS.Transition.toString({...p,property:"transform"}):null}},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

 import React, { useMemo, useRef, useEffect, useState, useContext } from 'react';
-import { useDndContext, getBoundingClientRect, useDraggable, useDroppable, getViewRect, closestCorners, getScrollableAncestors, KeyboardCode } from '@dnd-kit/core';
+import { useDndContext, getBoundingClientRect, useDroppable, useDraggable, getViewRect, closestCorners, getScrollableAncestors, KeyboardCode } from '@dnd-kit/core';
 import { useUniqueId, useIsomorphicLayoutEffect, CSS, useCombinedRefs } from '@dnd-kit/utilities';
@@ -386,2 +386,3 @@
   disabled,
+  data: customData,
   id,
@@ -402,3 +403,20 @@ strategy: localStrategy,
   } = useContext(Context);
+  const index = items.indexOf(id);
+  const data = useMemo(() => ({
+    sortable: {
+      containerId,
+      index,
+      items
+    },
+    ...customData
+  }), [containerId, customData, index, items]);
   const {
+    rect,
+    node,
+    setNodeRef: setDroppableNodeRef
+  } = useDroppable({
+    id,
+    data
+  });
+  const {
     active,
@@ -415,2 +433,3 @@ activeNodeRect,
     id,
+    data,
     attributes: { ...defaultAttributes,
@@ -421,16 +440,2 @@ ...userDefinedAttributes
   });
-  const index = items.indexOf(id);
-  const data = useMemo(() => ({
-    containerId,
-    index,
-    items
-  }), [containerId, index, items]);
-  const {
-    rect,
-    node,
-    setNodeRef: setDroppableNodeRef
-  } = useDroppable({
-    id,
-    data
-  });
   const setNodeRef = useCombinedRefs(setDroppableNodeRef, setDraggableNodeRef);
@@ -437,0 +442,0 @@ const isSorting = Boolean(active);

package.json

 {
   "name": "@dnd-kit/sortable",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Official sortable preset and sensors for dnd kit",
@@ -5,0 +5,0 @@ "author": "Claudéric Demers",

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

161593

increased by0.86%

Lines of code

1240

increased by0.81%

No dependency changes