4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 50:T37a2,'use client' 'use no memo' import { useCallback, useEffect, useRef, useState } from 'react' import type { PointerEvent, ReactNode } from 'react' import { useDataGrid } from '@/components/spaceui/data-grid' import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area' import { cn } from '@/lib/utils' const MIN_THUMB_SIZE = 24 const FALLBACK_SCROLLBAR_SIZE = 12 const INITIAL_METRICS = { hasVerticalOverflow: false, headerHeight: 0, horizontalScrollbarSize: 0, thumbHeight: 0, thumbTop: 0, trackHeight: 0, } as const const SCROLLBAR_CLASSNAME = 'flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 data-[orientation=vertical]:border-s data-[orientation=vertical]:border-s-transparent' const SCROLLBAR_THUMB_CLASSNAME = 'bg-border rounded-full relative flex-1' type DataGridScrollAreaOrientation = 'horizontal' | 'vertical' | 'both' type ScrollbarMetrics = { hasVerticalOverflow: boolean headerHeight: number horizontalScrollbarSize: number thumbHeight: number thumbTop: number trackHeight: number } type ObservedElements = { header: HTMLElement | null horizontalScrollbar: HTMLElement | null table: HTMLElement | null tableViewport: HTMLElement | null } type DataGridScrollAreaProps = Omit & { children: ReactNode orientation?: DataGridScrollAreaOrientation } function clamp(value: number, min: number, max: number) { return Math.min(max, Math.max(min, value)) } function areMetricsEqual(next: ScrollbarMetrics, prev: ScrollbarMetrics) { return ( next.hasVerticalOverflow === prev.hasVerticalOverflow && next.headerHeight === prev.headerHeight && next.horizontalScrollbarSize === prev.horizontalScrollbarSize && next.thumbHeight === prev.thumbHeight && next.thumbTop === prev.thumbTop && next.trackHeight === prev.trackHeight ) } function applyMetrics(element: HTMLElement, metrics: ScrollbarMetrics) { element.style.setProperty('--data-grid-scrollbar-header-height', `${metrics.headerHeight}px`) element.style.setProperty('--data-grid-scrollbar-thumb-height', `${metrics.thumbHeight}px`) element.style.setProperty('--data-grid-scrollbar-thumb-top', `${metrics.thumbTop}px`) element.style.setProperty('--data-grid-scrollbar-track-height', `${metrics.trackHeight}px`) } function DataGridScrollArea({ children, className, orientation = 'both', ...props }: DataGridScrollAreaProps) { const { props: dataGridProps, table } = useDataGrid() const containerRef = useRef(null) const viewportRef = useRef(null) const dragRef = useRef<{ pointerId: number startScrollTop: number startY: number } | null>(null) const metricsRef = useRef(INITIAL_METRICS) const observedElementsRef = useRef({ header: null, horizontalScrollbar: null, table: null, tableViewport: null, }) const showHorizontal = orientation !== 'vertical' const showVertical = orientation !== 'horizontal' const usesCustomVerticalScrollbar = showVertical && !!dataGridProps.tableLayout?.headerSticky // Pinned columns are sticky and never scroll, so the horizontal scrollbar // track is inset to span only the scrollable center region between them. const isColumnsPinnable = !!dataGridProps.tableLayout?.columnsPinnable const scrollbarInsetStart = isColumnsPinnable ? table.getLeftTotalSize() : 0 const scrollbarInsetEnd = isColumnsPinnable ? table.getRightTotalSize() : 0 const [hasCustomVerticalOverflow, setHasCustomVerticalOverflow] = useState(false) const clearDragState = useCallback(() => { dragRef.current = null document.body.style.userSelect = '' document.body.style.webkitUserSelect = '' }, []) const resetMetrics = useCallback(() => { const container = containerRef.current if (container && !areMetricsEqual(INITIAL_METRICS, metricsRef.current)) { applyMetrics(container, INITIAL_METRICS) metricsRef.current = INITIAL_METRICS } setHasCustomVerticalOverflow((prev) => (prev ? false : prev)) }, []) const syncCustomVerticalScrollbar = useCallback(() => { const container = containerRef.current const viewport = viewportRef.current if (!container || !viewport || !usesCustomVerticalScrollbar) { resetMetrics() return } const { header, horizontalScrollbar } = observedElementsRef.current const headerHeight = header?.getBoundingClientRect().height ?? 0 const viewportHeight = viewport.clientHeight const viewportWidth = viewport.clientWidth const scrollHeight = viewport.scrollHeight const scrollWidth = viewport.scrollWidth const hasHorizontalOverflow = showHorizontal && scrollWidth > viewportWidth + 0.5 const horizontalScrollbarSize = hasHorizontalOverflow ? horizontalScrollbar?.offsetHeight || FALLBACK_SCROLLBAR_SIZE : 0 const trackHeight = Math.max(0, viewportHeight - headerHeight - horizontalScrollbarSize) const maxScroll = Math.max(0, scrollHeight - viewportHeight) let nextMetrics: ScrollbarMetrics if (trackHeight === 0 || maxScroll === 0) { nextMetrics = { hasVerticalOverflow: false, headerHeight, horizontalScrollbarSize, thumbHeight: trackHeight, thumbTop: 0, trackHeight, } } else { const bodyContentHeight = Math.max(trackHeight, scrollHeight - headerHeight) const thumbHeight = clamp(trackHeight * (trackHeight / bodyContentHeight), MIN_THUMB_SIZE, trackHeight) const maxThumbTop = Math.max(0, trackHeight - thumbHeight) const thumbTop = maxThumbTop > 0 ? (viewport.scrollTop / maxScroll) * maxThumbTop : 0 nextMetrics = { hasVerticalOverflow: true, headerHeight, horizontalScrollbarSize, thumbHeight, thumbTop, trackHeight, } } if (!areMetricsEqual(nextMetrics, metricsRef.current)) { applyMetrics(container, nextMetrics) metricsRef.current = nextMetrics } setHasCustomVerticalOverflow((prev) => prev === nextMetrics.hasVerticalOverflow ? prev : nextMetrics.hasVerticalOverflow, ) }, [resetMetrics, showHorizontal, usesCustomVerticalScrollbar]) useEffect(() => { const container = containerRef.current const viewport = viewportRef.current if (!container || !viewport) return if (!usesCustomVerticalScrollbar) { resetMetrics() return } let frame = 0 const scheduleSync = () => { cancelAnimationFrame(frame) frame = window.requestAnimationFrame(syncCustomVerticalScrollbar) } const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleSync) const observed = new Set() const observeElement = (element: HTMLElement | null) => { if (element && observer && !observed.has(element)) { observer.observe(element) observed.add(element) } } const resolveObservedElements = () => { observedElementsRef.current = { header: container.querySelector('[data-slot="data-grid-table"] thead') as HTMLElement | null, horizontalScrollbar: container.querySelector( '[data-slot="data-grid-scrollbar"][data-orientation="horizontal"]', ) as HTMLElement | null, table: container.querySelector('[data-slot="data-grid-table"]') as HTMLElement | null, tableViewport: container.querySelector('[data-slot="data-grid-table-viewport"]') as HTMLElement | null, } observeElement(observedElementsRef.current.header) observeElement(observedElementsRef.current.table) observeElement(observedElementsRef.current.tableViewport) return !!(observedElementsRef.current.header && observedElementsRef.current.table) } observeElement(viewport) const resolvedOnMount = resolveObservedElements() scheduleSync() viewport.addEventListener('scroll', scheduleSync, { passive: true }) // A table that mounts after this effect (empty state swapped for data) // would otherwise never be observed and the custom scrollbar would // overlap the sticky header. One-shot: disconnects once resolved. let mutationObserver: MutationObserver | null = null if (!resolvedOnMount && typeof MutationObserver !== 'undefined') { mutationObserver = new MutationObserver(() => { if (resolveObservedElements()) { mutationObserver?.disconnect() mutationObserver = null scheduleSync() } }) mutationObserver.observe(container, { childList: true, subtree: true }) } return () => { cancelAnimationFrame(frame) observer?.disconnect() mutationObserver?.disconnect() viewport.removeEventListener('scroll', scheduleSync) clearDragState() } }, [clearDragState, resetMetrics, syncCustomVerticalScrollbar, usesCustomVerticalScrollbar]) const scrollToThumbOffset = (nextThumbTop: number) => { const viewport = viewportRef.current const { thumbHeight, trackHeight } = metricsRef.current if (!viewport) return const maxScroll = Math.max(0, viewport.scrollHeight - viewport.clientHeight) const maxThumbTop = Math.max(0, trackHeight - thumbHeight) if (maxScroll === 0 || maxThumbTop === 0) { viewport.scrollTop = 0 return } const ratio = clamp(nextThumbTop, 0, maxThumbTop) / maxThumbTop viewport.scrollTop = ratio * maxScroll } const handleThumbPointerDown = (event: PointerEvent) => { const viewport = viewportRef.current if (!viewport) return event.preventDefault() event.stopPropagation() event.currentTarget.setPointerCapture(event.pointerId) dragRef.current = { pointerId: event.pointerId, startScrollTop: viewport.scrollTop, startY: event.clientY, } document.body.style.userSelect = 'none' document.body.style.webkitUserSelect = 'none' } const handleThumbPointerMove = (event: PointerEvent) => { const viewport = viewportRef.current const dragState = dragRef.current const { thumbHeight, trackHeight } = metricsRef.current if (!viewport || !dragState || dragState.pointerId !== event.pointerId) { return } const maxThumbTop = Math.max(0, trackHeight - thumbHeight) const maxScroll = Math.max(0, viewport.scrollHeight - viewport.clientHeight) if (maxThumbTop === 0 || maxScroll === 0) return const deltaY = event.clientY - dragState.startY const nextScrollTop = dragState.startScrollTop + (deltaY / maxThumbTop) * maxScroll viewport.scrollTop = clamp(nextScrollTop, 0, maxScroll) } const handleThumbPointerUp = (event: PointerEvent) => { if (dragRef.current?.pointerId !== event.pointerId) return clearDragState() } const handleTrackPointerDown = (event: PointerEvent) => { const { thumbHeight } = metricsRef.current if (event.target !== event.currentTarget) return event.preventDefault() event.stopPropagation() const rect = event.currentTarget.getBoundingClientRect() const offsetY = event.clientY - rect.top - thumbHeight / 2 scrollToThumbOffset(offsetY) } return (

{children} {showHorizontal && ( 0 || scrollbarInsetEnd > 0 ? { marginInlineStart: scrollbarInsetStart || undefined, marginInlineEnd: scrollbarInsetEnd || undefined, } : undefined } > )} {showVertical && !usesCustomVerticalScrollbar && ( )} {usesCustomVerticalScrollbar && hasCustomVerticalOverflow && ( ) } export { DataGridScrollArea } export type { DataGridScrollAreaOrientation, DataGridScrollAreaProps } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/components-spaceui-data-grid.json","https://www.spaceui.one/r/lib-utils.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/components/spaceui/data-grid/data-grid-scroll-area/index.tsx","content":"$50","type":"registry:component","target":"components/spaceui/data-grid-scroll-area.tsx"}],"className":"h-[70svh] min-h-80"}]]}]