Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@dnd-kit/sortable

Package Overview
Dependencies
Maintainers
1
Versions
103
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@dnd-kit/sortable - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

dist/hooks/defaults.d.ts

11

CHANGELOG.md
# @dnd-kit/sortable
## 1.1.0
### Minor Changes
- [`79f6088`](https://github.com/clauderic/dnd-kit/commit/79f6088dab2d4e7443743f85b329a25a023ecd87) [#144](https://github.com/clauderic/dnd-kit/pull/144) Thanks [@clauderic](https://github.com/clauderic)! - Allow consumers to determine whether to animate layout changes and when to measure nodes. Consumers can now use the `animateLayoutChanges` prop of `useSortable` to determine whether layout animations should occur. Consumers can now also decide when to measure layouts, and at what frequency using the `layoutMeasuring` prop of `DndContext`. By default, `DndContext` will measure layouts just-in-time after sorting has begun. Consumers can override this behaviour to either only measure before dragging begins (on mount and after dragging), or always (on mount, before dragging, after dragging). Pairing the `layoutMeasuring` prop on `DndContext` and the `animateLayoutChanges` prop of `useSortable` opens up a number of new possibilities for consumers, such as animating insertion and removal of items in a sortable list.
### Patch Changes
- Updated dependencies [[`adb7bd5`](https://github.com/clauderic/dnd-kit/commit/adb7bd58d7d95db5e450a1518541d3d71704529d), [`79f6088`](https://github.com/clauderic/dnd-kit/commit/79f6088dab2d4e7443743f85b329a25a023ecd87), [`a76cd5a`](https://github.com/clauderic/dnd-kit/commit/a76cd5abcc0b17eae20d4a6256d95b47f2e9d050)]:
- @dnd-kit/core@1.2.0
## 1.0.2

@@ -4,0 +15,0 @@

1

dist/components/SortableContext.d.ts

@@ -19,2 +19,3 @@ import React from 'react';

strategy: SortingStrategy;
wasSorting: boolean;
}

@@ -21,0 +22,0 @@ export declare const Context: React.Context<ContextDescriptor>;

export { useSortable } from './useSortable';
export type { Arguments as UseSortableArguments } from './useSortable';
export { defaultAnimateLayoutChanges } from './defaults';
export type { AnimateLayoutChanges } from './types';

10

dist/hooks/useSortable.d.ts
/// <reference types="react" />
import { UseDraggableArguments } from '@dnd-kit/core';
import { Transition } from '@dnd-kit/utilities';
import type { SortingStrategy } from '../types';
import type { AnimateLayoutChanges, SortableTransition } from './types';
export interface Arguments extends UseDraggableArguments {
animateLayoutChanges?: AnimateLayoutChanges;
strategy?: SortingStrategy;
transition?: SortableTransition | null;
}
declare type SortableTransition = Pick<Transition, 'easing' | 'duration'>;
export declare const defaultTransition: SortableTransition;
export declare function useSortable({ disabled, id, attributes: userDefinedAttributes, strategy: localStrategy, transition: sortingTransition, }: Arguments): {
export declare function useSortable({ animateLayoutChanges, attributes: userDefinedAttributes, disabled, id, strategy: localStrategy, transition, }: Arguments): {
attributes: {

@@ -35,4 +34,3 @@ role: string;

transform: import("@dnd-kit/utilities").Transform | null;
transition: string | undefined;
transition: string | null;
};
export {};
export { SortableContext, SortableContextProps } from './components';
export { useSortable } from './hooks';
export { useSortable, defaultAnimateLayoutChanges } from './hooks';
export type { UseSortableArguments, AnimateLayoutChanges } from './hooks';
export { horizontalListSortingStrategy, rectSortingStrategy, rectSwappingStrategy, verticalListSortingStrategy, } from './strategies';

@@ -4,0 +5,0 @@ export { sortableKeyboardCoordinates } from './sensors';

@@ -255,3 +255,4 @@ 'use strict';

sortedRects: [],
strategy: rectSortingStrategy
strategy: rectSortingStrategy,
wasSorting: false
});

@@ -277,2 +278,4 @@ function SortableContext(_ref) {

var isSorting = activeIndex !== -1;
var prevSorting = React.useRef(isSorting);
var wasSorting = !isSorting && prevSorting.current === true;
var overIndex = over ? items.indexOf(over.id) : -1;

@@ -292,2 +295,11 @@ var previousItemsRef = React.useRef(items);

}, [items]);
React.useEffect(function () {
if (isSorting) {
prevSorting.current = isSorting;
} else {
requestAnimationFrame(function () {
prevSorting.current = isSorting;
});
}
}, [isSorting]);
var contextValue = React.useMemo(function () {

@@ -302,5 +314,6 @@ return {

sortedRects: sortedRects,
strategy: strategy
strategy: strategy,
wasSorting: wasSorting
};
}, [activeIndex, containerId, disableTransforms, items, overIndex, sortedRects, useDragOverlay, strategy]);
}, [activeIndex, containerId, disableTransforms, items, overIndex, sortedRects, useDragOverlay, strategy, wasSorting]);
return React__default.createElement(Context.Provider, {

@@ -315,2 +328,32 @@ value: contextValue

var defaultAnimateLayoutChanges = function defaultAnimateLayoutChanges(_ref) {
var isSorting = _ref.isSorting,
index = _ref.index,
newIndex = _ref.newIndex,
transition = _ref.transition;
if (!transition) {
return false;
}
if (isSorting) {
return true;
}
return newIndex !== index;
};
var defaultTransition = {
duration: 200,
easing: 'ease'
};
var transitionProperty = 'transform';
var disabledTransition = /*#__PURE__*/utilities.CSS.Transition.toString({
property: transitionProperty,
duration: 0,
easing: 'linear'
});
var defaultAttributes = {
roleDescription: 'sortable'
};
/*

@@ -354,6 +397,8 @@ * When the index of an item changes while sorting,

}
}, [rect, disabled, index, node]);
}, [disabled, index, node, rect]);
React.useEffect(function () {
if (derivedTransform) {
setDerivedtransform(null);
requestAnimationFrame(function () {
setDerivedtransform(null);
});
}

@@ -364,22 +409,11 @@ }, [derivedTransform]);

var defaultTransition = {
duration: 200,
easing: 'ease'
};
var property = 'transform';
var disabledTransition = /*#__PURE__*/utilities.CSS.Transition.toString({
property: property,
duration: 0,
easing: 'linear'
});
var defaultAttributes = {
roleDescription: 'sortable'
};
function useSortable(_ref) {
var disabled = _ref.disabled,
var _ref$animateLayoutCha = _ref.animateLayoutChanges,
animateLayoutChanges = _ref$animateLayoutCha === void 0 ? defaultAnimateLayoutChanges : _ref$animateLayoutCha,
userDefinedAttributes = _ref.attributes,
disabled = _ref.disabled,
id = _ref.id,
userDefinedAttributes = _ref.attributes,
localStrategy = _ref.strategy,
_ref$transition = _ref.transition,
sortingTransition = _ref$transition === void 0 ? defaultTransition : _ref$transition;
transition = _ref$transition === void 0 ? defaultTransition : _ref$transition;

@@ -394,3 +428,4 @@ var _useContext = React.useContext(Context),

useDragOverlay = _useContext.useDragOverlay,
globalStrategy = _useContext.strategy;
globalStrategy = _useContext.strategy,
wasSorting = _useContext.wasSorting;

@@ -444,5 +479,15 @@ var _useDraggable = core.useDraggable({

var prevNewIndex = React.useRef(newIndex);
var transition = !sortingTransition || !isSorting && index === prevNewIndex.current ? null : sortingTransition;
var shouldAnimateLayoutChanges = animateLayoutChanges({
active: active,
isDragging: isDragging,
isSorting: isSorting,
id: id,
index: index,
items: items,
newIndex: prevNewIndex.current,
transition: transition,
wasSorting: wasSorting
});
var derivedTransform = useDerivedTransform({
disabled: transition === null,
disabled: !shouldAnimateLayoutChanges,
index: index,

@@ -472,6 +517,23 @@ node: node,

transform: derivedTransform != null ? derivedTransform : finalTransform,
transition: derivedTransform ? disabledTransition : transition === null || shouldDisplaceDragSource ? undefined : utilities.CSS.Transition.toString(_extends({}, transition, {
property: property
}))
transition: getTransition()
};
function getTransition() {
if (derivedTransform) {
// Temporarily disable transitions for a single frame to set up derived transforms
return disabledTransition;
}
if (shouldDisplaceDragSource || !transition) {
return null;
}
if (isSorting || shouldAnimateLayoutChanges) {
return utilities.CSS.Transition.toString(_extends({}, transition, {
property: transitionProperty
}));
}
return null;
}
}

@@ -562,2 +624,3 @@

exports.arrayMove = arrayMove;
exports.defaultAnimateLayoutChanges = defaultAnimateLayoutChanges;
exports.horizontalListSortingStrategy = horizontalListSortingStrategy;

@@ -564,0 +627,0 @@ exports.rectSortingStrategy = rectSortingStrategy;

@@ -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,o=require("@dnd-kit/core"),n=require("@dnd-kit/utilities");function i(e,t,r){var o=e.slice();return o.splice(r<0?o.length+r:r,0,o.splice(t,1)[0]),o}function a(e){return null!==e&&e>=0}function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}var f={scaleX:1,scaleY:1},u=function(e){var t=e.layoutRects,r=e.index,o=i(t,e.overIndex,e.activeIndex),n=t[r],a=o[r];return a&&n?{x:a.offsetLeft-n.offsetLeft,y:a.offsetTop-n.offsetTop,scaleX:a.width/n.width,scaleY:a.height/n.height}:null},d={scaleX:1,scaleY:1},c=r.createContext({activeIndex:-1,containerId:"Sortable",disableTransforms:!1,items:[],overIndex:-1,useDragOverlay:!1,sortedRects:[],strategy:u}),l={duration:200,easing:"ease"},v=n.CSS.Transition.toString({property:"transform",duration:0,easing:"linear"}),h={roleDescription:"sortable"},p=[o.KeyboardCode.Down,o.KeyboardCode.Right,o.KeyboardCode.Up,o.KeyboardCode.Left];exports.SortableContext=function(e){var i,a=e.children,s=e.id,f=e.items,d=e.strategy,l=void 0===d?u:d,v=o.useDndContext(),h=v.active,p=v.overlayNode,g=v.droppableRects,x=v.over,y=v.recomputeLayouts,b=v.willRecomputeLayouts,R=n.useUniqueId("Sortable",s),w=Boolean(null!==p.rect),L=h?f.indexOf(h):-1,I=-1!==L,T=x?f.indexOf(x.id):-1,S=t.useRef(f),m=function(e,t){return e.reduce((function(e,r,o){var n=t.get(r);return n&&(e[o]=n),e}),Array(e.length))}(f,g),C=(i=S.current,!(f.join()===i.join())),D=-1!==T&&-1===L||C;n.useIsomorphicLayoutEffect((function(){C&&I&&!b&&y()}),[C,I,y,b]),t.useEffect((function(){S.current=f}),[f]);var O=t.useMemo((function(){return{activeIndex:L,containerId:R,disableTransforms:D,items:f,overIndex:T,useDragOverlay:w,sortedRects:m,strategy:l}}),[L,R,D,f,T,m,w,l]);return r.createElement(c.Provider,{value:O},a)},exports.arrayMove=i,exports.horizontalListSortingStrategy=function(e){var t,r=e.layoutRects,o=e.activeIndex,n=e.overIndex,i=e.index,a=null!=(t=r[o])?t:e.activeNodeRect;if(!a)return null;var u=function(e,t,r){var o=e[t],n=e[t-1],i=e[t+1];return n||i?r<t?n?o.offsetLeft-(n.offsetLeft+n.width):i.offsetLeft-(o.offsetLeft+o.width):i?i.offsetLeft-(o.offsetLeft+o.width):o.offsetLeft-(n.offsetLeft+n.width):0}(r,i,o);if(i===o){var d=r[n];return d?s({x:o<n?d.offsetLeft+d.width-(a.offsetLeft+a.width):d.offsetLeft-a.offsetLeft,y:0},f):null}return s(i>o&&i<=n?{x:-a.width-u,y:0}:i<o&&i>=n?{x:a.width+u,y:0}:{x:0,y:0},f)},exports.rectSortingStrategy=u,exports.rectSwappingStrategy=function(e){var t,r,o=e.activeIndex,n=e.index,i=e.layoutRects,a=e.overIndex;return n===o&&(t=i[n],r=i[a]),n===a&&(t=i[n],r=i[o]),r&&t?{x:r.offsetLeft-t.offsetLeft,y:r.offsetTop-t.offsetTop,scaleX:r.width/t.width,scaleY:r.height/t.height}:null},exports.sortableKeyboardCoordinates=function(e,t){var r=t.context,i=r.translatedRect,a=r.droppableContainers;if(p.includes(e.code)){if(e.preventDefault(),!i)return;var s=[];Object.entries(a).forEach((function(t){var r=t[0],n=t[1];if(!(null==n?void 0:n.disabled)){var a=null==n?void 0:n.node.current;if(a){var f=o.getViewRect(a);switch(e.code){case o.KeyboardCode.Down:i.top+i.height<=f.top&&s.push([r,f]);break;case o.KeyboardCode.Up:i.top>=f.top+f.height&&s.push([r,f]);break;case o.KeyboardCode.Left:i.left>=f.left+f.width&&s.push([r,f]);break;case o.KeyboardCode.Right:i.left+i.width<=f.left&&s.push([r,f])}}}}));var f=o.closestCorners(s,i);if(f){var u,d=null==(u=a[f])?void 0:u.node.current;if(d){var c=o.getViewRect(d);return n.subtract({x:c.left-(i.width-c.width),y:c.top-(i.height-c.height)})}}}},exports.useSortable=function(e){var r=e.disabled,f=e.id,u=e.attributes,d=e.strategy,p=e.transition,g=void 0===p?l:p,x=t.useContext(c),y=x.items,b=x.containerId,R=x.activeIndex,w=x.disableTransforms,L=x.sortedRects,I=x.overIndex,T=x.useDragOverlay,S=x.strategy,m=o.useDraggable({id:f,attributes:s({},h,u),disabled:r}),C=m.active,D=m.activeNodeRect,O=m.activatorEvent,N=m.attributes,E=m.setNodeRef,K=m.listeners,j=m.isDragging,k=m.over,X=m.transform,Y=y.indexOf(f),q=t.useMemo((function(){return{containerId:b,index:Y,items:y}}),[b,Y,y]),M=o.useDroppable({id:f,data:q}),B=M.rect,P=M.node,U=M.setNodeRef,V=n.useCombinedRefs(U,E),_=Boolean(C),z=_&&!w&&a(R)&&a(I),A=!T&&j,F=A&&z?X:null,G=z?null!=F?F:(null!=d?d:S)({layoutRects:L,activeNodeRect:D,activeIndex:R,overIndex:I,index:Y}):null,H=a(R)&&a(I)?i(y,R,I).indexOf(f):Y,J=t.useRef(H),Q=!g||!_&&Y===J.current?null:g,W=function(e){var r=e.rect,n=e.disabled,i=e.index,a=e.node,s=t.useState(null),f=s[0],u=s[1],d=t.useRef(i);return t.useEffect((function(){if(!n&&i!==d.current&&a.current){var e=r.current;if(e){var t=o.getBoundingClientRect(a.current),s={x:e.offsetLeft-t.offsetLeft,y:e.offsetTop-t.offsetTop,scaleX:e.width/t.width,scaleY:e.height/t.height};(s.x||s.y)&&u(s)}}i!==d.current&&(d.current=i)}),[r,n,i,a]),t.useEffect((function(){f&&u(null)}),[f]),f}({disabled:null===Q,index:Y,node:P,rect:B});return t.useEffect((function(){_&&(J.current=H)}),[_,H]),{attributes:N,activatorEvent:O,rect:B,index:Y,isSorting:_,isDragging:j,listeners:K,node:P,overIndex:I,over:k,setNodeRef:V,setDroppableNodeRef:U,setDraggableNodeRef:E,transform:null!=W?W:G,transition:W?v:null===Q||A?void 0:n.CSS.Transition.toString(s({},Q,{property:"transform"}))}},exports.verticalListSortingStrategy=function(e){var t,r=e.activeIndex,o=e.index,n=e.layoutRects,i=e.overIndex,a=null!=(t=n[r])?t:e.activeNodeRect;if(!a)return null;if(o===r){var f=n[i];return f?s({x:0,y:r<i?f.offsetTop+f.height-(a.offsetTop+a.height):f.offsetTop-a.offsetTop},d):null}var u=function(e,t,r){var o=e[t],n=e[t-1],i=e[t+1];return o?r<t?n?o.offsetTop-(n.offsetTop+n.height):i?i.offsetTop-(o.offsetTop+o.height):0:i?i.offsetTop-(o.offsetTop+o.height):n?o.offsetTop-(n.offsetTop+n.height):0:0}(n,o,r);return s(o>r&&o<=i?{x:0,y:-a.height-u}:o<r&&o>=i?{x:0,y:a.height+u}:{x:0,y:0},d)};
"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"),o=require("@dnd-kit/utilities");function i(e,t,r){var n=e.slice();return n.splice(r<0?n.length+r:r,0,n.splice(t,1)[0]),n}function a(e){return null!==e&&e>=0}function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var f={scaleX:1,scaleY:1},u=function(e){var t=e.layoutRects,r=e.index,n=i(t,e.overIndex,e.activeIndex),o=t[r],a=n[r];return a&&o?{x:a.offsetLeft-o.offsetLeft,y:a.offsetTop-o.offsetTop,scaleX:a.width/o.width,scaleY:a.height/o.height}:null},d={scaleX:1,scaleY:1},c=r.createContext({activeIndex:-1,containerId:"Sortable",disableTransforms:!1,items:[],overIndex:-1,useDragOverlay:!1,sortedRects:[],strategy:u,wasSorting:!1}),l=function(e){return!(!e.transition||!e.isSorting&&e.newIndex===e.index)},v={duration:200,easing:"ease"},h=o.CSS.Transition.toString({property:"transform",duration:0,easing:"linear"}),g={roleDescription:"sortable"},p=[n.KeyboardCode.Down,n.KeyboardCode.Right,n.KeyboardCode.Up,n.KeyboardCode.Left];exports.SortableContext=function(e){var i,a=e.children,s=e.id,f=e.items,d=e.strategy,l=void 0===d?u:d,v=n.useDndContext(),h=v.active,g=v.overlayNode,p=v.droppableRects,x=v.over,y=v.recomputeLayouts,b=v.willRecomputeLayouts,w=o.useUniqueId("Sortable",s),R=Boolean(null!==g.rect),L=h?f.indexOf(h):-1,m=-1!==L,S=t.useRef(m),I=!m&&!0===S.current,T=x?f.indexOf(x.id):-1,C=t.useRef(f),D=function(e,t){return e.reduce((function(e,r,n){var o=t.get(r);return o&&(e[n]=o),e}),Array(e.length))}(f,p),O=(i=C.current,!(f.join()===i.join())),E=-1!==T&&-1===L||O;o.useIsomorphicLayoutEffect((function(){O&&m&&!b&&y()}),[O,m,y,b]),t.useEffect((function(){C.current=f}),[f]),t.useEffect((function(){m?S.current=m:requestAnimationFrame((function(){S.current=m}))}),[m]);var N=t.useMemo((function(){return{activeIndex:L,containerId:w,disableTransforms:E,items:f,overIndex:T,useDragOverlay:R,sortedRects:D,strategy:l,wasSorting:I}}),[L,w,E,f,T,D,R,l,I]);return r.createElement(c.Provider,{value:N},a)},exports.arrayMove=i,exports.defaultAnimateLayoutChanges=l,exports.horizontalListSortingStrategy=function(e){var t,r=e.layoutRects,n=e.activeIndex,o=e.overIndex,i=e.index,a=null!=(t=r[n])?t:e.activeNodeRect;if(!a)return null;var u=function(e,t,r){var n=e[t],o=e[t-1],i=e[t+1];return o||i?r<t?o?n.offsetLeft-(o.offsetLeft+o.width):i.offsetLeft-(n.offsetLeft+n.width):i?i.offsetLeft-(n.offsetLeft+n.width):n.offsetLeft-(o.offsetLeft+o.width):0}(r,i,n);if(i===n){var d=r[o];return d?s({x:n<o?d.offsetLeft+d.width-(a.offsetLeft+a.width):d.offsetLeft-a.offsetLeft,y:0},f):null}return s(i>n&&i<=o?{x:-a.width-u,y:0}:i<n&&i>=o?{x:a.width+u,y:0}:{x:0,y:0},f)},exports.rectSortingStrategy=u,exports.rectSwappingStrategy=function(e){var t,r,n=e.activeIndex,o=e.index,i=e.layoutRects,a=e.overIndex;return o===n&&(t=i[o],r=i[a]),o===a&&(t=i[o],r=i[n]),r&&t?{x:r.offsetLeft-t.offsetLeft,y:r.offsetTop-t.offsetTop,scaleX:r.width/t.width,scaleY:r.height/t.height}:null},exports.sortableKeyboardCoordinates=function(e,t){var r=t.context,i=r.translatedRect,a=r.droppableContainers;if(p.includes(e.code)){if(e.preventDefault(),!i)return;var s=[];Object.entries(a).forEach((function(t){var r=t[0],o=t[1];if(!(null==o?void 0:o.disabled)){var a=null==o?void 0:o.node.current;if(a){var f=n.getViewRect(a);switch(e.code){case n.KeyboardCode.Down:i.top+i.height<=f.top&&s.push([r,f]);break;case n.KeyboardCode.Up:i.top>=f.top+f.height&&s.push([r,f]);break;case n.KeyboardCode.Left:i.left>=f.left+f.width&&s.push([r,f]);break;case n.KeyboardCode.Right:i.left+i.width<=f.left&&s.push([r,f])}}}}));var f=n.closestCorners(s,i);if(f){var u,d=null==(u=a[f])?void 0:u.node.current;if(d){var c=n.getViewRect(d);return o.subtract({x:c.left-(i.width-c.width),y:c.top-(i.height-c.height)})}}}},exports.useSortable=function(e){var r=e.animateLayoutChanges,f=void 0===r?l:r,u=e.attributes,d=e.disabled,p=e.id,x=e.strategy,y=e.transition,b=void 0===y?v:y,w=t.useContext(c),R=w.items,L=w.containerId,m=w.activeIndex,S=w.disableTransforms,I=w.sortedRects,T=w.overIndex,C=w.useDragOverlay,D=w.strategy,O=w.wasSorting,E=n.useDraggable({id:p,attributes:s({},g,u),disabled:d}),N=E.active,K=E.activeNodeRect,j=E.activatorEvent,q=E.attributes,k=E.setNodeRef,X=E.listeners,Y=E.isDragging,A=E.over,M=E.transform,B=R.indexOf(p),P=t.useMemo((function(){return{containerId:L,index:B,items:R}}),[L,B,R]),U=n.useDroppable({id:p,data:P}),F=U.rect,V=U.node,_=U.setNodeRef,z=o.useCombinedRefs(_,k),G=Boolean(N),H=G&&!S&&a(m)&&a(T),J=!C&&Y,Q=J&&H?M:null,W=H?null!=Q?Q:(null!=x?x:D)({layoutRects:I,activeNodeRect:K,activeIndex:m,overIndex:T,index:B}):null,Z=a(m)&&a(T)?i(R,m,T).indexOf(p):B,$=t.useRef(Z),ee=f({active:N,isDragging:Y,isSorting:G,id:p,index:B,items:R,newIndex:$.current,transition:b,wasSorting:O}),te=function(e){var r=e.rect,o=e.disabled,i=e.index,a=e.node,s=t.useState(null),f=s[0],u=s[1],d=t.useRef(i);return t.useEffect((function(){if(!o&&i!==d.current&&a.current){var e=r.current;if(e){var t=n.getBoundingClientRect(a.current),s={x:e.offsetLeft-t.offsetLeft,y:e.offsetTop-t.offsetTop,scaleX:e.width/t.width,scaleY:e.height/t.height};(s.x||s.y)&&u(s)}}i!==d.current&&(d.current=i)}),[o,i,a,r]),t.useEffect((function(){f&&requestAnimationFrame((function(){u(null)}))}),[f]),f}({disabled:!ee,index:B,node:V,rect:F});return t.useEffect((function(){G&&($.current=Z)}),[G,Z]),{attributes:q,activatorEvent:j,rect:F,index:B,isSorting:G,isDragging:Y,listeners:X,node:V,overIndex:T,over:A,setNodeRef:z,setDroppableNodeRef:_,setDraggableNodeRef:k,transform:null!=te?te:W,transition:te?h:J||!b?null:G||ee?o.CSS.Transition.toString(s({},b,{property:"transform"})):null}},exports.verticalListSortingStrategy=function(e){var t,r=e.activeIndex,n=e.index,o=e.layoutRects,i=e.overIndex,a=null!=(t=o[r])?t:e.activeNodeRect;if(!a)return null;if(n===r){var f=o[i];return f?s({x:0,y:r<i?f.offsetTop+f.height-(a.offsetTop+a.height):f.offsetTop-a.offsetTop},d):null}var u=function(e,t,r){var n=e[t],o=e[t-1],i=e[t+1];return n?r<t?o?n.offsetTop-(o.offsetTop+o.height):i?i.offsetTop-(n.offsetTop+n.height):0:i?i.offsetTop-(n.offsetTop+n.height):o?n.offsetTop-(o.offsetTop+o.height):0:0}(o,n,r);return s(n>r&&n<=i?{x:0,y:-a.height-u}:n<r&&n>=i?{x:0,y:a.height+u}:{x:0,y:0},d)};
//# sourceMappingURL=sortable.cjs.production.min.js.map
import React, { useRef, useEffect, useMemo, useState, useContext } from 'react';
import { useDndContext, getBoundingClientRect, useDraggable, useDroppable, getViewRect, KeyboardCode, closestCorners } from '@dnd-kit/core';
import { useUniqueId, useIsomorphicLayoutEffect, useCombinedRefs, CSS, subtract } from '@dnd-kit/utilities';
import { useUniqueId, useIsomorphicLayoutEffect, CSS, useCombinedRefs, subtract } from '@dnd-kit/utilities';

@@ -248,3 +248,4 @@ /**

sortedRects: [],
strategy: rectSortingStrategy
strategy: rectSortingStrategy,
wasSorting: false
});

@@ -270,2 +271,4 @@ function SortableContext(_ref) {

var isSorting = activeIndex !== -1;
var prevSorting = useRef(isSorting);
var wasSorting = !isSorting && prevSorting.current === true;
var overIndex = over ? items.indexOf(over.id) : -1;

@@ -285,2 +288,11 @@ var previousItemsRef = useRef(items);

}, [items]);
useEffect(function () {
if (isSorting) {
prevSorting.current = isSorting;
} else {
requestAnimationFrame(function () {
prevSorting.current = isSorting;
});
}
}, [isSorting]);
var contextValue = useMemo(function () {

@@ -295,5 +307,6 @@ return {

sortedRects: sortedRects,
strategy: strategy
strategy: strategy,
wasSorting: wasSorting
};
}, [activeIndex, containerId, disableTransforms, items, overIndex, sortedRects, useDragOverlay, strategy]);
}, [activeIndex, containerId, disableTransforms, items, overIndex, sortedRects, useDragOverlay, strategy, wasSorting]);
return React.createElement(Context.Provider, {

@@ -308,2 +321,32 @@ value: contextValue

var defaultAnimateLayoutChanges = function defaultAnimateLayoutChanges(_ref) {
var isSorting = _ref.isSorting,
index = _ref.index,
newIndex = _ref.newIndex,
transition = _ref.transition;
if (!transition) {
return false;
}
if (isSorting) {
return true;
}
return newIndex !== index;
};
var defaultTransition = {
duration: 200,
easing: 'ease'
};
var transitionProperty = 'transform';
var disabledTransition = /*#__PURE__*/CSS.Transition.toString({
property: transitionProperty,
duration: 0,
easing: 'linear'
});
var defaultAttributes = {
roleDescription: 'sortable'
};
/*

@@ -347,6 +390,8 @@ * When the index of an item changes while sorting,

}
}, [rect, disabled, index, node]);
}, [disabled, index, node, rect]);
useEffect(function () {
if (derivedTransform) {
setDerivedtransform(null);
requestAnimationFrame(function () {
setDerivedtransform(null);
});
}

@@ -357,22 +402,11 @@ }, [derivedTransform]);

var defaultTransition = {
duration: 200,
easing: 'ease'
};
var property = 'transform';
var disabledTransition = /*#__PURE__*/CSS.Transition.toString({
property: property,
duration: 0,
easing: 'linear'
});
var defaultAttributes = {
roleDescription: 'sortable'
};
function useSortable(_ref) {
var disabled = _ref.disabled,
var _ref$animateLayoutCha = _ref.animateLayoutChanges,
animateLayoutChanges = _ref$animateLayoutCha === void 0 ? defaultAnimateLayoutChanges : _ref$animateLayoutCha,
userDefinedAttributes = _ref.attributes,
disabled = _ref.disabled,
id = _ref.id,
userDefinedAttributes = _ref.attributes,
localStrategy = _ref.strategy,
_ref$transition = _ref.transition,
sortingTransition = _ref$transition === void 0 ? defaultTransition : _ref$transition;
transition = _ref$transition === void 0 ? defaultTransition : _ref$transition;

@@ -387,3 +421,4 @@ var _useContext = useContext(Context),

useDragOverlay = _useContext.useDragOverlay,
globalStrategy = _useContext.strategy;
globalStrategy = _useContext.strategy,
wasSorting = _useContext.wasSorting;

@@ -437,5 +472,15 @@ var _useDraggable = useDraggable({

var prevNewIndex = useRef(newIndex);
var transition = !sortingTransition || !isSorting && index === prevNewIndex.current ? null : sortingTransition;
var shouldAnimateLayoutChanges = animateLayoutChanges({
active: active,
isDragging: isDragging,
isSorting: isSorting,
id: id,
index: index,
items: items,
newIndex: prevNewIndex.current,
transition: transition,
wasSorting: wasSorting
});
var derivedTransform = useDerivedTransform({
disabled: transition === null,
disabled: !shouldAnimateLayoutChanges,
index: index,

@@ -465,6 +510,23 @@ node: node,

transform: derivedTransform != null ? derivedTransform : finalTransform,
transition: derivedTransform ? disabledTransition : transition === null || shouldDisplaceDragSource ? undefined : CSS.Transition.toString(_extends({}, transition, {
property: property
}))
transition: getTransition()
};
function getTransition() {
if (derivedTransform) {
// Temporarily disable transitions for a single frame to set up derived transforms
return disabledTransition;
}
if (shouldDisplaceDragSource || !transition) {
return null;
}
if (isSorting || shouldAnimateLayoutChanges) {
return CSS.Transition.toString(_extends({}, transition, {
property: transitionProperty
}));
}
return null;
}
}

@@ -553,3 +615,3 @@

export { SortableContext, arrayMove, horizontalListSortingStrategy, rectSortingStrategy, rectSwappingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy };
export { SortableContext, arrayMove, defaultAnimateLayoutChanges, horizontalListSortingStrategy, rectSortingStrategy, rectSwappingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy };
//# sourceMappingURL=sortable.esm.js.map
{
"name": "@dnd-kit/sortable",
"version": "1.0.2",
"version": "1.1.0",
"description": "Official sortable preset and sensors for dnd kit",

@@ -29,3 +29,3 @@ "author": "Claudéric Demers",

"dependencies": {
"@dnd-kit/core": "^1.0.2",
"@dnd-kit/core": "^1.2.0",
"@dnd-kit/utilities": "^1.0.2",

@@ -32,0 +32,0 @@ "tslib": "^2.0.0"

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc