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

package/ScrollableContainerDefaultLayout.js

@@ -9,81 +9,143 @@ import { ChevronLeftOutlinedSize24, ChevronRightOutlinedSize24 } from '@hh.ru/ma
 import { useScrollState } from './ScrollStateProvider.js';
 import { ScrollableContainerLeft, ScrollableContainerRight } from './ScrollableContainerButton.js';
 import { BREAKPOINTS_LIST, NO_BUTTONS_START_FROM_BREAKPOINT, useInitOnce } from './utils.js';
-import { s as styles } from './scrollableContainer-C0a8z9uL.js';
+import { s as styles } from './scrollableContainer-CWsF-84M.js';
 import './ObservableValue.js';
 import './useScrollableControls.js';
 import '@hh.ru/magritte-internal-custom-scroll';
 import './types.js';
 
 const SIZE_CONFIG = {
-    medium: { padding: 8, buttonWidth: 44, minHeight: 40 },
-    small: { padding: 4, buttonWidth: 36, minHeight: 32 },
+  medium: { padding: 8, buttonWidth: 44, minHeight: 40 },
+  small: { padding: 4, buttonWidth: 36, minHeight: 32 }
 };
-const ScrollableContainerDefaultLayout = ({ children, size = 'medium', fadeOnMobile = false, noFadeOnDesktop = false, buttonsOffset = 0, buttonsOnHover = false, leftButtonAriaLabel: _leftAriaLabel, rightButtonAriaLabel: _rightAriaLabel, leftAriaControls, rightAriaControls, }) => {
-    const { padding: buttonPadding, buttonWidth: buttonWidthCorrection, minHeight } = SIZE_CONFIG[size];
-    const scrollState = useScrollState();
-    const displayLeftButton = useMotionValue('none');
-    const displayRightButton = useMotionValue('none');
-    const mask = useMotionValue('none');
-    const breakpoint = useBreakpoint();
-    const breakpointIndex = BREAKPOINTS_LIST.indexOf(breakpoint.breakpoint);
-    const noButtonBreakpointIndex = BREAKPOINTS_LIST.indexOf(NO_BUTTONS_START_FROM_BREAKPOINT);
-    const enableDefaultButtonsByBreakpoint = breakpointIndex > noButtonBreakpointIndex;
-    const showFade = enableDefaultButtonsByBreakpoint ? !noFadeOnDesktop : fadeOnMobile;
-    const leftAriaLabelTrl = useTranslation('ScrollableContainer', 'left');
-    const leftButtonAriaLabel = _leftAriaLabel ?? leftAriaLabelTrl;
-    const rightAriaLabelTrl = useTranslation('ScrollableContainer', 'right');
-    const rightButtonAriaLabel = _rightAriaLabel ?? rightAriaLabelTrl;
-    const updateFadeAndButtons = useInitOnce(() => () => {
-        const position = scrollState.scrollPosition.get();
-        const contentWidth = scrollState.contentWidth.get();
-        const viewportWidth = scrollState.viewportWidth.get();
-        const showLeftButton = position < 0;
-        const showRightButton = Math.abs(position) < Math.max(0, contentWidth - viewportWidth);
-        displayLeftButton.set(showLeftButton ? 'block' : 'none');
-        displayRightButton.set(showRightButton ? 'block' : 'none');
-        if (showLeftButton && showRightButton) {
-            mask.set('var(--both-sides-mask)');
-        }
-        else if (showLeftButton) {
-            mask.set('var(--left-fade-mask)');
-        }
-        else if (showRightButton) {
-            mask.set('var(--right-fade-mask)');
-        }
-        else {
-            mask.set('none');
-        }
-    });
-    useEffect(() => {
-        updateFadeAndButtons();
-        const unsubscribe = [
-            scrollState.scrollPosition.on('change', updateFadeAndButtons),
-            scrollState.contentWidth.on('change', updateFadeAndButtons),
-            scrollState.viewportWidth.on('change', updateFadeAndButtons),
-        ];
-        return () => {
-            unsubscribe.forEach((fn) => fn());
-        };
-    }, [scrollState, updateFadeAndButtons]);
-    useEffect(() => {
-        // кнопка закрывает край контента на свою ширину плюс отступ от края
-        scrollState.defaultButtonsCorrection.set(enableDefaultButtonsByBreakpoint ? buttonWidthCorrection + buttonsOffset : 0);
-        return () => {
-            scrollState.defaultButtonsCorrection.set(0);
-        };
-    }, [scrollState, enableDefaultButtonsByBreakpoint, buttonWidthCorrection, buttonsOffset]);
-    return (jsxs("div", { className: classnames(styles.scrollButtonsContainer, {
-            [styles.scrollButtonsContainerOnHover]: buttonsOnHover,
-        }), style: {
-            '--magritte-ui-scrollable-container-min-height': `${minHeight}px`,
-            '--magritte-ui-scrollable-container-buttons-offset': `${buttonsOffset}px`,
-        }, children: [jsx(motion.div, { className: classnames(styles.scrollButton, styles.scrollButtonLeft), style: { display: enableDefaultButtonsByBreakpoint ? displayLeftButton : 'none' }, children: jsx(ScrollableContainerLeft, { children: jsx(ChevronLeftOutlinedSize24, { padding: buttonPadding, borderRadius: "halfHeight", initialColor: "secondary", backgroundStyle: "secondary", "aria-label": leftButtonAriaLabel, "aria-controls": leftAriaControls }) }) }), jsx(motion.div, { className: classnames(styles.scrollButtons, {
-                    [styles.scrollButtonsSmall]: size === 'small',
-                }), style: {
-                    WebkitMask: showFade ? mask : 'none',
-                    mask: showFade ? mask : 'none',
-                }, "data-qa": "scrollable-container__fade", children: children }), jsx(motion.div, { className: classnames(styles.scrollButton, styles.scrollButtonRight), style: { display: enableDefaultButtonsByBreakpoint ? displayRightButton : 'none' }, children: jsx(ScrollableContainerRight, { children: jsx(ChevronRightOutlinedSize24, { padding: buttonPadding, borderRadius: "halfHeight", initialColor: "secondary", backgroundStyle: "secondary", "aria-label": rightButtonAriaLabel, "aria-controls": rightAriaControls }) }) })] }));
+const ScrollableContainerDefaultLayout = ({
+  children,
+  size = "medium",
+  fadeOnMobile = false,
+  noFadeOnDesktop = false,
+  buttonsOffset = 0,
+  buttonsOnHover = false,
+  leftButtonAriaLabel: _leftAriaLabel,
+  rightButtonAriaLabel: _rightAriaLabel,
+  leftAriaControls,
+  rightAriaControls
+}) => {
+  const { padding: buttonPadding, buttonWidth: buttonWidthCorrection, minHeight } = SIZE_CONFIG[size];
+  const scrollState = useScrollState();
+  const displayLeftButton = useMotionValue("none");
+  const displayRightButton = useMotionValue("none");
+  const mask = useMotionValue("none");
+  const breakpoint = useBreakpoint();
+  const breakpointIndex = BREAKPOINTS_LIST.indexOf(breakpoint.breakpoint);
+  const noButtonBreakpointIndex = BREAKPOINTS_LIST.indexOf(NO_BUTTONS_START_FROM_BREAKPOINT);
+  const enableDefaultButtonsByBreakpoint = breakpointIndex > noButtonBreakpointIndex;
+  const showFade = enableDefaultButtonsByBreakpoint ? !noFadeOnDesktop : fadeOnMobile;
+  const leftAriaLabelTrl = useTranslation("ScrollableContainer", "left");
+  const leftButtonAriaLabel = _leftAriaLabel ?? leftAriaLabelTrl;
+  const rightAriaLabelTrl = useTranslation("ScrollableContainer", "right");
+  const rightButtonAriaLabel = _rightAriaLabel ?? rightAriaLabelTrl;
+  const updateFadeAndButtons = useInitOnce(() => () => {
+    const position = scrollState.scrollPosition.get();
+    const contentWidth = scrollState.contentWidth.get();
+    const viewportWidth = scrollState.viewportWidth.get();
+    const showLeftButton = position < 0;
+    const showRightButton = Math.abs(position) < Math.max(0, contentWidth - viewportWidth);
+    displayLeftButton.set(showLeftButton ? "block" : "none");
+    displayRightButton.set(showRightButton ? "block" : "none");
+    if (showLeftButton && showRightButton) {
+      mask.set("var(--both-sides-mask)");
+    } else if (showLeftButton) {
+      mask.set("var(--left-fade-mask)");
+    } else if (showRightButton) {
+      mask.set("var(--right-fade-mask)");
+    } else {
+      mask.set("none");
+    }
+  });
+  useEffect(() => {
+    updateFadeAndButtons();
+    const unsubscribe = [
+      scrollState.scrollPosition.on("change", updateFadeAndButtons),
+      scrollState.contentWidth.on("change", updateFadeAndButtons),
+      scrollState.viewportWidth.on("change", updateFadeAndButtons)
+    ];
+    return () => {
+      unsubscribe.forEach((fn) => fn());
+    };
+  }, [scrollState, updateFadeAndButtons]);
+  useEffect(() => {
+    scrollState.defaultButtonsCorrection.set(
+      enableDefaultButtonsByBreakpoint ? buttonWidthCorrection + buttonsOffset : 0
+    );
+    return () => {
+      scrollState.defaultButtonsCorrection.set(0);
+    };
+  }, [scrollState, enableDefaultButtonsByBreakpoint, buttonWidthCorrection, buttonsOffset]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classnames(styles.scrollButtonsContainer, {
+        [styles.scrollButtonsContainerOnHover]: buttonsOnHover
+      }),
+      style: {
+        "--magritte-ui-scrollable-container-min-height": `${minHeight}px`,
+        "--magritte-ui-scrollable-container-buttons-offset": `${buttonsOffset}px`
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: classnames(styles.scrollButton, styles.scrollButtonLeft),
+            style: { display: enableDefaultButtonsByBreakpoint ? displayLeftButton : "none" },
+            children: /* @__PURE__ */ jsx(ScrollableContainerLeft, { children: /* @__PURE__ */ jsx(
+              ChevronLeftOutlinedSize24,
+              {
+                padding: buttonPadding,
+                borderRadius: "halfHeight",
+                initialColor: "secondary",
+                backgroundStyle: "secondary",
+                "aria-label": leftButtonAriaLabel,
+                "aria-controls": leftAriaControls
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: classnames(styles.scrollButtons, {
+              [styles.scrollButtonsSmall]: size === "small"
+            }),
+            style: {
+              WebkitMask: showFade ? mask : "none",
+              mask: showFade ? mask : "none"
+            },
+            "data-qa": "scrollable-container__fade",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: classnames(styles.scrollButton, styles.scrollButtonRight),
+            style: { display: enableDefaultButtonsByBreakpoint ? displayRightButton : "none" },
+            children: /* @__PURE__ */ jsx(ScrollableContainerRight, { children: /* @__PURE__ */ jsx(
+              ChevronRightOutlinedSize24,
+              {
+                padding: buttonPadding,
+                borderRadius: "halfHeight",
+                initialColor: "secondary",
+                backgroundStyle: "secondary",
+                "aria-label": rightButtonAriaLabel,
+                "aria-controls": rightAriaControls
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
 };
 
 export { ScrollableContainerDefaultLayout };

package/ScrollableContainerDefaultLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableContainerDefaultLayout.js","sources":["src/ScrollableContainerDefaultLayout.tsx"],"sourcesContent":["import { type CSSProperties, type FC, useEffect } from 'react';\nimport classnames from 'classnames';\nimport { useMotionValue, motion } from 'motion/react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { ChevronRightOutlinedSize24, ChevronLeftOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { useScrollState } from '@hh.ru/magritte-ui-scrollable-container/ScrollStateProvider';\nimport {\n    ScrollableContainerLeft,\n    ScrollableContainerRight,\n} from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainerButton';\nimport type { ScrollableContainerDefaultLayoutProps } from '@hh.ru/magritte-ui-scrollable-container/types';\nimport {\n    BREAKPOINTS_LIST,\n    NO_BUTTONS_START_FROM_BREAKPOINT,\n    useInitOnce,\n} from '@hh.ru/magritte-ui-scrollable-container/utils';\n\nimport styles from './scrollableContainer.less';\n\nconst SIZE_CONFIG = {\n    medium: { padding: 8, buttonWidth: 44, minHeight: 40 },\n    small: { padding: 4, buttonWidth: 36, minHeight: 32 },\n} as const;\n\nexport const ScrollableContainerDefaultLayout: FC<ScrollableContainerDefaultLayoutProps> = ({\n    children,\n    size = 'medium',\n    fadeOnMobile = false,\n    noFadeOnDesktop = false,\n    buttonsOffset = 0,\n    buttonsOnHover = false,\n    leftButtonAriaLabel: _leftAriaLabel,\n    rightButtonAriaLabel: _rightAriaLabel,\n    leftAriaControls,\n    rightAriaControls,\n}) => {\n    const { padding: buttonPadding, buttonWidth: buttonWidthCorrection, minHeight } = SIZE_CONFIG[size];\n    const scrollState = useScrollState();\n    const displayLeftButton = useMotionValue<'none' | 'block'>('none');\n    const displayRightButton = useMotionValue<'none' | 'block'>('none');\n    const mask = useMotionValue<string | number>('none');\n\n    const breakpoint = useBreakpoint();\n    const breakpointIndex = BREAKPOINTS_LIST.indexOf(breakpoint.breakpoint);\n    const noButtonBreakpointIndex = BREAKPOINTS_LIST.indexOf(NO_BUTTONS_START_FROM_BREAKPOINT);\n    const enableDefaultButtonsByBreakpoint = breakpointIndex > noButtonBreakpointIndex;\n    const showFade = enableDefaultButtonsByBreakpoint ? !noFadeOnDesktop : fadeOnMobile;\n\n    const leftAriaLabelTrl = useTranslation('ScrollableContainer', 'left');\n    const leftButtonAriaLabel = _leftAriaLabel ?? leftAriaLabelTrl;\n    const rightAriaLabelTrl = useTranslation('ScrollableContainer', 'right');\n    const rightButtonAriaLabel = _rightAriaLabel ?? rightAriaLabelTrl;\n\n    const updateFadeAndButtons = useInitOnce(() => () => {\n        const position = scrollState.scrollPosition.get();\n        const contentWidth = scrollState.contentWidth.get();\n        const viewportWidth = scrollState.viewportWidth.get();\n\n        const showLeftButton = position < 0;\n        const showRightButton = Math.abs(position) < Math.max(0, contentWidth - viewportWidth);\n\n        displayLeftButton.set(showLeftButton ? 'block' : 'none');\n        displayRightButton.set(showRightButton ? 'block' : 'none');\n\n        if (showLeftButton && showRightButton) {\n            mask.set('var(--both-sides-mask)');\n        } else if (showLeftButton) {\n            mask.set('var(--left-fade-mask)');\n        } else if (showRightButton) {\n            mask.set('var(--right-fade-mask)');\n        } else {\n            mask.set('none');\n        }\n    });\n\n    useEffect(() => {\n        updateFadeAndButtons();\n        const unsubscribe = [\n            scrollState.scrollPosition.on('change', updateFadeAndButtons),\n            scrollState.contentWidth.on('change', updateFadeAndButtons),\n            scrollState.viewportWidth.on('change', updateFadeAndButtons),\n        ];\n        return () => {\n            unsubscribe.forEach((fn) => fn());\n        };\n    }, [scrollState, updateFadeAndButtons]);\n\n    useEffect(() => {\n        // кнопка закрывает край контента на свою ширину плюс отступ от края\n        scrollState.defaultButtonsCorrection.set(\n            enableDefaultButtonsByBreakpoint ? buttonWidthCorrection + buttonsOffset : 0\n        );\n        return () => {\n            scrollState.defaultButtonsCorrection.set(0);\n        };\n    }, [scrollState, enableDefaultButtonsByBreakpoint, buttonWidthCorrection, buttonsOffset]);\n\n    return (\n        <div\n            className={classnames(styles.scrollButtonsContainer, {\n                [styles.scrollButtonsContainerOnHover]: buttonsOnHover,\n            })}\n            style={\n                {\n                    '--magritte-ui-scrollable-container-min-height': `${minHeight}px`,\n                    '--magritte-ui-scrollable-container-buttons-offset': `${buttonsOffset}px`,\n                } as CSSProperties\n            }\n        >\n            <motion.div\n                className={classnames(styles.scrollButton, styles.scrollButtonLeft)}\n                style={{ display: enableDefaultButtonsByBreakpoint ? displayLeftButton : 'none' }}\n            >\n                <ScrollableContainerLeft>\n                    <ChevronLeftOutlinedSize24\n                        padding={buttonPadding}\n                        borderRadius=\"halfHeight\"\n                        initialColor=\"secondary\"\n                        backgroundStyle=\"secondary\"\n                        aria-label={leftButtonAriaLabel}\n                        aria-controls={leftAriaControls}\n                    />\n                </ScrollableContainerLeft>\n            </motion.div>\n            <motion.div\n                className={classnames(styles.scrollButtons, {\n                    [styles.scrollButtonsSmall]: size === 'small',\n                })}\n                style={{\n                    WebkitMask: showFade ? mask : 'none',\n                    mask: showFade ? mask : 'none',\n                }}\n                data-qa=\"scrollable-container__fade\"\n            >\n                {children}\n            </motion.div>\n            <motion.div\n                className={classnames(styles.scrollButton, styles.scrollButtonRight)}\n                style={{ display: enableDefaultButtonsByBreakpoint ? displayRightButton : 'none' }}\n            >\n                <ScrollableContainerRight>\n                    <ChevronRightOutlinedSize24\n                        padding={buttonPadding}\n                        borderRadius=\"halfHeight\"\n                        initialColor=\"secondary\"\n                        backgroundStyle=\"secondary\"\n                        aria-label={rightButtonAriaLabel}\n                        aria-controls={rightAriaControls}\n                    />\n                </ScrollableContainerRight>\n            </motion.div>\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"ScrollableContainerDefaultLayout.js","sources":["src/ScrollableContainerDefaultLayout.tsx"],"sourcesContent":["import { type CSSProperties, type FC, useEffect } from 'react';\nimport classnames from 'classnames';\nimport { useMotionValue, motion } from 'motion/react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { ChevronRightOutlinedSize24, ChevronLeftOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { useScrollState } from '@hh.ru/magritte-ui-scrollable-container/ScrollStateProvider';\nimport {\n    ScrollableContainerLeft,\n    ScrollableContainerRight,\n} from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainerButton';\nimport type { ScrollableContainerDefaultLayoutProps } from '@hh.ru/magritte-ui-scrollable-container/types';\nimport {\n    BREAKPOINTS_LIST,\n    NO_BUTTONS_START_FROM_BREAKPOINT,\n    useInitOnce,\n} from '@hh.ru/magritte-ui-scrollable-container/utils';\n\nimport styles from './scrollableContainer.less';\n\nconst SIZE_CONFIG = {\n    medium: { padding: 8, buttonWidth: 44, minHeight: 40 },\n    small: { padding: 4, buttonWidth: 36, minHeight: 32 },\n} as const;\n\nexport const ScrollableContainerDefaultLayout: FC<ScrollableContainerDefaultLayoutProps> = ({\n    children,\n    size = 'medium',\n    fadeOnMobile = false,\n    noFadeOnDesktop = false,\n    buttonsOffset = 0,\n    buttonsOnHover = false,\n    leftButtonAriaLabel: _leftAriaLabel,\n    rightButtonAriaLabel: _rightAriaLabel,\n    leftAriaControls,\n    rightAriaControls,\n}) => {\n    const { padding: buttonPadding, buttonWidth: buttonWidthCorrection, minHeight } = SIZE_CONFIG[size];\n    const scrollState = useScrollState();\n    const displayLeftButton = useMotionValue<'none' | 'block'>('none');\n    const displayRightButton = useMotionValue<'none' | 'block'>('none');\n    const mask = useMotionValue<string | number>('none');\n\n    const breakpoint = useBreakpoint();\n    const breakpointIndex = BREAKPOINTS_LIST.indexOf(breakpoint.breakpoint);\n    const noButtonBreakpointIndex = BREAKPOINTS_LIST.indexOf(NO_BUTTONS_START_FROM_BREAKPOINT);\n    const enableDefaultButtonsByBreakpoint = breakpointIndex > noButtonBreakpointIndex;\n    const showFade = enableDefaultButtonsByBreakpoint ? !noFadeOnDesktop : fadeOnMobile;\n\n    const leftAriaLabelTrl = useTranslation('ScrollableContainer', 'left');\n    const leftButtonAriaLabel = _leftAriaLabel ?? leftAriaLabelTrl;\n    const rightAriaLabelTrl = useTranslation('ScrollableContainer', 'right');\n    const rightButtonAriaLabel = _rightAriaLabel ?? rightAriaLabelTrl;\n\n    const updateFadeAndButtons = useInitOnce(() => () => {\n        const position = scrollState.scrollPosition.get();\n        const contentWidth = scrollState.contentWidth.get();\n        const viewportWidth = scrollState.viewportWidth.get();\n\n        const showLeftButton = position < 0;\n        const showRightButton = Math.abs(position) < Math.max(0, contentWidth - viewportWidth);\n\n        displayLeftButton.set(showLeftButton ? 'block' : 'none');\n        displayRightButton.set(showRightButton ? 'block' : 'none');\n\n        if (showLeftButton && showRightButton) {\n            mask.set('var(--both-sides-mask)');\n        } else if (showLeftButton) {\n            mask.set('var(--left-fade-mask)');\n        } else if (showRightButton) {\n            mask.set('var(--right-fade-mask)');\n        } else {\n            mask.set('none');\n        }\n    });\n\n    useEffect(() => {\n        updateFadeAndButtons();\n        const unsubscribe = [\n            scrollState.scrollPosition.on('change', updateFadeAndButtons),\n            scrollState.contentWidth.on('change', updateFadeAndButtons),\n            scrollState.viewportWidth.on('change', updateFadeAndButtons),\n        ];\n        return () => {\n            unsubscribe.forEach((fn) => fn());\n        };\n    }, [scrollState, updateFadeAndButtons]);\n\n    useEffect(() => {\n        // кнопка закрывает край контента на свою ширину плюс отступ от края\n        scrollState.defaultButtonsCorrection.set(\n            enableDefaultButtonsByBreakpoint ? buttonWidthCorrection + buttonsOffset : 0\n        );\n        return () => {\n            scrollState.defaultButtonsCorrection.set(0);\n        };\n    }, [scrollState, enableDefaultButtonsByBreakpoint, buttonWidthCorrection, buttonsOffset]);\n\n    return (\n        <div\n            className={classnames(styles.scrollButtonsContainer, {\n                [styles.scrollButtonsContainerOnHover]: buttonsOnHover,\n            })}\n            style={\n                {\n                    '--magritte-ui-scrollable-container-min-height': `${minHeight}px`,\n                    '--magritte-ui-scrollable-container-buttons-offset': `${buttonsOffset}px`,\n                } as CSSProperties\n            }\n        >\n            <motion.div\n                className={classnames(styles.scrollButton, styles.scrollButtonLeft)}\n                style={{ display: enableDefaultButtonsByBreakpoint ? displayLeftButton : 'none' }}\n            >\n                <ScrollableContainerLeft>\n                    <ChevronLeftOutlinedSize24\n                        padding={buttonPadding}\n                        borderRadius=\"halfHeight\"\n                        initialColor=\"secondary\"\n                        backgroundStyle=\"secondary\"\n                        aria-label={leftButtonAriaLabel}\n                        aria-controls={leftAriaControls}\n                    />\n                </ScrollableContainerLeft>\n            </motion.div>\n            <motion.div\n                className={classnames(styles.scrollButtons, {\n                    [styles.scrollButtonsSmall]: size === 'small',\n                })}\n                style={{\n                    WebkitMask: showFade ? mask : 'none',\n                    mask: showFade ? mask : 'none',\n                }}\n                data-qa=\"scrollable-container__fade\"\n            >\n                {children}\n            </motion.div>\n            <motion.div\n                className={classnames(styles.scrollButton, styles.scrollButtonRight)}\n                style={{ display: enableDefaultButtonsByBreakpoint ? displayRightButton : 'none' }}\n            >\n                <ScrollableContainerRight>\n                    <ChevronRightOutlinedSize24\n                        padding={buttonPadding}\n                        borderRadius=\"halfHeight\"\n                        initialColor=\"secondary\"\n                        backgroundStyle=\"secondary\"\n                        aria-label={rightButtonAriaLabel}\n                        aria-controls={rightAriaControls}\n                    />\n                </ScrollableContainerRight>\n            </motion.div>\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/ScrollableContainerDotPages.d.ts

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

package/ScrollableContainerDotPages.js

@@ -7,60 +7,72 @@ import { useScrollState } from './ScrollStateProvider.js';
 import { OFFSET_ATTR } from './types.js';
 import { useInitOnce, findIndexNearestToSnapPoint } from './utils.js';
 import { VSpacing } from '@hh.ru/magritte-ui-spacing';
-import { s as styles } from './scrollableContainer-C0a8z9uL.js';
+import { s as styles } from './scrollableContainer-CWsF-84M.js';
 import 'motion/react';
 import './ObservableValue.js';
 import '@hh.ru/magritte-internal-custom-scroll';
 import '@hh.ru/magritte-ui-breakpoint';
 
 const DEFAULT_DOT = 1;
-const ScrollableContainerDotPages = ({ onChangeDot, dotPagesProps, offsetTop = 8, }) => {
-    const scrollState = useScrollState();
-    const [activeDot, setActiveDot] = useState(DEFAULT_DOT);
-    const [itemsCount, setItemsCount] = useState(0);
-    const activeDotRef = useRef(DEFAULT_DOT);
-    const onChangeDotRef = useRef(onChangeDot);
-    onChangeDotRef.current = onChangeDot;
-    const setDotAndEmitOnChange = useInitOnce(() => (dot) => {
-        if (dot === activeDotRef.current) {
-            return;
-        }
-        setActiveDot(dot);
-        onChangeDotRef.current?.(dot);
-        activeDotRef.current = dot;
-    });
-    const updateActiveDot = useInitOnce(() => () => {
-        const { viewportWidth, scrollPosition, items } = scrollState;
-        const center = viewportWidth.get() / 2 + Math.abs(scrollPosition.get());
-        const activeDotItem = items.get()[activeDotRef.current - 1]?.current;
-        if (!activeDotItem ||
-            !activeDotItem[OFFSET_ATTR] ||
-            (activeDotItem[OFFSET_ATTR].left <= center && activeDotItem[OFFSET_ATTR].right >= center)) {
-            return;
-        }
-        setDotAndEmitOnChange(findIndexNearestToSnapPoint(scrollState) + 1);
-    });
-    useEffect(() => {
-        const unsubscribe = [
-            scrollState.scrollPosition.on('change', updateActiveDot),
-            scrollState.items.on('change', (items) => {
-                setItemsCount(items.length);
-                // удалили последний элемент и он был активный
-                if (activeDotRef.current > items.length && items.length !== 0) {
-                    setDotAndEmitOnChange(clamp(activeDotRef.current, 0, items.length - 1));
-                    return;
-                }
-                updateActiveDot();
-            }),
-        ];
-        return () => {
-            unsubscribe.forEach((fn) => fn());
-        };
-    }, [scrollState, updateActiveDot, setDotAndEmitOnChange]);
-    if (itemsCount === 0) {
-        return null;
+const ScrollableContainerDotPages = ({
+  onChangeDot,
+  dotPagesProps,
+  offsetTop = 8
+}) => {
+  const scrollState = useScrollState();
+  const [activeDot, setActiveDot] = useState(DEFAULT_DOT);
+  const [itemsCount, setItemsCount] = useState(0);
+  const activeDotRef = useRef(DEFAULT_DOT);
+  const onChangeDotRef = useRef(onChangeDot);
+  onChangeDotRef.current = onChangeDot;
+  const setDotAndEmitOnChange = useInitOnce(() => (dot) => {
+    if (dot === activeDotRef.current) {
+      return;
     }
-    return (jsxs("div", { children: [jsx(VSpacing, { default: offsetTop }), jsx("div", { className: styles.dotContainer, children: jsx(DotPages, { active: activeDot, count: itemsCount, "data-qa": dotPagesProps?.['data-qa'] || 'scrollable-container__dot-pages', ...dotPagesProps }) })] }));
+    setActiveDot(dot);
+    onChangeDotRef.current?.(dot);
+    activeDotRef.current = dot;
+  });
+  const updateActiveDot = useInitOnce(() => () => {
+    const { viewportWidth, scrollPosition, items } = scrollState;
+    const center = viewportWidth.get() / 2 + Math.abs(scrollPosition.get());
+    const activeDotItem = items.get()[activeDotRef.current - 1]?.current;
+    if (!activeDotItem || !activeDotItem[OFFSET_ATTR] || activeDotItem[OFFSET_ATTR].left <= center && activeDotItem[OFFSET_ATTR].right >= center) {
+      return;
+    }
+    setDotAndEmitOnChange(findIndexNearestToSnapPoint(scrollState) + 1);
+  });
+  useEffect(() => {
+    const unsubscribe = [
+      scrollState.scrollPosition.on("change", updateActiveDot),
+      scrollState.items.on("change", (items) => {
+        setItemsCount(items.length);
+        if (activeDotRef.current > items.length && items.length !== 0) {
+          setDotAndEmitOnChange(clamp(activeDotRef.current, 0, items.length - 1));
+          return;
+        }
+        updateActiveDot();
+      })
+    ];
+    return () => {
+      unsubscribe.forEach((fn) => fn());
+    };
+  }, [scrollState, updateActiveDot, setDotAndEmitOnChange]);
+  if (itemsCount === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(VSpacing, { default: offsetTop }),
+    /* @__PURE__ */ jsx("div", { className: styles.dotContainer, children: /* @__PURE__ */ jsx(
+      DotPages,
+      {
+        active: activeDot,
+        count: itemsCount,
+        "data-qa": dotPagesProps?.["data-qa"] || "scrollable-container__dot-pages",
+        ...dotPagesProps
+      }
+    ) })
+  ] });
 };
 
 export { ScrollableContainerDotPages };

package/ScrollableContainerDotPages.js.map

@@ -1 +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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"}
+{"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":[],"mappings":"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"}

package/ScrollableContainerGallery.d.ts

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

package/ScrollableContainerGallery.js

@@ -6,7 +6,7 @@ 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-C0a8z9uL.js';
+import { s as styles } from './scrollableContainer-CWsF-84M.js';
 import './ObservableValue.js';
 import '@hh.ru/magritte-common-func-utils';
 import '@hh.ru/magritte-internal-custom-scroll';
@@ -15,62 +15,93 @@ import './useScrollableControls.js';
 import '@hh.ru/magritte-ui-breakpoint';
 
 const GalleryContext = createContext({
-    registerItem: () => null,
-    removeItem: () => null,
+  registerItem: () => null,
+  removeItem: () => null
 });
 const useGalleryContext = () => useContext(GalleryContext);
-const ScrollableContainerGallery = ({ children, onScroll, onReady, onChangeSize, ...props }) => {
-    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 ScrollableContainerGallery = ({
+  children,
+  onScroll,
+  onReady,
+  onChangeSize,
+  ...props
+}) => {
+  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
+  });
+  scrollState.springScrollPosition = springScrollPosition;
+  return /* @__PURE__ */ jsx(
+    GalleryContext.Provider,
+    {
+      value: {
+        registerItem,
+        removeItem
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containerRef,
+          role: "list",
+          className: styles.scrollableContainer,
+          "data-qa": "scrollable-container__overflow-container",
+          ...props,
+          children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              ref: positionContainerRef,
+              "data-qa": "scrollable-container__position-container",
+              className: styles.positionContainer,
+              style: { x: isTouch ? scrollState.scrollPosition : springScrollPosition },
+              children
             }
-            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,
-    });
-    scrollState.springScrollPosition = springScrollPosition;
-    return (jsx(GalleryContext.Provider, { value: {
-            registerItem,
-            removeItem,
-        }, children: jsx("div", { ref: containerRef, role: "list", className: styles.scrollableContainer, "data-qa": "scrollable-container__overflow-container", ...props, 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 };