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

@dnd-kit/[email protected]

Patch Changes

• a178857 #214 Thanks @clauderic! - Ensure that consumer defined data passed to useSortable is passed down to both useDraggable and useDroppable.

  The data object that is passed to useDraggable and useDroppable within useSortable also contains the sortable property, which holds a reference to the index of the item, along with the containerId and the items of its parent SortableContext.

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

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

• fb2db94 #212 Thanks @clauderic! - Allow consumers of SortableContext to provide items of shape {id: string}[] or string[]

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

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]