@dnd-kit/core

Minor Changes

• d39ab11 #316 Thanks @lsit! - Added ability to optionally return screen reader announcements onDragMove.

Patch Changes

• ae398de Thanks @clauderic! - Allow setting an optional id prop on DndContext to fix a warning during server-side rendering (especially in Next.js). By default, this id is autogenerated and can lead to a mismatch between the server- and client-side rendered HTML. We also avoid this mismatch by rendering the Accessibility component only after everything else was initially mounted on the client.

• 8b938ce Thanks @clauderic! - Hide the node in the overlay after the drop animation is finished. This prevents some flickering with React concurrent mode.

Patch Changes

• 0ff788e #246 Thanks @inokawa! - DragOverlay component now passes down style prop to the wrapper element it renders.

Patch Changes

• 54c8778 #225 Thanks @clauderic! - Updated the active rects type to ViewRect (was previously incorrectly typed as LayoutRect)

• 2ee96a5 #243 Thanks @py-wai! - Update regex used in isScrollable, to consider element with overflow: overlay as a scrollable element.

Patch Changes

• f9ec28f #217 Thanks @clauderic! - Fixes a regression introduced with @dnd-kit/core@3.0.0 that was causeing sensors to stop working after a drag operation where activation constraints were not met.

Major Changes

• a9d92cf #174 Thanks @clauderic! - Distributed assets now only target modern browsers. Browserlist config:

  defaults
  last 2 version
  not IE 11
  not dead
  

  If you need to support older browsers, include the appropriate polyfills in your project's build process.

• b406cb9 #187 Thanks @clauderic! - Introduced the useDndMonitor hook. The useDndMonitor hook can be used within components wrapped in a DndContext provider to monitor the different drag and drop events that happen for that DndContext.

  Example usage:

  import {DndContext, useDndMonitor} from '@dnd-kit/core';
  
  function App() {
    return (
      <DndContext>
        <Component />
      </DndContext>
    );
  }
  
  function Component() {
    useDndMonitor({
      onDragStart(event) {},
      onDragMove(event) {},
      onDragOver(event) {},
      onDragEnd(event) {},
      onDragCancel(event) {},
    });
  }
  

Minor Changes

• b7355d1 #207 Thanks @clauderic! - The data argument for useDraggable and useDroppable is now exposed in event handlers and on the active and over objects.

  Example usage:

  import {DndContext, useDraggable, useDroppable} from '@dnd-kit/core';
  
  function Draggable() {
    const {attributes, listeners, setNodeRef, transform} = useDraggable({
      id: 'draggable',
      data: {
        type: 'type1',
      },
    });
  
    /* ... */
  }
  
  function Droppable() {
    const {setNodeRef} = useDroppable({
      id: 'droppable',
      data: {
        accepts: ['type1', 'type2'],
      },
    });
  
    /* ... */
  }
  
  function App() {
    return (
      <DndContext
        onDragEnd={({active, over}) => {
          if (over?.data.current.accepts.includes(active.data.current.type)) {
            // do stuff
          }
        }}
      />
    );
  }
  

Patch Changes

• Updated dependencies [a9d92cf, b406cb9]:
  • @dnd-kit/accessibility@3.0.0
  • @dnd-kit/utilities@2.0.0

Patch Changes

• 2833337 #186 Thanks @clauderic! - Simplify useAnnouncement hook to only return a single announcement rather than entries. Similarly, the LiveRegion component now only accepts a single announcement rather than `entries.

  • The current strategy used in the useAnnouncement hook is needlessly complex. It's not actually necessary to render multiple announcements at once within the LiveRegion component. It's sufficient to render a single announcement at a time. It's also un-necessary to clean up the announcements after they have been announced, especially now that the role="status" attribute has been added to LiveRegion, keeping the last announcement rendered means users can refer to the last status.

• Updated dependencies [c24bdb3, 2833337]:

  • @dnd-kit/accessibility@2.0.0

Patch Changes

• cc0a6ff #177 Thanks @FinestV! - fix calculations for top and left auto scroll speed

Minor Changes

• bdb1aa2 #171 Thanks @mitchheddles! - Added more flexibility for the distance and tolerance activation constraints. Consumers can still provide a number to calculate the distance or tolerance constraints, but can now also pass in an object that adheres to the DistanceMeasurement interface instead. This change allows consumers to specify which axis the activation distance or tolerance should be measured against, either x, y or both.

  type DistanceMeasurement =
    | number
    | {x: number}
    | {y: number}
    | {x: number, y: number}
  
  interface DistanceConstraint {
    distance: DistanceMeasurement;
  }
  
  interface DelayConstraint {
    delay: number;
    tolerance: DistanceMeasurement;
  }
  

  Example usage:

  For example, when building a list that can only be sorted vertically when using the restrictToVerticalAxis modifier, a consumer can now configure sensors to only measure distance against the y axis when using the MouseSensor, and afford more tolerance on the y axis than the x axis for the TouchSensor:

  const sensors = useSensors(
    useSensor(MouseSensor, {
      activationConstraint: {
        distance: { y: 10 },
      },
    }),
    useSensor(TouchSensor, {
      activationConstraint: {
        delay: 250,
        tolerance: { y: 15, x: 5 },
      },
    }),
  );
  

  This also fixes a bug with the way the distance is calculated when passing a number to the distance or tolerance options. Previously, the sum of the distance on both the x and y axis was being calculated rather than the hypothenuse.

Patch Changes

• f038174 #166 Thanks @shayc! - AutoScrollActivator enum was being exported as a type rather than a value.

• 7422e25 #165 Thanks @clauderic! - Fix regression with autoscroll disabling by sensors

Patch Changes

• a847a80 #160 Thanks @clauderic! - Allow consumers to define drag source opacity in drop animation by setting the dragSourceOpacity option to a number on the dropAnimation prop of DragOverlay.

• ea9d878 #164 Thanks @clauderic! - Export AutoScrollActivator enum for consumers.

Major Changes

• 8583825 #140 Thanks @clauderic! - Auto-scrolling defaults have been updated, which should generally lead to improved user experience for most consumers.

  The auto-scroller now bases its calculations based on the position of the pointer rather than the edges of the draggable element's rect by default. This change is aligned with how the native HTML 5 Drag & Drop auto-scrolling behaves.

  This behaviour can be customized using the activator option of the autoScroll prop:

  import {AutoScrollActivator, DndContext} from '@dnd-kit/core';
  
  <DndContext autoScroll={{activator: AutoScrollActivator.DraggableRect}} />;
  

  The auto-scroller now also looks at scrollable ancestors in order of appearance in the DOM tree, meaning it will first attempt to scroll the window, and narrow its focus down rather than the old behaviour of looking at scrollable ancestors in order of closeness to the draggable element in the DOM tree (reversed tree order).

  This generally leads to an improved user experience, but can be customized by passing a configuration object to the autoScroll prop that sets the order option to TraversalOrder.ReversedTreeOrder instead of the new default value of TraversalOrder.TreeOrder:

  import {DndContext, TraversalOrder} from '@dnd-kit/core';
  
  <DndContext autoScroll={{order: TraversalOrder.ReversedTreeOrder}} />;
  

  The autoscrolling thresholds, acceleration and interval can now also be customized using the autoScroll prop:

  import {DndContext} from '@dnd-kit/core';
  
  <DndContext
    autoScroll={{
      thresholds: {
        // Left and right 10% of the scroll container activate scrolling
        x: 0.1,
        // Top and bottom 25% of the scroll container activate scrolling
        y: 0.25,
      },
      // Accelerate slower than the default value (10)
      acceleration: 5,
      // Auto-scroll every 10ms instead of the default value of 5ms
      interval: 10,
    }}
  />;
  

  Finally, consumers can now conditionally opt out of scrolling certain scrollable ancestors using the canScroll option of the autoScroll prop:

  import {DndContext} from '@dnd-kit/core';
  
  <DndContext
    autoScroll={{
      canScroll(element) {
        if (element === document.scrollingElement) {
          return false;
        }
  
        return true;
      },
    }}
  />;
  

Minor Changes

• 79f6088 #144 Thanks @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.

• a76cd5a #136 Thanks @clauderic! - Added onActivation option to sensors. Delegated the responsibility of calling event.preventDefault() on activation to consumers, as consumers have the most context to decide whether it is appropriate or not to prevent the default browser behaviour on activation. Consumers of the sensors can prevent the default behaviour on activation using the onActivation option. Here is an example using the Pointer sensor: useSensor(PointerSensor, {onActivation: (event) => event.preventDefault()})

Patch Changes

• adb7bd5 #151 Thanks @clauderic! - DragOverlay now attempts to perform drop animation even if transform.x and transform.y are both zero.

Minor Changes

• ac674e8 #135 Thanks @ranbena! - Added dragCancel prop to DndContext. The dragCancel prop can be used to cancel a drag operation on drop. The prop accepts a function that returns a boolean, or a promise returning a boolean once resolved. Return false to cancel the drop.

• 208f68e #111 Thanks @ranbena! - Keyboard sensor now cancels dragging on window resize

Patch Changes

• 423610c #56 Thanks @clauderic! - Add MIT license to package.json and distributed files

• 594a24e #106 Thanks @ranbena! - Replace animation.finished with animation.onfinish for DragOverlay drop animation as the latter has much better support across browsers.

• fd25eaf #68 Thanks @Pustelto! - Wrap attributes returned from useDraggable hook in useMemo to allow pure component optimization

• Updated dependencies [423610c]:

  • @dnd-kit/accessibility@1.0.2
  • @dnd-kit/utilities@1.0.2

Patch Changes

• 5194696 #51 Thanks @clauderic! - Fix issue with reducer initial state variable causing collisions due to variable references all pointing to the original initial state variable.

• 310bbd6 #37 Thanks @nickpresta! - Fix typo in package.json repository URL

• Updated dependencies [0b343c7, 310bbd6]:

  • @dnd-kit/utilities@1.0.1
  • @dnd-kit/accessibility@1.0.1

Major Changes

• 2912350 Thanks @clauderic! - Initial public release.

Patch Changes

• Updated dependencies [2912350]:
  • @dnd-kit/accessibility@1.0.0
  • @dnd-kit/utilities@1.0.0

Patch Changes

• #1656 a4f5fc3 Thanks @github-actions! - - Update DragDropEventHandlers types to be non nullable.
  • Export DragDropEvents and allow them to be generic
  • Allow DragDropProvider to be passed Data as a generic
• Updated dependencies [569b6e3, a176848, f13cbc9]:
  • @dnd-kit/dom@0.1.1
  • @dnd-kit/abstract@0.1.1
  • @dnd-kit/state@0.1.1

Patch Changes

• Updated dependencies []:
  • @dnd-kit/state@0.1.0