@lumx/react 4.0.1-alpha.0 → 4.0.1-alpha.2

package/index.js

@@ -43,7 +43,6 @@ import range from 'lodash/range';
 import { mdiPlayCircleOutline } from '@lumx/icons/esm/play-circle-outline';
 import { mdiPauseCircleOutline } from '@lumx/icons/esm/pause-circle-outline';
 import chunk from 'lodash/chunk';
-import debounce$1 from 'lodash/debounce';
 import ReactDOM from 'react-dom';
 import take from 'lodash/take';
 import isObject from 'lodash/isObject';
@@ -11565,9 +11564,43 @@ const SlideshowControls = Object.assign(InternalSlideshowControls, {
   useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS
 });
 
+/**
+ * Polyfill-like helper for the scrollend event.
+ * Uses native scrollend if available, otherwise falls back to a timeout.
+ *
+ * @param element The element to listen to.
+ * @param callback The callback to execute when scrolling ends.
+ * @param options Options for the listener (timeout and AbortSignal).
+ */
+function onScrollEnd(element, callback, options = {}) {
+  const {
+    timeout = 150,
+    signal
+  } = options;
+
+  // Native scrollend
+  if ('onscrollend' in window) {
+    element.addEventListener('scrollend', callback, {
+      signal
+    });
+    return;
+  }
+
+  // Fallback for browsers that don't support scrollend
+  let timer;
+  const handleScroll = () => {
+    clearTimeout(timer);
+    timer = setTimeout(callback, timeout);
+  };
+  element.addEventListener('scroll', handleScroll, {
+    signal
+  });
+  signal?.addEventListener('abort', () => clearTimeout(timer));
+}
+
 /**
  * Hook to handle scroll synchronization for the Slideshow component.
- * It syncs the scroll position with the active index and vice-versa.
+ * It syncs the scroll position with the active index and vice versa.
  */
 const useSlideScroll = ({
   enabled,
@@ -11576,43 +11609,68 @@ const useSlideScroll = ({
   onChange
 }) => {
   const isAutoScrollRef = React__default.useRef(false);
+  const isFromScrollRef = React__default.useRef(false);
 
   // Sync State -> DOM (Programmatic Navigation)
   React__default.useEffect(() => {
-    if (!enabled || !wrapperRef.current) return;
     const wrapper = wrapperRef.current;
+    if (!enabled || !wrapper) {
+      return;
+    }
+
+    // Skip if currently scrolling
+    if (isFromScrollRef.current) {
+      return;
+    }
     const targetElement = wrapper.children[activeIndex];
     if (!targetElement) return;
+    let newScrollLeft = targetElement.offsetLeft;
+    if (targetElement.offsetParent !== wrapper) {
+      newScrollLeft -= wrapper.offsetLeft + wrapper.clientLeft;
+    }
+    if (Math.abs(wrapper.scrollLeft - newScrollLeft) < 1) {
+      return;
+    }
     isAutoScrollRef.current = true;
     wrapper.scrollTo({
-      left: targetElement.offsetLeft,
+      left: newScrollLeft,
       behavior: !isReducedMotion() ? 'smooth' : undefined
     });
   }, [activeIndex, enabled, wrapperRef]);
 
   // Sync DOM -> State (User Interaction)
   React__default.useEffect(() => {
-    if (!enabled || !wrapperRef.current) return undefined;
     const wrapper = wrapperRef.current;
-    const handleScroll = debounce$1(() => {
+    if (!enabled || !wrapper) return undefined;
+    const controller = new AbortController();
+    const {
+      signal
+    } = controller;
+    const handleScroll = () => {
+      // Skip if currently scrolling programmatically
+      if (isAutoScrollRef.current) {
+        return;
+      }
       const {
         scrollLeft,
         clientWidth
       } = wrapper;
       const newIndex = Math.round(scrollLeft / clientWidth);
-
-      // Skip onChange when scroll triggered in previous useEffect
-      if (!isAutoScrollRef.current) {
-        onChange?.(newIndex);
-      }
+      isFromScrollRef.current = true;
+      onChange?.(newIndex);
+    };
+    const reset = () => {
       isAutoScrollRef.current = false;
-    }, 100);
-    wrapper.addEventListener('scroll', handleScroll);
-    return () => {
-      wrapper.removeEventListener('scroll', handleScroll);
-      handleScroll.cancel();
+      isFromScrollRef.current = false;
     };
-  }, [enabled, onChange, wrapperRef, activeIndex]);
+    wrapper.addEventListener('scroll', handleScroll, {
+      signal
+    });
+    onScrollEnd(wrapper, reset, {
+      signal
+    });
+    return () => controller.abort();
+  }, [enabled, onChange, wrapperRef]);
 };
 
 /**