@dnd-kit/[email protected]

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.

@dnd-kit/[email protected]

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;
      },
    }}
  />;

Patch Changes

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

@dnd-kit/[email protected]

Patch Changes

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

@dnd-kit/[email protected]

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;
      },
    }}
  />;

@dnd-kit/[email protected]

Patch Changes

• 6a5c8a1 #154 Thanks @clauderic! - Update implementation of FirstArgument

@dnd-kit/[email protected]

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.

Patch Changes

• Updated dependencies [adb7bd5, 79f6088, a76cd5a]:
  • @dnd-kit/[email protected]

@dnd-kit/[email protected]

Patch Changes

• 6a5c8a1 #154 Thanks @clauderic! - Update implementation of FirstArgument

• Updated dependencies [6a5c8a1]:

  • @dnd-kit/[email protected]

@dnd-kit/[email protected]

Patch Changes

• 75bebf5 #152 Thanks @clauderic! - Update dependencies of @dnd-kit/core to ^1.2.0

@dnd-kit/[email protected]

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.

@dnd-kit/[email protected]

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