@dnd-kit/sortable - npm Package Compare versions

Comparing version 7.0.0-next-202242015231 to 7.0.0-next-2022420172442

CHANGELOG.md

 # @dnd-kit/sortable
 
-## 7.0.0-next-202242015231
+## 7.0.0-next-2022420172442
 
@@ -26,4 +26,6 @@ ### Major Changes
 
-- [#748](https://github.com/clauderic/dnd-kit/pull/748) [`59ca82b`](https://github.com/clauderic/dnd-kit/commit/59ca82b9f228f34c7731ece87aef5d9633608b57) Thanks [@clauderic](https://github.com/clauderic)! - #### Introducing activator node refs
+- [#748](https://github.com/clauderic/dnd-kit/pull/748) [`59ca82b`](https://github.com/clauderic/dnd-kit/commit/59ca82b9f228f34c7731ece87aef5d9633608b57) Thanks [@clauderic](https://github.com/clauderic)! - Automatic focus management and activator node refs.
 
+  #### Introducing activator node refs
+
   Introducing the concept of activator node refs for `useDraggable` and `useSortable`. This allows @dnd-kit to handle common use-cases such as restoring focus on the activator node after dragging via the keyboard or only allowing the activator node to instantiate the keyboard sensor.
@@ -76,2 +78,17 @@
 
+- [#754](https://github.com/clauderic/dnd-kit/pull/754) [`224201a`](https://github.com/clauderic/dnd-kit/commit/224201a2a5611f0efeb57c9b273eddf23c28e01f) Thanks [@clauderic](https://github.com/clauderic)! - The `<SortableContext>` component now optionally accepts a `disabled` prop to globally disable `useSortable` hooks rendered within it.
+
+  The `disabled` prop accepts either a boolean or an object with the following shape:
+
+  ```ts
+  interface Disabled {
+    draggable?: boolean;
+    droppable?: boolean;
+  }
+  ```
+
+  The `useSortable` hook has now been updated to also optionally accept the `disabled` configuration object to conditionally disable the `useDraggable` and/or `useDroppable` hooks used internally.
+
+  Like the `strategy` prop, the `disabled` prop defined on the `useSortable` hook takes precedence over the `disabled` prop defined on the parent `<SortableContext>`.
+
 ### Patch Changes
@@ -81,5 +98,5 @@
 
-- Updated dependencies [[`4173087`](https://github.com/clauderic/dnd-kit/commit/417308704454c50f88ab305ab450a99bde5034b0), [`59ca82b`](https://github.com/clauderic/dnd-kit/commit/59ca82b9f228f34c7731ece87aef5d9633608b57), [`7161f70`](https://github.com/clauderic/dnd-kit/commit/7161f702c9fe06f8dafa6449d48b918070ca46fb), [`40707ce`](https://github.com/clauderic/dnd-kit/commit/40707ce6f388957203d6df4ccbeef460450ffd7d), [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9), [`bf30718`](https://github.com/clauderic/dnd-kit/commit/bf30718bc22584a47053c14f5920e317ac45cd50), [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9), [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc), [`77e3d44`](https://github.com/clauderic/dnd-kit/commit/77e3d44502383d2f9a9f9af014b053619b3e37b3), [`5811986`](https://github.com/clauderic/dnd-kit/commit/5811986e7544a5e80039870a015e38df805eaad1), [`e302bd4`](https://github.com/clauderic/dnd-kit/commit/e302bd4488bdfb6735c97ac42c1f4a0b1e8bfdf9), [`188a450`](https://github.com/clauderic/dnd-kit/commit/188a4507b99d8e8fdaa50bd26deb826c86608e18), [`59ca82b`](https://github.com/clauderic/dnd-kit/commit/59ca82b9f228f34c7731ece87aef5d9633608b57), [`5f3c700`](https://github.com/clauderic/dnd-kit/commit/5f3c7009698d15936fd20f30f11ad3b23cd7886f), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc), [`e6e242c`](https://github.com/clauderic/dnd-kit/commit/e6e242cbc718ed687a26f5c622eeed4dbd6c2425), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc), [`10f6836`](https://github.com/clauderic/dnd-kit/commit/10f683631103b1d919f2fbca1177141b9369d2cf), [`c1b3b5a`](https://github.com/clauderic/dnd-kit/commit/c1b3b5a0be5759b707e22c4e1b1236aaa82773a2), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc)]:
-  - @dnd-kit/core@6.0.0-next-202242015231
-  - @dnd-kit/utilities@3.2.0-next-202242015231
+- Updated dependencies [[`4173087`](https://github.com/clauderic/dnd-kit/commit/417308704454c50f88ab305ab450a99bde5034b0), [`59ca82b`](https://github.com/clauderic/dnd-kit/commit/59ca82b9f228f34c7731ece87aef5d9633608b57), [`7161f70`](https://github.com/clauderic/dnd-kit/commit/7161f702c9fe06f8dafa6449d48b918070ca46fb), [`a52fba1`](https://github.com/clauderic/dnd-kit/commit/a52fba1ccff8a8f40e2cb8dcc15236cfd9e8fbec), [`40707ce`](https://github.com/clauderic/dnd-kit/commit/40707ce6f388957203d6df4ccbeef460450ffd7d), [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9), [`bf30718`](https://github.com/clauderic/dnd-kit/commit/bf30718bc22584a47053c14f5920e317ac45cd50), [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9), [`a41e5b8`](https://github.com/clauderic/dnd-kit/commit/a41e5b8eff84f0528ffc8b3455b94b95ab60a4a9), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc), [`77e3d44`](https://github.com/clauderic/dnd-kit/commit/77e3d44502383d2f9a9f9af014b053619b3e37b3), [`5811986`](https://github.com/clauderic/dnd-kit/commit/5811986e7544a5e80039870a015e38df805eaad1), [`e302bd4`](https://github.com/clauderic/dnd-kit/commit/e302bd4488bdfb6735c97ac42c1f4a0b1e8bfdf9), [`188a450`](https://github.com/clauderic/dnd-kit/commit/188a4507b99d8e8fdaa50bd26deb826c86608e18), [`59ca82b`](https://github.com/clauderic/dnd-kit/commit/59ca82b9f228f34c7731ece87aef5d9633608b57), [`5f3c700`](https://github.com/clauderic/dnd-kit/commit/5f3c7009698d15936fd20f30f11ad3b23cd7886f), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc), [`e6e242c`](https://github.com/clauderic/dnd-kit/commit/e6e242cbc718ed687a26f5c622eeed4dbd6c2425), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc), [`10f6836`](https://github.com/clauderic/dnd-kit/commit/10f683631103b1d919f2fbca1177141b9369d2cf), [`c1b3b5a`](https://github.com/clauderic/dnd-kit/commit/c1b3b5a0be5759b707e22c4e1b1236aaa82773a2), [`035021a`](https://github.com/clauderic/dnd-kit/commit/035021aac51161e2bf9715f087a6dd1b46647bfc)]:
+  - @dnd-kit/core@6.0.0-next-2022420172442
+  - @dnd-kit/utilities@3.2.0-next-2022420172442
 
@@ -86,0 +103,0 @@ ## 6.0.1

dist/components/SortableContext.d.ts

 import React from 'react';
 import { ClientRect, UniqueIdentifier } from '@dnd-kit/core';
-import type { SortingStrategy } from '../types';
+import type { Disabled, SortingStrategy } from '../types';
 export interface Props {
@@ -11,2 +11,3 @@ children: React.ReactNode;
     id?: string;
+    disabled?: boolean | Disabled;
 }
@@ -16,2 +17,3 @@ interface ContextDescriptor {
     containerId: string;
+    disabled: Disabled;
     disableTransforms: boolean;
@@ -25,3 +27,3 @@ items: UniqueIdentifier[];
 export declare const Context: React.Context<ContextDescriptor>;
-export declare function SortableContext({ children, id, items: userDefinedItems, strategy, }: Props): JSX.Element;
+export declare function SortableContext({ children, id, items: userDefinedItems, strategy, disabled: disabledProp, }: Props): JSX.Element;
 export {};

dist/hooks/useSortable.d.ts

 /// <reference types="react" />
 import { UseDraggableArguments, UseDroppableArguments } from '@dnd-kit/core';
-import type { SortableData, SortingStrategy } from '../types';
+import type { Disabled, SortableData, SortingStrategy } from '../types';
 import type { AnimateLayoutChanges, NewIndexGetter, SortableTransition } from './types';
-export interface Arguments extends UseDraggableArguments, Pick<UseDroppableArguments, 'resizeObserverConfig'> {
+export interface Arguments extends Omit<UseDraggableArguments, 'disabled'>, Pick<UseDroppableArguments, 'resizeObserverConfig'> {
     animateLayoutChanges?: AnimateLayoutChanges;
+    disabled?: boolean | Disabled;
     getNewIndex?: NewIndexGetter;
@@ -11,3 +12,3 @@ strategy?: SortingStrategy;
 }
-export declare function useSortable({ animateLayoutChanges, attributes: userDefinedAttributes, disabled, data: customData, getNewIndex, id, strategy: localStrategy, resizeObserverConfig, transition, }: Arguments): {
+export declare function useSortable({ animateLayoutChanges, attributes: userDefinedAttributes, disabled: localDisabled, data: customData, getNewIndex, id, strategy: localStrategy, resizeObserverConfig, transition, }: Arguments): {
     active: import("@dnd-kit/core").Active | null;
@@ -14,0 +15,0 @@ activeIndex: number;

dist/sortable.cjs.development.js

@@ -47,2 +47,31 @@ 'use strict';
 
+function itemsEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+
+  if (a.length !== b.length) {
+    return false;
+  }
+
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function normalizeDisabled(disabled) {
+  if (typeof disabled === 'boolean') {
+    return {
+      draggable: disabled,
+      droppable: disabled
+    };
+  }
+
+  return disabled;
+}
+
 // To-do: We should be calculating scale transformation
@@ -260,3 +289,7 @@ const defaultScale = {
   sortedRects: [],
-  strategy: rectSortingStrategy
+  strategy: rectSortingStrategy,
+  disabled: {
+    draggable: false,
+    droppable: false
+  }
 });
@@ -267,3 +300,4 @@ function SortableContext({
   items: userDefinedItems,
-  strategy = rectSortingStrategy
+  strategy = rectSortingStrategy,
+  disabled: disabledProp = false
 }) {
@@ -281,12 +315,14 @@ const {
   const items = React.useMemo(() => userDefinedItems.map(item => typeof item === 'string' ? item : item.id), [userDefinedItems]);
+  const isDragging = active != null;
   const activeIndex = active ? items.indexOf(active.id) : -1;
   const overIndex = over ? items.indexOf(over.id) : -1;
   const previousItemsRef = React.useRef(items);
-  const itemsHaveChanged = !isEqual(items, previousItemsRef.current);
+  const itemsHaveChanged = !itemsEqual(items, previousItemsRef.current);
   const disableTransforms = overIndex !== -1 && activeIndex === -1 || itemsHaveChanged;
+  const disabled = normalizeDisabled(disabledProp);
   utilities.useIsomorphicLayoutEffect(() => {
-    if (itemsHaveChanged && !measuringScheduled) {
+    if (itemsHaveChanged && isDragging && !measuringScheduled) {
       measureDroppableContainers(items);
     }
-  }, [itemsHaveChanged, items, measureDroppableContainers, measuringScheduled]);
+  }, [itemsHaveChanged, items, isDragging, measureDroppableContainers, measuringScheduled]);
   React.useEffect(() => {
@@ -298,2 +334,3 @@ previousItemsRef.current = items;
     containerId,
+    disabled,
     disableTransforms,
@@ -305,3 +342,4 @@ items,
     strategy
-  }), [activeIndex, containerId, disableTransforms, items, overIndex, droppableRects, useDragOverlay, strategy]);
+  }), // eslint-disable-next-line react-hooks/exhaustive-deps
+  [activeIndex, containerId, disabled.draggable, disabled.droppable, disableTransforms, items, overIndex, droppableRects, useDragOverlay, strategy]);
   return React__default.createElement(Context.Provider, {
@@ -312,15 +350,2 @@ value: contextValue
 
-function isEqual(arr1, arr2) {
-  if (arr1 === arr2) return true;
-  if (arr1.length !== arr2.length) return false;
-
-  for (let i = 0; i < arr1.length; i++) {
-    if (arr1[i] !== arr2[i]) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
 const defaultNewIndexGetter = ({
@@ -422,3 +447,3 @@ id,
   attributes: userDefinedAttributes,
-  disabled,
+  disabled: localDisabled,
   data: customData,
@@ -435,2 +460,3 @@ getNewIndex = defaultNewIndexGetter,
     activeIndex,
+    disabled: globalDisabled,
     disableTransforms,
@@ -442,2 +468,3 @@ sortedRects,
   } = React.useContext(Context);
+  const disabled = normalizeLocalDisabled(localDisabled, globalDisabled);
   const index = items.indexOf(id);
@@ -461,2 +488,3 @@ const data = React.useMemo(() => ({
     data,
+    disabled: disabled.droppable,
     resizeObserverConfig: {
@@ -484,3 +512,3 @@ updateMeasurementsFor: itemsAfterCurrentSortable,
     },
-    disabled
+    disabled: disabled.draggable
   });
@@ -596,2 +624,19 @@ const setNodeRef = utilities.useCombinedRefs(setDroppableNodeRef, setDraggableNodeRef);
 
+function normalizeLocalDisabled(localDisabled, globalDisabled) {
+  var _localDisabled$dragga, _localDisabled$droppa;
+
+  if (typeof localDisabled === 'boolean') {
+    return {
+      draggable: localDisabled,
+      // Backwards compatibility
+      droppable: false
+    };
+  }
+
+  return {
+    draggable: (_localDisabled$dragga = localDisabled == null ? void 0 : localDisabled.draggable) != null ? _localDisabled$dragga : globalDisabled.draggable,
+    droppable: (_localDisabled$droppa = localDisabled == null ? void 0 : localDisabled.droppable) != null ? _localDisabled$droppa : globalDisabled.droppable
+  };
+}
+
 function hasSortableData(entry) {
@@ -598,0 +643,0 @@ if (!entry) {

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

dist/sortable.esm.js

@@ -40,2 +40,31 @@ import React, { useMemo, useRef, useEffect, useState, useContext } from 'react';
 
+function itemsEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+
+  if (a.length !== b.length) {
+    return false;
+  }
+
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function normalizeDisabled(disabled) {
+  if (typeof disabled === 'boolean') {
+    return {
+      draggable: disabled,
+      droppable: disabled
+    };
+  }
+
+  return disabled;
+}
+
 // To-do: We should be calculating scale transformation
@@ -253,3 +282,7 @@ const defaultScale = {
   sortedRects: [],
-  strategy: rectSortingStrategy
+  strategy: rectSortingStrategy,
+  disabled: {
+    draggable: false,
+    droppable: false
+  }
 });
@@ -260,3 +293,4 @@ function SortableContext({
   items: userDefinedItems,
-  strategy = rectSortingStrategy
+  strategy = rectSortingStrategy,
+  disabled: disabledProp = false
 }) {
@@ -274,12 +308,14 @@ const {
   const items = useMemo(() => userDefinedItems.map(item => typeof item === 'string' ? item : item.id), [userDefinedItems]);
+  const isDragging = active != null;
   const activeIndex = active ? items.indexOf(active.id) : -1;
   const overIndex = over ? items.indexOf(over.id) : -1;
   const previousItemsRef = useRef(items);
-  const itemsHaveChanged = !isEqual(items, previousItemsRef.current);
+  const itemsHaveChanged = !itemsEqual(items, previousItemsRef.current);
   const disableTransforms = overIndex !== -1 && activeIndex === -1 || itemsHaveChanged;
+  const disabled = normalizeDisabled(disabledProp);
   useIsomorphicLayoutEffect(() => {
-    if (itemsHaveChanged && !measuringScheduled) {
+    if (itemsHaveChanged && isDragging && !measuringScheduled) {
       measureDroppableContainers(items);
     }
-  }, [itemsHaveChanged, items, measureDroppableContainers, measuringScheduled]);
+  }, [itemsHaveChanged, items, isDragging, measureDroppableContainers, measuringScheduled]);
   useEffect(() => {
@@ -291,2 +327,3 @@ previousItemsRef.current = items;
     containerId,
+    disabled,
     disableTransforms,
@@ -298,3 +335,4 @@ items,
     strategy
-  }), [activeIndex, containerId, disableTransforms, items, overIndex, droppableRects, useDragOverlay, strategy]);
+  }), // eslint-disable-next-line react-hooks/exhaustive-deps
+  [activeIndex, containerId, disabled.draggable, disabled.droppable, disableTransforms, items, overIndex, droppableRects, useDragOverlay, strategy]);
   return React.createElement(Context.Provider, {
@@ -305,15 +343,2 @@ value: contextValue
 
-function isEqual(arr1, arr2) {
-  if (arr1 === arr2) return true;
-  if (arr1.length !== arr2.length) return false;
-
-  for (let i = 0; i < arr1.length; i++) {
-    if (arr1[i] !== arr2[i]) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
 const defaultNewIndexGetter = ({
@@ -415,3 +440,3 @@ id,
   attributes: userDefinedAttributes,
-  disabled,
+  disabled: localDisabled,
   data: customData,
@@ -428,2 +453,3 @@ getNewIndex = defaultNewIndexGetter,
     activeIndex,
+    disabled: globalDisabled,
     disableTransforms,
@@ -435,2 +461,3 @@ sortedRects,
   } = useContext(Context);
+  const disabled = normalizeLocalDisabled(localDisabled, globalDisabled);
   const index = items.indexOf(id);
@@ -454,2 +481,3 @@ const data = useMemo(() => ({
     data,
+    disabled: disabled.droppable,
     resizeObserverConfig: {
@@ -477,3 +505,3 @@ updateMeasurementsFor: itemsAfterCurrentSortable,
     },
-    disabled
+    disabled: disabled.draggable
   });
@@ -589,2 +617,19 @@ const setNodeRef = useCombinedRefs(setDroppableNodeRef, setDraggableNodeRef);
 
+function normalizeLocalDisabled(localDisabled, globalDisabled) {
+  var _localDisabled$dragga, _localDisabled$droppa;
+
+  if (typeof localDisabled === 'boolean') {
+    return {
+      draggable: localDisabled,
+      // Backwards compatibility
+      droppable: false
+    };
+  }
+
+  return {
+    draggable: (_localDisabled$dragga = localDisabled == null ? void 0 : localDisabled.draggable) != null ? _localDisabled$dragga : globalDisabled.draggable,
+    droppable: (_localDisabled$droppa = localDisabled == null ? void 0 : localDisabled.droppable) != null ? _localDisabled$droppa : globalDisabled.droppable
+  };
+}
+
 function hasSortableData(entry) {
@@ -591,0 +636,0 @@ if (!entry) {

dist/types/index.d.ts

@@ -0,3 +1,4 @@
+export type { Disabled } from './disabled';
 export type { SortableData } from './data';
 export type { SortingStrategy } from './strategies';
 export { hasSortableData } from './type-guard';

dist/utilities/index.d.ts

@@ -5,1 +5,3 @@ export { arrayMove } from './arrayMove';
 export { isValidIndex } from './isValidIndex';
+export { itemsEqual } from './itemsEqual';
+export { normalizeDisabled } from './normalizeDisabled';

package.json

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

230591

increased by5.65%

Number of package files

40

increased by8.11%

Lines of code

1574

increased by6.35%

Dependency changes

• Updated@dnd-kit/utilities@^3.2.0-next-2022420172442