@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

• Updated dependencies [b7355d1, 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.

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