|
| 1 | +'use client'; |
| 2 | + |
| 3 | +import React from 'react'; |
| 4 | + |
| 5 | +import { useScrollShadow } from '../lib/use-scroll-shadow'; |
| 6 | +import { cn, type SharedProps } from '../lib/utils'; |
| 7 | + |
| 8 | +// Drag past this many px counts as a scroll, not a click. |
| 9 | +const DRAG_THRESHOLD = 4; |
| 10 | + |
| 11 | +// Default width of the edge fade, also the inset a focused child is scrolled clear of. |
| 12 | +const DEFAULT_FADE_SIZE = 32; |
| 13 | + |
| 14 | +// Manual horizontal scroll (not `scrollIntoView`) so the page's vertical scroll isn't disturbed. |
| 15 | +function scrollChildIntoView(scroller: HTMLDivElement, child: HTMLElement, fadeSize: number) { |
| 16 | + const view = scroller.getBoundingClientRect(); |
| 17 | + const rect = child.getBoundingClientRect(); |
| 18 | + // Inset by the fade so the child clears the gradient, not just the frame edge. |
| 19 | + if (rect.left < view.left + fadeSize) { |
| 20 | + scroller.scrollLeft -= view.left + fadeSize - rect.left; |
| 21 | + } else if (rect.right > view.right - fadeSize) { |
| 22 | + scroller.scrollLeft += rect.right - (view.right - fadeSize); |
| 23 | + } |
| 24 | +} |
| 25 | + |
| 26 | +// Scroll any focused descendant into view via `focusin` — agnostic to the children, so roving |
| 27 | +// keyboard focus, toolbars, and chip rows all work. |
| 28 | +function useFocusScroll(ref: React.RefObject<HTMLDivElement | null>, fadeSize: number) { |
| 29 | + React.useEffect(() => { |
| 30 | + const el = ref.current; |
| 31 | + if (!el) { |
| 32 | + return; |
| 33 | + } |
| 34 | + const onFocusIn = (e: FocusEvent) => { |
| 35 | + const target = e.target as HTMLElement | null; |
| 36 | + if (target && el.contains(target)) { |
| 37 | + scrollChildIntoView(el, target, fadeSize); |
| 38 | + } |
| 39 | + }; |
| 40 | + el.addEventListener('focusin', onFocusIn); |
| 41 | + return () => el.removeEventListener('focusin', onFocusIn); |
| 42 | + }, [ref, fadeSize]); |
| 43 | +} |
| 44 | + |
| 45 | +// Click-and-drag horizontal scrolling; a real drag swallows the trailing click. |
| 46 | +function useDragScroll(ref: React.RefObject<HTMLDivElement | null>) { |
| 47 | + const drag = React.useRef<{ x: number; left: number } | null>(null); |
| 48 | + const dragged = React.useRef(false); |
| 49 | + |
| 50 | + const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => { |
| 51 | + const el = ref.current; |
| 52 | + if (!el || e.button !== 0) { |
| 53 | + return; |
| 54 | + } |
| 55 | + drag.current = { x: e.clientX, left: el.scrollLeft }; |
| 56 | + dragged.current = false; |
| 57 | + }; |
| 58 | + const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => { |
| 59 | + const el = ref.current; |
| 60 | + const start = drag.current; |
| 61 | + if (!(el && start)) { |
| 62 | + return; |
| 63 | + } |
| 64 | + const dx = e.clientX - start.x; |
| 65 | + // Stay a click until the pointer crosses the threshold; only then capture and scroll, so a |
| 66 | + // sub-threshold wobble never nudges the strip. |
| 67 | + if (!dragged.current && Math.abs(dx) <= DRAG_THRESHOLD) { |
| 68 | + return; |
| 69 | + } |
| 70 | + dragged.current = true; |
| 71 | + if (typeof el.setPointerCapture === 'function' && !el.hasPointerCapture(e.pointerId)) { |
| 72 | + el.setPointerCapture(e.pointerId); |
| 73 | + } |
| 74 | + el.scrollLeft = start.left - dx; |
| 75 | + }; |
| 76 | + const onPointerEnd = () => { |
| 77 | + drag.current = null; |
| 78 | + }; |
| 79 | + const onClickCapture = (e: React.MouseEvent<HTMLDivElement>) => { |
| 80 | + // Swallow only the pointer-driven click that ends a real drag. Keyboard activation (Enter/Space) |
| 81 | + // produces a `detail === 0` click, so it always passes — even if a prior drag left `dragged` set. |
| 82 | + if (dragged.current && e.detail > 0) { |
| 83 | + e.preventDefault(); |
| 84 | + e.stopPropagation(); |
| 85 | + } |
| 86 | + dragged.current = false; |
| 87 | + }; |
| 88 | + return { onPointerDown, onPointerMove, onPointerEnd, onClickCapture }; |
| 89 | +} |
| 90 | + |
| 91 | +type MaskStyle = Pick<React.CSSProperties, 'maskImage' | 'WebkitMaskImage' | 'maskComposite' | 'WebkitMaskComposite'>; |
| 92 | + |
| 93 | +// Alpha mask fading the content to transparent on the overflowing side(s) — no track-color |
| 94 | +// knowledge needed, so it blends on any background. Snaps when an edge flips (reduced-motion-safe). |
| 95 | +// `preserveBottomEdge` keeps the bottom N px opaque (e.g. an underline baseline) by unioning a |
| 96 | +// second layer with `mask-composite: add` (legacy WebKit spells `add` as `source-over`). |
| 97 | +function edgeMask(start: boolean, end: boolean, fadeSize: number, preserveBottomEdge: number): MaskStyle { |
| 98 | + if (!(start || end)) { |
| 99 | + return {}; |
| 100 | + } |
| 101 | + const left = start ? `transparent 0, #000 ${fadeSize}px` : '#000 0'; |
| 102 | + const right = end ? `#000 calc(100% - ${fadeSize}px), transparent 100%` : '#000 100%'; |
| 103 | + const horizontal = `linear-gradient(to right, ${left}, ${right})`; |
| 104 | + |
| 105 | + if (!preserveBottomEdge) { |
| 106 | + return { maskImage: horizontal, WebkitMaskImage: horizontal }; |
| 107 | + } |
| 108 | + const bottom = `linear-gradient(to top, #000 ${preserveBottomEdge}px, transparent ${preserveBottomEdge}px)`; |
| 109 | + const image = `${horizontal}, ${bottom}`; |
| 110 | + return { maskImage: image, WebkitMaskImage: image, maskComposite: 'add', WebkitMaskComposite: 'source-over' }; |
| 111 | +} |
| 112 | + |
| 113 | +type DragScrollAreaProps = React.ComponentProps<'div'> & |
| 114 | + SharedProps & { |
| 115 | + // Width of the edge fade in px, and the inset a focused child is scrolled clear of. |
| 116 | + fadeSize?: number; |
| 117 | + // Keep the bottom N px fully opaque, exempt from the edge fade (e.g. an underline baseline). |
| 118 | + preserveBottomEdge?: number; |
| 119 | + }; |
| 120 | + |
| 121 | +/** |
| 122 | + * Makes an overflowing horizontal strip drag-scrollable, with alpha edge fades and |
| 123 | + * keyboard-focus-into-view. Wrap any single-row content that can overflow its container |
| 124 | + * (tab strips, toolbars, chip rows). Horizontal only by design. |
| 125 | + */ |
| 126 | +function DragScrollArea({ |
| 127 | + className, |
| 128 | + children, |
| 129 | + fadeSize = DEFAULT_FADE_SIZE, |
| 130 | + preserveBottomEdge = 0, |
| 131 | + testId, |
| 132 | + style, |
| 133 | + ...props |
| 134 | +}: DragScrollAreaProps) { |
| 135 | + const scrollerRef = React.useRef<HTMLDivElement | null>(null); |
| 136 | + const edges = useScrollShadow(scrollerRef, true, 'horizontal'); |
| 137 | + const drag = useDragScroll(scrollerRef); |
| 138 | + useFocusScroll(scrollerRef, fadeSize); |
| 139 | + |
| 140 | + const mask = edgeMask(edges.start, edges.end, fadeSize, preserveBottomEdge); |
| 141 | + const overflowing = edges.start || edges.end; |
| 142 | + |
| 143 | + return ( |
| 144 | + // `{...props}` first so the drag handlers, ref, and mask can't be clobbered by a consumer. |
| 145 | + <div |
| 146 | + {...props} |
| 147 | + className={cn( |
| 148 | + // `min-w-0` lets the area shrink below its content (and thus overflow) inside flex parents. |
| 149 | + 'min-w-0 overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden', |
| 150 | + overflowing && 'cursor-grab active:cursor-grabbing', |
| 151 | + className |
| 152 | + )} |
| 153 | + data-slot="drag-scroll-area" |
| 154 | + data-testid={testId} |
| 155 | + onClickCapture={drag.onClickCapture} |
| 156 | + onPointerDown={drag.onPointerDown} |
| 157 | + onPointerLeave={drag.onPointerEnd} |
| 158 | + onPointerMove={drag.onPointerMove} |
| 159 | + onPointerUp={drag.onPointerEnd} |
| 160 | + ref={scrollerRef} |
| 161 | + style={{ ...mask, ...style }} |
| 162 | + > |
| 163 | + {children} |
| 164 | + </div> |
| 165 | + ); |
| 166 | +} |
| 167 | + |
| 168 | +export { DragScrollArea, type DragScrollAreaProps }; |
0 commit comments