@flamingo-stack/openframe-frontend-core 0.0.552 → 0.0.553-1815.4814.1

package/src/__tests__/board-drop-target.test.ts

@@ -0,0 +1,218 @@
+import { describe, expect, it } from 'vitest'
+import type { ClientRect, Collision, DroppableContainer, UniqueIdentifier } from '@dnd-kit/core'
+import {
+  createDropTargetResolver,
+  detectCollisions,
+  type BoardDroppableData,
+  type CollisionArgs,
+  type FrameScheduler,
+} from '../components/features/board/drop-target'
+
+// ---------------------------------------------------------------------------
+// Fixtures — a two-lane board laid out by hand. dnd-kit's collision helpers are
+// pure functions over rects, so no DOM layout is needed to exercise them.
+//
+//   x:  0        400   416       816        lane width 400, 16px lane gap
+//   COL-A cards at x 0..400, COL-B cards at x 416..816
+// ---------------------------------------------------------------------------
+
+const rect = (left: number, top: number, width: number, height: number): ClientRect => ({
+  left,
+  top,
+  width,
+  height,
+  right: left + width,
+  bottom: top + height,
+})
+
+interface Droppable {
+  id: UniqueIdentifier
+  data: BoardDroppableData
+  rect: ClientRect
+}
+
+const LANE_A: Droppable = { id: 'column:a', data: { type: 'column', columnId: 'a' }, rect: rect(0, 0, 400, 800) }
+const LANE_B: Droppable = { id: 'column:b', data: { type: 'column', columnId: 'b' }, rect: rect(416, 0, 400, 800) }
+const A1: Droppable = { id: 'a1', data: { type: 'ticket', columnId: 'a' }, rect: rect(8, 48, 384, 100) }
+const A2: Droppable = { id: 'a2', data: { type: 'ticket', columnId: 'a' }, rect: rect(8, 156, 384, 100) }
+const B1: Droppable = { id: 'b1', data: { type: 'ticket', columnId: 'b' }, rect: rect(424, 48, 384, 100) }
+const B2: Droppable = { id: 'b2', data: { type: 'ticket', columnId: 'b' }, rect: rect(424, 156, 384, 100) }
+
+function makeArgs(options: {
+  droppables: Droppable[]
+  activeId?: UniqueIdentifier
+  pointer?: { x: number; y: number } | null
+  /** Rect of the card being dragged; defaults to sitting over the lane gap. */
+  collisionRect?: ClientRect
+}): CollisionArgs {
+  const { droppables, activeId = 'a1', pointer = null, collisionRect = rect(200, 300, 384, 100) } = options
+
+  const containers = droppables.map(
+    d =>
+      ({
+        id: d.id,
+        key: String(d.id),
+        disabled: false,
+        node: { current: null },
+        rect: { current: d.rect },
+        data: { current: d.data },
+      }) as unknown as DroppableContainer,
+  )
+
+  return {
+    active: { id: activeId, data: { current: null }, rect: { current: { initial: null, translated: null } } },
+    collisionRect,
+    droppableRects: new Map(droppables.map(d => [d.id, d.rect])),
+    droppableContainers: containers,
+    pointerCoordinates: pointer,
+  } as unknown as CollisionArgs
+}
+
+const idsOf = (collisions: Collision[]) => collisions.map(c => c.id)
+const pointerHitsOf = (args: CollisionArgs, hits: UniqueIdentifier[]): Collision[] =>
+  hits.map(id => {
+    const container = args.droppableContainers.find(c => c.id === id)
+    if (!container) throw new Error(`fixture has no droppable ${String(id)}`)
+    return { id, data: { droppableContainer: container, value: 0 } }
+  })
+
+/** A scheduler whose frames only advance when the test says so. */
+function manualFrames() {
+  let pending: (() => void)[] = []
+  const schedule: FrameScheduler = callback => {
+    pending.push(callback)
+    return () => {
+      pending = pending.filter(p => p !== callback)
+    }
+  }
+  return {
+    schedule,
+    tick: () => {
+      const due = pending
+      pending = []
+      for (const cb of due) cb()
+    },
+    get pendingCount() {
+      return pending.length
+    },
+  }
+}
+
+describe('detectCollisions', () => {
+  it('prefers a ticket under the pointer over its lane', () => {
+    const args = makeArgs({ droppables: [LANE_B, B1, B2], pointer: { x: 600, y: 98 } })
+    const collisions = detectCollisions(args, pointerHitsOf(args, [LANE_B.id, B1.id]))
+    expect(idsOf(collisions)).toEqual(['b1'])
+  })
+
+  it('resolves a lane-only hit to the nearest ticket inside that lane', () => {
+    // Pointer in lane B's empty space below both cards: the answer must still be
+    // a ticket, so the move lands at a position instead of "somewhere in B".
+    // `closestCorners` ranks every candidate; dnd-kit reads the first one.
+    const args = makeArgs({ droppables: [LANE_B, B1, B2], pointer: { x: 600, y: 700 } })
+    const collisions = detectCollisions(args, pointerHitsOf(args, [LANE_B.id]))
+    expect(idsOf(collisions)).toEqual(['b2', 'b1'])
+  })
+
+  it('never answers with the dragged card itself', () => {
+    // Dragging b2 over its own lane's empty space: b2 is the geometrically
+    // closest ticket, but returning it reads as "no change" and swallows the move.
+    const args = makeArgs({ droppables: [LANE_B, B1, B2], activeId: 'b2', pointer: { x: 600, y: 700 } })
+    const collisions = detectCollisions(args, pointerHitsOf(args, [LANE_B.id]))
+    expect(idsOf(collisions)).toEqual(['b1'])
+  })
+
+  it('falls back to the lane itself when it holds no other ticket', () => {
+    const args = makeArgs({ droppables: [LANE_B, B1], activeId: 'b1', pointer: { x: 600, y: 700 } })
+    const collisions = detectCollisions(args, pointerHitsOf(args, [LANE_B.id]))
+    expect(idsOf(collisions)).toEqual(['column:b'])
+  })
+
+  it('ranks by rect overlap when there is no pointer at all (keyboard drag)', () => {
+    const args = makeArgs({
+      droppables: [LANE_A, LANE_B, A1, B1],
+      pointer: null,
+      collisionRect: rect(424, 48, 384, 100), // exactly over B1
+    })
+    expect(idsOf(detectCollisions(args, []))[0]).toBe('b1')
+  })
+})
+
+describe('createDropTargetResolver', () => {
+  it('holds the last target while the pointer is over nothing', () => {
+    const resolver = createDropTargetResolver(manualFrames().schedule)
+    const droppables = [LANE_A, LANE_B, A1, A2, B1, B2]
+
+    const overB1 = makeArgs({ droppables, pointer: { x: 600, y: 98 } })
+    expect(idsOf(resolver.detect(overB1))).toEqual(['b1'])
+
+    // Pointer parked in the 16px lane gap: nothing is under it. Without the hold
+    // this falls to rect ranking, which flips between the lanes as the lists
+    // re-lay out — the ping-pong that crashed React with #185.
+    const inGap = makeArgs({ droppables, pointer: { x: 408, y: 98 } })
+    expect(idsOf(resolver.detect(inGap))).toEqual(['b1'])
+    expect(idsOf(resolver.detect(inGap))).toEqual(['b1'])
+  })
+
+  it('freezes the target for exactly one frame after a move', () => {
+    const frames = manualFrames()
+    const resolver = createDropTargetResolver(frames.schedule)
+    const droppables = [LANE_A, LANE_B, A1, A2, B1, B2]
+
+    resolver.detect(makeArgs({ droppables, pointer: { x: 600, y: 98 } })) // target = b1
+    resolver.freeze()
+
+    // Same frame: whatever the re-measured geometry now says, the answer holds.
+    const overA1 = makeArgs({ droppables, pointer: { x: 200, y: 98 } })
+    expect(idsOf(resolver.detect(overA1))).toEqual(['b1'])
+
+    frames.tick()
+    expect(idsOf(resolver.detect(overA1))).toEqual(['a1'])
+  })
+
+  it('re-arms the freeze window on every move instead of stacking frames', () => {
+    const frames = manualFrames()
+    const resolver = createDropTargetResolver(frames.schedule)
+    resolver.detect(makeArgs({ droppables: [LANE_B, B1], pointer: { x: 600, y: 98 } }))
+
+    resolver.freeze()
+    resolver.freeze()
+    resolver.freeze()
+    expect(frames.pendingCount).toBe(1)
+  })
+
+  it('release drops both the freeze and the remembered target', () => {
+    const frames = manualFrames()
+    const resolver = createDropTargetResolver(frames.schedule)
+    const droppables = [LANE_A, LANE_B, A1, B1]
+
+    resolver.detect(makeArgs({ droppables, pointer: { x: 600, y: 98 } }))
+    resolver.freeze()
+    resolver.release()
+
+    // Nothing held any more: over-nothing now resolves by geometry again, which
+    // is what a fresh drag must do.
+    const inGap = makeArgs({ droppables, pointer: { x: 408, y: 98 }, collisionRect: rect(424, 48, 384, 100) })
+    expect(idsOf(resolver.detect(inGap))).toEqual(['b1'])
+    expect(frames.pendingCount).toBe(0)
+  })
+
+  it('keeps the remembered target when a resolution comes back empty', () => {
+    const frames = manualFrames()
+    const resolver = createDropTargetResolver(frames.schedule)
+
+    resolver.detect(makeArgs({ droppables: [LANE_B, B1], pointer: { x: 600, y: 98 } }))
+    // Board unmounted its lanes mid-drag: no droppables, so no collision. The
+    // resolver must not forget — the next hold has to have something to hold.
+    expect(resolver.detect(makeArgs({ droppables: [], pointer: { x: 600, y: 98 } }))).toEqual([])
+    expect(idsOf(resolver.detect(makeArgs({ droppables: [LANE_B, B1], pointer: { x: 408, y: 98 } })))).toEqual(['b1'])
+  })
+
+  it('dispose cancels a pending freeze frame', () => {
+    const frames = manualFrames()
+    const resolver = createDropTargetResolver(frames.schedule)
+    resolver.freeze()
+    resolver.dispose()
+    expect(frames.pendingCount).toBe(0)
+  })
+})

package/src/components/features/board/board-column.tsx

@@ -2,13 +2,14 @@
 
 import { useDroppable } from '@dnd-kit/core'
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
-import * as React from 'react'
+import { memo, useEffect, useMemo, useRef, type ReactNode } from 'react'
 import { TagIcon } from '../../icons-v2-generated/shopping/tag-icon'
 import { cn } from '../../../utils/cn'
 import { BoardColumnHeader } from './board-column-header'
 import { tintOnDark } from './color-utils'
 import { TicketCard } from './ticket-card'
 import { TicketCardSkeleton } from './ticket-card-skeleton'
+import { useLaneScrollAnchor } from './use-lane-scroll-anchor'
 import type { BoardColumnDef, BoardTicket } from './types'
 
 export interface BoardColumnProps {
@@ -18,7 +19,7 @@ export interface BoardColumnProps {
   onAddTicket?: (columnId: string) => void
   onArchive?: (columnId: string) => void
   getTicketHref?: (ticketId: string) => string
-  renderAssignSlot?: (ticket: BoardTicket) => React.ReactNode
+  renderAssignSlot?: (ticket: BoardTicket) => ReactNode
   onApprove?: (ticketId: string, requestId?: string) => void | Promise<void>
   onReject?: (ticketId: string, requestId?: string) => void | Promise<void>
   onLoadMore?: (columnId: string) => void
@@ -27,7 +28,10 @@ export interface BoardColumnProps {
   joinRight?: boolean
 }
 
-export function BoardColumn({
+/** Memoized: `Board` rebuilds only the two columns a drag touches, so the
+ *  untouched ones keep their object identity and can skip the render entirely.
+ *  Without this, every pointer move that shifts a card re-renders all lanes. */
+export const BoardColumn = memo(function BoardColumn({
   column,
   collapsed = false,
   onToggleCollapse,
@@ -42,8 +46,21 @@ export function BoardColumn({
   joinLeft = false,
   joinRight = false,
 }: BoardColumnProps) {
+  // The drop zone is the WHOLE lane, header included — not just the list. A
+  // droppable that stops at the list leaves dead strips (the header, the
+  // padding) where the pointer is over a column yet hits nothing, and there the
+  // drop target has to be guessed from rect overlap, which is both wrong-looking
+  // and unstable. Collapsed lanes stay out: they render no list to drop into.
+  const droppableData = useMemo(() => ({ columnId: column.id, type: 'column' as const }), [column.id])
+  const { setNodeRef: setLaneRef, isOver } = useDroppable({
+    id: `column:${column.id}`,
+    data: droppableData,
+    disabled: column.dropDisabled || collapsed,
+  })
+
   return (
     <div
+      ref={setLaneRef}
       className={cn(
         'flex h-full shrink-0 flex-col gap-[var(--spacing-system-sf)] overflow-hidden rounded-md border border-ods-border p-[var(--spacing-system-sf)]',
         'transition-[width] duration-300 ease-out',
@@ -51,6 +68,7 @@ export function BoardColumn({
         column.system && 'bg-ods-card',
         joinLeft && 'rounded-l-none border-l-0',
         joinRight && 'rounded-r-none',
+        isOver && 'outline outline-2 -outline-offset-2 outline-ods-focus',
       )}
       style={column.system ? undefined : { backgroundColor: tintOnDark(column.color) }}
     >
@@ -77,40 +95,40 @@ export function BoardColumn({
       )}
     </div>
   )
-}
+})
 
 interface ColumnBodyProps {
   column: BoardColumnDef
   getTicketHref?: (ticketId: string) => string
-  renderAssignSlot?: (ticket: BoardTicket) => React.ReactNode
+  renderAssignSlot?: (ticket: BoardTicket) => ReactNode
   onApprove?: (ticketId: string, requestId?: string) => void | Promise<void>
   onReject?: (ticketId: string, requestId?: string) => void | Promise<void>
   onLoadMore?: (columnId: string) => void
   loadMoreRootMargin: string
 }
 
-function ColumnBody({ column, getTicketHref, renderAssignSlot, onApprove, onReject, onLoadMore, loadMoreRootMargin }: ColumnBodyProps) {
-  const ticketIds = React.useMemo(() => column.tickets.map(t => t.id), [column.tickets])
+function ColumnBody({
+  column,
+  getTicketHref,
+  renderAssignSlot,
+  onApprove,
+  onReject,
+  onLoadMore,
+  loadMoreRootMargin,
+}: ColumnBodyProps) {
+  const ticketIds = useMemo(() => column.tickets.map(t => t.id), [column.tickets])
 
-  const droppableData = React.useMemo(
-    () => ({ columnId: column.id, type: 'column' as const }),
-    [column.id],
-  )
-  const { setNodeRef: setDroppableRef, isOver } = useDroppable({
-    id: `column:${column.id}`,
-    data: droppableData,
-    disabled: column.dropDisabled,
-  })
+  const scrollRef = useRef<HTMLDivElement | null>(null)
+  const sentinelRef = useRef<HTMLDivElement | null>(null)
 
-  const scrollRef = React.useRef<HTMLDivElement | null>(null)
-  const sentinelRef = React.useRef<HTMLDivElement | null>(null)
+  useLaneScrollAnchor(scrollRef, column.tickets)
 
-  const loadMoreRef = React.useRef(onLoadMore)
+  const loadMoreRef = useRef(onLoadMore)
   loadMoreRef.current = onLoadMore
-  const columnIdRef = React.useRef(column.id)
+  const columnIdRef = useRef(column.id)
   columnIdRef.current = column.id
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!column.hasMore || column.isLoadingMore) return
     const sentinel = sentinelRef.current
     const root = scrollRef.current
@@ -128,21 +146,14 @@ function ColumnBody({ column, getTicketHref, renderAssignSlot, onApprove, onReje
     return () => observer.disconnect()
   }, [column.hasMore, column.isLoadingMore, loadMoreRootMargin])
 
-  const setBodyRef = React.useCallback(
-    (el: HTMLDivElement | null) => {
-      scrollRef.current = el
-      setDroppableRef(el)
-    },
-    [setDroppableRef],
-  )
-
   return (
+    // `overflow-anchor:none` hands scroll anchoring to `useLaneScrollAnchor`
+    // wholesale. The browser's own anchoring is unusable here — it silently
+    // skips transformed elements, so it works between drags and does nothing
+    // during one — and leaving both on double-corrects every insertion.
     <div
-      ref={setBodyRef}
-      className={cn(
-        'flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-xs)] overflow-y-auto',
-        isOver && 'rounded-md outline outline-2 outline-offset-2 outline-ods-focus',
-      )}
+      ref={scrollRef}
+      className="flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-xs)] overflow-y-auto [overflow-anchor:none]"
     >
       <SortableContext items={ticketIds} strategy={verticalListSortingStrategy}>
         {column.isLoading ? (
@@ -172,14 +183,13 @@ function ColumnBody({ column, getTicketHref, renderAssignSlot, onApprove, onReje
 }
 
 function SkeletonStack({ count = 4 }: { count?: number }) {
-  const keys = React.useMemo(
-    () => Array.from({ length: count }, () => Math.random().toString(36).slice(2)),
-    [count],
-  )
+  // Position IS the identity here: the rows are interchangeable placeholders in
+  // a fixed-length list, so the index is the correct key. Random keys remounted
+  // every row whenever this re-rendered with a different `count`.
   return (
     <>
-      {keys.map(k => (
-        <TicketCardSkeleton key={k} />
+      {Array.from({ length: count }, (_, i) => (
+        <TicketCardSkeleton key={`skeleton-${i}`} />
       ))}
     </>
   )

package/src/components/features/board/board.tsx

@@ -1,17 +1,13 @@
 'use client'
 
-import * as React from 'react'
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import {
   DndContext,
   DragOverlay,
   KeyboardSensor,
   PointerSensor,
-  closestCorners,
-  pointerWithin,
-  rectIntersection,
   useSensor,
   useSensors,
-  type CollisionDetection,
   type DragEndEvent,
   type DragOverEvent,
   type DragStartEvent,
@@ -20,6 +16,7 @@ import { arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable'
 import { useHorizontalScrollbar } from '../../../hooks/ui/use-horizontal-scrollbar'
 import { cn } from '../../../utils/cn'
 import { BoardColumn } from './board-column'
+import { createDropTargetResolver } from './drop-target'
 import { TicketCard } from './ticket-card'
 import type { BoardChange, BoardColumnDef, BoardTicket } from './types'
 import { useBoardCollapse } from './use-board-collapse'
@@ -31,7 +28,7 @@ export interface BoardProps {
   onAddTicket?: (columnId: string) => void
   onArchiveColumn?: (columnId: string) => void
   getTicketHref?: (ticketId: string) => string
-  renderAssignSlot?: (ticket: BoardTicket) => React.ReactNode
+  renderAssignSlot?: (ticket: BoardTicket) => ReactNode
   onApprove?: (ticketId: string, requestId?: string) => void | Promise<void>
   onReject?: (ticketId: string, requestId?: string) => void | Promise<void>
   collapseStorageKey?: string
@@ -68,53 +65,48 @@ export function Board({
     onThumbPointerUp,
   } = useHorizontalScrollbar()
 
-  const [items, setItems] = React.useState<BoardColumnDef[]>(columns)
-  const isDraggingRef = React.useRef(false)
+  const [items, setItems] = useState<BoardColumnDef[]>(columns)
+  const isDraggingRef = useRef(false)
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!isDraggingRef.current) setItems(columns)
   }, [columns])
 
-  const dragOriginRef = React.useRef<{ ticketId: string; fromColumnId: string } | null>(null)
-  const [activeTicket, setActiveTicket] = React.useState<{ ticket: BoardTicket; columnId: string } | null>(null)
+  const dragOriginRef = useRef<{ ticketId: string; fromColumnId: string } | null>(null)
+  const [activeTicket, setActiveTicket] = useState<{ ticket: BoardTicket; columnId: string } | null>(null)
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
   )
 
-  const collisionDetection = React.useCallback<CollisionDetection>((args) => {
-    const pointer = pointerWithin(args)
-    const intersections = pointer.length > 0 ? pointer : rectIntersection(args)
-
-    const ticketHit = intersections.find(
-      c => c.data?.droppableContainer?.data?.current?.type === 'ticket',
-    )
-    if (ticketHit) return [ticketHit]
-
-    const columnHit = intersections.find(
-      c => c.data?.droppableContainer?.data?.current?.type === 'column',
-    )
-    if (columnHit) {
-      const columnId = columnHit.data?.droppableContainer?.data?.current?.columnId
-      const ticketsInColumn = args.droppableContainers.filter(c => {
-        const d = c.data.current as { type?: string; columnId?: string } | undefined
-        return d?.type === 'ticket' && d.columnId === columnId
-      })
-      if (ticketsInColumn.length > 0) {
-        const closest = closestCorners({ ...args, droppableContainers: ticketsInColumn })
-        if (closest.length > 0) return closest
-      }
-      return [columnHit]
+  // Same collision policy as before, plus the two rules that stop a cross-column
+  // move from triggering the next one — see `drop-target.ts`. Kept out of React
+  // so both rules are unit-testable frame by frame.
+  const dropTarget = useMemo(() => createDropTargetResolver(), [])
+  useEffect(() => dropTarget.dispose, [dropTarget])
+
+  // One stable handler per column id. `onToggleCollapse` keeps its zero-arg
+  // shape (public prop), but an inline arrow would hand every lane a new
+  // function on every drag frame and defeat `BoardColumn`'s memo — which is the
+  // whole point of only rebuilding the lanes a move touches.
+  const toggleRef = useRef(toggle)
+  toggleRef.current = toggle
+  const collapseHandlers = useRef(new Map<string, () => void>())
+  const collapseHandlerFor = useCallback((columnId: string) => {
+    let handler = collapseHandlers.current.get(columnId)
+    if (!handler) {
+      handler = () => toggleRef.current(columnId)
+      collapseHandlers.current.set(columnId, handler)
     }
-
-    return closestCorners(args)
+    return handler
   }, [])
 
   const handleDragStart = (e: DragStartEvent) => {
     const id = String(e.active.id)
     const located = locate(items, id)
     if (!located) return
+    dropTarget.release()
     isDraggingRef.current = true
     dragOriginRef.current = { ticketId: id, fromColumnId: located.columnId }
     setActiveTicket({ ticket: located.ticket, columnId: located.columnId })
@@ -143,6 +135,14 @@ export function Board({
       !targetCol.allowedFromColumns.includes(origin.fromColumnId)
     if ((targetCol?.dropDisabled && !isReturnToOrigin) || blockedBySource) return
 
+    // The move below re-mounts the card under another parent, so dnd-kit
+    // unregisters + re-registers its droppable and re-measures every rect, then
+    // dispatches `onDragOver` again from the effect keyed on the over id. Hold
+    // the target for one frame so that cascade cannot schedule the next move —
+    // otherwise the two columns pass the card back and forth inside a single
+    // commit until React aborts the tree with "Maximum update depth exceeded".
+    dropTarget.freeze()
+
     setItems(prev => {
       const fromIndex = findIndexInColumn(prev, fromColumnId, activeId)
       const toCol = prev.find(c => c.id === toColumnId)
@@ -180,6 +180,7 @@ export function Board({
     dragOriginRef.current = null
     setActiveTicket(null)
     isDraggingRef.current = false
+    dropTarget.release()
 
     const { over } = e
     if (!over || !origin) {
@@ -240,13 +241,14 @@ export function Board({
     dragOriginRef.current = null
     setActiveTicket(null)
     isDraggingRef.current = false
+    dropTarget.release()
     setItems(columns)
   }
 
   return (
     <DndContext
       sensors={sensors}
-      collisionDetection={collisionDetection}
+      collisionDetection={dropTarget.detect}
       onDragStart={handleDragStart}
       onDragOver={handleDragOver}
       onDragEnd={handleDragEnd}
@@ -265,12 +267,12 @@ export function Board({
             const joinRight = !!(column.system && next?.system)
             const showGap = i > 0 && !joinLeft
             return (
-              <React.Fragment key={column.id}>
+              <Fragment key={column.id}>
                 {showGap && <div aria-hidden className="w-[var(--spacing-system-mf)] shrink-0" />}
                 <BoardColumn
                   column={column}
                   collapsed={!!collapsed[column.id]}
-                  onToggleCollapse={() => toggle(column.id)}
+                  onToggleCollapse={collapseHandlerFor(column.id)}
                   onAddTicket={onAddTicket}
                   onArchive={onArchiveColumn}
                   getTicketHref={getTicketHref}
@@ -282,7 +284,7 @@ export function Board({
                   joinLeft={joinLeft}
                   joinRight={joinRight}
                 />
-              </React.Fragment>
+              </Fragment>
             )
           })}
         </div>