@dnd-kit/sortable - npm Package Compare versions

Comparing version 7.0.0 to 7.0.1-next-20225918369

CHANGELOG.md

 # @dnd-kit/sortable
 
+## 7.0.1-next-20225918369
+
+### Patch Changes
+
+- [#792](https://github.com/clauderic/dnd-kit/pull/792) [`b6970e7`](https://github.com/clauderic/dnd-kit/commit/b6970e78da868ea5c9f49368e88401d5b4cae765) Thanks [@clauderic](https://github.com/clauderic)! - The `hasSortableData` type-guard that is exported by @dnd-kit/sortable has been updated to also accept the `Active` and `Over` interfaces so it can be used in events such as `onDragStart`, `onDragOver`, and `onDragEnd`.
+
 ## 7.0.0
@@ -4,0 +10,0 @@

dist/sortable.cjs.development.js

@@ -81,11 +81,12 @@ 'use strict';
 };
-const horizontalListSortingStrategy = ({
-  rects,
-  activeNodeRect: fallbackActiveRect,
-  activeIndex,
-  overIndex,
-  index
-}) => {
+const horizontalListSortingStrategy = _ref => {
   var _rects$activeIndex;
 
+  let {
+    rects,
+    activeNodeRect: fallbackActiveRect,
+    activeIndex,
+    overIndex,
+    index
+  } = _ref;
   const activeNodeRect = (_rects$activeIndex = rects[activeIndex]) != null ? _rects$activeIndex : fallbackActiveRect;
@@ -152,8 +153,9 @@
 
-const rectSortingStrategy = ({
-  rects,
-  activeIndex,
-  overIndex,
-  index
-}) => {
+const rectSortingStrategy = _ref => {
+  let {
+    rects,
+    activeIndex,
+    overIndex,
+    index
+  } = _ref;
   const newRects = arrayMove(rects, overIndex, activeIndex);
@@ -175,8 +177,9 @@ const oldRect = rects[index];
 
-const rectSwappingStrategy = ({
-  activeIndex,
-  index,
-  rects,
-  overIndex
-}) => {
+const rectSwappingStrategy = _ref => {
+  let {
+    activeIndex,
+    index,
+    rects,
+    overIndex
+  } = _ref;
   let oldRect;
@@ -212,11 +215,12 @@ let newRect;
 };
-const verticalListSortingStrategy = ({
-  activeIndex,
-  activeNodeRect: fallbackActiveRect,
-  index,
-  rects,
-  overIndex
-}) => {
+const verticalListSortingStrategy = _ref => {
   var _rects$activeIndex;
 
+  let {
+    activeIndex,
+    activeNodeRect: fallbackActiveRect,
+    index,
+    rects,
+    overIndex
+  } = _ref;
   const activeNodeRect = (_rects$activeIndex = rects[activeIndex]) != null ? _rects$activeIndex : fallbackActiveRect;
@@ -298,9 +302,10 @@
 });
-function SortableContext({
-  children,
-  id,
-  items: userDefinedItems,
-  strategy = rectSortingStrategy,
-  disabled: disabledProp = false
-}) {
+function SortableContext(_ref) {
+  let {
+    children,
+    id,
+    items: userDefinedItems,
+    strategy = rectSortingStrategy,
+    disabled: disabledProp = false
+  } = _ref;
   const {
@@ -349,19 +354,24 @@ active,
 
-const defaultNewIndexGetter = ({
-  id,
-  items,
-  activeIndex,
-  overIndex
-}) => arrayMove(items, activeIndex, overIndex).indexOf(id);
-const defaultAnimateLayoutChanges = ({
-  containerId,
-  isSorting,
-  wasDragging,
-  index,
-  items,
-  newIndex,
-  previousItems,
-  previousContainerId,
-  transition
-}) => {
+const defaultNewIndexGetter = _ref => {
+  let {
+    id,
+    items,
+    activeIndex,
+    overIndex
+  } = _ref;
+  return arrayMove(items, activeIndex, overIndex).indexOf(id);
+};
+const defaultAnimateLayoutChanges = _ref2 => {
+  let {
+    containerId,
+    isSorting,
+    wasDragging,
+    index,
+    items,
+    newIndex,
+    previousItems,
+    previousContainerId,
+    transition
+  } = _ref2;
+
   if (!transition || !wasDragging) {
@@ -400,8 +410,9 @@ return false;
 
-function useDerivedTransform({
-  disabled,
-  index,
-  node,
-  rect
-}) {
+function useDerivedTransform(_ref) {
+  let {
+    disabled,
+    index,
+    node,
+    rect
+  } = _ref;
   const [derivedTransform, setDerivedtransform] = React.useState(null);
@@ -444,13 +455,14 @@ const previousIndex = React.useRef(index);
 
-function useSortable({
-  animateLayoutChanges = defaultAnimateLayoutChanges,
-  attributes: userDefinedAttributes,
-  disabled: localDisabled,
-  data: customData,
-  getNewIndex = defaultNewIndexGetter,
-  id,
-  strategy: localStrategy,
-  resizeObserverConfig,
-  transition = defaultTransition
-}) {
+function useSortable(_ref) {
+  let {
+    animateLayoutChanges = defaultAnimateLayoutChanges,
+    attributes: userDefinedAttributes,
+    disabled: localDisabled,
+    data: customData,
+    getNewIndex = defaultNewIndexGetter,
+    id,
+    strategy: localStrategy,
+    resizeObserverConfig,
+    transition = defaultTransition
+  } = _ref;
   const {
@@ -663,12 +675,14 @@ items,
 const directions = [core.KeyboardCode.Down, core.KeyboardCode.Right, core.KeyboardCode.Up, core.KeyboardCode.Left];
-const sortableKeyboardCoordinates = (event, {
-  context: {
-    active,
-    collisionRect,
-    droppableRects,
-    droppableContainers,
-    over,
-    scrollableAncestors
-  }
-}) => {
+const sortableKeyboardCoordinates = (event, _ref) => {
+  let {
+    context: {
+      active,
+      collisionRect,
+      droppableRects,
+      droppableContainers,
+      over,
+      scrollableAncestors
+    }
+  } = _ref;
+
   if (directions.includes(event.code)) {
@@ -683,3 +697,3 @@ event.preventDefault();
     droppableContainers.getEnabled().forEach(entry => {
-      if (!entry || (entry == null ? void 0 : entry.disabled)) {
+      if (!entry || entry != null && entry.disabled) {
         return;
@@ -686,0 +700,0 @@ }

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

dist/sortable.esm.js

@@ -74,11 +74,12 @@ import React, { useMemo, useRef, useEffect, useState, useContext } from 'react';
 };
-const horizontalListSortingStrategy = ({
-  rects,
-  activeNodeRect: fallbackActiveRect,
-  activeIndex,
-  overIndex,
-  index
-}) => {
+const horizontalListSortingStrategy = _ref => {
   var _rects$activeIndex;
 
+  let {
+    rects,
+    activeNodeRect: fallbackActiveRect,
+    activeIndex,
+    overIndex,
+    index
+  } = _ref;
   const activeNodeRect = (_rects$activeIndex = rects[activeIndex]) != null ? _rects$activeIndex : fallbackActiveRect;
@@ -145,8 +146,9 @@
 
-const rectSortingStrategy = ({
-  rects,
-  activeIndex,
-  overIndex,
-  index
-}) => {
+const rectSortingStrategy = _ref => {
+  let {
+    rects,
+    activeIndex,
+    overIndex,
+    index
+  } = _ref;
   const newRects = arrayMove(rects, overIndex, activeIndex);
@@ -168,8 +170,9 @@ const oldRect = rects[index];
 
-const rectSwappingStrategy = ({
-  activeIndex,
-  index,
-  rects,
-  overIndex
-}) => {
+const rectSwappingStrategy = _ref => {
+  let {
+    activeIndex,
+    index,
+    rects,
+    overIndex
+  } = _ref;
   let oldRect;
@@ -205,11 +208,12 @@ let newRect;
 };
-const verticalListSortingStrategy = ({
-  activeIndex,
-  activeNodeRect: fallbackActiveRect,
-  index,
-  rects,
-  overIndex
-}) => {
+const verticalListSortingStrategy = _ref => {
   var _rects$activeIndex;
 
+  let {
+    activeIndex,
+    activeNodeRect: fallbackActiveRect,
+    index,
+    rects,
+    overIndex
+  } = _ref;
   const activeNodeRect = (_rects$activeIndex = rects[activeIndex]) != null ? _rects$activeIndex : fallbackActiveRect;
@@ -291,9 +295,10 @@
 });
-function SortableContext({
-  children,
-  id,
-  items: userDefinedItems,
-  strategy = rectSortingStrategy,
-  disabled: disabledProp = false
-}) {
+function SortableContext(_ref) {
+  let {
+    children,
+    id,
+    items: userDefinedItems,
+    strategy = rectSortingStrategy,
+    disabled: disabledProp = false
+  } = _ref;
   const {
@@ -342,19 +347,24 @@ active,
 
-const defaultNewIndexGetter = ({
-  id,
-  items,
-  activeIndex,
-  overIndex
-}) => arrayMove(items, activeIndex, overIndex).indexOf(id);
-const defaultAnimateLayoutChanges = ({
-  containerId,
-  isSorting,
-  wasDragging,
-  index,
-  items,
-  newIndex,
-  previousItems,
-  previousContainerId,
-  transition
-}) => {
+const defaultNewIndexGetter = _ref => {
+  let {
+    id,
+    items,
+    activeIndex,
+    overIndex
+  } = _ref;
+  return arrayMove(items, activeIndex, overIndex).indexOf(id);
+};
+const defaultAnimateLayoutChanges = _ref2 => {
+  let {
+    containerId,
+    isSorting,
+    wasDragging,
+    index,
+    items,
+    newIndex,
+    previousItems,
+    previousContainerId,
+    transition
+  } = _ref2;
+
   if (!transition || !wasDragging) {
@@ -393,8 +403,9 @@ return false;
 
-function useDerivedTransform({
-  disabled,
-  index,
-  node,
-  rect
-}) {
+function useDerivedTransform(_ref) {
+  let {
+    disabled,
+    index,
+    node,
+    rect
+  } = _ref;
   const [derivedTransform, setDerivedtransform] = useState(null);
@@ -437,13 +448,14 @@ const previousIndex = useRef(index);
 
-function useSortable({
-  animateLayoutChanges = defaultAnimateLayoutChanges,
-  attributes: userDefinedAttributes,
-  disabled: localDisabled,
-  data: customData,
-  getNewIndex = defaultNewIndexGetter,
-  id,
-  strategy: localStrategy,
-  resizeObserverConfig,
-  transition = defaultTransition
-}) {
+function useSortable(_ref) {
+  let {
+    animateLayoutChanges = defaultAnimateLayoutChanges,
+    attributes: userDefinedAttributes,
+    disabled: localDisabled,
+    data: customData,
+    getNewIndex = defaultNewIndexGetter,
+    id,
+    strategy: localStrategy,
+    resizeObserverConfig,
+    transition = defaultTransition
+  } = _ref;
   const {
@@ -656,12 +668,14 @@ items,
 const directions = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
-const sortableKeyboardCoordinates = (event, {
-  context: {
-    active,
-    collisionRect,
-    droppableRects,
-    droppableContainers,
-    over,
-    scrollableAncestors
-  }
-}) => {
+const sortableKeyboardCoordinates = (event, _ref) => {
+  let {
+    context: {
+      active,
+      collisionRect,
+      droppableRects,
+      droppableContainers,
+      over,
+      scrollableAncestors
+    }
+  } = _ref;
+
   if (directions.includes(event.code)) {
@@ -676,3 +690,3 @@ event.preventDefault();
     droppableContainers.getEnabled().forEach(entry => {
-      if (!entry || (entry == null ? void 0 : entry.disabled)) {
+      if (!entry || entry != null && entry.disabled) {
         return;
@@ -679,0 +693,0 @@ }

dist/types/type-guard.d.ts

@@ -1,4 +0,4 @@
-import type { Data, DroppableContainer, DraggableNode } from '@dnd-kit/core';
+import type { Active, Data, DroppableContainer, DraggableNode, Over } from '@dnd-kit/core';
 import type { SortableData } from './data';
-export declare function hasSortableData<T extends DraggableNode | DroppableContainer>(entry: T | null | undefined): entry is T & {
+export declare function hasSortableData<T extends Active | Over | DraggableNode | DroppableContainer>(entry: T | null | undefined): entry is T & {
     data: {
@@ -5,0 +5,0 @@ current: Data<SortableData>;

package.json

 {
   "name": "@dnd-kit/sortable",
-  "version": "7.0.0",
+  "version": "7.0.1-next-20225918369",
   "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

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

Lines of code

1619

increased by1.5%

Worsened metrics

Total package byte prevSize

232701

decreased by-0.99%

Number of low quality alerts

3

increased by50%

No dependency changes