@hh.ru/magritte-ui-scrollable-container 6.5.2 → 6.5.3

package/useScrollContainer.js

@@ -14,166 +14,190 @@ const EPSILON = 0.5;
 const MIN_DELTA_FOR_TOUCH = 5;
 const MAX_OFFSET = { [OFFSET_ATTR]: { left: Number.MAX_SAFE_INTEGER } };
 const useScrollContainer = () => {
-    const scrollState = useScrollState();
-    const { scrollToIndex, jumpToIndex } = useScrollableControls();
-    const [isTouch, setIsTouch] = useState(false);
-    const leftCorrection = scrollState.leftCorrection.get();
-    const rightCorrection = scrollState.rightCorrection.get();
-    const scrollStateRef = useRef({
-        containerRef: useRef(null),
-        positionContainerRef: useRef(null),
-        correction: { leftCorrection, rightCorrection },
-        wasInteracted: false,
+  const scrollState = useScrollState();
+  const { scrollToIndex, jumpToIndex } = useScrollableControls();
+  const [isTouch, setIsTouch] = useState(false);
+  const leftCorrection = scrollState.leftCorrection.get();
+  const rightCorrection = scrollState.rightCorrection.get();
+  const scrollStateRef = useRef({
+    containerRef: useRef(null),
+    positionContainerRef: useRef(null),
+    correction: { leftCorrection, rightCorrection },
+    wasInteracted: false
+  });
+  scrollStateRef.current.correction = { leftCorrection, rightCorrection };
+  const resizeOberverRef = useRef(null);
+  const recalculateItemPositions = useCallback(() => {
+    const state = scrollStateRef.current;
+    const { containerRef, correction, positionContainerRef } = state;
+    const { leftCorrection: leftCorrection2, rightCorrection: rightCorrection2 } = correction;
+    const items = scrollState.items.get();
+    if (!containerRef.current || !positionContainerRef.current) {
+      return;
+    }
+    const offsetLeft = positionContainerRef.current?.getBoundingClientRect().left ?? 0;
+    items.forEach((itemRef) => {
+      if (!itemRef.current) {
+        return;
+      }
+      const rect = itemRef.current.getBoundingClientRect();
+      itemRef.current[OFFSET_ATTR] = { left: rect.left - offsetLeft, right: rect.right - offsetLeft };
     });
-    scrollStateRef.current.correction = { leftCorrection, rightCorrection };
-    const resizeOberverRef = useRef(null);
-    // recalc positions + report widths into store
-    const recalculateItemPositions = useCallback(() => {
-        const state = scrollStateRef.current;
-        const { containerRef, correction, positionContainerRef } = state;
-        const { leftCorrection, rightCorrection } = correction;
-        const items = scrollState.items.get();
-        if (!containerRef.current || !positionContainerRef.current) {
-            return;
-        }
-        const offsetLeft = positionContainerRef.current?.getBoundingClientRect().left ?? 0;
-        items.forEach((itemRef) => {
-            if (!itemRef.current) {
-                return;
-            }
-            const rect = itemRef.current.getBoundingClientRect();
-            itemRef.current[OFFSET_ATTR] = { left: rect.left - offsetLeft, right: rect.right - offsetLeft };
-        });
-        items.sort((a, b) => (a.current || MAX_OFFSET)[OFFSET_ATTR].left - (b.current || MAX_OFFSET)[OFFSET_ATTR].left);
-        const viewportWidth = containerRef.current.offsetWidth - leftCorrection - rightCorrection;
-        const contentWidth = items.reduce((pos, itemRef) => Math.max(pos, itemRef.current?.[OFFSET_ATTR]?.right || 0), 0);
-        scrollState.viewportWidth.set(viewportWidth);
-        scrollState.contentWidth.set(contentWidth);
-        scrollState.items.set(items);
-        if (scrollState.indexForDeferScroll !== -1) {
-            if (scrollState.behaviorScrollTypeDeferScroll === 'instant') {
-                jumpToIndex(scrollState.indexForDeferScroll);
-            }
-            else {
-                scrollToIndex(scrollState.indexForDeferScroll);
-            }
-            scrollState.behaviorScrollTypeDeferScroll = 'animate';
-            scrollState.indexForDeferScroll = -1;
-        }
-    }, [scrollState, scrollToIndex, jumpToIndex]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const recalculateItemPositionsDebounced = useCallback(debounce(recalculateItemPositions, 10), [
-        recalculateItemPositions,
-    ]);
-    const scrollToItemDebounced = useInitOnce(() => debounce(() => {
-        if (scrollState.scrollSnapAlign === 'none') {
-            return;
-        }
-        const targetItemIndex = findIndexNearestToSnapPoint(scrollState);
-        const scrollSnapBehavior = computeScrollSnapBehavior(scrollState);
-        const target = scrollSnapBehavior(scrollState, targetItemIndex);
-        animateScrollToPosition(scrollState, target);
-    }, 100));
-    useEffect(() => {
-        const state = scrollStateRef.current;
-        const observer = new ResizeObserver(requestAnimation(() => {
-            recalculateItemPositions();
-        }));
-        scrollState.items.get().forEach((item) => item.current && observer.observe(item.current));
-        state.containerRef.current && observer.observe(state.containerRef.current);
-        resizeOberverRef.current = observer;
-        return () => observer.disconnect();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    // Слушатель нужен, чтобы не вызывать скролл в родительском контейнере (например в bs)
-    useEffect(() => {
-        const wrapperRef = scrollStateRef.current.containerRef.current;
-        if (!wrapperRef) {
-            return void 0;
-        }
-        const handleTouchStartHandler = (event) => {
-            event.stopPropagation();
-        };
-        wrapperRef.addEventListener('touchstart', handleTouchStartHandler);
-        return () => {
-            wrapperRef.removeEventListener('touchstart', handleTouchStartHandler);
-        };
-    }, []);
-    // события тача
-    const didContainerMove = useRef(false);
-    const onTouchStart = useCallback(() => {
-        setIsTouch(true);
-        didContainerMove.current = false;
-        scrollState.scrollPosition.stop();
-    }, [scrollState]);
-    const onTouchMove = useCallback((event) => {
-        if (!didContainerMove.current) {
-            // надо отличить тач от свайпа
-            didContainerMove.current = Math.abs(event.delta) > MIN_DELTA_FOR_TOUCH;
-        }
-        scrollState.scrollPosition.set(clamp(scrollState.scrollPosition.get() + event.delta, scrollState.viewportWidth.get() - scrollState.contentWidth.get(), 0));
-    }, [scrollState]);
-    const onTouchEnd = useCallback(() => {
-        if (didContainerMove.current) {
-            scrollToItemDebounced();
-        }
-    }, [scrollToItemDebounced]);
-    // события мыши
-    const didContainerHovered = useRef(false);
-    const onMouseEnter = useCallback(() => {
-        didContainerHovered.current = true;
-    }, []);
-    const onWheelMove = useCallback((event) => {
-        setIsTouch(false);
-        if (!didContainerHovered.current) {
-            return;
-        }
-        const currentPosition = scrollState.scrollPosition.get();
-        const nextPosition = clamp(currentPosition + event.delta, scrollState.viewportWidth.get() - scrollState.contentWidth.get(), 0);
-        if (Math.abs(nextPosition - currentPosition) > EPSILON) {
-            scrollState.scrollPosition.set(nextPosition);
-            scrollToItemDebounced();
-            event.preventDefault();
-        }
-    }, [scrollToItemDebounced, scrollState]);
-    const onMouseLeave = useCallback(() => {
-        didContainerHovered.current = false;
-    }, []);
-    const _initScrollHandlers = useCallback(() => initScrollHandlers({
-        axis: 'horizontal',
-        wrapperRef: scrollStateRef.current.containerRef,
-        onTouchStart,
-        onTouchMove,
-        onTouchEnd,
-        onMouseEnter,
-        onWheelMove,
-        onMouseLeave,
-    }), [onTouchMove, onTouchEnd, onWheelMove, onTouchStart, onMouseEnter, onMouseLeave]);
-    const registerItem = useCallback((ref) => {
-        if (!ref.current) {
-            return;
-        }
-        scrollState.items.get().push(ref);
-        scrollState.items.set(scrollState.items.get());
-        resizeOberverRef.current?.observe(ref.current);
+    items.sort((a, b) => (a.current || MAX_OFFSET)[OFFSET_ATTR].left - (b.current || MAX_OFFSET)[OFFSET_ATTR].left);
+    const viewportWidth = containerRef.current.offsetWidth - leftCorrection2 - rightCorrection2;
+    const contentWidth = items.reduce(
+      (pos, itemRef) => Math.max(pos, itemRef.current?.[OFFSET_ATTR]?.right || 0),
+      0
+    );
+    scrollState.viewportWidth.set(viewportWidth);
+    scrollState.contentWidth.set(contentWidth);
+    scrollState.items.set(items);
+    if (scrollState.indexForDeferScroll !== -1) {
+      if (scrollState.behaviorScrollTypeDeferScroll === "instant") {
+        jumpToIndex(scrollState.indexForDeferScroll);
+      } else {
+        scrollToIndex(scrollState.indexForDeferScroll);
+      }
+      scrollState.behaviorScrollTypeDeferScroll = "animate";
+      scrollState.indexForDeferScroll = -1;
+    }
+  }, [scrollState, scrollToIndex, jumpToIndex]);
+  const recalculateItemPositionsDebounced = useCallback(debounce(recalculateItemPositions, 10), [
+    recalculateItemPositions
+  ]);
+  const scrollToItemDebounced = useInitOnce(
+    () => debounce(() => {
+      if (scrollState.scrollSnapAlign === "none") {
+        return;
+      }
+      const targetItemIndex = findIndexNearestToSnapPoint(scrollState);
+      const scrollSnapBehavior = computeScrollSnapBehavior(scrollState);
+      const target = scrollSnapBehavior(scrollState, targetItemIndex);
+      animateScrollToPosition(scrollState, target);
+    }, 100)
+  );
+  useEffect(() => {
+    const state = scrollStateRef.current;
+    const observer = new ResizeObserver(
+      requestAnimation(() => {
         recalculateItemPositions();
-    }, [recalculateItemPositions, scrollState]);
-    const removeItem = useCallback((ref) => {
-        if (!ref.current) {
-            return;
-        }
-        scrollState.items.set(scrollState.items.get().filter((stored) => stored.current !== ref.current));
-        resizeOberverRef.current?.unobserve(ref.current);
-        recalculateItemPositionsDebounced();
-    }, [recalculateItemPositionsDebounced, scrollState]);
-    return {
-        registerItem,
-        removeItem,
-        initScrollHandlers: _initScrollHandlers,
-        containerRef: scrollStateRef.current.containerRef,
-        positionContainerRef: scrollStateRef.current.positionContainerRef,
-        isTouch,
+      })
+    );
+    scrollState.items.get().forEach((item) => item.current && observer.observe(item.current));
+    state.containerRef.current && observer.observe(state.containerRef.current);
+    resizeOberverRef.current = observer;
+    return () => observer.disconnect();
+  }, []);
+  useEffect(() => {
+    const wrapperRef = scrollStateRef.current.containerRef.current;
+    if (!wrapperRef) {
+      return void 0;
+    }
+    const handleTouchStartHandler = (event) => {
+      event.stopPropagation();
     };
+    wrapperRef.addEventListener("touchstart", handleTouchStartHandler);
+    return () => {
+      wrapperRef.removeEventListener("touchstart", handleTouchStartHandler);
+    };
+  }, []);
+  const didContainerMove = useRef(false);
+  const onTouchStart = useCallback(() => {
+    setIsTouch(true);
+    didContainerMove.current = false;
+    scrollState.scrollPosition.stop();
+  }, [scrollState]);
+  const onTouchMove = useCallback(
+    (event) => {
+      if (!didContainerMove.current) {
+        didContainerMove.current = Math.abs(event.delta) > MIN_DELTA_FOR_TOUCH;
+      }
+      scrollState.scrollPosition.set(
+        clamp(
+          scrollState.scrollPosition.get() + event.delta,
+          scrollState.viewportWidth.get() - scrollState.contentWidth.get(),
+          0
+        )
+      );
+    },
+    [scrollState]
+  );
+  const onTouchEnd = useCallback(() => {
+    if (didContainerMove.current) {
+      scrollToItemDebounced();
+    }
+  }, [scrollToItemDebounced]);
+  const didContainerHovered = useRef(false);
+  const onMouseEnter = useCallback(() => {
+    didContainerHovered.current = true;
+  }, []);
+  const onWheelMove = useCallback(
+    (event) => {
+      setIsTouch(false);
+      if (!didContainerHovered.current) {
+        return;
+      }
+      const currentPosition = scrollState.scrollPosition.get();
+      const nextPosition = clamp(
+        currentPosition + event.delta,
+        scrollState.viewportWidth.get() - scrollState.contentWidth.get(),
+        0
+      );
+      if (Math.abs(nextPosition - currentPosition) > EPSILON) {
+        scrollState.scrollPosition.set(nextPosition);
+        scrollToItemDebounced();
+        event.preventDefault();
+      }
+    },
+    [scrollToItemDebounced, scrollState]
+  );
+  const onMouseLeave = useCallback(() => {
+    didContainerHovered.current = false;
+  }, []);
+  const _initScrollHandlers = useCallback(
+    () => initScrollHandlers({
+      axis: "horizontal",
+      wrapperRef: scrollStateRef.current.containerRef,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      onMouseEnter,
+      onWheelMove,
+      onMouseLeave
+    }),
+    [onTouchMove, onTouchEnd, onWheelMove, onTouchStart, onMouseEnter, onMouseLeave]
+  );
+  const registerItem = useCallback(
+    (ref) => {
+      if (!ref.current) {
+        return;
+      }
+      scrollState.items.get().push(ref);
+      scrollState.items.set(scrollState.items.get());
+      resizeOberverRef.current?.observe(ref.current);
+      recalculateItemPositions();
+    },
+    [recalculateItemPositions, scrollState]
+  );
+  const removeItem = useCallback(
+    (ref) => {
+      if (!ref.current) {
+        return;
+      }
+      scrollState.items.set(scrollState.items.get().filter((stored) => stored.current !== ref.current));
+      resizeOberverRef.current?.unobserve(ref.current);
+      recalculateItemPositionsDebounced();
+    },
+    [recalculateItemPositionsDebounced, scrollState]
+  );
+  return {
+    registerItem,
+    removeItem,
+    initScrollHandlers: _initScrollHandlers,
+    containerRef: scrollStateRef.current.containerRef,
+    positionContainerRef: scrollStateRef.current.positionContainerRef,
+    isTouch
+  };
 };
 
 export { useScrollContainer };

package/useScrollContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollContainer.js","sources":["src/useScrollContainer.ts"],"sourcesContent":["import { useRef, useEffect, type RefObject, useCallback, useState } from 'react';\n\nimport { requestAnimation, debounce } from '@hh.ru/magritte-common-func-utils';\nimport { clamp, type ScrollGestureEvent, initScrollHandlers } from '@hh.ru/magritte-internal-custom-scroll';\nimport { useScrollState } from '@hh.ru/magritte-ui-scrollable-container/ScrollStateProvider';\nimport { type ItemWithOffset, OFFSET_ATTR } from '@hh.ru/magritte-ui-scrollable-container/types';\nimport { useScrollableControls } from '@hh.ru/magritte-ui-scrollable-container/useScrollableControls';\nimport {\n    useInitOnce,\n    findIndexNearestToSnapPoint,\n    animateScrollToPosition,\n    computeScrollSnapBehavior,\n} from '@hh.ru/magritte-ui-scrollable-container/utils';\n\nconst EPSILON = 0.5;\nconst MIN_DELTA_FOR_TOUCH = 5;\nconst MAX_OFFSET = { [OFFSET_ATTR]: { left: Number.MAX_SAFE_INTEGER } };\n\n/**\n * Переменные полностью описывающие состояние скролла, хранятся в одном объекте, чтобы не плодить\n * кучу ref'ов и передавать всё состояние в функции одним аргументом, а не длинным списком переменных\n */\nexport interface ScrollInternalState {\n    /** контейнер, в котором лежит positionContainer (определяет видимую область) */\n    containerRef: RefObject<HTMLDivElement>;\n    /** контейнер, с помощью изменения положения которого обеспечивается скролл */\n    positionContainerRef: RefObject<HTMLDivElement>;\n    /** размер коррекции отступов */\n    correction: { leftCorrection: number; rightCorrection: number };\n    /* Было ли взаимодействие с компонентом - скролл или прокрутка к элементу */\n    wasInteracted: boolean;\n}\n\ninterface UseScrollContainer {\n    registerItem: (ref: RefObject<HTMLElement>) => void;\n    removeItem: (ref: RefObject<HTMLElement>) => void;\n    initScrollHandlers: () => VoidFunction;\n    containerRef: RefObject<HTMLDivElement>;\n    positionContainerRef: RefObject<HTMLDivElement>;\n    isTouch: boolean;\n}\n\nexport const useScrollContainer = (): UseScrollContainer => {\n    const scrollState = useScrollState();\n    const { scrollToIndex, jumpToIndex } = useScrollableControls();\n    const [isTouch, setIsTouch] = useState(false);\n    const leftCorrection = scrollState.leftCorrection.get();\n    const rightCorrection = scrollState.rightCorrection.get();\n    const scrollStateRef = useRef<ScrollInternalState>({\n        containerRef: useRef<HTMLDivElement>(null),\n        positionContainerRef: useRef<HTMLDivElement>(null),\n        correction: { leftCorrection, rightCorrection },\n        wasInteracted: false,\n    });\n    scrollStateRef.current.correction = { leftCorrection, rightCorrection };\n    const resizeOberverRef = useRef<ResizeObserver | null>(null);\n\n    // recalc positions + report widths into store\n    const recalculateItemPositions = useCallback(() => {\n        const state = scrollStateRef.current;\n        const { containerRef, correction, positionContainerRef } = state;\n        const { leftCorrection, rightCorrection } = correction;\n        const items = scrollState.items.get();\n        if (!containerRef.current || !positionContainerRef.current) {\n            return;\n        }\n        const offsetLeft = positionContainerRef.current?.getBoundingClientRect().left ?? 0;\n        items.forEach((itemRef) => {\n            if (!itemRef.current) {\n                return;\n            }\n            const rect = itemRef.current.getBoundingClientRect();\n            itemRef.current[OFFSET_ATTR] = { left: rect.left - offsetLeft, right: rect.right - offsetLeft };\n        });\n        items.sort((a, b) => (a.current || MAX_OFFSET)[OFFSET_ATTR].left - (b.current || MAX_OFFSET)[OFFSET_ATTR].left);\n        const viewportWidth = containerRef.current.offsetWidth - leftCorrection - rightCorrection;\n        const contentWidth = items.reduce(\n            (pos, itemRef) => Math.max(pos, itemRef.current?.[OFFSET_ATTR]?.right || 0),\n            0\n        );\n        scrollState.viewportWidth.set(viewportWidth);\n        scrollState.contentWidth.set(contentWidth);\n        scrollState.items.set(items);\n        if (scrollState.indexForDeferScroll !== -1) {\n            if (scrollState.behaviorScrollTypeDeferScroll === 'instant') {\n                jumpToIndex(scrollState.indexForDeferScroll);\n            } else {\n                scrollToIndex(scrollState.indexForDeferScroll);\n            }\n            scrollState.behaviorScrollTypeDeferScroll = 'animate';\n            scrollState.indexForDeferScroll = -1;\n        }\n    }, [scrollState, scrollToIndex, jumpToIndex]);\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    const recalculateItemPositionsDebounced = useCallback(debounce(recalculateItemPositions, 10), [\n        recalculateItemPositions,\n    ]);\n\n    const scrollToItemDebounced = useInitOnce(() =>\n        debounce(() => {\n            if (scrollState.scrollSnapAlign === 'none') {\n                return;\n            }\n            const targetItemIndex = findIndexNearestToSnapPoint(scrollState);\n            const scrollSnapBehavior = computeScrollSnapBehavior(scrollState);\n            const target = scrollSnapBehavior(scrollState, targetItemIndex);\n            animateScrollToPosition(scrollState, target);\n        }, 100)\n    );\n\n    useEffect(() => {\n        const state = scrollStateRef.current;\n        const observer = new ResizeObserver(\n            requestAnimation(() => {\n                recalculateItemPositions();\n            })\n        );\n\n        scrollState.items.get().forEach((item) => item.current && observer.observe(item.current));\n        state.containerRef.current && observer.observe(state.containerRef.current);\n        resizeOberverRef.current = observer;\n        return () => observer.disconnect();\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    // Слушатель нужен, чтобы не вызывать скролл в родительском контейнере (например в bs)\n    useEffect(() => {\n        const wrapperRef = scrollStateRef.current.containerRef.current;\n        if (!wrapperRef) {\n            return void 0;\n        }\n        const handleTouchStartHandler = (event: TouchEvent) => {\n            event.stopPropagation();\n        };\n        wrapperRef.addEventListener('touchstart', handleTouchStartHandler);\n        return () => {\n            wrapperRef.removeEventListener('touchstart', handleTouchStartHandler);\n        };\n    }, []);\n\n    // события тача\n    const didContainerMove = useRef(false);\n    const onTouchStart = useCallback(() => {\n        setIsTouch(true);\n        didContainerMove.current = false;\n        scrollState.scrollPosition.stop();\n    }, [scrollState]);\n\n    const onTouchMove = useCallback(\n        (event: ScrollGestureEvent) => {\n            if (!didContainerMove.current) {\n                // надо отличить тач от свайпа\n                didContainerMove.current = Math.abs(event.delta) > MIN_DELTA_FOR_TOUCH;\n            }\n            scrollState.scrollPosition.set(\n                clamp(\n                    scrollState.scrollPosition.get() + event.delta,\n                    scrollState.viewportWidth.get() - scrollState.contentWidth.get(),\n                    0\n                )\n            );\n        },\n        [scrollState]\n    );\n\n    const onTouchEnd = useCallback(() => {\n        if (didContainerMove.current) {\n            scrollToItemDebounced();\n        }\n    }, [scrollToItemDebounced]);\n\n    // события мыши\n    const didContainerHovered = useRef(false);\n    const onMouseEnter = useCallback(() => {\n        didContainerHovered.current = true;\n    }, []);\n\n    const onWheelMove = useCallback(\n        (event: ScrollGestureEvent) => {\n            setIsTouch(false);\n            if (!didContainerHovered.current) {\n                return;\n            }\n            const currentPosition = scrollState.scrollPosition.get();\n            const nextPosition = clamp(\n                currentPosition + event.delta,\n                scrollState.viewportWidth.get() - scrollState.contentWidth.get(),\n                0\n            );\n            if (Math.abs(nextPosition - currentPosition) > EPSILON) {\n                scrollState.scrollPosition.set(nextPosition);\n                scrollToItemDebounced();\n                event.preventDefault();\n            }\n        },\n        [scrollToItemDebounced, scrollState]\n    );\n\n    const onMouseLeave = useCallback(() => {\n        didContainerHovered.current = false;\n    }, []);\n\n    const _initScrollHandlers = useCallback(\n        () =>\n            initScrollHandlers({\n                axis: 'horizontal',\n                wrapperRef: scrollStateRef.current.containerRef,\n                onTouchStart,\n                onTouchMove,\n                onTouchEnd,\n                onMouseEnter,\n                onWheelMove,\n                onMouseLeave,\n            }),\n        [onTouchMove, onTouchEnd, onWheelMove, onTouchStart, onMouseEnter, onMouseLeave]\n    );\n\n    const registerItem = useCallback(\n        (ref: RefObject<HTMLElement>) => {\n            if (!ref.current) {\n                return;\n            }\n            scrollState.items.get().push(ref as unknown as RefObject<HTMLElement & ItemWithOffset>);\n            scrollState.items.set(scrollState.items.get());\n            resizeOberverRef.current?.observe(ref.current);\n            recalculateItemPositions();\n        },\n        [recalculateItemPositions, scrollState]\n    );\n\n    const removeItem = useCallback(\n        (ref: RefObject<HTMLElement>) => {\n            if (!ref.current) {\n                return;\n            }\n            scrollState.items.set(scrollState.items.get().filter((stored) => stored.current !== ref.current));\n            resizeOberverRef.current?.unobserve(ref.current);\n            recalculateItemPositionsDebounced();\n        },\n        [recalculateItemPositionsDebounced, scrollState]\n    );\n\n    return {\n        registerItem,\n        removeItem,\n        initScrollHandlers: _initScrollHandlers,\n        containerRef: scrollStateRef.current.containerRef,\n        positionContainerRef: scrollStateRef.current.positionContainerRef,\n        isTouch,\n    };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useScrollContainer.js","sources":["src/useScrollContainer.ts"],"sourcesContent":["import { useRef, useEffect, type RefObject, useCallback, useState } from 'react';\n\nimport { requestAnimation, debounce } from '@hh.ru/magritte-common-func-utils';\nimport { clamp, type ScrollGestureEvent, initScrollHandlers } from '@hh.ru/magritte-internal-custom-scroll';\nimport { useScrollState } from '@hh.ru/magritte-ui-scrollable-container/ScrollStateProvider';\nimport { type ItemWithOffset, OFFSET_ATTR } from '@hh.ru/magritte-ui-scrollable-container/types';\nimport { useScrollableControls } from '@hh.ru/magritte-ui-scrollable-container/useScrollableControls';\nimport {\n    useInitOnce,\n    findIndexNearestToSnapPoint,\n    animateScrollToPosition,\n    computeScrollSnapBehavior,\n} from '@hh.ru/magritte-ui-scrollable-container/utils';\n\nconst EPSILON = 0.5;\nconst MIN_DELTA_FOR_TOUCH = 5;\nconst MAX_OFFSET = { [OFFSET_ATTR]: { left: Number.MAX_SAFE_INTEGER } };\n\n/**\n * Переменные полностью описывающие состояние скролла, хранятся в одном объекте, чтобы не плодить\n * кучу ref'ов и передавать всё состояние в функции одним аргументом, а не длинным списком переменных\n */\nexport interface ScrollInternalState {\n    /** контейнер, в котором лежит positionContainer (определяет видимую область) */\n    containerRef: RefObject<HTMLDivElement>;\n    /** контейнер, с помощью изменения положения которого обеспечивается скролл */\n    positionContainerRef: RefObject<HTMLDivElement>;\n    /** размер коррекции отступов */\n    correction: { leftCorrection: number; rightCorrection: number };\n    /* Было ли взаимодействие с компонентом - скролл или прокрутка к элементу */\n    wasInteracted: boolean;\n}\n\ninterface UseScrollContainer {\n    registerItem: (ref: RefObject<HTMLElement>) => void;\n    removeItem: (ref: RefObject<HTMLElement>) => void;\n    initScrollHandlers: () => VoidFunction;\n    containerRef: RefObject<HTMLDivElement>;\n    positionContainerRef: RefObject<HTMLDivElement>;\n    isTouch: boolean;\n}\n\nexport const useScrollContainer = (): UseScrollContainer => {\n    const scrollState = useScrollState();\n    const { scrollToIndex, jumpToIndex } = useScrollableControls();\n    const [isTouch, setIsTouch] = useState(false);\n    const leftCorrection = scrollState.leftCorrection.get();\n    const rightCorrection = scrollState.rightCorrection.get();\n    const scrollStateRef = useRef<ScrollInternalState>({\n        containerRef: useRef<HTMLDivElement>(null),\n        positionContainerRef: useRef<HTMLDivElement>(null),\n        correction: { leftCorrection, rightCorrection },\n        wasInteracted: false,\n    });\n    scrollStateRef.current.correction = { leftCorrection, rightCorrection };\n    const resizeOberverRef = useRef<ResizeObserver | null>(null);\n\n    // recalc positions + report widths into store\n    const recalculateItemPositions = useCallback(() => {\n        const state = scrollStateRef.current;\n        const { containerRef, correction, positionContainerRef } = state;\n        const { leftCorrection, rightCorrection } = correction;\n        const items = scrollState.items.get();\n        if (!containerRef.current || !positionContainerRef.current) {\n            return;\n        }\n        const offsetLeft = positionContainerRef.current?.getBoundingClientRect().left ?? 0;\n        items.forEach((itemRef) => {\n            if (!itemRef.current) {\n                return;\n            }\n            const rect = itemRef.current.getBoundingClientRect();\n            itemRef.current[OFFSET_ATTR] = { left: rect.left - offsetLeft, right: rect.right - offsetLeft };\n        });\n        items.sort((a, b) => (a.current || MAX_OFFSET)[OFFSET_ATTR].left - (b.current || MAX_OFFSET)[OFFSET_ATTR].left);\n        const viewportWidth = containerRef.current.offsetWidth - leftCorrection - rightCorrection;\n        const contentWidth = items.reduce(\n            (pos, itemRef) => Math.max(pos, itemRef.current?.[OFFSET_ATTR]?.right || 0),\n            0\n        );\n        scrollState.viewportWidth.set(viewportWidth);\n        scrollState.contentWidth.set(contentWidth);\n        scrollState.items.set(items);\n        if (scrollState.indexForDeferScroll !== -1) {\n            if (scrollState.behaviorScrollTypeDeferScroll === 'instant') {\n                jumpToIndex(scrollState.indexForDeferScroll);\n            } else {\n                scrollToIndex(scrollState.indexForDeferScroll);\n            }\n            scrollState.behaviorScrollTypeDeferScroll = 'animate';\n            scrollState.indexForDeferScroll = -1;\n        }\n    }, [scrollState, scrollToIndex, jumpToIndex]);\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    const recalculateItemPositionsDebounced = useCallback(debounce(recalculateItemPositions, 10), [\n        recalculateItemPositions,\n    ]);\n\n    const scrollToItemDebounced = useInitOnce(() =>\n        debounce(() => {\n            if (scrollState.scrollSnapAlign === 'none') {\n                return;\n            }\n            const targetItemIndex = findIndexNearestToSnapPoint(scrollState);\n            const scrollSnapBehavior = computeScrollSnapBehavior(scrollState);\n            const target = scrollSnapBehavior(scrollState, targetItemIndex);\n            animateScrollToPosition(scrollState, target);\n        }, 100)\n    );\n\n    useEffect(() => {\n        const state = scrollStateRef.current;\n        const observer = new ResizeObserver(\n            requestAnimation(() => {\n                recalculateItemPositions();\n            })\n        );\n\n        scrollState.items.get().forEach((item) => item.current && observer.observe(item.current));\n        state.containerRef.current && observer.observe(state.containerRef.current);\n        resizeOberverRef.current = observer;\n        return () => observer.disconnect();\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    // Слушатель нужен, чтобы не вызывать скролл в родительском контейнере (например в bs)\n    useEffect(() => {\n        const wrapperRef = scrollStateRef.current.containerRef.current;\n        if (!wrapperRef) {\n            return void 0;\n        }\n        const handleTouchStartHandler = (event: TouchEvent) => {\n            event.stopPropagation();\n        };\n        wrapperRef.addEventListener('touchstart', handleTouchStartHandler);\n        return () => {\n            wrapperRef.removeEventListener('touchstart', handleTouchStartHandler);\n        };\n    }, []);\n\n    // события тача\n    const didContainerMove = useRef(false);\n    const onTouchStart = useCallback(() => {\n        setIsTouch(true);\n        didContainerMove.current = false;\n        scrollState.scrollPosition.stop();\n    }, [scrollState]);\n\n    const onTouchMove = useCallback(\n        (event: ScrollGestureEvent) => {\n            if (!didContainerMove.current) {\n                // надо отличить тач от свайпа\n                didContainerMove.current = Math.abs(event.delta) > MIN_DELTA_FOR_TOUCH;\n            }\n            scrollState.scrollPosition.set(\n                clamp(\n                    scrollState.scrollPosition.get() + event.delta,\n                    scrollState.viewportWidth.get() - scrollState.contentWidth.get(),\n                    0\n                )\n            );\n        },\n        [scrollState]\n    );\n\n    const onTouchEnd = useCallback(() => {\n        if (didContainerMove.current) {\n            scrollToItemDebounced();\n        }\n    }, [scrollToItemDebounced]);\n\n    // события мыши\n    const didContainerHovered = useRef(false);\n    const onMouseEnter = useCallback(() => {\n        didContainerHovered.current = true;\n    }, []);\n\n    const onWheelMove = useCallback(\n        (event: ScrollGestureEvent) => {\n            setIsTouch(false);\n            if (!didContainerHovered.current) {\n                return;\n            }\n            const currentPosition = scrollState.scrollPosition.get();\n            const nextPosition = clamp(\n                currentPosition + event.delta,\n                scrollState.viewportWidth.get() - scrollState.contentWidth.get(),\n                0\n            );\n            if (Math.abs(nextPosition - currentPosition) > EPSILON) {\n                scrollState.scrollPosition.set(nextPosition);\n                scrollToItemDebounced();\n                event.preventDefault();\n            }\n        },\n        [scrollToItemDebounced, scrollState]\n    );\n\n    const onMouseLeave = useCallback(() => {\n        didContainerHovered.current = false;\n    }, []);\n\n    const _initScrollHandlers = useCallback(\n        () =>\n            initScrollHandlers({\n                axis: 'horizontal',\n                wrapperRef: scrollStateRef.current.containerRef,\n                onTouchStart,\n                onTouchMove,\n                onTouchEnd,\n                onMouseEnter,\n                onWheelMove,\n                onMouseLeave,\n            }),\n        [onTouchMove, onTouchEnd, onWheelMove, onTouchStart, onMouseEnter, onMouseLeave]\n    );\n\n    const registerItem = useCallback(\n        (ref: RefObject<HTMLElement>) => {\n            if (!ref.current) {\n                return;\n            }\n            scrollState.items.get().push(ref as unknown as RefObject<HTMLElement & ItemWithOffset>);\n            scrollState.items.set(scrollState.items.get());\n            resizeOberverRef.current?.observe(ref.current);\n            recalculateItemPositions();\n        },\n        [recalculateItemPositions, scrollState]\n    );\n\n    const removeItem = useCallback(\n        (ref: RefObject<HTMLElement>) => {\n            if (!ref.current) {\n                return;\n            }\n            scrollState.items.set(scrollState.items.get().filter((stored) => stored.current !== ref.current));\n            resizeOberverRef.current?.unobserve(ref.current);\n            recalculateItemPositionsDebounced();\n        },\n        [recalculateItemPositionsDebounced, scrollState]\n    );\n\n    return {\n        registerItem,\n        removeItem,\n        initScrollHandlers: _initScrollHandlers,\n        containerRef: scrollStateRef.current.containerRef,\n        positionContainerRef: scrollStateRef.current.positionContainerRef,\n        isTouch,\n    };\n};\n"],"names":["leftCorrection","rightCorrection"],"mappings":"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"}

package/useScrollableControls.d.ts

@@ -1,4 +1,4 @@
-import { type ScrollState } from '@hh.ru/magritte-ui-scrollable-container/ScrollStateProvider';
-import type { ScrollableControls } from '@hh.ru/magritte-ui-scrollable-container/types';
+import { type ScrollState } from './ScrollStateProvider';
+import type { ScrollableControls } from './types';
 export declare const useScrollableControlsWithState: (scrollState: ScrollState) => ScrollableControls;
 export declare const useScrollableControls: () => ScrollableControls;

package/useScrollableControls.js

@@ -9,80 +9,98 @@ import '@hh.ru/magritte-ui-breakpoint';
 import './types.js';
 
 const useScrollableControlsWithState = (scrollState) => {
-    const scrollSide = useCallback((toRight = false) => {
-        if (scrollState.scrollSnapAlign === 'none') {
-            const delta = toRight ? -scrollState.viewportWidth.get() : scrollState.viewportWidth.get();
-            const position = scrollState.scrollPosition.get() + delta;
-            animateScrollToPosition(scrollState, position);
-            return;
-        }
-        const index = findIndexNearestToSnapPoint(scrollState);
-        const nextIndex = clamp(toRight ? index + 1 : index - 1, 0, scrollState.items.get().length - 1);
-        if (!ensureItemReadyForScroll(scrollState, nextIndex)) {
-            return;
-        }
-        const scrollSnapBehavior = computeScrollSnapBehavior(scrollState);
-        const target = scrollSnapBehavior(scrollState, nextIndex);
-        animateScrollToPosition(scrollState, target);
-    }, [scrollState]);
-    const scrollToIndex = useCallback((index) => {
-        if (!ensureItemReadyForScroll(scrollState, index)) {
-            return;
-        }
-        const scrollSnapBehavior = computeScrollSnapBehavior(scrollState);
-        const target = scrollSnapBehavior(scrollState, index);
-        animateScrollToPosition(scrollState, target);
-    }, [scrollState]);
-    const scrollToFirstItem = useCallback(() => scrollToIndex(0), [scrollToIndex]);
-    const scrollToLastItem = useCallback(() => scrollToIndex(scrollState.items.get().length - 1), [scrollState, scrollToIndex]);
-    const scrollToItem = useCallback((ref) => {
-        const index = scrollState.items.get().findIndex((item) => item.current && item.current === ref.current);
-        index !== -1 && scrollToIndex(index);
-    }, [scrollState, scrollToIndex]);
-    const jumpToIndex = useCallback((index) => {
-        if (!ensureItemReadyForScroll(scrollState, index, 'instant')) {
-            return;
-        }
-        const scrollSnapBehavior = computeScrollSnapBehavior(scrollState);
-        const target = scrollSnapBehavior(scrollState, index);
-        const { scrollPosition, springScrollPosition, viewportWidth, contentWidth } = scrollState;
-        if (target === null) {
-            return;
-        }
-        const clampedTarget = clamp(target, viewportWidth.get() - contentWidth.get(), 0);
-        const isScrollPositionReached = scrollPosition.get() === clampedTarget;
-        const isSpringScrollPositionReached = !springScrollPosition || springScrollPosition.get() === clampedTarget;
-        if (isScrollPositionReached && isSpringScrollPositionReached) {
-            return;
-        }
-        scrollPosition.jump(clampedTarget);
-        springScrollPosition?.jump(clampedTarget);
-    }, [scrollState]);
-    const jumpBy = useCallback((delta) => {
-        const { scrollPosition, springScrollPosition, viewportWidth, contentWidth } = scrollState;
-        const target = clamp(scrollPosition.get() + delta, viewportWidth.get() - contentWidth.get(), 0);
-        const clampedDelta = target - scrollPosition.get();
-        if (clampedDelta === 0) {
-            return;
-        }
-        scrollPosition.jump(target);
-        springScrollPosition?.jump(springScrollPosition.get() + clampedDelta);
-    }, [scrollState]);
-    return {
-        scrollLeft: () => scrollSide(),
-        scrollRight: () => scrollSide(true),
-        scrollToFirstItem,
-        scrollToLastItem,
-        scrollToIndex,
-        scrollToItem,
-        jumpToIndex,
-        jumpBy,
-    };
+  const scrollSide = useCallback(
+    (toRight = false) => {
+      if (scrollState.scrollSnapAlign === "none") {
+        const delta = toRight ? -scrollState.viewportWidth.get() : scrollState.viewportWidth.get();
+        const position = scrollState.scrollPosition.get() + delta;
+        animateScrollToPosition(scrollState, position);
+        return;
+      }
+      const index = findIndexNearestToSnapPoint(scrollState);
+      const nextIndex = clamp(toRight ? index + 1 : index - 1, 0, scrollState.items.get().length - 1);
+      if (!ensureItemReadyForScroll(scrollState, nextIndex)) {
+        return;
+      }
+      const scrollSnapBehavior = computeScrollSnapBehavior(scrollState);
+      const target = scrollSnapBehavior(scrollState, nextIndex);
+      animateScrollToPosition(scrollState, target);
+    },
+    [scrollState]
+  );
+  const scrollToIndex = useCallback(
+    (index) => {
+      if (!ensureItemReadyForScroll(scrollState, index)) {
+        return;
+      }
+      const scrollSnapBehavior = computeScrollSnapBehavior(scrollState);
+      const target = scrollSnapBehavior(scrollState, index);
+      animateScrollToPosition(scrollState, target);
+    },
+    [scrollState]
+  );
+  const scrollToFirstItem = useCallback(() => scrollToIndex(0), [scrollToIndex]);
+  const scrollToLastItem = useCallback(
+    () => scrollToIndex(scrollState.items.get().length - 1),
+    [scrollState, scrollToIndex]
+  );
+  const scrollToItem = useCallback(
+    (ref) => {
+      const index = scrollState.items.get().findIndex((item) => item.current && item.current === ref.current);
+      index !== -1 && scrollToIndex(index);
+    },
+    [scrollState, scrollToIndex]
+  );
+  const jumpToIndex = useCallback(
+    (index) => {
+      if (!ensureItemReadyForScroll(scrollState, index, "instant")) {
+        return;
+      }
+      const scrollSnapBehavior = computeScrollSnapBehavior(scrollState);
+      const target = scrollSnapBehavior(scrollState, index);
+      const { scrollPosition, springScrollPosition, viewportWidth, contentWidth } = scrollState;
+      if (target === null) {
+        return;
+      }
+      const clampedTarget = clamp(target, viewportWidth.get() - contentWidth.get(), 0);
+      const isScrollPositionReached = scrollPosition.get() === clampedTarget;
+      const isSpringScrollPositionReached = !springScrollPosition || springScrollPosition.get() === clampedTarget;
+      if (isScrollPositionReached && isSpringScrollPositionReached) {
+        return;
+      }
+      scrollPosition.jump(clampedTarget);
+      springScrollPosition?.jump(clampedTarget);
+    },
+    [scrollState]
+  );
+  const jumpBy = useCallback(
+    (delta) => {
+      const { scrollPosition, springScrollPosition, viewportWidth, contentWidth } = scrollState;
+      const target = clamp(scrollPosition.get() + delta, viewportWidth.get() - contentWidth.get(), 0);
+      const clampedDelta = target - scrollPosition.get();
+      if (clampedDelta === 0) {
+        return;
+      }
+      scrollPosition.jump(target);
+      springScrollPosition?.jump(springScrollPosition.get() + clampedDelta);
+    },
+    [scrollState]
+  );
+  return {
+    scrollLeft: () => scrollSide(),
+    scrollRight: () => scrollSide(true),
+    scrollToFirstItem,
+    scrollToLastItem,
+    scrollToIndex,
+    scrollToItem,
+    jumpToIndex,
+    jumpBy
+  };
 };
 const useScrollableControls = () => {
-    const scrollState = useScrollState();
-    const controls = useScrollableControlsWithState(scrollState);
-    return controls;
+  const scrollState = useScrollState();
+  const controls = useScrollableControlsWithState(scrollState);
+  return controls;
 };
 
 export { useScrollableControls, useScrollableControlsWithState };