react-sway 0.1.1 → 0.2.0

package/dist/index.js

@@ -1,205 +1,330 @@
 // src/ReactSway.tsx
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var SCROLL_SPEED = 0.5;
-var INACTIVITY_DELAY = 2e3;
-var FRICTION = 0.95;
+var ARROW_KEY_VELOCITY = 15;
+var DEFAULT_FRICTION = 0.95;
+var DEFAULT_LAZY_ROOT_MARGIN = "100px";
+var DEFAULT_LAZY_THRESHOLD = 0.01;
+var DEFAULT_RESUME_DELAY = 2e3;
+var DEFAULT_SPEED = 0.5;
+var LOOP_SEGMENTS = 3;
 var MAX_DELTA_TIME = 3;
-function ReactSway({ children }) {
-  const [position, setPosition] = useState(0);
-  const [, setVelocity] = useState(0);
+var MAX_VELOCITY = 150;
+var MS_PER_FRAME_60FPS = 16.667;
+var REDUCED_MOTION_SPEED_FACTOR = 0.25;
+var RESIZE_DEBOUNCE_MS = 150;
+var WHEEL_VELOCITY_MULTIPLIER = 0.3;
+function ReactSway({
+  autoScroll = true,
+  children,
+  direction = "up",
+  draggable = true,
+  friction = DEFAULT_FRICTION,
+  keyboard = true,
+  lazy = true,
+  lazyRootMargin = DEFAULT_LAZY_ROOT_MARGIN,
+  lazyThreshold = DEFAULT_LAZY_THRESHOLD,
+  onPause,
+  onResume,
+  onScroll,
+  pauseOnInteraction = true,
+  resumeDelay = DEFAULT_RESUME_DELAY,
+  speed = DEFAULT_SPEED,
+  wheelEnabled = true
+}) {
+  const normalizedFriction = useMemo(
+    () => Number.isFinite(friction) ? Math.min(Math.max(friction, 0), 1) : DEFAULT_FRICTION,
+    [friction]
+  );
+  const normalizedResumeDelay = useMemo(
+    () => Number.isFinite(resumeDelay) ? Math.max(0, resumeDelay) : DEFAULT_RESUME_DELAY,
+    [resumeDelay]
+  );
+  const normalizedSpeed = useMemo(
+    () => Number.isFinite(speed) ? Math.max(0, speed) : DEFAULT_SPEED,
+    [speed]
+  );
   const [isDragging, setIsDragging] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
-  const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
   const [isTabActive, setIsTabActive] = useState(true);
-  const [contentHeight, setContentHeight] = useState(0);
   const [loopPoint, setLoopPoint] = useState(0);
-  const [, setContainerHeight] = useState(0);
-  const containerRef = useRef(null);
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  });
   const animationFrameRef = useRef(null);
+  const autoScrollRef = useRef({ active: autoScroll, desired: autoScroll });
+  const containerRef = useRef(null);
   const inactivityTimerRef = useRef(null);
-  const lastTouchYRef = useRef(0);
-  const lastMouseYRef = useRef(0);
+  const isDraggingRef = useRef(false);
+  const isPausedRef = useRef(false);
   const lastFrameTimeRef = useRef(0);
-  let visualPosition = position % (loopPoint || 1);
-  if (visualPosition > 0 && loopPoint > 0) visualPosition -= loopPoint;
+  const lastMouseYRef = useRef(0);
+  const lastTouchYRef = useRef(0);
+  const loopPointRef = useRef(0);
+  const onPauseRef = useRef(onPause);
+  const onResumeRef = useRef(onResume);
+  const onScrollRef = useRef(onScroll);
+  const positionRef = useRef(0);
+  const resizeDebounceTimerRef = useRef(null);
+  const velocityRef = useRef(0);
   useEffect(() => {
-    const calculateDimensions = () => {
-      if (containerRef.current) {
-        containerRef.current.offsetHeight;
-        const currentContentHeight = containerRef.current.scrollHeight;
-        const calculatedLoopPoint = currentContentHeight / 3;
-        if (currentContentHeight > 0) {
-          setContentHeight(currentContentHeight);
-          setLoopPoint(calculatedLoopPoint);
-        }
-        setContainerHeight(window.innerHeight);
-      }
+    onPauseRef.current = onPause;
+    onResumeRef.current = onResume;
+    onScrollRef.current = onScroll;
+  }, [onPause, onResume, onScroll]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handleChange = (e) => {
+      setPrefersReducedMotion(e.matches);
     };
-    const rafId = requestAnimationFrame(() => {
-      calculateDimensions();
-    });
+    mediaQuery.addEventListener("change", handleChange);
     return () => {
-      cancelAnimationFrame(rafId);
+      mediaQuery.removeEventListener("change", handleChange);
     };
-  }, [children]);
-  const pauseAutoScroll = useCallback(() => {
-    setAutoScrollEnabled(false);
-    if (inactivityTimerRef.current) {
-      clearTimeout(inactivityTimerRef.current);
+  }, []);
+  const clearInactivityTimer = useCallback(() => {
+    if (!inactivityTimerRef.current) return;
+    clearTimeout(inactivityTimerRef.current);
+    inactivityTimerRef.current = null;
+  }, []);
+  const renderPosition = useCallback((rawPosition) => {
+    if (!containerRef.current) return;
+    const currentLoopPoint = loopPointRef.current;
+    let visualPosition = rawPosition % (currentLoopPoint || 1);
+    if (visualPosition > 0 && currentLoopPoint > 0) {
+      visualPosition -= currentLoopPoint;
     }
+    containerRef.current.style.transform = `translate3d(0, ${visualPosition}px, 0)`;
   }, []);
-  const scheduleAutoScrollResume = useCallback(() => {
-    if (inactivityTimerRef.current) {
-      clearTimeout(inactivityTimerRef.current);
+  const commitPosition = useCallback((nextPosition) => {
+    if (positionRef.current === nextPosition) return;
+    positionRef.current = nextPosition;
+    renderPosition(nextPosition);
+    onScrollRef.current?.(nextPosition);
+  }, [renderPosition]);
+  const wrapPosition = useCallback((rawPosition) => {
+    const currentLoopPoint = loopPointRef.current;
+    if (currentLoopPoint <= 0) return rawPosition;
+    let wrappedPosition = rawPosition;
+    while (wrappedPosition > 0) {
+      wrappedPosition -= currentLoopPoint;
     }
-    inactivityTimerRef.current = setTimeout(() => {
-      setAutoScrollEnabled(true);
-    }, INACTIVITY_DELAY);
+    while (wrappedPosition < -currentLoopPoint * 2) {
+      wrappedPosition += currentLoopPoint;
+    }
+    return wrappedPosition;
   }, []);
-  const handleMouseDown = useCallback((e) => {
-    e.preventDefault();
-    setIsDragging(true);
-    lastMouseYRef.current = e.clientY;
-    setVelocity(0);
-    pauseAutoScroll();
-  }, [pauseAutoScroll]);
-  const handleMouseMove = useCallback((e) => {
-    if (!isDragging) return;
-    e.preventDefault();
-    const deltaY = e.clientY - lastMouseYRef.current;
-    setPosition((prev) => prev + deltaY);
-    setVelocity(deltaY);
-    lastMouseYRef.current = e.clientY;
-  }, [isDragging]);
-  const handleMouseUp = useCallback((e) => {
-    if (!isDragging) return;
-    e.preventDefault();
-    setIsDragging(false);
-    scheduleAutoScrollResume();
-  }, [isDragging, scheduleAutoScrollResume]);
-  const handleTouchStart = useCallback((e) => {
-    if (e.touches.length === 1) {
-      setIsDragging(true);
-      lastTouchYRef.current = e.touches[0].clientY;
-      setVelocity(0);
-      pauseAutoScroll();
+  const recalculateLoopPoint = useCallback(() => {
+    if (!containerRef.current) return;
+    const currentContentHeight = containerRef.current.scrollHeight;
+    if (currentContentHeight <= 0) return;
+    const nextLoopPoint = currentContentHeight / LOOP_SEGMENTS;
+    loopPointRef.current = nextLoopPoint;
+    setLoopPoint((previousLoopPoint) => Math.abs(previousLoopPoint - nextLoopPoint) < 0.5 ? previousLoopPoint : nextLoopPoint);
+    renderPosition(positionRef.current);
+  }, [renderPosition]);
+  useEffect(() => {
+    autoScrollRef.current.desired = autoScroll;
+    if (!autoScroll) {
+      clearInactivityTimer();
+      autoScrollRef.current.active = true;
     }
-  }, [pauseAutoScroll]);
-  const handleTouchMove = useCallback((e) => {
-    if (!isDragging || e.touches.length !== 1) return;
-    e.preventDefault();
-    const touch = e.touches[0];
-    const deltaY = touch.clientY - lastTouchYRef.current;
-    setPosition((prev) => prev + deltaY);
-    setVelocity(deltaY);
-    lastTouchYRef.current = touch.clientY;
-  }, [isDragging]);
-  const handleTouchEnd = useCallback((_e) => {
-    if (!isDragging) return;
-    setIsDragging(false);
-    scheduleAutoScrollResume();
-  }, [isDragging, scheduleAutoScrollResume]);
-  const handleWheel = useCallback((e) => {
-    e.preventDefault();
-    setVelocity((prev) => prev - e.deltaY * 0.3);
-    pauseAutoScroll();
-    scheduleAutoScrollResume();
-  }, [pauseAutoScroll, scheduleAutoScrollResume]);
+  }, [autoScroll, clearInactivityTimer]);
+  useEffect(() => {
+    loopPointRef.current = loopPoint;
+    renderPosition(positionRef.current);
+  }, [loopPoint, renderPosition]);
+  useEffect(() => {
+    const rafId = requestAnimationFrame(recalculateLoopPoint);
+    return () => {
+      cancelAnimationFrame(rafId);
+    };
+  }, [children, recalculateLoopPoint]);
+  const pauseAutoScroll = useCallback(() => {
+    if (!pauseOnInteraction) return;
+    autoScrollRef.current.active = false;
+    onPauseRef.current?.();
+    clearInactivityTimer();
+  }, [clearInactivityTimer, pauseOnInteraction]);
+  const scheduleAutoScrollResume = useCallback(() => {
+    if (!pauseOnInteraction || !autoScrollRef.current.desired || isPausedRef.current) return;
+    clearInactivityTimer();
+    inactivityTimerRef.current = setTimeout(() => {
+      inactivityTimerRef.current = null;
+      if (!autoScrollRef.current.desired || isPausedRef.current) return;
+      autoScrollRef.current.active = true;
+      onResumeRef.current?.();
+    }, normalizedResumeDelay);
+  }, [clearInactivityTimer, normalizedResumeDelay, pauseOnInteraction]);
   const togglePause = useCallback(() => {
-    setIsPaused((prev) => {
-      const newPausedState = !prev;
-      if (newPausedState) {
-        pauseAutoScroll();
-      } else {
-        setAutoScrollEnabled(true);
+    const newPaused = !isPausedRef.current;
+    isPausedRef.current = newPaused;
+    setIsPaused(newPaused);
+    if (newPaused) {
+      clearInactivityTimer();
+      autoScrollRef.current.active = false;
+      onPauseRef.current?.();
+    } else {
+      clearInactivityTimer();
+      autoScrollRef.current.active = true;
+      if (autoScrollRef.current.desired) {
+        onResumeRef.current?.();
       }
-      return newPausedState;
-    });
-  }, [pauseAutoScroll]);
+    }
+  }, [clearInactivityTimer]);
   const handleKeyDown = useCallback((e) => {
+    if (!keyboard) return;
     switch (e.key) {
       case " ":
         e.preventDefault();
         togglePause();
         break;
-      case "ArrowUp":
+      case "ArrowDown":
         e.preventDefault();
-        setVelocity((prev) => prev + 15);
+        velocityRef.current -= ARROW_KEY_VELOCITY;
         pauseAutoScroll();
         scheduleAutoScrollResume();
         break;
-      case "ArrowDown":
+      case "ArrowUp":
         e.preventDefault();
-        setVelocity((prev) => prev - 15);
+        velocityRef.current += ARROW_KEY_VELOCITY;
         pauseAutoScroll();
         scheduleAutoScrollResume();
         break;
-      case "Home":
+      case "End":
         e.preventDefault();
-        setPosition(0);
-        setVelocity(0);
+        if (loopPointRef.current > 0) {
+          commitPosition(-loopPointRef.current);
+        }
+        velocityRef.current = 0;
         pauseAutoScroll();
         scheduleAutoScrollResume();
         break;
-      case "End":
+      case "Home":
         e.preventDefault();
-        if (loopPoint > 0) {
-          setPosition(-loopPoint);
-        }
-        setVelocity(0);
+        commitPosition(0);
+        velocityRef.current = 0;
         pauseAutoScroll();
         scheduleAutoScrollResume();
         break;
       default:
         break;
     }
-  }, [togglePause, pauseAutoScroll, scheduleAutoScrollResume, loopPoint]);
-  const handleResize = useCallback(() => {
-    setContainerHeight(window.innerHeight);
-    if (containerRef.current) {
-      const currentContentHeight = containerRef.current.scrollHeight;
-      setContentHeight(currentContentHeight);
-      setLoopPoint(currentContentHeight / 3);
-    }
-  }, []);
+  }, [commitPosition, keyboard, pauseAutoScroll, scheduleAutoScrollResume, togglePause]);
+  const handleMouseDown = useCallback((e) => {
+    if (!draggable) return;
+    e.preventDefault();
+    containerRef.current?.focus();
+    setIsDragging(true);
+    isDraggingRef.current = true;
+    lastMouseYRef.current = e.clientY;
+    velocityRef.current = 0;
+    pauseAutoScroll();
+  }, [draggable, pauseAutoScroll]);
+  const handleMouseMove = useCallback((e) => {
+    if (!isDraggingRef.current) return;
+    e.preventDefault();
+    const deltaY = e.clientY - lastMouseYRef.current;
+    const nextPosition = wrapPosition(positionRef.current + deltaY);
+    commitPosition(nextPosition);
+    velocityRef.current = deltaY;
+    lastMouseYRef.current = e.clientY;
+  }, [commitPosition, wrapPosition]);
+  const handleMouseUp = useCallback((e) => {
+    if (!isDraggingRef.current) return;
+    e.preventDefault();
+    setIsDragging(false);
+    isDraggingRef.current = false;
+    scheduleAutoScrollResume();
+  }, [scheduleAutoScrollResume]);
+  const handleTouchEnd = useCallback((_e) => {
+    if (!isDraggingRef.current) return;
+    setIsDragging(false);
+    isDraggingRef.current = false;
+    scheduleAutoScrollResume();
+  }, [scheduleAutoScrollResume]);
+  const handleTouchMove = useCallback((e) => {
+    if (!isDraggingRef.current || e.touches.length !== 1) return;
+    e.preventDefault();
+    const touch = e.touches[0];
+    const deltaY = touch.clientY - lastTouchYRef.current;
+    const nextPosition = wrapPosition(positionRef.current + deltaY);
+    commitPosition(nextPosition);
+    velocityRef.current = deltaY;
+    lastTouchYRef.current = touch.clientY;
+  }, [commitPosition, wrapPosition]);
+  const handleTouchStart = useCallback((e) => {
+    if (!draggable || e.touches.length !== 1) return;
+    containerRef.current?.focus();
+    setIsDragging(true);
+    isDraggingRef.current = true;
+    lastTouchYRef.current = e.touches[0].clientY;
+    velocityRef.current = 0;
+    pauseAutoScroll();
+  }, [draggable, pauseAutoScroll]);
+  const handleWheel = useCallback((e) => {
+    if (!wheelEnabled) return;
+    e.preventDefault();
+    velocityRef.current -= e.deltaY * WHEEL_VELOCITY_MULTIPLIER;
+    velocityRef.current = Math.max(-MAX_VELOCITY, Math.min(MAX_VELOCITY, velocityRef.current));
+    pauseAutoScroll();
+    scheduleAutoScrollResume();
+  }, [pauseAutoScroll, scheduleAutoScrollResume, wheelEnabled]);
   useEffect(() => {
     const currentContainer = containerRef.current;
     if (!currentContainer) return;
-    const boundHandlers = {
-      mouseDown: handleMouseDown,
-      mouseMove: handleMouseMove,
-      mouseUp: handleMouseUp,
-      touchStart: handleTouchStart,
-      touchMove: handleTouchMove,
-      touchEnd: handleTouchEnd,
-      wheel: handleWheel
+    currentContainer.addEventListener("mousedown", handleMouseDown);
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    currentContainer.addEventListener("touchstart", handleTouchStart, { passive: true });
+    window.addEventListener("touchmove", handleTouchMove, { passive: false });
+    window.addEventListener("touchend", handleTouchEnd, { passive: true });
+    currentContainer.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      currentContainer.removeEventListener("mousedown", handleMouseDown);
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      currentContainer.removeEventListener("touchstart", handleTouchStart);
+      window.removeEventListener("touchmove", handleTouchMove);
+      window.removeEventListener("touchend", handleTouchEnd);
+      currentContainer.removeEventListener("wheel", handleWheel);
     };
-    currentContainer.addEventListener("mousedown", boundHandlers.mouseDown);
-    window.addEventListener("mousemove", boundHandlers.mouseMove);
-    window.addEventListener("mouseup", boundHandlers.mouseUp);
-    currentContainer.addEventListener("touchstart", boundHandlers.touchStart, { passive: true });
-    window.addEventListener("touchmove", boundHandlers.touchMove, { passive: false });
-    window.addEventListener("touchend", boundHandlers.touchEnd, { passive: true });
-    currentContainer.addEventListener("wheel", boundHandlers.wheel, { passive: false });
+  }, [handleMouseDown, handleMouseMove, handleMouseUp, handleTouchEnd, handleTouchMove, handleTouchStart, handleWheel]);
+  const debouncedRecalculate = useCallback(() => {
+    if (resizeDebounceTimerRef.current) {
+      clearTimeout(resizeDebounceTimerRef.current);
+    }
+    resizeDebounceTimerRef.current = setTimeout(() => {
+      resizeDebounceTimerRef.current = null;
+      recalculateLoopPoint();
+    }, RESIZE_DEBOUNCE_MS);
+  }, [recalculateLoopPoint]);
+  useEffect(() => {
+    window.addEventListener("resize", debouncedRecalculate);
     return () => {
-      currentContainer.removeEventListener("mousedown", boundHandlers.mouseDown);
-      window.removeEventListener("mousemove", boundHandlers.mouseMove);
-      window.removeEventListener("mouseup", boundHandlers.mouseUp);
-      currentContainer.removeEventListener("touchstart", boundHandlers.touchStart);
-      window.removeEventListener("touchmove", boundHandlers.touchMove);
-      window.removeEventListener("touchend", boundHandlers.touchEnd);
-      currentContainer.removeEventListener("wheel", boundHandlers.wheel);
+      window.removeEventListener("resize", debouncedRecalculate);
     };
-  }, [handleMouseDown, handleMouseMove, handleMouseUp, handleTouchStart, handleTouchMove, handleTouchEnd, handleWheel]);
+  }, [debouncedRecalculate]);
   useEffect(() => {
-    document.addEventListener("keydown", handleKeyDown);
-    window.addEventListener("resize", handleResize);
+    if (!containerRef.current || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      debouncedRecalculate();
+    });
+    observer.observe(containerRef.current);
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      window.removeEventListener("resize", handleResize);
+      observer.disconnect();
     };
-  }, [handleKeyDown, handleResize]);
+  }, [debouncedRecalculate]);
+  useEffect(() => {
+    return () => {
+      if (resizeDebounceTimerRef.current) {
+        clearTimeout(resizeDebounceTimerRef.current);
+        resizeDebounceTimerRef.current = null;
+      }
+    };
+  }, []);
   useEffect(() => {
     const handleVisibilityChange = () => {
       setIsTabActive(!document.hidden);
@@ -212,6 +337,11 @@ function ReactSway({ children }) {
       document.removeEventListener("visibilitychange", handleVisibilityChange);
     };
   }, []);
+  useEffect(() => {
+    return () => {
+      clearInactivityTimer();
+    };
+  }, [clearInactivityTimer]);
   useEffect(() => {
     if (!isTabActive || isPaused) {
       if (animationFrameRef.current) {
@@ -220,41 +350,29 @@ function ReactSway({ children }) {
       }
       return;
     }
+    lastFrameTimeRef.current = 0;
+    const directionMultiplier = direction === "down" ? 1 : -1;
     const animate = (currentTime) => {
-      let deltaTime = lastFrameTimeRef.current ? (currentTime - lastFrameTimeRef.current) / 16.667 : 1;
+      let deltaTime = lastFrameTimeRef.current ? (currentTime - lastFrameTimeRef.current) / MS_PER_FRAME_60FPS : 1;
       deltaTime = Math.min(deltaTime, MAX_DELTA_TIME);
       lastFrameTimeRef.current = currentTime;
-      setPosition((prevPosition) => {
-        let newPosition = prevPosition;
-        if (autoScrollEnabled && !isDragging && !isPaused) {
-          newPosition -= SCROLL_SPEED * deltaTime;
-        }
-        return newPosition;
-      });
-      setVelocity((prevVelocity) => {
-        let newVelocity = prevVelocity;
-        if (Math.abs(newVelocity) > 0.1) {
-          if (!isDragging) {
-            setPosition((prev) => prev + newVelocity * deltaTime);
-          }
-          newVelocity *= Math.pow(FRICTION, deltaTime);
-        } else {
-          newVelocity = 0;
-        }
-        return newVelocity;
-      });
-      setPosition((prevPosition) => {
-        let newPosition = prevPosition;
-        if (loopPoint > 0) {
-          while (newPosition > 0) {
-            newPosition -= loopPoint;
-          }
-          while (newPosition < -loopPoint * 2) {
-            newPosition += loopPoint;
-          }
-        }
-        return newPosition;
-      });
+      if (prefersReducedMotion) {
+        velocityRef.current = 0;
+      } else if (Math.abs(velocityRef.current) > 0.1) {
+        velocityRef.current *= Math.pow(normalizedFriction, deltaTime);
+      } else {
+        velocityRef.current = 0;
+      }
+      let nextPosition = positionRef.current;
+      const effectiveSpeed = prefersReducedMotion ? normalizedSpeed * REDUCED_MOTION_SPEED_FACTOR : normalizedSpeed;
+      if (autoScrollRef.current.desired && autoScrollRef.current.active && !isDraggingRef.current) {
+        nextPosition += directionMultiplier * effectiveSpeed * deltaTime;
+      }
+      if (!isDraggingRef.current && Math.abs(velocityRef.current) > 0.1) {
+        nextPosition += velocityRef.current * deltaTime;
+      }
+      nextPosition = wrapPosition(nextPosition);
+      commitPosition(nextPosition);
       animationFrameRef.current = requestAnimationFrame(animate);
     };
     animationFrameRef.current = requestAnimationFrame(animate);
@@ -263,9 +381,9 @@ function ReactSway({ children }) {
         cancelAnimationFrame(animationFrameRef.current);
       }
     };
-  }, [isTabActive, autoScrollEnabled, isDragging, isPaused, loopPoint]);
+  }, [commitPosition, direction, isPaused, isTabActive, normalizedFriction, normalizedSpeed, prefersReducedMotion, wrapPosition]);
   useEffect(() => {
-    if (!containerRef.current) return;
+    if (!lazy || !containerRef.current || typeof IntersectionObserver === "undefined") return;
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
@@ -276,8 +394,8 @@ function ReactSway({ children }) {
       },
       {
         root: null,
-        rootMargin: "100px",
-        threshold: 0.01
+        rootMargin: lazyRootMargin,
+        threshold: lazyThreshold
       }
     );
     const items = containerRef.current.querySelectorAll(".content-item");
@@ -286,36 +404,34 @@ function ReactSway({ children }) {
       items.forEach((item) => observer.unobserve(item));
       observer.disconnect();
     };
-  }, [children, contentHeight]);
+  }, [children, lazy, lazyRootMargin, lazyThreshold]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: "react-sway-container scroller-content",
       ref: containerRef,
       style: {
-        transform: `translate3d(0, ${visualPosition}px, 0)`,
-        cursor: isDragging ? "grabbing" : "grab",
+        cursor: draggable ? isDragging ? "grabbing" : "grab" : "default",
+        MozUserSelect: "none",
+        msUserSelect: "none",
+        overflow: "hidden",
+        overscrollBehavior: "contain",
+        pointerEvents: "auto",
         position: "absolute",
-        width: "100%",
-        willChange: "transform",
-        WebkitTransform: "translateZ(0)",
         touchAction: "none",
+        transform: "translate3d(0, 0px, 0)",
         userSelect: "none",
         WebkitUserSelect: "none",
-        msUserSelect: "none",
-        MozUserSelect: "none",
-        overscrollBehavior: "contain",
-        overflow: "hidden",
-        // Prevent component's content from overflowing and causing page scroll
-        // Ensure it's on top and can receive events
-        pointerEvents: "auto",
+        width: "100%",
+        willChange: "transform",
         zIndex: 1
       },
-      tabIndex: 0,
+      onKeyDown: keyboard ? handleKeyDown : void 0,
+      tabIndex: keyboard ? 0 : void 0,
       children: [
         /* @__PURE__ */ jsx("div", { className: "content-group original", children }),
-        /* @__PURE__ */ jsx("aside", { className: "content-group duplicate", "aria-hidden": "true", "data-duplicate": "true", role: "presentation", children }),
-        /* @__PURE__ */ jsx("aside", { className: "content-group duplicate", "aria-hidden": "true", "data-duplicate": "true", role: "presentation", children })
+        /* @__PURE__ */ jsx("aside", { "aria-hidden": "true", className: "content-group duplicate", "data-duplicate": "true", role: "presentation", children }),
+        /* @__PURE__ */ jsx("aside", { "aria-hidden": "true", className: "content-group duplicate", "data-duplicate": "true", role: "presentation", children })
       ]
     }
   );