@hh.ru/magritte-ui-scrollable-container 5.3.0 → 6.0.1

package/ScrollableContainerDotPages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollableContainerDotPages.js","sources":["../src/ScrollableContainerDotPages.tsx"],"sourcesContent":["import { type FC, useState, useEffect, useRef } from 'react';\n\nimport { clamp } from '@hh.ru/magritte-internal-custom-scroll/initScrollHandlers';\nimport { DotPages } from '@hh.ru/magritte-ui-dot-pages';\nimport { useScrollState } from '@hh.ru/magritte-ui-scrollable-container/ScrollStateProvider';\nimport { OFFSET_ATTR, ScrollableContainerDotPagesProps } from '@hh.ru/magritte-ui-scrollable-container/types';\nimport { useInitOnce, findIndexNearestToSnapPoint } from '@hh.ru/magritte-ui-scrollable-container/utils';\nimport { VSpacing } from '@hh.ru/magritte-ui-spacing';\n\nimport styles from './scrollableContainer.less';\n\nconst DEFAULT_DOT = 1;\n\nexport const ScrollableContainerDotPages: FC<ScrollableContainerDotPagesProps> = ({\n    onChangeDot,\n    dotPagesProps,\n    offsetTop = 8,\n}) => {\n    const scrollState = useScrollState();\n    const [activeDot, setActiveDot] = useState(DEFAULT_DOT);\n    const [itemsCount, setItemsCount] = useState(0);\n    const activeDotRef = useRef(DEFAULT_DOT);\n    const onChangeDotRef = useRef(onChangeDot);\n    onChangeDotRef.current = onChangeDot;\n\n    const setDotAndEmitOnChange = useInitOnce(() => (dot: number) => {\n        if (dot === activeDotRef.current) {\n            return;\n        }\n        setActiveDot(dot);\n        onChangeDotRef.current?.(dot);\n        activeDotRef.current = dot;\n    });\n\n    const updateActiveDot = useInitOnce(() => () => {\n        const { viewportWidth, scrollPosition, items } = scrollState;\n        const center = viewportWidth.get() / 2 + Math.abs(scrollPosition.get());\n        const activeDotItem = items.get()[activeDotRef.current - 1]?.current;\n        if (\n            !activeDotItem ||\n            !activeDotItem[OFFSET_ATTR] ||\n            (activeDotItem[OFFSET_ATTR].left <= center && activeDotItem[OFFSET_ATTR].right >= center)\n        ) {\n            return;\n        }\n        setDotAndEmitOnChange(findIndexNearestToSnapPoint(scrollState) + 1);\n    });\n\n    useEffect(() => {\n        const unsubscribe = [\n            scrollState.scrollPosition.on('change', updateActiveDot),\n            scrollState.items.on('change', (items) => {\n                setItemsCount(items.length);\n                // удалили последний элемент и он был активный\n                if (activeDotRef.current > items.length && items.length !== 0) {\n                    setDotAndEmitOnChange(clamp(activeDotRef.current, 0, items.length - 1));\n                    return;\n                }\n                updateActiveDot();\n            }),\n        ];\n        return () => {\n            unsubscribe.forEach((fn) => fn());\n        };\n    }, [scrollState, updateActiveDot, setDotAndEmitOnChange]);\n\n    if (itemsCount === 0) {\n        return null;\n    }\n\n    return (\n        <div>\n            <VSpacing default={offsetTop} />\n            <div className={styles.dotContainer}>\n                <DotPages\n                    active={activeDot}\n                    count={itemsCount}\n                    data-qa={dotPagesProps?.['data-qa'] || 'scrollable-container__dot-pages'}\n                    {...dotPagesProps}\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/ScrollableContainerGallery.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import type { ScrollableContainerGalleryProps, RegisterAndRemoveItem } from '@hh.ru/magritte-ui-scrollable-container/types';
+export declare const useGalleryContext: () => RegisterAndRemoveItem;
+export declare const ScrollableContainerGallery: FC<ScrollableContainerGalleryProps>;

package/ScrollableContainerGallery.js

@@ -0,0 +1,76 @@
+import './index.css';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useRef, useEffect } from 'react';
+import { useSpring, motion, animate } from 'motion/react';
+import { clamp } from '@hh.ru/magritte-internal-custom-scroll/initScrollHandlers';
+import { useScrollState } from './ScrollStateProvider.js';
+import { useScrollContainer } from './useScrollContainer.js';
+import { getDisableState, findIndexNearestToSnapPoint, computeScrollSnapBehavior } from './utils.js';
+import { s as styles } from './scrollableContainer-DSb3wQO4.js';
+import './ObservableValue.js';
+import '@hh.ru/magritte-common-func-utils';
+import '@hh.ru/magritte-internal-custom-scroll';
+import './types.js';
+import './useScrollableControls.js';
+import '@hh.ru/magritte-ui-breakpoint';
+
+const GalleryContext = createContext({
+    registerItem: () => null,
+    removeItem: () => null,
+});
+const useGalleryContext = () => useContext(GalleryContext);
+const ScrollableContainerGallery = ({ children, onScroll, onReady, onChangeSize, }) => {
+    const scrollState = useScrollState();
+    const onReadyRef = useRef(onReady);
+    const onScrollRef = useRef(onScroll);
+    const onChangeSizeRef = useRef(onChangeSize);
+    onReadyRef.current = onReady;
+    onScrollRef.current = onScroll;
+    onChangeSizeRef.current = onChangeSize;
+    const { registerItem, removeItem, initScrollHandlers, containerRef, positionContainerRef, isTouch } = useScrollContainer();
+    useEffect(() => {
+        const { scrollPosition, viewportWidth, contentWidth } = scrollState;
+        const updateScrollPositionByResize = () => {
+            const index = findIndexNearestToSnapPoint(scrollState);
+            const scrollSnapBehavior = computeScrollSnapBehavior(scrollState);
+            const target = scrollSnapBehavior(scrollState, index);
+            if (target === null) {
+                return;
+            }
+            const position = clamp(target, viewportWidth.get() - contentWidth.get(), 0);
+            onChangeSizeRef.current?.(getDisableState(scrollState));
+            if (scrollPosition.get() === position) {
+                return;
+            }
+            animate(scrollPosition, position, {
+                velocity: Math.max(scrollPosition.getVelocity(), 1),
+            });
+        };
+        const unsubscribe = [
+            scrollPosition.on('change', () => {
+                onScrollRef.current?.(getDisableState(scrollState));
+            }),
+            viewportWidth.on('change', updateScrollPositionByResize),
+            contentWidth.on('change', updateScrollPositionByResize),
+        ];
+        return () => {
+            unsubscribe.forEach((fn) => fn());
+        };
+    }, [scrollState]);
+    useEffect(() => {
+        onReadyRef.current?.(getDisableState(scrollState));
+        return initScrollHandlers();
+    }, [initScrollHandlers, scrollState]);
+    const springScrollPosition = useSpring(scrollState.scrollPosition, {
+        stiffness: 1800,
+        damping: 75,
+        mass: 0.5,
+    });
+    return (jsx(GalleryContext.Provider, { value: {
+            registerItem,
+            removeItem,
+        }, children: jsx("div", { ref: containerRef, className: styles.scrollableContainer, "data-qa": "scrollable-container__overflow-container", children: jsx(motion.div, { ref: positionContainerRef, "data-qa": "scrollable-container__position-container", className: styles.positionContainer, style: { x: isTouch ? scrollState.scrollPosition : springScrollPosition }, children: children }) }) }));
+};
+
+export { ScrollableContainerGallery, useGalleryContext };
+//# sourceMappingURL=ScrollableContainerGallery.js.map

package/ScrollableContainerGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollableContainerGallery.js","sources":["../src/ScrollableContainerGallery.tsx"],"sourcesContent":["import { type FC, createContext, useContext, useEffect, useRef } from 'react';\nimport { animate, motion, useSpring } from 'motion/react';\n\nimport { clamp } from '@hh.ru/magritte-internal-custom-scroll/initScrollHandlers';\nimport { useScrollState } from '@hh.ru/magritte-ui-scrollable-container/ScrollStateProvider';\nimport type {\n    ScrollableContainerGalleryProps,\n    RegisterAndRemoveItem,\n} from '@hh.ru/magritte-ui-scrollable-container/types';\nimport { useScrollContainer } from '@hh.ru/magritte-ui-scrollable-container/useScrollContainer';\nimport {\n    getDisableState,\n    findIndexNearestToSnapPoint,\n    computeScrollSnapBehavior,\n} from '@hh.ru/magritte-ui-scrollable-container/utils';\n\nimport styles from './scrollableContainer.less';\n\nconst GalleryContext = createContext<RegisterAndRemoveItem>({\n    registerItem: () => null,\n    removeItem: () => null,\n});\n\nexport const useGalleryContext = (): RegisterAndRemoveItem => useContext(GalleryContext);\n\nexport const ScrollableContainerGallery: FC<ScrollableContainerGalleryProps> = ({\n    children,\n    onScroll,\n    onReady,\n    onChangeSize,\n}) => {\n    const scrollState = useScrollState();\n    const onReadyRef = useRef(onReady);\n    const onScrollRef = useRef(onScroll);\n    const onChangeSizeRef = useRef(onChangeSize);\n    onReadyRef.current = onReady;\n    onScrollRef.current = onScroll;\n    onChangeSizeRef.current = onChangeSize;\n\n    const { registerItem, removeItem, initScrollHandlers, containerRef, positionContainerRef, isTouch } =\n        useScrollContainer();\n\n    useEffect(() => {\n        const { scrollPosition, viewportWidth, contentWidth } = scrollState;\n        const updateScrollPositionByResize = () => {\n            const index = findIndexNearestToSnapPoint(scrollState);\n            const scrollSnapBehavior = computeScrollSnapBehavior(scrollState);\n            const target = scrollSnapBehavior(scrollState, index);\n            if (target === null) {\n                return;\n            }\n            const position = clamp(target, viewportWidth.get() - contentWidth.get(), 0);\n            onChangeSizeRef.current?.(getDisableState(scrollState));\n            if (scrollPosition.get() === position) {\n                return;\n            }\n            animate(scrollPosition, position, {\n                velocity: Math.max(scrollPosition.getVelocity(), 1),\n            });\n        };\n        const unsubscribe = [\n            scrollPosition.on('change', () => {\n                onScrollRef.current?.(getDisableState(scrollState));\n            }),\n            viewportWidth.on('change', updateScrollPositionByResize),\n            contentWidth.on('change', updateScrollPositionByResize),\n        ];\n        return () => {\n            unsubscribe.forEach((fn) => fn());\n        };\n    }, [scrollState]);\n\n    useEffect(() => {\n        onReadyRef.current?.(getDisableState(scrollState));\n        return initScrollHandlers();\n    }, [initScrollHandlers, scrollState]);\n\n    const springScrollPosition = useSpring(scrollState.scrollPosition, {\n        stiffness: 1800,\n        damping: 75,\n        mass: 0.5,\n    });\n\n    return (\n        <GalleryContext.Provider\n            value={{\n                registerItem,\n                removeItem,\n            }}\n        >\n            <div\n                ref={containerRef}\n                className={styles.scrollableContainer}\n                data-qa=\"scrollable-container__overflow-container\"\n            >\n                <motion.div\n                    ref={positionContainerRef}\n                    data-qa=\"scrollable-container__position-container\"\n                    className={styles.positionContainer}\n                    style={{ x: isTouch ? scrollState.scrollPosition : springScrollPosition }}\n                >\n                    {children}\n                </motion.div>\n            </div>\n        </GalleryContext.Provider>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}

package/ScrollableItem.d.ts

@@ -1,2 +1,3 @@
-import { PropsWithChildren, FC, HTMLAttributes } from 'react';
-export declare const ScrollableItem: FC<PropsWithChildren<HTMLAttributes<HTMLDivElement>>>;
+import { type FC } from 'react';
+import type { ScrollableItemProps } from '@hh.ru/magritte-ui-scrollable-container/types';
+export declare const ScrollableItem: FC<ScrollableItemProps>;

package/ScrollableItem.js

@@ -1,26 +1,31 @@
 import './index.css';
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useLayoutEffect } from 'react';
-import { useScrollContext } from './ScrollableContainer.js';
-import 'classnames';
-import '@hh.ru/magritte-ui-breakpoint';
-import '@hh.ru/magritte-ui-dot-pages';
-import '@hh.ru/magritte-ui-icon/icon';
-import './useScrollContainer-DvtB6-c_.js';
+import { useGalleryContext } from './ScrollableContainerGallery.js';
+import { useScrollableControls } from './useScrollableControls.js';
+import 'motion/react';
+import '@hh.ru/magritte-internal-custom-scroll/initScrollHandlers';
+import './ScrollStateProvider.js';
+import './ObservableValue.js';
+import './useScrollContainer.js';
 import '@hh.ru/magritte-common-func-utils';
 import '@hh.ru/magritte-internal-custom-scroll';
 import './types.js';
 import './utils.js';
-import '@hh.ru/magritte-ui-spacing';
+import '@hh.ru/magritte-ui-breakpoint';
+import './scrollableContainer-DSb3wQO4.js';
 
 const ScrollableItem = ({ children, ...props }) => {
     const ref = useRef(null);
-    const { registerItem, removeItem, scrollToItem } = useScrollContext();
+    const { registerItem, removeItem } = useGalleryContext();
+    const { scrollToItem } = useScrollableControls();
     useLayoutEffect(() => {
         registerItem(ref);
-        return () => removeItem(ref);
+        return () => {
+            removeItem(ref);
+        };
     }, [registerItem, removeItem]);
-    return (jsx("div", { ref: ref, onClick: () => scrollToItem(ref), ...props, children: children }));
+    return (jsx("div", { ref: ref, ...props, onClick: () => scrollToItem(ref), children: children }));
 };
 
 export { ScrollableItem };

package/ScrollableItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableItem.js","sources":["../src/ScrollableItem.tsx"],"sourcesContent":["import { PropsWithChildren, useRef, useLayoutEffect, FC, HTMLAttributes } from 'react';\n\nimport { useScrollContext } from '@hh.ru/magritte-ui-scrollable-container';\n\nexport const ScrollableItem: FC<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> = ({ children, ...props }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const { registerItem, removeItem, scrollToItem } = useScrollContext();\n\n    useLayoutEffect(() => {\n        registerItem(ref);\n        return () => removeItem(ref);\n    }, [registerItem, removeItem]);\n\n    return (\n        <div ref={ref} onClick={() => scrollToItem(ref)} {...props}>\n            {children}\n        </div>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;AAIO,MAAM,cAAc,GAA0D,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,KAAI;AAC5G,IAAA,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtE,eAAe,CAAC,MAAK;QACjB,YAAY,CAAC,GAAG,CAAC,CAAC;AAClB,QAAA,OAAO,MAAM,UAAU,CAAC,GAAG,CAAC,CAAC;AACjC,KAAC,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC;IAE/B,QACIA,aAAK,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC,GAAG,CAAC,EAAA,GAAM,KAAK,EACrD,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN;;;;"}
+{"version":3,"file":"ScrollableItem.js","sources":["../src/ScrollableItem.tsx"],"sourcesContent":["import { useRef, useLayoutEffect, type FC } from 'react';\n\nimport { useGalleryContext } from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainerGallery';\nimport type { ScrollableItemProps } from '@hh.ru/magritte-ui-scrollable-container/types';\nimport { useScrollableControls } from '@hh.ru/magritte-ui-scrollable-container/useScrollableControls';\n\nexport const ScrollableItem: FC<ScrollableItemProps> = ({ children, ...props }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const { registerItem, removeItem } = useGalleryContext();\n    const { scrollToItem } = useScrollableControls();\n\n    useLayoutEffect(() => {\n        registerItem(ref);\n        return () => {\n            removeItem(ref);\n        };\n    }, [registerItem, removeItem]);\n\n    return (\n        <div ref={ref} {...props} onClick={() => scrollToItem(ref)}>\n            {children}\n        </div>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;AAMO,MAAM,cAAc,GAA4B,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,KAAI;AAC9E,IAAA,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,iBAAiB,EAAE,CAAC;AACzD,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAEjD,eAAe,CAAC,MAAK;QACjB,YAAY,CAAC,GAAG,CAAC,CAAC;AAClB,QAAA,OAAO,MAAK;YACR,UAAU,CAAC,GAAG,CAAC,CAAC;AACpB,SAAC,CAAC;AACN,KAAC,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC;IAE/B,QACIA,aAAK,GAAG,EAAE,GAAG,EAAM,GAAA,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC,GAAG,CAAC,EACrD,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN;;;;"}

package/index.css

@@ -1,72 +1,46 @@
-:root{
-  --magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v24-3-0:cubic-bezier(0.25, 0.1, 0.25, 1);
-  --magritte-semantic-animation-ease-in-out-tiger-200-duration-v24-3-0:200ms;
-}
-.magritte-scroll-wrapper___vTdZl_5-3-0{
+.magritte-scroll-wrapper___vTdZl_6-0-1{
   position:relative;
   touch-action:pan-y pinch-zoom;
 }
-.magritte-scrollable-container___AKIUp_5-3-0{
+.magritte-scrollable-container___AKIUp_6-0-1{
   display:block;
   overflow-x:hidden;
   overflow-x:clip;
   overflow-y:visible;
   width:100%;
   min-height:40px;
-  padding:4px;
-  margin:-4px;
-}
-.magritte-fade-both-sides___pBan7_5-3-0:not(.magritte-no-buttons___eCwO-_5-3-0) .magritte-scrollable-container___AKIUp_5-3-0{
-  padding:4px 0;
-  margin:-4px 0;
-  --both-sides-mask:linear-gradient(90deg, transparent 0, transparent 36px, #000 100.504px, #000 calc(100% - 100.50399999999999px), transparent calc(100% - 36px));
-  -webkit-mask:var(--both-sides-mask);
-  mask:var(--both-sides-mask);
+  padding-left:var(--magritte-ui-scrollabe-container-pl, 4px);
+  padding-right:var(--magritte-ui-scrollabe-container-pr, 4px);
+  margin-left:var(--magritte-ui-scrollabe-container-ml, -4px);
+  margin-right:var(--magritte-ui-scrollabe-container-mr, -4px);
 }
-.magritte-fade-left-side___Hlpre_5-3-0:not(.magritte-no-buttons___eCwO-_5-3-0) .magritte-scrollable-container___AKIUp_5-3-0{
-  margin-left:0;
-  padding-left:0;
-  --left-fade-mask:linear-gradient(90deg, transparent 0, transparent 36px, #000 100.504px);
-  -webkit-mask:var(--left-fade-mask);
-  mask:var(--left-fade-mask);
+.magritte-scroll-buttons-container___ZeI5a_6-0-1{
+  position:relative;
 }
-.magritte-fade-right-side___Lskyt_5-3-0:not(.magritte-no-buttons___eCwO-_5-3-0) .magritte-scrollable-container___AKIUp_5-3-0{
-  padding-right:0;
-  margin-right:0;
+.magritte-scroll-buttons___0SjoR_6-0-1{
   --right-fade-mask:linear-gradient(90deg, #000 0, #000 calc(100% - 100.50399999999999px), transparent calc(100% - 36px));
-  -webkit-mask:var(--right-fade-mask);
-  mask:var(--right-fade-mask);
+  --left-fade-mask:linear-gradient(90deg, transparent 0, transparent 36px, #000 100.504px);
+  --both-sides-mask:linear-gradient(90deg, transparent 0, transparent 36px, #000 100.504px, #000 calc(100% - 100.50399999999999px), transparent calc(100% - 36px));
+  -webkit-mask:'none';
+  mask:'none';
 }
-.magritte-scroll-button___4GQu3_5-3-0{
+.magritte-scroll-button___4GQu3_6-0-1{
   display:none;
   position:absolute;
   top:50%;
   transform:translateY(-50%);
 }
-.magritte-scroll-button-left___UueEY_5-3-0{
+.magritte-scroll-button-left___UueEY_6-0-1{
   left:0;
 }
-.magritte-fade-left-side___Hlpre_5-3-0:not(.magritte-no-buttons___eCwO-_5-3-0) .magritte-scroll-button-left___UueEY_5-3-0,
-.magritte-fade-both-sides___pBan7_5-3-0:not(.magritte-no-buttons___eCwO-_5-3-0) .magritte-scroll-button-left___UueEY_5-3-0{
-  display:block;
-}
-.magritte-scroll-button-right___wZOn-_5-3-0{
+.magritte-scroll-button-right___wZOn-_6-0-1{
   right:0;
 }
-.magritte-fade-right-side___Lskyt_5-3-0:not(.magritte-no-buttons___eCwO-_5-3-0) .magritte-scroll-button-right___wZOn-_5-3-0,
-.magritte-fade-both-sides___pBan7_5-3-0:not(.magritte-no-buttons___eCwO-_5-3-0) .magritte-scroll-button-right___wZOn-_5-3-0{
-  display:block;
-}
-.magritte-position-container___1A4Bv_5-3-0{
+.magritte-position-container___1A4Bv_6-0-1{
   box-sizing:border-box;
   width:100%;
 }
-.magritte-position-container-animated___XuPNW_5-3-0{
-  transition-property:transform;
-  transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v24-3-0);
-  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v24-3-0);
-}
-.magritte-dot-container___ahtlG_5-3-0{
+.magritte-dot-container___ahtlG_6-0-1{
   display:flex;
   justify-content:center;
 }

package/index.d.ts

@@ -1,3 +1,5 @@
-export { ScrollableContainer, useScrollContext } from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainer';
-export { ScrollableItem } from '@hh.ru/magritte-ui-scrollable-container/ScrollableItem';
-export { type ScrollableContainerProps, type SpacingCorrectionProps, type ScrollableControls, } from '@hh.ru/magritte-ui-scrollable-container/types';
+export { ScrollableContainer } from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainer';
+export { useScrollableControls } from '@hh.ru/magritte-ui-scrollable-container/useScrollableControls';
+export { useGalleryContext } from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainerGallery';
+export { useScrollState } from '@hh.ru/magritte-ui-scrollable-container/ScrollStateProvider';
+export type { RegisterAndRemoveItem, ScrollableContainerProps, SpacingCorrectionProps, ScrollableControls, ScrollableItemProps, ScrollableContainerGalleryProps, ScrollableContainerDotPagesProps, ScrollDisableState, ScrollableContainerButtonProps, ScrollableContainerDefaultLayoutProps, ScrollSnapAlign, } from '@hh.ru/magritte-ui-scrollable-container/types';

package/index.js

@@ -1,16 +1,26 @@
 import './index.css';
-export { ScrollableContainer, useScrollContext } from './ScrollableContainer.js';
-export { ScrollableItem } from './ScrollableItem.js';
+export { ScrollableContainer } from './ScrollableContainer.js';
+export { useScrollableControls } from './useScrollableControls.js';
+export { useGalleryContext } from './ScrollableContainerGallery.js';
+export { useScrollState } from './ScrollStateProvider.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'classnames';
 import '@hh.ru/magritte-ui-breakpoint';
-import '@hh.ru/magritte-ui-dot-pages';
+import './ScrollableContainerButton.js';
+import './ScrollableContainerDefaultLayout.js';
+import 'motion/react';
 import '@hh.ru/magritte-ui-icon/icon';
-import './useScrollContainer-DvtB6-c_.js';
-import '@hh.ru/magritte-common-func-utils';
+import './utils.js';
 import '@hh.ru/magritte-internal-custom-scroll';
 import './types.js';
-import './utils.js';
+import './scrollableContainer-DSb3wQO4.js';
+import './ScrollableContainerDotPages.js';
+import '@hh.ru/magritte-internal-custom-scroll/initScrollHandlers';
+import '@hh.ru/magritte-ui-dot-pages';
 import '@hh.ru/magritte-ui-spacing';
+import './ScrollableItem.js';
+import './useScrollContainer.js';
+import '@hh.ru/magritte-common-func-utils';
+import './ObservableValue.js';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/index.mock.d.ts

@@ -1,4 +1,5 @@
-import { ForwardRefExoticComponent } from 'react';
-export { type ScrollableContainerProps, type SpacingCorrectionProps, } from '@hh.ru/magritte-ui-scrollable-container/types';
-export declare const ScrollableContainer: ForwardRefExoticComponent<Record<string, unknown>>;
-export { useScrollContext } from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainer';
+export type { RegisterAndRemoveItem, ScrollableContainerProps, SpacingCorrectionProps, ScrollableControls, ScrollableItemProps, ScrollableContainerGalleryProps, ScrollableContainerDotPagesProps, ScrollDisableState, ScrollableContainerButtonProps, ScrollableContainerDefaultLayoutProps, ScrollSnapAlign, } from '@hh.ru/magritte-ui-scrollable-container/types';
+export declare const ScrollableContainer: import("react").ForwardRefExoticComponent<Record<string, unknown>>;
+export { useScrollableControls } from '@hh.ru/magritte-ui-scrollable-container/useScrollableControls';
+export { useGalleryContext } from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainerGallery';
+export { useScrollState } from '@hh.ru/magritte-ui-scrollable-container/ScrollStateProvider';

package/index.mock.js

@@ -1,20 +1,44 @@
 import './index.css';
 import { mockComponent } from '@hh.ru/magritte-ui-mock-component';
-export { useScrollContext } from './ScrollableContainer.js';
-import 'react/jsx-runtime';
+export { useScrollableControls } from './useScrollableControls.js';
+export { useGalleryContext } from './ScrollableContainerGallery.js';
+export { useScrollState } from './ScrollStateProvider.js';
 import 'react';
-import 'classnames';
-import '@hh.ru/magritte-ui-breakpoint';
-import '@hh.ru/magritte-ui-dot-pages';
-import '@hh.ru/magritte-ui-icon/icon';
-import './useScrollContainer-DvtB6-c_.js';
-import '@hh.ru/magritte-common-func-utils';
 import '@hh.ru/magritte-internal-custom-scroll';
-import './types.js';
 import './utils.js';
-import '@hh.ru/magritte-ui-spacing';
+import 'motion/react';
+import '@hh.ru/magritte-ui-breakpoint';
+import './types.js';
+import 'react/jsx-runtime';
+import '@hh.ru/magritte-internal-custom-scroll/initScrollHandlers';
+import './useScrollContainer.js';
+import '@hh.ru/magritte-common-func-utils';
+import './scrollableContainer-DSb3wQO4.js';
+import './ObservableValue.js';
 
-const ScrollableContainer = mockComponent('ScrollableContainer', undefined, { withChildren: true });
+const staticProps = {
+    Left: mockComponent('Left', undefined, {
+        withChildren: true,
+    }),
+    Right: mockComponent('Right', undefined, {
+        withChildren: true,
+    }),
+    Item: mockComponent('Item', undefined, {
+        withChildren: true,
+    }),
+    Gallery: mockComponent('Gallery', undefined, {
+        withChildren: true,
+    }),
+    DefaultLayout: mockComponent('DefaultLayout', undefined, {
+        withChildren: true,
+    }),
+    DotPages: mockComponent('DotPages', undefined, {
+        withChildren: true,
+    }),
+};
+const ScrollableContainer = mockComponent('ScrollableContainer', staticProps, {
+    withChildren: true,
+});
 
 export { ScrollableContainer };
 //# sourceMappingURL=index.mock.js.map

package/index.mock.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.mock.js","sources":["../src/index.mock.ts"],"sourcesContent":["import { ForwardRefExoticComponent } from 'react';\n\nimport { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport {\n    type ScrollableContainerProps,\n    type SpacingCorrectionProps,\n} from '@hh.ru/magritte-ui-scrollable-container/types';\n\nexport const ScrollableContainer: ForwardRefExoticComponent<Record<string, unknown>> = mockComponent(\n    'ScrollableContainer',\n    undefined,\n    { withChildren: true }\n);\n\nexport { useScrollContext } from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainer';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AASa,MAAA,mBAAmB,GAAuD,aAAa,CAChG,qBAAqB,EACrB,SAAS,EACT,EAAE,YAAY,EAAE,IAAI,EAAE;;;;"}
+{"version":3,"file":"index.mock.js","sources":["../src/index.mock.ts"],"sourcesContent":["import { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport type {\n    RegisterAndRemoveItem,\n    ScrollableContainerProps,\n    SpacingCorrectionProps,\n    ScrollableControls,\n    ScrollableItemProps,\n    ScrollableContainerGalleryProps,\n    ScrollableContainerDotPagesProps,\n    ScrollDisableState,\n    ScrollableContainerButtonProps,\n    ScrollableContainerDefaultLayoutProps,\n    ScrollSnapAlign,\n} from '@hh.ru/magritte-ui-scrollable-container/types';\n\nconst staticProps = {\n    Left: mockComponent('Left', undefined, {\n        withChildren: true,\n    }),\n    Right: mockComponent('Right', undefined, {\n        withChildren: true,\n    }),\n    Item: mockComponent('Item', undefined, {\n        withChildren: true,\n    }),\n    Gallery: mockComponent('Gallery', undefined, {\n        withChildren: true,\n    }),\n    DefaultLayout: mockComponent('DefaultLayout', undefined, {\n        withChildren: true,\n    }),\n    DotPages: mockComponent('DotPages', undefined, {\n        withChildren: true,\n    }),\n};\n\nexport const ScrollableContainer = mockComponent('ScrollableContainer', staticProps, {\n    withChildren: true,\n});\n\nexport { useScrollableControls } from '@hh.ru/magritte-ui-scrollable-container/useScrollableControls';\nexport { useGalleryContext } from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainerGallery';\nexport { useScrollState } from '@hh.ru/magritte-ui-scrollable-container/ScrollStateProvider';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAgBA,MAAM,WAAW,GAAG;AAChB,IAAA,IAAI,EAAE,aAAa,CAAC,MAAM,EAAE,SAAS,EAAE;AACnC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,KAAK,EAAE,aAAa,CAAC,OAAO,EAAE,SAAS,EAAE;AACrC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,IAAI,EAAE,aAAa,CAAC,MAAM,EAAE,SAAS,EAAE;AACnC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,OAAO,EAAE,aAAa,CAAC,SAAS,EAAE,SAAS,EAAE;AACzC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,aAAa,EAAE,aAAa,CAAC,eAAe,EAAE,SAAS,EAAE;AACrD,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,QAAQ,EAAE,aAAa,CAAC,UAAU,EAAE,SAAS,EAAE;AAC3C,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;CACL,CAAC;MAEW,mBAAmB,GAAG,aAAa,CAAC,qBAAqB,EAAE,WAAW,EAAE;AACjF,IAAA,YAAY,EAAE,IAAI;AACrB,CAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-scrollable-container",
-  "version": "5.3.0",
+  "version": "6.0.1",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -21,7 +21,7 @@
   "dependencies": {
     "@hh.ru/magritte-common-func-utils": "1.3.14",
     "@hh.ru/magritte-design-tokens": "24.3.0",
-    "@hh.ru/magritte-internal-custom-scroll": "2.0.1",
+    "@hh.ru/magritte-internal-custom-scroll": "2.1.0",
     "@hh.ru/magritte-ui-breakpoint": "6.0.6",
     "@hh.ru/magritte-ui-dot-pages": "4.0.16",
     "@hh.ru/magritte-ui-icon": "13.8.0",
@@ -30,10 +30,11 @@
   },
   "peerDependencies": {
     "classnames": ">=2.3.2",
+    "motion": "^12.23.12",
     "react": ">=18.2.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d109f7caea00d4a1f059b59097c9cb75d4bc544a"
+  "gitHead": "804842d14ed7eaf72f6da2970970d8a1b03c476d"
 }

package/scrollableContainer-DSb3wQO4.js

@@ -0,0 +1,5 @@
+import './index.css';
+var styles = {"scroll-wrapper":"magritte-scroll-wrapper___vTdZl_6-0-1","scrollWrapper":"magritte-scroll-wrapper___vTdZl_6-0-1","scrollable-container":"magritte-scrollable-container___AKIUp_6-0-1","scrollableContainer":"magritte-scrollable-container___AKIUp_6-0-1","scroll-buttons-container":"magritte-scroll-buttons-container___ZeI5a_6-0-1","scrollButtonsContainer":"magritte-scroll-buttons-container___ZeI5a_6-0-1","scroll-buttons":"magritte-scroll-buttons___0SjoR_6-0-1","scrollButtons":"magritte-scroll-buttons___0SjoR_6-0-1","scroll-button":"magritte-scroll-button___4GQu3_6-0-1","scrollButton":"magritte-scroll-button___4GQu3_6-0-1","scroll-button-left":"magritte-scroll-button-left___UueEY_6-0-1","scrollButtonLeft":"magritte-scroll-button-left___UueEY_6-0-1","scroll-button-right":"magritte-scroll-button-right___wZOn-_6-0-1","scrollButtonRight":"magritte-scroll-button-right___wZOn-_6-0-1","position-container":"magritte-position-container___1A4Bv_6-0-1","positionContainer":"magritte-position-container___1A4Bv_6-0-1","dot-container":"magritte-dot-container___ahtlG_6-0-1","dotContainer":"magritte-dot-container___ahtlG_6-0-1"};
+
+export { styles as s };
+//# sourceMappingURL=scrollableContainer-DSb3wQO4.js.map

package/scrollableContainer-DSb3wQO4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollableContainer-DSb3wQO4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/types.d.ts

@@ -1,5 +1,6 @@
-import { HTMLAttributes, RefObject, Dispatch, SetStateAction } from 'react';
-import { DotPagesProps } from '@hh.ru/magritte-ui-dot-pages';
+import type { HTMLAttributes, RefObject, MouseEventHandler, ReactNode } from 'react';
+import { TokenBaseStaticSpace } from '@hh.ru/magritte-design-tokens/types';
+import type { DotPagesProps } from '@hh.ru/magritte-ui-dot-pages';
 export declare const OFFSET_ATTR: unique symbol;
 export interface ItemWithOffset {
     [OFFSET_ATTR]: {
@@ -7,82 +8,31 @@ export interface ItemWithOffset {
         right: number;
     };
 }
-/**
- * Переменные полностью описывающие состояние скролла, хранятся в одном объекте, чтобы не плодить
- * кучу ref'ов и передавать всё состояние в функции одним аргументом, а не длинным списком переменных
- */
-export interface ScrollInternalState {
-    /** реф на внешнюю обертку, на нее добавляются классы для фейдв по краям и показа/скрытия кнопок скролла */
-    wrapperRef: RefObject<HTMLDivElement>;
-    /** контейнер с помощью изменения положения которого обеспечивается скролл */
-    positionContainerRef: RefObject<HTMLDivElement>;
-    /** контейнер в котором лежит еонтейнер позиционирования, определяет видимую область */
-    containerRef: RefObject<HTMLDivElement>;
-    /** ширина контейнера позиционирования */
-    positionContainerWidth: number;
-    /** сдвиг контейнера позиционирования относительно родителя */
-    positionContainerTranslation: number;
-    /** ширина контейнера определяющего видимую область */
-    containerWidth: number;
-    /** список элементов которые скроллятся */
-    items: RefObject<HTMLElement & ItemWithOffset>[];
-    /** размер коррекции отступов */
-    correction: {
-        leftCorrection: number;
-        rightCorrection: number;
-    };
-    /** флаг режима без кнопок */
-    disableButtons: boolean;
-    /**
-     * флаг сигнализирующий о том, что происходит анимация подскролла к элементу
-     * когда флаг установлен отключаются обработчики wheel и touch cобытий
-     * */
-    scrollAnimationInProgress: boolean;
-    scrollToItemInProgress: RefObject<unknown> | null;
-    /**
-     * если при маунте дочерних компонентов был вызван scrollToItem, то элемент к которому нужно
-     * подскроллить сохраняется здесь мы не можем сразу после маунта скроллить, т.к. неизвестна ширина
-     * контейнера позиционирования, кроме того в этом случае подскролл должен происходить без анимации
-     */
-    scrollToOnMount: RefObject<HTMLElement> | null;
-    /**
-     * флаг, сигнализирующий о том, что в контейнере зарегистрированы элементы, для которых не произведен расчет позиции
-     * это может произойти из-за того, что расчет позиции дебаунсится
-     * при наличии этого флага во всех функциях оcуществляющих скролл нужно предварительно синхронно рассчитать позиции
-     * всех зарегистрированных элементов
-     */
-    recalcRequired: boolean;
-    /** нужно ли центрировать элемент при событии touchend/inertial end animate */
-    needCorrectionOnScrollEnd: boolean;
-    /** флаг режима снаппинга */
-    snapToNearestItem: boolean;
-    /** текущий dot */
-    activeDot: number;
-    /** экшн для обновления dot */
-    setActiveDot: Dispatch<SetStateAction<number>>;
-    setCountItems: Dispatch<SetStateAction<number>>;
-    /** элемент, на котором был пользователь до скролла */
-    previousActiveIndexItem: number;
-    /** направление скролла */
-    directionRight: boolean;
-    /** Колбэк при прокрутке контейнера */
-    onScroll?: () => void;
-    wasInteracted: boolean;
-    isMobile: boolean;
+export interface ControlWithClick {
+    onClick?: MouseEventHandler;
+    'data-qa'?: string;
+}
+export interface RegisterAndRemoveItem {
+    /** колбэк для регистрации элемента галерии */
+    registerItem: (ref: RefObject<HTMLElement>) => void;
+    /** колбэк для удаления элемента галерии */
+    removeItem: (ref: RefObject<HTMLElement>) => void;
+}
+export interface ScrollDisableState {
+    /** заблокирован ли скролл влево */
+    isScrollRightDisabled: boolean;
+    /** заблокирован ли скролл вправо */
+    isScrollLeftDisabled: boolean;
 }
 export interface ScrollableControls {
-    /** двигаем ScrollableContainer налево*/
+    /** двигаем ScrollableContainer налево */
     scrollLeft: () => void;
-    /** двигаем ScrollableContainer направо*/
+    /** двигаем ScrollableContainer направо */
     scrollRight: () => void;
-    /** двигаем ScrollableContainer к первому элементу*/
+    /** двигаем ScrollableContainer к первому элементу */
     scrollToFirstItem: () => void;
-    /** двигаем ScrollableContainer к последнему элементу*/
+    /** двигаем ScrollableContainer к последнему элементу */
     scrollToLastItem: () => void;
-    /** функция, возвращающая true если ScrollableContainer до конца прокручен вправо */
-    isScrollRightDisabled: () => boolean;
-    /** функция, возвращающая true если ScrollableContainer до конца прокручен влево */
-    isScrollLeftDisabled: () => boolean;
     /** скролл к элементу по индексу, элементы сортируются по расположению справа на лево */
     scrollToIndex: (index: number) => void;
     /**
@@ -140,18 +90,46 @@ export interface SpacingCorrectionProps {
     /** Величина коррекции отступа справа для разрешения XXL и больше, положительное число или 0 */
     correctionRightXXL?: number;
 }
-export interface ScrollableContainerBaseProps {
-    /** Нужно ли показывать кнопки навигации (предпологает использование `correction`)*/
-    disableButtons?: boolean;
-    /** флаг режима снаппинга */
-    snapToNearestItem?: boolean;
-    /** Нужно ли показывать dot-pages*/
-    showDotPages?: boolean;
+export type ScrollSnapAlign = 'start' | 'end' | 'center' | 'none';
+export type ScrollableContainerProps = SpacingCorrectionProps & {
+    /** Контент ScrollableContainer */
+    children: ReactNode;
+    /**
+     * Определяет, как ближайший элемент будет размещён во вьюпорте при автоматическом скролле
+     *
+     * - `center` - ближайший элемент центрируется во вьюпорте
+     * - `start` - ближайший элемент выравнивается по левой границе вьюпорта
+     * - `end` - ближайший элемент выравнивается по правой границе вьюпорта
+     */
+    scrollSnapAlign?: ScrollSnapAlign;
+} & HTMLAttributes<HTMLDivElement>;
+export interface ScrollableItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Элемент галереи */
+    children: ReactNode;
+}
+export interface ScrollableContainerGalleryProps {
+    /** Колбэк при прокрутке контейнера */
+    onScroll?: (scrollInfo: ScrollDisableState) => void;
+    /** Колбэк при инициализации контейнера */
+    onReady?: (scrollInfo: ScrollDisableState) => void;
+    /** Колбэк при изменении размеров контейнера */
+    onChangeSize?: (scrollInfo: ScrollDisableState) => void;
+    /** Элементы галереи, которые отображаются внутри контейнера и прокручиваются по горизонтали */
+    children: ReactNode;
+}
+export interface ScrollableContainerDotPagesProps {
     /** Колбэк при изменении active dot в компоненте dot-pages*/
     onChangeDot?: (dot: number) => void;
     /** Свойства dot-pages*/
-    dotPagesProps?: Omit<DotPagesProps, 'active' | 'count' | 'data-qa'>;
-    /** Колбэк при прокрутке контейнера */
-    onScroll?: () => void;
+    dotPagesProps?: Omit<DotPagesProps, 'active' | 'count'>;
+    /** Верхний отступ для DotPages */
+    offsetTop?: TokenBaseStaticSpace;
+}
+export interface ScrollableContainerButtonProps {
+    /** Кнопка для скрола налево/направо */
+    children: ReactNode;
+}
+export interface ScrollableContainerDefaultLayoutProps {
+    /** Контент ScrollableContainerGallery */
+    children: ReactNode;
 }
-export type ScrollableContainerProps = Omit<HTMLAttributes<HTMLDivElement>, keyof SpacingCorrectionProps | 'disableButtons' | 'onScroll'> & ScrollableContainerBaseProps & SpacingCorrectionProps;