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

package/ScrollableContainerGallery.js.map

@@ -1 +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    ...props\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    scrollState.springScrollPosition = springScrollPosition;\n\n    return (\n        <GalleryContext.Provider\n            value={{\n                registerItem,\n                removeItem,\n            }}\n        >\n            <div\n                ref={containerRef}\n                role=\"list\"\n                className={styles.scrollableContainer}\n                data-qa=\"scrollable-container__overflow-container\"\n                {...props}\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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"}
+{"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    ...props\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    scrollState.springScrollPosition = springScrollPosition;\n\n    return (\n        <GalleryContext.Provider\n            value={{\n                registerItem,\n                removeItem,\n            }}\n        >\n            <div\n                ref={containerRef}\n                role=\"list\"\n                className={styles.scrollableContainer}\n                data-qa=\"scrollable-container__overflow-container\"\n                {...props}\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":[],"mappings":"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"}

package/ScrollableItem.d.ts

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

package/ScrollableItem.js

@@ -13,20 +13,30 @@ import '@hh.ru/magritte-internal-custom-scroll';
 import './types.js';
 import './utils.js';
 import '@hh.ru/magritte-ui-breakpoint';
-import './scrollableContainer-C0a8z9uL.js';
+import './scrollableContainer-CWsF-84M.js';
 
 const ScrollableItem = ({ children, scrollToItemOnFocus, ...props }) => {
-    const ref = useRef(null);
-    const { registerItem, removeItem } = useGalleryContext();
-    const { scrollToItem } = useScrollableControls();
-    useLayoutEffect(() => {
-        registerItem(ref);
-        return () => {
-            removeItem(ref);
-        };
-    }, [registerItem, removeItem]);
-    const handleSelectItem = useCallback(() => scrollToItem(ref), [scrollToItem]);
-    return (jsx("div", { ref: ref, role: "listitem", ...props, onClick: handleSelectItem, onFocus: scrollToItemOnFocus ? handleSelectItem : undefined, children: children }));
+  const ref = useRef(null);
+  const { registerItem, removeItem } = useGalleryContext();
+  const { scrollToItem } = useScrollableControls();
+  useLayoutEffect(() => {
+    registerItem(ref);
+    return () => {
+      removeItem(ref);
+    };
+  }, [registerItem, removeItem]);
+  const handleSelectItem = useCallback(() => scrollToItem(ref), [scrollToItem]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "listitem",
+      ...props,
+      onClick: handleSelectItem,
+      onFocus: scrollToItemOnFocus ? handleSelectItem : void 0,
+      children
+    }
+  );
 };
 
 export { ScrollableItem };

package/ScrollableItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableItem.js","sources":["src/ScrollableItem.tsx"],"sourcesContent":["import { useRef, useLayoutEffect, useCallback, 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, scrollToItemOnFocus, ...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    const handleSelectItem = useCallback(() => scrollToItem(ref), [scrollToItem]);\n\n    return (\n        <div\n            ref={ref}\n            role=\"listitem\"\n            {...props}\n            onClick={handleSelectItem}\n            onFocus={scrollToItemOnFocus ? handleSelectItem : undefined}\n        >\n            {children}\n        </div>\n    );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;AAMO,MAAM,cAAc,GAA4B,CAAC,EAAE,QAAQ,EAAE,mBAAmB,EAAE,GAAG,KAAK,EAAE,KAAI;AACnG,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;AAE/B,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAAC,MAAM,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;AAE9E,IAAA,QACIA,GAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EAAA,GACX,KAAK,EACT,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,mBAAmB,GAAG,gBAAgB,GAAG,SAAS,EAAA,QAAA,EAE1D,QAAQ,EAAA,CACP,EACR;AACN;;;;"}
+{"version":3,"file":"ScrollableItem.js","sources":["src/ScrollableItem.tsx"],"sourcesContent":["import { useRef, useLayoutEffect, useCallback, 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, scrollToItemOnFocus, ...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    const handleSelectItem = useCallback(() => scrollToItem(ref), [scrollToItem]);\n\n    return (\n        <div\n            ref={ref}\n            role=\"listitem\"\n            {...props}\n            onClick={handleSelectItem}\n            onFocus={scrollToItemOnFocus ? handleSelectItem : undefined}\n        >\n            {children}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAMO,MAAM,iBAA0C,CAAC,EAAE,UAAU,mBAAqB,EAAA,GAAG,OAAY,KAAA;AACpG,EAAM,MAAA,GAAA,GAAM,OAAuB,IAAI,CAAA,CAAA;AACvC,EAAA,MAAM,EAAE,YAAA,EAAc,UAAW,EAAA,GAAI,iBAAkB,EAAA,CAAA;AACvD,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,qBAAsB,EAAA,CAAA;AAE/C,EAAA,eAAA,CAAgB,MAAM;AAClB,IAAA,YAAA,CAAa,GAAG,CAAA,CAAA;AAChB,IAAA,OAAO,MAAM;AACT,MAAA,UAAA,CAAW,GAAG,CAAA,CAAA;AAAA,KAClB,CAAA;AAAA,GACD,EAAA,CAAC,YAAc,EAAA,UAAU,CAAC,CAAA,CAAA;AAE7B,EAAM,MAAA,gBAAA,GAAmB,YAAY,MAAM,YAAA,CAAa,GAAG,CAAG,EAAA,CAAC,YAAY,CAAC,CAAA,CAAA;AAE5E,EACI,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,GAAA;AAAA,MACA,IAAK,EAAA,UAAA;AAAA,MACJ,GAAG,KAAA;AAAA,MACJ,OAAS,EAAA,gBAAA;AAAA,MACT,OAAA,EAAS,sBAAsB,gBAAmB,GAAA,KAAA,CAAA;AAAA,MAEjD,QAAA;AAAA,KAAA;AAAA,GACL,CAAA;AAER;;;;"}

package/index.css

@@ -1,20 +1,20 @@
 :root{
-  --magritte-gradient-component-chat-input-background-fade-v26-0-0:#ffffff00 0%, #ffffff 100%;
+  --magritte-gradient-component-chat-input-background-fade-v26-0-1:#ffffff00 0%, #ffffff 100%;
 }
 
 :root{
-  --magritte-semantic-animation-time-s-duration-v26-0-0:200ms;
+  --magritte-semantic-animation-time-s-duration-v26-0-1:200ms;
 }
 
 .magritte-night-theme{
-  --magritte-gradient-component-chat-input-background-fade-v26-0-0:#1b1b1b00 0%, #1b1b1b 100%;
+  --magritte-gradient-component-chat-input-background-fade-v26-0-1:#1b1b1b00 0%, #1b1b1b 100%;
 }
-.magritte-scroll-wrapper___vTdZl_6-5-2{
+.magritte-scroll-wrapper___vTdZl_6-5-3{
   position:relative;
   touch-action:pan-y pinch-zoom;
   contain:layout;
 }
-.magritte-scrollable-container___AKIUp_6-5-2{
+.magritte-scrollable-container___AKIUp_6-5-3{
   display:block;
   isolation:isolate;
   overflow-x:hidden;
@@ -31,56 +31,56 @@
   margin-left:var(--magritte-ui-scrollabe-container-ml, -4px);
   margin-right:var(--magritte-ui-scrollabe-container-mr, -4px);
 }
-.magritte-scroll-buttons-container___ZeI5a_6-5-2{
+.magritte-scroll-buttons-container___ZeI5a_6-5-3{
   position:relative;
 }
-.magritte-scroll-buttons-container-on-hover___PFUvV_6-5-2 .magritte-scroll-button___4GQu3_6-5-2{
+.magritte-scroll-buttons-container-on-hover___PFUvV_6-5-3 .magritte-scroll-button___4GQu3_6-5-3{
   opacity:0;
   pointer-events:none;
-  transition:opacity var(--magritte-semantic-animation-time-s-duration-v26-0-0) ease-in-out;
+  transition:opacity var(--magritte-semantic-animation-time-s-duration-v26-0-1) ease-in-out;
 }
-.magritte-scroll-buttons-container-on-hover___PFUvV_6-5-2 .magritte-scroll-button___4GQu3_6-5-2:focus-within{
+.magritte-scroll-buttons-container-on-hover___PFUvV_6-5-3 .magritte-scroll-button___4GQu3_6-5-3:focus-within{
   opacity:1;
   pointer-events:auto;
 }
 @media (hover: hover){
-  .magritte-scroll-buttons-container-on-hover___PFUvV_6-5-2:hover .magritte-scroll-button___4GQu3_6-5-2{
+  .magritte-scroll-buttons-container-on-hover___PFUvV_6-5-3:hover .magritte-scroll-button___4GQu3_6-5-3{
     opacity:1;
     pointer-events:auto;
   }
 }
-.magritte-scroll-buttons___0SjoR_6-5-2{
-  --fade-left:linear-gradient(90deg, var(--magritte-gradient-component-chat-input-background-fade-v26-0-0));
-  --fade-right:linear-gradient(270deg, var(--magritte-gradient-component-chat-input-background-fade-v26-0-0));
+.magritte-scroll-buttons___0SjoR_6-5-3{
+  --fade-left:linear-gradient(90deg, var(--magritte-gradient-component-chat-input-background-fade-v26-0-1));
+  --fade-right:linear-gradient(270deg, var(--magritte-gradient-component-chat-input-background-fade-v26-0-1));
   --left-fade-mask:var(--fade-left) 30px 0 / 128px 100% no-repeat, linear-gradient(#000, #000) right / calc(100% - 158px) 100% no-repeat;
   --right-fade-mask:var(--fade-right) calc(100% - 30px) 0 / 128px 100% no-repeat, linear-gradient(#000, #000) left / calc(100% - 158px) 100% no-repeat;
   --both-sides-mask:var(--fade-left) 30px 0 / 128px 100% no-repeat, var(--fade-right) calc(100% - 30px) 0 / 128px 100% no-repeat, linear-gradient(#000, #000) center / calc(100% - 158px - 158px) 100% no-repeat;
   -webkit-mask:none;
   mask:none;
 }
-.magritte-scroll-buttons-small___xG3MS_6-5-2{
+.magritte-scroll-buttons-small___xG3MS_6-5-3{
   --left-fade-mask:var(--fade-left) 0px 0 / 44px 100% no-repeat, linear-gradient(#000, #000) right / calc(100% - 44px) 100% no-repeat;
   --right-fade-mask:var(--fade-right) calc(100% - 0px) 0 / 44px 100% no-repeat, linear-gradient(#000, #000) left / calc(100% - 44px) 100% no-repeat;
   --both-sides-mask:var(--fade-left) 0px 0 / 44px 100% no-repeat, var(--fade-right) calc(100% - 0px) 0 / 44px 100% no-repeat, linear-gradient(#000, #000) center / calc(100% - 44px - 44px) 100% no-repeat;
 }
-.magritte-scroll-button___4GQu3_6-5-2{
+.magritte-scroll-button___4GQu3_6-5-3{
   display:none;
   position:absolute;
   top:50%;
   transform:translateY(-50%);
 }
-.magritte-scroll-button-left___UueEY_6-5-2{
+.magritte-scroll-button-left___UueEY_6-5-3{
   z-index:1;
   left:var(--magritte-ui-scrollable-container-buttons-offset, 0);
 }
-.magritte-scroll-button-right___wZOn-_6-5-2{
+.magritte-scroll-button-right___wZOn-_6-5-3{
   right:var(--magritte-ui-scrollable-container-buttons-offset, 0);
 }
-.magritte-position-container___1A4Bv_6-5-2{
+.magritte-position-container___1A4Bv_6-5-3{
   box-sizing:border-box;
   width:100%;
 }
-.magritte-dot-container___ahtlG_6-5-2{
+.magritte-dot-container___ahtlG_6-5-3{
   display:flex;
   justify-content:center;
 }

package/index.d.ts

@@ -1,6 +1,6 @@
-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 { getItemOffset } from '@hh.ru/magritte-ui-scrollable-container/utils';
-export type { ItemOffset, RegisterAndRemoveItem, ScrollableContainerProps, SpacingCorrectionProps, ScrollableControls, ScrollableItemProps, ScrollableContainerGalleryProps, ScrollableContainerDotPagesProps, ScrollDisableState, ScrollableContainerButtonProps, ScrollableContainerDefaultLayoutProps, ScrollableContainerDefaultLayoutSize, ScrollSnapAlign, } from '@hh.ru/magritte-ui-scrollable-container/types';
+export { ScrollableContainer } from './ScrollableContainer';
+export { useScrollableControls } from './useScrollableControls';
+export { useGalleryContext } from './ScrollableContainerGallery';
+export { useScrollState } from './ScrollStateProvider';
+export { getItemOffset } from './utils';
+export type { ItemOffset, RegisterAndRemoveItem, ScrollableContainerProps, SpacingCorrectionProps, ScrollableControls, ScrollableItemProps, ScrollableContainerGalleryProps, ScrollableContainerDotPagesProps, ScrollDisableState, ScrollableContainerButtonProps, ScrollableContainerDefaultLayoutProps, ScrollableContainerDefaultLayoutSize, ScrollSnapAlign, } from './types';

package/index.js

@@ -13,7 +13,7 @@ import './ScrollableContainerDefaultLayout.js';
 import 'motion/react';
 import '@hh.ru/magritte-common-use-translation';
 import '@hh.ru/magritte-ui-icon/icon';
-import './scrollableContainer-C0a8z9uL.js';
+import './scrollableContainer-CWsF-84M.js';
 import './ScrollableContainerDotPages.js';
 import '@hh.ru/magritte-internal-custom-scroll/initScrollHandlers';
 import '@hh.ru/magritte-ui-dot-pages';

package/index.mock.d.ts

@@ -1,5 +1,5 @@
-export type { RegisterAndRemoveItem, ScrollableContainerProps, SpacingCorrectionProps, ScrollableControls, ScrollableItemProps, ScrollableContainerGalleryProps, ScrollableContainerDotPagesProps, ScrollDisableState, ScrollableContainerButtonProps, ScrollableContainerDefaultLayoutProps, ScrollableContainerDefaultLayoutSize, ScrollSnapAlign, } from '@hh.ru/magritte-ui-scrollable-container/types';
+export type { RegisterAndRemoveItem, ScrollableContainerProps, SpacingCorrectionProps, ScrollableControls, ScrollableItemProps, ScrollableContainerGalleryProps, ScrollableContainerDotPagesProps, ScrollDisableState, ScrollableContainerButtonProps, ScrollableContainerDefaultLayoutProps, ScrollableContainerDefaultLayoutSize, ScrollSnapAlign, } from './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';
+export { useScrollableControls } from './useScrollableControls';
+export { useGalleryContext } from './ScrollableContainerGallery';
+export { useScrollState } from './ScrollStateProvider';

package/index.mock.js

@@ -13,31 +13,31 @@ import 'react/jsx-runtime';
 import '@hh.ru/magritte-internal-custom-scroll/initScrollHandlers';
 import './useScrollContainer.js';
 import '@hh.ru/magritte-common-func-utils';
-import './scrollableContainer-C0a8z9uL.js';
+import './scrollableContainer-CWsF-84M.js';
 import './ObservableValue.js';
 
 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,
-    }),
+  Left: mockComponent("Left", void 0, {
+    withChildren: true
+  }),
+  Right: mockComponent("Right", void 0, {
+    withChildren: true
+  }),
+  Item: mockComponent("Item", void 0, {
+    withChildren: true
+  }),
+  Gallery: mockComponent("Gallery", void 0, {
+    withChildren: true
+  }),
+  DefaultLayout: mockComponent("DefaultLayout", void 0, {
+    withChildren: true
+  }),
+  DotPages: mockComponent("DotPages", void 0, {
+    withChildren: true
+  })
 };
-const ScrollableContainer = mockComponent('ScrollableContainer', staticProps, {
-    withChildren: true,
+const ScrollableContainer = mockComponent("ScrollableContainer", staticProps, {
+  withChildren: true
 });
 
 export { ScrollableContainer };

package/index.mock.js.map

@@ -1 +1 @@
-{"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    ScrollableContainerDefaultLayoutSize,\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":";;;;;;;;;;;;;;;;;AAiBA,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;;;;"}
+{"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    ScrollableContainerDefaultLayoutSize,\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":";;;;;;;;;;;;;;;;;AAiBA,MAAM,WAAc,GAAA;AAAA,EAChB,IAAA,EAAM,aAAc,CAAA,MAAA,EAAQ,KAAW,CAAA,EAAA;AAAA,IACnC,YAAc,EAAA,IAAA;AAAA,GACjB,CAAA;AAAA,EACD,KAAA,EAAO,aAAc,CAAA,OAAA,EAAS,KAAW,CAAA,EAAA;AAAA,IACrC,YAAc,EAAA,IAAA;AAAA,GACjB,CAAA;AAAA,EACD,IAAA,EAAM,aAAc,CAAA,MAAA,EAAQ,KAAW,CAAA,EAAA;AAAA,IACnC,YAAc,EAAA,IAAA;AAAA,GACjB,CAAA;AAAA,EACD,OAAA,EAAS,aAAc,CAAA,SAAA,EAAW,KAAW,CAAA,EAAA;AAAA,IACzC,YAAc,EAAA,IAAA;AAAA,GACjB,CAAA;AAAA,EACD,aAAA,EAAe,aAAc,CAAA,eAAA,EAAiB,KAAW,CAAA,EAAA;AAAA,IACrD,YAAc,EAAA,IAAA;AAAA,GACjB,CAAA;AAAA,EACD,QAAA,EAAU,aAAc,CAAA,UAAA,EAAY,KAAW,CAAA,EAAA;AAAA,IAC3C,YAAc,EAAA,IAAA;AAAA,GACjB,CAAA;AACL,CAAA,CAAA;AAEa,MAAA,mBAAA,GAAsB,aAAc,CAAA,qBAAA,EAAuB,WAAa,EAAA;AAAA,EACjF,YAAc,EAAA,IAAA;AAClB,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-scrollable-container",
-  "version": "6.5.2",
+  "version": "6.5.3",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -21,13 +21,13 @@
   "dependencies": {
     "@hh.ru/magritte-common-func-utils": "1.3.16",
     "@hh.ru/magritte-common-use-translation": "3.6.1",
-    "@hh.ru/magritte-design-tokens": "26.0.0",
+    "@hh.ru/magritte-design-tokens": "26.0.1",
     "@hh.ru/magritte-internal-custom-scroll": "2.1.2",
     "@hh.ru/magritte-ui-breakpoint": "6.1.2",
-    "@hh.ru/magritte-ui-dot-pages": "4.0.36",
-    "@hh.ru/magritte-ui-icon": "15.1.4",
+    "@hh.ru/magritte-ui-dot-pages": "4.0.37",
+    "@hh.ru/magritte-ui-icon": "15.1.5",
     "@hh.ru/magritte-ui-mock-component": "1.1.8",
-    "@hh.ru/magritte-ui-spacing": "2.1.30"
+    "@hh.ru/magritte-ui-spacing": "2.1.31"
   },
   "peerDependencies": {
     "classnames": ">=2.3.2",
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b0ff5da48fb29d516c8289082560ee1882d16986"
+  "gitHead": "f6539d7a0e7cd42dd851458db1de04a748bbee03"
 }

package/scrollableContainer-CWsF-84M.js

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

package/scrollableContainer-CWsF-84M.js.map

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

package/types.js

@@ -1,5 +1,5 @@
 import './index.css';
-const OFFSET_ATTR = Symbol('scroll-item-offset');
+const OFFSET_ATTR = Symbol("scroll-item-offset");
 
 export { OFFSET_ATTR };
 //# sourceMappingURL=types.js.map

package/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["src/types.ts"],"sourcesContent":["import type { HTMLAttributes, RefObject, MouseEventHandler, ReactNode } from 'react';\n\nimport { TokenBaseStaticSpace } from '@hh.ru/magritte-design-tokens/types';\nimport type { DotPagesProps } from '@hh.ru/magritte-ui-dot-pages';\n\nexport const OFFSET_ATTR = Symbol('scroll-item-offset');\nexport interface ItemOffset {\n    left: number;\n    right: number;\n}\nexport interface ItemWithOffset {\n    [OFFSET_ATTR]: ItemOffset;\n}\n\nexport interface ControlWithClick {\n    onClick?: MouseEventHandler;\n    'data-qa'?: string;\n}\n\nexport interface RegisterAndRemoveItem {\n    /** колбэк для регистрации элемента галерии */\n    registerItem: (ref: RefObject<HTMLElement>) => void;\n    /** колбэк для удаления элемента галерии */\n    removeItem: (ref: RefObject<HTMLElement>) => void;\n}\n\nexport interface ScrollDisableState {\n    /** заблокирован ли скролл влево */\n    isScrollRightDisabled: boolean;\n    /** заблокирован ли скролл вправо */\n    isScrollLeftDisabled: boolean;\n}\n\nexport interface ScrollableControls {\n    /** двигаем ScrollableContainer налево */\n    scrollLeft: () => void;\n    /** двигаем ScrollableContainer направо */\n    scrollRight: () => void;\n    /** двигаем ScrollableContainer к первому элементу */\n    scrollToFirstItem: () => void;\n    /** двигаем ScrollableContainer к последнему элементу */\n    scrollToLastItem: () => void;\n    /** скролл к элементу по индексу, элементы сортируются по расположению справа налево */\n    scrollToIndex: (index: number) => void;\n    /**\n     * скролл к элементу по ref, должен передаваться ref на элемент который был\n     * зарегистрирован с помощью registerItem API\n     **/\n    scrollToItem: (ref: RefObject<HTMLElement>) => void;\n    /** моментальный скролл к элементу по индексу */\n    jumpToIndex: (index: number) => void;\n    /**\n     * моментальный сдвиг позиции на дельту\n     * не выравнивает элемент по scrollSnapAlign (безопасен посреди жеста)\n     **/\n    jumpBy: (delta: number) => void;\n}\n\n/**\n * Пропы для настройки коррекции отступов в режиме без кнопок, когда надо чтобы край скролла соответствовал\n * краю родительского контейнера, у которого могут быть отступы. Задаются в виде положительного числа.\n * более специфичные пропсы переопределяют менее специфичные. При выборе значения коррекции для разрешения выбирается\n * ближайшее заданное значение для разрешений меньшего или равного размера. Т.е. если задано correction и correctionM,\n * то для разрешений S и XS будет использовано correction, а для остальных correctionM. Если задано\n * еще и correctionLeftM, то для разрешений начиная с M и больше для левого края будет использовано\n * correctionLeftM, а для правого correctionM.\n */\nexport interface SpacingCorrectionProps {\n    /** Величина коррекции отступа, положительное число или 0 */\n    correction?: number;\n    /** Величина коррекции отступа для разрешения XS и больше, положительное число или 0 */\n    correctionXS?: number;\n    /** Величина коррекции отступа для разрешения S и больше, положительное число или 0 */\n    correctionS?: number;\n    /** Величина коррекции отступа для разрешения M и больше, положительное число или 0 */\n    correctionM?: number;\n    /** Величина коррекции отступа для разрешения L и больше, положительное число или 0 */\n    correctionL?: number;\n    /** Величина коррекции отступа для разрешения XL и больше, положительное число или 0 */\n    correctionXL?: number;\n    /** Величина коррекции отступа для разрешения XXL и больше, положительное число или 0 */\n    correctionXXL?: number;\n    /** Величина коррекции отступа слева для разрешения XS и больше, положительное число или 0 */\n    correctionLeftXS?: number;\n    /** Величина коррекции левого отступа для разрешения S и больше, положительное число или 0 */\n    correctionLeftS?: number;\n    /** Величина коррекции левого отступа для разрешения M и больше, положительное число или 0 */\n    correctionLeftM?: number;\n    /** Величина коррекции левого отступа для разрешения L и больше, положительное число или 0 */\n    correctionLeftL?: number;\n    /** Величина коррекции левого отступа для разрешения XL и больше, положительное число или 0 */\n    correctionLeftXL?: number;\n    /** Величина коррекции левого отступа для разрешения XXL и больше, положительное число или 0 */\n    correctionLeftXXL?: number;\n    /** Величина коррекции отступа справа для разрешения XS и больше, положительное число или 0 */\n    correctionRightXS?: number;\n    /** Величина коррекции отступа справа для разрешения S и больше, положительное число или 0 */\n    correctionRightS?: number;\n    /** Величина коррекции отступа справа для разрешения M и больше, положительное число или 0 */\n    correctionRightM?: number;\n    /** Величина коррекции отступа справа для разрешения L и больше, положительное число или 0 */\n    correctionRightL?: number;\n    /** Величина коррекции отступа справа для разрешения XL и больше, положительное число или 0 */\n    correctionRightXL?: number;\n    /** Величина коррекции отступа справа для разрешения XXL и больше, положительное число или 0 */\n    correctionRightXXL?: number;\n}\n\nexport type ScrollSnapAlign = 'start' | 'end' | 'center' | 'none';\n\nexport type ScrollableContainerProps = SpacingCorrectionProps & {\n    /** Контент ScrollableContainer */\n    children: ReactNode;\n    /**\n     * Определяет, как ближайший элемент будет размещён во вьюпорте при автоматическом скролле\n     *\n     * - `center` - ближайший элемент центрируется во вьюпорте\n     * - `start` - ближайший элемент выравнивается по левой границе вьюпорта\n     * - `end` - ближайший элемент выравнивается по правой границе вьюпорта\n     */\n    scrollSnapAlign?: ScrollSnapAlign;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport interface ScrollableItemProps extends HTMLAttributes<HTMLDivElement> {\n    /** Элемент галереи */\n    children: ReactNode;\n    /** Нужно ли скролить к элементу при фокусе */\n    scrollToItemOnFocus?: boolean;\n}\n\nexport interface ScrollableContainerGalleryProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onScroll'> {\n    /** Колбэк при прокрутке контейнера */\n    onScroll?: (scrollInfo: ScrollDisableState) => void;\n    /** Колбэк при инициализации контейнера */\n    onReady?: (scrollInfo: ScrollDisableState) => void;\n    /** Колбэк при изменении размеров контейнера */\n    onChangeSize?: (scrollInfo: ScrollDisableState) => void;\n    /** Элементы галереи, которые отображаются внутри контейнера и прокручиваются по горизонтали */\n    children: ReactNode;\n}\n\nexport interface ScrollableContainerDotPagesProps {\n    /** Колбэк при изменении active dot в компоненте dot-pages*/\n    onChangeDot?: (dot: number) => void;\n    /** Свойства dot-pages*/\n    dotPagesProps?: Omit<DotPagesProps, 'active' | 'count'>;\n    /** Верхний отступ для DotPages */\n    offsetTop?: TokenBaseStaticSpace;\n}\n\nexport interface ScrollableContainerButtonProps {\n    /** Кнопка для скрола налево/направо */\n    children: ReactNode;\n}\n\nexport type ScrollableContainerDefaultLayoutSize = 'medium' | 'small';\n\nexport interface ScrollableContainerDefaultLayoutProps {\n    /** Контент ScrollableContainerGallery */\n    children: ReactNode;\n    /**\n     * Размер кнопок листания\n     *\n     * - `medium` - иконка 24px с паддингом 8px (кнопка 40px)\n     * - `small` - иконка 24px с паддингом 4px (кнопка 32px)\n     * @default medium\n     */\n    size?: ScrollableContainerDefaultLayoutSize;\n    /**\n     * Показывать краевые фейды на мобильных брейкпоинтах (XS/S), где кнопки листания\n     * скрыты. По умолчанию фейды видны только вместе с кнопками — с брейкпоинта M.\n     * @default false\n     */\n    fadeOnMobile?: boolean;\n    /**\n     * Отключает краевые фейды на десктопных брейкпоинтах (с M), где показываются кнопки листания;\n     * сами кнопки при этом остаются. Вместе с `fadeOnMobile` позволяет задать фейды для мобильных\n     * и десктопных брейкпоинтов независимо.\n     * @default false\n     */\n    noFadeOnDesktop?: boolean;\n    /**\n     * Отступ кнопок листания от краёв контейнера в пикселях. Учитывается при прокрутке к элементам,\n     * чтобы они не оказывались под кнопками\n     * @default 0\n     */\n    buttonsOffset?: number;\n    /**\n     * Показывать кнопки листания только при наведении курсора на контейнер (и при фокусе кнопки\n     * с клавиатуры). На устройствах без ховера кнопки не показываются\n     * @default false\n     */\n    buttonsOnHover?: boolean;\n    /** aria-label кнопки налево */\n    leftButtonAriaLabel?: string;\n    /** aria-label кнопки направо */\n    rightButtonAriaLabel?: string;\n    /** aria-controls кнопки налево */\n    leftAriaControls?: string;\n    /** aria-controls кнопки направо */\n    rightAriaControls?: string;\n}\n"],"names":[],"mappings":"MAKa,WAAW,GAAG,MAAM,CAAC,oBAAoB;;;;"}
+{"version":3,"file":"types.js","sources":["src/types.ts"],"sourcesContent":["import type { HTMLAttributes, RefObject, MouseEventHandler, ReactNode } from 'react';\n\nimport { TokenBaseStaticSpace } from '@hh.ru/magritte-design-tokens/types';\nimport type { DotPagesProps } from '@hh.ru/magritte-ui-dot-pages';\n\nexport const OFFSET_ATTR = Symbol('scroll-item-offset');\nexport interface ItemOffset {\n    left: number;\n    right: number;\n}\nexport interface ItemWithOffset {\n    [OFFSET_ATTR]: ItemOffset;\n}\n\nexport interface ControlWithClick {\n    onClick?: MouseEventHandler;\n    'data-qa'?: string;\n}\n\nexport interface RegisterAndRemoveItem {\n    /** колбэк для регистрации элемента галерии */\n    registerItem: (ref: RefObject<HTMLElement>) => void;\n    /** колбэк для удаления элемента галерии */\n    removeItem: (ref: RefObject<HTMLElement>) => void;\n}\n\nexport interface ScrollDisableState {\n    /** заблокирован ли скролл влево */\n    isScrollRightDisabled: boolean;\n    /** заблокирован ли скролл вправо */\n    isScrollLeftDisabled: boolean;\n}\n\nexport interface ScrollableControls {\n    /** двигаем ScrollableContainer налево */\n    scrollLeft: () => void;\n    /** двигаем ScrollableContainer направо */\n    scrollRight: () => void;\n    /** двигаем ScrollableContainer к первому элементу */\n    scrollToFirstItem: () => void;\n    /** двигаем ScrollableContainer к последнему элементу */\n    scrollToLastItem: () => void;\n    /** скролл к элементу по индексу, элементы сортируются по расположению справа налево */\n    scrollToIndex: (index: number) => void;\n    /**\n     * скролл к элементу по ref, должен передаваться ref на элемент который был\n     * зарегистрирован с помощью registerItem API\n     **/\n    scrollToItem: (ref: RefObject<HTMLElement>) => void;\n    /** моментальный скролл к элементу по индексу */\n    jumpToIndex: (index: number) => void;\n    /**\n     * моментальный сдвиг позиции на дельту\n     * не выравнивает элемент по scrollSnapAlign (безопасен посреди жеста)\n     **/\n    jumpBy: (delta: number) => void;\n}\n\n/**\n * Пропы для настройки коррекции отступов в режиме без кнопок, когда надо чтобы край скролла соответствовал\n * краю родительского контейнера, у которого могут быть отступы. Задаются в виде положительного числа.\n * более специфичные пропсы переопределяют менее специфичные. При выборе значения коррекции для разрешения выбирается\n * ближайшее заданное значение для разрешений меньшего или равного размера. Т.е. если задано correction и correctionM,\n * то для разрешений S и XS будет использовано correction, а для остальных correctionM. Если задано\n * еще и correctionLeftM, то для разрешений начиная с M и больше для левого края будет использовано\n * correctionLeftM, а для правого correctionM.\n */\nexport interface SpacingCorrectionProps {\n    /** Величина коррекции отступа, положительное число или 0 */\n    correction?: number;\n    /** Величина коррекции отступа для разрешения XS и больше, положительное число или 0 */\n    correctionXS?: number;\n    /** Величина коррекции отступа для разрешения S и больше, положительное число или 0 */\n    correctionS?: number;\n    /** Величина коррекции отступа для разрешения M и больше, положительное число или 0 */\n    correctionM?: number;\n    /** Величина коррекции отступа для разрешения L и больше, положительное число или 0 */\n    correctionL?: number;\n    /** Величина коррекции отступа для разрешения XL и больше, положительное число или 0 */\n    correctionXL?: number;\n    /** Величина коррекции отступа для разрешения XXL и больше, положительное число или 0 */\n    correctionXXL?: number;\n    /** Величина коррекции отступа слева для разрешения XS и больше, положительное число или 0 */\n    correctionLeftXS?: number;\n    /** Величина коррекции левого отступа для разрешения S и больше, положительное число или 0 */\n    correctionLeftS?: number;\n    /** Величина коррекции левого отступа для разрешения M и больше, положительное число или 0 */\n    correctionLeftM?: number;\n    /** Величина коррекции левого отступа для разрешения L и больше, положительное число или 0 */\n    correctionLeftL?: number;\n    /** Величина коррекции левого отступа для разрешения XL и больше, положительное число или 0 */\n    correctionLeftXL?: number;\n    /** Величина коррекции левого отступа для разрешения XXL и больше, положительное число или 0 */\n    correctionLeftXXL?: number;\n    /** Величина коррекции отступа справа для разрешения XS и больше, положительное число или 0 */\n    correctionRightXS?: number;\n    /** Величина коррекции отступа справа для разрешения S и больше, положительное число или 0 */\n    correctionRightS?: number;\n    /** Величина коррекции отступа справа для разрешения M и больше, положительное число или 0 */\n    correctionRightM?: number;\n    /** Величина коррекции отступа справа для разрешения L и больше, положительное число или 0 */\n    correctionRightL?: number;\n    /** Величина коррекции отступа справа для разрешения XL и больше, положительное число или 0 */\n    correctionRightXL?: number;\n    /** Величина коррекции отступа справа для разрешения XXL и больше, положительное число или 0 */\n    correctionRightXXL?: number;\n}\n\nexport type ScrollSnapAlign = 'start' | 'end' | 'center' | 'none';\n\nexport type ScrollableContainerProps = SpacingCorrectionProps & {\n    /** Контент ScrollableContainer */\n    children: ReactNode;\n    /**\n     * Определяет, как ближайший элемент будет размещён во вьюпорте при автоматическом скролле\n     *\n     * - `center` - ближайший элемент центрируется во вьюпорте\n     * - `start` - ближайший элемент выравнивается по левой границе вьюпорта\n     * - `end` - ближайший элемент выравнивается по правой границе вьюпорта\n     */\n    scrollSnapAlign?: ScrollSnapAlign;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport interface ScrollableItemProps extends HTMLAttributes<HTMLDivElement> {\n    /** Элемент галереи */\n    children: ReactNode;\n    /** Нужно ли скролить к элементу при фокусе */\n    scrollToItemOnFocus?: boolean;\n}\n\nexport interface ScrollableContainerGalleryProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onScroll'> {\n    /** Колбэк при прокрутке контейнера */\n    onScroll?: (scrollInfo: ScrollDisableState) => void;\n    /** Колбэк при инициализации контейнера */\n    onReady?: (scrollInfo: ScrollDisableState) => void;\n    /** Колбэк при изменении размеров контейнера */\n    onChangeSize?: (scrollInfo: ScrollDisableState) => void;\n    /** Элементы галереи, которые отображаются внутри контейнера и прокручиваются по горизонтали */\n    children: ReactNode;\n}\n\nexport interface ScrollableContainerDotPagesProps {\n    /** Колбэк при изменении active dot в компоненте dot-pages*/\n    onChangeDot?: (dot: number) => void;\n    /** Свойства dot-pages*/\n    dotPagesProps?: Omit<DotPagesProps, 'active' | 'count'>;\n    /** Верхний отступ для DotPages */\n    offsetTop?: TokenBaseStaticSpace;\n}\n\nexport interface ScrollableContainerButtonProps {\n    /** Кнопка для скрола налево/направо */\n    children: ReactNode;\n}\n\nexport type ScrollableContainerDefaultLayoutSize = 'medium' | 'small';\n\nexport interface ScrollableContainerDefaultLayoutProps {\n    /** Контент ScrollableContainerGallery */\n    children: ReactNode;\n    /**\n     * Размер кнопок листания\n     *\n     * - `medium` - иконка 24px с паддингом 8px (кнопка 40px)\n     * - `small` - иконка 24px с паддингом 4px (кнопка 32px)\n     * @default medium\n     */\n    size?: ScrollableContainerDefaultLayoutSize;\n    /**\n     * Показывать краевые фейды на мобильных брейкпоинтах (XS/S), где кнопки листания\n     * скрыты. По умолчанию фейды видны только вместе с кнопками — с брейкпоинта M.\n     * @default false\n     */\n    fadeOnMobile?: boolean;\n    /**\n     * Отключает краевые фейды на десктопных брейкпоинтах (с M), где показываются кнопки листания;\n     * сами кнопки при этом остаются. Вместе с `fadeOnMobile` позволяет задать фейды для мобильных\n     * и десктопных брейкпоинтов независимо.\n     * @default false\n     */\n    noFadeOnDesktop?: boolean;\n    /**\n     * Отступ кнопок листания от краёв контейнера в пикселях. Учитывается при прокрутке к элементам,\n     * чтобы они не оказывались под кнопками\n     * @default 0\n     */\n    buttonsOffset?: number;\n    /**\n     * Показывать кнопки листания только при наведении курсора на контейнер (и при фокусе кнопки\n     * с клавиатуры). На устройствах без ховера кнопки не показываются\n     * @default false\n     */\n    buttonsOnHover?: boolean;\n    /** aria-label кнопки налево */\n    leftButtonAriaLabel?: string;\n    /** aria-label кнопки направо */\n    rightButtonAriaLabel?: string;\n    /** aria-controls кнопки налево */\n    leftAriaControls?: string;\n    /** aria-controls кнопки направо */\n    rightAriaControls?: string;\n}\n"],"names":[],"mappings":"AAKa,MAAA,WAAA,GAAc,OAAO,oBAAoB;;;;"}