Skip to content

useAccordionDndState

useAccordionDndState(__namedParameters): object

Defined in: packages/react/src/components/ui/dnd/useAccordionDndState.ts:31

Manages accordion open/closed state that survives DragDropContext remounts and correctly follows array items when they are reordered.

Reads from DndContext (lives above the keyed DragDropContext) to access:

  • itemStableKeysRef: stable UUID per array slot, shifted on every drag to mirror TanStack Form’s moveValue so the UUID travels with its item.
  • accordionStateRef: boolean open/closed keyed by stable UUID (not index).

Usage — group, array, or blocks field accordion: const { itemValue, openItems, handleValueChange } = useAccordionDndState( name, index, fieldDef.defaultOpen !== false, );

For block ITEMS (not the blocks field itself) pass the block’s stable data id as the fourth argument to bypass the slot-map lookup entirely: const { itemValue, openItems, handleValueChange } = useAccordionDndState( name, index, !admin.defaultCollapsed, blockItem.id, );

string

Optional stable id from the item’s data (e.g. block item.id). When provided, skips the slot-map lookup — use for items that already carry a stable UUID in their form value.

boolean

number | undefined

string

handleValueChange: (value) => void

Handler for

string[]

void

itemValue: string

Value for

openItems: string[]

Value for