Sortable list
Drag to reorder with a keyboard twin (Space to lift, ↑↓ to move, Space to drop), then a saved state with Undo or an error that restores the old order. 23 reorder operations need it (Q13).
Covers: M14. Exports: SortableList.
Anatomy
The component as it sits in the product: English, compact, real data shapes.
States
6 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.
Density
The phone shell is always comfortable (POWERUPS #15): 44px tap targets, 16px inputs. Compact exists on desktop only; see the desktop page.
English · 中文
Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.
Long string · permission denied
The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).
Contract
The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.
- Export
SortableList·@rj/admin-kit- Props
items·onReorder(ids in order) ·disabled- States
- idle · dragging · keyboard-moving · saving · saved · error
- shadcn / Radix
- none (list-row)
- Package underneath
- @dnd-kit/core + @dnd-kit/sortable (pointer, keyboard, touch sensors)
- Accessibility
- dnd-kit announcements: “Picked up Chest. Position 3 of 6.”
- API operations
- admin.default-measurements.reorder · admin.fabrics.reorder · admin.product-quality-checks.reorder · admin.photo-market.photos.reorder · admin.designs.sort (23 ops)
- Phone variant
- long-press to drag, or ↑ / ↓ buttons