gridsmith-ui 0.30.1 → 0.30.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/CHANGELOG.md +21 -1
  2. package/dist/chat.js +14 -8
  3. package/dist/chat.js.map +1 -1
  4. package/dist/{chunk-R5QXMNW7.js → chunk-4HJDOZ2M.js} +107 -17
  5. package/dist/chunk-4HJDOZ2M.js.map +1 -0
  6. package/dist/{chunk-SJZWEBHL.js → chunk-ACLKDE5W.js} +6 -5
  7. package/dist/chunk-ACLKDE5W.js.map +1 -0
  8. package/dist/{chunk-OVHBQT3Z.js → chunk-BZRZENBS.js} +4 -4
  9. package/dist/{chunk-OVHBQT3Z.js.map → chunk-BZRZENBS.js.map} +1 -1
  10. package/dist/{chunk-ISONVOA7.js → chunk-HVGHGBKV.js} +4 -5
  11. package/dist/chunk-HVGHGBKV.js.map +1 -0
  12. package/dist/{chunk-KMKBOTFR.js → chunk-K6IDOCGE.js} +7 -9
  13. package/dist/chunk-K6IDOCGE.js.map +1 -0
  14. package/dist/{chunk-ULCACQSA.js → chunk-MIUSSYVE.js} +3 -3
  15. package/dist/{chunk-ULCACQSA.js.map → chunk-MIUSSYVE.js.map} +1 -1
  16. package/dist/{chunk-T52LAFKG.js → chunk-SIWERRP2.js} +7 -8
  17. package/dist/chunk-SIWERRP2.js.map +1 -0
  18. package/dist/{chunk-OX3NNMWG.js → chunk-SQHKC4HA.js} +8 -5
  19. package/dist/chunk-SQHKC4HA.js.map +1 -0
  20. package/dist/{chunk-SLRTSBCJ.js → chunk-USHW523V.js} +31 -10
  21. package/dist/chunk-USHW523V.js.map +1 -0
  22. package/dist/{chunk-UDJOIVKQ.js → chunk-WWN6CQKI.js} +34 -4
  23. package/dist/chunk-WWN6CQKI.js.map +1 -0
  24. package/dist/{chunk-NEUWZUK6.js → chunk-ZASGFL5D.js} +3 -3
  25. package/dist/{chunk-NEUWZUK6.js.map → chunk-ZASGFL5D.js.map} +1 -1
  26. package/dist/{chunk-IELIF4PJ.js → chunk-ZCDA74RQ.js} +3 -3
  27. package/dist/{chunk-IELIF4PJ.js.map → chunk-ZCDA74RQ.js.map} +1 -1
  28. package/dist/data-grid.js +6 -8
  29. package/dist/data-grid.js.map +1 -1
  30. package/dist/editor-mentions.js +2 -3
  31. package/dist/editor-mentions.js.map +1 -1
  32. package/dist/editor.js +2 -4
  33. package/dist/editor.js.map +1 -1
  34. package/dist/index.d.ts +14 -1
  35. package/dist/index.js +44 -38
  36. package/dist/index.js.map +1 -1
  37. package/dist/kanban.js +7 -9
  38. package/dist/kanban.js.map +1 -1
  39. package/dist/resizable.js +6 -8
  40. package/dist/resizable.js.map +1 -1
  41. package/dist/virtualized.js +6 -8
  42. package/dist/virtualized.js.map +1 -1
  43. package/package.json +1 -1
  44. package/dist/chunk-HTXP5BMM.js +0 -38
  45. package/dist/chunk-HTXP5BMM.js.map +0 -1
  46. package/dist/chunk-ISONVOA7.js.map +0 -1
  47. package/dist/chunk-KMKBOTFR.js.map +0 -1
  48. package/dist/chunk-OX3NNMWG.js.map +0 -1
  49. package/dist/chunk-R5QXMNW7.js.map +0 -1
  50. package/dist/chunk-SJZWEBHL.js.map +0 -1
  51. package/dist/chunk-SLRTSBCJ.js.map +0 -1
  52. package/dist/chunk-T52LAFKG.js.map +0 -1
  53. package/dist/chunk-UDJOIVKQ.js.map +0 -1
  54. package/dist/chunk-WIUGPZOH.js +0 -88
  55. package/dist/chunk-WIUGPZOH.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../showcase/src/components/ResizablePanels.tsx","../../../showcase/src/components/SplitView.tsx"],"names":["PanelGroup","PanelResizeHandle","useRef","useLayoutEffect","jsx","showDetail"],"mappings":"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","file":"resizable.js","sourcesContent":["import {\n Panel,\n Group as PanelGroup,\n Separator as PanelResizeHandle,\n} from \"react-resizable-panels\";\nimport { createContext, useContext, useLayoutEffect, useRef, type ComponentProps, type RefObject } from \"react\";\nimport { cn, GROUP_FOCUS_RING } from \"../lib/utils\";\nimport { useBreakpoint } from \"../lib/use-breakpoint\";\nimport { Icon } from \"../lib/icons\";\n\ntype PanelGroupProps = ComponentProps<typeof PanelGroup>;\n\ntype Direction = \"horizontal\" | \"vertical\";\nconst DirectionCtx = createContext<Direction>(\"horizontal\");\nconst MobileCtx = createContext(false);\n\nexport interface ResizablePanelGroupProps\n extends Omit<PanelGroupProps, \"className\" | \"orientation\"> {\n direction?: Direction;\n stackOnMobile?: boolean;\n className?: string;\n /** Map of panel id → percentage (0–100). Must be an object, never an array. Panels need matching id props. */\n defaultLayout?: { [panelId: string]: number };\n /** Called after resize ends. Receives { [panelId]: number }, not number[]. */\n onLayoutChanged?: (layout: { [panelId: string]: number }) => void;\n}\n\nexport function ResizablePanelGroup({\n className,\n direction = \"horizontal\",\n stackOnMobile = true,\n ...props\n}: ResizablePanelGroupProps) {\n const isMobile = useBreakpoint(\"sm\");\n const shouldStack = stackOnMobile && isMobile && direction === \"horizontal\";\n const effectiveDirection = shouldStack ? \"vertical\" : direction;\n\n return (\n <DirectionCtx.Provider value={effectiveDirection}>\n <MobileCtx.Provider value={isMobile}>\n <PanelGroup\n className={cn(\n \"flex h-full w-full\",\n effectiveDirection === \"vertical\" && \"flex-col\",\n className,\n )}\n orientation={effectiveDirection}\n {...props}\n />\n </MobileCtx.Provider>\n </DirectionCtx.Provider>\n );\n}\n\ntype PanelProps = ComponentProps<typeof Panel>;\n\nexport interface ResizablePanelProps extends Omit<PanelProps, \"className\"> {\n className?: string;\n id?: string;\n /** number = px. \"30%\" or \"30\" = percent. \"28rem\" / \"400px\" also valid. */\n defaultSize?: number | string;\n minSize?: number | string;\n maxSize?: number | string;\n collapsible?: boolean;\n}\n\nexport function ResizablePanel({ className, ...props }: ResizablePanelProps) {\n return <Panel className={cn(\"\", className)} {...props} />;\n}\n\ntype PanelResizeHandleProps = ComponentProps<typeof PanelResizeHandle>;\n\n/** The part of an element on screen, top to bottom: inside the window and every box around it that clips or scrolls. */\nfunction visibleRange(el: HTMLElement): { top: number; bottom: number } {\n const box = el.getBoundingClientRect();\n let top = Math.max(box.top, 0);\n let bottom = Math.min(box.bottom, window.innerHeight);\n for (let node = el.parentElement; node; node = node.parentElement) {\n if (!/(auto|scroll|hidden|clip|overlay)/.test(getComputedStyle(node).overflowY)) continue;\n const r = node.getBoundingClientRect();\n top = Math.max(top, r.top + node.clientTop);\n bottom = Math.min(bottom, r.top + node.clientTop + node.clientHeight);\n }\n return { top, bottom };\n}\n\n/**\n * Sprint 25.16 A42 (P31): the grip stays in the part of the divider on screen, at its middle, so a split taller than\n * the screen (a page that grows) never hides it. It moves with any scroll around it and stays inside the divider; it\n * goes back to the middle when the divider turns (stacked on a phone).\n */\nfunction useGripInView(gripRef: RefObject<HTMLDivElement | null>, enabled: boolean) {\n useLayoutEffect(() => {\n const grip = gripRef.current;\n const handle = grip?.parentElement;\n if (!enabled || !grip || !handle || typeof ResizeObserver === \"undefined\") return;\n let frame = 0;\n const place = () => {\n frame = 0;\n const box = handle.getBoundingClientRect();\n const { top, bottom } = visibleRange(handle);\n const room = (box.height - grip.offsetHeight) / 2;\n const offset = bottom > top ? Math.max(-room, Math.min(room, (top + bottom) / 2 - (box.top + box.height / 2))) : 0;\n grip.style.transform = Math.abs(offset) >= 1 ? `translateY(${Math.round(offset)}px)` : \"\";\n };\n const schedule = () => {\n if (!frame) frame = requestAnimationFrame(place);\n };\n place();\n const ro = new ResizeObserver(schedule);\n ro.observe(handle);\n // a scroll anywhere around it: scroll events don't bubble, so the document hears them as they go down\n document.addEventListener(\"scroll\", schedule, { capture: true, passive: true });\n window.addEventListener(\"resize\", schedule);\n return () => {\n ro.disconnect();\n document.removeEventListener(\"scroll\", schedule, { capture: true });\n window.removeEventListener(\"resize\", schedule);\n if (frame) cancelAnimationFrame(frame);\n grip.style.transform = \"\";\n };\n }, [gripRef, enabled]);\n}\n\nexport interface ResizableHandleProps\n extends Omit<PanelResizeHandleProps, \"className\"> {\n withHandle?: boolean;\n className?: string;\n}\n\nexport function ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizableHandleProps) {\n const direction = useContext(DirectionCtx);\n const isMobile = useContext(MobileCtx);\n const isVertical = direction === \"vertical\";\n const gripRef = useRef<HTMLDivElement>(null);\n // the grip is kept in view whenever it can show: always with withHandle, and on keyboard focus without it\n useGripInView(gripRef, !isVertical);\n\n return (\n <PanelResizeHandle\n className={cn(\n // a group: its keyboard focus is drawn round its grip (Sprint 30), as a full-length line's outline would be cut off\n // at both its ends by the panels it divides; the line itself shows no outline of its own\n \"group relative flex items-center justify-center bg-[var(--ds-border-default)] outline-none\",\n isVertical\n ? cn(\n \"h-[var(--ds-border-width)] w-full after:absolute after:left-0 after:right-0 after:content-['']\",\n isMobile ? \"after:-top-3 after:-bottom-3\" : \"after:-top-1 after:-bottom-1\"\n )\n : cn(\n \"w-[var(--ds-border-width)] after:absolute after:inset-y-0 after:content-['']\",\n isMobile ? \"after:-left-3 after:-right-3\" : \"after:-left-1 after:-right-1\"\n ),\n \"[&[data-resize-handle-state=drag]]:bg-[var(--ds-accent-primary)]\",\n \"[&[data-resize-handle-state=hover]]:bg-[var(--ds-accent-primary)]\",\n className,\n )}\n {...props}\n >\n {/* the grip: always with withHandle; without it, shown while the handle has keyboard focus, to carry its outline */}\n <div\n ref={gripRef}\n aria-hidden=\"true\"\n className={cn(\n \"z-10 items-center justify-center rounded-[var(--ds-radius-sm)]\",\n withHandle ? \"flex\" : \"hidden group-focus-visible:flex\",\n GROUP_FOCUS_RING,\n \"border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]\",\n \"bg-[var(--ds-bg-surface)]\",\n isVertical\n ? (isMobile ? \"h-4 w-8\" : \"h-3 w-4\")\n : (isMobile ? \"h-8 w-4\" : \"h-4 w-3\"),\n )}\n >\n <Icon\n name=\"grip-vertical\"\n size={isMobile ? 12 : 10}\n className={cn(\n \"text-[var(--ds-text-muted)]\",\n isVertical && \"rotate-90\",\n )}\n />\n </div>\n </PanelResizeHandle>\n );\n}\n","import { useCallback, useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent, type ReactNode } from \"react\";\nimport { cn, FOCUS_INSET } from \"../lib/utils\";\nimport { useBelow, useCompact, useElementWidth } from \"../lib/use-compact\";\nimport { ResizablePanelGroup, ResizablePanel, ResizableHandle } from \"./ResizablePanels\";\nimport { Button } from \"./Button\";\nimport { Drawer } from \"./Drawer\";\nimport { Icon } from \"../lib/icons\";\nimport { Breadcrumbs, crumbGoes, type BreadcrumbItem } from \"./Breadcrumbs\";\nimport { useAppShell } from \"./AppShell\";\nimport { SurfaceBoundary, type SplitListReport } from \"../lib/surface-context\";\nimport { isTabStop, rememberFocus, tabStops, type RememberedFocus } from \"../lib/focus\";\nimport { FillContext, useFillHeight } from \"../lib/use-fill-height\";\nimport { useKeyboardScroll } from \"../lib/use-keyboard-scroll\";\nimport { warnOnce } from \"../lib/dev-warn\";\n\nexport type SplitViewFrame = \"fill\" | \"page\";\n\n/**\n * How far past a threshold the layout must go before a collapsed part comes back, in px: a classic scrollbar's width\n * (15 px on a Mac with a mouse, 17 on Windows), whose coming and going with the aside moved the layout back and forth\n * across the threshold (round 27 review). No wider: inside the band the answer depends on the way the width came, so a\n * wider band could keep the aside collapsed at a width where it fits.\n */\nconst THRESHOLD_BAND = 17;\n\nexport interface SplitViewProps {\n /** The list (an inbox, a queue): it scrolls on its own. */\n list: ReactNode;\n /** The selected item (a thread, a record): it fills the height and scrolls on its own. */\n detail: ReactNode;\n /** Context beside the detail (a contact, properties). The pane insets it as the Drawer it collapses into does (the page's gutter, Sprint 25.14 A36), so pass content with no padding classes (round 8). Collapses to a toggle that opens it in a Drawer when the layout is narrower than `asideCollapseBelow`. */\n aside?: ReactNode;\n /** Names the aside's toggle and Drawer. */\n asideTitle?: string;\n /**\n * Below `collapseBelow` the list shows alone; with `detailOpen` the detail replaces it, with a Back button that calls\n * `onDetailClose` (detailMode \"stack\"). The page owns the selection, so it owns this flag.\n */\n detailOpen?: boolean;\n onDetailClose?: () => void;\n /** \"stack\" (default): the detail stacks over the list below the collapse width. \"route\": the app navigates to the detail's own route instead, and this renders the list alone there. */\n detailMode?: \"stack\" | \"route\";\n /**\n * \"shown\" (default): above the collapse width the detail pane is always there — an inbox's reading pane may show a\n * placeholder. \"hidden\" (Sprint 25.7, C3): `detailOpen` decides at every width. Closed, the list takes the whole\n * width; open, the pane appears beside it at the width the user last gave it, with a close control that calls\n * `onDetailClose`. For boards, timelines and lists of records. The list stays mounted, so a board or a timeline keeps\n * its scroll and zoom.\n */\n closedDetail?: \"shown\" | \"hidden\";\n /** The open pane's close control, named for a screen reader (closedDetail=\"hidden\"). Default \"Close\". */\n closeLabel?: string;\n backLabel?: string;\n /**\n * The open item's path (Sprint 25.16 A19, P11): crumbs from the top of what the list shows down to the open view's\n * parent, never the view itself (the owner's review of 1 October) — a document in a folder tree passes its folders\n * (\"Documents › Architecture\"), a view below an item passes the item as well (\"… › System Design Overview\", above its\n * metadata). The view's own title, its first heading, names it, as a page's title does under its PageHeader's\n * breadcrumbs. The view draws the path above the detail at every width, where the stacked Back would be, and its last\n * crumb is the way back: the stacked Back goes, and the detail draws no back of its own\n * (gs:breadcrumbs-and-back-button-2). A crumb that is a page takes its href and goes through the shell's navigate; an\n * item held in state, or a folder that isn't a page, takes an onClick (select it in the tree); a last crumb with\n * neither closes the detail. On a phone the path keeps its first crumb and its last two, so the parent always shows.\n * One crumb or more; with none, today's Back.\n */\n detailPath?: BreadcrumbItem[];\n /** Percent of the width the list takes; the divider is draggable. */\n listWidth?: number;\n listMinWidth?: number;\n asideWidth?: number;\n /** Below this width of the layout itself (px) the list and detail stop sitting side by side. */\n collapseBelow?: number;\n /** Below this width of the layout itself (px) the aside becomes a toggle. */\n asideCollapseBelow?: number;\n /**\n * The narrowest the open item's pane may be beside an aside (px). When the list and the aside would leave it less,\n * the aside becomes its toggle and Drawer, so the item keeps the room its content needs: the aside is the secondary\n * content (round 27, R27-13, the owner: \"which information is more important\"). An item that holds a wide table or a\n * card grid may need more: pass it.\n */\n detailMinWidth?: number;\n /** A bordered, rounded surface (inside a page with padding) instead of edge to edge (filling <main>). */\n bordered?: boolean;\n /** \"fill\": the page root, flush to the shell, h-full against main, each pane owns its inset. \"page\" (default): inside a PageContainer under a PageHeader. */\n frame?: SplitViewFrame;\n \"aria-label\"?: string;\n className?: string;\n}\n\n/**\n * The reading-pane composition (Sprint 25.2, R3): one surface with dividers —\n * list, detail and an optional aside — that fills the height it is given (an\n * AppShell's <main> already gives it) and never three cards with gaps. The\n * panels compose ResizablePanelGroup, so the dividers drag. Below the collapse\n * width, measured on the layout itself, the list shows alone and the detail\n * stacks over it (or the app routes to it); the aside collapses to a toggle.\n * The page owns the selection and assembles the contents; keyboard movement\n * through the list is the list's job (StackedList selectedId).\n */\nexport function SplitView({\n list,\n detail,\n aside,\n asideTitle = \"Details\",\n detailOpen = false,\n onDetailClose,\n detailMode = \"stack\",\n closedDetail = \"shown\",\n closeLabel = \"Close\",\n backLabel = \"Back\",\n detailPath,\n listWidth = 35,\n listMinWidth = 25,\n asideWidth = 25,\n collapseBelow = 768,\n asideCollapseBelow = 1024,\n detailMinWidth = 480,\n bordered = false,\n frame = \"page\",\n \"aria-label\": ariaLabel,\n className,\n}: SplitViewProps) {\n const rootRef = useRef<HTMLDivElement>(null);\n const compact = useCompact(rootRef, collapseBelow, THRESHOLD_BAND);\n const layoutWidth = useElementWidth(rootRef);\n // The panels' shares as the user left them (the review: the defaults were read, so a list dragged wider left the item\n // under its minimum beside the aside); the aside's last share stands in while it is collapsed.\n const [shares, setShares] = useState<{ list?: number; aside?: number }>({});\n const listShare = shares.list ?? listWidth;\n const asideShare = shares.aside ?? asideWidth;\n // the aside yields when the layout is narrow, or when beside it the item would have less than its minimum\n const itemShare = (100 - listShare - asideShare) / 100;\n const itemBesideAside = aside ? layoutWidth * itemShare : 0;\n // the item moves by its share of the scrollbar's width, so its band is that share of the layout's\n const itemSqueezed = useBelow(itemBesideAside, detailMinWidth, THRESHOLD_BAND * Math.max(0, itemShare));\n const asideCollapsed = useBelow(layoutWidth, asideCollapseBelow, THRESHOLD_BAND) || itemSqueezed;\n const [asideWantsOpen, setAsideWantsOpen] = useState(false);\n const hiding = closedDetail === \"hidden\";\n // Hidden: the aside belongs to the open item, so it (its pane, its toggle, its Drawer) goes with the pane, and a\n // Drawer left open does not come back with the next item (render-time state adjustment).\n const showAside = !!aside && (!hiding || detailOpen);\n if (hiding && !detailOpen && asideWantsOpen) setAsideWantsOpen(false);\n // on a phone the aside's Drawer belongs to the item on screen: Back closes it with the item\n if (compact && !detailOpen && asideWantsOpen) setAsideWantsOpen(false);\n const asideOpen = asideCollapsed && asideWantsOpen;\n const region = ariaLabel ? { role: \"region\" as const, \"aria-label\": ariaLabel } : {};\n // A19: the item's path stands in for Back, its last crumb (the view's parent) going up one level; its bar insets at the\n // page's gutter, as the aside's content does (Sprint 25.14 A36). A last crumb that goes nowhere of its own closes the\n // detail, as Back did, so the path is always a way back.\n const path = detailPath && detailPath.length > 0\n ? detailPath.map((crumb, i) => (i === detailPath.length - 1 && !crumbGoes(crumb) && onDetailClose ? { ...crumb, onClick: onDetailClose } : crumb))\n : null;\n // fill: the page root, flush to the shell on every side (no border, no radius, no padding of its own); h-full\n // resolves against <main> because the shell is a flex column down to it. page: inside a PageContainer under a\n // PageHeader, where `bordered` draws the surface. Each pane owns its own inset either way.\n const isFill = frame === \"fill\";\n // Sprint 25.14 A44 (P32): the list pane's content reports what it is, as a wrapped PageHeader does to its\n // PageContainer: content that draws its own frame or cards (a KanbanBoard, a CardGrid, a Table), or content with no\n // frame of its own that scrolls inside the pane (a StackedList, a Gantt). No frame around what frames itself: when the\n // pane holds only the first kind, the list sits on the canvas with nothing drawn behind it and the open item on the\n // surface, whatever `bordered` says. Anything that scrolls inside keeps the hairline, which shows where it scrolls.\n const listHolds = useRef({ framed: 0, scrolls: 0 });\n const [framesItself, setFramesItself] = useState(false);\n const reportToList = useCallback<SplitListReport>((kind, present) => {\n const held = listHolds.current;\n held[kind] = Math.max(0, held[kind] + (present ? 1 : -1));\n setFramesItself(held.framed > 0 && held.scrolls === 0);\n }, []);\n const onCanvas = isFill || framesItself;\n // In a shell with an app footer the children wrapper has no definite height, so h-full cannot resolve; the shell\n // publishes main's height and fill takes it (the footer then sits below the fold, as it must under a full pane).\n const shell = useAppShell();\n // Sprint 25.16 A42 (P31): a page frame that is the page's last content takes the height under its header, so its panes\n // scroll inside it and the page doesn't; what's inside the view takes its pane's height (FillContext)\n const pageFill = useFillHeight(rootRef, !isFill);\n // each pane scrolls inside the view: one with nothing in it to Tab to (a message's text) is a Tab stop of its own, so a\n // keyboard can scroll it (WCAG 2.1.1)\n const [listScroll, setListScroll] = useState<HTMLDivElement | null>(null);\n const [detailScroll, setDetailScroll] = useState<HTMLDivElement | null>(null);\n const [asideScroll, setAsideScroll] = useState<HTMLDivElement | null>(null);\n const [stackedListScroll, setStackedListScroll] = useState<HTMLDivElement | null>(null);\n // Sprint 25.29 item 16: with `detailOpen` and no `onDetailClose`, the phone's Back couldn't work, and a page that keeps\n // its detail open stranded a phone user away from the list (run 79's folder tree). Without the handler the view keeps\n // its own \"showing the list\" on phones, so Back works, and a press in the list shows the detail again; with it, the\n // page decides, as before.\n const [listShown, setListShown] = useState(false);\n if (listShown && (onDetailClose || !detailOpen || !compact)) setListShown(false);\n useEffect(() => {\n if (detailOpen && !onDetailClose && detailMode === \"stack\") {\n warnOnce(\"SplitView\", \"detailOpen is set without onDetailClose: below the collapse width, Back can only show the list again, and the page never hears of it. Pass onDetailClose to close the detail.\");\n }\n }, [detailOpen, onDetailClose, detailMode]);\n // On a phone, the detail giving way to the list (Back, the page's or the view's own) leaves focus on the list's chosen\n // item, else its first control, never on the page\n const detailOnPhone = compact && detailMode === \"stack\" && detailOpen && !listShown;\n const wasDetailOnPhone = useRef(detailOnPhone);\n useLayoutEffect(() => {\n const was = wasDetailOnPhone.current;\n wasDetailOnPhone.current = detailOnPhone;\n if (!was || detailOnPhone) return;\n const active = document.activeElement;\n if (active && active !== document.body && active.isConnected) return;\n const pane = stackedListScroll;\n const chosen = pane?.querySelector<HTMLElement>('[aria-current=\"true\"], [aria-current=\"page\"], [aria-selected=\"true\"]');\n const target = (chosen && (isTabStop(chosen) ? chosen : tabStops(chosen)[0])) || (pane ? tabStops(pane)[0] : undefined);\n (target ?? pane)?.focus();\n });\n const [stackedDetailScroll, setStackedDetailScroll] = useState<HTMLDivElement | null>(null);\n // named for what they hold (the review of 1 October): the list by the view's own name, the item by its title (its\n // first heading; the path ends at its parent, so never names it)\n const listName = ariaLabel ? `${ariaLabel} list` : \"List\";\n const itemName = ariaLabel ? `${ariaLabel} item` : \"Item\";\n useKeyboardScroll(listScroll, listName, !compact);\n useKeyboardScroll(detailScroll, itemName, !compact, true);\n useKeyboardScroll(asideScroll, asideTitle, !compact);\n useKeyboardScroll(stackedListScroll, listName, compact);\n useKeyboardScroll(stackedDetailScroll, itemName, compact, true);\n const fillStyle = isFill && shell?.hasFooter ? { height: \"var(--ds-main-height, 100%)\" } : pageFill != null ? { height: pageFill } : undefined;\n // Edge to edge the list sits on the page's canvas, like every other page, and the open item (its detail and its aside)\n // on the surface (round 27, R27-12, the owner: the whole split on the surface read as a different page). A page frame,\n // bordered or not, stays one surface: a card on the canvas. Beside a list that frames itself, a page frame's open item\n // is that card (rounded, and bordered when the view is), as the page's other cards are; edge to edge it is square.\n const itemSurface = !onCanvas ? undefined : isFill\n ? \"bg-[var(--ds-bg-surface)]\"\n : cn(\"bg-[var(--ds-bg-surface)] rounded-[var(--ds-radius-md)] overflow-hidden\", bordered && \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\");\n const surface = cn(\n \"h-full min-h-0 w-full\",\n !onCanvas && \"bg-[var(--ds-bg-surface)]\",\n isFill && \"rounded-none border-0\",\n bordered && !onCanvas && \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] rounded-[var(--ds-radius-md)] overflow-hidden\",\n className,\n );\n // each pane is a surface of its own: what a Card around the view, or the list pane, tells content stops at its edge\n const listContent = <SurfaceBoundary pane=\"list\" framer={reportToList}>{list}</SurfaceBoundary>;\n const detailContent = <SurfaceBoundary pane=\"detail\">{detail}</SurfaceBoundary>;\n\n // closedDetail=\"hidden\" (C3): the pane opens beside the list at the width the user last gave it; closing it returns\n // focus to the item the pane shows, or its neighbour if that item is gone (D14(e)): the list's selected item, else\n // the last list item that took focus, checked on each render while the pane is open, so switching items is followed.\n // A selection kept in the URL changes the path, so the item is remembered whatever the route does. With no item\n // (opened on load, or from outside the list) focus goes to the list's first Tab stop. No overlay layer: an\n // assistant opened earlier keeps Escape.\n const [listPct, setListPct] = useState(listWidth);\n const paneRef = useRef<HTMLDivElement>(null);\n const shown = useRef<RememberedFocus | null>(null);\n const lastInList = useRef<HTMLElement | null>(null);\n const wasOpen = useRef(false);\n useLayoutEffect(() => {\n if (!hiding) return;\n const listPane = rootRef.current?.querySelector<HTMLElement>('[data-pane=\"list\"]') ?? null;\n if (detailOpen) {\n wasOpen.current = true;\n const selected = listPane?.querySelector<HTMLElement>('[aria-current=\"true\"], [aria-selected=\"true\"]');\n const last = lastInList.current;\n const item = (selected && (isTabStop(selected) ? selected : tabStops(selected)[0]))\n || (last?.isConnected && listPane?.contains(last) ? last : null);\n if (item && item !== shown.current?.el) shown.current = rememberFocus(item, { ignoreRoute: true });\n return;\n }\n if (!wasOpen.current) return;\n wasOpen.current = false;\n const r = shown.current;\n shown.current = null;\n const active = document.activeElement;\n if (active && active !== document.body && active.isConnected) return;\n const first = listPane ? tabStops(listPane)[0] : undefined;\n if (!r?.restore(first)) first?.focus();\n });\n const onPaneKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.key !== \"Escape\" || e.defaultPrevented || !onDetailClose) return;\n const t = e.target as HTMLElement;\n // the pane's own DOM only — a portalled popup inside it bubbles here in React's tree — and never from a field\n if (!paneRef.current?.contains(t) || t.closest(\"input, textarea, select, [contenteditable='true']\")) return;\n e.preventDefault();\n onDetailClose();\n };\n\n if (compact) {\n const showDetail = detailOnPhone;\n // on a phone the item's aside is a toggle beside Back that opens it in a Drawer, as it is on a narrow desktop (the\n // round 27 review: below the collapse width it could not be reached at all)\n const phoneAside = showDetail && !!aside;\n return (\n <FillContext value={true}>\n <div ref={rootRef} data-split-view={showDetail ? \"detail\" : \"list\"} data-frame={frame} data-fill={pageFill != null ? \"\" : undefined} {...region} className={cn(surface, \"flex flex-col\")} style={fillStyle}>\n {showDetail && (\n <div className={cn(\"flex-1 min-h-0 flex flex-col\", itemSurface)}>\n <div className={cn(\"shrink-0 flex items-center justify-between gap-ds-2 py-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\", path ? \"px-[var(--ds-page-gutter)]\" : \"px-ds-3\")}>\n {path\n ? <Breadcrumbs items={path} maxItems={3} aria-label=\"Path\" className=\"min-w-0\" />\n // a link, alone at the start of the header (Sprint 25.19 G4, page_composition#51): its words line up with the header's edge\n : <Button type=\"button\" variant=\"link\" size=\"sm\" iconLeft={<Icon name=\"arrow-left\" size={14} />} onClick={onDetailClose ?? (() => setListShown(true))}>{backLabel}</Button>}\n {phoneAside && <Button type=\"button\" variant=\"ghost\" size=\"sm\" iconLeft={<Icon name=\"info\" size={14} />} onClick={() => setAsideWantsOpen(true)} aria-expanded={asideWantsOpen}>{asideTitle}</Button>}\n </div>\n <div ref={setStackedDetailScroll} className={cn(\"flex-1 min-h-0 overflow-y-auto scroll-p-[4px]\", FOCUS_INSET)}>{detailContent}</div>\n </div>\n )}\n {/* Sprint 25.14 A44 (the review of 30 September): the list stays mounted while the stacked detail is shown, as it\n does beside it on a wider screen, so a board keeps its scroll and its report (the view kept its frame\n off only while the board was on screen), and Back finds the list as the user left it */}\n <div ref={setStackedListScroll} className={cn(\"flex-1 min-h-0 overflow-y-auto scroll-p-[4px]\", FOCUS_INSET)} hidden={showDetail || undefined}\n onClickCapture={onDetailClose ? undefined : () => setListShown(false)}>{listContent}</div>\n {phoneAside && (\n <Drawer open={asideWantsOpen} onClose={() => setAsideWantsOpen(false)} title={asideTitle} position=\"right\">\n {aside}\n </Drawer>\n )}\n </div>\n </FillContext>\n );\n }\n\n const asideButton = showAside && asideCollapsed\n ? <Button type=\"button\" variant=\"ghost\" size=\"sm\" iconLeft={<Icon name=\"info\" size={14} />} onClick={() => setAsideWantsOpen(true)} aria-expanded={asideOpen}>{asideTitle}</Button>\n : null;\n const closeButton = hiding && onDetailClose\n ? <Button type=\"button\" variant=\"ghost\" size=\"icon-sm\" aria-label={closeLabel} onClick={onDetailClose}><Icon name=\"close\" size={14} /></Button>\n : null;\n const paneBar = path || asideButton || closeButton ? (\n <div className={cn(\"shrink-0 flex items-center gap-ds-1 py-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\", path ? \"justify-between px-[var(--ds-page-gutter)]\" : \"justify-end px-ds-3\")}>\n {path && <Breadcrumbs items={path} aria-label=\"Path\" className=\"min-w-0\" />}\n {(asideButton || closeButton) && <div className=\"shrink-0 flex items-center gap-ds-1\">{asideButton}{closeButton}</div>}\n </div>\n ) : null;\n const showDetail = !hiding || detailOpen;\n\n return (\n <FillContext value={true}>\n <div ref={rootRef} data-split-view={hiding && !detailOpen ? \"list\" : \"split\"} data-frame={frame} data-fill={pageFill != null ? \"\" : undefined} {...region} className={surface} style={fillStyle}>\n <ResizablePanelGroup\n direction=\"horizontal\"\n stackOnMobile={false}\n className=\"h-full\"\n // the width the user gives the list is kept, so a closed pane reopens at it; the shares decide when the aside yields\n onLayoutChanged={(layout) => {\n setShares((prev) => (prev.list === (layout.list ?? prev.list) && prev.aside === (layout.aside ?? prev.aside) ? prev : { list: layout.list ?? prev.list, aside: layout.aside ?? prev.aside }));\n if (hiding && layout.detail != null && layout.list != null) setListPct(layout.list);\n }}\n >\n <ResizablePanel id=\"list\" defaultSize={`${hiding ? (detailOpen ? listPct : 100) : listWidth}%`} minSize={`${listMinWidth}%`}>\n {/* scroll padding: what the keyboard reaches comes into view with room for its outline (Sprint 30, P3); a list's\n rows run to the pane's edges and draw their outline inside (StackedList) */}\n <div ref={setListScroll} data-pane=\"list\" className={cn(\"h-full min-h-0 overflow-y-auto scroll-p-[4px]\", FOCUS_INSET)} onFocus={hiding ? (e) => { lastInList.current = e.target; } : undefined}>\n {listContent}\n </div>\n </ResizablePanel>\n {showDetail && (\n <>\n <ResizableHandle withHandle />\n <ResizablePanel id=\"detail\" minSize=\"30%\">\n <div ref={paneRef} data-pane=\"detail\" className={cn(\"h-full min-h-0 flex flex-col\", itemSurface)} onKeyDown={hiding ? onPaneKeyDown : undefined}>\n {paneBar}\n <div ref={setDetailScroll} className={cn(\"flex-1 min-h-0 overflow-y-auto scroll-p-[4px]\", FOCUS_INSET)}>{detailContent}</div>\n </div>\n </ResizablePanel>\n </>\n )}\n {showAside && !asideCollapsed && (\n <>\n <ResizableHandle withHandle />\n <ResizablePanel id=\"aside\" defaultSize={`${asideWidth}%`} minSize=\"15%\">\n {/* the Drawer's body inset, so the aside's content sits where it will in the Drawer (Sprint 25.14 A36) */}\n <div ref={setAsideScroll} data-pane=\"aside\" className={cn(\"h-full min-h-0 overflow-y-auto py-ds-5 px-[var(--ds-page-gutter)] scroll-p-[4px]\", itemSurface, FOCUS_INSET)}><SurfaceBoundary pane=\"aside\">{aside}</SurfaceBoundary></div>\n </ResizablePanel>\n </>\n )}\n </ResizablePanelGroup>\n {showAside && asideCollapsed && (\n <Drawer open={asideOpen} onClose={() => setAsideWantsOpen(false)} title={asideTitle} position=\"right\">\n {aside}\n </Drawer>\n )}\n </div>\n </FillContext>\n );\n}\n"]}
1
+ {"version":3,"sources":["../../../showcase/src/components/ResizablePanels.tsx","../../../showcase/src/components/SplitView.tsx"],"names":["PanelGroup","PanelResizeHandle","useRef","useLayoutEffect","jsx","showDetail"],"mappings":"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","file":"resizable.js","sourcesContent":["import {\n Panel,\n Group as PanelGroup,\n Separator as PanelResizeHandle,\n} from \"react-resizable-panels\";\nimport { createContext, useContext, useLayoutEffect, useRef, type ComponentProps, type RefObject } from \"react\";\nimport { cn, GROUP_FOCUS_RING } from \"../lib/utils\";\nimport { useBreakpoint } from \"../lib/use-breakpoint\";\nimport { Icon } from \"../lib/icons\";\n\ntype PanelGroupProps = ComponentProps<typeof PanelGroup>;\n\ntype Direction = \"horizontal\" | \"vertical\";\nconst DirectionCtx = createContext<Direction>(\"horizontal\");\nconst MobileCtx = createContext(false);\n\nexport interface ResizablePanelGroupProps\n extends Omit<PanelGroupProps, \"className\" | \"orientation\"> {\n direction?: Direction;\n stackOnMobile?: boolean;\n className?: string;\n /** Map of panel id → percentage (0–100). Must be an object, never an array. Panels need matching id props. */\n defaultLayout?: { [panelId: string]: number };\n /** Called after resize ends. Receives { [panelId]: number }, not number[]. */\n onLayoutChanged?: (layout: { [panelId: string]: number }) => void;\n}\n\nexport function ResizablePanelGroup({\n className,\n direction = \"horizontal\",\n stackOnMobile = true,\n ...props\n}: ResizablePanelGroupProps) {\n const isMobile = useBreakpoint(\"sm\");\n const shouldStack = stackOnMobile && isMobile && direction === \"horizontal\";\n const effectiveDirection = shouldStack ? \"vertical\" : direction;\n\n return (\n <DirectionCtx.Provider value={effectiveDirection}>\n <MobileCtx.Provider value={isMobile}>\n <PanelGroup\n className={cn(\n \"flex h-full w-full\",\n effectiveDirection === \"vertical\" && \"flex-col\",\n className,\n )}\n orientation={effectiveDirection}\n {...props}\n />\n </MobileCtx.Provider>\n </DirectionCtx.Provider>\n );\n}\n\ntype PanelProps = ComponentProps<typeof Panel>;\n\nexport interface ResizablePanelProps extends Omit<PanelProps, \"className\"> {\n className?: string;\n id?: string;\n /** number = px. \"30%\" or \"30\" = percent. \"28rem\" / \"400px\" also valid. */\n defaultSize?: number | string;\n minSize?: number | string;\n maxSize?: number | string;\n collapsible?: boolean;\n}\n\nexport function ResizablePanel({ className, ...props }: ResizablePanelProps) {\n return <Panel className={cn(\"\", className)} {...props} />;\n}\n\ntype PanelResizeHandleProps = ComponentProps<typeof PanelResizeHandle>;\n\n/** The part of an element on screen, top to bottom: inside the window and every box around it that clips or scrolls. */\nfunction visibleRange(el: HTMLElement): { top: number; bottom: number } {\n const box = el.getBoundingClientRect();\n let top = Math.max(box.top, 0);\n let bottom = Math.min(box.bottom, window.innerHeight);\n for (let node = el.parentElement; node; node = node.parentElement) {\n if (!/(auto|scroll|hidden|clip|overlay)/.test(getComputedStyle(node).overflowY)) continue;\n const r = node.getBoundingClientRect();\n top = Math.max(top, r.top + node.clientTop);\n bottom = Math.min(bottom, r.top + node.clientTop + node.clientHeight);\n }\n return { top, bottom };\n}\n\n/**\n * Sprint 25.16 A42 (P31): the grip stays in the part of the divider on screen, at its middle, so a split taller than\n * the screen (a page that grows) never hides it. It moves with any scroll around it and stays inside the divider; it\n * goes back to the middle when the divider turns (stacked on a phone).\n */\nfunction useGripInView(gripRef: RefObject<HTMLDivElement | null>, enabled: boolean) {\n useLayoutEffect(() => {\n const grip = gripRef.current;\n const handle = grip?.parentElement;\n if (!enabled || !grip || !handle || typeof ResizeObserver === \"undefined\") return;\n let frame = 0;\n const place = () => {\n frame = 0;\n const box = handle.getBoundingClientRect();\n const { top, bottom } = visibleRange(handle);\n const room = (box.height - grip.offsetHeight) / 2;\n const offset = bottom > top ? Math.max(-room, Math.min(room, (top + bottom) / 2 - (box.top + box.height / 2))) : 0;\n grip.style.transform = Math.abs(offset) >= 1 ? `translateY(${Math.round(offset)}px)` : \"\";\n };\n const schedule = () => {\n if (!frame) frame = requestAnimationFrame(place);\n };\n place();\n const ro = new ResizeObserver(schedule);\n ro.observe(handle);\n // a scroll anywhere around it: scroll events don't bubble, so the document hears them as they go down\n document.addEventListener(\"scroll\", schedule, { capture: true, passive: true });\n window.addEventListener(\"resize\", schedule);\n return () => {\n ro.disconnect();\n document.removeEventListener(\"scroll\", schedule, { capture: true });\n window.removeEventListener(\"resize\", schedule);\n if (frame) cancelAnimationFrame(frame);\n grip.style.transform = \"\";\n };\n }, [gripRef, enabled]);\n}\n\nexport interface ResizableHandleProps\n extends Omit<PanelResizeHandleProps, \"className\"> {\n withHandle?: boolean;\n className?: string;\n}\n\nexport function ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizableHandleProps) {\n const direction = useContext(DirectionCtx);\n const isMobile = useContext(MobileCtx);\n const isVertical = direction === \"vertical\";\n const gripRef = useRef<HTMLDivElement>(null);\n // the grip is kept in view whenever it can show: always with withHandle, and on keyboard focus without it\n useGripInView(gripRef, !isVertical);\n\n return (\n <PanelResizeHandle\n className={cn(\n // a group: its keyboard focus is drawn round its grip (Sprint 30), as a full-length line's outline would be cut off\n // at both its ends by the panels it divides; the line itself shows no outline of its own\n \"group relative flex items-center justify-center bg-[var(--ds-border-default)] outline-none\",\n isVertical\n ? cn(\n \"h-[var(--ds-border-width)] w-full after:absolute after:left-0 after:right-0 after:content-['']\",\n isMobile ? \"after:-top-3 after:-bottom-3\" : \"after:-top-1 after:-bottom-1\"\n )\n : cn(\n \"w-[var(--ds-border-width)] after:absolute after:inset-y-0 after:content-['']\",\n isMobile ? \"after:-left-3 after:-right-3\" : \"after:-left-1 after:-right-1\"\n ),\n \"[&[data-resize-handle-state=drag]]:bg-[var(--ds-accent-primary)]\",\n \"[&[data-resize-handle-state=hover]]:bg-[var(--ds-accent-primary)]\",\n className,\n )}\n {...props}\n >\n {/* the grip: always with withHandle; without it, shown while the handle has keyboard focus, to carry its outline */}\n <div\n ref={gripRef}\n aria-hidden=\"true\"\n className={cn(\n \"z-10 items-center justify-center rounded-[var(--ds-radius-sm)]\",\n withHandle ? \"flex\" : \"hidden group-focus-visible:flex\",\n GROUP_FOCUS_RING,\n \"border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]\",\n \"bg-[var(--ds-bg-surface)]\",\n isVertical\n ? (isMobile ? \"h-4 w-8\" : \"h-3 w-4\")\n : (isMobile ? \"h-8 w-4\" : \"h-4 w-3\"),\n )}\n >\n <Icon\n name=\"grip-vertical\"\n size={isMobile ? 12 : 10}\n className={cn(\n \"text-[var(--ds-text-muted)]\",\n isVertical && \"rotate-90\",\n )}\n />\n </div>\n </PanelResizeHandle>\n );\n}\n","import { useCallback, useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent, type ReactNode } from \"react\";\nimport { cn, FOCUS_INSET } from \"../lib/utils\";\nimport { useBelow, useCompact, useElementWidth } from \"../lib/use-compact\";\nimport { ResizablePanelGroup, ResizablePanel, ResizableHandle } from \"./ResizablePanels\";\nimport { Button } from \"./Button\";\nimport { Drawer } from \"./Drawer\";\nimport { Icon } from \"../lib/icons\";\nimport { Breadcrumbs, crumbGoes, type BreadcrumbItem } from \"./Breadcrumbs\";\nimport { useAppShell } from \"./AppShell\";\nimport { SurfaceBoundary, type SplitListReport } from \"../lib/surface-context\";\nimport { isTabStop, rememberFocus, tabStops, type RememberedFocus } from \"../lib/focus\";\nimport { FillContext, useFillHeight } from \"../lib/use-fill-height\";\nimport { useKeyboardScroll } from \"../lib/use-keyboard-scroll\";\nimport { warnOnce } from \"../lib/dev-warn\";\n\nexport type SplitViewFrame = \"fill\" | \"page\";\n\n/**\n * How far past a threshold the layout must go before a collapsed part comes back, in px: a classic scrollbar's width\n * (15 px on a Mac with a mouse, 17 on Windows), whose coming and going with the aside moved the layout back and forth\n * across the threshold (round 27 review). No wider: inside the band the answer depends on the way the width came, so a\n * wider band could keep the aside collapsed at a width where it fits.\n */\nconst THRESHOLD_BAND = 17;\n\nexport interface SplitViewProps {\n /** The list (an inbox, a queue): it scrolls on its own. */\n list: ReactNode;\n /** The selected item (a thread, a record): it fills the height and scrolls on its own. */\n detail: ReactNode;\n /** Context beside the detail (a contact, properties). The pane insets it as the Drawer it collapses into does (the page's gutter, Sprint 25.14 A36), so pass content with no padding classes (round 8). Collapses to a toggle that opens it in a Drawer when the layout is narrower than `asideCollapseBelow`. */\n aside?: ReactNode;\n /** Names the aside's toggle and Drawer. */\n asideTitle?: string;\n /**\n * Below `collapseBelow` the list shows alone; with `detailOpen` the detail replaces it, with a Back button that calls\n * `onDetailClose` (detailMode \"stack\"). The page owns the selection, so it owns this flag.\n */\n detailOpen?: boolean;\n onDetailClose?: () => void;\n /** \"stack\" (default): the detail stacks over the list below the collapse width. \"route\": the app navigates to the detail's own route instead, and this renders the list alone there. */\n detailMode?: \"stack\" | \"route\";\n /**\n * \"shown\" (default): above the collapse width the detail pane is always there — an inbox's reading pane may show a\n * placeholder. \"hidden\" (Sprint 25.7, C3): `detailOpen` decides at every width. Closed, the list takes the whole\n * width; open, the pane appears beside it at the width the user last gave it, with a close control that calls\n * `onDetailClose`. For boards, timelines and lists of records. The list stays mounted, so a board or a timeline keeps\n * its scroll and zoom.\n */\n closedDetail?: \"shown\" | \"hidden\";\n /** The open pane's close control, named for a screen reader (closedDetail=\"hidden\"). Default \"Close\". */\n closeLabel?: string;\n backLabel?: string;\n /**\n * The open item's path (Sprint 25.16 A19, P11): crumbs from the top of what the list shows down to the open view's\n * parent, never the view itself (the owner's review of 1 October) — a document in a folder tree passes its folders\n * (\"Documents › Architecture\"), a view below an item passes the item as well (\"… › System Design Overview\", above its\n * metadata). The view's own title, its first heading, names it, as a page's title does under its PageHeader's\n * breadcrumbs. The view draws the path above the detail at every width, where the stacked Back would be, and its last\n * crumb is the way back: the stacked Back goes, and the detail draws no back of its own\n * (gs:breadcrumbs-and-back-button-2). A crumb that is a page takes its href and goes through the shell's navigate; an\n * item held in state, or a folder that isn't a page, takes an onClick (select it in the tree); a last crumb with\n * neither closes the detail. On a phone the path keeps its first crumb and its last two, so the parent always shows.\n * One crumb or more; with none, today's Back.\n */\n detailPath?: BreadcrumbItem[];\n /** Percent of the width the list takes; the divider is draggable. */\n listWidth?: number;\n listMinWidth?: number;\n asideWidth?: number;\n /** Below this width of the layout itself (px) the list and detail stop sitting side by side. */\n collapseBelow?: number;\n /** Below this width of the layout itself (px) the aside becomes a toggle. */\n asideCollapseBelow?: number;\n /**\n * The narrowest the open item's pane may be beside an aside (px). When the list and the aside would leave it less,\n * the aside becomes its toggle and Drawer, so the item keeps the room its content needs: the aside is the secondary\n * content (round 27, R27-13, the owner: \"which information is more important\"). An item that holds a wide table or a\n * card grid may need more: pass it.\n */\n detailMinWidth?: number;\n /** A bordered, rounded surface (inside a page with padding) instead of edge to edge (filling <main>). */\n bordered?: boolean;\n /** \"fill\": the page root, flush to the shell, h-full against main, each pane owns its inset. \"page\" (default): inside a PageContainer under a PageHeader. */\n frame?: SplitViewFrame;\n \"aria-label\"?: string;\n className?: string;\n}\n\n/**\n * The reading-pane composition (Sprint 25.2, R3): one surface with dividers —\n * list, detail and an optional aside — that fills the height it is given (an\n * AppShell's <main> already gives it) and never three cards with gaps. The\n * panels compose ResizablePanelGroup, so the dividers drag. Below the collapse\n * width, measured on the layout itself, the list shows alone and the detail\n * stacks over it (or the app routes to it); the aside collapses to a toggle.\n * The page owns the selection and assembles the contents; keyboard movement\n * through the list is the list's job (StackedList selectedId).\n */\nexport function SplitView({\n list,\n detail,\n aside,\n asideTitle = \"Details\",\n detailOpen = false,\n onDetailClose,\n detailMode = \"stack\",\n closedDetail = \"shown\",\n closeLabel = \"Close\",\n backLabel = \"Back\",\n detailPath,\n listWidth = 35,\n listMinWidth = 25,\n asideWidth = 25,\n collapseBelow = 768,\n asideCollapseBelow = 1024,\n detailMinWidth = 480,\n bordered = false,\n frame = \"page\",\n \"aria-label\": ariaLabel,\n className,\n}: SplitViewProps) {\n const rootRef = useRef<HTMLDivElement>(null);\n const compact = useCompact(rootRef, collapseBelow, THRESHOLD_BAND);\n const layoutWidth = useElementWidth(rootRef);\n // The panels' shares as the user left them (the review: the defaults were read, so a list dragged wider left the item\n // under its minimum beside the aside); the aside's last share stands in while it is collapsed.\n const [shares, setShares] = useState<{ list?: number; aside?: number }>({});\n const listShare = shares.list ?? listWidth;\n const asideShare = shares.aside ?? asideWidth;\n // the aside yields when the layout is narrow, or when beside it the item would have less than its minimum\n const itemShare = (100 - listShare - asideShare) / 100;\n const itemBesideAside = aside ? layoutWidth * itemShare : 0;\n // the item moves by its share of the scrollbar's width, so its band is that share of the layout's\n const itemSqueezed = useBelow(itemBesideAside, detailMinWidth, THRESHOLD_BAND * Math.max(0, itemShare));\n const asideCollapsed = useBelow(layoutWidth, asideCollapseBelow, THRESHOLD_BAND) || itemSqueezed;\n const [asideWantsOpen, setAsideWantsOpen] = useState(false);\n const hiding = closedDetail === \"hidden\";\n // Hidden: the aside belongs to the open item, so it (its pane, its toggle, its Drawer) goes with the pane, and a\n // Drawer left open does not come back with the next item (render-time state adjustment).\n const showAside = !!aside && (!hiding || detailOpen);\n if (hiding && !detailOpen && asideWantsOpen) setAsideWantsOpen(false);\n // on a phone the aside's Drawer belongs to the item on screen: Back closes it with the item\n if (compact && !detailOpen && asideWantsOpen) setAsideWantsOpen(false);\n const asideOpen = asideCollapsed && asideWantsOpen;\n const region = ariaLabel ? { role: \"region\" as const, \"aria-label\": ariaLabel } : {};\n // A19: the item's path stands in for Back, its last crumb (the view's parent) going up one level; its bar insets at the\n // page's gutter, as the aside's content does (Sprint 25.14 A36). A last crumb that goes nowhere of its own closes the\n // detail, as Back did, so the path is always a way back.\n const path = detailPath && detailPath.length > 0\n ? detailPath.map((crumb, i) => (i === detailPath.length - 1 && !crumbGoes(crumb) && onDetailClose ? { ...crumb, onClick: onDetailClose } : crumb))\n : null;\n // fill: the page root, flush to the shell on every side (no border, no radius, no padding of its own); h-full\n // resolves against <main> because the shell is a flex column down to it. page: inside a PageContainer under a\n // PageHeader, where `bordered` draws the surface. Each pane owns its own inset either way.\n const isFill = frame === \"fill\";\n // Sprint 25.14 A44 (P32): the list pane's content reports what it is, as a wrapped PageHeader does to its\n // PageContainer: content that draws its own frame or cards (a KanbanBoard, a CardGrid, a Table), or content with no\n // frame of its own that scrolls inside the pane (a StackedList, a Gantt). No frame around what frames itself: when the\n // pane holds only the first kind, the list sits on the canvas with nothing drawn behind it and the open item on the\n // surface, whatever `bordered` says. Anything that scrolls inside keeps the hairline, which shows where it scrolls.\n const listHolds = useRef({ framed: 0, scrolls: 0 });\n const [framesItself, setFramesItself] = useState(false);\n const reportToList = useCallback<SplitListReport>((kind, present) => {\n const held = listHolds.current;\n held[kind] = Math.max(0, held[kind] + (present ? 1 : -1));\n setFramesItself(held.framed > 0 && held.scrolls === 0);\n }, []);\n const onCanvas = isFill || framesItself;\n // In a shell with an app footer the children wrapper has no definite height, so h-full cannot resolve; the shell\n // publishes main's height and fill takes it (the footer then sits below the fold, as it must under a full pane).\n const shell = useAppShell();\n // Sprint 25.16 A42 (P31): a page frame that is the page's last content takes the height under its header, so its panes\n // scroll inside it and the page doesn't; what's inside the view takes its pane's height (FillContext)\n const pageFill = useFillHeight(rootRef, !isFill);\n // each pane scrolls inside the view: one with nothing in it to Tab to (a message's text) is a Tab stop of its own, so a\n // keyboard can scroll it (WCAG 2.1.1)\n const [listScroll, setListScroll] = useState<HTMLDivElement | null>(null);\n const [detailScroll, setDetailScroll] = useState<HTMLDivElement | null>(null);\n const [asideScroll, setAsideScroll] = useState<HTMLDivElement | null>(null);\n const [stackedListScroll, setStackedListScroll] = useState<HTMLDivElement | null>(null);\n // Sprint 25.29 item 16: with `detailOpen` and no `onDetailClose`, the phone's Back couldn't work, and a page that keeps\n // its detail open stranded a phone user away from the list (run 79's folder tree). Without the handler the view keeps\n // its own \"showing the list\" on phones, so Back works, and a press in the list shows the detail again; with it, the\n // page decides, as before.\n const [listShown, setListShown] = useState(false);\n if (listShown && (onDetailClose || !detailOpen || !compact)) setListShown(false);\n useEffect(() => {\n if (detailOpen && !onDetailClose && detailMode === \"stack\") {\n warnOnce(\"SplitView\", \"detailOpen is set without onDetailClose: below the collapse width, Back can only show the list again, and the page never hears of it. Pass onDetailClose to close the detail.\");\n }\n }, [detailOpen, onDetailClose, detailMode]);\n // On a phone, the detail giving way to the list (Back, the page's or the view's own) leaves focus on the list's chosen\n // item, else its first control, never on the page\n const detailOnPhone = compact && detailMode === \"stack\" && detailOpen && !listShown;\n const wasDetailOnPhone = useRef(detailOnPhone);\n useLayoutEffect(() => {\n const was = wasDetailOnPhone.current;\n wasDetailOnPhone.current = detailOnPhone;\n if (!was || detailOnPhone) return;\n const active = document.activeElement;\n if (active && active !== document.body && active.isConnected) return;\n const pane = stackedListScroll;\n const chosen = pane?.querySelector<HTMLElement>('[aria-current=\"true\"], [aria-current=\"page\"], [aria-selected=\"true\"]');\n const target = (chosen && (isTabStop(chosen) ? chosen : tabStops(chosen)[0])) || (pane ? tabStops(pane)[0] : undefined);\n (target ?? pane)?.focus();\n });\n const [stackedDetailScroll, setStackedDetailScroll] = useState<HTMLDivElement | null>(null);\n // named for what they hold (the review of 1 October): the list by the view's own name, the item by its title (its\n // first heading; the path ends at its parent, so never names it)\n const listName = ariaLabel ? `${ariaLabel} list` : \"List\";\n const itemName = ariaLabel ? `${ariaLabel} item` : \"Item\";\n useKeyboardScroll(listScroll, listName, !compact);\n useKeyboardScroll(detailScroll, itemName, !compact, true);\n useKeyboardScroll(asideScroll, asideTitle, !compact);\n useKeyboardScroll(stackedListScroll, listName, compact);\n useKeyboardScroll(stackedDetailScroll, itemName, compact, true);\n const fillStyle = isFill && shell?.hasFooter ? { height: \"var(--ds-main-height, 100%)\" } : pageFill != null ? { height: pageFill } : undefined;\n // Edge to edge the list sits on the page's canvas, like every other page, and the open item (its detail and its aside)\n // on the surface (round 27, R27-12, the owner: the whole split on the surface read as a different page). A page frame,\n // bordered or not, stays one surface: a card on the canvas. Beside a list that frames itself, a page frame's open item\n // is that card (rounded, and bordered when the view is), as the page's other cards are; edge to edge it is square.\n const itemSurface = !onCanvas ? undefined : isFill\n ? \"bg-[var(--ds-bg-surface)]\"\n : cn(\"bg-[var(--ds-bg-surface)] rounded-[var(--ds-radius-md)] overflow-hidden\", bordered && \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\");\n const surface = cn(\n \"h-full min-h-0 w-full\",\n !onCanvas && \"bg-[var(--ds-bg-surface)]\",\n isFill && \"rounded-none border-0\",\n bordered && !onCanvas && \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] rounded-[var(--ds-radius-md)] overflow-hidden\",\n className,\n );\n // each pane is a surface of its own: what a Card around the view, or the list pane, tells content stops at its edge\n const listContent = <SurfaceBoundary pane=\"list\" framer={reportToList}>{list}</SurfaceBoundary>;\n const detailContent = <SurfaceBoundary pane=\"detail\">{detail}</SurfaceBoundary>;\n\n // closedDetail=\"hidden\" (C3): the pane opens beside the list at the width the user last gave it; closing it returns\n // focus to the item the pane shows, or its neighbour if that item is gone (D14(e)): the list's selected item, else\n // the last list item that took focus, checked on each render while the pane is open, so switching items is followed.\n // A selection kept in the URL changes the path, so the item is remembered whatever the route does. With no item\n // (opened on load, or from outside the list) focus goes to the list's first Tab stop. No overlay layer: an\n // assistant opened earlier keeps Escape.\n const [listPct, setListPct] = useState(listWidth);\n const paneRef = useRef<HTMLDivElement>(null);\n const shown = useRef<RememberedFocus | null>(null);\n const lastInList = useRef<HTMLElement | null>(null);\n const wasOpen = useRef(false);\n useLayoutEffect(() => {\n if (!hiding) return;\n const listPane = rootRef.current?.querySelector<HTMLElement>('[data-pane=\"list\"]') ?? null;\n if (detailOpen) {\n wasOpen.current = true;\n const selected = listPane?.querySelector<HTMLElement>('[aria-current=\"true\"], [aria-selected=\"true\"]');\n const last = lastInList.current;\n const item = (selected && (isTabStop(selected) ? selected : tabStops(selected)[0]))\n || (last?.isConnected && listPane?.contains(last) ? last : null);\n if (item && item !== shown.current?.el) shown.current = rememberFocus(item, { ignoreRoute: true });\n return;\n }\n if (!wasOpen.current) return;\n wasOpen.current = false;\n const r = shown.current;\n shown.current = null;\n const active = document.activeElement;\n if (active && active !== document.body && active.isConnected) return;\n const first = listPane ? tabStops(listPane)[0] : undefined;\n if (!r?.restore(first)) first?.focus();\n });\n const onPaneKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.key !== \"Escape\" || e.defaultPrevented || !onDetailClose) return;\n const t = e.target as HTMLElement;\n // the pane's own DOM only — a portalled popup inside it bubbles here in React's tree — and never from a field\n if (!paneRef.current?.contains(t) || t.closest(\"input, textarea, select, [contenteditable='true']\")) return;\n e.preventDefault();\n onDetailClose();\n };\n\n if (compact) {\n const showDetail = detailOnPhone;\n // on a phone the item's aside is a toggle beside Back that opens it in a Drawer, as it is on a narrow desktop (the\n // round 27 review: below the collapse width it could not be reached at all)\n const phoneAside = showDetail && !!aside;\n return (\n <FillContext value={true}>\n <div ref={rootRef} data-split-view={showDetail ? \"detail\" : \"list\"} data-frame={frame} data-fill={pageFill != null ? \"\" : undefined} {...region} className={cn(surface, \"flex flex-col\")} style={fillStyle}>\n {showDetail && (\n <div className={cn(\"flex-1 min-h-0 flex flex-col\", itemSurface)}>\n <div className={cn(\"shrink-0 flex items-center justify-between gap-ds-2 py-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\", path ? \"px-[var(--ds-page-gutter)]\" : \"px-ds-3\")}>\n {path\n ? <Breadcrumbs items={path} maxItems={3} aria-label=\"Path\" className=\"min-w-0\" />\n // a link, alone at the start of the header (Sprint 25.19 G4, page_composition#51): its words line up with the header's edge\n : <Button type=\"button\" variant=\"link\" size=\"sm\" iconLeft={<Icon name=\"arrow-left\" size={14} />} onClick={onDetailClose ?? (() => setListShown(true))}>{backLabel}</Button>}\n {phoneAside && <Button type=\"button\" variant=\"ghost\" size=\"sm\" iconLeft={<Icon name=\"info\" size={14} />} onClick={() => setAsideWantsOpen(true)} aria-expanded={asideWantsOpen}>{asideTitle}</Button>}\n </div>\n <div ref={setStackedDetailScroll} className={cn(\"flex-1 min-h-0 overflow-y-auto scroll-p-[4px]\", FOCUS_INSET)}>{detailContent}</div>\n </div>\n )}\n {/* Sprint 25.14 A44 (the review of 30 September): the list stays mounted while the stacked detail is shown, as it\n does beside it on a wider screen, so a board keeps its scroll and its report (the view kept its frame\n off only while the board was on screen), and Back finds the list as the user left it */}\n <div ref={setStackedListScroll} className={cn(\"flex-1 min-h-0 overflow-y-auto scroll-p-[4px]\", FOCUS_INSET)} hidden={showDetail || undefined}\n onClickCapture={onDetailClose ? undefined : () => setListShown(false)}>{listContent}</div>\n {phoneAside && (\n <Drawer open={asideWantsOpen} onClose={() => setAsideWantsOpen(false)} title={asideTitle} position=\"right\">\n {aside}\n </Drawer>\n )}\n </div>\n </FillContext>\n );\n }\n\n const asideButton = showAside && asideCollapsed\n ? <Button type=\"button\" variant=\"ghost\" size=\"sm\" iconLeft={<Icon name=\"info\" size={14} />} onClick={() => setAsideWantsOpen(true)} aria-expanded={asideOpen}>{asideTitle}</Button>\n : null;\n const closeButton = hiding && onDetailClose\n ? <Button type=\"button\" variant=\"ghost\" size=\"icon-sm\" aria-label={closeLabel} onClick={onDetailClose}><Icon name=\"close\" size={14} /></Button>\n : null;\n const paneBar = path || asideButton || closeButton ? (\n <div className={cn(\"shrink-0 flex items-center gap-ds-1 py-ds-2 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\", path ? \"justify-between px-[var(--ds-page-gutter)]\" : \"justify-end px-ds-3\")}>\n {path && <Breadcrumbs items={path} aria-label=\"Path\" className=\"min-w-0\" />}\n {(asideButton || closeButton) && <div className=\"shrink-0 flex items-center gap-ds-1\">{asideButton}{closeButton}</div>}\n </div>\n ) : null;\n const showDetail = !hiding || detailOpen;\n\n return (\n <FillContext value={true}>\n <div ref={rootRef} data-split-view={hiding && !detailOpen ? \"list\" : \"split\"} data-frame={frame} data-fill={pageFill != null ? \"\" : undefined} {...region} className={surface} style={fillStyle}>\n <ResizablePanelGroup\n direction=\"horizontal\"\n stackOnMobile={false}\n className=\"h-full\"\n // the width the user gives the list is kept, so a closed pane reopens at it; the shares decide when the aside yields\n onLayoutChanged={(layout) => {\n setShares((prev) => (prev.list === (layout.list ?? prev.list) && prev.aside === (layout.aside ?? prev.aside) ? prev : { list: layout.list ?? prev.list, aside: layout.aside ?? prev.aside }));\n if (hiding && layout.detail != null && layout.list != null) setListPct(layout.list);\n }}\n >\n <ResizablePanel id=\"list\" defaultSize={`${hiding ? (detailOpen ? listPct : 100) : listWidth}%`} minSize={`${listMinWidth}%`}>\n {/* scroll padding: what the keyboard reaches comes into view with room for its outline (Sprint 30, P3); a list's\n rows run to the pane's edges and draw their outline inside (StackedList) */}\n <div ref={setListScroll} data-pane=\"list\" className={cn(\"h-full min-h-0 overflow-y-auto scroll-p-[4px]\", FOCUS_INSET)} onFocus={hiding ? (e) => { lastInList.current = e.target; } : undefined}>\n {listContent}\n </div>\n </ResizablePanel>\n {showDetail && (\n <>\n <ResizableHandle withHandle />\n <ResizablePanel id=\"detail\" minSize=\"30%\">\n <div ref={paneRef} data-pane=\"detail\" className={cn(\"h-full min-h-0 flex flex-col\", itemSurface)} onKeyDown={hiding ? onPaneKeyDown : undefined}>\n {paneBar}\n <div ref={setDetailScroll} className={cn(\"flex-1 min-h-0 overflow-y-auto scroll-p-[4px]\", FOCUS_INSET)}>{detailContent}</div>\n </div>\n </ResizablePanel>\n </>\n )}\n {showAside && !asideCollapsed && (\n <>\n <ResizableHandle withHandle />\n <ResizablePanel id=\"aside\" defaultSize={`${asideWidth}%`} minSize=\"15%\">\n {/* the Drawer's body inset, so the aside's content sits where it will in the Drawer (Sprint 25.14 A36) */}\n <div ref={setAsideScroll} data-pane=\"aside\" className={cn(\"h-full min-h-0 overflow-y-auto py-ds-5 px-[var(--ds-page-gutter)] scroll-p-[4px]\", itemSurface, FOCUS_INSET)}><SurfaceBoundary pane=\"aside\">{aside}</SurfaceBoundary></div>\n </ResizablePanel>\n </>\n )}\n </ResizablePanelGroup>\n {showAside && asideCollapsed && (\n <Drawer open={asideOpen} onClose={() => setAsideWantsOpen(false)} title={asideTitle} position=\"right\">\n {aside}\n </Drawer>\n )}\n </div>\n </FillContext>\n );\n}\n"]}
@@ -1,19 +1,17 @@
1
1
  "use client";
2
- import { useKeyboardScroll } from './chunk-SJZWEBHL.js';
3
- import { useWholeListCheck, pagerPart, Pagination } from './chunk-SLRTSBCJ.js';
2
+ import { useKeyboardScroll } from './chunk-ACLKDE5W.js';
3
+ import { useWholeListCheck, pagerPart, Pagination } from './chunk-USHW523V.js';
4
4
  import './chunk-TYNDXMBV.js';
5
5
  import './chunk-7QLXYRPD.js';
6
6
  import './chunk-7RKC5C7G.js';
7
7
  import './chunk-72SDAX54.js';
8
- import { useScrollsInside } from './chunk-ULCACQSA.js';
8
+ import { useScrollsInside } from './chunk-MIUSSYVE.js';
9
9
  import './chunk-NKUCS67T.js';
10
- import './chunk-HTXP5BMM.js';
11
- import './chunk-R5QXMNW7.js';
12
- import './chunk-IELIF4PJ.js';
13
- import './chunk-UDJOIVKQ.js';
10
+ import './chunk-ZCDA74RQ.js';
11
+ import './chunk-WWN6CQKI.js';
14
12
  import './chunk-L6HWACK7.js';
15
13
  import './chunk-7Q46JXSK.js';
16
- import { useLatest } from './chunk-WIUGPZOH.js';
14
+ import { useLatest } from './chunk-4HJDOZ2M.js';
17
15
  import { cn, FOCUS_INSET } from './chunk-YL5KD5RC.js';
18
16
  import { useRef, useState, useCallback, useEffect } from 'react';
19
17
  import { useVirtualizer } from '@tanstack/react-virtual';
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../showcase/src/components/VirtualizedList.tsx"],"names":[],"mappings":"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","file":"virtualized.js","sourcesContent":["import { useCallback, useEffect, useRef, useState, type ReactNode, type Ref } from \"react\";\nimport { useVirtualizer, type VirtualItem } from \"@tanstack/react-virtual\";\nimport { cn, FOCUS_INSET } from \"../lib/utils\";\nimport { useLatest } from \"../lib/use-latest\";\nimport { Pagination } from \"./Pagination\";\nimport { pagerPart, useWholeListCheck, type Pager } from \"../lib/use-pagination\";\nimport { useScrollsInside } from \"../lib/surface-context\";\nimport { useKeyboardScroll } from \"../lib/use-keyboard-scroll\";\n\nexport interface VirtualizedListProps<T> {\n items: T[];\n estimateSize: (index: number) => number;\n /** An item, with its index in `items` (the whole list, when the list is paged). */\n renderItem: (item: T, index: number, virtualItem: VirtualItem) => ReactNode;\n overscan?: number;\n height?: number | string;\n className?: string;\n ref?: Ref<HTMLDivElement>;\n /**\n * The list's pager (Sprint 25.13 A49): paging and drawing only the rows on screen combine. Pass every item and\n * `usePagination(items)`'s pager: the list mounts only the rows on screen of the pager's part, and beneath it draws the\n * control in the project's style. A new page starts at its top; with infinite scroll, scrolling inside the list loads\n * more. For a long page (logs, feeds) the user asked to page differently, pass the size to the hook\n * (`usePagination(rows, { pageSize: 100 })`) with its override note.\n */\n pager?: Pager<unknown>;\n /**\n * The list's name, for the Tab stop it becomes while it scrolls with nothing inside to Tab to (Sprint 25.29 item 10):\n * what it lists (\"Activity log\"). Default \"List\".\n */\n \"aria-label\"?: string;\n}\n\nexport function VirtualizedList<T>({\n items: allItems,\n estimateSize,\n renderItem,\n overscan = 5,\n height = 400,\n className,\n ref,\n pager,\n \"aria-label\": ariaLabel = \"List\",\n}: VirtualizedListProps<T>) {\n // Sprint 25.14 A44: a list with no frame of its own: a SplitView's list pane keeps its hairline around it\n useScrollsInside();\n const parentRef = useRef<HTMLDivElement>(null);\n const endRef = useRef<HTMLDivElement>(null);\n // what the keyboard reaches in a row comes into view whole, with its outline (Sprint 30, P3: useKeyboardScroll reveals it)\n const [scroller, setScroller] = useState<HTMLDivElement | null>(null);\n // a list with nothing inside to Tab to, scrolling, is a Tab stop of its own, named (Sprint 25.29 item 10)\n useKeyboardScroll(scroller, ariaLabel);\n const setList = useCallback((node: HTMLDivElement | null) => {\n (parentRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n setScroller(node);\n if (typeof ref === \"function\") ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n }, [ref]);\n useWholeListCheck(\"VirtualizedList\", allItems.length, pager);\n const items = pagerPart(allItems, pager);\n const offset = pager ? Math.max(0, pager.range[0] - 1) : 0;\n\n // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Virtual is not compiler-compatible (informational; the project does not use the React Compiler)\n const virtualizer = useVirtualizer({\n count: items.length,\n getScrollElement: () => parentRef.current,\n estimateSize: (index) => estimateSize(offset + index),\n // a row is known by its place in the whole list, so page 2's third row isn't page 1's (the review of 30 September:\n // an entry opened on page 1 showed opened on page 2, and page 1's heights carried over)\n getItemKey: (index) => offset + index,\n overscan,\n });\n\n // A49: a new page starts at its top, and so does a growing list that starts again at its first page (a new order, a\n // search): left scrolled to its end, it loaded the next page at once (the review of 30 September)\n const page = pager ? pager.page : null;\n const pageBefore = useRef(page);\n const numbered = pager?.style === \"pagination\";\n useEffect(() => {\n const before = pageBefore.current;\n pageBefore.current = page;\n if (page === null || !parentRef.current) return;\n if (numbered ? page !== before : before !== null && page < before) parentRef.current.scrollTop = 0;\n }, [page, numbered]);\n\n // A49: with infinite scroll, the trigger sits at the end of the list's own content and watches the list's scroller\n // (it watched the viewport, so scrolling inside the list never loaded more); it loads once per growth of the list\n const loadMore = useLatest(pager?.loadMore);\n const growing = pager?.style === \"infinite-scroll\" && pager.hasMore;\n const loadedAt = useRef(-1);\n useEffect(() => {\n const root = parentRef.current;\n const end = endRef.current;\n // the list's length changed since the last load (it grew, or started again at page 1): it may load again (the\n // review of 30 September: after a reset to the first page it never loaded again)\n if (loadedAt.current !== items.length) loadedAt.current = -1;\n if (!growing || !root || !end || typeof IntersectionObserver === \"undefined\") return;\n const observer = new IntersectionObserver((entries) => {\n if (!entries.some((e) => e.isIntersecting) || loadedAt.current === items.length) return;\n loadedAt.current = items.length;\n loadMore.current?.();\n }, { root, rootMargin: \"200px 0px\" });\n observer.observe(end);\n return () => observer.disconnect();\n }, [growing, items.length, loadMore]);\n\n const list = (\n <div\n ref={setList}\n data-ds-list={pager ? \"\" : undefined}\n className={cn(\n \"overflow-auto scroll-p-[4px]\",\n FOCUS_INSET,\n \"rounded-[var(--ds-radius-md)]\",\n \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\",\n \"bg-[var(--ds-bg-surface)]\",\n !pager && className,\n )}\n style={{ height }}\n >\n <div className=\"relative w-full\" style={{ height: virtualizer.getTotalSize() }}>\n {virtualizer.getVirtualItems().map((virtualItem) => (\n <div\n key={virtualItem.key}\n data-index={virtualItem.index}\n ref={virtualizer.measureElement}\n className=\"absolute top-0 left-0 w-full\"\n style={{ transform: `translateY(${virtualItem.start}px)` }}\n >\n {renderItem(items[virtualItem.index], offset + virtualItem.index, virtualItem)}\n </div>\n ))}\n </div>\n {growing && <div ref={endRef} data-load-more-trigger=\"\" aria-hidden=\"true\" className=\"h-px w-full\" />}\n </div>\n );\n // A3: the pager's control is the list's next sibling, as <Pagination {...pager.props} /> would be. With infinite\n // scroll it is the Load more button alone, for keyboard users: the list's own trigger loads as it scrolls (A49). The\n // two are one element, which takes the className, so in a grid or a flex row they stay one item, and the list keeps\n // its element while its items come and go (the review of 30 September).\n if (!pager) return list;\n return (\n <div data-gs-paged=\"\" className={cn(\"flex flex-col min-w-0\", className)}>\n {list}\n {allItems.length > 0 && <Pagination {...pager.props} mode={pager.style === \"infinite-scroll\" ? \"load-more\" : pager.props.mode} />}\n </div>\n );\n}\n"]}
1
+ {"version":3,"sources":["../../../showcase/src/components/VirtualizedList.tsx"],"names":[],"mappings":"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","file":"virtualized.js","sourcesContent":["import { useCallback, useEffect, useRef, useState, type ReactNode, type Ref } from \"react\";\nimport { useVirtualizer, type VirtualItem } from \"@tanstack/react-virtual\";\nimport { cn, FOCUS_INSET } from \"../lib/utils\";\nimport { useLatest } from \"../lib/use-latest\";\nimport { Pagination } from \"./Pagination\";\nimport { pagerPart, useWholeListCheck, type Pager } from \"../lib/use-pagination\";\nimport { useScrollsInside } from \"../lib/surface-context\";\nimport { useKeyboardScroll } from \"../lib/use-keyboard-scroll\";\n\nexport interface VirtualizedListProps<T> {\n items: T[];\n estimateSize: (index: number) => number;\n /** An item, with its index in `items` (the whole list, when the list is paged). */\n renderItem: (item: T, index: number, virtualItem: VirtualItem) => ReactNode;\n overscan?: number;\n height?: number | string;\n className?: string;\n ref?: Ref<HTMLDivElement>;\n /**\n * The list's pager (Sprint 25.13 A49): paging and drawing only the rows on screen combine. Pass every item and\n * `usePagination(items)`'s pager: the list mounts only the rows on screen of the pager's part, and beneath it draws the\n * control in the project's style. A new page starts at its top; with infinite scroll, scrolling inside the list loads\n * more. For a long page (logs, feeds) the user asked to page differently, pass the size to the hook\n * (`usePagination(rows, { pageSize: 100 })`) with its override note.\n */\n pager?: Pager<unknown>;\n /**\n * The list's name, for the Tab stop it becomes while it scrolls with nothing inside to Tab to (Sprint 25.29 item 10):\n * what it lists (\"Activity log\"). Default \"List\".\n */\n \"aria-label\"?: string;\n}\n\nexport function VirtualizedList<T>({\n items: allItems,\n estimateSize,\n renderItem,\n overscan = 5,\n height = 400,\n className,\n ref,\n pager,\n \"aria-label\": ariaLabel = \"List\",\n}: VirtualizedListProps<T>) {\n // Sprint 25.14 A44: a list with no frame of its own: a SplitView's list pane keeps its hairline around it\n useScrollsInside();\n const parentRef = useRef<HTMLDivElement>(null);\n const endRef = useRef<HTMLDivElement>(null);\n // what the keyboard reaches in a row comes into view whole, with its outline (Sprint 30, P3: useKeyboardScroll reveals it)\n const [scroller, setScroller] = useState<HTMLDivElement | null>(null);\n // a list with nothing inside to Tab to, scrolling, is a Tab stop of its own, named (Sprint 25.29 item 10)\n useKeyboardScroll(scroller, ariaLabel);\n const setList = useCallback((node: HTMLDivElement | null) => {\n (parentRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n setScroller(node);\n if (typeof ref === \"function\") ref(node);\n else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n }, [ref]);\n useWholeListCheck(\"VirtualizedList\", allItems.length, pager);\n const items = pagerPart(allItems, pager);\n const offset = pager ? Math.max(0, pager.range[0] - 1) : 0;\n\n // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Virtual is not compiler-compatible (informational; the project does not use the React Compiler)\n const virtualizer = useVirtualizer({\n count: items.length,\n getScrollElement: () => parentRef.current,\n estimateSize: (index) => estimateSize(offset + index),\n // a row is known by its place in the whole list, so page 2's third row isn't page 1's (the review of 30 September:\n // an entry opened on page 1 showed opened on page 2, and page 1's heights carried over)\n getItemKey: (index) => offset + index,\n overscan,\n });\n\n // A49: a new page starts at its top, and so does a growing list that starts again at its first page (a new order, a\n // search): left scrolled to its end, it loaded the next page at once (the review of 30 September)\n const page = pager ? pager.page : null;\n const pageBefore = useRef(page);\n const numbered = pager?.style === \"pagination\";\n useEffect(() => {\n const before = pageBefore.current;\n pageBefore.current = page;\n if (page === null || !parentRef.current) return;\n if (numbered ? page !== before : before !== null && page < before) parentRef.current.scrollTop = 0;\n }, [page, numbered]);\n\n // A49: with infinite scroll, the trigger sits at the end of the list's own content and watches the list's scroller\n // (it watched the viewport, so scrolling inside the list never loaded more); it loads once per growth of the list\n const loadMore = useLatest(pager?.loadMore);\n const growing = pager?.style === \"infinite-scroll\" && pager.hasMore;\n const loadedAt = useRef(-1);\n useEffect(() => {\n const root = parentRef.current;\n const end = endRef.current;\n // the list's length changed since the last load (it grew, or started again at page 1): it may load again (the\n // review of 30 September: after a reset to the first page it never loaded again)\n if (loadedAt.current !== items.length) loadedAt.current = -1;\n if (!growing || !root || !end || typeof IntersectionObserver === \"undefined\") return;\n const observer = new IntersectionObserver((entries) => {\n if (!entries.some((e) => e.isIntersecting) || loadedAt.current === items.length) return;\n loadedAt.current = items.length;\n loadMore.current?.();\n }, { root, rootMargin: \"200px 0px\" });\n observer.observe(end);\n return () => observer.disconnect();\n }, [growing, items.length, loadMore]);\n\n const list = (\n <div\n ref={setList}\n data-ds-list={pager ? \"\" : undefined}\n className={cn(\n \"overflow-auto scroll-p-[4px]\",\n FOCUS_INSET,\n \"rounded-[var(--ds-radius-md)]\",\n \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\",\n \"bg-[var(--ds-bg-surface)]\",\n !pager && className,\n )}\n style={{ height }}\n >\n <div className=\"relative w-full\" style={{ height: virtualizer.getTotalSize() }}>\n {virtualizer.getVirtualItems().map((virtualItem) => (\n <div\n key={virtualItem.key}\n data-index={virtualItem.index}\n ref={virtualizer.measureElement}\n className=\"absolute top-0 left-0 w-full\"\n style={{ transform: `translateY(${virtualItem.start}px)` }}\n >\n {renderItem(items[virtualItem.index], offset + virtualItem.index, virtualItem)}\n </div>\n ))}\n </div>\n {growing && <div ref={endRef} data-load-more-trigger=\"\" aria-hidden=\"true\" className=\"h-px w-full\" />}\n </div>\n );\n // A3: the pager's control is the list's next sibling, as <Pagination {...pager.props} /> would be. With infinite\n // scroll it is the Load more button alone, for keyboard users: the list's own trigger loads as it scrolls (A49). The\n // two are one element, which takes the className, so in a grid or a flex row they stay one item, and the list keeps\n // its element while its items come and go (the review of 30 September).\n if (!pager) return list;\n return (\n <div data-gs-paged=\"\" className={cn(\"flex flex-col min-w-0\", className)}>\n {list}\n {allItems.length > 0 && <Pagination {...pager.props} mode={pager.style === \"infinite-scroll\" ? \"load-more\" : pager.props.mode} />}\n </div>\n );\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gridsmith-ui",
3
- "version": "0.30.1",
3
+ "version": "0.30.2",
4
4
  "description": "Gridsmith component library — React components and charts with design tokens and a CSS custom property theming engine",
5
5
  "type": "module",
6
6
  "sideEffects": [
@@ -1,38 +0,0 @@
1
- "use client";
2
- import { useEffect } from 'react';
3
-
4
- // ../../showcase/src/lib/reveal-focus.ts
5
- function useRevealFocus(target, enabled = true) {
6
- useEffect(() => {
7
- if (!enabled || !target) return;
8
- const read = () => "current" in target ? target.current : target;
9
- const first = read();
10
- const doc = first?.ownerDocument ?? (typeof document !== "undefined" ? document : null);
11
- if (!doc) return;
12
- let keyed = false;
13
- const onKey = () => {
14
- keyed = true;
15
- };
16
- const onPointer = () => {
17
- keyed = false;
18
- };
19
- const onFocusIn = (e) => {
20
- const el = read();
21
- const focused = e.target;
22
- if (!keyed || !el || focused === el || !(focused instanceof Element) || !el.contains(focused) || focused.isContentEditable) return;
23
- focused.scrollIntoView?.({ block: "nearest", inline: "nearest" });
24
- };
25
- doc.addEventListener("keydown", onKey, true);
26
- doc.addEventListener("pointerdown", onPointer, true);
27
- doc.addEventListener("focusin", onFocusIn);
28
- return () => {
29
- doc.removeEventListener("keydown", onKey, true);
30
- doc.removeEventListener("pointerdown", onPointer, true);
31
- doc.removeEventListener("focusin", onFocusIn);
32
- };
33
- }, [target, enabled]);
34
- }
35
-
36
- export { useRevealFocus };
37
- //# sourceMappingURL=chunk-HTXP5BMM.js.map
38
- //# sourceMappingURL=chunk-HTXP5BMM.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../showcase/src/lib/reveal-focus.ts"],"names":[],"mappings":";;;;AAWO,SAAS,cAAA,CAAe,MAAA,EAA4D,OAAA,GAAU,IAAA,EAAY;AAC/G,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA,IAAW,CAAC,MAAA,EAAQ;AACzB,IAAA,MAAM,IAAA,GAAO,MAAO,SAAA,IAAa,MAAA,GAAS,OAAO,OAAA,GAAU,MAAA;AAC3D,IAAA,MAAM,QAAQ,IAAA,EAAK;AACnB,IAAA,MAAM,MAAM,KAAA,EAAO,aAAA,KAAkB,OAAO,QAAA,KAAa,cAAc,QAAA,GAAW,IAAA,CAAA;AAClF,IAAA,IAAI,CAAC,GAAA,EAAK;AAGV,IAAA,IAAI,KAAA,GAAQ,KAAA;AACZ,IAAA,MAAM,QAAQ,MAAM;AAAE,MAAA,KAAA,GAAQ,IAAA;AAAA,IAAM,CAAA;AACpC,IAAA,MAAM,YAAY,MAAM;AAAE,MAAA,KAAA,GAAQ,KAAA;AAAA,IAAO,CAAA;AACzC,IAAA,MAAM,SAAA,GAAY,CAAC,CAAA,KAAkB;AACnC,MAAA,MAAM,KAAK,IAAA,EAAK;AAChB,MAAA,MAAM,UAAU,CAAA,CAAE,MAAA;AAElB,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,EAAA,IAAM,YAAY,EAAA,IAAM,EAAE,OAAA,YAAmB,OAAA,CAAA,IAAY,CAAC,EAAA,CAAG,QAAA,CAAS,OAAO,CAAA,IAAM,QAAwB,iBAAA,EAAmB;AAC7I,MAAA,OAAA,CAAQ,iBAAiB,EAAE,KAAA,EAAO,SAAA,EAAW,MAAA,EAAQ,WAAW,CAAA;AAAA,IAClE,CAAA;AACA,IAAA,GAAA,CAAI,gBAAA,CAAiB,SAAA,EAAW,KAAA,EAAO,IAAI,CAAA;AAC3C,IAAA,GAAA,CAAI,gBAAA,CAAiB,aAAA,EAAe,SAAA,EAAW,IAAI,CAAA;AACnD,IAAA,GAAA,CAAI,gBAAA,CAAiB,WAAW,SAAS,CAAA;AACzC,IAAA,OAAO,MAAM;AACX,MAAA,GAAA,CAAI,mBAAA,CAAoB,SAAA,EAAW,KAAA,EAAO,IAAI,CAAA;AAC9C,MAAA,GAAA,CAAI,mBAAA,CAAoB,aAAA,EAAe,SAAA,EAAW,IAAI,CAAA;AACtD,MAAA,GAAA,CAAI,mBAAA,CAAoB,WAAW,SAAS,CAAA;AAAA,IAC9C,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,OAAO,CAAC,CAAA;AACtB","file":"chunk-HTXP5BMM.js","sourcesContent":["import { useEffect, type RefObject } from \"react\";\n\n/**\n * A scroller's focused item, shown whole with its keyboard outline (Sprint 30, P3). A browser scrolls an item into view\n * when focus reaches it only if none of it shows: one partly in view (a list's last option, a card at a board's edge, a\n * row under the fold) stays cut off, its outline with it. When a key moves focus to something inside the scroller (Tab,\n * or a component's arrows), this scrolls it into view, as little as it takes; the scroller's scroll padding\n * (`scroll-p-[4px]`, P3's room) leaves the outline its 4 px. Focus a pointer gave is left where it is, so nothing moves\n * under the mouse. Pass the element itself (a callback ref's), as useKeyboardScroll takes it, or a ref object, read when\n * focus arrives (for an element whose ref is already taken).\n */\nexport function useRevealFocus(target: HTMLElement | null | RefObject<HTMLElement | null>, enabled = true): void {\n useEffect(() => {\n if (!enabled || !target) return;\n const read = () => (\"current\" in target ? target.current : target);\n const first = read();\n const doc = first?.ownerDocument ?? (typeof document !== \"undefined\" ? document : null);\n if (!doc) return;\n // whether a key or a pointer came last: the fields' tracker counts typing as neither, and an arrow from a list's\n // search box moves focus by the keyboard all the same\n let keyed = false;\n const onKey = () => { keyed = true; };\n const onPointer = () => { keyed = false; };\n const onFocusIn = (e: FocusEvent) => {\n const el = read();\n const focused = e.target;\n // a typing surface keeps its own caret in view: scrolled \"into view\" whole, a long one would jump\n if (!keyed || !el || focused === el || !(focused instanceof Element) || !el.contains(focused) || (focused as HTMLElement).isContentEditable) return;\n focused.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n };\n doc.addEventListener(\"keydown\", onKey, true);\n doc.addEventListener(\"pointerdown\", onPointer, true);\n doc.addEventListener(\"focusin\", onFocusIn);\n return () => {\n doc.removeEventListener(\"keydown\", onKey, true);\n doc.removeEventListener(\"pointerdown\", onPointer, true);\n doc.removeEventListener(\"focusin\", onFocusIn);\n };\n }, [target, enabled]);\n}\n"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../showcase/src/components/DropdownMenu.tsx"],"names":[],"mappings":"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","file":"chunk-ISONVOA7.js","sourcesContent":["import { useRef, useEffect, useLayoutEffect, useState, type ReactNode, type KeyboardEvent as ReactKeyboardEvent } from \"react\";\nimport { useBreakpoint } from \"../lib/use-breakpoint\";\nimport { createPortal } from \"react-dom\";\nimport { cn, FOCUS_RING, GLASS_DROPDOWN } from \"../lib/utils\";\nimport { Icon, type IconName } from \"../lib/icons\";\nimport { Slot } from \"../lib/slot\";\nimport { triggerType } from \"./Button\";\nimport { usePosition, type Align } from \"../lib/use-position\";\nimport { usePopupFocus } from \"../lib/focus\";\n\nexport interface DropdownMenuItem {\n label: string;\n icon?: IconName;\n onClick: () => void;\n variant?: \"default\" | \"destructive\";\n disabled?: boolean;\n}\n\nexport interface DropdownMenuDivider {\n type: \"divider\";\n}\n\n/**\n * An entry that opens a submenu of its own (Sprint 25.8.7's look check: a card's Move among its other actions), one\n * level deep. On a desktop it opens beside the menu: → or Enter opens it, its first item focused; ← or Escape closes it,\n * focus back on this entry; a hover opens it too. On a phone its items take the menu's place, under a Back item.\n */\nexport interface DropdownMenuSubmenu {\n label: string;\n icon?: IconName;\n items: (DropdownMenuItem | DropdownMenuDivider)[];\n disabled?: boolean;\n}\n\nexport type DropdownMenuEntry = DropdownMenuItem | DropdownMenuDivider | DropdownMenuSubmenu;\n\nfunction isDivider(entry: DropdownMenuEntry): entry is DropdownMenuDivider {\n return \"type\" in entry && entry.type === \"divider\";\n}\nfunction isSubmenu(entry: DropdownMenuEntry): entry is DropdownMenuSubmenu {\n return \"items\" in entry;\n}\n/** The indices of a list's items the arrows stop at: no divider, nothing unavailable. */\nconst stopsOf = (entries: DropdownMenuEntry[]): number[] => entries.reduce<number[]>((acc, e, i) => {\n if (!isDivider(e) && !isUnavailable(e)) acc.push(i);\n return acc;\n}, []);\n/** An entry that can't be chosen: disabled, or a submenu with nothing in it to choose, which never opens empty. */\nfunction isUnavailable(entry: DropdownMenuItem | DropdownMenuSubmenu): boolean {\n return !!entry.disabled || (isSubmenu(entry) && stopsOf(entry.items).length === 0);\n}\n/**\n * How long a hover on another entry waits before it closes the open submenu (or opens the other's): a pointer on its way\n * to the submenu crosses the entries below its own, and reaching the submenu in that time keeps it open.\n */\nconst SUBMENU_GRACE_MS = 300;\n\nconst ITEM = \"flex items-center gap-ds-2 w-full text-left px-ds-3 py-ds-2 text-sm cursor-pointer transition-colors rounded-[var(--ds-radius-sm)]\";\nconst itemLook = (entry: DropdownMenuItem | DropdownMenuSubmenu, open = false) => cn(\n ITEM,\n FOCUS_RING,\n isUnavailable(entry)\n ? \"opacity-disabled cursor-not-allowed\"\n : \"variant\" in entry && entry.variant === \"destructive\"\n ? \"text-[var(--ds-status-error-text)] hover:bg-[var(--ds-status-error-bg)] focus-visible:bg-[var(--ds-status-error-bg)]\"\n : cn(\"text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-emphasis)] focus-visible:bg-[var(--ds-bg-emphasis)]\", open && \"bg-[var(--ds-bg-emphasis)]\"),\n);\nconst PANEL = cn(\n // the items' outline has its 4 px of room at any density (Sprint 30, P3)\n \"fixed z-[var(--ds-z-popover)] min-w-[180px] p-[max(var(--ds-space-1),4px)]\",\n \"bg-[var(--ds-bg-surface-elevated)]\",\n GLASS_DROPDOWN,\n \"border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]\",\n \"rounded-[var(--ds-radius-md)] overflow-hidden\",\n);\nconst Divider = () => <div role=\"separator\" className=\"my-ds-1 h-px bg-[var(--ds-border-default)]\" />;\n\ninterface DropdownMenuProps {\n trigger: ReactNode;\n items: DropdownMenuEntry[];\n align?: Align;\n className?: string;\n container?: Element | DocumentFragment;\n}\n\nexport function DropdownMenu({ trigger, items, align = \"end\", className, container }: DropdownMenuProps) {\n const [open, setOpen] = useState(false);\n const [focusedIdx, setFocusedIdx] = useState(-1);\n // the submenu open, by its entry's index, and the focus inside it\n const [sub, setSub] = useState<number | null>(null);\n const [subFocusedIdx, setSubFocusedIdx] = useState(-1);\n const triggerRef = useRef<HTMLElement>(null);\n // both panels, the menu and its submenu, sit in one box (display: contents) that is the popup's for focus and presses\n const panelsRef = useRef<HTMLDivElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n const subRef = useRef<HTMLDivElement>(null);\n const subItemRef = useRef<HTMLElement>(null);\n const isPhone = useBreakpoint(\"sm\");\n // a hover elsewhere, waiting before it closes the open submenu (SUBMENU_GRACE_MS)\n const graceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n const cancelGrace = () => {\n if (graceTimer.current) { clearTimeout(graceTimer.current); graceTimer.current = null; }\n };\n const afterGrace = (then: () => void) => {\n cancelGrace();\n graceTimer.current = setTimeout(() => { graceTimer.current = null; then(); }, SUBMENU_GRACE_MS);\n };\n // closing the menu, or leaving the page, drops a hover's wait\n useEffect(() => { if (!open) cancelGrace(); }, [open]);\n useEffect(() => cancelGrace, []);\n\n const pos = usePosition(triggerRef, menuRef, open, { side: \"bottom\", align, offset: 4, flip: true });\n // beside the menu, 4 px from its edge, its first item level with its entry; on the other side where the screen has no\n // room, and inside the screen (measured against the menu, not the entry: the menu's padding and edge sit between them)\n const [subPos, setSubPos] = useState({ top: 0, left: 0 });\n useLayoutEffect(() => {\n if (!open || sub === null || isPhone) return;\n const place = () => {\n const menu = menuRef.current;\n const entry = subItemRef.current;\n const panel = subRef.current;\n if (!menu || !entry || !panel) return;\n const m = menu.getBoundingClientRect();\n const e = entry.getBoundingClientRect();\n const p = panel.getBoundingClientRect();\n const first = panel.querySelector(\"[data-sub-index]\")?.getBoundingClientRect();\n let left = m.right + 4;\n if (left + p.width > window.innerWidth - 8) left = Math.max(8, m.left - 4 - p.width);\n const top = Math.max(8, Math.min(e.top - (first ? first.top - p.top : 0), window.innerHeight - p.height - 8));\n setSubPos((cur) => (cur.top === top && cur.left === left ? cur : { top, left }));\n };\n place();\n window.addEventListener(\"resize\", place);\n window.addEventListener(\"scroll\", place, true);\n return () => {\n window.removeEventListener(\"resize\", place);\n window.removeEventListener(\"scroll\", place, true);\n };\n }, [open, sub, isPhone]);\n\n const enabledIndices = stopsOf(items);\n const subEntry = sub !== null && isSubmenu(items[sub]) ? (items[sub] as DropdownMenuSubmenu) : null;\n const subIndices = subEntry ? stopsOf(subEntry.items) : [];\n\n // Closing clears the keyboard focus index and the submenu (render-time state adjustment).\n const [prevOpen, setPrevOpen] = useState(open);\n if (open !== prevOpen) {\n setPrevOpen(open);\n if (!open) { setFocusedIdx(-1); setSub(null); setSubFocusedIdx(-1); }\n }\n\n // Sprint 25.7: focus hands back on close, and Tab out carries on from the trigger (lib/focus usePopupFocus).\n const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: panelsRef, close: () => setOpen(false), tabExits: \"any\" });\n\n /** The submenu closes, and focus goes back to the entry that opened it. */\n const closeSub = () => {\n if (sub === null) return;\n setFocusedIdx(sub);\n setSub(null);\n setSubFocusedIdx(-1);\n };\n const openSub = (i: number, focusFirst: boolean) => {\n const entry = items[i];\n if (!isSubmenu(entry) || isUnavailable(entry)) return;\n cancelGrace();\n setSub(i);\n setFocusedIdx(i);\n setSubFocusedIdx(focusFirst ? stopsOf(entry.items)[0] ?? -1 : -1);\n };\n\n useEffect(() => {\n if (!open) return;\n\n // An Escape a control inside already handled is its own; the one this acts on is marked for overlays around it.\n // In a submenu it closes the submenu alone.\n const onKeyDown = (e: globalThis.KeyboardEvent) => {\n if (e.key !== \"Escape\" || e.defaultPrevented || !isTopLayer()) return;\n e.preventDefault();\n if (sub !== null) { closeSub(); return; }\n returnFocus();\n setOpen(false);\n };\n\n const onClick = (e: MouseEvent) => {\n const target = e.target as Node;\n if (triggerRef.current?.contains(target) || panelsRef.current?.contains(target)) return;\n setOpen(false);\n };\n\n document.addEventListener(\"keydown\", onKeyDown);\n document.addEventListener(\"mousedown\", onClick);\n return () => {\n document.removeEventListener(\"keydown\", onKeyDown);\n document.removeEventListener(\"mousedown\", onClick);\n };\n });\n\n useEffect(() => {\n if (!open) return;\n // By the item's own index: items and dividers share one numbering, so indexing the buttons alone left every\n // item after a divider unreachable by the arrows (the shell's user menu: Settings, divider, Log out).\n if (sub !== null && subFocusedIdx >= 0) panelsRef.current?.querySelector<HTMLElement>(`[data-sub-index=\"${subFocusedIdx}\"]`)?.focus();\n else if (sub !== null && isPhone) panelsRef.current?.querySelector<HTMLElement>(\"[data-sub-back]\")?.focus();\n else if (focusedIdx >= 0) menuRef.current?.querySelector<HTMLElement>(`[data-index=\"${focusedIdx}\"]`)?.focus();\n }, [open, focusedIdx, sub, subFocusedIdx, isPhone]);\n\n const step = (stops: number[], at: number, by: number) => stops[((stops.indexOf(at) + by) % stops.length + stops.length) % stops.length];\n function handleMenuKeyDown(e: ReactKeyboardEvent) {\n const inSub = sub !== null;\n const stops = inSub ? subIndices : enabledIndices;\n const at = inSub ? subFocusedIdx : focusedIdx;\n const go = (i: number | undefined) => { if (i === undefined) return; if (inSub) setSubFocusedIdx(i); else setFocusedIdx(i); };\n if (e.key === \"ArrowDown\") { e.preventDefault(); go(at < 0 ? stops[0] : step(stops, at, 1)); }\n else if (e.key === \"ArrowUp\") { e.preventDefault(); go(at < 0 ? stops[stops.length - 1] : step(stops, at, -1)); }\n else if (e.key === \"Home\") { e.preventDefault(); go(stops[0]); }\n else if (e.key === \"End\") { e.preventDefault(); go(stops[stops.length - 1]); }\n else if (e.key === \"ArrowRight\" && !inSub && focusedIdx >= 0 && isSubmenu(items[focusedIdx])) { e.preventDefault(); openSub(focusedIdx, true); }\n else if (e.key === \"ArrowLeft\" && inSub) { e.preventDefault(); closeSub(); }\n }\n\n /** A choice: focus back on the trigger first, so a dialog the item opens returns there (Sprint 25.7). */\n const choose = (item: DropdownMenuItem) => {\n if (item.disabled) return;\n returnFocus();\n item.onClick();\n setOpen(false);\n };\n\n const subItems = (entries: (DropdownMenuItem | DropdownMenuDivider)[]) => entries.map((item, i) => (isDivider(item) ? <Divider key={i} /> : (\n <button type=\"button\" key={i} data-sub-index={i} role=\"menuitem\" disabled={item.disabled} tabIndex={subFocusedIdx === i ? 0 : -1} onFocus={() => setSubFocusedIdx(i)} onClick={() => choose(item)} className={itemLook(item)}>\n {item.icon && <Icon name={item.icon} size={16} className=\"shrink-0\" />}\n <span>{item.label}</span>\n </button>\n )));\n\n return (\n <>\n <Slot\n {...triggerType(trigger)}\n // the APG's menu button: the trigger says it opens a menu, and whether it is open\n aria-haspopup=\"menu\"\n aria-expanded={open}\n ref={triggerRef}\n onClick={() => {\n setOpen(!open);\n if (!open && enabledIndices.length) setFocusedIdx(enabledIndices[0]);\n }}\n >\n {trigger}\n </Slot>\n {open && createPortal(\n <div ref={panelsRef} className=\"contents\">\n <div\n ref={menuRef}\n role=\"menu\"\n data-gs=\"menu\"\n aria-label={isPhone && subEntry ? subEntry.label : undefined}\n onKeyDown={handleMenuKeyDown}\n className={cn(PANEL, className)}\n style={{ top: pos.top, left: pos.left }}\n // A choice is the menu's own: the click must not also reach a clickable row or card the menu sits in\n // (React carries events from a portal to its React parents).\n onClick={(e) => e.stopPropagation()}\n >\n {isPhone && subEntry ? (\n // on a phone the submenu takes the menu's place: Back first, its entry's name on it\n <>\n <button type=\"button\" data-sub-back=\"\" role=\"menuitem\" aria-label={`Back from ${subEntry.label}`} tabIndex={-1} onClick={closeSub} className={cn(itemLook(subEntry), \"text-[var(--ds-text-secondary)] font-[var(--ds-weight-heading)]\")}>\n <Icon name=\"chevron-left\" size={16} className=\"shrink-0\" />\n <span>{subEntry.label}</span>\n </button>\n <Divider />\n {subItems(subEntry.items)}\n </>\n ) : items.map((item, i) => {\n if (isDivider(item)) return <Divider key={i} />;\n if (isSubmenu(item)) {\n const isOpen = sub === i;\n return (\n <button type=\"button\"\n key={i}\n ref={isOpen ? (el) => { subItemRef.current = el; } : undefined}\n data-index={i}\n role=\"menuitem\"\n aria-haspopup=\"menu\"\n aria-expanded={isOpen}\n disabled={isUnavailable(item)}\n tabIndex={focusedIdx === i ? 0 : -1}\n // the arrows go on from wherever focus is, however it got there (a click, a screen reader's command)\n onFocus={() => setFocusedIdx(i)}\n // Enter (its click) or a press goes into the submenu, its first item focused, whether a hover had\n // opened it or not (the APG's menu: Enter opens it and focuses its first item); ←, Escape or Back\n // closes it\n onClick={() => openSub(i, true)}\n // a hover opens it at once where no other is open; with another open it waits, as the pointer may be\n // on its way to that one (SUBMENU_GRACE_MS); back on its own entry, the wait for a close is dropped\n onMouseEnter={(e) => {\n if (isPhone || e.buttons !== 0) return;\n if (isOpen) cancelGrace();\n else if (sub === null) openSub(i, false);\n else afterGrace(() => openSub(i, false));\n }}\n className={itemLook(item, isOpen)}\n >\n {item.icon && <Icon name={item.icon} size={16} className=\"shrink-0\" />}\n <span className=\"flex-1\">{item.label}</span>\n <Icon name=\"chevron-right\" size={14} className=\"shrink-0 text-[var(--ds-text-muted)]\" />\n </button>\n );\n }\n return (\n <button type=\"button\"\n key={i}\n data-index={i}\n role=\"menuitem\"\n disabled={item.disabled}\n tabIndex={focusedIdx === i ? 0 : -1}\n onFocus={() => setFocusedIdx(i)}\n onClick={() => choose(item)}\n // a hover on another entry closes an open submenu, as moving on from it does, after a moment: the\n // pointer may only be crossing it on its way to the submenu (SUBMENU_GRACE_MS)\n onMouseEnter={() => { if (!isPhone && sub !== null) afterGrace(() => { setSub(null); setSubFocusedIdx(-1); }); }}\n className={itemLook(item)}\n >\n {item.icon && <Icon name={item.icon} size={16} className=\"shrink-0\" />}\n <span>{item.label}</span>\n </button>\n );\n })}\n </div>\n {!isPhone && subEntry && (\n <div\n ref={subRef}\n role=\"menu\"\n aria-label={subEntry.label}\n onKeyDown={handleMenuKeyDown}\n className={PANEL}\n style={{ top: subPos.top, left: subPos.left }}\n onClick={(e) => e.stopPropagation()}\n // the pointer has reached the submenu: a hover it crossed on the way closes nothing\n onMouseEnter={cancelGrace}\n >\n {subItems(subEntry.items)}\n </div>\n )}\n </div>,\n container ?? document.body\n )}\n </>\n );\n}\n"]}