A drag-and-drop sortable list component for configuring ticket status ordering, built on `@dnd-kit/core` and `@dnd-kit/sortable`. ## Key Components - **`TicketStatusConfigList`** — Generic sortable list container. Accepts any item type with an `id: string` field, manages DnD sensors (pointer with 4px activation threshold + keyboard), and delegates row rendering to a consumer-supplied `renderRow` prop. - **`SortableRow`** — Internal render-prop component that wraps each list item with `useSortable`, applies CSS transforms/transitions, and elevates `z-index` while dragging to prevent items from rendering beneath siblings. - **`SortableRowRenderArgs`** — Interface exposing `dragHandleProps`, `dragHandleAttributes`, and `isDragging` to the row renderer, allowing custom drag handle placement. - **`TicketStatusConfigListProps`** — Props interface for the list component. ## Usage Example ```typescript import { TicketStatusConfigList, type SortableRowRenderArgs, } from './ticket-status-config-list' const statuses = [ { id: 'open', label: 'Open' }, { id: 'in-progress', label: 'In Progress' }, { id: 'closed', label: 'Closed' }, ] function StatusSettings() { const [items, setItems] = React.useState(statuses) const handleReorder = (oldIndex: number, newIndex: number) => { setItems(prev => { const next = [...prev] next.splice(newIndex, 0, next.splice(oldIndex, 1)[0]) return next }) } return ( (
⠿ {item.label}
)} /> ) } ``` The `onReorder` callback receives raw `oldIndex`/`newIndex` values — the parent is responsible for applying the reorder to its own state.