A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

Patch Changes

• #948 da7c60d Thanks @Ayc0! - Upgrade to TypeScript to 4.8

Patch Changes

• #823 b065c37 Thanks @DaniGuardiola! - Add missing peer dependency to @dnd-kit/modifiers

• Updated dependencies [da7c60d]:

  • @dnd-kit/[email protected]
  • @dnd-kit/[email protected]

Patch Changes

• #948 da7c60d Thanks @Ayc0! - Upgrade to TypeScript to 4.8

• Updated dependencies [da7c60d]:

  • @dnd-kit/[email protected]

Patch Changes

• #792 b6970e7 Thanks @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.

• Updated dependencies [eaa6e12]:

  • @dnd-kit/[email protected]

Patch Changes

• 4a5132d Thanks @clauderic! - Removed a stray console.log in the KeyboardSensor

Patch Changes

• #797 eaa6e12 Thanks @clauderic! - Fixed a regression in the KeyboardSensor scrolling logic.

Patch Changes

• #776 3978c43 Thanks @clauderic! - The ARIA live region element used for screen reader announcements is now positioned using position: fixed instead of position: absolute. As of @dnd-kit/core^6.0.0, the live region element is no longer portaled by default into the document.body. This change was introduced in order to fix issues with portaled live regions. However, this change can introduce visual regressions when using absolutely positioned elements, since the live region element is constrained to the stacking and position context of its closest positioned ancestor. Using fixed position ensures the element does not introduce visual regressions.

Patch Changes

• #772 e97cb1f Thanks @clauderic! - The ARIA live region element used for screen reader announcements is now positioned using position: fixed instead of position: absolute. As of @dnd-kit/core^6.0.0, the live region element is no longer portaled by default into the document.body. This change was introduced in order to fix issues with portaled live regions. However, this change can introduce visual regressions when using absolutely positioned elements, since the live region element is constrained to the stacking and position context of its closest positioned ancestor. Using fixed position ensures the element does not introduce visual regressions.

Patch Changes

• #769 8e3599f Thanks @clauderic! - Fixed an issue with the containerNodeRect that is exposed to modifiers having stale properties (top, left, etc.) when its scrollable ancestors were scrolled.

• #769 53cb962 Thanks @clauderic! - Fixed a regression with scrollable ancestors detection.

  The scrollable ancestors should be determined by the active node or the over node exclusively. The draggingNode variable shouldn't be used to detect scrollable ancestors since it can be the drag overlay node, and the drag overlay node doesn't have any scrollable ancestors because it is a fixed position element.

Minor Changes

• #748 59ca82b Thanks @clauderic! - Introduced the findFirstFocusableNode utility function that returns the first focusable node within a given HTMLElement, or the element itself if it is focusable.

• #733 035021a Thanks @clauderic! - Introduced the useEvent hook based on implementation breakdown in the RFC. In the future, this hook will be used as a polyfill if the native React hook is unavailble.

Major Changes

• #755 33e6dd2 Thanks @clauderic! - The UniqueIdentifier type has been updated to now accept either string or number identifiers. As a result, the id property of useDraggable, useDroppable and useSortable and the items prop of <SortableContext> now all accept either string or number identifiers.

  Migration steps

  For consumers that are using TypeScript, import the UniqueIdentifier type to have strongly typed local state:

  + import type {UniqueIdentifier} from '@dnd-kit/core';
  
  function MyComponent() {
  -  const [items, setItems] = useState(['A', 'B', 'C']);
  +  const [items, setItems] = useState<UniqueIdentifier>(['A', 'B', 'C']);
  }
  

  Alternatively, consumers can cast or convert the id property to a string when reading the id property of interfaces such as Active, Over, DroppableContainer and DraggableNode.

  The draggableNodes object has also been converted to a map. Consumers that were reading from the draggableNodes property that is available on the public context of <DndContext> should follow these migration steps:

  - draggableNodes[someId];
  + draggableNodes.get(someId);
  

• #660 30bbd12 Thanks @clauderic! - Changes to the default sortableKeyboardCoordinates KeyboardSensor coordinate getter.

  Better handling of variable sizes

  The default sortableKeyboardCoordinates function now has better handling of lists that have items of variable sizes. We recommend that consumers re-order lists onDragOver instead of onDragEnd when sorting lists of variable sizes via the keyboard for optimal compatibility.

  Better handling of overlapping droppables

  The default sortableKeyboardCoordinates function that is exported from the @dnd-kit/sortable package has been updated to better handle cases where the collision rectangle is overlapping droppable rectangles. For example, for down arrow key, the default function had logic that would only consider collisions against droppables that were below the bottom edge of the collision rect. This was problematic when the collision rect was overlapping droppable rects, because it meant that it's bottom edge was below the top edge of the droppable, and that resulted in that droppable being skipped.

  - collisionRect.bottom > droppableRect.top
  + collisionRect.top > droppableRect.top
  

  This change should be backwards compatible for most consumers, but may introduce regressions in some use-cases, especially for consumers that may have copied the multiple containers examples. There is now a custom sortable keyboard coordinate getter optimized for multiple containers that you can refer to.

Minor Changes

• #748 59ca82b Thanks @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.

  Consumers of useDraggable and useSortable may now optionally set the activator node ref on the element that receives listeners:

  import {useDraggable} from '@dnd-kit/core';
  
  function Draggable(props) {
    const {
      listeners,
      setNodeRef,
  +   setActivatorNodeRef,
    } = useDraggable({id: props.id});
  
    return (
      <div ref={setNodeRef}>
        Draggable element
        <button
          {...listeners}
  +       ref={setActivatorNodeRef}
        >
          :: Drag Handle
        </button>
      </div>
    )
  }
  

  It's common for the activator element (the element that receives the sensor listeners) to differ from the draggable node. When this happens, @dnd-kit has no reliable way to get a reference to the activator node after dragging ends, as the original event.target that instantiated the sensor may no longer be mounted in the DOM or associated with the draggable node that was previously active.

  Automatically restoring focus

  Focus management is now automatically handled by @dnd-kit. When the activator event is a Keyboard event, @dnd-kit will now attempt to automatically restore focus back to the first focusable node of the activator node or draggable node.

  If no activator node is specified via the setActivatorNodeRef setter function of useDraggble and useSortable, @dnd-kit will automatically restore focus on the first focusable node of the draggable node set via the setNodeRef setter function of useDraggable and useSortable.

  If you were previously managing focus manually and would like to opt-out of automatic focus management, use the newly introduced restoreFocus property of the accessibility prop of <DndContext>:

  <DndContext
    accessibility={{
  +   restoreFocus: false
    }}
  

• #672 10f6836 Thanks @clauderic! - SortableContext now always requests measuring of droppable containers when its items prop changes, regardless of whether or not dragging is in progress. Measuring will occur if the measuring configuration allows for it.

• #754 224201a Thanks @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:

  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

• #757 e6d544f Thanks @clauderic! - The wasDragging property of animateLayoutChanges now remains true for longer than a single re-render. Before this change, it was possible for the component where useSortable is used to re-render before @dnd-kit is ready to perform the layout animation, causing the animation to be skipped entirely.

• #749 188a450 Thanks @clauderic! - Faster (and safer) equal implementation.

• Updated dependencies [4173087, 59ca82b, 7161f70, a52fba1, 40707ce, a41e5b8, bf30718, a41e5b8, a41e5b8, 035021a, 77e3d44, 5811986, e302bd4, 188a450, 59ca82b, 750d726, 5f3c700, 035021a, e6e242c, 035021a, 33e6dd2, 10f6836, c1b3b5a, 035021a]:

  • @dnd-kit/[email protected]
  • @dnd-kit/[email protected]

Patch Changes

• Updated dependencies [4173087, 59ca82b, 7161f70, a52fba1, 40707ce, a41e5b8, bf30718, a41e5b8, a41e5b8, 035021a, 77e3d44, 5811986, e302bd4, 188a450, 59ca82b, 750d726, 5f3c700, 035021a, e6e242c, 035021a, 33e6dd2, 10f6836, c1b3b5a, 035021a]:
  • @dnd-kit/[email protected]
  • @dnd-kit/[email protected]

Patch Changes

• #759 e5b9d38 Thanks @clauderic! - Fixed a regression with the default drop animation of <DragOverlay> for consumers using React 18.

Major Changes

• #746 4173087 Thanks @clauderic! - Accessibility related changes.

  Regrouping accessibility-related props

  Accessibility-related props have been regrouped under the accessibility prop of <DndContext>:

  <DndContext
  - announcements={customAnnouncements}
  - screenReaderInstructions={customScreenReaderInstructions}
  + accessibility={{
  +  announcements: customAnnouncements,
  +  screenReaderInstructions: customScreenReaderInstructions,
  + }}
  

  This is a breaking change that will allow easier addition of new accessibility-related features without overloading the props namespace of <DndContext>.

  Arguments object for announcements

  The arguments passed to announcement callbacks have changed. They now receive an object that contains the active and over properties that match the signature of those passed to the DragEvent handlers (onDragStart, onDragMove, etc.). This change allows consumers to read the data property of the active and over node to customize the announcements based on the data.

  Example migration steps:

  export const announcements: Announcements = {
  -  onDragStart(id) {
  +  onDragStart({active}) {
  -    return `Picked up draggable item ${id}.`;
  +    return `Picked up draggable item ${active.id}.`;
    },
  -  onDragOver(id, overId) {
  +  onDragOver({active, over}) {
  -    if (overId) {
  +    if (over) {
  -      return `Draggable item ${id} was moved over droppable area ${overId}.`;
  +      return `Draggable item ${active.id} was moved over droppable area ${over.id}.`;
      }
  
  -    return `Draggable item ${id} is no longer over a droppable area.`;
  +    return `Draggable item ${active.id} is no longer over a droppable area.`;
    },
  };
  

  Accessibility-related DOM nodes are no longer portaled by default

  The DOM nodes for the screen reader instructions and announcements are no longer portaled into the document.body element by default.

  This change is motivated by the fact that screen readers do not always announce ARIA live regions that are rendered on the document.body. Common examples of this include when rendering a <DndContext> within a <dialog> element or an element that has role="dialog", only ARIA live regions rendered within the dialog will be announced.

  Consumers can now opt to render announcements in the portal container of their choice using the container property of the accessibility prop:

  <DndContext
  + accessibility={{
  +  container: document.body,
  + }}
  

• #733 035021a Thanks @clauderic! - The <DragOverlay> component's drop animation has been refactored, which fixes a number of bugs with the existing implementation and introduces new functionality.

  What's new?

  Scrolling the draggable node into view if needed

  The drop animation now ensures that the the draggable node that we are animating to is in the viewport before performing the drop animation and scrolls it into view if needed.

  Changes to the dropAnimation prop

  The dropAnimation prop of <DragOverlay> now accepts either a configuration object or a custom drop animation function.

  The configuration object adheres to the following shape:

  interface DropAnimationOptions {
    duration?: number;
    easing?: string;
    keyframes?: DropAnimationKeyframeResolver;
    sideEffects?: DropAnimationSideEffects;
  }
  

  The default drop animation options are:

  const defaultDropAnimationConfiguration: DropAnimationOptions = {
    duration: 250,
    easing: 'ease',
    keyframes: defaultDropAnimationKeyframes,
    sideEffects: defaultDropAnimationSideEffects({
      styles: {
        active: {
          opacity: '0',
        },
      },
    }),
  };
  

  The keyframes option allows consumers to override the keyframes of the drop animation. For example, here is how you would add a fade out transition to the drop animation using keyframes:

  import {CSS} from '@dnd-kit/utilities';
  
  const customDropAnimation = {
    keyframes({transform}) {
      return [
        {opacity: 1, transform: CSS.Transform.toString(transform.initial)},
        {opacity: 0, transform: CSS.Transform.toString(transform.final)},
      ];
    },
  };
  

  The dragSourceOpacity option has been deprecated in favour of letting consumers define arbitrary side effects that should run before the animation starts. Side effects may return a cleanup function that should run when the drop animation has completed.

  type CleanupFunction = () => void;
  
  export type DropAnimationSideEffects = (
    parameters: DropAnimationSideEffectsParameters
  ) => CleanupFunction | void;
  

  Drop animation side effects are a powerful abstraction that provide a lot of flexibility. The defaultDropAnimationSideEffects function is exported by @dnd-kit/core and aims to facilitate the types of side-effects we anticipate most consumers will want to use out of the box:

  interface DefaultDropAnimationSideEffectsOptions {
    // Apply a className on the active draggable or drag overlay node during the drop animation
    className?: {
      active?: string;
      dragOverlay?: string;
    };
    // Apply temporary styles to the active draggable node or drag overlay during the drop animation
    styles?: {
      active?: Styles;
      dragOverlay?: Styles;
    };
  }
  

  For advanced side-effects, consumers may define a custom sideEffects function that may optionally return a cleanup function that will be executed when the drop animation completes:

  const customDropAnimation = {
    sideEffects({active}) {
      active.node.classList.add('dropAnimationInProgress');
      active.node.animate([{opacity: 0}, {opacity: 1}], {
        easing: 'ease-in',
        duration: 250,
      });
  
      return () => {
        // Clean up when the drop animation is complete
        active.node.classList.remove('dropAnimationInProgress');
      };
    },
  };
  

  For even more advanced use-cases, consumers may also provide a function to the dropAnimation prop, which adheres to the following shape:

  interface DropAnimationFunctionArguments {
    active: {
      id: UniqueIdentifier;
      data: DataRef;
      node: HTMLElement;
      rect: ClientRect;
    };
    draggableNodes: DraggableNodes;
    dragOverlay: {
      node: HTMLElement;
      rect: ClientRect;
    };
    droppableContainers: DroppableContainers;
    measuringConfiguration: DeepRequired<MeasuringConfiguration>;
    transform: Transform;
  }
  
  type DropAnimationFunction = (
    args: DropAnimationFunctionArguments
  ) => Promise<void> | void;
  

  Bug fixes

  • The <DragOverlay> now respects the measuringConfiguration specified for the dragOverlay and draggable properties when measuring the rects to animate to and from.
  • The <DragOverlay> component now supports rendering children while performing the drop animation. Previously, the drag overlay would be in a broken state when trying to pick up an item while a drop animation was in progress.

  Migration steps

  For consumers that were relying on the dragSourceOpacity property in their dropAnimation configuration:

  + import {defaultDropAnimationSideEffects} from '@dnd-kit/core';
  
  const dropAnimation = {
  - dragSourceOpacity: 0.5,
  + sideEffects: defaultDropAnimationSideEffects({
  +   styles : {
  +     active: {
  +       opacity: '0.5',
  +     },
  +   },
  +  ),
  };
  

• #745 5f3c700 Thanks @clauderic! - The keyboard sensor now keeps track of the initial coordinates of the collision rect to provide a translate delta when move events are dispatched.

  This is a breaking change that may affect consumers that had created custom keyboard coordinate getters.

  Previously the keyboard sensor would measure the initial rect of the active node and store its top and left properties as its initial coordinates it would then compare all subsequent move coordinates to calculate the delta.

  This approach suffered from the following issues:

  • It didn't respect the measuring configuration defined on the <DndContext> for the draggable node
  • Some consumers re-render the active node after dragging begins, which would lead to stale measurements
  • An error had to be thrown if there was no active node during the activation phase of the keyboard sensor. This shouldn't be a concern of the keyboard sensor.
  • The currentCoordinates passed to the coordinate getter were often stale and not an accurate representation of the current position of the collision rect, which can be affected by a number of different variables, such as modifiers.

• #755 33e6dd2 Thanks @clauderic! - The UniqueIdentifier type has been updated to now accept either string or number identifiers. As a result, the id property of useDraggable, useDroppable and useSortable and the items prop of <SortableContext> now all accept either string or number identifiers.

  Migration steps

  For consumers that are using TypeScript, import the UniqueIdentifier type to have strongly typed local state:

  + import type {UniqueIdentifier} from '@dnd-kit/core';
  
  function MyComponent() {
  -  const [items, setItems] = useState(['A', 'B', 'C']);
  +  const [items, setItems] = useState<UniqueIdentifier>(['A', 'B', 'C']);
  }
  

  Alternatively, consumers can cast or convert the id property to a string when reading the id property of interfaces such as Active, Over, DroppableContainer and DraggableNode.

  The draggableNodes object has also been converted to a map. Consumers that were reading from the draggableNodes property that is available on the public context of <DndContext> should follow these migration steps:

  - draggableNodes[someId];
  + draggableNodes.get(someId);
  

Minor Changes

• #748 59ca82b Thanks @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.

  Consumers of useDraggable and useSortable may now optionally set the activator node ref on the element that receives listeners:

  import {useDraggable} from '@dnd-kit/core';
  
  function Draggable(props) {
    const {
      listeners,
      setNodeRef,
  +   setActivatorNodeRef,
    } = useDraggable({id: props.id});
  
    return (
      <div ref={setNodeRef}>
        Draggable element
        <button
          {...listeners}
  +       ref={setActivatorNodeRef}
        >
          :: Drag Handle
        </button>
      </div>
    )
  }
  

  It's common for the activator element (the element that receives the sensor listeners) to differ from the draggable node. When this happens, @dnd-kit has no reliable way to get a reference to the activator node after dragging ends, as the original event.target that instantiated the sensor may no longer be mounted in the DOM or associated with the draggable node that was previously active.

  Automatically restoring focus

  Focus management is now automatically handled by @dnd-kit. When the activator event is a Keyboard event, @dnd-kit will now attempt to automatically restore focus back to the first focusable node of the activator node or draggable node.

  If no activator node is specified via the setActivatorNodeRef setter function of useDraggble and useSortable, @dnd-kit will automatically restore focus on the first focusable node of the draggable node set via the setNodeRef setter function of useDraggable and useSortable.

  If you were previously managing focus manually and would like to opt-out of automatic focus management, use the newly introduced restoreFocus property of the accessibility prop of <DndContext>:

  <DndContext
    accessibility={{
  +   restoreFocus: false
    }}
  

• #751 a52fba1 Thanks @clauderic! - Added the aria-disabled attribute to the attribtues object returned by useDraggable and useSortable. The value of the aria-disabled attribute is populated based on whether or not the disabled argument is passed to useDraggble or useSortable.

• #741 40707ce Thanks @clauderic! - The auto scroller now keeps track of the drag direction to infer scroll intent. By default, auto-scrolling will now be disabled for a given direction if dragging in that direction hasn't occurred yet. This prevents accidental auto-scrolling when picking up a draggable item that is near the scroll boundary threshold.

• #660 a41e5b8 Thanks @clauderic! - Fixed a bug with the delta property returned in onDragMove, onDragOver, onDragEnd and onDragCancel. The delta property represents the transform delta since dragging was initiated, along with the scroll delta. However, due to an oversight, the delta property was actually returning the transform delta and the current scroll offsets rather than the scroll delta.

  This same change has been made to the scrollAdjustedTranslate property that is exposed to sensors.

• #750 bf30718 Thanks @clauderic! - The useDndMonitor() hook has been refactored to be synchronously invoked at the same time as the events dispatched by <DndContext> (such as onDragStart, onDragOver, onDragEnd).

  The new refactor uses the subscribe/notify pattern and no longer causes re-renders in consuming components of useDndMonitor() when events are dispatched.

• #660 a41e5b8 Thanks @clauderic! - The activeNodeRect and containerNodeRect are now observed by a ResizeObserver in case they resize while dragging.

• #660 a41e5b8 Thanks @clauderic! - Improved useDraggable usage without <DragOverlay>:

  • The active draggable now scrolls with the page even if there is no <DragOverlay> used.
  • Fixed issues when re-ordering the active draggable node in the DOM while dragging.

• #660 77e3d44 Thanks @clauderic! - Fixed an issue with useDroppable hook needlessly dispatching SetDroppableDisabled actions even if the disabled property had not changed since registering the droppable.

• #749 188a450 Thanks @clauderic! - The onDragStart, onDragMove, onDragOver, onDragEnd and onDragCancel events of <DndContext> and useDndMonitor now expose the activatorEvent event that instantiated the activated sensor.

• #733 035021a Thanks @clauderic! - The KeyboardSensor now scrolls the focused activator draggable node into view if it is not within the viewport.

• #733 035021a Thanks @clauderic! - By default, @dnd-kit now attempts to compensate for layout shifts that happen right after the onDragStart event is dispatched by scrolling the first scrollable ancestor of the active draggable node.

  The autoScroll prop of <DndContext> now optionally accepts a layoutShiftCompensation property to control this new behavior:

  interface AutoScrollOptions {
    acceleration?: number;
    activator?: AutoScrollActivator;
    canScroll?: CanScroll;
    enabled?: boolean;
    interval?: number;
  + layoutShiftCompensation?: boolean | {x: boolean, y: boolean};
    order?: TraversalOrder;
    threshold?: {
      x: number;
      y: number;
    };
  }
  

  To enable/disable layout shift scroll compensation for a single scroll axis, pass in the following autoscroll configuration to <DndContext>:

  <DndContext
    autoScroll={{layoutShiftCompensation: {x: false, y: true}}}
  >
  

  To completely disable layout shift scroll compensation, pass in the following autoscroll configuration to <DndContext>:

  <DndContext
    autoScroll={{layoutShiftCompensation: false}}
  >
  

• #672 10f6836 Thanks @clauderic! - The measureDroppableContainers method now properly respects the MeasuringStrategy defined on <DndContext /> and will not measure containers while measuring is disabled.

• #656 c1b3b5a Thanks @clauderic! - Fixed an issue with collision detection using stale rects. The droppableRects property has been added to the CollisionDetection interface.

  All built-in collision detection algorithms have been updated to get the rect for a given droppable container from droppableRects rather than from the rect.current ref:

  - const rect = droppableContainers.get(id).rect.current;
  + const rect = droppableRects.get(id);
  

  The rect.current ref stored on DroppableContainers can be stale if measuring is scheduled but has not completed yet. Collision detection algorithms should use the droppableRects map instead to get the latest, most up-to-date measurement of a droppable container in order to avoid computing collisions against stale rects.

  This is not a breaking change. However, if you've forked any of the built-in collision detection algorithms or you've authored custom ones, we highly recommend you update your use-cases to avoid possibly computing collisions against stale rects.

Patch Changes

• #742 7161f70 Thanks @clauderic! - Fallback to initial rect measured for the active draggable node if it unmounts during initialization (after onDragStart is dispatched).

• #749 5811986 Thanks @clauderic! - The Data and DataRef types are now exported by @dnd-kit/core.

• #699 e302bd4 Thanks @JuAn-Kang! - Export DragOverlayProps for consumers.

• 750d726 Thanks @clauderic! - Fixed a bug in the KeyboardSensor where it would not move the draggable on the horizontal axis if it could fully scroll to the new vertical coordinates, and would not move the draggable on the vertical axis if it could fully scroll to the new horizontal coordinates.

• #660 e6e242c Thanks @clauderic! - The KeyboardSensor was updated to use scrollTo instead of scrollBy when it is able to fully scroll to the new coordinates returned by the coordinate getter function. This resolves issues that can happen with scrollBy when called in rapid succession.

• Updated dependencies [59ca82b, 035021a]:

  • @dnd-kit/[email protected]

Patch Changes

• #650 2439aae Thanks @clauderic! - - Fixed React warning in development when unmounting a component that uses the useDraggable hook by ensuring that the ResizeObserver is disconnected in a cleanup effect.

Patch Changes

• #642 15a6017 Thanks @vosatom! - Fixed an issue that affected SortableContext performance. The sortedRects property of the SortableContext provider were being recomputed whenever coordinates changed rather than only when the order of the items changed.

• Updated dependencies [b3b185d]:

  • @dnd-kit/[email protected]

Patch Changes

• #646 b3b185d Thanks @lukesmurray! - Export DraggableAttributes interface for consumers to use when interfacing with useDraggable hook.

Minor Changes

• #518 6310227 Thanks @clauderic! - Major internal refactor of measuring and collision detection.

  Summary of changes

  Previously, all collision detection algorithms were relative to the top and left points of the document. While this approach worked in most situations, it broke down in a number of different use-cases, such as fixed position droppable containers and trying to drag between containers that had different scroll positions.

  This new approach changes the frame of comparison to be relative to the viewport. This is a major breaking change, and will need to be released under a new major version bump.

  Breaking changes:

  • By default, @dnd-kit now ignores only the transforms applied to the draggable / droppable node itself, but considers all the transforms applied to its ancestors. This should provide the right balance of flexibility for most consumers.
    • Transforms applied to the droppable and draggable nodes are ignored by default, because the recommended approach for moving items on the screen is to use the transform property, which can interfere with the calculation of collisions.
    • Consumers can choose an alternate approach that does consider transforms for specific use-cases if needed by configuring the measuring prop of . Refer to the example.
  • Reduced the number of concepts related to measuring from ViewRect, LayoutRect to just a single concept of ClientRect.
    • The ClientRect interface no longer holds the offsetTop and offsetLeft properties. For most use-cases, you can replace offsetTop with top and offsetLeft with left.
    • Replaced the following exports from the @dnd-kit/core package with getClientRect:
      • getBoundingClientRect
      • getViewRect
      • getLayoutRect
      • getViewportLayoutRect
  • Removed translatedRect from the SensorContext interface. Replace usage with collisionRect.
  • Removed activeNodeClientRect on the DndContext interface. Replace with activeNodeRect.

• 528c67e Thanks @clauderic! - Introduced the useLatestValue hook, which returns a ref that holds the latest value of a given argument. Optionally, the second argument can be used to customize the dependencies passed to the effect.

Patch Changes

• #561 02edd26 Thanks @clauderic! - - The useNodeRef hook's onChange argument now receives both the current node and the previous node that were attached to the ref.
  • The onChange argument is only called if the previous node differs from the current node

Major Changes

• #518 6310227 Thanks @clauderic! - Major internal refactor of measuring and collision detection.

  Summary of changes

  Previously, all collision detection algorithms were relative to the top and left points of the document. While this approach worked in most situations, it broke down in a number of different use-cases, such as fixed position droppable containers and trying to drag between containers that had different scroll positions.

  This new approach changes the frame of comparison to be relative to the viewport. This is a major breaking change, and will need to be released under a new major version bump.

  Breaking changes:

  • By default, @dnd-kit now ignores only the transforms applied to the draggable / droppable node itself, but considers all the transforms applied to its ancestors. This should provide the right balance of flexibility for most consumers.
    • Transforms applied to the droppable and draggable nodes are ignored by default, because the recommended approach for moving items on the screen is to use the transform property, which can interfere with the calculation of collisions.
    • Consumers can choose an alternate approach that does consider transforms for specific use-cases if needed by configuring the measuring prop of . Refer to the example.
  • Reduced the number of concepts related to measuring from ViewRect, LayoutRect to just a single concept of ClientRect.
    • The ClientRect interface no longer holds the offsetTop and offsetLeft properties. For most use-cases, you can replace offsetTop with top and offsetLeft with left.
    • Replaced the following exports from the @dnd-kit/core package with getClientRect:
      • getBoundingClientRect
      • getViewRect
      • getLayoutRect
      • getViewportLayoutRect
  • Removed translatedRect from the SensorContext interface. Replace usage with collisionRect.
  • Removed activeNodeClientRect on the DndContext interface. Replace with activeNodeRect.

• #569 e7ac3d4 Thanks @clauderic! - Separated context into public and internal context providers. Certain properties that used to be available on the public DndContextDescriptor interface have been moved to the internal context provider and are no longer exposed to consumers:

  interface DndContextDescriptor {
  -  dispatch: React.Dispatch<Actions>;
  -  activators: SyntheticListeners;
  -  ariaDescribedById: {
  -    draggable: UniqueIdentifier;
  -  };
  }
  

  Having two distinct context providers will allow to keep certain internals such as dispatch hidden from consumers.

  It also serves as an optimization until context selectors are implemented in React, properties that change often, such as the droppable containers and droppable rects, the transform value and array of collisions should be stored on a different context provider to limit un-necessary re-renders in useDraggable, useDroppable and useSortable.

  The <InternalContext.Provider> is also reset to its default values within <DragOverlay>. This paves the way towards being able to seamlessly use components that use hooks such as useDraggable and useDroppable as children of <DragOverlay> without causing interference or namespace collisions.

  Consumers can still make calls to useDndContext() to get the active or over properties if they wish to re-render the component rendered within DragOverlay in response to user interaction, since those use the PublicContext

Minor Changes

• #558 f3ad20d Thanks @clauderic! - Refactor of the CollisionDetection interface to return an array of Collisions:

  +export interface Collision {
  +  id: UniqueIdentifier;
  +  data?: Record<string, any>;
  +}
  
  export type CollisionDetection = (args: {
    active: Active;
    collisionRect: ClientRect;
    droppableContainers: DroppableContainer[];
    pointerCoordinates: Coordinates | null;
  -}) => UniqueIdentifier;
  +}) => Collision[];
  

  This is a breaking change that requires all collision detection strategies to be updated to return an array of Collision rather than a single UniqueIdentifier

  The over property remains a single UniqueIdentifier, and is set to the first item in returned in the collisions array.

  Consumers can also access the collisions property which can be used to implement use-cases such as combining droppables in user-land.

  The onDragMove, onDragOver and onDragEnd callbacks are also updated to receive the collisions array property.

  Built-in collision detections such as rectIntersection, closestCenter, closestCorners and pointerWithin adhere to the CollisionDescriptor interface, which extends the Collision interface:

  export interface CollisionDescriptor extends Collision {
    data: {
      droppableContainer: DroppableContainer;
      value: number;
      [key: string]: any;
    };
  }
  

  Consumers can also access the array of collisions in components wrapped by <DndContext> via the useDndContext() hook:

  import {useDndContext} from '@dnd-kit/core';
  
  function MyComponent() {
    const {collisions} = useDndContext();
  }
  

• #561 02edd26 Thanks @clauderic! - Droppable containers now observe the node they are attached to via setNodeRef using ResizeObserver while dragging.

  This behaviour can be configured using the newly introduced resizeObserverConfig property.

  interface ResizeObserverConfig {
    /** Whether the ResizeObserver should be disabled entirely */
    disabled?: boolean;
    /** Resize events may affect the layout and position of other droppable containers.
     * Specify an array of `UniqueIdentifier` of droppable containers that should also be re-measured
     * when this droppable container resizes. Specifying an empty array re-measures all droppable containers.
     */
    updateMeasurementsFor?: UniqueIdentifier[];
    /** Represents the debounce timeout between when resize events are observed and when elements are re-measured */
    timeout?: number;
  }
  

  By default, only the current droppable is scheduled to be re-measured when a resize event is observed. However, this may not be suitable for all use-cases. When an element resizes, it can affect the layout and position of other elements, such that it may be necessary to re-measure other droppable nodes in response to that single resize event. The recomputeIds property can be used to specify which droppable ids should be re-measured in response to resize events being observed.

  For example, the useSortable preset re-computes the measurements of all sortable elements after the element that resizes, so long as they are within the same SortableContext as the element that resizes, since it's highly likely that their layout will also shift.

  Specifying an empty array for recomputeIds forces all droppable containers to be re-measured.

  For consumers that were relyings on the internals of DndContext using useDndContext(), the willRecomputeLayouts property has been renamed to measuringScheduled, and the recomputeLayouts method has been renamed to measureDroppableContainers, and now optionally accepts an array of droppable UniqueIdentifier that should be scheduled to be re-measured.

• #570 1ade2f3 Thanks @clauderic! - Use transition for the active draggable node when keyboard sorting without a <DragOverlay />.

Patch Changes

• #566 d315df0 Thanks @clauderic! - Fixed a bug where sortable item position was not updated when quickly dragging different sortable items.

• Updated dependencies [f3ad20d, 02edd26, c6c67cb, 6310227, e7ac3d4, 528c67e, 02edd26]:

  • @dnd-kit/[email protected]
  • @dnd-kit/[email protected]

Minor Changes

• #567 cd3adf3 Thanks @clauderic! - Update modifiers to use draggingNodeRect instead of activeNodeRect. Modifiers should be based on the rect of the node being dragged, whether it is the draggable node or drag overlay node.

• #518 6310227 Thanks @clauderic! - Major internal refactor of measuring and collision detection.

  Summary of changes

  Previously, all collision detection algorithms were relative to the top and left points of the document. While this approach worked in most situations, it broke down in a number of different use-cases, such as fixed position droppable containers and trying to drag between containers that had different scroll positions.

  This new approach changes the frame of comparison to be relative to the viewport. This is a major breaking change, and will need to be released under a new major version bump.

  Breaking changes:

  • By default, @dnd-kit now ignores only the transforms applied to the draggable / droppable node itself, but considers all the transforms applied to its ancestors. This should provide the right balance of flexibility for most consumers.
    • Transforms applied to the droppable and draggable nodes are ignored by default, because the recommended approach for moving items on the screen is to use the transform property, which can interfere with the calculation of collisions.
    • Consumers can choose an alternate approach that does consider transforms for specific use-cases if needed by configuring the measuring prop of . Refer to the example.
  • Reduced the number of concepts related to measuring from ViewRect, LayoutRect to just a single concept of ClientRect.
    • The ClientRect interface no longer holds the offsetTop and offsetLeft properties. For most use-cases, you can replace offsetTop with top and offsetLeft with left.
    • Replaced the following exports from the @dnd-kit/core package with getClientRect:
      • getBoundingClientRect
      • getViewRect
      • getLayoutRect
      • getViewportLayoutRect
  • Removed translatedRect from the SensorContext interface. Replace usage with collisionRect.
  • Removed activeNodeClientRect on the DndContext interface. Replace with activeNodeRect.

Patch Changes

• Updated dependencies [f3ad20d, 02edd26, c6c67cb, 6310227, e7ac3d4, 528c67e, 02edd26]:
  • @dnd-kit/[email protected]
  • @dnd-kit/[email protected]

Patch Changes

• #573 cee1d88 Thanks @clauderic! - Only use ResizeObserver in useDroppable and <DragOverlay> if it is available in the execution environment.

Major Changes

• #558 f3ad20d Thanks @clauderic! - Refactor of the CollisionDetection interface to return an array of Collisions:

  +export interface Collision {
  +  id: UniqueIdentifier;
  +  data?: Record<string, any>;
  +}
  
  export type CollisionDetection = (args: {
    active: Active;
    collisionRect: ClientRect;
    droppableContainers: DroppableContainer[];
    pointerCoordinates: Coordinates | null;
  -}) => UniqueIdentifier;
  +}) => Collision[];
  

  This is a breaking change that requires all collision detection strategies to be updated to return an array of Collision rather than a single UniqueIdentifier

  The over property remains a single UniqueIdentifier, and is set to the first item in returned in the collisions array.

  Consumers can also access the collisions property which can be used to implement use-cases such as combining droppables in user-land.

  The onDragMove, onDragOver and onDragEnd callbacks are also updated to receive the collisions array property.

  Built-in collision detections such as rectIntersection, closestCenter, closestCorners and pointerWithin adhere to the CollisionDescriptor interface, which extends the Collision interface:

  export interface CollisionDescriptor extends Collision {
    data: {
      droppableContainer: DroppableContainer;
      value: number;
      [key: string]: any;
    };
  }
  

  Consumers can also access the array of collisions in components wrapped by <DndContext> via the useDndContext() hook:

  import {useDndContext} from '@dnd-kit/core';
  
  function MyComponent() {
    const {collisions} = useDndContext();
  }
  

• #561 02edd26 Thanks @clauderic! - Droppable containers now observe the node they are attached to via setNodeRef using ResizeObserver while dragging.

  This behaviour can be configured using the newly introduced resizeObserverConfig property.

  interface ResizeObserverConfig {
    /** Whether the ResizeObserver should be disabled entirely */
    disabled?: boolean;
    /** Resize events may affect the layout and position of other droppable containers.
     * Specify an array of `UniqueIdentifier` of droppable containers that should also be re-measured
     * when this droppable container resizes. Specifying an empty array re-measures all droppable containers.
     */
    updateMeasurementsFor?: UniqueIdentifier[];
    /** Represents the debounce timeout between when resize events are observed and when elements are re-measured */
    timeout?: number;
  }
  

  By default, only the current droppable is scheduled to be re-measured when a resize event is observed. However, this may not be suitable for all use-cases. When an element resizes, it can affect the layout and position of other elements, such that it may be necessary to re-measure other droppable nodes in response to that single resize event. The recomputeIds property can be used to specify which droppable ids should be re-measured in response to resize events being observed.

  For example, the useSortable preset re-computes the measurements of all sortable elements after the element that resizes, so long as they are within the same SortableContext as the element that resizes, since it's highly likely that their layout will also shift.

  Specifying an empty array for recomputeIds forces all droppable containers to be re-measured.

  For consumers that were relyings on the internals of DndContext using useDndContext(), the willRecomputeLayouts property has been renamed to measuringScheduled, and the recomputeLayouts method has been renamed to measureDroppableContainers, and now optionally accepts an array of droppable UniqueIdentifier that should be scheduled to be re-measured.

• #518 6310227 Thanks @clauderic! - Major internal refactor of measuring and collision detection.

  Summary of changes

  Previously, all collision detection algorithms were relative to the top and left points of the document. While this approach worked in most situations, it broke down in a number of different use-cases, such as fixed position droppable containers and trying to drag between containers that had different scroll positions.

  This new approach changes the frame of comparison to be relative to the viewport. This is a major breaking change, and will need to be released under a new major version bump.

  Breaking changes:

  • By default, @dnd-kit now ignores only the transforms applied to the draggable / droppable node itself, but considers all the transforms applied to its ancestors. This should provide the right balance of flexibility for most consumers.
    • Transforms applied to the droppable and draggable nodes are ignored by default, because the recommended approach for moving items on the screen is to use the transform property, which can interfere with the calculation of collisions.
    • Consumers can choose an alternate approach that does consider transforms for specific use-cases if needed by configuring the measuring prop of . Refer to the example.
  • Reduced the number of concepts related to measuring from ViewRect, LayoutRect to just a single concept of ClientRect.
    • The ClientRect interface no longer holds the offsetTop and offsetLeft properties. For most use-cases, you can replace offsetTop with top and offsetLeft with left.
    • Replaced the following exports from the @dnd-kit/core package with getClientRect:
      • getBoundingClientRect
      • getViewRect
      • getLayoutRect
      • getViewportLayoutRect
  • Removed translatedRect from the SensorContext interface. Replace usage with collisionRect.
  • Removed activeNodeClientRect on the DndContext interface. Replace with activeNodeRect.

• #569 e7ac3d4 Thanks @clauderic! - Separated context into public and internal context providers. Certain properties that used to be available on the public DndContextDescriptor interface have been moved to the internal context provider and are no longer exposed to consumers:

  interface DndContextDescriptor {
  -  dispatch: React.Dispatch<Actions>;
  -  activators: SyntheticListeners;
  -  ariaDescribedById: {
  -    draggable: UniqueIdentifier;
  -  };
  }
  

  Having two distinct context providers will allow to keep certain internals such as dispatch hidden from consumers.

  It also serves as an optimization until context selectors are implemented in React, properties that change often, such as the droppable containers and droppable rects, the transform value and array of collisions should be stored on a different context provider to limit un-necessary re-renders in useDraggable, useDroppable and useSortable.

  The <InternalContext.Provider> is also reset to its default values within <DragOverlay>. This paves the way towards being able to seamlessly use components that use hooks such as useDraggable and useDroppable as children of <DragOverlay> without causing interference or namespace collisions.

  Consumers can still make calls to useDndContext() to get the active or over properties if they wish to re-render the component rendered within DragOverlay in response to user interaction, since those use the PublicContext

Minor Changes

• #556 c6c67cb Thanks @avgrad! - - Added pointer coordinates to collision detection
  • Added pointerWithin collision algorithm

Patch Changes

• Updated dependencies [6310227, 528c67e, 02edd26]:
  • @dnd-kit/[email protected]

Patch Changes

• #532 dfa8d69 Thanks @Nauss! - fix: isWindow has been updated to support checking wether an element is a window object in Electron applications.

Patch Changes

• #509 1c6369e Thanks @clauderic! - Helpers have been updated to support rendering in foreign window contexts (via ReactDOM.render or ReactDOM.createPortal).

  For example, checking if an element is an instance of an HTMLElement is normally done like so:

  if (element instanceof HTMLElement)
  

  However, when rendering in a different window, this can return false even if the element is indeed an HTMLElement, because this code is equivalent to:

  if (element instanceof window.HTMLElement)
  

  And in this case, the window of the element is different from the main execution context window, because we are rendering via a portal into another window.

  This can be solved by finding the local window of the element:

  const elementWindow = element.ownerDocument.defaultView;
  
  if (element instanceof elementWindow.HTMLElement)
  

Patch Changes

• #509 1c6369e Thanks @clauderic! - Helpers have been updated to support rendering in foreign window contexts (via ReactDOM.render or ReactDOM.createPortal).

  For example, checking if an element is an instance of an HTMLElement is normally done like so:

  if (element instanceof HTMLElement)
  

  However, when rendering in a different window, this can return false even if the element is indeed an HTMLElement, because this code is equivalent to:

  if (element instanceof window.HTMLElement)
  

  And in this case, the window of the element is different from the main execution context window, because we are rendering via a portal into another window.

  This can be solved by finding the local window of the element:

  const elementWindow = element.ownerDocument.defaultView;
  
  if (element instanceof elementWindow.HTMLElement)
  

• Updated dependencies [1c6369e]:

  • @dnd-kit/[email protected]

Minor Changes

• #486 d86529c Thanks @clauderic! - Improvements to better support swappable strategies:

  • Now exporting an arraySwap helper to be used instead of arrayMove onDragEnd.
  • Added the getNewIndex prop on useSortable. By default, useSortable assumes that items will be moved to their new index using arrayMove(), but this isn't always the case, especially when using strategies like rectSwappingStrategy. For those scenarios, consumers can now define custom logic that should be used to get the new index for an item on drop, for example, by computing the new order of items using arraySwap.

Patch Changes

• Updated dependencies [d973cc6]:
  • @dnd-kit/[email protected]

Patch Changes

• #504 d973cc6 Thanks @clauderic! - Sensors that extend the AbstractPointerSensor now prevent HTML Drag and Drop API events from being triggered while the sensor is activated.

Patch Changes

• #479 5ec3310 Thanks @mdrobny! - fix: bind handleCancel handler in AbstractPointerSensor to current execution context (this).

Major Changes

• #373 1f5ca27 Thanks @clauderic! - Added react to peerDependencies of @dnd-kit/utilities

Minor Changes

• #334 13be602 Thanks @trentmwillis! - Move Coordinates interface along with getEventCoordinates, isMouseEvent and isTouchEvent helpers to @dnd-kit/utilities

Patch Changes

• #437 0e628bc Thanks @chestozo! - Added PointerEvent support to the getEventCoordinates method. This fixes testing the PointerSensor with Cypress (#436)

Major Changes

• #427 f96cb5d Thanks @clauderic! - - Using transform-agnostic measurements for the DragOverlay node.

  • Renamed the overlayNode property to dragOverlay on the DndContextDescriptor interface.

• 9cfac05 Thanks @clauderic! - Renamed the wasSorting property to wasDragging on the SortableContext and AnimateLayoutChanges interfaces.

Minor Changes

• #433 c447880 Thanks @clauderic! - Fix unwanted animations when items in sortable context change

Patch Changes

• #372 dbc9601 Thanks @clauderic! - Refactored DroppableContainers type from Record<UniqueIdentifier, DroppableContainer to a custom instance that extends the Map constructor and adds a few other methods such as toArray(), getEnabled() and getNodeFor(id).

  A unique key property was also added to the DraggableNode and DroppableContainer interfaces. This prevents potential race conditions in the mount and cleanup effects of useDraggable and useDroppable. It's possible for the clean-up effect to run after another React component using useDraggable or useDroppable mounts, which causes the newly mounted element to accidentally be un-registered.

• #350 a13dbb6 Thanks @wmain! - Breaking change: The CollisionDetection interface has been refactored. It now receives an object that contains the active draggable node, along with the collisionRect and an array of droppableContainers.

  If you've built custom collision detection algorithms, you'll need to update them. Refer to this PR for examples of how to refactor collision detection functions to the new CollisionDetection interface.

  The sortableKeyboardCoordinates method has also been updated since it relies on the closestCorners collision detection algorithm. If you were using collision detection strategies in a custom sortableKeyboardCoordinates method, you'll need to update those as well.

• 86d1f27 Thanks @clauderic! - Fixed a bug in the horizontalListSortingStrategy where it did not check if the currentRect was undefined.

• e42a711 Thanks @clauderic! - Fixed a bug with the default layout animation function where it could return true initially even if the list had not been sorted yet. Now checking the wasDragging property to ensure no layout animation occurs if wasDragging is false.

• #341 e02b737 Thanks @clauderic! - Return undefined instead of null for transition in useSortable

• Updated dependencies [13be602, aede2cc, 05d6a78, a32a4c5, f96cb5d, dea715c, dbc9601, 46ec5e4, 7006464, 0e628bc, c447880, 2ba6dfe, 8d70540, 13be602, 422d083, c4b21b4, 5a41340, a13dbb6, e2ee0dc, 1fe9b5c, 1fe9b5c, 1f5ca27]:

  • @dnd-kit/[email protected]
  • @dnd-kit/[email protected]