@aiquants/virtualscroll 1.19.2 → 1.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiquants/virtualscroll",
-  "version": "1.19.2",
+  "version": "1.20.0",
   "description": "High-performance virtual scrolling component for React with variable item heights",
   "sideEffects": [
     "**/*.css"

package/src/ScrollPane.spec.tsx

@@ -119,6 +119,20 @@ describe("ScrollPane - conditional wheel preventDefault", () => {
         expect(event.defaultPrevented).toBe(false)
         expect(onScroll).not.toHaveBeenCalled()
     })
+
+    it("does not prevent default nor scroll on Shift+wheel when onWheelHorizontal is undefined", () => {
+        const { pane, onScroll } = setup()
+        const event = dispatchWheel(pane, { deltaX: 0, deltaY: 100, shiftKey: true })
+        expect(event.defaultPrevented).toBe(false)
+        expect(onScroll).not.toHaveBeenCalled()
+    })
+
+    it("does not prevent default nor scroll on horizontal-dominant wheel when onWheelHorizontal is undefined", () => {
+        const { pane, onScroll } = setup()
+        const event = dispatchWheel(pane, { deltaX: 100, deltaY: 10 })
+        expect(event.defaultPrevented).toBe(false)
+        expect(onScroll).not.toHaveBeenCalled()
+    })
 })
 
 /**

package/src/ScrollPane.tsx

@@ -61,7 +61,9 @@ export type ScrollPaneProps = {
      * Callback delegating horizontal wheel/trackpad delta to an upstream owner.
      * When provided, horizontal-dominant (or shift+wheel) gestures are consumed here
      * (preventDefault + delegate) instead of being ignored; vertical behavior is unchanged.
-     * 横方向ホイール/トラックパッド量を上流へ委譲するコールバック。指定時のみ横成分を処理する。
+     * When omitted, horizontal gestures and shift+wheel bypass vertical scrolling so parent native scrolling works.
+     * 横方向ホイール/トラックパッド量を上流へ委譲するコールバック。
+     * 指定時は横スクロールを委譲処理し、未指定時でも Shift+ホイール 等の横ジェスチャは縦スクロールで横取りせず親要素のスクロールへ委ねる。
      */
     onWheelHorizontal?: (deltaX: number) => void
     /** Insets applied to the scrollable content area. / スクロール可能領域に適用するインセット。 */
@@ -467,14 +469,20 @@ export const ScrollPane = forwardRef<ScrollPaneHandle, ScrollPaneProps>(
         useEffect(() => {
             // ホイールイベントのハンドラ
             const handleWheel = (event: WheelEvent) => {
-                // 横委譲: ハンドラがある場合のみ、横優勢ジェスチャ (または shift+ホイール) を横として処理する。
-                // ハンドラ未指定時はこのブロックを丸ごとスキップし、既存の縦挙動と完全一致する。
-                // ctrl+wheel はブラウザのズーム (ピンチズーム/ctrl+shift+ホイール等) なので横取りせず常に素通しする。
-                if (onWheelHorizontalRef.current && !event.ctrlKey) {
-                    const usesShiftAxis = event.shiftKey && event.deltaX === 0
-                    const horizontalDelta = usesShiftAxis ? event.deltaY : event.deltaX
-                    const verticalDelta = usesShiftAxis ? 0 : event.deltaY
-                    if (horizontalDelta !== 0 && Math.abs(horizontalDelta) >= Math.abs(verticalDelta)) {
+                // ctrl+wheel はブラウザのズーム (ピンチズーム/ctrl+shift+ホイール等) なので横取りせず常に素通しする
+                if (event.ctrlKey) {
+                    return
+                }
+
+                // Shiftキー押下による軸変換(deltaX=0, deltaY!=0) または 通常のdeltaX/deltaYから横優勢判定
+                const usesShiftAxis = event.shiftKey && event.deltaX === 0
+                const horizontalDelta = usesShiftAxis ? event.deltaY : event.deltaX
+                const verticalDelta = usesShiftAxis ? 0 : event.deltaY
+                const isHorizontalDominant = horizontalDelta !== 0 && Math.abs(horizontalDelta) >= Math.abs(verticalDelta)
+
+                if (isHorizontalDominant) {
+                    // 横委譲コールバックが指定されている場合は横スクロールとして処理
+                    if (onWheelHorizontalRef.current) {
                         event.preventDefault()
                         stopInertia()
                         let deltaX = horizontalDelta
@@ -484,17 +492,13 @@ export const ScrollPane = forwardRef<ScrollPaneHandle, ScrollPaneProps>(
                             deltaX *= viewportSize // DOM_DELTA_PAGE
                         }
                         onWheelHorizontalRef.current(deltaX)
-                        return
                     }
-                }
-
-                if (!isScrollable) {
+                    // ハンドラ未指定時であっても、横優勢スクロールや Shift+ホイール は
+                    // 縦スクロールとして横取りせず、親要素のネイティブ横スクロールへ委ねる
                     return
                 }
 
-                // ctrl+wheel はブラウザのピンチズームなので横取りしない
-                // ctrl+wheel is browser pinch-zoom, so leave it to the browser.
-                if (event.ctrlKey) {
+                if (!isScrollable) {
                     return
                 }