@cdx-ui/components 0.2.2 → 0.2.4

package/src/components/ReorderableList/index.web.tsx

@@ -0,0 +1,254 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type ReactElement,
+  type Ref,
+} from 'react';
+import { ScrollView, Text, View, type ViewProps, type ViewStyle } from 'react-native';
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useDndContext,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { cn } from '@cdx-ui/utils';
+import { ReorderableListShared, type ReorderableRowInfo } from './ReorderableListShared';
+import { reorderItems } from './reorderItems';
+import { ReorderableRowProvider, type ReorderableRowHandle } from './rowContext';
+import type { ReorderableListProps } from './types';
+import { useReorderableRowValue, useReorderController, type ReorderController } from './useReorder';
+import { createReorderAnnouncements, resolveDragEnd } from './webDnd';
+
+export type {
+  ReorderableListLabels,
+  ReorderableListProps,
+  ReorderableListRenderItemInfo,
+} from './types';
+
+const handleTouchStyle = { touchAction: 'none' } as ViewStyle;
+const passThrough: ReorderableRowHandle['wrap'] = (host) => host;
+
+/**
+ * react-native-web's `Pressable` stops Enter/Space `keydown` from bubbling, so when the handle is a
+ * pressable control (`asChild` with an `IconButton`) the drop key never reaches dnd-kit's document
+ * listener. While dragging, take the key at the handle and hand it to the document directly.
+ */
+function forwardDropKeyToDocument(event: ReactKeyboardEvent) {
+  const { key, code } = event.nativeEvent;
+  if (key !== 'Enter' && key !== ' ' && code !== 'Enter' && code !== 'Space') return;
+  event.preventDefault();
+  event.stopPropagation();
+  const { ownerDocument } = event.currentTarget as unknown as Node;
+  ownerDocument?.dispatchEvent(new KeyboardEvent('keydown', { key, code, cancelable: true }));
+}
+
+interface SortableRowProps<T> {
+  info: ReorderableRowInfo<T>;
+  renderItem: ReorderableListProps<T>['renderItem'];
+  controller: ReorderController<T>;
+}
+
+function SortableRow<T>({ info, renderItem, controller }: SortableRowProps<T>) {
+  const { item, index, count, key } = info;
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: key });
+  const { activatorEvent } = useDndContext();
+
+  const nodeRef = useRef<HTMLElement | null>(null);
+  const swallowNextClickRef = useRef(false);
+
+  const setRowRef = useCallback(
+    (node: View | null) => {
+      const element = node as unknown as HTMLElement | null;
+      nodeRef.current = element;
+      setNodeRef(element);
+    },
+    [setNodeRef],
+  );
+
+  // dnd-kit's shift/drop animation is written to the row's DOM node; React never owns these keys.
+  useLayoutEffect(() => {
+    const node = nodeRef.current;
+    if (!node) return;
+    node.style.transform = transform ? (CSS.Translate.toString({ ...transform, x: 0 }) ?? '') : '';
+    node.style.transition = transition ?? '';
+  }, [transform, transition]);
+
+  // A pointer drag ends with a click on the row; swallow that one click so a pressable row does
+  // not fire after a drop or cancel. Scoped to this row, and reset by the next pointerdown.
+  useEffect(() => {
+    if (isDragging && activatorEvent?.type.startsWith('pointer')) {
+      swallowNextClickRef.current = true;
+    }
+  }, [activatorEvent, isDragging]);
+
+  useEffect(() => {
+    const node = nodeRef.current;
+    if (!node) return undefined;
+    const onClick = (event: MouseEvent) => {
+      if (!swallowNextClickRef.current) return;
+      swallowNextClickRef.current = false;
+      event.stopPropagation();
+      event.preventDefault();
+    };
+    const onPointerDown = () => {
+      swallowNextClickRef.current = false;
+    };
+    node.addEventListener('click', onClick, true);
+    node.addEventListener('pointerdown', onPointerDown, true);
+    return () => {
+      node.removeEventListener('click', onClick, true);
+      node.removeEventListener('pointerdown', onPointerDown, true);
+    };
+  }, []);
+
+  const handle = useMemo<ReorderableRowHandle>(() => {
+    const { tabIndex, role, ...aria } = attributes;
+    return {
+      props: {
+        ...aria,
+        role: role as ViewProps['role'],
+        tabIndex: tabIndex === 0 || tabIndex === -1 ? tabIndex : undefined,
+        style: handleTouchStyle,
+        ...listeners,
+        onKeyDownCapture: isDragging ? forwardDropKeyToDocument : undefined,
+      },
+      ref: (node) => setActivatorNodeRef(node as unknown as HTMLElement | null),
+      wrap: passThrough,
+    };
+  }, [attributes, isDragging, listeners, setActivatorNodeRef]);
+
+  const rowValue = useReorderableRowValue({
+    index,
+    count,
+    isDragging,
+    handle,
+    labels: controller.labels,
+    moveItem: controller.moveItem,
+  });
+
+  return (
+    <ReorderableRowProvider value={rowValue}>
+      <View ref={setRowRef} className={cn(isDragging && 'relative z-20')}>
+        {renderItem({ item, index, isDragging })}
+      </View>
+    </ReorderableRowProvider>
+  );
+}
+
+function ReorderableListInner<T>(
+  {
+    data,
+    keyExtractor,
+    renderItem,
+    onReorder,
+    onReorderIndices,
+    getItemLabel,
+    labels,
+    ...rest
+  }: ReorderableListProps<T>,
+  ref: Ref<ScrollView>,
+) {
+  const [announcement, setAnnouncement] = useState('');
+
+  const controller = useReorderController({
+    data,
+    onReorder,
+    onReorderIndices,
+    getItemLabel,
+    labels,
+    announce: setAnnouncement,
+  });
+
+  const sortableIds = useMemo(
+    () => data.map((item, index) => keyExtractor(item, index)),
+    [data, keyExtractor],
+  );
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 4 },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const { describe, labels: resolvedLabels } = controller;
+  const accessibility = useMemo(
+    () => ({
+      announcements: createReorderAnnouncements(sortableIds, describe),
+      screenReaderInstructions: { draggable: resolvedLabels.screenReaderInstructions },
+    }),
+    [describe, resolvedLabels, sortableIds],
+  );
+
+  const handleDragEnd = useCallback(
+    ({ active, over }: DragEndEvent) => {
+      const move = resolveDragEnd(sortableIds, active.id, over?.id);
+      if (!move) return;
+      onReorder(reorderItems(data, move.from, move.to));
+      onReorderIndices?.(move.from, move.to);
+    },
+    [data, onReorder, onReorderIndices, sortableIds],
+  );
+
+  const renderRow = useCallback(
+    (info: ReorderableRowInfo<T>) => (
+      <SortableRow info={info} renderItem={renderItem} controller={controller} />
+    ),
+    [controller, renderItem],
+  );
+
+  return (
+    <DndContext
+      accessibility={accessibility}
+      collisionDetection={closestCenter}
+      onDragEnd={handleDragEnd}
+      sensors={sensors}
+    >
+      <SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
+        <ReorderableListShared
+          ref={ref}
+          data={data}
+          keyExtractor={keyExtractor}
+          renderRow={renderRow}
+          {...rest}
+        />
+      </SortableContext>
+      <View aria-live="polite" className="sr-only">
+        <Text>{announcement}</Text>
+      </View>
+    </DndContext>
+  );
+}
+
+export const ReorderableList = forwardRef(ReorderableListInner) as <T>(
+  props: ReorderableListProps<T> & { ref?: Ref<ScrollView> },
+) => ReactElement | null;
+
+(ReorderableList as { displayName?: string }).displayName = 'ReorderableList';

package/src/components/ReorderableList/labels.ts

@@ -0,0 +1,52 @@
+import type { ReorderableListLabels } from './types';
+
+export const DEFAULT_REORDERABLE_LIST_LABELS: ReorderableListLabels = {
+  item: 'item {position}',
+  pickedUp: 'Picked up {item}. Position {position} of {count}.',
+  movedTo: 'Moved {item} to position {position} of {count}.',
+  dropped: 'Dropped {item} at position {position} of {count}.',
+  cancelled: 'Reorder cancelled. {item} returned to position {position} of {count}.',
+  screenReaderInstructions:
+    'To pick up an item, press Space or Enter. Use the arrow keys to move it, then press Space or Enter to drop it, or Escape to cancel.',
+  moveUp: 'Move up',
+  moveDown: 'Move down',
+  moveToTop: 'Move to top',
+  moveToBottom: 'Move to bottom',
+};
+
+export function resolveReorderableListLabels(
+  partial?: Partial<ReorderableListLabels>,
+): ReorderableListLabels {
+  return { ...DEFAULT_REORDERABLE_LIST_LABELS, ...partial };
+}
+
+export type ReorderMessageKey = 'pickedUp' | 'movedTo' | 'dropped' | 'cancelled';
+
+export interface ReorderMessageInput<T> {
+  labels: ReorderableListLabels;
+  getItemLabel?: (item: T, index: number) => string;
+  item: T;
+  /** Zero-based position of the item before the move — names the item. */
+  fromIndex: number;
+  /** Zero-based position announced in the message. */
+  position: number;
+  count: number;
+}
+
+function fill(template: string, values: Record<string, string>): string {
+  return template.replace(/\{(\w+)\}/g, (match, name: string) => values[name] ?? match);
+}
+
+export function formatReorderMessage<T>(
+  key: ReorderMessageKey,
+  { labels, getItemLabel, item, fromIndex, position, count }: ReorderMessageInput<T>,
+): string {
+  const itemName = getItemLabel
+    ? getItemLabel(item, fromIndex)
+    : fill(labels.item, { position: String(fromIndex + 1) });
+  return fill(labels[key], {
+    item: itemName,
+    position: String(position + 1),
+    count: String(count),
+  });
+}

package/src/components/ReorderableList/reorderItems.ts

@@ -0,0 +1,16 @@
+/** Immutable insert-strategy move. No-ops when indices are equal or out of range. */
+export function reorderItems<T>(data: T[], fromIndex: number, toIndex: number): T[] {
+  if (
+    fromIndex === toIndex ||
+    fromIndex < 0 ||
+    toIndex < 0 ||
+    fromIndex >= data.length ||
+    toIndex >= data.length
+  ) {
+    return data;
+  }
+
+  const next = data.slice();
+  next.splice(toIndex, 0, ...next.splice(fromIndex, 1));
+  return next;
+}

package/src/components/ReorderableList/rowContext.tsx

@@ -0,0 +1,72 @@
+import { createContext, useContext, type ReactElement, type RefCallback } from 'react';
+import type {
+  AccessibilityActionEvent,
+  AccessibilityActionInfo,
+  StyleProp,
+  View,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+
+/**
+ * Props that make a host element the row's drag activator.
+ *
+ * - **Web:** dnd-kit `attributes` (`role`, `tabIndex`, `aria-*`), `listeners` (`onPointerDown`,
+ *   `onKeyDown`), and `style: { touchAction: 'none' }`. Some keys (`aria-roledescription`,
+ *   `aria-describedby`) are outside `ViewProps`, hence the index signature.
+ * - **Native:** empty — the gesture is attached by `wrap`.
+ */
+export type ReorderableHandleHostProps = ViewProps & Readonly<Record<string, unknown>>;
+
+/**
+ * Binds a handle element to the row's drag gesture without adding a focusable wrapper.
+ *
+ * Render one host (a `View`, or the consumer child under `asChild` via `Slot`), then:
+ * 1. spread `props` onto it before consumer props (handlers compose through `Slot`),
+ * 2. compose `ref` with the host's own ref,
+ * 3. return `wrap(host)`.
+ *
+ * Web: `ref` is dnd-kit's `setActivatorNodeRef` and `wrap` returns the host unchanged.
+ * Native: `ref` is `undefined` and `wrap` places the host inside `Sortable.Handle`, which must
+ * wrap because react-native-sortables only attaches its handle gesture through that component. It
+ * renders a non-accessible `View`, so the host stays the single focusable element; pass layout
+ * styles that must sit on the outer box (flex, alignSelf, margin) as `wrap`'s second argument.
+ */
+export interface ReorderableRowHandle {
+  props: ReorderableHandleHostProps;
+  ref: RefCallback<View> | undefined;
+  wrap: (host: ReactElement, style?: StyleProp<ViewStyle>) => ReactElement;
+}
+
+/** Per-row reorder state and actions, provided to every row rendered by `ReorderableList`. */
+export interface ReorderableRowContextValue {
+  /** `true` while this row is dragged. */
+  isDragging: boolean;
+  /** Zero-based position of the row in `data`. */
+  index: number;
+  /** Number of rows in the list. */
+  count: number;
+  /**
+   * Moves this row to `toIndex` (clamped to the list), calls `onReorder`/`onReorderIndices`, and
+   * announces the new position. No-op when the position does not change.
+   */
+  move: (toIndex: number) => void;
+  /**
+   * `Move up` / `Move down` / `Move to top` / `Move to bottom`, omitting those that do not apply at
+   * the ends. Spread with `onAccessibilityAction` onto the handle host. Native screen readers
+   * expose them as custom actions; react-native-web drops both props, and web keyboard users
+   * reorder through dnd-kit's keyboard sensor on the handle instead.
+   */
+  accessibilityActions: AccessibilityActionInfo[];
+  onAccessibilityAction: (event: AccessibilityActionEvent) => void;
+  handle: ReorderableRowHandle;
+}
+
+const ReorderableRowContext = createContext<ReorderableRowContextValue | null>(null);
+
+export const ReorderableRowProvider = ReorderableRowContext.Provider;
+
+/** Reorder state for the enclosing `ReorderableList` row, or `null` outside a list. */
+export function useReorderableRow(): ReorderableRowContextValue | null {
+  return useContext(ReorderableRowContext);
+}

package/src/components/ReorderableList/types.ts

@@ -0,0 +1,80 @@
+import type { ReactNode } from 'react';
+import type { ScrollViewProps } from 'react-native';
+
+export interface ReorderableListRenderItemInfo<T> {
+  /** The item from `data` that this row renders. */
+  item: T;
+  /** Zero-based position of `item` in `data`. */
+  index: number;
+  /**
+   * `true` while this row is being dragged. Restyle the row with color or opacity only: on iOS,
+   * changing `zIndex` on the row (or anything wrapping its handle) mid-drag cancels the drag.
+   */
+  isDragging: boolean;
+}
+
+/**
+ * Overridable copy for reorder announcements and accessibility actions.
+ *
+ * Placeholders: `{item}` is the row name (from `getItemLabel`, or the `item` template),
+ * `{position}` is a 1-based position, and `{count}` is the number of rows.
+ */
+export interface ReorderableListLabels {
+  /**
+   * Row name used when `getItemLabel` is not provided. `{position}` is the row's position
+   * before the move.
+   * @default 'item {position}'
+   */
+  item: string;
+  /** @default 'Picked up {item}. Position {position} of {count}.' */
+  pickedUp: string;
+  /** @default 'Moved {item} to position {position} of {count}.' */
+  movedTo: string;
+  /** @default 'Dropped {item} at position {position} of {count}.' */
+  dropped: string;
+  /** @default 'Reorder cancelled. {item} returned to position {position} of {count}.' */
+  cancelled: string;
+  /**
+   * Read by screen readers when a drag handle receives focus on web.
+   * @default 'To pick up an item, press Space or Enter. Use the arrow keys to move it, then press Space or Enter to drop it, or Escape to cancel.'
+   */
+  screenReaderInstructions: string;
+  /** @default 'Move up' */
+  moveUp: string;
+  /** @default 'Move down' */
+  moveDown: string;
+  /** @default 'Move to top' */
+  moveToTop: string;
+  /** @default 'Move to bottom' */
+  moveToBottom: string;
+}
+
+export interface ReorderableListProps<T> extends Omit<
+  ScrollViewProps,
+  'children' | 'horizontal' | 'role'
+> {
+  /** Items in their current order. The parent owns this array and updates it from `onReorder`. */
+  data: T[];
+  /**
+   * Returns a stable, unique key for an item. Keys identify rows while they move, so they must
+   * not be derived from `index`. Duplicate keys log a warning in development.
+   */
+  keyExtractor: (item: T, index: number) => string;
+  /** Renders one row. Compose with `ListItem` and `ListItem.DragHandle`. */
+  renderItem: (info: ReorderableListRenderItemInfo<T>) => ReactNode;
+  /** Called with the reordered array after a drop or an accessibility move. */
+  onReorder: (data: T[]) => void;
+  /** Called after `onReorder` with the moved row's previous and new zero-based positions. */
+  onReorderIndices?: (from: number, to: number) => void;
+  /**
+   * Returns the name screen readers use for a row in reorder announcements. Without it,
+   * announcements use the `item` label (`item 2`). Keys are never announced.
+   */
+  getItemLabel?: (item: T, index: number) => string;
+  /**
+   * Overrides for announcement and accessibility-action copy. Unset keys keep their defaults.
+   * @default {}
+   */
+  labels?: Partial<ReorderableListLabels>;
+  className?: string;
+}

package/src/components/ReorderableList/useReorder.ts

@@ -0,0 +1,159 @@
+import { useCallback, useMemo } from 'react';
+import type { AccessibilityActionEvent, AccessibilityActionInfo } from 'react-native';
+import { formatReorderMessage, resolveReorderableListLabels } from './labels';
+import { reorderItems } from './reorderItems';
+import type { ReorderableRowContextValue, ReorderableRowHandle } from './rowContext';
+import type { ReorderableListLabels, ReorderableListProps } from './types';
+
+type ReorderActionName = 'moveUp' | 'moveDown' | 'moveToTop' | 'moveToBottom';
+
+export function buildReorderAccessibilityActions(
+  index: number,
+  count: number,
+  labels: ReorderableListLabels,
+): AccessibilityActionInfo[] {
+  const actions: AccessibilityActionInfo[] = [];
+  if (index > 0) {
+    actions.push({ name: 'moveUp', label: labels.moveUp });
+    if (index > 1) actions.push({ name: 'moveToTop', label: labels.moveToTop });
+  }
+  if (index < count - 1) {
+    actions.push({ name: 'moveDown', label: labels.moveDown });
+    if (index < count - 2) actions.push({ name: 'moveToBottom', label: labels.moveToBottom });
+  }
+  return actions;
+}
+
+/** Target index for a reorder accessibility action, or `undefined` for other actions. */
+export function getReorderActionTarget(
+  actionName: string,
+  index: number,
+  count: number,
+): number | undefined {
+  switch (actionName as ReorderActionName) {
+    case 'moveUp':
+      return index - 1;
+    case 'moveDown':
+      return index + 1;
+    case 'moveToTop':
+      return 0;
+    case 'moveToBottom':
+      return count - 1;
+    default:
+      return undefined;
+  }
+}
+
+/** Duplicate keys in `data`, for the development warning. */
+export function findDuplicateKeys<T>(
+  data: readonly T[],
+  keyExtractor: (item: T, index: number) => string,
+): string[] {
+  const seen = new Set<string>();
+  const duplicates = new Set<string>();
+  data.forEach((item, index) => {
+    const key = keyExtractor(item, index);
+    if (seen.has(key)) duplicates.add(key);
+    seen.add(key);
+  });
+  return [...duplicates];
+}
+
+type ReorderControllerOptions<T> = Pick<
+  ReorderableListProps<T>,
+  'data' | 'onReorder' | 'onReorderIndices' | 'getItemLabel' | 'labels'
+> & {
+  announce: (message: string) => void;
+};
+
+export interface ReorderController<T> {
+  labels: ReorderableListLabels;
+  /** Commits a move from one position to another and announces it. */
+  moveItem: (fromIndex: number, toIndex: number) => void;
+  /** Formats an announcement for the item currently at `fromIndex`. */
+  describe: (
+    key: 'pickedUp' | 'movedTo' | 'dropped' | 'cancelled',
+    fromIndex: number,
+    position: number,
+  ) => string | undefined;
+  data: T[];
+}
+
+export function useReorderController<T>({
+  data,
+  onReorder,
+  onReorderIndices,
+  getItemLabel,
+  labels: labelsProp,
+  announce,
+}: ReorderControllerOptions<T>): ReorderController<T> {
+  const labels = useMemo(() => resolveReorderableListLabels(labelsProp), [labelsProp]);
+
+  const describe = useCallback<ReorderController<T>['describe']>(
+    (key, fromIndex, position) => {
+      const item = data[fromIndex];
+      if (item === undefined) return undefined;
+      return formatReorderMessage(key, {
+        labels,
+        getItemLabel,
+        item,
+        fromIndex,
+        position,
+        count: data.length,
+      });
+    },
+    [data, getItemLabel, labels],
+  );
+
+  const moveItem = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      if (fromIndex < 0 || fromIndex >= data.length) return;
+      const target = Math.min(Math.max(toIndex, 0), data.length - 1);
+      if (target === fromIndex) return;
+      const message = describe('movedTo', fromIndex, target);
+      onReorder(reorderItems(data, fromIndex, target));
+      onReorderIndices?.(fromIndex, target);
+      if (message) announce(message);
+    },
+    [announce, data, describe, onReorder, onReorderIndices],
+  );
+
+  // Stable identity: web's accessibility memo keys off this object. A fresh return every render
+  // rebuilds createReorderAnnouncements and clears lastAnnouncedIndex, so pick-up is replaced by
+  // "moved to" the current position.
+  return useMemo(() => ({ labels, moveItem, describe, data }), [labels, moveItem, describe, data]);
+}
+
+interface RowValueOptions {
+  index: number;
+  count: number;
+  isDragging: boolean;
+  handle: ReorderableRowHandle;
+  labels: ReorderableListLabels;
+  moveItem: (fromIndex: number, toIndex: number) => void;
+}
+
+export function useReorderableRowValue({
+  index,
+  count,
+  isDragging,
+  handle,
+  labels,
+  moveItem,
+}: RowValueOptions): ReorderableRowContextValue {
+  return useMemo(() => {
+    const move = (toIndex: number) => moveItem(index, toIndex);
+    return {
+      isDragging,
+      index,
+      count,
+      move,
+      accessibilityActions: buildReorderAccessibilityActions(index, count, labels),
+      onAccessibilityAction: (event: AccessibilityActionEvent) => {
+        const target = getReorderActionTarget(event.nativeEvent.actionName, index, count);
+        if (target !== undefined) move(target);
+      },
+      handle,
+    };
+  }, [count, handle, index, isDragging, labels, moveItem]);
+}

package/src/components/ReorderableList/webDnd.ts

@@ -0,0 +1,60 @@
+import type { ReorderController } from './useReorder';
+
+type Id = string | number;
+
+interface DragArgs {
+  active: { id: Id };
+  over: { id: Id } | null;
+}
+
+/** Maps a dnd-kit drop to `data` positions, or `null` when nothing should move. */
+export function resolveDragEnd(
+  ids: readonly string[],
+  activeId: Id,
+  overId: Id | null | undefined,
+): { from: number; to: number } | null {
+  if (overId == null || activeId === overId) return null;
+  const from = ids.indexOf(String(activeId));
+  const to = ids.indexOf(String(overId));
+  if (from === -1 || to === -1) return null;
+  return { from, to };
+}
+
+/**
+ * Position-based dnd-kit announcements. dnd-kit's defaults read the raw draggable ids, which are
+ * `keyExtractor` keys — these never mention them.
+ */
+export function createReorderAnnouncements<T>(
+  ids: readonly string[],
+  describe: ReorderController<T>['describe'],
+) {
+  const indexOf = (id: Id | undefined) => (id === undefined ? -1 : ids.indexOf(String(id)));
+  // dnd-kit reports the row's own slot as "over" right after pick-up; skip repeats so the
+  // pick-up message is not replaced by "moved to" its current position.
+  let lastAnnouncedIndex = -1;
+
+  return {
+    onDragStart({ active }: Pick<DragArgs, 'active'>) {
+      const from = indexOf(active.id);
+      lastAnnouncedIndex = from;
+      return from === -1 ? undefined : describe('pickedUp', from, from);
+    },
+    onDragOver({ active, over }: DragArgs) {
+      const from = indexOf(active.id);
+      const to = indexOf(over?.id);
+      if (from === -1 || to === -1 || to === lastAnnouncedIndex) return undefined;
+      lastAnnouncedIndex = to;
+      return describe('movedTo', from, to);
+    },
+    onDragEnd({ active, over }: DragArgs) {
+      const from = indexOf(active.id);
+      if (from === -1) return undefined;
+      const to = indexOf(over?.id);
+      return describe('dropped', from, to === -1 ? from : to);
+    },
+    onDragCancel({ active }: DragArgs) {
+      const from = indexOf(active.id);
+      return from === -1 ? undefined : describe('cancelled', from, from);
+    },
+  };
+}