clauderic/dnd-kit @dnd-kit/sortable@7.0.0

on GitHub

Major Changes

• #755 33e6dd2 Thanks @clauderic! - The UniqueIdentifier type has been updated to now accept either string or number identifiers. As a result, the id property of useDraggable, useDroppable and useSortable and the items prop of <SortableContext> now all accept either string or number identifiers.

  Migration steps

  For consumers that are using TypeScript, import the UniqueIdentifier type to have strongly typed local state:

  + import type {UniqueIdentifier} from '@dnd-kit/core';
  
  function MyComponent() {
  -  const [items, setItems] = useState(['A', 'B', 'C']);
  +  const [items, setItems] = useState<UniqueIdentifier>(['A', 'B', 'C']);
  }

  Alternatively, consumers can cast or convert the id property to a string when reading the id property of interfaces such as Active, Over, DroppableContainer and DraggableNode.

  The draggableNodes object has also been converted to a map. Consumers that were reading from the draggableNodes property that is available on the public context of <DndContext> should follow these migration steps:

  - draggableNodes[someId];
  + draggableNodes.get(someId);

• #660 30bbd12 Thanks @clauderic! - Changes to the default sortableKeyboardCoordinates KeyboardSensor coordinate getter.

  Better handling of variable sizes

  The default sortableKeyboardCoordinates function now has better handling of lists that have items of variable sizes. We recommend that consumers re-order lists onDragOver instead of onDragEnd when sorting lists of variable sizes via the keyboard for optimal compatibility.

  Better handling of overlapping droppables

  The default sortableKeyboardCoordinates function that is exported from the @dnd-kit/sortable package has been updated to better handle cases where the collision rectangle is overlapping droppable rectangles. For example, for down arrow key, the default function had logic that would only consider collisions against droppables that were below the bottom edge of the collision rect. This was problematic when the collision rect was overlapping droppable rects, because it meant that it's bottom edge was below the top edge of the droppable, and that resulted in that droppable being skipped.

  - collisionRect.bottom > droppableRect.top
  + collisionRect.top > droppableRect.top

  This change should be backwards compatible for most consumers, but may introduce regressions in some use-cases, especially for consumers that may have copied the multiple containers examples. There is now a custom sortable keyboard coordinate getter optimized for multiple containers that you can refer to.

Minor Changes

• #748 59ca82b Thanks @clauderic! - Automatic focus management and activator node refs.

  Introducing activator node refs

  Introducing the concept of activator node refs for useDraggable and useSortable. This allows @dnd-kit to handle common use-cases such as restoring focus on the activator node after dragging via the keyboard or only allowing the activator node to instantiate the keyboard sensor.

  Consumers of useDraggable and useSortable may now optionally set the activator node ref on the element that receives listeners:

  import {useDraggable} from '@dnd-kit/core';
  
  function Draggable(props) {
    const {
      listeners,
      setNodeRef,
  +   setActivatorNodeRef,
    } = useDraggable({id: props.id});
  
    return (
      <div ref={setNodeRef}>
        Draggable element
        <button
          {...listeners}
  +       ref={setActivatorNodeRef}
        >
          :: Drag Handle
        </button>
      </div>
    )
  }

  It's common for the activator element (the element that receives the sensor listeners) to differ from the draggable node. When this happens, @dnd-kit has no reliable way to get a reference to the activator node after dragging ends, as the original event.target that instantiated the sensor may no longer be mounted in the DOM or associated with the draggable node that was previously active.

  Automatically restoring focus

  Focus management is now automatically handled by @dnd-kit. When the activator event is a Keyboard event, @dnd-kit will now attempt to automatically restore focus back to the first focusable node of the activator node or draggable node.

  If no activator node is specified via the setActivatorNodeRef setter function of useDraggble and useSortable, @dnd-kit will automatically restore focus on the first focusable node of the draggable node set via the setNodeRef setter function of useDraggable and useSortable.

  If you were previously managing focus manually and would like to opt-out of automatic focus management, use the newly introduced restoreFocus property of the accessibility prop of <DndContext>:

  <DndContext
    accessibility={{
  +   restoreFocus: false
    }}

• #672 10f6836 Thanks @clauderic! - SortableContext now always requests measuring of droppable containers when its items prop changes, regardless of whether or not dragging is in progress. Measuring will occur if the measuring configuration allows for it.

• #754 224201a Thanks @clauderic! - The <SortableContext> component now optionally accepts a disabled prop to globally disable useSortable hooks rendered within it.

  The disabled prop accepts either a boolean or an object with the following shape:

  interface Disabled {
    draggable?: boolean;
    droppable?: boolean;
  }

  The useSortable hook has now been updated to also optionally accept the disabled configuration object to conditionally disable the useDraggable and/or useDroppable hooks used internally.

  Like the strategy prop, the disabled prop defined on the useSortable hook takes precedence over the disabled prop defined on the parent <SortableContext>.

Patch Changes

• #757 e6d544f Thanks @clauderic! - The wasDragging property of animateLayoutChanges now remains true for longer than a single re-render. Before this change, it was possible for the component where useSortable is used to re-render before @dnd-kit is ready to perform the layout animation, causing the animation to be skipped entirely.

• #749 188a450 Thanks @clauderic! - Faster (and safer) equal implementation.

• Updated dependencies [4173087, 59ca82b, 7161f70, a52fba1, 40707ce, a41e5b8, bf30718, a41e5b8, a41e5b8, 035021a, 77e3d44, 5811986, e302bd4, 188a450, 59ca82b, 750d726, 5f3c700, 035021a, e6e242c, 035021a, 33e6dd2, 10f6836, c1b3b5a, 035021a]:

  • @dnd-kit/core@6.0.0
  • @dnd-kit/utilities@3.2.0