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

package/ObservableValue.js

@@ -1,23 +1,23 @@
 import './index.css';
 class ObservableValue {
-    value;
-    listeners = new Set();
-    constructor(initial) {
-        this.value = initial;
-    }
-    get() {
-        return this.value;
-    }
-    set(value) {
-        if (this.value !== value || Array.isArray(this.value)) {
-            this.value = value;
-            this.listeners.forEach((listener) => listener(value));
-        }
-    }
-    on(_event, callback) {
-        this.listeners.add(callback);
-        return () => this.listeners.delete(callback);
+  value;
+  listeners = /* @__PURE__ */ new Set();
+  constructor(initial) {
+    this.value = initial;
+  }
+  get() {
+    return this.value;
+  }
+  set(value) {
+    if (this.value !== value || Array.isArray(this.value)) {
+      this.value = value;
+      this.listeners.forEach((listener) => listener(value));
     }
+  }
+  on(_event, callback) {
+    this.listeners.add(callback);
+    return () => this.listeners.delete(callback);
+  }
 }
 
 export { ObservableValue };

package/ObservableValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ObservableValue.js","sources":["src/ObservableValue.ts"],"sourcesContent":["export interface ObservableValueInterface<T> {\n    get(): T;\n    set(value: T): void;\n    on(event: 'change', callback: (value: T) => void): VoidFunction;\n}\n\nexport class ObservableValue<T> implements ObservableValueInterface<T> {\n    private value: T;\n    private listeners = new Set<(value: T) => void>();\n\n    constructor(initial: T) {\n        this.value = initial;\n    }\n\n    get(): T {\n        return this.value;\n    }\n\n    set(value: T): void {\n        if (this.value !== value || Array.isArray(this.value)) {\n            this.value = value;\n            this.listeners.forEach((listener) => listener(value));\n        }\n    }\n\n    on(_event: 'change', callback: (value: T) => void): VoidFunction {\n        this.listeners.add(callback);\n        return () => this.listeners.delete(callback);\n    }\n}\n"],"names":[],"mappings":"MAMa,eAAe,CAAA;AAChB,IAAA,KAAK,CAAI;AACT,IAAA,SAAS,GAAG,IAAI,GAAG,EAAsB,CAAC;AAElD,IAAA,WAAA,CAAY,OAAU,EAAA;AAClB,QAAA,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;KACxB;IAED,GAAG,GAAA;QACC,OAAO,IAAI,CAAC,KAAK,CAAC;KACrB;AAED,IAAA,GAAG,CAAC,KAAQ,EAAA;AACR,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AACnD,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;AACnB,YAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;SACzD;KACJ;IAED,EAAE,CAAC,MAAgB,EAAE,QAA4B,EAAA;AAC7C,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC7B,OAAO,MAAM,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;KAChD;AACJ;;;;"}
+{"version":3,"file":"ObservableValue.js","sources":["src/ObservableValue.ts"],"sourcesContent":["export interface ObservableValueInterface<T> {\n    get(): T;\n    set(value: T): void;\n    on(event: 'change', callback: (value: T) => void): VoidFunction;\n}\n\nexport class ObservableValue<T> implements ObservableValueInterface<T> {\n    private value: T;\n    private listeners = new Set<(value: T) => void>();\n\n    constructor(initial: T) {\n        this.value = initial;\n    }\n\n    get(): T {\n        return this.value;\n    }\n\n    set(value: T): void {\n        if (this.value !== value || Array.isArray(this.value)) {\n            this.value = value;\n            this.listeners.forEach((listener) => listener(value));\n        }\n    }\n\n    on(_event: 'change', callback: (value: T) => void): VoidFunction {\n        this.listeners.add(callback);\n        return () => this.listeners.delete(callback);\n    }\n}\n"],"names":[],"mappings":"AAMO,MAAM,eAA0D,CAAA;AAAA,EAC3D,KAAA,CAAA;AAAA,EACA,SAAA,uBAAgB,GAAwB,EAAA,CAAA;AAAA,EAEhD,YAAY,OAAY,EAAA;AACpB,IAAA,IAAA,CAAK,KAAQ,GAAA,OAAA,CAAA;AAAA,GACjB;AAAA,EAEA,GAAS,GAAA;AACL,IAAA,OAAO,IAAK,CAAA,KAAA,CAAA;AAAA,GAChB;AAAA,EAEA,IAAI,KAAgB,EAAA;AAChB,IAAA,IAAI,KAAK,KAAU,KAAA,KAAA,IAAS,MAAM,OAAQ,CAAA,IAAA,CAAK,KAAK,CAAG,EAAA;AACnD,MAAA,IAAA,CAAK,KAAQ,GAAA,KAAA,CAAA;AACb,MAAA,IAAA,CAAK,UAAU,OAAQ,CAAA,CAAC,QAAa,KAAA,QAAA,CAAS,KAAK,CAAC,CAAA,CAAA;AAAA,KACxD;AAAA,GACJ;AAAA,EAEA,EAAA,CAAG,QAAkB,QAA4C,EAAA;AAC7D,IAAK,IAAA,CAAA,SAAA,CAAU,IAAI,QAAQ,CAAA,CAAA;AAC3B,IAAA,OAAO,MAAM,IAAA,CAAK,SAAU,CAAA,MAAA,CAAO,QAAQ,CAAA,CAAA;AAAA,GAC/C;AACJ;;;;"}

package/ScrollStateProvider.d.ts

@@ -1,7 +1,7 @@
 import { type RefObject } from 'react';
 import { MotionValue } from 'motion/react';
-import { ObservableValue } from '@hh.ru/magritte-ui-scrollable-container/ObservableValue';
-import { type ItemWithOffset, type ScrollSnapAlign } from '@hh.ru/magritte-ui-scrollable-container/types';
+import { ObservableValue } from './ObservableValue';
+import { type ItemWithOffset, type ScrollSnapAlign } from './types';
 export type BehaviorScrollType = 'animate' | 'instant';
 export interface ScrollState {
     /** ширина контента, которая складывается из ширины элементов галереи */

package/ScrollStateProvider.js

@@ -4,17 +4,17 @@ import { MotionValue } from 'motion/react';
 import { ObservableValue } from './ObservableValue.js';
 
 const createScrollState = () => ({
-    contentWidth: new ObservableValue(0),
-    viewportWidth: new ObservableValue(0),
-    items: new ObservableValue([]),
-    scrollPosition: new MotionValue(0),
-    springScrollPosition: null,
-    defaultButtonsCorrection: new ObservableValue(0),
-    leftCorrection: new ObservableValue(0),
-    rightCorrection: new ObservableValue(0),
-    indexForDeferScroll: -1,
-    behaviorScrollTypeDeferScroll: 'animate',
-    scrollSnapAlign: 'none',
+  contentWidth: new ObservableValue(0),
+  viewportWidth: new ObservableValue(0),
+  items: new ObservableValue([]),
+  scrollPosition: new MotionValue(0),
+  springScrollPosition: null,
+  defaultButtonsCorrection: new ObservableValue(0),
+  leftCorrection: new ObservableValue(0),
+  rightCorrection: new ObservableValue(0),
+  indexForDeferScroll: -1,
+  behaviorScrollTypeDeferScroll: "animate",
+  scrollSnapAlign: "none"
 });
 const ScrollStateContext = createContext(createScrollState());
 const useScrollState = () => useContext(ScrollStateContext);

package/ScrollStateProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollStateProvider.js","sources":["src/ScrollStateProvider.tsx"],"sourcesContent":["import { type RefObject, createContext, useContext } from 'react';\nimport { MotionValue } from 'motion/react';\n\nimport { ObservableValue } from '@hh.ru/magritte-ui-scrollable-container/ObservableValue';\nimport { type ItemWithOffset, type ScrollSnapAlign } from '@hh.ru/magritte-ui-scrollable-container/types';\n\nexport type BehaviorScrollType = 'animate' | 'instant';\n\nexport interface ScrollState {\n    /** ширина контента, которая складывается из ширины элементов галереи */\n    contentWidth: ObservableValue<number>;\n    /** ширина вьюпорта для просмотра галереи */\n    viewportWidth: ObservableValue<number>;\n    /** элементы галереи */\n    items: ObservableValue<RefObject<HTMLElement & ItemWithOffset>[]>;\n    /** текущая позиция */\n    scrollPosition: MotionValue<number>;\n    /** текущая позиция, обернется в spring */\n    springScrollPosition: MotionValue<number> | null;\n    /** Определяет, как ближайший элемент будет размещён во вьюпорте при автоматическом скролле */\n    scrollSnapAlign: ScrollSnapAlign;\n    /**\n     * флаг коррекции \"по умолчанию\"\n     * возникает при использовании \"стандартных\" (по спеке) кнопок в fade\n     */\n    defaultButtonsCorrection: ObservableValue<number>;\n    /** значения коррекции */\n    leftCorrection: ObservableValue<number>;\n    rightCorrection: ObservableValue<number>;\n    /** индекс элемента для отложенного скролла */\n    indexForDeferScroll: number;\n    /** тип поведения для отложенного скролла */\n    behaviorScrollTypeDeferScroll: BehaviorScrollType;\n}\n\nexport const createScrollState = (): ScrollState => ({\n    contentWidth: new ObservableValue(0),\n    viewportWidth: new ObservableValue(0),\n    items: new ObservableValue<RefObject<HTMLElement & ItemWithOffset>[]>([]),\n    scrollPosition: new MotionValue(0),\n    springScrollPosition: null,\n    defaultButtonsCorrection: new ObservableValue(0),\n    leftCorrection: new ObservableValue(0),\n    rightCorrection: new ObservableValue(0),\n    indexForDeferScroll: -1,\n    behaviorScrollTypeDeferScroll: 'animate',\n    scrollSnapAlign: 'none',\n});\n\nexport const ScrollStateContext = createContext<ScrollState>(createScrollState());\n\nexport const useScrollState = (): ScrollState => useContext(ScrollStateContext);\n"],"names":[],"mappings":";;;;AAmCa,MAAA,iBAAiB,GAAG,OAAoB;AACjD,IAAA,YAAY,EAAE,IAAI,eAAe,CAAC,CAAC,CAAC;AACpC,IAAA,aAAa,EAAE,IAAI,eAAe,CAAC,CAAC,CAAC;AACrC,IAAA,KAAK,EAAE,IAAI,eAAe,CAA4C,EAAE,CAAC;AACzE,IAAA,cAAc,EAAE,IAAI,WAAW,CAAC,CAAC,CAAC;AAClC,IAAA,oBAAoB,EAAE,IAAI;AAC1B,IAAA,wBAAwB,EAAE,IAAI,eAAe,CAAC,CAAC,CAAC;AAChD,IAAA,cAAc,EAAE,IAAI,eAAe,CAAC,CAAC,CAAC;AACtC,IAAA,eAAe,EAAE,IAAI,eAAe,CAAC,CAAC,CAAC;IACvC,mBAAmB,EAAE,CAAC,CAAC;AACvB,IAAA,6BAA6B,EAAE,SAAS;AACxC,IAAA,eAAe,EAAE,MAAM;AAC1B,CAAA,EAAE;MAEU,kBAAkB,GAAG,aAAa,CAAc,iBAAiB,EAAE,EAAE;AAErE,MAAA,cAAc,GAAG,MAAmB,UAAU,CAAC,kBAAkB;;;;"}
+{"version":3,"file":"ScrollStateProvider.js","sources":["src/ScrollStateProvider.tsx"],"sourcesContent":["import { type RefObject, createContext, useContext } from 'react';\nimport { MotionValue } from 'motion/react';\n\nimport { ObservableValue } from '@hh.ru/magritte-ui-scrollable-container/ObservableValue';\nimport { type ItemWithOffset, type ScrollSnapAlign } from '@hh.ru/magritte-ui-scrollable-container/types';\n\nexport type BehaviorScrollType = 'animate' | 'instant';\n\nexport interface ScrollState {\n    /** ширина контента, которая складывается из ширины элементов галереи */\n    contentWidth: ObservableValue<number>;\n    /** ширина вьюпорта для просмотра галереи */\n    viewportWidth: ObservableValue<number>;\n    /** элементы галереи */\n    items: ObservableValue<RefObject<HTMLElement & ItemWithOffset>[]>;\n    /** текущая позиция */\n    scrollPosition: MotionValue<number>;\n    /** текущая позиция, обернется в spring */\n    springScrollPosition: MotionValue<number> | null;\n    /** Определяет, как ближайший элемент будет размещён во вьюпорте при автоматическом скролле */\n    scrollSnapAlign: ScrollSnapAlign;\n    /**\n     * флаг коррекции \"по умолчанию\"\n     * возникает при использовании \"стандартных\" (по спеке) кнопок в fade\n     */\n    defaultButtonsCorrection: ObservableValue<number>;\n    /** значения коррекции */\n    leftCorrection: ObservableValue<number>;\n    rightCorrection: ObservableValue<number>;\n    /** индекс элемента для отложенного скролла */\n    indexForDeferScroll: number;\n    /** тип поведения для отложенного скролла */\n    behaviorScrollTypeDeferScroll: BehaviorScrollType;\n}\n\nexport const createScrollState = (): ScrollState => ({\n    contentWidth: new ObservableValue(0),\n    viewportWidth: new ObservableValue(0),\n    items: new ObservableValue<RefObject<HTMLElement & ItemWithOffset>[]>([]),\n    scrollPosition: new MotionValue(0),\n    springScrollPosition: null,\n    defaultButtonsCorrection: new ObservableValue(0),\n    leftCorrection: new ObservableValue(0),\n    rightCorrection: new ObservableValue(0),\n    indexForDeferScroll: -1,\n    behaviorScrollTypeDeferScroll: 'animate',\n    scrollSnapAlign: 'none',\n});\n\nexport const ScrollStateContext = createContext<ScrollState>(createScrollState());\n\nexport const useScrollState = (): ScrollState => useContext(ScrollStateContext);\n"],"names":[],"mappings":";;;;AAmCO,MAAM,oBAAoB,OAAoB;AAAA,EACjD,YAAA,EAAc,IAAI,eAAA,CAAgB,CAAC,CAAA;AAAA,EACnC,aAAA,EAAe,IAAI,eAAA,CAAgB,CAAC,CAAA;AAAA,EACpC,KAAO,EAAA,IAAI,eAA2D,CAAA,EAAE,CAAA;AAAA,EACxE,cAAA,EAAgB,IAAI,WAAA,CAAY,CAAC,CAAA;AAAA,EACjC,oBAAsB,EAAA,IAAA;AAAA,EACtB,wBAAA,EAA0B,IAAI,eAAA,CAAgB,CAAC,CAAA;AAAA,EAC/C,cAAA,EAAgB,IAAI,eAAA,CAAgB,CAAC,CAAA;AAAA,EACrC,eAAA,EAAiB,IAAI,eAAA,CAAgB,CAAC,CAAA;AAAA,EACtC,mBAAqB,EAAA,CAAA,CAAA;AAAA,EACrB,6BAA+B,EAAA,SAAA;AAAA,EAC/B,eAAiB,EAAA,MAAA;AACrB,CAAA,EAAA;AAEa,MAAA,kBAAA,GAAqB,aAA2B,CAAA,iBAAA,EAAmB,EAAA;AAEnE,MAAA,cAAA,GAAiB,MAAmB,UAAA,CAAW,kBAAkB;;;;"}

package/ScrollableContainer.d.ts

@@ -1,9 +1,9 @@
-import { ScrollableContainerLeft, ScrollableContainerRight } from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainerButton';
-import { ScrollableContainerDefaultLayout } from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainerDefaultLayout';
-import { ScrollableContainerDotPages } from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainerDotPages';
-import { ScrollableContainerGallery } from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainerGallery';
-import { ScrollableItem } from '@hh.ru/magritte-ui-scrollable-container/ScrollableItem';
-import { ScrollableControls } from '@hh.ru/magritte-ui-scrollable-container/types';
+import { ScrollableContainerLeft, ScrollableContainerRight } from './ScrollableContainerButton';
+import { ScrollableContainerDefaultLayout } from './ScrollableContainerDefaultLayout';
+import { ScrollableContainerDotPages } from './ScrollableContainerDotPages';
+import { ScrollableContainerGallery } from './ScrollableContainerGallery';
+import { ScrollableItem } from './ScrollableItem';
+import { ScrollableControls } from './types';
 export interface ScrollableContainerComponents {
     Left: typeof ScrollableContainerLeft;
     Right: typeof ScrollableContainerRight;
@@ -12,9 +12,9 @@ export interface ScrollableContainerComponents {
     Gallery: typeof ScrollableContainerGallery;
     DotPages: typeof ScrollableContainerDotPages;
 }
-declare const ScrollableContainerComponent: import("react").ForwardRefExoticComponent<import("@hh.ru/magritte-ui-scrollable-container/types").SpacingCorrectionProps & {
+declare const ScrollableContainerComponent: import("react").ForwardRefExoticComponent<import("./types").SpacingCorrectionProps & {
     children: import("react").ReactNode;
-    scrollSnapAlign?: import("@hh.ru/magritte-ui-scrollable-container/types").ScrollSnapAlign;
+    scrollSnapAlign?: import("./types").ScrollSnapAlign;
 } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<ScrollableControls>>;
 declare const ScrollableContainer: typeof ScrollableContainerComponent & ScrollableContainerComponents;
 export { ScrollableContainer };

package/ScrollableContainer.js

@@ -11,7 +11,7 @@ import { ScrollableContainerGallery } from './ScrollableContainerGallery.js';
 import { ScrollableItem } from './ScrollableItem.js';
 import { useScrollableControlsWithState } from './useScrollableControls.js';
 import { getActualCorrection, useInitOnce } from './utils.js';
-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-common-use-translation';
@@ -24,57 +24,85 @@ import './useScrollContainer.js';
 import '@hh.ru/magritte-common-func-utils';
 import '@hh.ru/magritte-internal-custom-scroll';
 
-const ScrollableContainerComponent = forwardRef(({ children, scrollSnapAlign = 'none', correction = 0, correctionXS, correctionS, correctionM, correctionL, correctionXL, correctionXXL, correctionLeftXS, correctionLeftS, correctionLeftM, correctionLeftL, correctionLeftXL, correctionLeftXXL, correctionRightXS, correctionRightS, correctionRightM, correctionRightL, correctionRightXL, correctionRightXXL, style, ...props }, controlsRef) => {
+const ScrollableContainerComponent = forwardRef(
+  ({
+    children,
+    scrollSnapAlign = "none",
+    correction = 0,
+    correctionXS,
+    correctionS,
+    correctionM,
+    correctionL,
+    correctionXL,
+    correctionXXL,
+    correctionLeftXS,
+    correctionLeftS,
+    correctionLeftM,
+    correctionLeftL,
+    correctionLeftXL,
+    correctionLeftXXL,
+    correctionRightXS,
+    correctionRightS,
+    correctionRightM,
+    correctionRightL,
+    correctionRightXL,
+    correctionRightXXL,
+    style,
+    ...props
+  }, controlsRef) => {
     const breakpoint = useBreakpoint();
     const spacingCorrectionStyles = useMemo(() => {
-        const correctionValue = getActualCorrection({
-            correction,
-            correctionXS,
-            correctionS,
-            correctionM,
-            correctionL,
-            correctionXL,
-            correctionXXL,
-            correctionLeftXS,
-            correctionLeftS,
-            correctionLeftM,
-            correctionLeftL,
-            correctionLeftXL,
-            correctionLeftXXL,
-            correctionRightXS,
-            correctionRightS,
-            correctionRightM,
-            correctionRightL,
-            correctionRightXL,
-            correctionRightXXL,
-        }, breakpoint.breakpoint);
-        return {
-            marginLeft: -correctionValue.leftCorrection,
-            marginRight: -correctionValue.rightCorrection,
-            paddingLeft: correctionValue.leftCorrection,
-            paddingRight: correctionValue.rightCorrection,
-        };
+      const correctionValue = getActualCorrection(
+        {
+          correction,
+          correctionXS,
+          correctionS,
+          correctionM,
+          correctionL,
+          correctionXL,
+          correctionXXL,
+          correctionLeftXS,
+          correctionLeftS,
+          correctionLeftM,
+          correctionLeftL,
+          correctionLeftXL,
+          correctionLeftXXL,
+          correctionRightXS,
+          correctionRightS,
+          correctionRightM,
+          correctionRightL,
+          correctionRightXL,
+          correctionRightXXL
+        },
+        breakpoint.breakpoint
+      );
+      return {
+        marginLeft: -correctionValue.leftCorrection,
+        marginRight: -correctionValue.rightCorrection,
+        paddingLeft: correctionValue.leftCorrection,
+        paddingRight: correctionValue.rightCorrection
+      };
     }, [
-        correction,
-        correctionXS,
-        correctionS,
-        correctionM,
-        correctionL,
-        correctionXL,
-        correctionXXL,
-        correctionLeftXS,
-        correctionLeftS,
-        correctionLeftM,
-        correctionLeftL,
-        correctionLeftXL,
-        correctionLeftXXL,
-        correctionRightXS,
-        correctionRightS,
-        correctionRightM,
-        correctionRightL,
-        correctionRightXL,
-        correctionRightXXL,
-        breakpoint.breakpoint,
+      correction,
+      correctionXS,
+      correctionS,
+      correctionM,
+      correctionL,
+      correctionXL,
+      correctionXXL,
+      correctionLeftXS,
+      correctionLeftS,
+      correctionLeftM,
+      correctionLeftL,
+      correctionLeftXL,
+      correctionLeftXXL,
+      correctionRightXS,
+      correctionRightS,
+      correctionRightM,
+      correctionRightL,
+      correctionRightXL,
+      correctionRightXXL,
+      breakpoint.breakpoint
     ]);
     const scrollState = useInitOnce(createScrollState);
     scrollState.scrollSnapAlign = scrollSnapAlign;
@@ -82,17 +110,28 @@ const ScrollableContainerComponent = forwardRef(({ children, scrollSnapAlign = '
     scrollState.rightCorrection.set(spacingCorrectionStyles.paddingRight);
     const controls = useScrollableControlsWithState(scrollState);
     useImperativeHandle(controlsRef, () => controls, [controls]);
-    return (jsx("div", { role: "region", "data-qa": "scrollable-container__wrapper", className: classnames(styles.scrollWrapper), style: {
-            ...{
-                '--magritte-ui-scrollabe-container-ml': `${spacingCorrectionStyles.marginLeft}px`,
-                '--magritte-ui-scrollabe-container-mr': `${spacingCorrectionStyles.marginRight}px`,
-                '--magritte-ui-scrollabe-container-pl': `${spacingCorrectionStyles.paddingLeft}px`,
-                '--magritte-ui-scrollabe-container-pr': `${spacingCorrectionStyles.paddingRight}px`,
-            },
-            ...(style || {}),
-        }, ...props, children: jsx(ScrollStateContext.Provider, { value: scrollState, children: children }) }));
-});
-ScrollableContainerComponent.displayName = 'ScrollableContainer';
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "region",
+        "data-qa": "scrollable-container__wrapper",
+        className: classnames(styles.scrollWrapper),
+        style: {
+          ...{
+            "--magritte-ui-scrollabe-container-ml": `${spacingCorrectionStyles.marginLeft}px`,
+            "--magritte-ui-scrollabe-container-mr": `${spacingCorrectionStyles.marginRight}px`,
+            "--magritte-ui-scrollabe-container-pl": `${spacingCorrectionStyles.paddingLeft}px`,
+            "--magritte-ui-scrollabe-container-pr": `${spacingCorrectionStyles.paddingRight}px`
+          },
+          ...style || {}
+        },
+        ...props,
+        children: /* @__PURE__ */ jsx(ScrollStateContext.Provider, { value: scrollState, children })
+      }
+    );
+  }
+);
+ScrollableContainerComponent.displayName = "ScrollableContainer";
 const ScrollableContainer = ScrollableContainerComponent;
 ScrollableContainer.Left = ScrollableContainerLeft;
 ScrollableContainer.Right = ScrollableContainerRight;

package/ScrollableContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableContainer.js","sources":["src/ScrollableContainer.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useMemo, type CSSProperties } from 'react';\nimport classnames from 'classnames';\n\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { ScrollStateContext, createScrollState } from '@hh.ru/magritte-ui-scrollable-container/ScrollStateProvider';\nimport {\n    ScrollableContainerLeft,\n    ScrollableContainerRight,\n} from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainerButton';\nimport { ScrollableContainerDefaultLayout } from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainerDefaultLayout';\nimport { ScrollableContainerDotPages } from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainerDotPages';\nimport { ScrollableContainerGallery } from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainerGallery';\nimport { ScrollableItem } from '@hh.ru/magritte-ui-scrollable-container/ScrollableItem';\nimport { ScrollableContainerProps, ScrollableControls } from '@hh.ru/magritte-ui-scrollable-container/types';\nimport { useScrollableControlsWithState } from '@hh.ru/magritte-ui-scrollable-container/useScrollableControls';\nimport { getActualCorrection, useInitOnce } from '@hh.ru/magritte-ui-scrollable-container/utils';\n\nimport styles from './scrollableContainer.less';\n\nexport interface ScrollableContainerComponents {\n    Left: typeof ScrollableContainerLeft;\n    Right: typeof ScrollableContainerRight;\n    Item: typeof ScrollableItem;\n    DefaultLayout: typeof ScrollableContainerDefaultLayout;\n    Gallery: typeof ScrollableContainerGallery;\n    DotPages: typeof ScrollableContainerDotPages;\n}\n\nconst ScrollableContainerComponent = forwardRef<ScrollableControls, ScrollableContainerProps>(\n    (\n        {\n            children,\n            scrollSnapAlign = 'none',\n            correction = 0,\n            correctionXS,\n            correctionS,\n            correctionM,\n            correctionL,\n            correctionXL,\n            correctionXXL,\n            correctionLeftXS,\n            correctionLeftS,\n            correctionLeftM,\n            correctionLeftL,\n            correctionLeftXL,\n            correctionLeftXXL,\n            correctionRightXS,\n            correctionRightS,\n            correctionRightM,\n            correctionRightL,\n            correctionRightXL,\n            correctionRightXXL,\n            style,\n            ...props\n        },\n        controlsRef\n    ) => {\n        const breakpoint = useBreakpoint();\n        const spacingCorrectionStyles = useMemo(() => {\n            const correctionValue = getActualCorrection(\n                {\n                    correction,\n                    correctionXS,\n                    correctionS,\n                    correctionM,\n                    correctionL,\n                    correctionXL,\n                    correctionXXL,\n                    correctionLeftXS,\n                    correctionLeftS,\n                    correctionLeftM,\n                    correctionLeftL,\n                    correctionLeftXL,\n                    correctionLeftXXL,\n                    correctionRightXS,\n                    correctionRightS,\n                    correctionRightM,\n                    correctionRightL,\n                    correctionRightXL,\n                    correctionRightXXL,\n                },\n                breakpoint.breakpoint\n            );\n            return {\n                marginLeft: -correctionValue.leftCorrection,\n                marginRight: -correctionValue.rightCorrection,\n                paddingLeft: correctionValue.leftCorrection,\n                paddingRight: correctionValue.rightCorrection,\n            };\n        }, [\n            correction,\n            correctionXS,\n            correctionS,\n            correctionM,\n            correctionL,\n            correctionXL,\n            correctionXXL,\n            correctionLeftXS,\n            correctionLeftS,\n            correctionLeftM,\n            correctionLeftL,\n            correctionLeftXL,\n            correctionLeftXXL,\n            correctionRightXS,\n            correctionRightS,\n            correctionRightM,\n            correctionRightL,\n            correctionRightXL,\n            correctionRightXXL,\n            breakpoint.breakpoint,\n        ]);\n\n        const scrollState = useInitOnce(createScrollState);\n        scrollState.scrollSnapAlign = scrollSnapAlign;\n        scrollState.leftCorrection.set(spacingCorrectionStyles.paddingLeft);\n        scrollState.rightCorrection.set(spacingCorrectionStyles.paddingRight);\n\n        const controls = useScrollableControlsWithState(scrollState);\n        useImperativeHandle(controlsRef, () => controls, [controls]);\n\n        return (\n            <div\n                role=\"region\"\n                data-qa=\"scrollable-container__wrapper\"\n                className={classnames(styles.scrollWrapper)}\n                style={{\n                    ...({\n                        '--magritte-ui-scrollabe-container-ml': `${spacingCorrectionStyles.marginLeft}px`,\n                        '--magritte-ui-scrollabe-container-mr': `${spacingCorrectionStyles.marginRight}px`,\n                        '--magritte-ui-scrollabe-container-pl': `${spacingCorrectionStyles.paddingLeft}px`,\n                        '--magritte-ui-scrollabe-container-pr': `${spacingCorrectionStyles.paddingRight}px`,\n                    } as CSSProperties),\n                    ...(style || {}),\n                }}\n                {...props}\n            >\n                <ScrollStateContext.Provider value={scrollState}>{children}</ScrollStateContext.Provider>\n            </div>\n        );\n    }\n);\n\nScrollableContainerComponent.displayName = 'ScrollableContainer';\n\nconst ScrollableContainer = ScrollableContainerComponent as typeof ScrollableContainerComponent &\n    ScrollableContainerComponents;\n\nScrollableContainer.Left = ScrollableContainerLeft;\nScrollableContainer.Right = ScrollableContainerRight;\nScrollableContainer.Item = ScrollableItem;\nScrollableContainer.Gallery = ScrollableContainerGallery;\nScrollableContainer.DefaultLayout = ScrollableContainerDefaultLayout;\nScrollableContainer.DotPages = ScrollableContainerDotPages;\n\nexport { ScrollableContainer };\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"ScrollableContainer.js","sources":["src/ScrollableContainer.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useMemo, type CSSProperties } from 'react';\nimport classnames from 'classnames';\n\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { ScrollStateContext, createScrollState } from '@hh.ru/magritte-ui-scrollable-container/ScrollStateProvider';\nimport {\n    ScrollableContainerLeft,\n    ScrollableContainerRight,\n} from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainerButton';\nimport { ScrollableContainerDefaultLayout } from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainerDefaultLayout';\nimport { ScrollableContainerDotPages } from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainerDotPages';\nimport { ScrollableContainerGallery } from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainerGallery';\nimport { ScrollableItem } from '@hh.ru/magritte-ui-scrollable-container/ScrollableItem';\nimport { ScrollableContainerProps, ScrollableControls } from '@hh.ru/magritte-ui-scrollable-container/types';\nimport { useScrollableControlsWithState } from '@hh.ru/magritte-ui-scrollable-container/useScrollableControls';\nimport { getActualCorrection, useInitOnce } from '@hh.ru/magritte-ui-scrollable-container/utils';\n\nimport styles from './scrollableContainer.less';\n\nexport interface ScrollableContainerComponents {\n    Left: typeof ScrollableContainerLeft;\n    Right: typeof ScrollableContainerRight;\n    Item: typeof ScrollableItem;\n    DefaultLayout: typeof ScrollableContainerDefaultLayout;\n    Gallery: typeof ScrollableContainerGallery;\n    DotPages: typeof ScrollableContainerDotPages;\n}\n\nconst ScrollableContainerComponent = forwardRef<ScrollableControls, ScrollableContainerProps>(\n    (\n        {\n            children,\n            scrollSnapAlign = 'none',\n            correction = 0,\n            correctionXS,\n            correctionS,\n            correctionM,\n            correctionL,\n            correctionXL,\n            correctionXXL,\n            correctionLeftXS,\n            correctionLeftS,\n            correctionLeftM,\n            correctionLeftL,\n            correctionLeftXL,\n            correctionLeftXXL,\n            correctionRightXS,\n            correctionRightS,\n            correctionRightM,\n            correctionRightL,\n            correctionRightXL,\n            correctionRightXXL,\n            style,\n            ...props\n        },\n        controlsRef\n    ) => {\n        const breakpoint = useBreakpoint();\n        const spacingCorrectionStyles = useMemo(() => {\n            const correctionValue = getActualCorrection(\n                {\n                    correction,\n                    correctionXS,\n                    correctionS,\n                    correctionM,\n                    correctionL,\n                    correctionXL,\n                    correctionXXL,\n                    correctionLeftXS,\n                    correctionLeftS,\n                    correctionLeftM,\n                    correctionLeftL,\n                    correctionLeftXL,\n                    correctionLeftXXL,\n                    correctionRightXS,\n                    correctionRightS,\n                    correctionRightM,\n                    correctionRightL,\n                    correctionRightXL,\n                    correctionRightXXL,\n                },\n                breakpoint.breakpoint\n            );\n            return {\n                marginLeft: -correctionValue.leftCorrection,\n                marginRight: -correctionValue.rightCorrection,\n                paddingLeft: correctionValue.leftCorrection,\n                paddingRight: correctionValue.rightCorrection,\n            };\n        }, [\n            correction,\n            correctionXS,\n            correctionS,\n            correctionM,\n            correctionL,\n            correctionXL,\n            correctionXXL,\n            correctionLeftXS,\n            correctionLeftS,\n            correctionLeftM,\n            correctionLeftL,\n            correctionLeftXL,\n            correctionLeftXXL,\n            correctionRightXS,\n            correctionRightS,\n            correctionRightM,\n            correctionRightL,\n            correctionRightXL,\n            correctionRightXXL,\n            breakpoint.breakpoint,\n        ]);\n\n        const scrollState = useInitOnce(createScrollState);\n        scrollState.scrollSnapAlign = scrollSnapAlign;\n        scrollState.leftCorrection.set(spacingCorrectionStyles.paddingLeft);\n        scrollState.rightCorrection.set(spacingCorrectionStyles.paddingRight);\n\n        const controls = useScrollableControlsWithState(scrollState);\n        useImperativeHandle(controlsRef, () => controls, [controls]);\n\n        return (\n            <div\n                role=\"region\"\n                data-qa=\"scrollable-container__wrapper\"\n                className={classnames(styles.scrollWrapper)}\n                style={{\n                    ...({\n                        '--magritte-ui-scrollabe-container-ml': `${spacingCorrectionStyles.marginLeft}px`,\n                        '--magritte-ui-scrollabe-container-mr': `${spacingCorrectionStyles.marginRight}px`,\n                        '--magritte-ui-scrollabe-container-pl': `${spacingCorrectionStyles.paddingLeft}px`,\n                        '--magritte-ui-scrollabe-container-pr': `${spacingCorrectionStyles.paddingRight}px`,\n                    } as CSSProperties),\n                    ...(style || {}),\n                }}\n                {...props}\n            >\n                <ScrollStateContext.Provider value={scrollState}>{children}</ScrollStateContext.Provider>\n            </div>\n        );\n    }\n);\n\nScrollableContainerComponent.displayName = 'ScrollableContainer';\n\nconst ScrollableContainer = ScrollableContainerComponent as typeof ScrollableContainerComponent &\n    ScrollableContainerComponents;\n\nScrollableContainer.Left = ScrollableContainerLeft;\nScrollableContainer.Right = ScrollableContainerRight;\nScrollableContainer.Item = ScrollableItem;\nScrollableContainer.Gallery = ScrollableContainerGallery;\nScrollableContainer.DefaultLayout = ScrollableContainerDefaultLayout;\nScrollableContainer.DotPages = ScrollableContainerDotPages;\n\nexport { ScrollableContainer };\n"],"names":[],"mappings":"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"}

package/ScrollableContainerButton.d.ts

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

package/ScrollableContainerButton.js

@@ -10,19 +10,22 @@ import './utils.js';
 import '@hh.ru/magritte-ui-breakpoint';
 import './types.js';
 
-const ScrolllableContainerScrollButton = ({ children, toRight = false, }) => {
-    const { scrollLeft, scrollRight } = useScrollableControls();
-    if (!isValidElement(children)) {
-        return null;
-    }
-    const defaultDataQa = `scrollable-container__scroll-button-${toRight ? 'right' : 'left'}`;
-    return cloneElement(children, {
-        'data-qa': children.props['data-qa'] || defaultDataQa,
-        onClick: () => (toRight ? scrollRight() : scrollLeft()),
-    });
+const ScrolllableContainerScrollButton = ({
+  children,
+  toRight = false
+}) => {
+  const { scrollLeft, scrollRight } = useScrollableControls();
+  if (!isValidElement(children)) {
+    return null;
+  }
+  const defaultDataQa = `scrollable-container__scroll-button-${toRight ? "right" : "left"}`;
+  return cloneElement(children, {
+    "data-qa": children.props["data-qa"] || defaultDataQa,
+    onClick: () => toRight ? scrollRight() : scrollLeft()
+  });
 };
-const ScrollableContainerLeft = ({ children }) => (jsx(ScrolllableContainerScrollButton, { children: children }));
-const ScrollableContainerRight = ({ children }) => (jsx(ScrolllableContainerScrollButton, { toRight: true, children: children }));
+const ScrollableContainerLeft = ({ children }) => /* @__PURE__ */ jsx(ScrolllableContainerScrollButton, { children });
+const ScrollableContainerRight = ({ children }) => /* @__PURE__ */ jsx(ScrolllableContainerScrollButton, { toRight: true, children });
 
 export { ScrollableContainerLeft, ScrollableContainerRight };
 //# sourceMappingURL=ScrollableContainerButton.js.map

package/ScrollableContainerButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableContainerButton.js","sources":["src/ScrollableContainerButton.tsx"],"sourcesContent":["import { cloneElement, isValidElement, type FC } from 'react';\n\nimport type { ControlWithClick, ScrollableContainerButtonProps } from '@hh.ru/magritte-ui-scrollable-container/types';\nimport { useScrollableControls } from '@hh.ru/magritte-ui-scrollable-container/useScrollableControls';\n\nconst ScrolllableContainerScrollButton: FC<ScrollableContainerButtonProps & { toRight?: boolean }> = ({\n    children,\n    toRight = false,\n}) => {\n    const { scrollLeft, scrollRight } = useScrollableControls();\n    if (!isValidElement<ControlWithClick>(children)) {\n        return null;\n    }\n    const defaultDataQa = `scrollable-container__scroll-button-${toRight ? 'right' : 'left'}`;\n    return cloneElement(children, {\n        'data-qa': children.props['data-qa'] || defaultDataQa,\n        onClick: () => (toRight ? scrollRight() : scrollLeft()),\n    });\n};\n\nexport const ScrollableContainerLeft: FC<ScrollableContainerButtonProps> = ({ children }) => (\n    <ScrolllableContainerScrollButton>{children}</ScrolllableContainerScrollButton>\n);\n\nexport const ScrollableContainerRight: FC<ScrollableContainerButtonProps> = ({ children }) => (\n    <ScrolllableContainerScrollButton toRight>{children}</ScrolllableContainerScrollButton>\n);\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;AAKA,MAAM,gCAAgC,GAA+D,CAAC,EAClG,QAAQ,EACR,OAAO,GAAG,KAAK,GAClB,KAAI;IACD,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,qBAAqB,EAAE,CAAC;AAC5D,IAAA,IAAI,CAAC,cAAc,CAAmB,QAAQ,CAAC,EAAE;AAC7C,QAAA,OAAO,IAAI,CAAC;KACf;AACD,IAAA,MAAM,aAAa,GAAG,CAAuC,oCAAA,EAAA,OAAO,GAAG,OAAO,GAAG,MAAM,EAAE,CAAC;IAC1F,OAAO,YAAY,CAAC,QAAQ,EAAE;QAC1B,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,aAAa;AACrD,QAAA,OAAO,EAAE,OAAO,OAAO,GAAG,WAAW,EAAE,GAAG,UAAU,EAAE,CAAC;AAC1D,KAAA,CAAC,CAAC;AACP,CAAC,CAAC;AAEW,MAAA,uBAAuB,GAAuC,CAAC,EAAE,QAAQ,EAAE,MACpFA,GAAC,CAAA,gCAAgC,cAAE,QAAQ,EAAA,CAAoC,EACjF;MAEW,wBAAwB,GAAuC,CAAC,EAAE,QAAQ,EAAE,MACrFA,GAAA,CAAC,gCAAgC,EAAC,EAAA,OAAO,kBAAE,QAAQ,EAAA,CAAoC;;;;"}
+{"version":3,"file":"ScrollableContainerButton.js","sources":["src/ScrollableContainerButton.tsx"],"sourcesContent":["import { cloneElement, isValidElement, type FC } from 'react';\n\nimport type { ControlWithClick, ScrollableContainerButtonProps } from '@hh.ru/magritte-ui-scrollable-container/types';\nimport { useScrollableControls } from '@hh.ru/magritte-ui-scrollable-container/useScrollableControls';\n\nconst ScrolllableContainerScrollButton: FC<ScrollableContainerButtonProps & { toRight?: boolean }> = ({\n    children,\n    toRight = false,\n}) => {\n    const { scrollLeft, scrollRight } = useScrollableControls();\n    if (!isValidElement<ControlWithClick>(children)) {\n        return null;\n    }\n    const defaultDataQa = `scrollable-container__scroll-button-${toRight ? 'right' : 'left'}`;\n    return cloneElement(children, {\n        'data-qa': children.props['data-qa'] || defaultDataQa,\n        onClick: () => (toRight ? scrollRight() : scrollLeft()),\n    });\n};\n\nexport const ScrollableContainerLeft: FC<ScrollableContainerButtonProps> = ({ children }) => (\n    <ScrolllableContainerScrollButton>{children}</ScrolllableContainerScrollButton>\n);\n\nexport const ScrollableContainerRight: FC<ScrollableContainerButtonProps> = ({ children }) => (\n    <ScrolllableContainerScrollButton toRight>{children}</ScrolllableContainerScrollButton>\n);\n"],"names":[],"mappings":";;;;;;;;;;;AAKA,MAAM,mCAA+F,CAAC;AAAA,EAClG,QAAA;AAAA,EACA,OAAU,GAAA,KAAA;AACd,CAAM,KAAA;AACF,EAAA,MAAM,EAAE,UAAA,EAAY,WAAY,EAAA,GAAI,qBAAsB,EAAA,CAAA;AAC1D,EAAI,IAAA,CAAC,cAAiC,CAAA,QAAQ,CAAG,EAAA;AAC7C,IAAO,OAAA,IAAA,CAAA;AAAA,GACX;AACA,EAAA,MAAM,aAAgB,GAAA,CAAA,oCAAA,EAAuC,OAAU,GAAA,OAAA,GAAU,MAAM,CAAA,CAAA,CAAA;AACvF,EAAA,OAAO,aAAa,QAAU,EAAA;AAAA,IAC1B,SAAW,EAAA,QAAA,CAAS,KAAM,CAAA,SAAS,CAAK,IAAA,aAAA;AAAA,IACxC,OAAS,EAAA,MAAO,OAAU,GAAA,WAAA,KAAgB,UAAW,EAAA;AAAA,GACxD,CAAA,CAAA;AACL,CAAA,CAAA;AAEO,MAAM,0BAA8D,CAAC,EAAE,UAC1E,qBAAA,GAAA,CAAC,oCAAkC,QAAS,EAAA,EAAA;AAGnC,MAAA,wBAAA,GAA+D,CAAC,EAAE,QAAA,uBAC1E,GAAA,CAAA,gCAAA,EAAA,EAAiC,OAAO,EAAA,IAAA,EAAE,QAAS,EAAA;;;;"}

package/ScrollableContainerDefaultLayout.d.ts

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