@flamingo-stack/openframe-frontend-core 0.0.556 → 0.0.557-1828.4873.1

package/src/components/features/board/use-board-collapse.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { useLocalStorage } from '../../../hooks/ui/use-local-storage'
 
 export type BoardCollapseMap = Record<string, boolean>
@@ -21,19 +21,21 @@ export function useBoardCollapse(storageKey?: string): UseBoardCollapseReturn {
   const collapsed = storageKey ? persisted : memory
   const setMap = storageKey ? setPersisted : setMemory
 
-  const toggle = useCallback(
-    (columnId: string) => {
-      setMap(prev => ({ ...prev, [columnId]: !prev[columnId] }))
-    },
-    [setMap],
-  )
-
-  const setCollapsed = useCallback(
-    (columnId: string, value: boolean) => {
-      setMap(prev => ({ ...prev, [columnId]: value }))
-    },
-    [setMap],
-  )
+  // Both callbacks keep one identity for the hook's lifetime. `useLocalStorage`
+  // returns an unmemoized setter, so depending on it directly hands the board a
+  // new `toggle` on every render — and a board that memoizes its columns then
+  // re-renders all of them on every drag frame, which is the one thing the memo
+  // is there to prevent. The ref keeps the latest setter without the identity.
+  const setMapRef = useRef(setMap)
+  setMapRef.current = setMap
+
+  const toggle = useCallback((columnId: string) => {
+    setMapRef.current(prev => ({ ...prev, [columnId]: !prev[columnId] }))
+  }, [])
+
+  const setCollapsed = useCallback((columnId: string, value: boolean) => {
+    setMapRef.current(prev => ({ ...prev, [columnId]: value }))
+  }, [])
 
   return { collapsed, toggle, setCollapsed }
 }

package/src/components/features/board/use-lane-scroll-anchor.ts

@@ -0,0 +1,79 @@
+'use client'
+
+import { useRef, type RefObject } from 'react'
+import { useIsomorphicLayoutEffect } from '../../../hooks/ui/use-isomorphic-layout-effect'
+import type { BoardTicket } from './types'
+
+/** Attribute the lane's cards carry so the anchor can find them again. */
+export const TICKET_ID_ATTRIBUTE = 'data-ticket-id'
+
+interface CardPosition {
+  id: string
+  /**
+   * Position in LAYOUT space, absolute within the lane — not the painted one.
+   * `offsetTop` ignores transforms, so a card mid-animation reads at its resting
+   * position and the correction below stays honest. Absolute rather than
+   * viewport-relative so that scrolling between two list changes — the drag's own
+   * auto-scroll, most of all — cannot stale the reading.
+   */
+  offsetTop: number
+}
+
+function cardPositions(root: HTMLElement): CardPosition[] {
+  return Array.from(root.querySelectorAll<HTMLElement>(`[${TICKET_ID_ATTRIBUTE}]`)).map(element => ({
+    id: element.getAttribute(TICKET_ID_ATTRIBUTE) ?? '',
+    offsetTop: element.offsetTop,
+  }))
+}
+
+/**
+ * Keeps a scrolled lane visually still when its list changes above the viewport.
+ *
+ * Browsers do this themselves — it is called scroll anchoring — but the lane turns
+ * theirs off (`overflow-anchor:none`), because leaving both on double-corrects
+ * every insertion. So a ticket arriving from a live update is inserted above the
+ * viewport with nothing to compensate, and the whole list slides down by a card.
+ *
+ * NOTE: the original reason for taking this over by hand was that Chrome skips
+ * anchor candidates carrying a `transform`, and dnd-kit transformed every card in
+ * the lane during a drag. Nothing transforms cards any more, so the browser's own
+ * anchoring may well be enough now — worth testing against live updates before
+ * deleting this and the `overflow-anchor:none` that goes with it.
+ *
+ * The fix is one measurement: whichever card sits at the top of the viewport,
+ * note where it is, and after the list changes put the viewport back the same
+ * distance from it.
+ *
+ * Deliberately inert at the very top of a lane (`scrollTop === 0`), matching what
+ * browsers do — there a new ticket is meant to be seen, not scrolled away.
+ */
+export function useLaneScrollAnchor(
+  scrollRef: RefObject<HTMLDivElement | null>,
+  tickets: readonly BoardTicket[],
+): void {
+  const positionsRef = useRef<CardPosition[]>([])
+
+  useIsomorphicLayoutEffect(() => {
+    const root = scrollRef.current
+    if (!root) return
+
+    const previous = positionsRef.current
+    const scrollTop = root.scrollTop
+    // Measured once and reused: this runs for every lane on every list change —
+    // live updates, the host's refetch, every committed move — and reading
+    // `offsetTop` after the DOM changed forces a synchronous layout.
+    const current = cardPositions(root)
+
+    if (previous.length > 0 && scrollTop > 0) {
+      // The card at the top of the viewport right now, by its previous position.
+      const anchor = previous.find(card => card.offsetTop >= scrollTop) ?? previous[previous.length - 1]
+      const moved = current.find(card => card.id === anchor.id)
+      if (moved) {
+        const drift = moved.offsetTop - anchor.offsetTop
+        if (Math.abs(drift) >= 1) root.scrollTop = scrollTop + drift
+      }
+    }
+
+    positionsRef.current = current
+  }, [tickets])
+}

package/src/components/features/index.ts

@@ -93,4 +93,5 @@ export * from './waitlist-form'
 export * from './notifications'
 export * from './time-tracker'
 export * from './board'
+export * from './sortable-list'
 export * from './ticket-status-config-list'

package/src/components/features/sortable-list/.sortable-list.md

@@ -0,0 +1,82 @@
+<!-- source-hash: manual -->
+A vertical list whose items are reordered by dragging a handle, built on Pragmatic drag and drop.
+
+> **Currently unused.** It was written for the ordered lists — schedule scripts, ticket statuses,
+> AI quick actions — and those have since gone back to `@dnd-kit` (`TicketStatusConfigList`), whose
+> pointer sensors work under touch where the HTML5 drag-and-drop API this is built on does not.
+> Kept, not deleted: it is a complete and general implementation, and the ticket board next door
+> still runs on the same library. Reach for `TicketStatusConfigList` for a new ordered list; reach
+> for this one only if you specifically need what it does differently — slot geometry with
+> hysteresis, a FLIP drop animation, and auto-scroll through every scrollable ancestor.
+
+Deliberately **not** the ticket board, which moves cards between columns and needs a different
+model.
+
+## Key Components
+
+| Export | Description |
+|---|---|
+| `SortableList` | The container. Owns the geometry, the drag monitor and the live region |
+| `useSortableItem` | Registers one item: gives back `itemRef`, `dragHandleProps` and `isDragging` |
+| `SLOT_STICKINESS` | The dead band around a slot boundary, as a share of one slot's travel |
+
+## Usage
+
+```tsx
+<SortableList onReorder={move} getItemLabel={i => rows[i].name} className="flex flex-col gap-6">
+  {rows.map(row => <Row key={row.id} row={row} />)}
+</SortableList>
+
+function Row({ row }) {
+  const { itemRef, dragHandleProps, isDragging } = useSortableItem()
+  return (
+    <div ref={itemRef} className={isDragging ? 'border-ods-accent shadow-lg' : 'border-ods-border'}>
+      <button type="button" {...dragHandleProps} aria-label="Reorder…"><DraggerIcon /></button>
+      …
+    </div>
+  )
+}
+```
+
+`onReorder(from, to)` fires **once**, on drop or on an arrow key — never mid-drag. Do not put a
+`style` prop on the item's root: the list writes `transform` straight onto that node.
+
+## Why it is built this way
+
+- **The drag moves nothing but transforms.** The dragged item keeps its slot and is translated to
+  follow the pointer; the items it passes are translated by exactly its height plus the row gap.
+  Layout is untouched, so the height of the page around the list cannot move, and the slide is safe
+  to animate. Opening and closing real space (margins, `display: none`) is not: interrupt one of
+  those transitions by moving the pointer, or reorder the DOM on drop, and the two ends run at
+  different rates and the page jumps by an item's height. Both failure modes were measured before
+  this shape was settled on.
+- **The native drag image is off.** The browser draws it washed out and offers no way to style it,
+  so the real item follows the pointer instead, at full opacity.
+- **Nearest resting place, with a handicap.** Where a drop would land is whichever slot the item is
+  nearest to coming to *rest* in — dnd-kit's `closestCenter`, which flips at the midpoint between
+  two slots, so half an item of travel is enough. The slot already held keeps a `SLOT_STICKINESS`
+  handicap; without it the item sits exactly ON the boundary it just crossed, so leaving costs half
+  an item and returning costs a pixel. Rules and arithmetic live in `slot-geometry.ts`, pure and
+  unit-tested (`src/__tests__/sortable-slot-geometry.test.ts`).
+- **Everything is measured once, at drag start,** so an item moving out of the way can never change
+  the answer that moved it and start an oscillation. No React state changes during a drag: the
+  transforms are written straight to the DOM, so dragging a list of form cards re-renders nothing.
+- **The landing is a FLIP, so the data never waits for it.** `onReorder` fires immediately; the
+  animation runs in a layout effect after the commit that carries the reorder, reading where each
+  item *looked* a moment earlier and playing it back from there. Items that stood aside during the
+  drag come out with a delta of zero — they are already in place — so this animates the dropped item
+  and nothing else. Worth animating because the item follows the pointer while the slot flips at a
+  midpoint, so it can be released up to half an item away from where it lands; teleporting that far
+  reads as a glitch rather than as "done".
+- **Auto-scroll is registered on every scrollable ancestor, and the window.** dnd-kit walked that
+  chain for you; Pragmatic makes each scroller opt in by name, so after the migration a drag towards
+  the edge of the screen scrolled nothing. The window alone is not enough either — the app's real
+  scroller is the layout's `<main>`. Because an ancestor can now scroll mid-drag, every position is
+  measured relative to the list's own top rather than to the viewport or the document, so a scroll
+  moves the list and the pointer together and nothing goes stale.
+- **Keyboard.** Pragmatic drag and drop ships none, so `dragHandleProps` carries Arrow Up / Arrow
+  Down — one press, one move. The list announces every move through its own live region.
+
+## Source
+
+[`sortable-list.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/sortable-list.tsx)

package/src/components/features/sortable-list/index.ts

@@ -0,0 +1,3 @@
+export { SLOT_STICKINESS } from './slot-geometry'
+export { SortableList, type SortableListProps } from './sortable-list'
+export { type SortableItem, useSortableItem } from './use-sortable-item'

package/src/components/features/sortable-list/slot-geometry.ts

@@ -0,0 +1,100 @@
+/**
+ * The arithmetic behind a vertical sortable list: where a dragged item would
+ * come to rest at each index, which of those places it is currently nearest to,
+ * and how far that pushes everything else.
+ *
+ * Pure on purpose. The DOM is read exactly once, when the drag starts, and
+ * everything after that is numbers — so the rules can be unit-tested instead of
+ * discovered in a browser, and a card moving out of the way can never change the
+ * answer that moved it and start an oscillation.
+ */
+
+/**
+ * Share of one slot's travel that the slot an item already holds keeps as a
+ * handicap.
+ *
+ * Without it an item ends up sitting exactly ON a boundary the instant it
+ * crosses one: leaving a slot costs half an item of dragging and coming back
+ * costs a pixel, which reads as the list changing its mind about the rules. The
+ * handicap turns that into a dead band, so both cost the same movement — and a
+ * boundary just crossed cannot be re-crossed by jitter, or by the hand simply
+ * stopping.
+ */
+export const SLOT_STICKINESS = 0.25
+
+export interface DragSlots {
+  /** Every item's top edge, before anything moved, measured from the list's own
+   *  top rather than the viewport or the document — so a scroll during the drag
+   *  (the page, the layout's `<main>`, any ancestor) leaves them all valid. */
+  tops: number[]
+  /** Every item's bottom edge, same frame of reference. */
+  bottoms: number[]
+  /** The dragged item's own height. */
+  height: number
+  /** The index the drag started from. */
+  from: number
+  /** How far a displaced item travels: the dragged item's height + the row gap. */
+  step: number
+}
+
+/**
+ * Reads the list once, at drag start. The only DOM access in this module.
+ *
+ * `origin` is the list's own top edge in viewport coordinates; everything is
+ * stored relative to it, so auto-scrolling an ancestor mid-drag moves the list
+ * and the pointer together and none of this goes stale.
+ */
+export function measureSlots(items: readonly HTMLElement[], from: number, gap: number, origin: number): DragSlots {
+  const rects = items.map(item => item.getBoundingClientRect())
+  return {
+    tops: rects.map(rect => rect.top - origin),
+    bottoms: rects.map(rect => rect.bottom - origin),
+    height: rects[from].height,
+    from,
+    step: rects[from].height + gap,
+  }
+}
+
+/**
+ * Where the dragged item's centre ends up if it is dropped at `index`.
+ *
+ * At or above its own index it takes over that item's top edge; below it, it
+ * backs up against that item's bottom edge. With items of one height those are
+ * the same point; with mixed heights they are not, and it is the resting place
+ * the user is aiming at — not the neighbour's centre.
+ */
+function restingCentre(slots: DragSlots, index: number): number {
+  return index <= slots.from ? slots.tops[index] + slots.height / 2 : slots.bottoms[index] - slots.height / 2
+}
+
+/**
+ * The slot the dragged item is now nearest to landing in, given the one it
+ * currently holds and how far it has been dragged.
+ *
+ * Nearest — not "has crossed" — is what dnd-kit sorted by, and it is why the
+ * list opens up when it does: nearest flips at the midpoint between two slots,
+ * so half an item of travel is enough, where waiting for the item to cross a
+ * neighbour outright takes twice as long and reads as late.
+ */
+export function resolveSlot(slots: DragSlots, held: number, offset: number): number {
+  const centre = slots.tops[slots.from] + slots.height / 2 + offset
+  let best = Math.abs(centre - restingCentre(slots, held)) - slots.step * SLOT_STICKINESS
+  let next = held
+  for (let index = 0; index < slots.tops.length; index++) {
+    if (index === held) continue
+    const distance = Math.abs(centre - restingCentre(slots, index))
+    if (distance < best) {
+      best = distance
+      next = index
+    }
+  }
+  return next
+}
+
+/** How far the item at `index` has to stand aside while the drop is aimed at `to`. */
+export function shiftFor(slots: DragSlots, index: number, to: number): number {
+  if (index === slots.from) return 0
+  if (index > slots.from && index <= to) return -slots.step
+  if (index < slots.from && index >= to) return slots.step
+  return 0
+}

package/src/components/features/sortable-list/sortable-list.tsx

@@ -0,0 +1,270 @@
+'use client'
+
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
+import { dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
+import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/utils/prevent-unhandled'
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { useIsomorphicLayoutEffect } from '../../../hooks/ui/use-isomorphic-layout-effect'
+import { autoScrollAncestors, autoScrollBothWays } from '../../../utils/auto-scroll-ancestors'
+import { type DragSlots, measureSlots, resolveSlot, shiftFor } from './slot-geometry'
+
+/** Marks the elements the list reorders. Set by `useSortableItem`, never by hand. */
+export const SORTABLE_ITEM_ATTRIBUTE = 'data-sortable-item'
+
+/** How long a displaced item takes to slide into the slot it is giving up. */
+const SHIFT_MS = 200
+/** How long the dropped item takes to travel from the pointer into its slot. */
+const DROP_MS = 150
+const EASING = 'cubic-bezier(0.2, 0, 0, 1)'
+
+interface SortableListContextValue {
+  /** Distinguishes this list's drags from any other list's on the page. */
+  dragType: string
+  disabled: boolean
+  /** Reorders the list. Used by the drop AND by a handle's arrow keys. */
+  reorder: (from: number, to: number) => void
+  /** Every registered item, in DOM order. */
+  readItems: () => HTMLElement[]
+}
+
+const SortableListContext = createContext<SortableListContextValue | null>(null)
+
+export function useSortableListContext(): SortableListContextValue {
+  const context = useContext(SortableListContext)
+  if (!context) throw new Error('useSortableItem must be used inside a <SortableList>')
+  return context
+}
+
+export interface SortableListProps {
+  /** Called once, on drop or on an arrow key — never mid-drag. */
+  onReorder: (from: number, to: number) => void
+  /**
+   * Names an item for the live region, e.g. `index => scripts[index].name`.
+   * Without it a move is announced as "Item moved to position 2 of 5".
+   */
+  getItemLabel?: (index: number) => string | undefined
+  disabled?: boolean
+  className?: string
+  children: ReactNode
+}
+
+/**
+ * A vertical list whose items can be reordered by dragging a handle.
+ *
+ * **The drag moves nothing but transforms.** The item being dragged keeps its
+ * slot and is translated to follow the pointer; the items it passes are
+ * translated by exactly its height plus the row gap, into the slot it vacated.
+ * The list's layout — and so the height of the page around it — is therefore
+ * identical from the first frame of the drag to the last, which is what makes
+ * the slide safe to animate. Opening and closing real space instead (margins,
+ * `display: none`) cannot be: interrupt one of those transitions by moving the
+ * pointer, or reorder the DOM on drop, and the two ends run at different rates
+ * and the page jumps.
+ *
+ * The native drag image is switched off — the browser draws it washed out and
+ * offers no way to style it — so what follows the pointer is the real item, at
+ * full opacity, styled by the consumer off `isDragging`.
+ *
+ * Deliberately NOT what the ticket board does: a board moves cards between
+ * columns and its cards are drop targets in their own right. Here the answer is
+ * geometry over a single column, which is why it fits in one small module. The
+ * rules it sorts by live in `slot-geometry.ts`.
+ */
+export function SortableList({ onReorder, getItemLabel, disabled = false, className, children }: SortableListProps) {
+  const listRef = useRef<HTMLDivElement>(null)
+  // Stable across renders and never rendered, so there is no hydration to
+  // mismatch — unlike keying a drag on a random per-item id.
+  const dragType = useId()
+  const [announcement, setAnnouncement] = useState('')
+
+  const onReorderRef = useRef(onReorder)
+  onReorderRef.current = onReorder
+  const getItemLabelRef = useRef(getItemLabel)
+  getItemLabelRef.current = getItemLabel
+
+  // Where every item sat on screen the instant the drop happened — the "First"
+  // of the FLIP played once the reorder has committed.
+  const flipFrom = useRef<Array<readonly [HTMLElement, number]> | null>(null)
+  const [flipTick, setFlipTick] = useState(0)
+  const flipTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const readItems = useCallback(
+    () => [...(listRef.current?.querySelectorAll<HTMLElement>(`[${SORTABLE_ITEM_ATTRIBUTE}]`) ?? [])],
+    [],
+  )
+
+  /** The one way this list ever changes: say what happened, then do it. */
+  const reorder = useCallback(
+    (from: number, to: number) => {
+      if (from === to) return
+      const label = getItemLabelRef.current?.(from) ?? 'Item'
+      setAnnouncement(`${label} moved to position ${to + 1} of ${readItems().length}.`)
+      onReorderRef.current(from, to)
+    },
+    [readItems],
+  )
+
+  useEffect(() => {
+    const list = listRef.current
+    if (!list) return
+
+    /** Alive for one drag; this effect body is its whole scope. */
+    let drag: (DragSlots & { items: HTMLElement[]; to: number; startY: number }) | null = null
+
+    return combine(
+      // Dragging towards the edge of the screen — or past it — scrolls whatever
+      // actually scrolls there: the page, the layout's `<main>`, or the list
+      // itself when it has its own overflow.
+      autoScrollAncestors(list),
+      autoScrollBothWays(list),
+      // One target for the whole list: which slot a drop lands in is answered by
+      // geometry, so this only has to say "inside the list, or outside it".
+      dropTargetForElements({
+        element: list,
+        canDrop: ({ source }) => source.data.type === dragType,
+      }),
+      monitorForElements({
+        canMonitor: ({ source }) => source.data.type === dragType,
+
+        onDragStart: ({ source, location }) => {
+          // Only the list is a drop target, so a drag carried anywhere else on
+          // the page has none — and a native drag with no target under it falls
+          // back to the browser's own drop effect, which is `copy` and draws the
+          // green plus cursor. This holds it at `move` for the whole drag.
+          preventUnhandled.start()
+          const items = readItems()
+          const from = items.indexOf(source.element as HTMLElement)
+          if (from < 0) return
+          const gap = Number.parseFloat(getComputedStyle(list).rowGap) || 0
+          // The list's own top is the frame of reference for the whole drag, so
+          // that auto-scrolling under the pointer changes nothing but the origin.
+          const origin = list.getBoundingClientRect().top
+          drag = {
+            ...measureSlots(items, from, gap, origin),
+            items,
+            to: from,
+            startY: location.current.input.clientY - origin,
+          }
+        },
+
+        onDrag: ({ location }) => {
+          const current = drag
+          if (!current) return
+          // Re-read the origin every frame: auto-scroll moves the list under a
+          // pointer that has not moved, and the item has to keep up with it.
+          const offset = location.current.input.clientY - list.getBoundingClientRect().top - current.startY
+
+          // Vertical only, the way `restrictToVerticalAxis` pinned it, and with
+          // no transition: this one tracks the pointer exactly.
+          const dragged = current.items[current.from]
+          dragged.style.transition = 'none'
+          dragged.style.transform = `translateY(${offset}px)`
+
+          const to = resolveSlot(current, current.to, offset)
+          // Re-applying an unchanged shift would restart its transition every
+          // frame, so the items would creep instead of sliding.
+          if (to === current.to) return
+          current.to = to
+
+          current.items.forEach((item, index) => {
+            if (index === current.from) return
+            const shift = shiftFor(current, index, to)
+            item.style.transition = `transform ${SHIFT_MS}ms ${EASING}`
+            item.style.transform = shift ? `translateY(${shift}px)` : ''
+          })
+        },
+
+        onDrop: ({ location }) => {
+          preventUnhandled.stop()
+          const finished = drag
+          drag = null
+          if (!finished) return
+
+          // Read where everything IS, transforms and all, before letting go of
+          // them — this is what the drop animation plays back from.
+          flipFrom.current = finished.items.map(item => [item, item.getBoundingClientRect().top] as const)
+          if (flipTimer.current) clearTimeout(flipTimer.current)
+          for (const item of finished.items) {
+            item.style.transition = 'none'
+            item.style.transform = ''
+          }
+
+          // Empty means released outside the list, or cancelled with Escape —
+          // the item still has to travel back to its own slot, so the animation
+          // is scheduled either way.
+          const cancelled = location.current.dropTargets.length === 0
+          setFlipTick(tick => tick + 1)
+          if (!cancelled) reorder(finished.from, finished.to)
+        },
+      }),
+    )
+  }, [dragType, readItems, reorder])
+
+  // Runs after the commit that carries BOTH the reorder and the tick above, so
+  // the DOM is already in its final order — which is why `onReorder` never has
+  // to wait for an animation. Every item that ended up somewhere other than
+  // where it looked is put back there and released; the items that stood aside
+  // during the drag are already in place and come out with a delta of zero, so
+  // this animates the dropped item and nothing else.
+  useIsomorphicLayoutEffect(() => {
+    const from = flipFrom.current
+    flipFrom.current = null
+    if (!from) return
+
+    const moving: HTMLElement[] = []
+    for (const [item, top] of from) {
+      const delta = top - item.getBoundingClientRect().top
+      if (!delta) continue
+      item.style.transition = 'none'
+      item.style.transform = `translateY(${delta}px)`
+      moving.push(item)
+    }
+    if (moving.length === 0) return
+
+    // One forced reflow, so the browser takes the inverted position as the
+    // animation's starting point instead of coalescing it away unseen.
+    void listRef.current?.offsetHeight
+
+    for (const item of moving) {
+      item.style.transition = `transform ${DROP_MS}ms ${EASING}`
+      item.style.transform = ''
+    }
+    flipTimer.current = setTimeout(() => {
+      for (const item of moving) item.style.transition = ''
+    }, DROP_MS)
+  }, [flipTick])
+
+  useEffect(
+    () => () => {
+      if (flipTimer.current) clearTimeout(flipTimer.current)
+    },
+    [],
+  )
+
+  const context = useMemo<SortableListContextValue>(
+    () => ({ dragType, disabled, reorder, readItems }),
+    [dragType, disabled, reorder, readItems],
+  )
+
+  return (
+    <SortableListContext.Provider value={context}>
+      <div ref={listRef} className={className}>
+        {children}
+        {/* Absolutely positioned, so it is not a flex item and adds no gap. */}
+        <p aria-live="polite" className="sr-only">
+          {announcement}
+        </p>
+      </div>
+    </SortableListContext.Provider>
+  )
+}