@dnd-kit/[email protected]

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/[email protected]
  • @dnd-kit/[email protected]

@dnd-kit/[email protected]

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.

Patch Changes

• 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) {},
    });
  }

@dnd-kit/[email protected]

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/[email protected]

@dnd-kit/[email protected]

Major 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.

Patch Changes

• c24bdb3 #184 Thanks @clauderic! - Tweaked LiveRegion component:
  • Entries are now rendered without wrapper span elements. Having wrapper span elements causes VoiceOver on macOS to try to move the VoiceOver cursor to the live region, which interferes with scrolling. This issue is not exhibited when rendering announcement entries as plain text without wrapper spans.
  • Added the role="status" attribute to the LiveRegion wrapper element.
  • Added the white-space: no-wrap; property to ensure that text does not wrap.

@dnd-kit/[email protected]

Patch Changes

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

@dnd-kit/[email protected]

Patch Changes

• 92afb0f #168 Thanks @clauderic! - Make sure that the wasSorting argument of the animateLayoutChanges prop of useSortable always receives the latest value.

• Updated dependencies [bdb1aa2]:

  • @dnd-kit/[email protected]

@dnd-kit/[email protected]

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.

@dnd-kit/[email protected]

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

@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]