Skip to content

Releases: clauderic/dnd-kit

@dnd-kit/[email protected]

01 Jun 15:34
d152628
Compare
Choose a tag to compare

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.

@dnd-kit/[email protected]

12 May 02:08
a114f44
Compare
Choose a tag to compare

Patch Changes

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

@dnd-kit/[email protected]

02 May 00:38
44e2693
Compare
Choose a tag to compare

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.

@dnd-kit/[email protected]

21 Apr 03:15
286f489
Compare
Choose a tag to compare

Patch Changes

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

@dnd-kit/[email protected]

20 Apr 02:23
98a3a46
Compare
Choose a tag to compare

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]

20 Apr 20:06
0b14c6f
Compare
Choose a tag to compare

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]

20 Apr 02:23
98a3a46
Compare
Choose a tag to compare

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

@dnd-kit/[email protected]

20 Apr 02:23
98a3a46
Compare
Choose a tag to compare

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

@dnd-kit/[email protected]

20 Apr 02:23
98a3a46
Compare
Choose a tag to compare

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

@dnd-kit/[email protected]

20 Apr 02:23
98a3a46
Compare
Choose a tag to compare

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