). Walking up matters because the same list is height-capped in * one app and flows into the page scroller in another. */ function findScrollParent(el: HTMLElement | null): HTMLElement | null { let node: HTMLElement | null = el while (node) { const overflowY = getComputedStyle(node).overflowY if ( (overflowY === 'auto' || overflowY === 'scroll') && node.scrollHeight > node.clientHeight ) { return node } node = node.parentElement } return null } export interface ReorderListProps { /** The ordered array of items to display. */ items: T[] /** Returns a stable string key for each item. */ getId: (item: T) => string /** Renders the item label/content inside the row. */ renderLabel: (item: T) => React.ReactNode /** Called with the new array whenever the user commits a reorder. */ onReorder: (next: T[]) => void /** aria-label for the move-up button. Pass a translated string. */ moveUpLabel?: string /** aria-label for the move-down button. Pass a translated string. */ moveDownLabel?: string className?: string /** Inline styles for the root element. */ style?: React.CSSProperties } /** * Accessible drag-and-drop + arrow-button reorder list. * * Built on the existing DS `useDragReorder` hook. Includes ArrowUp / ArrowDown * keyboard/touch-friendly buttons (accessibility improvement from Uradi's * `ListOrderReorder`). Arrow icons use inline SVG so the DS stays icon-free. * * Props: * - `items` / `getId` / `renderLabel` / `onReorder` -- the data contract * - `moveUpLabel` / `moveDownLabel` -- translated aria-labels for the buttons * * The caller owns the state; `onReorder` receives the new array and should * update state + persist as needed. * * Long lists: pass `className="max-h-72 overflow-y-auto"` (or similar) to cap * the height and enable internal scrolling. Native HTML5 drag auto-scrolls * scrollable ancestors in modern browsers; arrow button moves scroll the moved * item into view automatically. Add `pr-1` to give the scrollbar a little * breathing room so it does not overlap row content. * * **Touch**: the drag handle carries the pointer path (`getHandleProps`), so a * finger on the handle drags and a finger anywhere else on the row still * scrolls. That split is deliberate -- the row stays scrollable so a capped * list inside a drawer is not a gesture trap. Auto-scroll targets the list * itself when height-capped, otherwise the nearest scrollable ancestor. */ function ReorderListInner( { items, getId, renderLabel, onReorder, moveUpLabel = 'Move up', moveDownLabel = 'Move down', className, style, }: ReorderListProps, ref: React.ForwardedRef, ) { // Holds a ref to each rendered

by its current index. Used to scroll the // moved item into view after an arrow-button move. const itemRefs = React.useRef(new Map()) // Edge-fade masks for the height-capped scrolling case (the caller passes a // max-h + overflow className): the overflowing edge fades out, both edges // once scrolled. Resolves to no class while the list has no overflow. const listRef = React.useRef(null) const mergedRef = useMergedRefs(listRef, ref) const fade = useScrollFade(listRef, items.length) const reduced = useReducedMotion() const reorder = useDragReorder( (from, to) => { const next = [...items] const [moved] = next.splice(from, 1) next.splice(to, 0, moved) onReorder(next) }, { count: items.length, getItemElement: (index) => itemRefs.current.get(index) ?? null, // Resolved per call rather than cached: whether the list is its own // scroller depends on the caller's className, and an expandable list // (Chip Away's goal order) changes that answer at runtime. getScrollContainer: () => findScrollParent(listRef.current), }, ) const moveBy = (index: number, delta: number) => { const newIndex = index + delta if (newIndex < 0 || newIndex >= items.length) return const next = [...items] const [moved] = next.splice(index, 1) next.splice(newIndex, 0, moved) onReorder(next) // After the parent re-renders with the new order, scroll the moved item -- // now at newIndex -- into view. requestAnimationFrame waits for the DOM // update so the ref map reflects the new positions. requestAnimationFrame(() => { itemRefs.current.get(newIndex)?.scrollIntoView({ block: 'nearest', behavior: reduced ? 'auto' : 'smooth', }) }) } return (

{ if (el) { itemRefs.current.set(index, el) } else { itemRefs.current.delete(index) } }} {...reorder.getItemProps(index)} className={cn( // py + the 28px nudge buttons + the border stay UNDER the 44px floor, so // min-h is what sets the row height and it matches every other // control. Taller buttons here push the row past it instead. 'flex items-center gap-2 min-h-control-md px-3 py-1.5 rounded-lg border transition-colors', 'cursor-grab active:cursor-grabbing select-none', // A pointer drag repaints rows under a still finger, so the // color transition would lag the reorder it is describing. reorder.pointerDragging && 'transition-none', 'bg-[var(--color-surface-light)] border-[var(--color-border-light)] text-[var(--color-text-primary-light)]', 'dark:bg-[var(--color-surface-dark)] dark:border-[var(--color-border-dark)] dark:text-[var(--color-text-primary-dark)]', isDragging && 'opacity-50', isOver && 'border-[var(--color-accent-500)]', )} > {/* The touch grip. Padded out to a real target rather than sized to the glyph, and `touch-action: none` (from getHandleProps) makes a drag starting here a drag rather than a scroll. */} {renderLabel(item)}

) } // forwardRef erases the generic type parameter, so re-assert it on the exported // component: ReorderList keeps `items`/`getId`/`renderLabel`/`onReorder` typed // to T AND forwards a ref to the

( props: ReorderListProps & { ref?: React.Ref }, ) => React.ReactElement 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L52",null,{"namespace":"@whiskeyjack","registryDependencies":["https://whiskeyjack.net/r/merge-refs.json","https://whiskeyjack.net/r/use-drag-reorder.json","https://whiskeyjack.net/r/use-reduced-motion.json","https://whiskeyjack.net/r/use-scroll-fade.json","https://whiskeyjack.net/r/utils.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"components/ui/reorder-list.tsx","content":"$54","type":"registry:ui","target":"components/ui/reorder-list.tsx"}],"className":"h-[70svh] min-h-80"}]]}]