release: bump version to 0.26.2

frontend/src/components/Scrollbar/Scrollbar.tsx

@@ -8,9 +8,8 @@ import {
 } from 'react'
 
 type Axis = 'x' | 'y'
-type ScrollbarAxis = 'x' | 'y' | 'both'
 
-interface AxisScrollbarState {
+interface AxisState {
   visible: boolean
   dragging: boolean
   thumbSize: number
@@ -18,17 +17,14 @@ interface AxisScrollbarState {
 }
 
 interface ScrollbarState {
-  x: AxisScrollbarState
-  y: AxisScrollbarState
+  x: AxisState
+  y: AxisState
 }
 
 interface ScrollbarProps {
   children: ReactNode
   className?: string
   minThumbSize?: number
-  axis?: ScrollbarAxis
-  suppressScrollX?: boolean
-  suppressScrollY?: boolean
 }
 
 interface DragState {
@@ -37,7 +33,7 @@ interface DragState {
   pointerOffset: number
 }
 
-const INITIAL_AXIS_STATE: AxisScrollbarState = {
+const INITIAL_AXIS_STATE: AxisState = {
   visible: false,
   dragging: false,
   thumbSize: 0,
@@ -53,9 +49,6 @@ function Scrollbar({
   children,
   className = '',
   minThumbSize = 28,
-  axis = 'both',
-  suppressScrollX = false,
-  suppressScrollY = false,
 }: ScrollbarProps) {
   const viewportRef = useRef<HTMLDivElement | null>(null)
   const trackXRef = useRef<HTMLDivElement | null>(null)
@@ -78,35 +71,31 @@ function Scrollbar({
       scrollTop,
     } = viewport
 
-    const enableX = axis === 'x' || axis === 'both'
-    const enableY = axis === 'y' || axis === 'both'
-    const hasOverflowX = enableX && !suppressScrollX && scrollWidth - clientWidth > 1
-    const hasOverflowY = enableY && !suppressScrollY && scrollHeight - clientHeight > 1
+    const hasOverflowX = scrollWidth - clientWidth > 1
+    const hasOverflowY = scrollHeight - clientHeight > 1
 
-    const nextX: AxisScrollbarState = hasOverflowX && clientWidth > 0
+    const nextX: AxisState = hasOverflowX && clientWidth > 0 && trackX.clientWidth > 0
       ? (() => {
-          const trackSize = trackX.clientWidth
-          const thumbSize = Math.max(minThumbSize, (clientWidth / scrollWidth) * trackSize)
-          const maxThumbOffset = Math.max(0, trackSize - thumbSize)
+          const thumbSize = Math.max(minThumbSize, (clientWidth / scrollWidth) * trackX.clientWidth)
+          const maxThumbOffset = Math.max(0, trackX.clientWidth - thumbSize)
           const scrollRange = Math.max(1, scrollWidth - clientWidth)
           return {
             visible: true,
-            dragging: scrollbar.x.dragging && dragStateRef.current?.axis === 'x',
+            dragging: dragStateRef.current?.axis === 'x',
             thumbSize,
             thumbOffset: (scrollLeft / scrollRange) * maxThumbOffset,
           }
         })()
       : { ...INITIAL_AXIS_STATE }
 
-    const nextY: AxisScrollbarState = hasOverflowY && clientHeight > 0
+    const nextY: AxisState = hasOverflowY && clientHeight > 0 && trackY.clientHeight > 0
       ? (() => {
-          const trackSize = trackY.clientHeight
-          const thumbSize = Math.max(minThumbSize, (clientHeight / scrollHeight) * trackSize)
-          const maxThumbOffset = Math.max(0, trackSize - thumbSize)
+          const thumbSize = Math.max(minThumbSize, (clientHeight / scrollHeight) * trackY.clientHeight)
+          const maxThumbOffset = Math.max(0, trackY.clientHeight - thumbSize)
           const scrollRange = Math.max(1, scrollHeight - clientHeight)
           return {
             visible: true,
-            dragging: scrollbar.y.dragging && dragStateRef.current?.axis === 'y',
+            dragging: dragStateRef.current?.axis === 'y',
             thumbSize,
             thumbOffset: (scrollTop / scrollRange) * maxThumbOffset,
           }
@@ -114,7 +103,7 @@ function Scrollbar({
       : { ...INITIAL_AXIS_STATE }
 
     setScrollbar({ x: nextX, y: nextY })
-  }, [minThumbSize, scrollbar.x.dragging, scrollbar.y.dragging, suppressScrollX, suppressScrollY])
+  }, [minThumbSize])
 
   useEffect(() => {
     const viewport = viewportRef.current
@@ -122,23 +111,45 @@ function Scrollbar({
     const trackY = trackYRef.current
     if (!viewport || !trackX || !trackY) return
 
+    let rafId = 0
+    const scheduleUpdate = () => {
+      cancelAnimationFrame(rafId)
+      rafId = window.requestAnimationFrame(() => {
+        updateScrollbar()
+      })
+    }
+
     updateScrollbar()
+    scheduleUpdate()
 
     const resizeObserver = new ResizeObserver(() => {
-      updateScrollbar()
+      scheduleUpdate()
+    })
+    const mutationObserver = new MutationObserver(() => {
+      scheduleUpdate()
     })
 
     resizeObserver.observe(viewport)
     resizeObserver.observe(trackX)
     resizeObserver.observe(trackY)
     Array.from(viewport.children).forEach((child) => resizeObserver.observe(child))
-    viewport.addEventListener('scroll', updateScrollbar, { passive: true })
-    window.addEventListener('resize', updateScrollbar)
+
+    mutationObserver.observe(viewport, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      characterData: true,
+    })
+
+    viewport.addEventListener('scroll', scheduleUpdate, { passive: true })
+    window.addEventListener('resize', scheduleUpdate)
 
     return () => {
+      cancelAnimationFrame(rafId)
       resizeObserver.disconnect()
-      viewport.removeEventListener('scroll', updateScrollbar)
-      window.removeEventListener('resize', updateScrollbar)
+      mutationObserver.disconnect()
+      viewport.removeEventListener('scroll', scheduleUpdate)
+      window.removeEventListener('resize', scheduleUpdate)
     }
   }, [children, updateScrollbar])
 
@@ -177,19 +188,16 @@ function Scrollbar({
 
     const progress = Math.max(0, Math.min(nextThumbOffset, maxThumbOffset)) / maxThumbOffset
     if (axis === 'x') {
-      const scrollRange = Math.max(0, viewport.scrollWidth - viewport.clientWidth)
-      viewport.scrollLeft = progress * scrollRange
+      viewport.scrollLeft = progress * Math.max(0, viewport.scrollWidth - viewport.clientWidth)
       return
     }
-    const scrollRange = Math.max(0, viewport.scrollHeight - viewport.clientHeight)
-    viewport.scrollTop = progress * scrollRange
+    viewport.scrollTop = progress * Math.max(0, viewport.scrollHeight - viewport.clientHeight)
   }
 
   const handleThumbPointerDown = (axis: Axis) => (event: ReactPointerEvent<HTMLDivElement>) => {
-    const rect = event.currentTarget.getBoundingClientRect()
-    const axisState = scrollbar[axis]
-    if (!axisState.visible) return
+    if (!scrollbar[axis].visible) return
 
+    const rect = event.currentTarget.getBoundingClientRect()
     dragStateRef.current = {
       axis,
       pointerId: event.pointerId,
@@ -207,9 +215,9 @@ function Scrollbar({
   }
 
   const handleThumbPointerMove = (axis: Axis) => (event: ReactPointerEvent<HTMLDivElement>) => {
-    const track = axis === 'x' ? trackXRef.current : trackYRef.current
     const dragState = dragStateRef.current
-    if (!track || !dragState || dragState.pointerId !== event.pointerId || dragState.axis !== axis) return
+    const track = axis === 'x' ? trackXRef.current : trackYRef.current
+    if (!dragState || dragState.axis !== axis || dragState.pointerId !== event.pointerId || !track) return
 
     const rect = track.getBoundingClientRect()
     const nextThumbOffset = axis === 'x'
@@ -219,7 +227,9 @@ function Scrollbar({
   }
 
   const handleThumbPointerUp = (axis: Axis) => (event: ReactPointerEvent<HTMLDivElement>) => {
-    if (dragStateRef.current?.pointerId !== event.pointerId || dragStateRef.current.axis !== axis) return
+    const dragState = dragStateRef.current
+    if (!dragState || dragState.axis !== axis || dragState.pointerId !== event.pointerId) return
+
     dragStateRef.current = null
     document.body.style.userSelect = ''
     setScrollbar((previous) => ({
@@ -230,70 +240,60 @@ function Scrollbar({
   }
 
   const handleTrackPointerDown = (axis: Axis) => (event: ReactPointerEvent<HTMLDivElement>) => {
-    const axisState = scrollbar[axis]
-    if (!axisState.visible || event.target !== event.currentTarget) return
+    if (!scrollbar[axis].visible || event.target !== event.currentTarget) return
 
     const rect = event.currentTarget.getBoundingClientRect()
     const nextThumbOffset = axis === 'x'
-      ? event.clientX - rect.left - axisState.thumbSize / 2
-      : event.clientY - rect.top - axisState.thumbSize / 2
+      ? event.clientX - rect.left - scrollbar.x.thumbSize / 2
+      : event.clientY - rect.top - scrollbar.y.thumbSize / 2
     syncScrollFromThumbOffset(axis, nextThumbOffset)
   }
 
-  const showCorner = scrollbar.x.visible && scrollbar.y.visible
-  const scrollbarClassName = [
-    'scrollbar',
-    `scrollbar--${axis}`,
-    className,
-  ].filter(Boolean).join(' ')
+  const hasCorner = scrollbar.x.visible && scrollbar.y.visible
 
   return (
-    <div className={scrollbarClassName}>
+    <div className={['scrollbar', className].filter(Boolean).join(' ')}>
       <div ref={viewportRef} className="scrollbar__viewport">
         {children}
       </div>
 
-      {(axis === 'y' || axis === 'both') ? (
-        <div
-          ref={trackYRef}
-          className={`scrollbar__track scrollbar__track--y${scrollbar.y.visible ? ' scrollbar__track--visible' : ''}${scrollbar.y.dragging ? ' scrollbar__track--dragging' : ''}${showCorner ? ' scrollbar__track--has-corner' : ''}`}
-          onPointerDown={handleTrackPointerDown('y')}
-        >
-          {scrollbar.y.visible ? (
-            <div
-              className="scrollbar__thumb scrollbar__thumb--y"
-              style={{
-                height: `${scrollbar.y.thumbSize}px`,
-                transform: `translateY(${scrollbar.y.thumbOffset}px)`,
-              }}
-              onPointerDown={handleThumbPointerDown('y')}
-              onPointerMove={handleThumbPointerMove('y')}
-              onPointerUp={handleThumbPointerUp('y')}
-            />
-          ) : null}
-        </div>
-      ) : null}
+      <div
+        ref={trackYRef}
+        className={`scrollbar__track scrollbar__track--y${scrollbar.y.visible ? ' scrollbar__track--visible' : ''}${scrollbar.y.dragging ? ' scrollbar__track--dragging' : ''}${hasCorner ? ' scrollbar__track--has-corner' : ''}`}
+        onPointerDown={handleTrackPointerDown('y')}
+      >
+        {scrollbar.y.visible ? (
+          <div
+            className="scrollbar__thumb scrollbar__thumb--y"
+            style={{
+              height: `${scrollbar.y.thumbSize}px`,
+              transform: `translateY(${scrollbar.y.thumbOffset}px)`,
+            }}
+            onPointerDown={handleThumbPointerDown('y')}
+            onPointerMove={handleThumbPointerMove('y')}
+            onPointerUp={handleThumbPointerUp('y')}
+          />
+        ) : null}
+      </div>
 
-      {(axis === 'x' || axis === 'both') ? (
-        <div
-          ref={trackXRef}
-          className={`scrollbar__track scrollbar__track--x${scrollbar.x.visible ? ' scrollbar__track--visible' : ''}${scrollbar.x.dragging ? ' scrollbar__track--dragging' : ''}${showCorner ? ' scrollbar__track--has-corner' : ''}`}
-          onPointerDown={handleTrackPointerDown('x')}
-        >
-          {scrollbar.x.visible ? (
-            <div
-              className="scrollbar__thumb scrollbar__thumb--x"
-              style={{
-                width: `${scrollbar.x.thumbSize}px`,
-                transform: `translateX(${scrollbar.x.thumbOffset}px)`,
-              }}
-              onPointerDown={handleThumbPointerDown('x')}
-              onPointerMove={handleThumbPointerMove('x')}
-              onPointerUp={handleThumbPointerUp('x')}
-            />
-          ) : null}
-        </div>
-      ) : null}
+      <div
+        ref={trackXRef}
+        className={`scrollbar__track scrollbar__track--x${scrollbar.x.visible ? ' scrollbar__track--visible' : ''}${scrollbar.x.dragging ? ' scrollbar__track--dragging' : ''}${hasCorner ? ' scrollbar__track--has-corner' : ''}`}
+        onPointerDown={handleTrackPointerDown('x')}
+      >
+        {scrollbar.x.visible ? (
+          <div
+            className="scrollbar__thumb scrollbar__thumb--x"
+            style={{
+              width: `${scrollbar.x.thumbSize}px`,
+              transform: `translateX(${scrollbar.x.thumbOffset}px)`,
+            }}
+            onPointerDown={handleThumbPointerDown('x')}
+            onPointerMove={handleThumbPointerMove('x')}
+            onPointerUp={handleThumbPointerUp('x')}
+          />
+        ) : null}
+      </div>
     </div>
   )
 }