@hh.ru/magritte-ui-scrollable-container 6.0.2 → 6.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ScrollableContainer.js +3 -2
- package/ScrollableContainer.js.map +1 -1
- package/ScrollableContainerDefaultLayout.js +9 -4
- package/ScrollableContainerDefaultLayout.js.map +1 -1
- package/ScrollableContainerDotPages.js +1 -1
- package/ScrollableContainerGallery.js +3 -3
- package/ScrollableContainerGallery.js.map +1 -1
- package/ScrollableItem.js +5 -4
- package/ScrollableItem.js.map +1 -1
- package/index.css +14 -9
- package/index.js +2 -1
- package/index.js.map +1 -1
- package/index.mock.js +1 -1
- package/package.json +4 -3
- package/scrollableContainer-D9wH7sLu.js +5 -0
- package/scrollableContainer-D9wH7sLu.js.map +1 -0
- package/types.d.ts +11 -1
- package/types.js.map +1 -1
- package/scrollableContainer-CORqdDaF.js +0 -5
- package/scrollableContainer-CORqdDaF.js.map +0 -1
package/ScrollableContainer.js
CHANGED
|
@@ -11,9 +11,10 @@ import { ScrollableContainerGallery } from './ScrollableContainerGallery.js';
|
|
|
11
11
|
import { ScrollableItem } from './ScrollableItem.js';
|
|
12
12
|
import { useScrollableControlsWithState } from './useScrollableControls.js';
|
|
13
13
|
import { getActualCorrection, useInitOnce } from './utils.js';
|
|
14
|
-
import { s as styles } from './scrollableContainer-
|
|
14
|
+
import { s as styles } from './scrollableContainer-D9wH7sLu.js';
|
|
15
15
|
import 'motion/react';
|
|
16
16
|
import './ObservableValue.js';
|
|
17
|
+
import '@hh.ru/magritte-common-use-translation';
|
|
17
18
|
import '@hh.ru/magritte-ui-icon/icon';
|
|
18
19
|
import '@hh.ru/magritte-internal-custom-scroll/initScrollHandlers';
|
|
19
20
|
import '@hh.ru/magritte-ui-dot-pages';
|
|
@@ -81,7 +82,7 @@ const ScrollableContainerComponent = forwardRef(({ children, scrollSnapAlign = '
|
|
|
81
82
|
scrollState.rightCorrection.set(spacingCorrectionStyles.paddingRight);
|
|
82
83
|
const controls = useScrollableControlsWithState(scrollState);
|
|
83
84
|
useImperativeHandle(controlsRef, () => controls, [controls]);
|
|
84
|
-
return (jsx("div", { "data-qa": "scrollable-container__wrapper", className: classnames(styles.scrollWrapper), style: {
|
|
85
|
+
return (jsx("div", { role: "region", "data-qa": "scrollable-container__wrapper", className: classnames(styles.scrollWrapper), style: {
|
|
85
86
|
...{
|
|
86
87
|
'--magritte-ui-scrollabe-container-ml': `${spacingCorrectionStyles.marginLeft}px`,
|
|
87
88
|
'--magritte-ui-scrollabe-container-mr': `${spacingCorrectionStyles.marginRight}px`,
|
|
@@ -1 +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 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":"
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,4BAA4B,GAAG,UAAU,CAC3C,CACI,EACI,QAAQ,EACR,eAAe,GAAG,MAAM,EACxB,UAAU,GAAG,CAAC,EACd,YAAY,EACZ,WAAW,EACX,WAAW,EACX,WAAW,EACX,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,EACL,GAAG,KAAK,EACX,EACD,WAAW,KACX;AACA,IAAA,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;AACnC,IAAA,MAAM,uBAAuB,GAAG,OAAO,CAAC,MAAK;QACzC,MAAM,eAAe,GAAG,mBAAmB,CACvC;YACI,UAAU;YACV,YAAY;YACZ,WAAW;YACX,WAAW;YACX,WAAW;YACX,YAAY;YACZ,aAAa;YACb,gBAAgB;YAChB,eAAe;YACf,eAAe;YACf,eAAe;YACf,gBAAgB;YAChB,iBAAiB;YACjB,iBAAiB;YACjB,gBAAgB;YAChB,gBAAgB;YAChB,gBAAgB;YAChB,iBAAiB;YACjB,kBAAkB;AACrB,SAAA,EACD,UAAU,CAAC,UAAU,CACxB,CAAC;QACF,OAAO;AACH,YAAA,UAAU,EAAE,CAAC,eAAe,CAAC,cAAc;AAC3C,YAAA,WAAW,EAAE,CAAC,eAAe,CAAC,eAAe;YAC7C,WAAW,EAAE,eAAe,CAAC,cAAc;YAC3C,YAAY,EAAE,eAAe,CAAC,eAAe;SAChD,CAAC;AACN,KAAC,EAAE;QACC,UAAU;QACV,YAAY;QACZ,WAAW;QACX,WAAW;QACX,WAAW;QACX,YAAY;QACZ,aAAa;QACb,gBAAgB;QAChB,eAAe;QACf,eAAe;QACf,eAAe;QACf,gBAAgB;QAChB,iBAAiB;QACjB,iBAAiB;QACjB,gBAAgB;QAChB,gBAAgB;QAChB,gBAAgB;QAChB,iBAAiB;QACjB,kBAAkB;AAClB,QAAA,UAAU,CAAC,UAAU;AACxB,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC;AACnD,IAAA,WAAW,CAAC,eAAe,GAAG,eAAe,CAAC;IAC9C,WAAW,CAAC,cAAc,CAAC,GAAG,CAAC,uBAAuB,CAAC,WAAW,CAAC,CAAC;IACpE,WAAW,CAAC,eAAe,CAAC,GAAG,CAAC,uBAAuB,CAAC,YAAY,CAAC,CAAC;AAEtE,IAAA,MAAM,QAAQ,GAAG,8BAA8B,CAAC,WAAW,CAAC,CAAC;AAC7D,IAAA,mBAAmB,CAAC,WAAW,EAAE,MAAM,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;AAE7D,IAAA,QACIA,GACI,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,SAAA,EACL,+BAA+B,EACvC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,aAAa,CAAC,EAC3C,KAAK,EAAE;YACH,GAAI;AACA,gBAAA,sCAAsC,EAAE,CAAA,EAAG,uBAAuB,CAAC,UAAU,CAAI,EAAA,CAAA;AACjF,gBAAA,sCAAsC,EAAE,CAAA,EAAG,uBAAuB,CAAC,WAAW,CAAI,EAAA,CAAA;AAClF,gBAAA,sCAAsC,EAAE,CAAA,EAAG,uBAAuB,CAAC,WAAW,CAAI,EAAA,CAAA;AAClF,gBAAA,sCAAsC,EAAE,CAAA,EAAG,uBAAuB,CAAC,YAAY,CAAI,EAAA,CAAA;AACpE,aAAA;AACnB,YAAA,IAAI,KAAK,IAAI,EAAE;AAClB,SAAA,EAAA,GACG,KAAK,EAAA,QAAA,EAETA,GAAC,CAAA,kBAAkB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,WAAW,EAAG,QAAA,EAAA,QAAQ,EAA+B,CAAA,EAAA,CACvF,EACR;AACN,CAAC,CACJ,CAAC;AAEF,4BAA4B,CAAC,WAAW,GAAG,qBAAqB,CAAC;AAE3D,MAAA,mBAAmB,GAAG,6BACM;AAElC,mBAAmB,CAAC,IAAI,GAAG,uBAAuB,CAAC;AACnD,mBAAmB,CAAC,KAAK,GAAG,wBAAwB,CAAC;AACrD,mBAAmB,CAAC,IAAI,GAAG,cAAc,CAAC;AAC1C,mBAAmB,CAAC,OAAO,GAAG,0BAA0B,CAAC;AACzD,mBAAmB,CAAC,aAAa,GAAG,gCAAgC,CAAC;AACrE,mBAAmB,CAAC,QAAQ,GAAG,2BAA2B;;;;"}
|
|
@@ -3,19 +3,20 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { useEffect } from 'react';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import { useMotionValue, motion } from 'motion/react';
|
|
6
|
+
import { useTranslation } from '@hh.ru/magritte-common-use-translation';
|
|
6
7
|
import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
|
|
7
8
|
import { ChevronLeftOutlinedSize24, ChevronRightOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
|
|
8
9
|
import { useScrollState } from './ScrollStateProvider.js';
|
|
9
10
|
import { ScrollableContainerLeft, ScrollableContainerRight } from './ScrollableContainerButton.js';
|
|
10
11
|
import { BREAKPOINTS_LIST, NO_BUTTONS_START_FROM_BREAKPOINT, useInitOnce } from './utils.js';
|
|
11
|
-
import { s as styles } from './scrollableContainer-
|
|
12
|
+
import { s as styles } from './scrollableContainer-D9wH7sLu.js';
|
|
12
13
|
import './ObservableValue.js';
|
|
13
14
|
import './useScrollableControls.js';
|
|
14
15
|
import '@hh.ru/magritte-internal-custom-scroll';
|
|
15
16
|
import './types.js';
|
|
16
17
|
|
|
17
18
|
const BUTTON_WIDTH = 44;
|
|
18
|
-
const ScrollableContainerDefaultLayout = ({ children }) => {
|
|
19
|
+
const ScrollableContainerDefaultLayout = ({ children, leftButtonAriaLabel: _leftAriaLabel, rightButtonAriaLabel: _rightAriaLabel, leftAriaControls, rightAriaControls, }) => {
|
|
19
20
|
const scrollState = useScrollState();
|
|
20
21
|
const displayLeftButton = useMotionValue('none');
|
|
21
22
|
const displayRightButton = useMotionValue('none');
|
|
@@ -24,6 +25,10 @@ const ScrollableContainerDefaultLayout = ({ children }) => {
|
|
|
24
25
|
const breakpointIndex = BREAKPOINTS_LIST.indexOf(breakpoint.breakpoint);
|
|
25
26
|
const noButtonBreakpointIndex = BREAKPOINTS_LIST.indexOf(NO_BUTTONS_START_FROM_BREAKPOINT);
|
|
26
27
|
const enableDefaultButtonsByBreakpoint = breakpointIndex > noButtonBreakpointIndex;
|
|
28
|
+
const leftAriaLabelTrl = useTranslation('ScrollableContainer', 'left');
|
|
29
|
+
const leftButtonAriaLabel = _leftAriaLabel ?? leftAriaLabelTrl;
|
|
30
|
+
const rightAriaLabelTrl = useTranslation('ScrollableContainer', 'right');
|
|
31
|
+
const rightButtonAriaLabel = _rightAriaLabel ?? rightAriaLabelTrl;
|
|
27
32
|
const updateFadeAndButtons = useInitOnce(() => () => {
|
|
28
33
|
const position = scrollState.scrollPosition.get();
|
|
29
34
|
const contentWidth = scrollState.contentWidth.get();
|
|
@@ -62,10 +67,10 @@ const ScrollableContainerDefaultLayout = ({ children }) => {
|
|
|
62
67
|
scrollState.defaultButtonsCorrection.set(0);
|
|
63
68
|
};
|
|
64
69
|
}, [scrollState, enableDefaultButtonsByBreakpoint]);
|
|
65
|
-
return (jsxs("div", { className: styles.scrollButtonsContainer, children: [jsx(motion.div, { className: styles.scrollButtons, style: {
|
|
70
|
+
return (jsxs("div", { className: styles.scrollButtonsContainer, children: [jsx(motion.div, { className: classnames(styles.scrollButton, styles.scrollButtonLeft), style: { display: enableDefaultButtonsByBreakpoint ? displayLeftButton : 'none' }, children: jsx(ScrollableContainerLeft, { children: jsx(ChevronLeftOutlinedSize24, { padding: 8, borderRadius: "halfHeight", initialColor: "secondary", backgroundStyle: "secondary", "aria-label": leftButtonAriaLabel, "aria-controls": leftAriaControls }) }) }), jsx(motion.div, { className: styles.scrollButtons, style: {
|
|
66
71
|
WebkitMask: enableDefaultButtonsByBreakpoint ? mask : 'none',
|
|
67
72
|
mask: enableDefaultButtonsByBreakpoint ? mask : 'none',
|
|
68
|
-
}, "data-qa": "scrollable-container__fade", children: children }), jsx(motion.div, { className: classnames(styles.scrollButton, styles.
|
|
73
|
+
}, "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: 8, borderRadius: "halfHeight", initialColor: "secondary", backgroundStyle: "secondary", "aria-label": rightButtonAriaLabel, "aria-controls": rightAriaControls }) }) })] }));
|
|
69
74
|
};
|
|
70
75
|
|
|
71
76
|
export { ScrollableContainerDefaultLayout };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollableContainerDefaultLayout.js","sources":["../src/ScrollableContainerDefaultLayout.tsx"],"sourcesContent":["import { type FC, useEffect } from 'react';\nimport classnames from 'classnames';\nimport { useMotionValue, motion } from 'motion/react';\n\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 BUTTON_WIDTH = 44;\n\nexport const ScrollableContainerDefaultLayout: FC<ScrollableContainerDefaultLayoutProps> = ({
|
|
1
|
+
{"version":3,"file":"ScrollableContainerDefaultLayout.js","sources":["../src/ScrollableContainerDefaultLayout.tsx"],"sourcesContent":["import { 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 BUTTON_WIDTH = 44;\n\nexport const ScrollableContainerDefaultLayout: FC<ScrollableContainerDefaultLayoutProps> = ({\n children,\n leftButtonAriaLabel: _leftAriaLabel,\n rightButtonAriaLabel: _rightAriaLabel,\n leftAriaControls,\n rightAriaControls,\n}) => {\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\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 scrollState.defaultButtonsCorrection.set(enableDefaultButtonsByBreakpoint ? BUTTON_WIDTH : 0);\n return () => {\n scrollState.defaultButtonsCorrection.set(0);\n };\n }, [scrollState, enableDefaultButtonsByBreakpoint]);\n\n return (\n <div className={styles.scrollButtonsContainer}>\n <motion.div\n className={classnames(styles.scrollButton, styles.scrollButtonLeft)}\n style={{ display: enableDefaultButtonsByBreakpoint ? displayLeftButton : 'none' }}\n >\n <ScrollableContainerLeft>\n <ChevronLeftOutlinedSize24\n padding={8}\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={styles.scrollButtons}\n style={{\n WebkitMask: enableDefaultButtonsByBreakpoint ? mask : 'none',\n mask: enableDefaultButtonsByBreakpoint ? 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={8}\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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"}
|
|
@@ -7,7 +7,7 @@ import { useScrollState } from './ScrollStateProvider.js';
|
|
|
7
7
|
import { OFFSET_ATTR } from './types.js';
|
|
8
8
|
import { useInitOnce, findIndexNearestToSnapPoint } from './utils.js';
|
|
9
9
|
import { VSpacing } from '@hh.ru/magritte-ui-spacing';
|
|
10
|
-
import { s as styles } from './scrollableContainer-
|
|
10
|
+
import { s as styles } from './scrollableContainer-D9wH7sLu.js';
|
|
11
11
|
import 'motion/react';
|
|
12
12
|
import './ObservableValue.js';
|
|
13
13
|
import '@hh.ru/magritte-internal-custom-scroll';
|
|
@@ -6,7 +6,7 @@ import { clamp } from '@hh.ru/magritte-internal-custom-scroll/initScrollHandlers
|
|
|
6
6
|
import { useScrollState } from './ScrollStateProvider.js';
|
|
7
7
|
import { useScrollContainer } from './useScrollContainer.js';
|
|
8
8
|
import { getDisableState, findIndexNearestToSnapPoint, computeScrollSnapBehavior } from './utils.js';
|
|
9
|
-
import { s as styles } from './scrollableContainer-
|
|
9
|
+
import { s as styles } from './scrollableContainer-D9wH7sLu.js';
|
|
10
10
|
import './ObservableValue.js';
|
|
11
11
|
import '@hh.ru/magritte-common-func-utils';
|
|
12
12
|
import '@hh.ru/magritte-internal-custom-scroll';
|
|
@@ -19,7 +19,7 @@ const GalleryContext = createContext({
|
|
|
19
19
|
removeItem: () => null,
|
|
20
20
|
});
|
|
21
21
|
const useGalleryContext = () => useContext(GalleryContext);
|
|
22
|
-
const ScrollableContainerGallery = ({ children, onScroll, onReady, onChangeSize, }) => {
|
|
22
|
+
const ScrollableContainerGallery = ({ children, onScroll, onReady, onChangeSize, ...props }) => {
|
|
23
23
|
const scrollState = useScrollState();
|
|
24
24
|
const onReadyRef = useRef(onReady);
|
|
25
25
|
const onScrollRef = useRef(onScroll);
|
|
@@ -69,7 +69,7 @@ const ScrollableContainerGallery = ({ children, onScroll, onReady, onChangeSize,
|
|
|
69
69
|
return (jsx(GalleryContext.Provider, { value: {
|
|
70
70
|
registerItem,
|
|
71
71
|
removeItem,
|
|
72
|
-
}, children: jsx("div", { ref: containerRef, className: styles.scrollableContainer, "data-qa": "scrollable-container__overflow-container", children: jsx(motion.div, { ref: positionContainerRef, "data-qa": "scrollable-container__position-container", className: styles.positionContainer, style: { x: isTouch ? scrollState.scrollPosition : springScrollPosition }, children: children }) }) }));
|
|
72
|
+
}, 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 }) }) }));
|
|
73
73
|
};
|
|
74
74
|
|
|
75
75
|
export { ScrollableContainerGallery, useGalleryContext };
|
|
@@ -1 +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}) => {\n const scrollState = useScrollState();\n const onReadyRef = useRef(onReady);\n const onScrollRef = useRef(onScroll);\n const onChangeSizeRef = useRef(onChangeSize);\n onReadyRef.current = onReady;\n onScrollRef.current = onScroll;\n onChangeSizeRef.current = onChangeSize;\n\n const { registerItem, removeItem, initScrollHandlers, containerRef, positionContainerRef, isTouch } =\n useScrollContainer();\n\n useEffect(() => {\n const { scrollPosition, viewportWidth, contentWidth } = scrollState;\n const updateScrollPositionByResize = () => {\n const index = findIndexNearestToSnapPoint(scrollState);\n const scrollSnapBehavior = computeScrollSnapBehavior(scrollState);\n const target = scrollSnapBehavior(scrollState, index);\n if (target === null) {\n return;\n }\n const position = clamp(target, viewportWidth.get() - contentWidth.get(), 0);\n onChangeSizeRef.current?.(getDisableState(scrollState));\n if (scrollPosition.get() === position) {\n return;\n }\n animate(scrollPosition, position, {\n velocity: Math.max(scrollPosition.getVelocity(), 1),\n });\n };\n const unsubscribe = [\n scrollPosition.on('change', () => {\n onScrollRef.current?.(getDisableState(scrollState));\n }),\n viewportWidth.on('change', updateScrollPositionByResize),\n contentWidth.on('change', updateScrollPositionByResize),\n ];\n return () => {\n unsubscribe.forEach((fn) => fn());\n };\n }, [scrollState]);\n\n useEffect(() => {\n onReadyRef.current?.(getDisableState(scrollState));\n return initScrollHandlers();\n }, [initScrollHandlers, scrollState]);\n\n const springScrollPosition = useSpring(scrollState.scrollPosition, {\n stiffness: 1800,\n damping: 75,\n mass: 0.5,\n });\n\n return (\n <GalleryContext.Provider\n value={{\n registerItem,\n removeItem,\n }}\n >\n <div\n ref={containerRef}\n className={styles.scrollableContainer}\n data-qa=\"scrollable-container__overflow-container\"\n >\n <motion.div\n ref={positionContainerRef}\n data-qa=\"scrollable-container__position-container\"\n className={styles.positionContainer}\n style={{ x: isTouch ? scrollState.scrollPosition : springScrollPosition }}\n >\n {children}\n </motion.div>\n </div>\n </GalleryContext.Provider>\n );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,cAAc,GAAG,aAAa,CAAwB;AACxD,IAAA,YAAY,EAAE,MAAM,IAAI;AACxB,IAAA,UAAU,EAAE,MAAM,IAAI;AACzB,CAAA,CAAC,CAAC;AAEU,MAAA,iBAAiB,GAAG,MAA6B,UAAU,CAAC,cAAc,EAAE;
|
|
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\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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"}
|
package/ScrollableItem.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { useRef, useLayoutEffect } from 'react';
|
|
3
|
+
import { useRef, useLayoutEffect, useCallback } from 'react';
|
|
4
4
|
import { useGalleryContext } from './ScrollableContainerGallery.js';
|
|
5
5
|
import { useScrollableControls } from './useScrollableControls.js';
|
|
6
6
|
import 'motion/react';
|
|
@@ -13,9 +13,9 @@ import '@hh.ru/magritte-internal-custom-scroll';
|
|
|
13
13
|
import './types.js';
|
|
14
14
|
import './utils.js';
|
|
15
15
|
import '@hh.ru/magritte-ui-breakpoint';
|
|
16
|
-
import './scrollableContainer-
|
|
16
|
+
import './scrollableContainer-D9wH7sLu.js';
|
|
17
17
|
|
|
18
|
-
const ScrollableItem = ({ children, ...props }) => {
|
|
18
|
+
const ScrollableItem = ({ children, scrollToItemOnFocus, ...props }) => {
|
|
19
19
|
const ref = useRef(null);
|
|
20
20
|
const { registerItem, removeItem } = useGalleryContext();
|
|
21
21
|
const { scrollToItem } = useScrollableControls();
|
|
@@ -25,7 +25,8 @@ const ScrollableItem = ({ children, ...props }) => {
|
|
|
25
25
|
removeItem(ref);
|
|
26
26
|
};
|
|
27
27
|
}, [registerItem, removeItem]);
|
|
28
|
-
|
|
28
|
+
const handleSelectItem = useCallback(() => scrollToItem(ref), [scrollToItem]);
|
|
29
|
+
return (jsx("div", { ref: ref, role: "listitem", ...props, onClick: handleSelectItem, onFocus: scrollToItemOnFocus ? handleSelectItem : undefined, children: children }));
|
|
29
30
|
};
|
|
30
31
|
|
|
31
32
|
export { ScrollableItem };
|
package/ScrollableItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollableItem.js","sources":["../src/ScrollableItem.tsx"],"sourcesContent":["import { useRef, useLayoutEffect, type FC } from 'react';\n\nimport { useGalleryContext } from '@hh.ru/magritte-ui-scrollable-container/ScrollableContainerGallery';\nimport type { ScrollableItemProps } from '@hh.ru/magritte-ui-scrollable-container/types';\nimport { useScrollableControls } from '@hh.ru/magritte-ui-scrollable-container/useScrollableControls';\n\nexport const ScrollableItem: FC<ScrollableItemProps> = ({ children, ...props }) => {\n const ref = useRef<HTMLDivElement>(null);\n const { registerItem, removeItem } = useGalleryContext();\n const { scrollToItem } = useScrollableControls();\n\n useLayoutEffect(() => {\n registerItem(ref);\n return () => {\n removeItem(ref);\n };\n }, [registerItem, removeItem]);\n\n return (\n <div
|
|
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;;;;"}
|
package/index.css
CHANGED
|
@@ -1,46 +1,51 @@
|
|
|
1
|
-
.magritte-scroll-wrapper___vTdZl_6-
|
|
1
|
+
.magritte-scroll-wrapper___vTdZl_6-1-1{
|
|
2
2
|
position:relative;
|
|
3
3
|
touch-action:pan-y pinch-zoom;
|
|
4
4
|
}
|
|
5
|
-
.magritte-scrollable-container___AKIUp_6-
|
|
5
|
+
.magritte-scrollable-container___AKIUp_6-1-1{
|
|
6
6
|
display:block;
|
|
7
7
|
overflow-x:hidden;
|
|
8
8
|
overflow-x:clip;
|
|
9
9
|
overflow-y:visible;
|
|
10
10
|
width:100%;
|
|
11
11
|
min-height:40px;
|
|
12
|
+
padding-top:4px;
|
|
13
|
+
padding-bottom:4px;
|
|
14
|
+
margin-top:-4px;
|
|
15
|
+
margin-bottom:-4px;
|
|
12
16
|
padding-left:var(--magritte-ui-scrollabe-container-pl, 4px);
|
|
13
17
|
padding-right:var(--magritte-ui-scrollabe-container-pr, 4px);
|
|
14
18
|
margin-left:var(--magritte-ui-scrollabe-container-ml, -4px);
|
|
15
19
|
margin-right:var(--magritte-ui-scrollabe-container-mr, -4px);
|
|
16
20
|
}
|
|
17
|
-
.magritte-scroll-buttons-container___ZeI5a_6-
|
|
21
|
+
.magritte-scroll-buttons-container___ZeI5a_6-1-1{
|
|
18
22
|
position:relative;
|
|
19
23
|
}
|
|
20
|
-
.magritte-scroll-buttons___0SjoR_6-
|
|
24
|
+
.magritte-scroll-buttons___0SjoR_6-1-1{
|
|
21
25
|
--right-fade-mask:linear-gradient(90deg, #000 0, #000 calc(100% - 100.50399999999999px), transparent calc(100% - 36px));
|
|
22
26
|
--left-fade-mask:linear-gradient(90deg, transparent 0, transparent 36px, #000 100.504px);
|
|
23
27
|
--both-sides-mask:linear-gradient(90deg, transparent 0, transparent 36px, #000 100.504px, #000 calc(100% - 100.50399999999999px), transparent calc(100% - 36px));
|
|
24
28
|
-webkit-mask:'none';
|
|
25
29
|
mask:'none';
|
|
26
30
|
}
|
|
27
|
-
.magritte-scroll-button___4GQu3_6-
|
|
31
|
+
.magritte-scroll-button___4GQu3_6-1-1{
|
|
28
32
|
display:none;
|
|
29
33
|
position:absolute;
|
|
30
34
|
top:50%;
|
|
31
35
|
transform:translateY(-50%);
|
|
32
36
|
}
|
|
33
|
-
.magritte-scroll-button-left___UueEY_6-
|
|
37
|
+
.magritte-scroll-button-left___UueEY_6-1-1{
|
|
38
|
+
z-index:1;
|
|
34
39
|
left:0;
|
|
35
40
|
}
|
|
36
|
-
.magritte-scroll-button-right___wZOn-_6-
|
|
41
|
+
.magritte-scroll-button-right___wZOn-_6-1-1{
|
|
37
42
|
right:0;
|
|
38
43
|
}
|
|
39
|
-
.magritte-position-container___1A4Bv_6-
|
|
44
|
+
.magritte-position-container___1A4Bv_6-1-1{
|
|
40
45
|
box-sizing:border-box;
|
|
41
46
|
width:100%;
|
|
42
47
|
}
|
|
43
|
-
.magritte-dot-container___ahtlG_6-
|
|
48
|
+
.magritte-dot-container___ahtlG_6-1-1{
|
|
44
49
|
display:flex;
|
|
45
50
|
justify-content:center;
|
|
46
51
|
}
|
package/index.js
CHANGED
|
@@ -10,11 +10,12 @@ import '@hh.ru/magritte-ui-breakpoint';
|
|
|
10
10
|
import './ScrollableContainerButton.js';
|
|
11
11
|
import './ScrollableContainerDefaultLayout.js';
|
|
12
12
|
import 'motion/react';
|
|
13
|
+
import '@hh.ru/magritte-common-use-translation';
|
|
13
14
|
import '@hh.ru/magritte-ui-icon/icon';
|
|
14
15
|
import './utils.js';
|
|
15
16
|
import '@hh.ru/magritte-internal-custom-scroll';
|
|
16
17
|
import './types.js';
|
|
17
|
-
import './scrollableContainer-
|
|
18
|
+
import './scrollableContainer-D9wH7sLu.js';
|
|
18
19
|
import './ScrollableContainerDotPages.js';
|
|
19
20
|
import '@hh.ru/magritte-internal-custom-scroll/initScrollHandlers';
|
|
20
21
|
import '@hh.ru/magritte-ui-dot-pages';
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/index.mock.js
CHANGED
|
@@ -13,7 +13,7 @@ import 'react/jsx-runtime';
|
|
|
13
13
|
import '@hh.ru/magritte-internal-custom-scroll/initScrollHandlers';
|
|
14
14
|
import './useScrollContainer.js';
|
|
15
15
|
import '@hh.ru/magritte-common-func-utils';
|
|
16
|
-
import './scrollableContainer-
|
|
16
|
+
import './scrollableContainer-D9wH7sLu.js';
|
|
17
17
|
import './ObservableValue.js';
|
|
18
18
|
|
|
19
19
|
const staticProps = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-scrollable-container",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.1.1",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -20,11 +20,12 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@hh.ru/magritte-common-func-utils": "1.3.14",
|
|
23
|
+
"@hh.ru/magritte-common-use-translation": "2.2.0",
|
|
23
24
|
"@hh.ru/magritte-design-tokens": "24.3.0",
|
|
24
25
|
"@hh.ru/magritte-internal-custom-scroll": "2.1.0",
|
|
25
26
|
"@hh.ru/magritte-ui-breakpoint": "6.0.6",
|
|
26
27
|
"@hh.ru/magritte-ui-dot-pages": "4.0.16",
|
|
27
|
-
"@hh.ru/magritte-ui-icon": "13.
|
|
28
|
+
"@hh.ru/magritte-ui-icon": "13.10.0",
|
|
28
29
|
"@hh.ru/magritte-ui-mock-component": "1.1.6",
|
|
29
30
|
"@hh.ru/magritte-ui-spacing": "2.1.9"
|
|
30
31
|
},
|
|
@@ -36,5 +37,5 @@
|
|
|
36
37
|
"publishConfig": {
|
|
37
38
|
"access": "public"
|
|
38
39
|
},
|
|
39
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "c9930c21240dac1610236be666e8d0c45c60f4bc"
|
|
40
41
|
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
var styles = {"scroll-wrapper":"magritte-scroll-wrapper___vTdZl_6-1-1","scrollWrapper":"magritte-scroll-wrapper___vTdZl_6-1-1","scrollable-container":"magritte-scrollable-container___AKIUp_6-1-1","scrollableContainer":"magritte-scrollable-container___AKIUp_6-1-1","scroll-buttons-container":"magritte-scroll-buttons-container___ZeI5a_6-1-1","scrollButtonsContainer":"magritte-scroll-buttons-container___ZeI5a_6-1-1","scroll-buttons":"magritte-scroll-buttons___0SjoR_6-1-1","scrollButtons":"magritte-scroll-buttons___0SjoR_6-1-1","scroll-button":"magritte-scroll-button___4GQu3_6-1-1","scrollButton":"magritte-scroll-button___4GQu3_6-1-1","scroll-button-left":"magritte-scroll-button-left___UueEY_6-1-1","scrollButtonLeft":"magritte-scroll-button-left___UueEY_6-1-1","scroll-button-right":"magritte-scroll-button-right___wZOn-_6-1-1","scrollButtonRight":"magritte-scroll-button-right___wZOn-_6-1-1","position-container":"magritte-position-container___1A4Bv_6-1-1","positionContainer":"magritte-position-container___1A4Bv_6-1-1","dot-container":"magritte-dot-container___ahtlG_6-1-1","dotContainer":"magritte-dot-container___ahtlG_6-1-1"};
|
|
3
|
+
|
|
4
|
+
export { styles as s };
|
|
5
|
+
//# sourceMappingURL=scrollableContainer-D9wH7sLu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scrollableContainer-D9wH7sLu.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/types.d.ts
CHANGED
|
@@ -106,8 +106,10 @@ export type ScrollableContainerProps = SpacingCorrectionProps & {
|
|
|
106
106
|
export interface ScrollableItemProps extends HTMLAttributes<HTMLDivElement> {
|
|
107
107
|
/** Элемент галереи */
|
|
108
108
|
children: ReactNode;
|
|
109
|
+
/** Нужно ли скролить к элементу при фокусе */
|
|
110
|
+
scrollToItemOnFocus?: boolean;
|
|
109
111
|
}
|
|
110
|
-
export interface ScrollableContainerGalleryProps {
|
|
112
|
+
export interface ScrollableContainerGalleryProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onScroll'> {
|
|
111
113
|
/** Колбэк при прокрутке контейнера */
|
|
112
114
|
onScroll?: (scrollInfo: ScrollDisableState) => void;
|
|
113
115
|
/** Колбэк при инициализации контейнера */
|
|
@@ -132,4 +134,12 @@ export interface ScrollableContainerButtonProps {
|
|
|
132
134
|
export interface ScrollableContainerDefaultLayoutProps {
|
|
133
135
|
/** Контент ScrollableContainerGallery */
|
|
134
136
|
children: ReactNode;
|
|
137
|
+
/** aria-label кнопки налево */
|
|
138
|
+
leftButtonAriaLabel?: string;
|
|
139
|
+
/** aria-label кнопки направо */
|
|
140
|
+
rightButtonAriaLabel?: string;
|
|
141
|
+
/** aria-controls кнопки налево */
|
|
142
|
+
leftAriaControls?: string;
|
|
143
|
+
/** aria-controls кнопки направо */
|
|
144
|
+
rightAriaControls?: string;
|
|
135
145
|
}
|
package/types.js.map
CHANGED
|
@@ -1 +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 ItemWithOffset {\n [OFFSET_ATTR]: { left: number; right: number };\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\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\nexport interface ScrollableContainerGalleryProps {\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 interface ScrollableContainerDefaultLayoutProps {\n /** Контент ScrollableContainerGallery */\n children: ReactNode;\n}\n"],"names":[],"mappings":"MAKa,WAAW,GAAG,MAAM,CAAC,oBAAoB;;;;"}
|
|
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 ItemWithOffset {\n [OFFSET_ATTR]: { left: number; right: number };\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\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 interface ScrollableContainerDefaultLayoutProps {\n /** Контент ScrollableContainerGallery */\n children: ReactNode;\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;;;;"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import './index.css';
|
|
2
|
-
var styles = {"scroll-wrapper":"magritte-scroll-wrapper___vTdZl_6-0-2","scrollWrapper":"magritte-scroll-wrapper___vTdZl_6-0-2","scrollable-container":"magritte-scrollable-container___AKIUp_6-0-2","scrollableContainer":"magritte-scrollable-container___AKIUp_6-0-2","scroll-buttons-container":"magritte-scroll-buttons-container___ZeI5a_6-0-2","scrollButtonsContainer":"magritte-scroll-buttons-container___ZeI5a_6-0-2","scroll-buttons":"magritte-scroll-buttons___0SjoR_6-0-2","scrollButtons":"magritte-scroll-buttons___0SjoR_6-0-2","scroll-button":"magritte-scroll-button___4GQu3_6-0-2","scrollButton":"magritte-scroll-button___4GQu3_6-0-2","scroll-button-left":"magritte-scroll-button-left___UueEY_6-0-2","scrollButtonLeft":"magritte-scroll-button-left___UueEY_6-0-2","scroll-button-right":"magritte-scroll-button-right___wZOn-_6-0-2","scrollButtonRight":"magritte-scroll-button-right___wZOn-_6-0-2","position-container":"magritte-position-container___1A4Bv_6-0-2","positionContainer":"magritte-position-container___1A4Bv_6-0-2","dot-container":"magritte-dot-container___ahtlG_6-0-2","dotContainer":"magritte-dot-container___ahtlG_6-0-2"};
|
|
3
|
-
|
|
4
|
-
export { styles as s };
|
|
5
|
-
//# sourceMappingURL=scrollableContainer-CORqdDaF.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"scrollableContainer-CORqdDaF.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|