@octanejs/dnd-kit

The modern dnd-kit React adapter ported to octane. It reuses dnd-kit's framework-agnostic @dnd-kit/dom implementation, so sensors, collision detection, modifiers, accessibility, feedback, and sortable mechanics stay on the official upstream core.

import { DragDropProvider } from '@octanejs/dnd-kit';
import { useSortable } from '@octanejs/dnd-kit/sortable';
import { arrayMove } from '@dnd-kit/helpers';
import { useState } from 'octane';

function Item(props) @{
  const { ref, isDragging } = useSortable({ id: props.id, index: props.index });
  <button ref={ref} data-dragging={isDragging}>{props.id as string}</button>
}

export function App() @{
  const [items, setItems] = useState(['a', 'b', 'c']);
  <DragDropProvider
    onDragEnd={(event) => {
      if (event.canceled || !event.operation.target) return;
      const from = items.indexOf(event.operation.source.id as string);
      const to = items.indexOf(event.operation.target.id as string);
      setItems(arrayMove(items, from, to));
    }}
  >
    @for (const id of items; key id) {
      <Item id={id} index={items.indexOf(id)} />
    }
  </DragDropProvider>
}

The public entry points mirror @dnd-kit/[email protected]:

Parity evidence is intentionally recorded-unverified: the canonical adapter source is pinned and vendored, but upstream contains no React-adapter test suite at this release and the current differential covers one programmatic manager-action drag lifecycle (not keyboard-sensor parity). See UPSTREAM.md for the exact boundary and open browser gaps.

• @octanejs/dnd-kit
• @octanejs/dnd-kit/hooks
• @octanejs/dnd-kit/sortable
• @octanejs/dnd-kit/utilities

Octane's default useSortable plugins retain dnd-kit's keyboard mechanics but omit OptimisticSortingPlugin. That upstream plugin reparents the single host element before application state commits; doing so can split an Octane keyed item's owned DOM range. Update list state from the drag events as in the example above and Octane performs the visible keyed move. An explicit plugins array is still used exactly as supplied.

This package targets the modern dnd-kit API. The legacy @dnd-kit/core 6.x API is not included.