npm - @vkontakte/vkui - Versions diffs - 8.0.2 → 8.1.0 - Mend

@vkontakte/vkui 8.0.2 → 8.1.0

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.

Files changed (1384) hide show

package/dist/cssm/components/SimpleGrid/SimpleGrid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n calculateGap,\n columnGapClassNames,\n type GapsProp,\n resolveLayoutProps,\n rowGapClassNames,\n} from '../../lib/layouts';\nimport type { LayoutProps } from '../../lib/layouts/types';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../RootComponent/RootComponent';\nimport styles from './SimpleGrid.module.css';\n\nconst marginClassNames = {\n 'auto': styles.marginAuto,\n 'auto-inline': styles.marginAutoInline,\n 'auto-block': styles.marginAutoBlock,\n};\n\nconst alignClassNames = {\n start: styles.alignStart,\n end: styles.alignEnd,\n center: styles.alignCenter,\n stretch: styles.alignStretch,\n baseline: styles.alignBaseline,\n};\n\nconst displayClassNames = {\n 'none': styles.displayNone,\n 'inline-grid': styles.displayInlineGrid,\n};\n\nexport interface SimpleGridProps extends RootComponentProps<HTMLElement>, LayoutProps {\n /*\n Количество колонок.\n /\n columns?: number;\n /\n Отступы между элементами.\n * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.\n /\n gap?: GapsProp;\n /\n Управляет отступами вокруг контейнера\n * Значение `none` позволяет отключить отступы\n * Значение `auto` позволяет задать платформенные отступы\n * Значение `auto-inline` позволяет задать платформенные inline-отступы\n * Значение `auto-block` позволяет задать платформенные block-отступы.\n /\n margin?: 'none' \| 'auto' \| 'auto-inline' \| 'auto-block';\n /\n Вместо задания количества колонок, можно указать минимальную ширину элементов.\n /\n minColWidth?: number;\n /\n Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.\n /\n align?: 'start' \| 'end' \| 'center' \| 'stretch' \| 'baseline';\n /\n Возможность задать css-свойство `display`.\n /\n display?: 'none' \| 'grid' \| 'inline-grid';\n}\n\n/\n @see https://vkui.io/components/simple-grid\n */\nexport const SimpleGrid = ({\n columns = 1,\n gap = 0,\n margin = 'none',\n minColWidth,\n align = 'stretch',\n display = 'grid',\n ...restProps\n}: SimpleGridProps) => {\n const resolvedProps = resolveLayoutProps(restProps);\n const style: CSSCustomProperties = {};\n const [rowGap, columnGap] = calculateGap(gap);\n if (typeof rowGap === 'number') {\n style['--vkui_internal--row_gap'] = `${rowGap}px`;\n }\n if (typeof columnGap === 'number') {\n style['--vkui_internal--column_gap'] = `${columnGap}px`;\n }\n style['--vkui_internal--grid_columns'] = `${columns}`;\n if (minColWidth) {\n style['--vkui_internal--min_col_width'] = `${minColWidth}px`;\n }\n\n return (\n <RootComponent\n baseClassName={classNames(\n styles.host,\n margin !== 'none' && marginClassNames[margin],\n alignClassNames[align],\n minColWidth && styles.withMinWidth,\n typeof columnGap === 'string' && columnGapClassNames[columnGap],\n typeof rowGap === 'string' && rowGapClassNames[rowGap],\n display !== 'grid' && displayClassNames[display],\n )}\n baseStyle={style}\n {...resolvedProps}\n />\n );\n};\n"],"names":["classNames","calculateGap","columnGapClassNames","resolveLayoutProps","rowGapClassNames","RootComponent","styles","marginClassNames","marginAuto","marginAutoInline","marginAutoBlock","alignClassNames","start","alignStart","end","alignEnd","center","alignCenter","stretch","alignStretch","baseline","alignBaseline","displayClassNames","displayNone","displayInlineGrid","SimpleGrid","columns","gap","margin","minColWidth","align","display","restProps","resolvedProps","style","rowGap","columnGap","baseClassName","host","withMinWidth","baseStyle"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAEnBC,kBAAkB,EAClBC,gBAAgB,QACX,6BAAoB;AAG3B,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,mBAAmB;IACvB,QAAQD,OAAOE,UAAU;IACzB,eAAeF,OAAOG,gBAAgB;IACtC,cAAcH,OAAOI,eAAe;AACtC;AAEA,MAAMC,kBAAkB;IACtBC,OAAON,OAAOO,UAAU;IACxBC,KAAKR,OAAOS,QAAQ;IACpBC,QAAQV,OAAOW,WAAW;IAC1BC,SAASZ,OAAOa,YAAY;IAC5BC,UAAUd,OAAOe,aAAa;AAChC;AAEA,MAAMC,oBAAoB;IACxB,QAAQhB,OAAOiB,WAAW;IAC1B,eAAejB,OAAOkB,iBAAiB;AACzC;AAmCA;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,UAAU,CAAC,EACXC,MAAM,CAAC,EACPC,SAAS,MAAM,EACfC,WAAW,EACXC,QAAQ,SAAS,EACjBC,UAAU,MAAM,EAChB,GAAGC,WACa;IAChB,MAAMC,gBAAgB9B,mBAAmB6B;IACzC,MAAME,QAA6B,CAAC;IACpC,MAAM,CAACC,QAAQC,UAAU,GAAGnC,aAAa0B;IACzC,IAAI,OAAOQ,WAAW,UAAU;QAC9BD,KAAK,CAAC,2BAA2B,GAAG,GAAGC,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;QACjCF,KAAK,CAAC,8BAA8B,GAAG,GAAGE,UAAU,EAAE,CAAC;IACzD;IACAF,KAAK,CAAC,gCAAgC,GAAG,GAAGR,SAAS;IACrD,IAAIG,aAAa;QACfK,KAAK,CAAC,iCAAiC,GAAG,GAAGL,YAAY,EAAE,CAAC;IAC9D;IAEA,qBACE,KAACxB;QACCgC,eAAerC,WACbM,OAAOgC,IAAI,EACXV,WAAW,UAAUrB,gBAAgB,CAACqB,OAAO,EAC7CjB,eAAe,CAACmB,MAAM,EACtBD,eAAevB,OAAOiC,YAAY,EAClC,OAAOH,cAAc,YAAYlC,mBAAmB,CAACkC,UAAU,EAC/D,OAAOD,WAAW,YAAY/B,gBAAgB,CAAC+B,OAAO,EACtDJ,YAAY,UAAUT,iBAAiB,CAACS,QAAQ;QAElDS,WAAWN;QACV,GAAGD,aAAa;;AAGvB,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n calculateGap,\n columnGapClassNames,\n type GapsProp,\n resolveLayoutProps,\n rowGapClassNames,\n} from '../../lib/layouts';\nimport type { LayoutProps } from '../../lib/layouts/types';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../RootComponent/RootComponent';\nimport styles from './SimpleGrid.module.css';\n\nconst marginClassNames = {\n 'auto': styles.marginAuto,\n 'auto-inline': styles.marginAutoInline,\n 'auto-block': styles.marginAutoBlock,\n};\n\nconst alignClassNames = {\n start: styles.alignStart,\n end: styles.alignEnd,\n center: styles.alignCenter,\n stretch: styles.alignStretch,\n baseline: styles.alignBaseline,\n};\n\nconst displayClassNames = {\n 'none': styles.displayNone,\n 'inline-grid': styles.displayInlineGrid,\n};\n\nexport interface SimpleGridProps extends RootComponentProps<HTMLElement>, LayoutProps {\n /*\n Количество колонок.\n /\n columns?: number \| undefined;\n /\n Отступы между элементами.\n * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.\n /\n gap?: GapsProp \| undefined;\n /\n Управляет отступами вокруг контейнера\n * Значение `none` позволяет отключить отступы\n * Значение `auto` позволяет задать платформенные отступы\n * Значение `auto-inline` позволяет задать платформенные inline-отступы\n * Значение `auto-block` позволяет задать платформенные block-отступы.\n /\n margin?: 'none' \| 'auto' \| 'auto-inline' \| 'auto-block' \| undefined;\n /\n Вместо задания количества колонок, можно указать минимальную ширину элементов.\n /\n minColWidth?: number \| undefined;\n /\n Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.\n /\n align?: 'start' \| 'end' \| 'center' \| 'stretch' \| 'baseline' \| undefined;\n /\n Возможность задать css-свойство `display`.\n /\n display?: 'none' \| 'grid' \| 'inline-grid' \| undefined;\n}\n\n/\n @see https://vkui.io/components/simple-grid\n */\nexport const SimpleGrid = ({\n columns = 1,\n gap = 0,\n margin = 'none',\n minColWidth,\n align = 'stretch',\n display = 'grid',\n ...restProps\n}: SimpleGridProps) => {\n const resolvedProps = resolveLayoutProps(restProps);\n const style: CSSCustomProperties = {};\n const [rowGap, columnGap] = calculateGap(gap);\n if (typeof rowGap === 'number') {\n style['--vkui_internal--row_gap'] = `${rowGap}px`;\n }\n if (typeof columnGap === 'number') {\n style['--vkui_internal--column_gap'] = `${columnGap}px`;\n }\n style['--vkui_internal--grid_columns'] = `${columns}`;\n if (minColWidth) {\n style['--vkui_internal--min_col_width'] = `${minColWidth}px`;\n }\n\n return (\n <RootComponent\n baseClassName={classNames(\n styles.host,\n margin !== 'none' && marginClassNames[margin],\n alignClassNames[align],\n minColWidth && styles.withMinWidth,\n typeof columnGap === 'string' && columnGapClassNames[columnGap],\n typeof rowGap === 'string' && rowGapClassNames[rowGap],\n display !== 'grid' && displayClassNames[display],\n )}\n baseStyle={style}\n {...resolvedProps}\n />\n );\n};\n"],"names":["classNames","calculateGap","columnGapClassNames","resolveLayoutProps","rowGapClassNames","RootComponent","styles","marginClassNames","marginAuto","marginAutoInline","marginAutoBlock","alignClassNames","start","alignStart","end","alignEnd","center","alignCenter","stretch","alignStretch","baseline","alignBaseline","displayClassNames","displayNone","displayInlineGrid","SimpleGrid","columns","gap","margin","minColWidth","align","display","restProps","resolvedProps","style","rowGap","columnGap","baseClassName","host","withMinWidth","baseStyle"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAEnBC,kBAAkB,EAClBC,gBAAgB,QACX,6BAAoB;AAG3B,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,mBAAmB;IACvB,QAAQD,OAAOE,UAAU;IACzB,eAAeF,OAAOG,gBAAgB;IACtC,cAAcH,OAAOI,eAAe;AACtC;AAEA,MAAMC,kBAAkB;IACtBC,OAAON,OAAOO,UAAU;IACxBC,KAAKR,OAAOS,QAAQ;IACpBC,QAAQV,OAAOW,WAAW;IAC1BC,SAASZ,OAAOa,YAAY;IAC5BC,UAAUd,OAAOe,aAAa;AAChC;AAEA,MAAMC,oBAAoB;IACxB,QAAQhB,OAAOiB,WAAW;IAC1B,eAAejB,OAAOkB,iBAAiB;AACzC;AAmCA;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,UAAU,CAAC,EACXC,MAAM,CAAC,EACPC,SAAS,MAAM,EACfC,WAAW,EACXC,QAAQ,SAAS,EACjBC,UAAU,MAAM,EAChB,GAAGC,WACa;IAChB,MAAMC,gBAAgB9B,mBAAmB6B;IACzC,MAAME,QAA6B,CAAC;IACpC,MAAM,CAACC,QAAQC,UAAU,GAAGnC,aAAa0B;IACzC,IAAI,OAAOQ,WAAW,UAAU;QAC9BD,KAAK,CAAC,2BAA2B,GAAG,GAAGC,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;QACjCF,KAAK,CAAC,8BAA8B,GAAG,GAAGE,UAAU,EAAE,CAAC;IACzD;IACAF,KAAK,CAAC,gCAAgC,GAAG,GAAGR,SAAS;IACrD,IAAIG,aAAa;QACfK,KAAK,CAAC,iCAAiC,GAAG,GAAGL,YAAY,EAAE,CAAC;IAC9D;IAEA,qBACE,KAACxB;QACCgC,eAAerC,WACbM,OAAOgC,IAAI,EACXV,WAAW,UAAUrB,gBAAgB,CAACqB,OAAO,EAC7CjB,eAAe,CAACmB,MAAM,EACtBD,eAAevB,OAAOiC,YAAY,EAClC,OAAOH,cAAc,YAAYlC,mBAAmB,CAACkC,UAAU,EAC/D,OAAOD,WAAW,YAAY/B,gBAAgB,CAAC+B,OAAO,EACtDJ,YAAY,UAAUT,iBAAiB,CAACS,QAAQ;QAElDS,WAAWN;QACV,GAAGD,aAAa;;AAGvB,EAAE"}

package/dist/cssm/components/Skeleton/Skeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useStateWithPrev } from '../../hooks/useStateWithPrev';\nimport { millisecondsInSecond } from '../../lib/date';\nimport { useDOM } from '../../lib/dom';\nimport { animationVisibilityDelayStyles } from '../../styles/animationVisibilityDelay';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\nimport stylesDelay from '../../styles/animationVisibilityDelay.module.css';\n\nconst CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';\n\n/*\n Синхронизирует анимацию скелетонов с помощью временных отрезков.\n \n ## visibilitychange\n \n В синхронизацию не заложен механизм перехода на оптимизации браузеров при\n * переходе на другую вкладку, поскольку нет уверенности в реальности таких\n * кейсов со скелетонами. Если такой кейс принесут, необходимо обработать\n * событие `visibilitychange` используя функцию `syncAnimation`.\n \n Смотри https://developer.chrome.com/blog/page-lifecycle-api/.\n \n @param duration Длительность анимации в секундах.\n /\nfunction useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {\n const [isAnimationStarted, setIsAnimationStartedTrue, setIsAnimationStartedFalse] =\n useBooleanState();\n const timer = React.useRef<ReturnType<typeof setTimeout> \| undefined>(undefined);\n\n const syncAnimation = React.useCallback(() => {\n clearTimeout(timer.current);\n setIsAnimationStartedFalse();\n\n const durationInMilliseconds = duration millisecondsInSecond;\n const delay = durationInMilliseconds - (performance.now() % durationInMilliseconds);\n\n timer.current = setTimeout(setIsAnimationStartedTrue, delay);\n\n return () => clearTimeout(timer.current);\n }, [duration, setIsAnimationStartedFalse, setIsAnimationStartedTrue]);\n\n React.useEffect(() => {\n if (disableAnimation) {\n setIsAnimationStartedFalse();\n return;\n }\n\n if (isAnimationStarted) {\n return;\n }\n\n return syncAnimation();\n }, [disableAnimation, isAnimationStarted, setIsAnimationStartedFalse, syncAnimation]);\n\n return isAnimationStarted;\n}\n\n/*\n Вычисляет позицию скелетона.\n /\nfunction useSkeletonPosition(rootRef: React.RefObject<HTMLElement \| null>) {\n const { document, window } = useDOM();\n const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] =\n useStateWithPrev('0');\n\n const updatePosition = React.useCallback(() => {\n const el = rootRef.current;\n if (!el \|\| !document) {\n return;\n }\n\n const value = -(el.getBoundingClientRect().left - document.body.getBoundingClientRect().left);\n const gradientValue = value === 0 ? '0' : `${value}px`;\n if (prevSkeletonGradientLeft !== gradientValue) {\n setSkeletonGradientLeft(gradientValue);\n }\n }, [document, prevSkeletonGradientLeft, rootRef, setSkeletonGradientLeft]);\n\n React.useEffect(updatePosition, [updatePosition]);\n useResizeObserver(window, updatePosition);\n\n return skeletonGradientLeft;\n}\n\nexport interface SkeletonProps\n extends HTMLAttributesWithRootRef<HTMLDivElement \| HTMLSpanElement>,\n Pick<\n React.CSSProperties,\n \| 'width'\n \| 'height'\n \| 'inlineSize'\n \| 'blockSize'\n \| 'maxWidth'\n \| 'maxInlineSize'\n \| 'borderRadius'\n \| 'margin'\n > {\n /\n Начальный цвет анимации.\n /\n colorFrom?: string;\n\n /\n Финальный цвет анимации.\n /\n colorTo?: string;\n\n /\n Выключает анимацию, в результате чего показывается только один цвет.\n /\n noAnimation?: boolean;\n\n /\n Длительность анимации в секундах.\n /\n duration?: number;\n\n /\n Задерживает отрисовку элемента на заданное количество миллисекунд.\n /\n visibilityDelay?: number;\n}\n\n/\n > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n \n @since 6.1.0\n \n @see https://vkui.io/components/skeleton\n \n /\nexport const Skeleton = ({\n width,\n height,\n inlineSize,\n blockSize,\n maxWidth,\n maxInlineSize,\n borderRadius,\n children,\n colorFrom,\n colorTo,\n noAnimation = false,\n duration,\n margin,\n getRootRef,\n visibilityDelay,\n ...restProps\n}: SkeletonProps): React.ReactNode => {\n const rootRef = useExternRef(getRootRef);\n\n const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);\n const skeletonGradientLeft = useSkeletonPosition(rootRef);\n\n const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n width,\n height,\n inlineSize,\n blockSize,\n maxWidth,\n maxInlineSize,\n borderRadius,\n margin,\n [CUSTOM_PROPERTY_GRADIENT_LEFT]: skeletonGradientLeft,\n };\n\n if (colorFrom) {\n skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;\n }\n\n if (colorTo) {\n skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;\n }\n\n if (Number.isFinite(duration)) {\n skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;\n }\n\n return (\n <RootComponent\n getRootRef={rootRef}\n Component=\"span\"\n baseClassName={classNames(\n styles.host,\n disableAnimation && styles.disableAnimation,\n visibilityDelay && stylesDelay.visibilityDelay,\n )}\n baseStyle={mergeStyle(skeletonStyle, animationVisibilityDelayStyles(visibilityDelay))}\n {...restProps}\n >\n {children \|\| <>&zwnj;</>}\n </RootComponent>\n );\n};\n"],"names":["React","classNames","mergeStyle","useBooleanState","useExternRef","useResizeObserver","useStateWithPrev","millisecondsInSecond","useDOM","animationVisibilityDelayStyles","RootComponent","styles","stylesDelay","CUSTOM_PROPERTY_GRADIENT_LEFT","useSkeletonSyncAnimation","disableAnimation","duration","isAnimationStarted","setIsAnimationStartedTrue","setIsAnimationStartedFalse","timer","useRef","undefined","syncAnimation","useCallback","clearTimeout","current","durationInMilliseconds","delay","performance","now","setTimeout","useEffect","useSkeletonPosition","rootRef","document","window","skeletonGradientLeft","prevSkeletonGradientLeft","setSkeletonGradientLeft","updatePosition","el","value","getBoundingClientRect","left","body","gradientValue","Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","children","colorFrom","colorTo","noAnimation","margin","getRootRef","visibilityDelay","restProps","skeletonStyle","Number","isFinite","Component","baseClassName","host","baseStyle"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useStateWithPrev } from '../../hooks/useStateWithPrev';\nimport { millisecondsInSecond } from '../../lib/date';\nimport { useDOM } from '../../lib/dom';\nimport { animationVisibilityDelayStyles } from '../../styles/animationVisibilityDelay';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\nimport stylesDelay from '../../styles/animationVisibilityDelay.module.css';\n\nconst CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';\n\n/*\n Синхронизирует анимацию скелетонов с помощью временных отрезков.\n \n ## visibilitychange\n \n В синхронизацию не заложен механизм перехода на оптимизации браузеров при\n * переходе на другую вкладку, поскольку нет уверенности в реальности таких\n * кейсов со скелетонами. Если такой кейс принесут, необходимо обработать\n * событие `visibilitychange` используя функцию `syncAnimation`.\n \n Смотри https://developer.chrome.com/blog/page-lifecycle-api/.\n \n @param duration Длительность анимации в секундах.\n /\nfunction useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {\n const [isAnimationStarted, setIsAnimationStartedTrue, setIsAnimationStartedFalse] =\n useBooleanState();\n const timer = React.useRef<ReturnType<typeof setTimeout> \| undefined>(undefined);\n\n const syncAnimation = React.useCallback(() => {\n clearTimeout(timer.current);\n setIsAnimationStartedFalse();\n\n const durationInMilliseconds = duration millisecondsInSecond;\n const delay = durationInMilliseconds - (performance.now() % durationInMilliseconds);\n\n timer.current = setTimeout(setIsAnimationStartedTrue, delay);\n\n return () => clearTimeout(timer.current);\n }, [duration, setIsAnimationStartedFalse, setIsAnimationStartedTrue]);\n\n React.useEffect(() => {\n if (disableAnimation) {\n setIsAnimationStartedFalse();\n return;\n }\n\n if (isAnimationStarted) {\n return;\n }\n\n return syncAnimation();\n }, [disableAnimation, isAnimationStarted, setIsAnimationStartedFalse, syncAnimation]);\n\n return isAnimationStarted;\n}\n\n/*\n Вычисляет позицию скелетона.\n /\nfunction useSkeletonPosition(rootRef: React.RefObject<HTMLElement \| null>) {\n const { document, window } = useDOM();\n const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] =\n useStateWithPrev('0');\n\n const updatePosition = React.useCallback(() => {\n const el = rootRef.current;\n if (!el \|\| !document) {\n return;\n }\n\n const value = -(el.getBoundingClientRect().left - document.body.getBoundingClientRect().left);\n const gradientValue = value === 0 ? '0' : `${value}px`;\n if (prevSkeletonGradientLeft !== gradientValue) {\n setSkeletonGradientLeft(gradientValue);\n }\n }, [document, prevSkeletonGradientLeft, rootRef, setSkeletonGradientLeft]);\n\n React.useEffect(updatePosition, [updatePosition]);\n useResizeObserver(window, updatePosition);\n\n return skeletonGradientLeft;\n}\n\nexport interface SkeletonProps\n extends HTMLAttributesWithRootRef<HTMLDivElement \| HTMLSpanElement>,\n Pick<\n React.CSSProperties,\n \| 'width'\n \| 'height'\n \| 'inlineSize'\n \| 'blockSize'\n \| 'maxWidth'\n \| 'maxInlineSize'\n \| 'borderRadius'\n \| 'margin'\n > {\n /\n Начальный цвет анимации.\n /\n colorFrom?: string \| undefined;\n\n /\n Финальный цвет анимации.\n /\n colorTo?: string \| undefined;\n\n /\n Выключает анимацию, в результате чего показывается только один цвет.\n /\n noAnimation?: boolean \| undefined;\n\n /\n Длительность анимации в секундах.\n /\n duration?: number \| undefined;\n\n /\n Задерживает отрисовку элемента на заданное количество миллисекунд.\n /\n visibilityDelay?: number \| undefined;\n}\n\n/\n > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n \n @since 6.1.0\n \n @see https://vkui.io/components/skeleton\n \n /\nexport const Skeleton = ({\n width,\n height,\n inlineSize,\n blockSize,\n maxWidth,\n maxInlineSize,\n borderRadius,\n children,\n colorFrom,\n colorTo,\n noAnimation = false,\n duration,\n margin,\n getRootRef,\n visibilityDelay,\n ...restProps\n}: SkeletonProps): React.ReactNode => {\n const rootRef = useExternRef(getRootRef);\n\n const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);\n const skeletonGradientLeft = useSkeletonPosition(rootRef);\n\n const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n width,\n height,\n inlineSize,\n blockSize,\n maxWidth,\n maxInlineSize,\n borderRadius,\n margin,\n [CUSTOM_PROPERTY_GRADIENT_LEFT]: skeletonGradientLeft,\n };\n\n if (colorFrom) {\n skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;\n }\n\n if (colorTo) {\n skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;\n }\n\n if (Number.isFinite(duration)) {\n skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;\n }\n\n return (\n <RootComponent\n getRootRef={rootRef}\n Component=\"span\"\n baseClassName={classNames(\n styles.host,\n disableAnimation && styles.disableAnimation,\n visibilityDelay && stylesDelay.visibilityDelay,\n )}\n baseStyle={mergeStyle(skeletonStyle, animationVisibilityDelayStyles(visibilityDelay))}\n {...restProps}\n >\n {children \|\| <>&zwnj;</>}\n </RootComponent>\n );\n};\n"],"names":["React","classNames","mergeStyle","useBooleanState","useExternRef","useResizeObserver","useStateWithPrev","millisecondsInSecond","useDOM","animationVisibilityDelayStyles","RootComponent","styles","stylesDelay","CUSTOM_PROPERTY_GRADIENT_LEFT","useSkeletonSyncAnimation","disableAnimation","duration","isAnimationStarted","setIsAnimationStartedTrue","setIsAnimationStartedFalse","timer","useRef","undefined","syncAnimation","useCallback","clearTimeout","current","durationInMilliseconds","delay","performance","now","setTimeout","useEffect","useSkeletonPosition","rootRef","document","window","skeletonGradientLeft","prevSkeletonGradientLeft","setSkeletonGradientLeft","updatePosition","el","value","getBoundingClientRect","left","body","gradientValue","Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","children","colorFrom","colorTo","noAnimation","margin","getRootRef","visibilityDelay","restProps","skeletonStyle","Number","isFinite","Component","baseClassName","host","baseStyle"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,iBAAiB,QAAQ,mCAAgC;AAClE,SAASC,gBAAgB,QAAQ,kCAA+B;AAChE,SAASC,oBAAoB,QAAQ,oBAAiB;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SAASC,8BAA8B,QAAQ,2CAAwC;AAEvF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAC3C,OAAOC,iBAAiB,mDAAmD;AAE3E,MAAMC,gCAAgC;AAEtC;;;;;;;;;;;;;CAaC,GACD,SAASC,yBAAyBC,gBAAyB,EAAEC,WAAW,GAAG;IACzE,MAAM,CAACC,oBAAoBC,2BAA2BC,2BAA2B,GAC/EhB;IACF,MAAMiB,QAAQpB,MAAMqB,MAAM,CAA4CC;IAEtE,MAAMC,gBAAgBvB,MAAMwB,WAAW,CAAC;QACtCC,aAAaL,MAAMM,OAAO;QAC1BP;QAEA,MAAMQ,yBAAyBX,WAAWT;QAC1C,MAAMqB,QAAQD,yBAA0BE,YAAYC,GAAG,KAAKH;QAE5DP,MAAMM,OAAO,GAAGK,WAAWb,2BAA2BU;QAEtD,OAAO,IAAMH,aAAaL,MAAMM,OAAO;IACzC,GAAG;QAACV;QAAUG;QAA4BD;KAA0B;IAEpElB,MAAMgC,SAAS,CAAC;QACd,IAAIjB,kBAAkB;YACpBI;YACA;QACF;QAEA,IAAIF,oBAAoB;YACtB;QACF;QAEA,OAAOM;IACT,GAAG;QAACR;QAAkBE;QAAoBE;QAA4BI;KAAc;IAEpF,OAAON;AACT;AAEA;;CAEC,GACD,SAASgB,oBAAoBC,OAA4C;IACvE,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAE,GAAG5B;IAC7B,MAAM,CAAC,CAAC6B,sBAAsBC,yBAAyB,EAAEC,wBAAwB,GAC/EjC,iBAAiB;IAEnB,MAAMkC,iBAAiBxC,MAAMwB,WAAW,CAAC;QACvC,MAAMiB,KAAKP,QAAQR,OAAO;QAC1B,IAAI,CAACe,MAAM,CAACN,UAAU;YACpB;QACF;QAEA,MAAMO,QAAQ,CAAED,CAAAA,GAAGE,qBAAqB,GAAGC,IAAI,GAAGT,SAASU,IAAI,CAACF,qBAAqB,GAAGC,IAAI,AAAD;QAC3F,MAAME,gBAAgBJ,UAAU,IAAI,MAAM,GAAGA,MAAM,EAAE,CAAC;QACtD,IAAIJ,6BAA6BQ,eAAe;YAC9CP,wBAAwBO;QAC1B;IACF,GAAG;QAACX;QAAUG;QAA0BJ;QAASK;KAAwB;IAEzEvC,MAAMgC,SAAS,CAACQ,gBAAgB;QAACA;KAAe;IAChDnC,kBAAkB+B,QAAQI;IAE1B,OAAOH;AACT;AAyCA;;;;;;;;;;;;;CAaC,GACD,OAAO,MAAMU,WAAW,CAAC,EACvBC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,aAAa,EACbC,YAAY,EACZC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,cAAc,KAAK,EACnB1C,QAAQ,EACR2C,MAAM,EACNC,UAAU,EACVC,eAAe,EACf,GAAGC,WACW;IACd,MAAM5B,UAAU9B,aAAawD;IAE7B,MAAM7C,mBAAmB,CAACD,yBAAyB4C,aAAa1C;IAChE,MAAMqB,uBAAuBJ,oBAAoBC;IAEjD,MAAM6B,gBAA2D;QAC/Df;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAK;QACA,CAAC9C,8BAA8B,EAAEwB;IACnC;IAEA,IAAImB,WAAW;QACbO,aAAa,CAAC,uCAAuC,GAAGP;IAC1D;IAEA,IAAIC,SAAS;QACXM,aAAa,CAAC,qCAAqC,GAAGN;IACxD;IAEA,IAAIO,OAAOC,QAAQ,CAACjD,WAAW;QAC7B+C,aAAa,CAAC,+CAA+C,GAAG,GAAG/C,SAAS,CAAC,CAAC;IAChF;IAEA,qBACE,KAACN;QACCkD,YAAY1B;QACZgC,WAAU;QACVC,eAAelE,WACbU,OAAOyD,IAAI,EACXrD,oBAAoBJ,OAAOI,gBAAgB,EAC3C8C,mBAAmBjD,YAAYiD,eAAe;QAEhDQ,WAAWnE,WAAW6D,eAAetD,+BAA+BoD;QACnE,GAAGC,SAAS;kBAEZP,0BAAY;sBAAE;;;AAGrB,EAAE"}

package/dist/cssm/components/Slider/Slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { type CustomTouchEvent, type CustomTouchEventHandler, Touch } from '../Touch/Touch';\nimport { SliderThumb } from './SliderThumb/SliderThumb';\nimport {\n extractSliderAriaAttributesFromRestProps,\n getDraggingTypeByTargetDataset,\n isMultipleValues,\n offsetToValue,\n snapDirection,\n toPercent,\n updateInternalStateValue,\n updateInternalStateValueByNativeChange,\n} from './helpers';\nimport type { InternalDraggingType, InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst densityClassNames = {\n none: styles.densityNone,\n compact: styles.densityCompact,\n};\n\nconst sizeClassNames = {\n l: styles.sizeL,\n m: styles.sizeM,\n s: styles.sizeS,\n};\n\nexport interface SliderBaseProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'value' \| 'defaultValue' \| 'onChange'> {\n /*\n Минимальное значение слайдера.\n /\n min?: number;\n /\n Максимальное значение слайдера.\n /\n max?: number;\n /\n Шаг изменения значения слайдера.\n /\n step?: number;\n /\n Блокировка взаимодействия с компонентом.\n /\n disabled?: boolean;\n /\n Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.\n \n > Перебивает `aria-label`.\n /\n getAriaLabel?: (index: number) => string;\n /\n В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.\n \n Полезно при использовании компонента как неконтролируемого.\n \n > Перебивает `aria-valuetext`.\n /\n getAriaValueText?: (value: number, index: number) => string;\n /\n Включает отображение всплывающей подсказки при взаимодействии с ползунком.\n /\n withTooltip?: boolean;\n /\n Размер ползунка.\n /\n size?: 's' \| 'm' \| 'l';\n /\n Передает атрибут `data-testid` для первого ползунка.\n /\n startThumbTestId?: string;\n /\n Передает атрибут `data-testid` для второго ползунка когда `multiple=true`.\n /\n endThumbTestId?: string;\n}\n\nexport interface SliderProps extends SliderBaseProps {\n /\n Флаг множественного выбора (должен быть false или не указан).\n /\n multiple?: false;\n /\n Текущее значение слайдера.\n /\n value?: number;\n /\n Значение слайдера по умолчанию.\n /\n defaultValue?: number;\n /\n Обработчик изменения значения слайдера.\n /\n onChange?: (value: number, event: CustomTouchEvent \| React.ChangeEvent) => void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n /\n Флаг множественного выбора (должен быть true).\n /\n multiple: true;\n /\n Текущие значения слайдера в виде массива [начальное, конечное].\n /\n value?: [number, number];\n /\n Значения слайдера по умолчанию в виде массива [начальное, конечное].\n /\n defaultValue?: [number, number];\n /\n Обработчик изменения значений слайдера.\n /\n onChange?: (value: [number, number], event: CustomTouchEvent \| React.ChangeEvent) => void;\n}\n\n/\n @see https://vkui.io/components/slider\n */\nexport const Slider = ({\n step = 1,\n min = 0,\n max = 100,\n value: valueProp,\n multiple: multipleProp,\n defaultValue = multipleProp ? [min, max] : min,\n disabled,\n className,\n getRootRef,\n getAriaLabel,\n getAriaValueText,\n startThumbTestId,\n endThumbTestId,\n onChange,\n withTooltip,\n size = 'l',\n style: styleProp,\n ...restProps\n}: SliderProps \| SliderMultipleProps): React.ReactNode => {\n const { density = 'none' } = useAdaptivity();\n const direction = useConfigDirection();\n const isRtl = direction === 'rtl';\n\n const isControlled = valueProp !== undefined;\n const [localValue, setValue] = React.useState(defaultValue);\n\n const value = React.useMemo<InternalValueState>(() => {\n const resolvedValue = isControlled ? valueProp : localValue;\n return Array.isArray(resolvedValue)\n ? [clamp(resolvedValue[0], min, max), clamp(resolvedValue[1], min, max)]\n : [clamp(resolvedValue, min, max), null];\n }, [isControlled, valueProp, localValue, min, max]);\n\n const [startValue, endValue] = value;\n const multiple = multipleProp && endValue !== null;\n const startValueInPercent = toPercent(startValue, min, max);\n const endReversedValueInPercent = multiple ? toPercent(endValue, min, max) : 0;\n const [activeThumb, setActiveThumb] = React.useState<InternalDraggingType \| null>(null);\n\n const gesture = React.useRef<InternalGestureRef>({\n dragging: null,\n startX: 0,\n containerWidth: 0,\n }).current;\n const thumbsContainerRef = useExternRef(getRootRef);\n const thumbStartInputRef = React.useRef<HTMLInputElement>(null);\n const thumbEndInputRef = React.useRef<HTMLInputElement>(null);\n\n const { ariaLabel, ariaValueText, ariaLabelledBy, ...restPropsWithoutAriaAttributes } =\n extractSliderAriaAttributesFromRestProps(restProps);\n\n const changeValue = (\n nextValue: InternalValueState,\n event: CustomTouchEvent \| React.ChangeEvent,\n ) => {\n if (disabled \|\| (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n return;\n }\n\n if (multipleProp) {\n if (isMultipleValues(nextValue)) {\n !isControlled && setValue(nextValue);\n onChange && onChange(nextValue, event);\n }\n } else {\n !isControlled && setValue(nextValue[0]);\n onChange && onChange(nextValue[0], event);\n }\n };\n\n const handlePointerStart: CustomTouchEventHandler = (event: CustomTouchEvent) => {\n if (!thumbsContainerRef.current) {\n return;\n }\n\n const { left: nextContainerX, width: nextContainerWidth } =\n thumbsContainerRef.current.getBoundingClientRect();\n\n // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.\n const foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);\n\n let nextStartX = event.startX - nextContainerX;\n if (isRtl) {\n nextStartX = nextContainerWidth - nextStartX;\n }\n const nextValue = offsetToValue(nextStartX, nextContainerWidth, min, max, step);\n const nextDragging = snapDirection(value, nextValue, foundDraggingType);\n\n gesture.dragging = nextDragging;\n gesture.containerWidth = nextContainerWidth;\n gesture.startX = nextStartX;\n\n const updatedInternalStateValue = updateInternalStateValue(\n value,\n nextValue,\n min,\n max,\n nextDragging,\n );\n\n const [nextStartValue, nextEndValue] = updatedInternalStateValue;\n if (\n thumbStartInputRef.current &&\n (foundDraggingType === 'start' \|\|\n (nextStartValue !== startValue && nextEndValue === endValue))\n ) {\n thumbStartInputRef.current.focus();\n event.originalEvent.preventDefault();\n } else if (\n thumbEndInputRef.current &&\n (foundDraggingType === 'end' \|\| (nextEndValue !== endValue && nextStartValue === startValue))\n ) {\n thumbEndInputRef.current.focus();\n event.originalEvent.preventDefault();\n }\n\n changeValue(updatedInternalStateValue, event);\n\n event.originalEvent.stopPropagation();\n setActiveThumb(gesture.dragging);\n };\n\n const handlePointerMove: CustomTouchEventHandler = (event: CustomTouchEvent) => {\n const { startX, containerWidth, dragging } = gesture;\n\n const { shiftX = 0 } = event;\n const nextStartX = startX + (isRtl ? -shiftX : shiftX);\n const nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);\n\n changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);\n\n event.originalEvent.stopPropagation();\n event.originalEvent.preventDefault();\n };\n\n const handlePointerEnd: CustomTouchEventHandler = (event) => {\n gesture.dragging = null;\n event.originalEvent.stopPropagation();\n setActiveThumb(null);\n };\n\n const handleChangeByNativeInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n changeValue(\n updateInternalStateValueByNativeChange(\n value,\n Number(event.target.value),\n getDraggingTypeByTargetDataset(event.target),\n ),\n event,\n );\n };\n\n const style: CSSCustomProperties = {\n '--vkui_internal--Slider_start_value': String(startValueInPercent),\n '--vkui_internal--Slider_end_value': String(endReversedValueInPercent),\n };\n\n return (\n <Touch\n data-value={multiple ? `${startValue},${endValue}` : startValue}\n {...restPropsWithoutAriaAttributes}\n className={classNames(\n styles.host,\n disabled && styles.disabled,\n density !== 'regular' && densityClassNames[density],\n sizeClassNames[size],\n multiple && styles.multiple,\n isRtl && styles.rtl,\n className,\n )}\n style={mergeStyle(styleProp, style)}\n getRootRef={getRootRef}\n onStart={disabled ? undefined : handlePointerStart}\n onMove={disabled ? undefined : handlePointerMove}\n onEnd={disabled ? undefined : handlePointerEnd}\n >\n <div className={styles.track} />\n <div className={styles.trackFill} />\n <div ref={thumbsContainerRef} className={styles.thumbs}>\n <SliderThumb\n data-type=\"start\"\n className={classNames(styles.thumb, styles.thumbStart)}\n style={{\n // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.\n zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,\n }}\n withTooltip={withTooltip}\n inputProps={{\n 'data-type': 'start',\n 'data-testid': startThumbTestId,\n 'ref': thumbStartInputRef,\n 'step': step,\n 'min': min,\n 'value': startValue,\n 'max': multiple ? endValue : max,\n 'disabled': disabled,\n 'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,\n 'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,\n 'aria-labelledby': ariaLabelledBy,\n 'onChange': handleChangeByNativeInput,\n }}\n isActive={activeThumb === 'start'}\n />\n {multiple && (\n <SliderThumb\n data-type=\"end\"\n className={classNames(styles.thumb, styles.thumbEnd)}\n withTooltip={withTooltip}\n inputProps={{\n 'data-type': 'end',\n 'data-testid': endThumbTestId,\n 'ref': thumbEndInputRef,\n 'step': step,\n 'min': startValue,\n 'value': endValue,\n 'max': max,\n 'disabled': disabled,\n 'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,\n 'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,\n 'aria-labelledby': ariaLabelledBy,\n 'onChange': handleChangeByNativeInput,\n }}\n isActive={activeThumb === 'end'}\n />\n )}\n </div>\n </Touch>\n );\n};\n"],"names":["React","classNames","clamp","mergeStyle","useAdaptivity","useConfigDirection","useExternRef","Touch","SliderThumb","extractSliderAriaAttributesFromRestProps","getDraggingTypeByTargetDataset","isMultipleValues","offsetToValue","snapDirection","toPercent","updateInternalStateValue","updateInternalStateValueByNativeChange","styles","densityClassNames","none","densityNone","compact","densityCompact","sizeClassNames","l","sizeL","m","sizeM","s","sizeS","Slider","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","startThumbTestId","endThumbTestId","onChange","withTooltip","size","style","styleProp","restProps","density","direction","isRtl","isControlled","undefined","localValue","setValue","useState","useMemo","resolvedValue","Array","isArray","startValue","endValue","startValueInPercent","endReversedValueInPercent","activeThumb","setActiveThumb","gesture","useRef","dragging","startX","containerWidth","current","thumbsContainerRef","thumbStartInputRef","thumbEndInputRef","ariaLabel","ariaValueText","ariaLabelledBy","restPropsWithoutAriaAttributes","changeValue","nextValue","event","handlePointerStart","left","nextContainerX","width","nextContainerWidth","getBoundingClientRect","foundDraggingType","originalEvent","target","nextStartX","nextDragging","updatedInternalStateValue","nextStartValue","nextEndValue","focus","preventDefault","stopPropagation","handlePointerMove","shiftX","handlePointerEnd","handleChangeByNativeInput","Number","String","data-value","host","rtl","onStart","onMove","onEnd","div","track","trackFill","ref","thumbs","data-type","thumb","thumbStart","zIndex","inputProps","isActive","thumbEnd"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { type CustomTouchEvent, type CustomTouchEventHandler, Touch } from '../Touch/Touch';\nimport { SliderThumb } from './SliderThumb/SliderThumb';\nimport {\n extractSliderAriaAttributesFromRestProps,\n getDraggingTypeByTargetDataset,\n isMultipleValues,\n offsetToValue,\n snapDirection,\n toPercent,\n updateInternalStateValue,\n updateInternalStateValueByNativeChange,\n} from './helpers';\nimport type { InternalDraggingType, InternalGestureRef, InternalValueState } from './types';\nimport styles from './Slider.module.css';\n\nconst densityClassNames = {\n none: styles.densityNone,\n compact: styles.densityCompact,\n};\n\nconst sizeClassNames = {\n l: styles.sizeL,\n m: styles.sizeM,\n s: styles.sizeS,\n};\n\nexport interface SliderBaseProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'value' \| 'defaultValue' \| 'onChange'> {\n /*\n Минимальное значение слайдера.\n /\n min?: number \| undefined;\n /\n Максимальное значение слайдера.\n /\n max?: number \| undefined;\n /\n Шаг изменения значения слайдера.\n /\n step?: number \| undefined;\n /\n Блокировка взаимодействия с компонентом.\n /\n disabled?: boolean \| undefined;\n /\n Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.\n \n > Перебивает `aria-label`.\n /\n getAriaLabel?: ((index: number) => string) \| undefined;\n /\n В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.\n \n Полезно при использовании компонента как неконтролируемого.\n \n > Перебивает `aria-valuetext`.\n /\n getAriaValueText?: ((value: number, index: number) => string) \| undefined;\n /\n Включает отображение всплывающей подсказки при взаимодействии с ползунком.\n /\n withTooltip?: boolean \| undefined;\n /\n Размер ползунка.\n /\n size?: 's' \| 'm' \| 'l' \| undefined;\n /\n Передает атрибут `data-testid` для первого ползунка.\n /\n startThumbTestId?: string \| undefined;\n /\n Передает атрибут `data-testid` для второго ползунка когда `multiple=true`.\n /\n endThumbTestId?: string \| undefined;\n}\n\nexport interface SliderProps extends SliderBaseProps {\n /\n Флаг множественного выбора (должен быть false или не указан).\n /\n multiple?: false \| undefined;\n /\n Текущее значение слайдера.\n /\n value?: number \| undefined;\n /\n Значение слайдера по умолчанию.\n /\n defaultValue?: number \| undefined;\n /\n Обработчик изменения значения слайдера.\n /\n onChange?: ((value: number, event: CustomTouchEvent \| React.ChangeEvent) => void) \| undefined;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n /\n Флаг множественного выбора (должен быть true).\n /\n multiple: true;\n /\n Текущие значения слайдера в виде массива [начальное, конечное].\n /\n value?: [number, number] \| undefined;\n /\n Значения слайдера по умолчанию в виде массива [начальное, конечное].\n /\n defaultValue?: [number, number] \| undefined;\n /\n Обработчик изменения значений слайдера.\n /\n onChange?:\n \| ((value: [number, number], event: CustomTouchEvent \| React.ChangeEvent) => void)\n \| undefined;\n}\n\n/\n @see https://vkui.io/components/slider\n */\nexport const Slider = ({\n step = 1,\n min = 0,\n max = 100,\n value: valueProp,\n multiple: multipleProp,\n defaultValue = multipleProp ? [min, max] : min,\n disabled,\n className,\n getRootRef,\n getAriaLabel,\n getAriaValueText,\n startThumbTestId,\n endThumbTestId,\n onChange,\n withTooltip,\n size = 'l',\n style: styleProp,\n ...restProps\n}: SliderProps \| SliderMultipleProps): React.ReactNode => {\n const { density = 'none' } = useAdaptivity();\n const direction = useConfigDirection();\n const isRtl = direction === 'rtl';\n\n const isControlled = valueProp !== undefined;\n const [localValue, setValue] = React.useState(defaultValue);\n\n const value = React.useMemo<InternalValueState>(() => {\n const resolvedValue = isControlled ? valueProp : localValue;\n return Array.isArray(resolvedValue)\n ? [clamp(resolvedValue[0], min, max), clamp(resolvedValue[1], min, max)]\n : [clamp(resolvedValue, min, max), null];\n }, [isControlled, valueProp, localValue, min, max]);\n\n const [startValue, endValue] = value;\n const multiple = multipleProp && endValue !== null;\n const startValueInPercent = toPercent(startValue, min, max);\n const endReversedValueInPercent = multiple ? toPercent(endValue, min, max) : 0;\n const [activeThumb, setActiveThumb] = React.useState<InternalDraggingType \| null>(null);\n\n const gesture = React.useRef<InternalGestureRef>({\n dragging: null,\n startX: 0,\n containerWidth: 0,\n }).current;\n const thumbsContainerRef = useExternRef(getRootRef);\n const thumbStartInputRef = React.useRef<HTMLInputElement>(null);\n const thumbEndInputRef = React.useRef<HTMLInputElement>(null);\n\n const { ariaLabel, ariaValueText, ariaLabelledBy, ...restPropsWithoutAriaAttributes } =\n extractSliderAriaAttributesFromRestProps(restProps);\n\n const changeValue = (\n nextValue: InternalValueState,\n event: CustomTouchEvent \| React.ChangeEvent,\n ) => {\n if (disabled \|\| (value[0] === nextValue[0] && value[1] === nextValue[1])) {\n return;\n }\n\n if (multipleProp) {\n if (isMultipleValues(nextValue)) {\n !isControlled && setValue(nextValue);\n onChange && onChange(nextValue, event);\n }\n } else {\n !isControlled && setValue(nextValue[0]);\n onChange && onChange(nextValue[0], event);\n }\n };\n\n const handlePointerStart: CustomTouchEventHandler = (event: CustomTouchEvent) => {\n if (!thumbsContainerRef.current) {\n return;\n }\n\n const { left: nextContainerX, width: nextContainerWidth } =\n thumbsContainerRef.current.getBoundingClientRect();\n\n // @ts-expect-error: TS2345 в VKUITouchEvent плохо описаны типы. `target` это просто `EventTarget`.\n const foundDraggingType = getDraggingTypeByTargetDataset(event.originalEvent.target);\n\n let nextStartX = event.startX - nextContainerX;\n if (isRtl) {\n nextStartX = nextContainerWidth - nextStartX;\n }\n const nextValue = offsetToValue(nextStartX, nextContainerWidth, min, max, step);\n const nextDragging = snapDirection(value, nextValue, foundDraggingType);\n\n gesture.dragging = nextDragging;\n gesture.containerWidth = nextContainerWidth;\n gesture.startX = nextStartX;\n\n const updatedInternalStateValue = updateInternalStateValue(\n value,\n nextValue,\n min,\n max,\n nextDragging,\n );\n\n const [nextStartValue, nextEndValue] = updatedInternalStateValue;\n if (\n thumbStartInputRef.current &&\n (foundDraggingType === 'start' \|\|\n (nextStartValue !== startValue && nextEndValue === endValue))\n ) {\n thumbStartInputRef.current.focus();\n event.originalEvent.preventDefault();\n } else if (\n thumbEndInputRef.current &&\n (foundDraggingType === 'end' \|\| (nextEndValue !== endValue && nextStartValue === startValue))\n ) {\n thumbEndInputRef.current.focus();\n event.originalEvent.preventDefault();\n }\n\n changeValue(updatedInternalStateValue, event);\n\n event.originalEvent.stopPropagation();\n setActiveThumb(gesture.dragging);\n };\n\n const handlePointerMove: CustomTouchEventHandler = (event: CustomTouchEvent) => {\n const { startX, containerWidth, dragging } = gesture;\n\n const { shiftX = 0 } = event;\n const nextStartX = startX + (isRtl ? -shiftX : shiftX);\n const nextValue = offsetToValue(nextStartX, containerWidth, min, max, step);\n\n changeValue(updateInternalStateValue(value, nextValue, min, max, dragging), event);\n\n event.originalEvent.stopPropagation();\n event.originalEvent.preventDefault();\n };\n\n const handlePointerEnd: CustomTouchEventHandler = (event) => {\n gesture.dragging = null;\n event.originalEvent.stopPropagation();\n setActiveThumb(null);\n };\n\n const handleChangeByNativeInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n changeValue(\n updateInternalStateValueByNativeChange(\n value,\n Number(event.target.value),\n getDraggingTypeByTargetDataset(event.target),\n ),\n event,\n );\n };\n\n const style: CSSCustomProperties = {\n '--vkui_internal--Slider_start_value': String(startValueInPercent),\n '--vkui_internal--Slider_end_value': String(endReversedValueInPercent),\n };\n\n return (\n <Touch\n data-value={multiple ? `${startValue},${endValue}` : startValue}\n {...restPropsWithoutAriaAttributes}\n className={classNames(\n styles.host,\n disabled && styles.disabled,\n density !== 'regular' && densityClassNames[density],\n sizeClassNames[size],\n multiple && styles.multiple,\n isRtl && styles.rtl,\n className,\n )}\n style={mergeStyle(styleProp, style)}\n getRootRef={getRootRef}\n onStart={disabled ? undefined : handlePointerStart}\n onMove={disabled ? undefined : handlePointerMove}\n onEnd={disabled ? undefined : handlePointerEnd}\n >\n <div className={styles.track} />\n <div className={styles.trackFill} />\n <div ref={thumbsContainerRef} className={styles.thumbs}>\n <SliderThumb\n data-type=\"start\"\n className={classNames(styles.thumb, styles.thumbStart)}\n style={{\n // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.\n zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,\n }}\n withTooltip={withTooltip}\n inputProps={{\n 'data-type': 'start',\n 'data-testid': startThumbTestId,\n 'ref': thumbStartInputRef,\n 'step': step,\n 'min': min,\n 'value': startValue,\n 'max': multiple ? endValue : max,\n 'disabled': disabled,\n 'aria-label': getAriaLabel ? getAriaLabel(0) : ariaLabel,\n 'aria-valuetext': getAriaValueText ? getAriaValueText(startValue, 0) : ariaValueText,\n 'aria-labelledby': ariaLabelledBy,\n 'onChange': handleChangeByNativeInput,\n }}\n isActive={activeThumb === 'start'}\n />\n {multiple && (\n <SliderThumb\n data-type=\"end\"\n className={classNames(styles.thumb, styles.thumbEnd)}\n withTooltip={withTooltip}\n inputProps={{\n 'data-type': 'end',\n 'data-testid': endThumbTestId,\n 'ref': thumbEndInputRef,\n 'step': step,\n 'min': startValue,\n 'value': endValue,\n 'max': max,\n 'disabled': disabled,\n 'aria-label': getAriaLabel ? getAriaLabel(1) : ariaLabel,\n 'aria-valuetext': getAriaValueText ? getAriaValueText(endValue, 1) : ariaValueText,\n 'aria-labelledby': ariaLabelledBy,\n 'onChange': handleChangeByNativeInput,\n }}\n isActive={activeThumb === 'end'}\n />\n )}\n </div>\n </Touch>\n );\n};\n"],"names":["React","classNames","clamp","mergeStyle","useAdaptivity","useConfigDirection","useExternRef","Touch","SliderThumb","extractSliderAriaAttributesFromRestProps","getDraggingTypeByTargetDataset","isMultipleValues","offsetToValue","snapDirection","toPercent","updateInternalStateValue","updateInternalStateValueByNativeChange","styles","densityClassNames","none","densityNone","compact","densityCompact","sizeClassNames","l","sizeL","m","sizeM","s","sizeS","Slider","step","min","max","value","valueProp","multiple","multipleProp","defaultValue","disabled","className","getRootRef","getAriaLabel","getAriaValueText","startThumbTestId","endThumbTestId","onChange","withTooltip","size","style","styleProp","restProps","density","direction","isRtl","isControlled","undefined","localValue","setValue","useState","useMemo","resolvedValue","Array","isArray","startValue","endValue","startValueInPercent","endReversedValueInPercent","activeThumb","setActiveThumb","gesture","useRef","dragging","startX","containerWidth","current","thumbsContainerRef","thumbStartInputRef","thumbEndInputRef","ariaLabel","ariaValueText","ariaLabelledBy","restPropsWithoutAriaAttributes","changeValue","nextValue","event","handlePointerStart","left","nextContainerX","width","nextContainerWidth","getBoundingClientRect","foundDraggingType","originalEvent","target","nextStartX","nextDragging","updatedInternalStateValue","nextStartValue","nextEndValue","focus","preventDefault","stopPropagation","handlePointerMove","shiftX","handlePointerEnd","handleChangeByNativeInput","Number","String","data-value","host","rtl","onStart","onMove","onEnd","div","track","trackFill","ref","thumbs","data-type","thumb","thumbStart","zIndex","inputProps","isActive","thumbEnd"],"mappings":"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"}

package/dist/cssm/components/Slider/SliderThumb/SliderThumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc /\n\nimport as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useBooleanState } from '../../../hooks/useBooleanState';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport {\n arrowMiddleware,\n convertFloatingDataToReactCSSProperties,\n flipMiddleware,\n offsetMiddleware,\n shiftMiddleware,\n useFloating,\n} from '../../../lib/floating';\nimport type { HasDataAttribute, HasRootRef } from '../../../types';\nimport { TooltipBase } from '../../TooltipBase/TooltipBase';\nimport styles from './SliderThumb.module.css';\n\ninterface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {\n className?: string;\n style?: React.CSSProperties;\n inputProps?: React.InputHTMLAttributes<HTMLInputElement> &\n React.RefAttributes<HTMLInputElement> &\n ~~HasDataAttribute~~;\n withTooltip?: boolean;\n isActive?: boolean;\n}\n\nexport const SliderThumb = ({\n className,\n getRootRef,\n inputProps,\n withTooltip,\n isActive,\n ...restProps\n}: SliderThumbProps): React.ReactNode => {\n const { focusVisible, onBlur, onFocus } = useFocusVisible();\n const focusVisibleClassNames = useFocusVisibleClassName({\n focusVisible,\n mode: styles.focusVisible,\n });\n const [arrowRef, setArrowRef] = React.useState<HTMLDivElement \| null>(null);\n\n const memoizedMiddlewares = React.useMemo(() => {\n return [\n offsetMiddleware({\n crossAxis: 0,\n mainAxis: 15,\n }),\n flipMiddleware(),\n shiftMiddleware({ padding: 8 }),\n arrowMiddleware({\n element: arrowRef,\n }),\n ];\n }, [arrowRef]);\n\n const {\n x: floatingDataX,\n y: floatingDataY,\n placement: resolvedPlacement,\n refs,\n strategy: floatingPositionStrategy,\n middlewareData: { arrow: arrowCoords },\n update: updateTooltipPosition,\n } = useFloating({\n placement: 'top',\n middleware: memoizedMiddlewares,\n });\n\n const [isHovered, setHoveredTrue, setHoveredFalse] = useBooleanState(false);\n\n const handleRootRef = useExternRef<HTMLSpanElement>(getRootRef, refs.setReference);\n\n const shouldShowTooltip = withTooltip && (focusVisible \|\| isHovered \|\| isActive);\n\n const inputValue = inputProps && inputProps.value;\n React.useEffect(\n function udpateTooltipPositionOnValueChange() {\n if (shouldShowTooltip && inputValue !== 'undefined') {\n updateTooltipPosition();\n }\n },\n [inputValue, updateTooltipPosition, shouldShowTooltip],\n );\n\n return (\n <React.Fragment>\n <span\n {...restProps}\n ref={handleRootRef}\n onMouseEnter={setHoveredTrue}\n onMouseLeave={setHoveredFalse}\n className={classNames(\n styles.host,\n focusVisibleClassNames,\n isActive && styles.active,\n isHovered && styles.hover,\n className,\n )}\n >\n <input\n {...inputProps}\n type=\"range\"\n className={styles.nativeInput}\n aria-orientation=\"horizontal\"\n onBlur={onBlur}\n onFocus={onFocus}\n />\n </span>\n {shouldShowTooltip && (\n <TooltipBase\n appearance=\"neutral\"\n getRootRef={refs.setFloating}\n style={convertFloatingDataToReactCSSProperties({\n strategy: floatingPositionStrategy,\n x: floatingDataX,\n y: floatingDataY,\n })}\n arrowProps={{\n coords: arrowCoords,\n placement: resolvedPlacement,\n getRootRef: setArrowRef,\n }}\n description={inputValue}\n />\n )}\n </React.Fragment>\n );\n};\n"],"names":["React","classNames","useBooleanState","useExternRef","useFocusVisible","useFocusVisibleClassName","arrowMiddleware","convertFloatingDataToReactCSSProperties","flipMiddleware","offsetMiddleware","shiftMiddleware","useFloating","TooltipBase","styles","SliderThumb","className","getRootRef","inputProps","withTooltip","isActive","restProps","focusVisible","onBlur","onFocus","focusVisibleClassNames","mode","arrowRef","setArrowRef","useState","memoizedMiddlewares","useMemo","crossAxis","mainAxis","padding","element","x","floatingDataX","y","floatingDataY","placement","resolvedPlacement","refs","strategy","floatingPositionStrategy","middlewareData","arrow","arrowCoords","update","updateTooltipPosition","middleware","isHovered","setHoveredTrue","setHoveredFalse","handleRootRef","setReference","shouldShowTooltip","inputValue","value","useEffect","udpateTooltipPositionOnValueChange","Fragment","span","ref","onMouseEnter","onMouseLeave","host","active","hover","input","type","nativeInput","aria-orientation","appearance","setFloating","style","arrowProps","coords","description"],"mappings":"AAAA;;AACA,sCAAsC,GAEtC,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AACnF,SACEC,eAAe,EACfC,uCAAuC,EACvCC,cAAc,EACdC,gBAAgB,EAChBC,eAAe,EACfC,WAAW,QACN,iCAAwB;AAE/B,SAASC,WAAW,QAAQ,mCAAgC;AAC5D,OAAOC,YAAY,2BAA2B;~~AAY9C~~,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,QAAQ,EACR,GAAGC,WACc;IACjB,MAAM,EAAEC,YAAY,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGnB;IAC1C,MAAMoB,yBAAyBnB,yBAAyB;QACtDgB;QACAI,MAAMZ,OAAOQ,YAAY;IAC3B;IACA,MAAM,CAACK,UAAUC,YAAY,GAAG3B,MAAM4B,QAAQ,CAAwB;IAEtE,MAAMC,sBAAsB7B,MAAM8B,OAAO,CAAC;QACxC,OAAO;YACLrB,iBAAiB;gBACfsB,WAAW;gBACXC,UAAU;YACZ;YACAxB;YACAE,gBAAgB;gBAAEuB,SAAS;YAAE;YAC7B3B,gBAAgB;gBACd4B,SAASR;YACX;SACD;IACH,GAAG;QAACA;KAAS;IAEb,MAAM,EACJS,GAAGC,aAAa,EAChBC,GAAGC,aAAa,EAChBC,WAAWC,iBAAiB,EAC5BC,IAAI,EACJC,UAAUC,wBAAwB,EAClCC,gBAAgB,EAAEC,OAAOC,WAAW,EAAE,EACtCC,QAAQC,qBAAqB,EAC9B,GAAGrC,YAAY;QACd4B,WAAW;QACXU,YAAYpB;IACd;IAEA,MAAM,CAACqB,WAAWC,gBAAgBC,gBAAgB,GAAGlD,gBAAgB;IAErE,MAAMmD,gBAAgBlD,aAA8Ba,YAAYyB,KAAKa,YAAY;IAEjF,MAAMC,oBAAoBrC,eAAgBG,CAAAA,gBAAgB6B,aAAa/B,QAAO;IAE9E,MAAMqC,aAAavC,cAAcA,WAAWwC,KAAK;IACjDzD,MAAM0D,SAAS,CACb,SAASC;QACP,IAAIJ,qBAAqBC,eAAe,aAAa;YACnDR;QACF;IACF,GACA;QAACQ;QAAYR;QAAuBO;KAAkB;IAGxD,qBACE,MAACvD,MAAM4D,QAAQ;;0BACb,KAACC;gBACE,GAAGzC,SAAS;gBACb0C,KAAKT;gBACLU,cAAcZ;gBACda,cAAcZ;gBACdrC,WAAWd,WACTY,OAAOoD,IAAI,EACXzC,wBACAL,YAAYN,OAAOqD,MAAM,EACzBhB,aAAarC,OAAOsD,KAAK,EACzBpD;0BAGF,cAAA,KAACqD;oBACE,GAAGnD,UAAU;oBACdoD,MAAK;oBACLtD,WAAWF,OAAOyD,WAAW;oBAC7BC,oBAAiB;oBACjBjD,QAAQA;oBACRC,SAASA;;;YAGZgC,mCACC,KAAC3C;gBACC4D,YAAW;gBACXxD,YAAYyB,KAAKgC,WAAW;gBAC5BC,OAAOnE,wCAAwC;oBAC7CmC,UAAUC;oBACVR,GAAGC;oBACHC,GAAGC;gBACL;gBACAqC,YAAY;oBACVC,QAAQ9B;oBACRP,WAAWC;oBACXxB,YAAYW;gBACd;gBACAkD,aAAarB;;;;AAKvB,EAAE"}
1	+ {"version":3,"sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc /\n\nimport as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useBooleanState } from '../../../hooks/useBooleanState';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport {\n arrowMiddleware,\n convertFloatingDataToReactCSSProperties,\n flipMiddleware,\n offsetMiddleware,\n shiftMiddleware,\n useFloating,\n} from '../../../lib/floating';\nimport type { HasDataAttribute, HasRootRef } from '../../../types';\nimport { TooltipBase } from '../../TooltipBase/TooltipBase';\nimport styles from './SliderThumb.module.css';\n\ninterface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {\n className?: string \| undefined;\n style?: React.CSSProperties \| undefined;\n inputProps?:\n \| (React.InputHTMLAttributes<HTMLInputElement> &\n React.RefAttributes<HTMLInputElement> &\n HasDataAttribute)\n \| undefined;\n withTooltip?: boolean \| undefined;\n isActive?: boolean \| undefined;\n}\n\nexport const SliderThumb = ({\n className,\n getRootRef,\n inputProps,\n withTooltip,\n isActive,\n ...restProps\n}: SliderThumbProps): React.ReactNode => {\n const { focusVisible, onBlur, onFocus } = useFocusVisible();\n const focusVisibleClassNames = useFocusVisibleClassName({\n focusVisible,\n mode: styles.focusVisible,\n });\n const [arrowRef, setArrowRef] = React.useState<HTMLDivElement \| null>(null);\n\n const memoizedMiddlewares = React.useMemo(() => {\n return [\n offsetMiddleware({\n crossAxis: 0,\n mainAxis: 15,\n }),\n flipMiddleware(),\n shiftMiddleware({ padding: 8 }),\n arrowMiddleware({\n element: arrowRef,\n }),\n ];\n }, [arrowRef]);\n\n const {\n x: floatingDataX,\n y: floatingDataY,\n placement: resolvedPlacement,\n refs,\n strategy: floatingPositionStrategy,\n middlewareData: { arrow: arrowCoords },\n update: updateTooltipPosition,\n } = useFloating({\n placement: 'top',\n middleware: memoizedMiddlewares,\n });\n\n const [isHovered, setHoveredTrue, setHoveredFalse] = useBooleanState(false);\n\n const handleRootRef = useExternRef<HTMLSpanElement>(getRootRef, refs.setReference);\n\n const shouldShowTooltip = withTooltip && (focusVisible \|\| isHovered \|\| isActive);\n\n const inputValue = inputProps && inputProps.value;\n React.useEffect(\n function udpateTooltipPositionOnValueChange() {\n if (shouldShowTooltip && inputValue !== 'undefined') {\n updateTooltipPosition();\n }\n },\n [inputValue, updateTooltipPosition, shouldShowTooltip],\n );\n\n return (\n <React.Fragment>\n <span\n {...restProps}\n ref={handleRootRef}\n onMouseEnter={setHoveredTrue}\n onMouseLeave={setHoveredFalse}\n className={classNames(\n styles.host,\n focusVisibleClassNames,\n isActive && styles.active,\n isHovered && styles.hover,\n className,\n )}\n >\n <input\n {...inputProps}\n type=\"range\"\n className={styles.nativeInput}\n aria-orientation=\"horizontal\"\n onBlur={onBlur}\n onFocus={onFocus}\n />\n </span>\n {shouldShowTooltip && (\n <TooltipBase\n appearance=\"neutral\"\n getRootRef={refs.setFloating}\n style={convertFloatingDataToReactCSSProperties({\n strategy: floatingPositionStrategy,\n x: floatingDataX,\n y: floatingDataY,\n })}\n arrowProps={{\n coords: arrowCoords,\n placement: resolvedPlacement,\n getRootRef: setArrowRef,\n }}\n description={inputValue}\n />\n )}\n </React.Fragment>\n );\n};\n"],"names":["React","classNames","useBooleanState","useExternRef","useFocusVisible","useFocusVisibleClassName","arrowMiddleware","convertFloatingDataToReactCSSProperties","flipMiddleware","offsetMiddleware","shiftMiddleware","useFloating","TooltipBase","styles","SliderThumb","className","getRootRef","inputProps","withTooltip","isActive","restProps","focusVisible","onBlur","onFocus","focusVisibleClassNames","mode","arrowRef","setArrowRef","useState","memoizedMiddlewares","useMemo","crossAxis","mainAxis","padding","element","x","floatingDataX","y","floatingDataY","placement","resolvedPlacement","refs","strategy","floatingPositionStrategy","middlewareData","arrow","arrowCoords","update","updateTooltipPosition","middleware","isHovered","setHoveredTrue","setHoveredFalse","handleRootRef","setReference","shouldShowTooltip","inputValue","value","useEffect","udpateTooltipPositionOnValueChange","Fragment","span","ref","onMouseEnter","onMouseLeave","host","active","hover","input","type","nativeInput","aria-orientation","appearance","setFloating","style","arrowProps","coords","description"],"mappings":"AAAA;;AACA,sCAAsC,GAEtC,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AACnF,SACEC,eAAe,EACfC,uCAAuC,EACvCC,cAAc,EACdC,gBAAgB,EAChBC,eAAe,EACfC,WAAW,QACN,iCAAwB;AAE/B,SAASC,WAAW,QAAQ,mCAAgC;AAC5D,OAAOC,YAAY,2BAA2B;AAc9C,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,QAAQ,EACR,GAAGC,WACc;IACjB,MAAM,EAAEC,YAAY,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGnB;IAC1C,MAAMoB,yBAAyBnB,yBAAyB;QACtDgB;QACAI,MAAMZ,OAAOQ,YAAY;IAC3B;IACA,MAAM,CAACK,UAAUC,YAAY,GAAG3B,MAAM4B,QAAQ,CAAwB;IAEtE,MAAMC,sBAAsB7B,MAAM8B,OAAO,CAAC;QACxC,OAAO;YACLrB,iBAAiB;gBACfsB,WAAW;gBACXC,UAAU;YACZ;YACAxB;YACAE,gBAAgB;gBAAEuB,SAAS;YAAE;YAC7B3B,gBAAgB;gBACd4B,SAASR;YACX;SACD;IACH,GAAG;QAACA;KAAS;IAEb,MAAM,EACJS,GAAGC,aAAa,EAChBC,GAAGC,aAAa,EAChBC,WAAWC,iBAAiB,EAC5BC,IAAI,EACJC,UAAUC,wBAAwB,EAClCC,gBAAgB,EAAEC,OAAOC,WAAW,EAAE,EACtCC,QAAQC,qBAAqB,EAC9B,GAAGrC,YAAY;QACd4B,WAAW;QACXU,YAAYpB;IACd;IAEA,MAAM,CAACqB,WAAWC,gBAAgBC,gBAAgB,GAAGlD,gBAAgB;IAErE,MAAMmD,gBAAgBlD,aAA8Ba,YAAYyB,KAAKa,YAAY;IAEjF,MAAMC,oBAAoBrC,eAAgBG,CAAAA,gBAAgB6B,aAAa/B,QAAO;IAE9E,MAAMqC,aAAavC,cAAcA,WAAWwC,KAAK;IACjDzD,MAAM0D,SAAS,CACb,SAASC;QACP,IAAIJ,qBAAqBC,eAAe,aAAa;YACnDR;QACF;IACF,GACA;QAACQ;QAAYR;QAAuBO;KAAkB;IAGxD,qBACE,MAACvD,MAAM4D,QAAQ;;0BACb,KAACC;gBACE,GAAGzC,SAAS;gBACb0C,KAAKT;gBACLU,cAAcZ;gBACda,cAAcZ;gBACdrC,WAAWd,WACTY,OAAOoD,IAAI,EACXzC,wBACAL,YAAYN,OAAOqD,MAAM,EACzBhB,aAAarC,OAAOsD,KAAK,EACzBpD;0BAGF,cAAA,KAACqD;oBACE,GAAGnD,UAAU;oBACdoD,MAAK;oBACLtD,WAAWF,OAAOyD,WAAW;oBAC7BC,oBAAiB;oBACjBjD,QAAQA;oBACRC,SAASA;;;YAGZgC,mCACC,KAAC3C;gBACC4D,YAAW;gBACXxD,YAAYyB,KAAKgC,WAAW;gBAC5BC,OAAOnE,wCAAwC;oBAC7CmC,UAAUC;oBACVR,GAAGC;oBACHC,GAAGC;gBACL;gBACAqC,YAAY;oBACVC,QAAQ9B;oBACRP,WAAWC;oBACXxB,YAAYW;gBACd;gBACAkD,aAAarB;;;;AAKvB,EAAE"}

package/dist/cssm/components/Snackbar/Snackbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["'use client';\n\nimport { useContext } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SnackbarsContainerContext } from '../../hooks/useSnackbarManager/components/SnackbarsContainerContext';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getRelativeBoundingClientRect } from '../../lib/dom';\nimport { UIPanGestureRecognizer } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasDataAttribute, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Basic, type BasicProps } from './subcomponents/Basic/Basic';\nimport type { ShiftData, SnackbarPlacement } from './types';\nimport {\n getInitialShiftData,\n getMovedShiftData,\n resolveOffsetYCssStyle,\n shouldBeClosedByShiftData,\n} from './utils';\nimport styles from './Snackbar.module.css';\n\nexport type { BasicProps as SnackbarBasicProps };\n\nconst placementClassNames = {\n 'top-start': styles.placementTopStart,\n 'top': styles.placementTop,\n 'top-end': styles.placementTopEnd,\n 'bottom-start': styles.placementBottomStart,\n 'bottom': styles.placementBottom,\n 'bottom-end': styles.placementBottomEnd,\n};\n\nconst animationStateClassNames = {\n enter: styles.stateEnter,\n entering: styles.stateEntering,\n entered: styles.stateEntered,\n exit: styles.stateExit,\n exiting: styles.stateExiting,\n exited: undefined,\n};\n\nexport type SnackbarCloseReason = 'swipe' \| 'timeout' \| 'click-action' \| 'escape-key' \| 'manual';\n\nexport interface SnackbarProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'role'>,\n BasicProps {\n /*\n Свойства, которые можно прокинуть внутрь компонента:\n * - `root`: свойства для прокидывания в корень компонента;\n * - `action`: свойства для прокидывания в кнопку действия.\n /\n slotProps?: {\n root?: Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> &\n HasRootRef<HTMLDivElement> &\n HasDataAttribute;\n action?: React.HTMLAttributes<HTMLElement> & HasRootRef<HTMLElement> & HasDataAttribute;\n };\n /\n Задаёт расположение компонента.\n \n > Note: в мобильном режиме:\n * > - `\"top-start\"`/`\"top-end\"` перебивается на `\"top\"`, чтобы поведение было схожим с нативными\n * > уведомлениями;\n * > - `\"bottom\"` перебивается на `\"bottom-start\"`, чтобы избежать вызова системных\n * > функций, таких как Pull To Refresh и Режим управления одной рукой.\n * > - `\"bottom-start\"`/`\"bottom-end\"` закрываются смахиванием в любое из направлений\n * > по горизонтальной оси.\n /\n placement?: SnackbarPlacement;\n /\n Название кнопки действия в уведомлении\n * Не может использоваться одновременно с `subtitle`.\n /\n action?: React.ReactNode;\n /\n Будет вызвано при нажатии на кнопку действия.\n /\n onActionClick?: (event: React.MouseEvent) => void;\n /\n Время в миллисекундах, через которое плашка скроется.\n /\n duration?: number \| null;\n /\n Обработчик закрытия уведомления.\n /\n onClose?: (reason: SnackbarCloseReason) => void;\n /\n Обработчик закрытия уведомления, срабатывающий после окончания анимации.\n /\n onClosed: () => void;\n /\n Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n /\n offsetY?: React.CSSProperties['bottom'];\n /\n Для контролируемого управления состоянием открытия снекбара.\n /\n open?: boolean;\n}\n\n/\n @see https://vkui.io/components/snackbar\n /\nexport const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({\n placement = 'bottom-start',\n children,\n layout,\n action,\n before,\n after,\n duration = 4000,\n onActionClick: onActionClickProp,\n onClosed,\n onClose,\n mode = 'default',\n subtitle,\n offsetY,\n getRootRef: getRootRefProp,\n\n slotProps,\n open: openProp,\n id,\n ...restProps\n}: SnackbarProps) => {\n const { getRootRef, ...rootRest } = useMergeProps(\n {\n getRootRef: getRootRefProp,\n ...restProps,\n },\n slotProps?.root,\n );\n\n const { onClick: onActionClick, ...actionRest } = useMergeProps(\n {\n onClick: onActionClickProp,\n },\n slotProps?.action,\n );\n\n const platform = usePlatform();\n const {\n isInsideContainer,\n onOpen,\n onClosed: onClosedFromContext,\n } = useContext(SnackbarsContainerContext);\n\n const [open, setOpen] = React.useState(openProp !== undefined ? openProp : true);\n const [touched, setTouched] = React.useState(false);\n\n const direction = useConfigDirection();\n const isRtl = direction === 'rtl';\n\n const rootRef = useExternRef(getRootRef);\n const focused = useFocusWithin(rootRef);\n const inRef = React.useRef<HTMLDivElement>(null);\n const panGestureRecognizer = React.useRef<UIPanGestureRecognizer \| null>(null);\n\n const shiftDataRef = React.useRef<ShiftData \| null>(null);\n\n const rafRef = React.useRef<ReturnType<typeof requestAnimationFrame> \| null>(null);\n const closeTimeoutIdRef = React.useRef<ReturnType<typeof setTimeout> \| undefined>(undefined);\n const mediaQueries = useMediaQueries();\n const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n open ? 'enter' : 'exit',\n {\n onEnter: id ? () => onOpen(id) : undefined,\n onExited: callMultiple(onClosed, id ? () => onClosedFromContext(id) : undefined),\n },\n false,\n true,\n );\n\n useIsomorphicLayoutEffect(\n function updateForceOpen() {\n if (openProp !== undefined) {\n if (!openProp) {\n onClose?.('manual');\n }\n setOpen(openProp);\n }\n },\n [openProp],\n );\n\n const clearRAF = React.useCallback(() => {\n if (rafRef.current !== null) {\n cancelAnimationFrame(rafRef.current);\n rafRef.current = null;\n }\n }, []);\n\n const updateShiftAxisCSSProperties = React.useCallback(\n (x: number \| null, y: number \| null, direction: number \| null) => {\n rafRef.current = requestAnimationFrame(() => {\n if (rootRef.current) {\n x === null\n ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_x')\n : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_x', `${x}px`);\n y === null\n ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_y')\n : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_y', `${y}px`);\n direction === null\n ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_direction')\n : / istanbul ignore next: TODO чтобы протестировать кейс, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches /\n rootRef.current.style.setProperty(\n '--vkui_internal--snackbar_direction',\n `${direction}`,\n );\n }\n });\n },\n [rootRef],\n );\n\n const close = React.useCallback(\n (reason: SnackbarCloseReason) => {\n onClose?.(reason);\n if (openProp === undefined) {\n setOpen(false);\n }\n },\n [onClose, openProp],\n );\n\n const handleActionClick = (event: React.MouseEvent) => {\n close('click-action');\n if (action) {\n onActionClick?.(event as React.MouseEvent<HTMLElement>);\n }\n };\n\n const handleTouchStart = (event: React.UIEvent<HTMLDivElement>) => {\n panGestureRecognizer.current = new UIPanGestureRecognizer();\n panGestureRecognizer.current.setStartCoords(event.nativeEvent);\n shiftDataRef.current = getInitialShiftData(\n rootRef.current!.offsetWidth,\n rootRef.current!.offsetHeight,\n mediaQueries,\n );\n setTouched(true);\n };\n\n const handleTouchMove = (event: React.UIEvent<HTMLDivElement>) => {\n if (shiftDataRef.current && panGestureRecognizer.current) {\n panGestureRecognizer.current.setInitialTimeOnce();\n panGestureRecognizer.current.setEndCoords(event.nativeEvent);\n shiftDataRef.current = getMovedShiftData(\n placement,\n shiftDataRef.current,\n panGestureRecognizer.current.delta(),\n isRtl,\n );\n\n if (shiftDataRef.current.shifted) {\n updateShiftAxisCSSProperties(\n shiftDataRef.current.x,\n shiftDataRef.current.y,\n shiftDataRef.current.direction,\n );\n }\n }\n };\n\n const handleTouchEnd = () => {\n if (\n touched &&\n shiftDataRef.current &&\n panGestureRecognizer.current &&\n shouldBeClosedByShiftData(\n placement,\n shiftDataRef.current,\n getRelativeBoundingClientRect(rootRef.current!, inRef.current!),\n panGestureRecognizer.current.velocity(),\n isRtl,\n )\n ) {\n close('swipe');\n }\n\n setTouched(false);\n };\n\n useIsomorphicLayoutEffect(\n function closeAfterDelay() {\n if (!open \|\| focused \|\| touched \|\| animationState !== 'entered' \|\| !duration) {\n return;\n }\n const onTimeout = () => close('timeout');\n\n closeTimeoutIdRef.current = setTimeout(onTimeout, duration);\n return function preventCloseAfterDelayOnUnmount() {\n clearTimeout(closeTimeoutIdRef.current);\n };\n },\n [open, focused, touched, animationState, close, duration],\n );\n\n useIsomorphicLayoutEffect(\n function clearUserInteractionDataAfterTouchEnd() {\n if (!touched) {\n clearRAF();\n shiftDataRef.current = null;\n panGestureRecognizer.current = null;\n\n if (open) {\n updateShiftAxisCSSProperties(null, null, null);\n }\n }\n },\n [touched, open, updateShiftAxisCSSProperties, clearRAF],\n );\n\n React.useEffect(() => clearRAF, [clearRAF]);\n\n const onEscKeyDown = React.useCallback(() => close('escape-key'), [close]);\n\n useGlobalEscKeyDown(open, onEscKeyDown);\n\n if (animationState === 'exited') {\n return null;\n }\n\n return (\n <RootComponent\n id={id}\n role=\"presentation\"\n baseClassName={classNames(\n styles.host,\n !isInsideContainer && styles.fixed,\n platform === 'ios' && styles.ios,\n touched && styles.touched,\n placementClassNames[placement],\n animationStateClassNames[animationState],\n isRtl && styles.rtl,\n )}\n baseStyle={resolveOffsetYCssStyle(placement, offsetY)}\n getRootRef={rootRef}\n {...rootRest}\n >\n <div\n role=\"alert\"\n className={styles.in}\n ref={inRef}\n // mobile\n onTouchStart={handleTouchStart}\n onTouchMove={handleTouchMove}\n onTouchEnd={handleTouchEnd}\n // desktop\n onMouseDown={handleTouchStart}\n onMouseMove={handleTouchMove}\n onMouseUp={handleTouchEnd}\n onMouseLeave={handleTouchEnd}\n {...animationHandlers}\n >\n <Basic\n mode={mode}\n layout={layout}\n before={before}\n after={after}\n subtitle={subtitle}\n action={\n action && (\n <Button\n align=\"left\"\n mode=\"link\"\n appearance={\n mode === 'dark'\n ? / istanbul ignore next: проверяется в e2e */\n 'overlay'\n : 'accent'\n }\n size=\"s\"\n onClick={handleActionClick}\n {...actionRest}\n >\n {action}\n </Button>\n )\n }\n >\n {children}\n </Basic>\n </div>\n </RootComponent>\n );\n};\n\nSnackbar.Basic = Basic;\n"],"names":["useContext","React","classNames","useConfigDirection","useExternRef","useFocusWithin","useGlobalEscKeyDown","useMediaQueries","useMergeProps","usePlatform","SnackbarsContainerContext","useCSSKeyframesAnimationController","callMultiple","getRelativeBoundingClientRect","UIPanGestureRecognizer","useIsomorphicLayoutEffect","Button","RootComponent","Basic","getInitialShiftData","getMovedShiftData","resolveOffsetYCssStyle","shouldBeClosedByShiftData","styles","placementClassNames","placementTopStart","placementTop","placementTopEnd","placementBottomStart","placementBottom","placementBottomEnd","animationStateClassNames","enter","stateEnter","entering","stateEntering","entered","stateEntered","exit","stateExit","exiting","stateExiting","exited","undefined","Snackbar","placement","children","layout","action","before","after","duration","onActionClick","onActionClickProp","onClosed","onClose","mode","subtitle","offsetY","getRootRef","getRootRefProp","slotProps","open","openProp","id","restProps","rootRest","root","onClick","actionRest","platform","isInsideContainer","onOpen","onClosedFromContext","setOpen","useState","touched","setTouched","direction","isRtl","rootRef","focused","inRef","useRef","panGestureRecognizer","shiftDataRef","rafRef","closeTimeoutIdRef","mediaQueries","animationState","animationHandlers","onEnter","onExited","updateForceOpen","clearRAF","useCallback","current","cancelAnimationFrame","updateShiftAxisCSSProperties","x","y","requestAnimationFrame","style","removeProperty","setProperty","close","reason","handleActionClick","event","handleTouchStart","setStartCoords","nativeEvent","offsetWidth","offsetHeight","handleTouchMove","setInitialTimeOnce","setEndCoords","delta","shifted","handleTouchEnd","velocity","closeAfterDelay","onTimeout","setTimeout","preventCloseAfterDelayOnUnmount","clearTimeout","clearUserInteractionDataAfterTouchEnd","useEffect","onEscKeyDown","role","baseClassName","host","fixed","ios","rtl","baseStyle","div","className","in","ref","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","align","appearance","size"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["'use client';\n\nimport { useContext } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SnackbarsContainerContext } from '../../hooks/useSnackbarManager/components/SnackbarsContainerContext';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getRelativeBoundingClientRect } from '../../lib/dom';\nimport { UIPanGestureRecognizer } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasDataAttribute, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Basic, type BasicProps } from './subcomponents/Basic/Basic';\nimport type { ShiftData, SnackbarPlacement } from './types';\nimport {\n getInitialShiftData,\n getMovedShiftData,\n resolveOffsetYCssStyle,\n shouldBeClosedByShiftData,\n} from './utils';\nimport styles from './Snackbar.module.css';\n\nexport type { BasicProps as SnackbarBasicProps };\n\nconst placementClassNames = {\n 'top-start': styles.placementTopStart,\n 'top': styles.placementTop,\n 'top-end': styles.placementTopEnd,\n 'bottom-start': styles.placementBottomStart,\n 'bottom': styles.placementBottom,\n 'bottom-end': styles.placementBottomEnd,\n};\n\nconst animationStateClassNames = {\n enter: styles.stateEnter,\n entering: styles.stateEntering,\n entered: styles.stateEntered,\n exit: styles.stateExit,\n exiting: styles.stateExiting,\n exited: undefined,\n};\n\nexport type SnackbarCloseReason = 'swipe' \| 'timeout' \| 'click-action' \| 'escape-key' \| 'manual';\n\nexport interface SnackbarProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'role'>,\n BasicProps {\n /*\n Свойства, которые можно прокинуть внутрь компонента:\n * - `root`: свойства для прокидывания в корень компонента;\n * - `action`: свойства для прокидывания в кнопку действия.\n /\n slotProps?:\n \| {\n root?:\n \| (Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> &\n HasRootRef<HTMLDivElement> &\n HasDataAttribute)\n \| undefined;\n action?:\n \| (React.HTMLAttributes<HTMLElement> & HasRootRef<HTMLElement> & HasDataAttribute)\n \| undefined;\n }\n \| undefined;\n /\n Задаёт расположение компонента.\n \n > Note: в мобильном режиме:\n * > - `\"top-start\"`/`\"top-end\"` перебивается на `\"top\"`, чтобы поведение было схожим с нативными\n * > уведомлениями;\n * > - `\"bottom\"` перебивается на `\"bottom-start\"`, чтобы избежать вызова системных\n * > функций, таких как Pull To Refresh и Режим управления одной рукой.\n * > - `\"bottom-start\"`/`\"bottom-end\"` закрываются смахиванием в любое из направлений\n * > по горизонтальной оси.\n /\n placement?: SnackbarPlacement \| undefined;\n /\n Название кнопки действия в уведомлении\n * Не может использоваться одновременно с `subtitle`.\n /\n action?: React.ReactNode \| undefined;\n /\n Будет вызвано при нажатии на кнопку действия.\n /\n onActionClick?: ((event: React.MouseEvent) => void) \| undefined;\n /\n Время в миллисекундах, через которое плашка скроется.\n /\n duration?: number \| null \| undefined;\n /\n Обработчик закрытия уведомления.\n /\n onClose?: ((reason: SnackbarCloseReason) => void) \| undefined;\n /\n Обработчик закрытия уведомления, срабатывающий после окончания анимации.\n /\n onClosed: () => void;\n /\n Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n /\n offsetY?: React.CSSProperties['bottom'] \| undefined;\n /\n Для контролируемого управления состоянием открытия снекбара.\n /\n open?: boolean \| undefined;\n}\n\n/\n @see https://vkui.io/components/snackbar\n /\nexport const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({\n placement = 'bottom-start',\n children,\n layout,\n action,\n before,\n after,\n duration = 4000,\n onActionClick: onActionClickProp,\n onClosed,\n onClose,\n mode = 'default',\n subtitle,\n offsetY,\n getRootRef: getRootRefProp,\n\n slotProps,\n open: openProp,\n id,\n ...restProps\n}: SnackbarProps) => {\n const { getRootRef, ...rootRest } = useMergeProps(\n {\n getRootRef: getRootRefProp,\n ...restProps,\n },\n slotProps?.root,\n );\n\n const { onClick: onActionClick, ...actionRest } = useMergeProps(\n {\n onClick: onActionClickProp,\n },\n slotProps?.action,\n );\n\n const platform = usePlatform();\n const {\n isInsideContainer,\n onOpen,\n onClosed: onClosedFromContext,\n } = useContext(SnackbarsContainerContext);\n\n const [open, setOpen] = React.useState(openProp !== undefined ? openProp : true);\n const [touched, setTouched] = React.useState(false);\n\n const direction = useConfigDirection();\n const isRtl = direction === 'rtl';\n\n const rootRef = useExternRef(getRootRef);\n const focused = useFocusWithin(rootRef);\n const inRef = React.useRef<HTMLDivElement>(null);\n const panGestureRecognizer = React.useRef<UIPanGestureRecognizer \| null>(null);\n\n const shiftDataRef = React.useRef<ShiftData \| null>(null);\n\n const rafRef = React.useRef<ReturnType<typeof requestAnimationFrame> \| null>(null);\n const closeTimeoutIdRef = React.useRef<ReturnType<typeof setTimeout> \| undefined>(undefined);\n const mediaQueries = useMediaQueries();\n const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n open ? 'enter' : 'exit',\n {\n onEnter: id ? () => onOpen(id) : undefined,\n onExited: callMultiple(onClosed, id ? () => onClosedFromContext(id) : undefined),\n },\n false,\n true,\n );\n\n useIsomorphicLayoutEffect(\n function updateForceOpen() {\n if (openProp !== undefined) {\n if (!openProp) {\n onClose?.('manual');\n }\n setOpen(openProp);\n }\n },\n [openProp],\n );\n\n const clearRAF = React.useCallback(() => {\n if (rafRef.current !== null) {\n cancelAnimationFrame(rafRef.current);\n rafRef.current = null;\n }\n }, []);\n\n const updateShiftAxisCSSProperties = React.useCallback(\n (x: number \| null, y: number \| null, direction: number \| null) => {\n rafRef.current = requestAnimationFrame(() => {\n if (rootRef.current) {\n x === null\n ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_x')\n : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_x', `${x}px`);\n y === null\n ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_shift_y')\n : rootRef.current.style.setProperty('--vkui_internal--snackbar_shift_y', `${y}px`);\n direction === null\n ? rootRef.current.style.removeProperty('--vkui_internal--snackbar_direction')\n : / istanbul ignore next: TODO чтобы протестировать кейс, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches /\n rootRef.current.style.setProperty(\n '--vkui_internal--snackbar_direction',\n `${direction}`,\n );\n }\n });\n },\n [rootRef],\n );\n\n const close = React.useCallback(\n (reason: SnackbarCloseReason) => {\n onClose?.(reason);\n if (openProp === undefined) {\n setOpen(false);\n }\n },\n [onClose, openProp],\n );\n\n const handleActionClick = (event: React.MouseEvent) => {\n close('click-action');\n if (action) {\n onActionClick?.(event as React.MouseEvent<HTMLElement>);\n }\n };\n\n const handleTouchStart = (event: React.UIEvent<HTMLDivElement>) => {\n panGestureRecognizer.current = new UIPanGestureRecognizer();\n panGestureRecognizer.current.setStartCoords(event.nativeEvent);\n shiftDataRef.current = getInitialShiftData(\n rootRef.current!.offsetWidth,\n rootRef.current!.offsetHeight,\n mediaQueries,\n );\n setTouched(true);\n };\n\n const handleTouchMove = (event: React.UIEvent<HTMLDivElement>) => {\n if (shiftDataRef.current && panGestureRecognizer.current) {\n panGestureRecognizer.current.setInitialTimeOnce();\n panGestureRecognizer.current.setEndCoords(event.nativeEvent);\n shiftDataRef.current = getMovedShiftData(\n placement,\n shiftDataRef.current,\n panGestureRecognizer.current.delta(),\n isRtl,\n );\n\n if (shiftDataRef.current.shifted) {\n updateShiftAxisCSSProperties(\n shiftDataRef.current.x,\n shiftDataRef.current.y,\n shiftDataRef.current.direction,\n );\n }\n }\n };\n\n const handleTouchEnd = () => {\n if (\n touched &&\n shiftDataRef.current &&\n panGestureRecognizer.current &&\n shouldBeClosedByShiftData(\n placement,\n shiftDataRef.current,\n getRelativeBoundingClientRect(rootRef.current!, inRef.current!),\n panGestureRecognizer.current.velocity(),\n isRtl,\n )\n ) {\n close('swipe');\n }\n\n setTouched(false);\n };\n\n useIsomorphicLayoutEffect(\n function closeAfterDelay() {\n if (!open \|\| focused \|\| touched \|\| animationState !== 'entered' \|\| !duration) {\n return;\n }\n const onTimeout = () => close('timeout');\n\n closeTimeoutIdRef.current = setTimeout(onTimeout, duration);\n return function preventCloseAfterDelayOnUnmount() {\n clearTimeout(closeTimeoutIdRef.current);\n };\n },\n [open, focused, touched, animationState, close, duration],\n );\n\n useIsomorphicLayoutEffect(\n function clearUserInteractionDataAfterTouchEnd() {\n if (!touched) {\n clearRAF();\n shiftDataRef.current = null;\n panGestureRecognizer.current = null;\n\n if (open) {\n updateShiftAxisCSSProperties(null, null, null);\n }\n }\n },\n [touched, open, updateShiftAxisCSSProperties, clearRAF],\n );\n\n React.useEffect(() => clearRAF, [clearRAF]);\n\n const onEscKeyDown = React.useCallback(() => close('escape-key'), [close]);\n\n useGlobalEscKeyDown(open, onEscKeyDown);\n\n if (animationState === 'exited') {\n return null;\n }\n\n return (\n <RootComponent\n id={id}\n role=\"presentation\"\n baseClassName={classNames(\n styles.host,\n !isInsideContainer && styles.fixed,\n platform === 'ios' && styles.ios,\n touched && styles.touched,\n placementClassNames[placement],\n animationStateClassNames[animationState],\n isRtl && styles.rtl,\n )}\n baseStyle={resolveOffsetYCssStyle(placement, offsetY)}\n getRootRef={rootRef}\n {...rootRest}\n >\n <div\n role=\"alert\"\n className={styles.in}\n ref={inRef}\n // mobile\n onTouchStart={handleTouchStart}\n onTouchMove={handleTouchMove}\n onTouchEnd={handleTouchEnd}\n // desktop\n onMouseDown={handleTouchStart}\n onMouseMove={handleTouchMove}\n onMouseUp={handleTouchEnd}\n onMouseLeave={handleTouchEnd}\n {...animationHandlers}\n >\n <Basic\n mode={mode}\n layout={layout}\n before={before}\n after={after}\n subtitle={subtitle}\n action={\n action && (\n <Button\n align=\"left\"\n mode=\"link\"\n appearance={\n mode === 'dark'\n ? / istanbul ignore next: проверяется в e2e */\n 'overlay'\n : 'accent'\n }\n size=\"s\"\n onClick={handleActionClick}\n {...actionRest}\n >\n {action}\n </Button>\n )\n }\n >\n {children}\n </Basic>\n </div>\n </RootComponent>\n );\n};\n\nSnackbar.Basic = Basic;\n"],"names":["useContext","React","classNames","useConfigDirection","useExternRef","useFocusWithin","useGlobalEscKeyDown","useMediaQueries","useMergeProps","usePlatform","SnackbarsContainerContext","useCSSKeyframesAnimationController","callMultiple","getRelativeBoundingClientRect","UIPanGestureRecognizer","useIsomorphicLayoutEffect","Button","RootComponent","Basic","getInitialShiftData","getMovedShiftData","resolveOffsetYCssStyle","shouldBeClosedByShiftData","styles","placementClassNames","placementTopStart","placementTop","placementTopEnd","placementBottomStart","placementBottom","placementBottomEnd","animationStateClassNames","enter","stateEnter","entering","stateEntering","entered","stateEntered","exit","stateExit","exiting","stateExiting","exited","undefined","Snackbar","placement","children","layout","action","before","after","duration","onActionClick","onActionClickProp","onClosed","onClose","mode","subtitle","offsetY","getRootRef","getRootRefProp","slotProps","open","openProp","id","restProps","rootRest","root","onClick","actionRest","platform","isInsideContainer","onOpen","onClosedFromContext","setOpen","useState","touched","setTouched","direction","isRtl","rootRef","focused","inRef","useRef","panGestureRecognizer","shiftDataRef","rafRef","closeTimeoutIdRef","mediaQueries","animationState","animationHandlers","onEnter","onExited","updateForceOpen","clearRAF","useCallback","current","cancelAnimationFrame","updateShiftAxisCSSProperties","x","y","requestAnimationFrame","style","removeProperty","setProperty","close","reason","handleActionClick","event","handleTouchStart","setStartCoords","nativeEvent","offsetWidth","offsetHeight","handleTouchMove","setInitialTimeOnce","setEndCoords","delta","shifted","handleTouchEnd","velocity","closeAfterDelay","onTimeout","setTimeout","preventCloseAfterDelayOnUnmount","clearTimeout","clearUserInteractionDataAfterTouchEnd","useEffect","onEscKeyDown","role","baseClassName","host","fixed","ios","rtl","baseStyle","div","className","in","ref","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","align","appearance","size"],"mappings":"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"}

package/dist/cssm/components/Snackbar/subcomponents/Basic/Basic.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../src/components/Snackbar/subcomponents/Basic/Basic.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../../hooks/useAdaptivity';\nimport type { HTMLAttributesWithRootRef } from '../../../../types';\nimport { RootComponent } from '../../../RootComponent/RootComponent';\nimport { Paragraph } from '../../../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../../../Typography/Subhead/Subhead';\nimport styles from './Basic.module.css';\n\nconst stylesLayout = {\n none: styles.layoutNone,\n vertical: styles.layoutVertical,\n horizontal: styles.layoutHorizontal,\n};\n\nconst densityClassNames = {\n none: styles.densityNone,\n regular: styles.densityRegular,\n};\n\nexport interface BasicProps {\n /*\n Элемент действия.\n * Не может использоваться одновременно с `subtitle`.\n /\n action?: React.ReactNode;\n\n /\n Контент в правой части, может быть иконкой 24x24.\n /\n after?: React.ReactNode;\n\n /\n Варианты расположения кнопки действия\n * По умолчанию на десктопах, или при наличии элементов `after` или `subtitle`\n * имеет значение `vertical`, в остальных случаях `horizontal`.\n /\n layout?: 'vertical' \| 'horizontal';\n\n /\n Может быть следующими компонентами:\n * - цветная иконка 24x24 или 28x28 пикселя\n * - `<Avatar size={32} />`\n * - `<Image size={40} />`.\n /\n before?: React.ReactNode;\n\n /\n Задает стиль снекбара.\n /\n mode?: 'default' \| 'dark';\n\n /\n Дополнительная строка текста под `children`.\n * Не может использоваться одновременно с `action`.\n */\n subtitle?: React.ReactNode;\n}\n\nexport interface SnackbarBasicProps extends HTMLAttributesWithRootRef<HTMLDivElement>, BasicProps {}\n\nexport function Basic({\n layout: layoutProps,\n action,\n after,\n before,\n mode,\n subtitle,\n children,\n ...restProps\n}: SnackbarBasicProps): React.ReactNode {\n const { density = 'none' } = useAdaptivity();\n const layout = after \|\| subtitle ? 'vertical' : 'none';\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles.body,\n stylesLayout[layoutProps \|\| layout],\n density !== 'compact' && densityClassNames[density],\n mode === 'dark' && styles.modeDark,\n )}\n >\n {before && <div className={styles.before}>{before}</div>}\n\n <div className={styles.content}>\n <Paragraph className={styles.contentText}>{children}</Paragraph>\n {subtitle && !action && <Subhead className={styles.contentSubtitle}>{subtitle}</Subhead>}\n\n {action && !subtitle && <div className={styles.action}>{action}</div>}\n </div>\n\n {after && <div className={styles.after}>{after}</div>}\n </RootComponent>\n );\n}\n"],"names":["classNames","useAdaptivity","RootComponent","Paragraph","Subhead","styles","stylesLayout","none","layoutNone","vertical","layoutVertical","horizontal","layoutHorizontal","densityClassNames","densityNone","regular","densityRegular","Basic","layout","layoutProps","action","after","before","mode","subtitle","children","restProps","density","baseClassName","body","modeDark","div","className","content","contentText","contentSubtitle"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,qCAAkC;AAEhE,SAASC,aAAa,QAAQ,0CAAuC;AACrE,SAASC,SAAS,QAAQ,6CAA0C;AACpE,SAASC,OAAO,QAAQ,yCAAsC;AAC9D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,eAAe;IACnBC,MAAMF,OAAOG,UAAU;IACvBC,UAAUJ,OAAOK,cAAc;IAC/BC,YAAYN,OAAOO,gBAAgB;AACrC;AAEA,MAAMC,oBAAoB;IACxBN,MAAMF,OAAOS,WAAW;IACxBC,SAASV,OAAOW,cAAc;AAChC;AA2CA,OAAO,SAASC,MAAM,EACpBC,QAAQC,WAAW,EACnBC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACgB;IACnB,MAAM,EAAEC,UAAU,MAAM,EAAE,GAAG1B;IAC7B,MAAMiB,SAASG,SAASG,WAAW,aAAa;IAEhD,qBACE,MAACtB;QACE,GAAGwB,SAAS;QACbE,eAAe5B,WACbK,OAAOwB,IAAI,EACXvB,YAAY,CAACa,eAAeD,OAAO,EACnCS,YAAY,aAAad,iBAAiB,CAACc,QAAQ,EACnDJ,SAAS,UAAUlB,OAAOyB,QAAQ;;YAGnCR,wBAAU,KAACS;gBAAIC,WAAW3B,OAAOiB,MAAM;0BAAGA;;0BAE3C,MAACS;gBAAIC,WAAW3B,OAAO4B,OAAO;;kCAC5B,KAAC9B;wBAAU6B,WAAW3B,OAAO6B,WAAW;kCAAGT;;oBAC1CD,YAAY,CAACJ,wBAAU,KAAChB;wBAAQ4B,WAAW3B,OAAO8B,eAAe;kCAAGX;;oBAEpEJ,UAAU,CAACI,0BAAY,KAACO;wBAAIC,WAAW3B,OAAOe,MAAM;kCAAGA;;;;YAGzDC,uBAAS,KAACU;gBAAIC,WAAW3B,OAAOgB,KAAK;0BAAGA;;;;AAG/C"}
1	+ {"version":3,"sources":["../../../../../../src/components/Snackbar/subcomponents/Basic/Basic.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../../hooks/useAdaptivity';\nimport type { HTMLAttributesWithRootRef } from '../../../../types';\nimport { RootComponent } from '../../../RootComponent/RootComponent';\nimport { Paragraph } from '../../../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../../../Typography/Subhead/Subhead';\nimport styles from './Basic.module.css';\n\nconst stylesLayout = {\n none: styles.layoutNone,\n vertical: styles.layoutVertical,\n horizontal: styles.layoutHorizontal,\n};\n\nconst densityClassNames = {\n none: styles.densityNone,\n regular: styles.densityRegular,\n};\n\nexport interface BasicProps {\n /*\n Элемент действия.\n * Не может использоваться одновременно с `subtitle`.\n /\n action?: React.ReactNode \| undefined;\n\n /\n Контент в правой части, может быть иконкой 24x24.\n /\n after?: React.ReactNode \| undefined;\n\n /\n Варианты расположения кнопки действия\n * По умолчанию на десктопах, или при наличии элементов `after` или `subtitle`\n * имеет значение `vertical`, в остальных случаях `horizontal`.\n /\n layout?: 'vertical' \| 'horizontal' \| undefined;\n\n /\n Может быть следующими компонентами:\n * - цветная иконка 24x24 или 28x28 пикселя\n * - `<Avatar size={32} />`\n * - `<Image size={40} />`.\n /\n before?: React.ReactNode \| undefined;\n\n /\n Задает стиль снекбара.\n /\n mode?: 'default' \| 'dark' \| undefined;\n\n /\n Дополнительная строка текста под `children`.\n * Не может использоваться одновременно с `action`.\n */\n subtitle?: React.ReactNode \| undefined;\n}\n\nexport interface SnackbarBasicProps extends HTMLAttributesWithRootRef<HTMLDivElement>, BasicProps {}\n\nexport function Basic({\n layout: layoutProps,\n action,\n after,\n before,\n mode,\n subtitle,\n children,\n ...restProps\n}: SnackbarBasicProps): React.ReactNode {\n const { density = 'none' } = useAdaptivity();\n const layout = after \|\| subtitle ? 'vertical' : 'none';\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles.body,\n stylesLayout[layoutProps \|\| layout],\n density !== 'compact' && densityClassNames[density],\n mode === 'dark' && styles.modeDark,\n )}\n >\n {before && <div className={styles.before}>{before}</div>}\n\n <div className={styles.content}>\n <Paragraph className={styles.contentText}>{children}</Paragraph>\n {subtitle && !action && <Subhead className={styles.contentSubtitle}>{subtitle}</Subhead>}\n\n {action && !subtitle && <div className={styles.action}>{action}</div>}\n </div>\n\n {after && <div className={styles.after}>{after}</div>}\n </RootComponent>\n );\n}\n"],"names":["classNames","useAdaptivity","RootComponent","Paragraph","Subhead","styles","stylesLayout","none","layoutNone","vertical","layoutVertical","horizontal","layoutHorizontal","densityClassNames","densityNone","regular","densityRegular","Basic","layout","layoutProps","action","after","before","mode","subtitle","children","restProps","density","baseClassName","body","modeDark","div","className","content","contentText","contentSubtitle"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,qCAAkC;AAEhE,SAASC,aAAa,QAAQ,0CAAuC;AACrE,SAASC,SAAS,QAAQ,6CAA0C;AACpE,SAASC,OAAO,QAAQ,yCAAsC;AAC9D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,eAAe;IACnBC,MAAMF,OAAOG,UAAU;IACvBC,UAAUJ,OAAOK,cAAc;IAC/BC,YAAYN,OAAOO,gBAAgB;AACrC;AAEA,MAAMC,oBAAoB;IACxBN,MAAMF,OAAOS,WAAW;IACxBC,SAASV,OAAOW,cAAc;AAChC;AA2CA,OAAO,SAASC,MAAM,EACpBC,QAAQC,WAAW,EACnBC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACgB;IACnB,MAAM,EAAEC,UAAU,MAAM,EAAE,GAAG1B;IAC7B,MAAMiB,SAASG,SAASG,WAAW,aAAa;IAEhD,qBACE,MAACtB;QACE,GAAGwB,SAAS;QACbE,eAAe5B,WACbK,OAAOwB,IAAI,EACXvB,YAAY,CAACa,eAAeD,OAAO,EACnCS,YAAY,aAAad,iBAAiB,CAACc,QAAQ,EACnDJ,SAAS,UAAUlB,OAAOyB,QAAQ;;YAGnCR,wBAAU,KAACS;gBAAIC,WAAW3B,OAAOiB,MAAM;0BAAGA;;0BAE3C,MAACS;gBAAIC,WAAW3B,OAAO4B,OAAO;;kCAC5B,KAAC9B;wBAAU6B,WAAW3B,OAAO6B,WAAW;kCAAGT;;oBAC1CD,YAAY,CAACJ,wBAAU,KAAChB;wBAAQ4B,WAAW3B,OAAO8B,eAAe;kCAAGX;;oBAEpEJ,UAAU,CAACI,0BAAY,KAACO;wBAAIC,WAAW3B,OAAOe,MAAM;kCAAGA;;;;YAGzDC,uBAAS,KAACU;gBAAIC,WAAW3B,OAAOgB,KAAK;0BAAGA;;;;AAG/C"}

package/dist/cssm/components/Snackbar/subcomponents/Basic/Basic.module.css CHANGED Viewed

@@ -106,14 +106,12 @@
 }
 @media (min-width: 768px) {
-  .layoutNone .content,
-  .layoutVerticalMq .content {
+  .layoutNone .content {
     flex-direction: column;
     align-items: flex-start;
   }
-  .layoutNone .action,
-  .layoutVerticalMq .action {
+  .layoutNone .action {
     min-block-size: initial;
     margin-block-start: 2px;
     margin-block-end: var(--vkui_internal--snackbar-body_layout_vertical_action_shift);

package/dist/cssm/components/Snackbar/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Snackbar/utils.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { MediaQueries } from '../../lib/adaptivity';\nimport { rubberbandIfOutOfBounds } from '../../lib/animation';\nimport type { ShiftData, SnackbarPlacement } from './types';\n\nexport function resolveOffsetYCssStyle(\n placement: SnackbarPlacement,\n offsetY?: React.CSSProperties['inset'],\n): React.CSSProperties \| undefined {\n if (offsetY === undefined) {\n return undefined;\n }\n switch (placement) {\n case 'top-start':\n case 'top':\n case 'top-end':\n return { top: offsetY };\n case 'bottom-start':\n case 'bottom':\n case 'bottom-end':\n return { bottom: offsetY };\n }\n}\n\nexport function revertRtlValue(value: number, isRtl: boolean) {\n return isRtl ? -1 * value : value;\n}\n\nexport function getInitialShiftData(\n width: number,\n height: number,\n mediaQueries: MediaQueries,\n): ShiftData {\n return {\n shifted: false,\n direction: null,\n isDesktop: mediaQueries.smallTabletPlus.matches, // eslint-disable-line no-restricted-properties,\n x: 0,\n y: 0,\n width,\n height,\n };\n}\n\nexport function getMovedShiftData(\n placement: SnackbarPlacement,\n shiftData: ShiftData,\n nextShift: { x: number; y: number },\n isRtl = false,\n): ShiftData {\n /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches /\n if (shiftData.isDesktop) {\n if (placement.endsWith('start')) {\n shiftData.x = isRtl\n ? rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width)\n : rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);\n } else if (placement.endsWith('end')) {\n shiftData.x = isRtl\n ? rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0)\n : rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width);\n }\n\n if (placement.startsWith('bottom')) {\n shiftData.y = rubberbandIfOutOfBounds(nextShift.y, 0, shiftData.height);\n }\n } else if (placement.startsWith('bottom')) {\n shiftData.x = nextShift.x;\n\n const movingToLeft = nextShift.x < 0 ? -1 : null;\n const movingToRight = nextShift.x > 0 ? 1 : null;\n shiftData.direction = movingToLeft \|\| movingToRight;\n }\n\n if (placement.startsWith('top')) {\n shiftData.y = rubberbandIfOutOfBounds(nextShift.y, -shiftData.height, 0);\n }\n\n shiftData.shifted = true;\n\n return shiftData;\n}\n\nconst MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE = 200;\n\nexport function shouldBeClosedByShiftData(\n placement: SnackbarPlacement,\n shiftData: ShiftData,\n relativeClientRect: DOMRect,\n velocity: { x: number; y: number },\n isRtl = false,\n): boolean {\n if (!shiftData.shifted) {\n return false;\n }\n\n const shouldBeClosedThreshold = { x: false, y: false };\n const shouldBeClosedByVelocity = { x: false, y: false };\n\n / istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches /\n if (shiftData.isDesktop) {\n if (placement.endsWith('start')) {\n shouldBeClosedThreshold.x =\n revertRtlValue(relativeClientRect.x, isRtl) < -relativeClientRect.width / 2;\n shouldBeClosedByVelocity.x =\n revertRtlValue(relativeClientRect.x, isRtl) < 0\n ? revertRtlValue(velocity.x, isRtl) <\n revertRtlValue(-MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE, isRtl)\n : false;\n } else if (placement.endsWith('end')) {\n shouldBeClosedThreshold.x =\n revertRtlValue(relativeClientRect.x, isRtl) > relativeClientRect.width / 2;\n shouldBeClosedByVelocity.x =\n revertRtlValue(relativeClientRect.x, isRtl) > 0\n ? revertRtlValue(velocity.x, isRtl) >\n revertRtlValue(MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE, isRtl)\n : false;\n }\n\n if (placement.startsWith('bottom')) {\n shouldBeClosedThreshold.y = relativeClientRect.y > relativeClientRect.height / 2;\n shouldBeClosedByVelocity.y =\n relativeClientRect.y > 0 ? velocity.y > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n }\n } else if (placement.startsWith('bottom')) {\n shouldBeClosedThreshold.x =\n relativeClientRect.x < -relativeClientRect.width / 2 \|\|\n relativeClientRect.x > relativeClientRect.width / 2;\n shouldBeClosedByVelocity.x =\n (relativeClientRect.x < 0 && velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE) \|\|\n (relativeClientRect.x > 0 && velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE);\n }\n\n if (placement.startsWith('top')) {\n shouldBeClosedThreshold.y = relativeClientRect.y < -relativeClientRect.height / 2;\n shouldBeClosedByVelocity.y =\n relativeClientRect.y < 0 ? velocity.y < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n }\n\n return (\n shouldBeClosedThreshold.x \|\|\n shouldBeClosedByVelocity.x \|\|\n shouldBeClosedThreshold.y \|\|\n / istanbul ignore next: подсвечивает жёлтым и пишет \"branch not covered\" */\n shouldBeClosedByVelocity.y\n );\n}\n"],"names":["rubberbandIfOutOfBounds","resolveOffsetYCssStyle","placement","offsetY","undefined","top","bottom","revertRtlValue","value","isRtl","getInitialShiftData","width","height","mediaQueries","shifted","direction","isDesktop","smallTabletPlus","matches","x","y","getMovedShiftData","shiftData","nextShift","endsWith","startsWith","movingToLeft","movingToRight","MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE","shouldBeClosedByShiftData","relativeClientRect","velocity","shouldBeClosedThreshold","shouldBeClosedByVelocity"],"mappings":"AAEA,SAASA,uBAAuB,QAAQ,+BAAsB;AAG9D,OAAO,SAASC,uBACdC,SAA4B,EAC5BC,~~OAAsC~~;~~IAEtC~~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"}
1	+ {"version":3,"sources":["../../../../src/components/Snackbar/utils.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { MediaQueries } from '../../lib/adaptivity';\nimport { rubberbandIfOutOfBounds } from '../../lib/animation';\nimport type { ShiftData, SnackbarPlacement } from './types';\n\nexport function resolveOffsetYCssStyle(\n placement: SnackbarPlacement,\n offsetY?: React.CSSProperties['inset'] \| undefined,\n): React.CSSProperties \| undefined {\n if (offsetY === undefined) {\n return undefined;\n }\n switch (placement) {\n case 'top-start':\n case 'top':\n case 'top-end':\n return { top: offsetY };\n case 'bottom-start':\n case 'bottom':\n case 'bottom-end':\n return { bottom: offsetY };\n }\n}\n\nexport function revertRtlValue(value: number, isRtl: boolean) {\n return isRtl ? -1 * value : value;\n}\n\nexport function getInitialShiftData(\n width: number,\n height: number,\n mediaQueries: MediaQueries,\n): ShiftData {\n return {\n shifted: false,\n direction: null,\n isDesktop: mediaQueries.smallTabletPlus.matches, // eslint-disable-line no-restricted-properties,\n x: 0,\n y: 0,\n width,\n height,\n };\n}\n\nexport function getMovedShiftData(\n placement: SnackbarPlacement,\n shiftData: ShiftData,\n nextShift: { x: number; y: number },\n isRtl = false,\n): ShiftData {\n /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches /\n if (shiftData.isDesktop) {\n if (placement.endsWith('start')) {\n shiftData.x = isRtl\n ? rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width)\n : rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);\n } else if (placement.endsWith('end')) {\n shiftData.x = isRtl\n ? rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0)\n : rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width);\n }\n\n if (placement.startsWith('bottom')) {\n shiftData.y = rubberbandIfOutOfBounds(nextShift.y, 0, shiftData.height);\n }\n } else if (placement.startsWith('bottom')) {\n shiftData.x = nextShift.x;\n\n const movingToLeft = nextShift.x < 0 ? -1 : null;\n const movingToRight = nextShift.x > 0 ? 1 : null;\n shiftData.direction = movingToLeft \|\| movingToRight;\n }\n\n if (placement.startsWith('top')) {\n shiftData.y = rubberbandIfOutOfBounds(nextShift.y, -shiftData.height, 0);\n }\n\n shiftData.shifted = true;\n\n return shiftData;\n}\n\nconst MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE = 200;\n\nexport function shouldBeClosedByShiftData(\n placement: SnackbarPlacement,\n shiftData: ShiftData,\n relativeClientRect: DOMRect,\n velocity: { x: number; y: number },\n isRtl = false,\n): boolean {\n if (!shiftData.shifted) {\n return false;\n }\n\n const shouldBeClosedThreshold = { x: false, y: false };\n const shouldBeClosedByVelocity = { x: false, y: false };\n\n / istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches /\n if (shiftData.isDesktop) {\n if (placement.endsWith('start')) {\n shouldBeClosedThreshold.x =\n revertRtlValue(relativeClientRect.x, isRtl) < -relativeClientRect.width / 2;\n shouldBeClosedByVelocity.x =\n revertRtlValue(relativeClientRect.x, isRtl) < 0\n ? revertRtlValue(velocity.x, isRtl) <\n revertRtlValue(-MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE, isRtl)\n : false;\n } else if (placement.endsWith('end')) {\n shouldBeClosedThreshold.x =\n revertRtlValue(relativeClientRect.x, isRtl) > relativeClientRect.width / 2;\n shouldBeClosedByVelocity.x =\n revertRtlValue(relativeClientRect.x, isRtl) > 0\n ? revertRtlValue(velocity.x, isRtl) >\n revertRtlValue(MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE, isRtl)\n : false;\n }\n\n if (placement.startsWith('bottom')) {\n shouldBeClosedThreshold.y = relativeClientRect.y > relativeClientRect.height / 2;\n shouldBeClosedByVelocity.y =\n relativeClientRect.y > 0 ? velocity.y > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n }\n } else if (placement.startsWith('bottom')) {\n shouldBeClosedThreshold.x =\n relativeClientRect.x < -relativeClientRect.width / 2 \|\|\n relativeClientRect.x > relativeClientRect.width / 2;\n shouldBeClosedByVelocity.x =\n (relativeClientRect.x < 0 && velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE) \|\|\n (relativeClientRect.x > 0 && velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE);\n }\n\n if (placement.startsWith('top')) {\n shouldBeClosedThreshold.y = relativeClientRect.y < -relativeClientRect.height / 2;\n shouldBeClosedByVelocity.y =\n relativeClientRect.y < 0 ? velocity.y < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;\n }\n\n return (\n shouldBeClosedThreshold.x \|\|\n shouldBeClosedByVelocity.x \|\|\n shouldBeClosedThreshold.y \|\|\n / istanbul ignore next: подсвечивает жёлтым и пишет \"branch not covered\" */\n shouldBeClosedByVelocity.y\n );\n}\n"],"names":["rubberbandIfOutOfBounds","resolveOffsetYCssStyle","placement","offsetY","undefined","top","bottom","revertRtlValue","value","isRtl","getInitialShiftData","width","height","mediaQueries","shifted","direction","isDesktop","smallTabletPlus","matches","x","y","getMovedShiftData","shiftData","nextShift","endsWith","startsWith","movingToLeft","movingToRight","MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE","shouldBeClosedByShiftData","relativeClientRect","velocity","shouldBeClosedThreshold","shouldBeClosedByVelocity"],"mappings":"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"}

package/dist/cssm/components/Spacing/Spacing.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { resolveSpacingSize, type SpacingSizeProp } from '../../lib/spacings/sizes';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--spacing_size';\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Высота спэйсинга.\n \n Принимает значения дизайн-системы, числовые значения и css-переменные.\n /\n size?: SpacingSizeProp;\n /\n @deprecated 7.0.0.Будет удалeно в VKUI v9.\n /\n children?: React.ReactNode; // TODO [>=9]: удалить неиспользуемое свойство\n}\n/\n @see https://vkui.io/components/spacing\n */\nexport const Spacing = ({ size = 'm', ...restProps }: SpacingProps): React.ReactNode => {\n const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(\n CUSTOM_CSS_TOKEN_FOR_USER_GAP,\n size,\n );\n return (\n <RootComponent\n {...restProps}\n baseStyle={spacingSizeStyle}\n baseClassName={classNames(styles.host, spacingSizeClassName)}\n />\n );\n};\n"],"names":["classNames","resolveSpacingSize","RootComponent","styles","CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","size","restProps","spacingSizeClassName","spacingSizeStyle","baseStyle","baseClassName","host"],"mappings":";AACA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,gCAAgC,gCAAgC;AAc7E;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,OAAO,GAAG,EAAE,GAAGC,WAAyB;IAChE,MAAM,CAACC,sBAAsBC,iBAAiB,GAAGR,mBAC/CG,+BACAE;IAEF,qBACE,KAACJ;QACE,GAAGK,SAAS;QACbG,WAAWD;QACXE,eAAeX,WAAWG,OAAOS,IAAI,EAAEJ;;AAG7C,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { resolveSpacingSize, type SpacingSizeProp } from '../../lib/spacings/sizes';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--spacing_size';\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Высота спэйсинга.\n \n Принимает значения дизайн-системы, числовые значения и css-переменные.\n /\n size?: SpacingSizeProp \| undefined;\n /\n @deprecated 7.0.0.Будет удалeно в VKUI v9.\n /\n children?: React.ReactNode \| undefined; // TODO [>=9]: удалить неиспользуемое свойство\n}\n/\n @see https://vkui.io/components/spacing\n */\nexport const Spacing = ({ size = 'm', ...restProps }: SpacingProps): React.ReactNode => {\n const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(\n CUSTOM_CSS_TOKEN_FOR_USER_GAP,\n size,\n );\n return (\n <RootComponent\n {...restProps}\n baseStyle={spacingSizeStyle}\n baseClassName={classNames(styles.host, spacingSizeClassName)}\n />\n );\n};\n"],"names":["classNames","resolveSpacingSize","RootComponent","styles","CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","size","restProps","spacingSizeClassName","spacingSizeStyle","baseStyle","baseClassName","host"],"mappings":";AACA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,gCAAgC,gCAAgC;AAc7E;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,OAAO,GAAG,EAAE,GAAGC,WAAyB;IAChE,MAAM,CAACC,sBAAsBC,iBAAiB,GAAGR,mBAC/CG,+BACAE;IAEF,qBACE,KAACJ;QACE,GAAGK,SAAS;QACbG,WAAWD;QACXE,eAAeX,WAAWG,OAAOS,IAAI,EAAEJ;;AAG7C,EAAE"}

package/dist/cssm/components/Spinner/Spinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { animationVisibilityDelayStyles } from '../../styles/animationVisibilityDelay';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { SpinnerAnimation } from './SpinnerAnimation';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from './icons';\nimport styles from './Spinner.module.css';\nimport stylesDelay from '../../styles/animationVisibilityDelay.module.css';\n\nconst spinnerIconMap = {\n s: Icon16Spinner,\n m: Icon24Spinner,\n l: Icon32Spinner,\n xl: Icon44Spinner,\n};\n\nexport interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n /*\n Размер спиннера.\n /\n size?: 's' \| 'm' \| 'l' \| 'xl';\n /\n Отключение анимации.\n /\n disableAnimation?: boolean;\n /\n Задать цвет можно будет через свойство color родителя.\n /\n noColor?: boolean;\n /\n Задерживает отрисовку элемента на заданное количество миллисекунд.\n /\n visibilityDelay?: number;\n}\n\n/\n @see https://vkui.io/components/spinner\n */\n// eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames\nexport const Spinner = React.memo(\n ({\n size = 'm',\n children = 'Загружается...',\n disableAnimation = false,\n noColor = false,\n visibilityDelay,\n ...restProps\n }: SpinnerProps) => {\n const SpinnerIcon = spinnerIconMap[size];\n\n return (\n <RootComponent\n Component=\"span\"\n role=\"status\"\n {...restProps}\n baseClassName={classNames(\n styles.host,\n noColor && styles.noColor,\n visibilityDelay && stylesDelay.visibilityDelay,\n )}\n baseStyle={animationVisibilityDelayStyles(visibilityDelay)}\n >\n <SpinnerIcon>{disableAnimation ? null : <SpinnerAnimation size={size} />}</SpinnerIcon>\n {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}\n </RootComponent>\n );\n },\n);\n\nif (process.env.NODE_ENV !== 'production') {\n defineComponentDisplayNames(Spinner, 'Spinner');\n}\n"],"names":["React","classNames","hasReactNode","defineComponentDisplayNames","animationVisibilityDelayStyles","RootComponent","VisuallyHidden","SpinnerAnimation","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","styles","stylesDelay","spinnerIconMap","s","m","l","xl","Spinner","memo","size","children","disableAnimation","noColor","visibilityDelay","restProps","SpinnerIcon","Component","role","baseClassName","host","baseStyle","process","env","NODE_ENV"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,2BAA2B,QAAQ,iDAA8C;AAC1F,SAASC,8BAA8B,QAAQ,2CAAwC;AAEvF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,aAAU;AACrF,OAAOC,YAAY,uBAAuB;AAC1C,OAAOC,iBAAiB,mDAAmD;AAE3E,MAAMC,iBAAiB;IACrBC,GAAGP;IACHQ,GAAGP;IACHQ,GAAGP;IACHQ,IAAIP;AACN;AAqBA;;CAEC,GACD,0FAA0F;AAC1F,OAAO,MAAMQ,wBAAUnB,MAAMoB,IAAI,CAC/B,CAAC,EACCC,OAAO,GAAG,EACVC,WAAW,gBAAgB,EAC3BC,mBAAmB,KAAK,EACxBC,UAAU,KAAK,EACfC,eAAe,EACf,GAAGC,WACU;IACb,MAAMC,cAAcb,cAAc,CAACO,KAAK;IAExC,qBACE,MAAChB;QACCuB,WAAU;QACVC,MAAK;QACJ,GAAGH,SAAS;QACbI,eAAe7B,WACbW,OAAOmB,IAAI,EACXP,WAAWZ,OAAOY,OAAO,EACzBC,mBAAmBZ,YAAYY,eAAe;QAEhDO,WAAW5B,+BAA+BqB;;0BAE1C,KAACE;0BAAaJ,mBAAmB,qBAAO,KAAChB;oBAAiBc,MAAMA;;;YAC/DnB,aAAaoB,2BAAa,KAAChB;0BAAgBgB;;;;AAGlD,GACA;AAEF,IAAIW,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzChC,4BAA4BgB,SAAS;AACvC"}
1	+ {"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { animationVisibilityDelayStyles } from '../../styles/animationVisibilityDelay';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { SpinnerAnimation } from './SpinnerAnimation';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from './icons';\nimport styles from './Spinner.module.css';\nimport stylesDelay from '../../styles/animationVisibilityDelay.module.css';\n\nconst spinnerIconMap = {\n s: Icon16Spinner,\n m: Icon24Spinner,\n l: Icon32Spinner,\n xl: Icon44Spinner,\n};\n\nexport interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n /*\n Размер спиннера.\n /\n size?: 's' \| 'm' \| 'l' \| 'xl' \| undefined;\n /\n Отключение анимации.\n /\n disableAnimation?: boolean \| undefined;\n /\n Задать цвет можно будет через свойство color родителя.\n /\n noColor?: boolean \| undefined;\n /\n Задерживает отрисовку элемента на заданное количество миллисекунд.\n /\n visibilityDelay?: number \| undefined;\n}\n\n/\n @see https://vkui.io/components/spinner\n */\n// eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames\nexport const Spinner = React.memo(\n ({\n size = 'm',\n children = 'Загружается...',\n disableAnimation = false,\n noColor = false,\n visibilityDelay,\n ...restProps\n }: SpinnerProps) => {\n const SpinnerIcon = spinnerIconMap[size];\n\n return (\n <RootComponent\n Component=\"span\"\n role=\"status\"\n {...restProps}\n baseClassName={classNames(\n styles.host,\n noColor && styles.noColor,\n visibilityDelay && stylesDelay.visibilityDelay,\n )}\n baseStyle={animationVisibilityDelayStyles(visibilityDelay)}\n >\n <SpinnerIcon>{disableAnimation ? null : <SpinnerAnimation size={size} />}</SpinnerIcon>\n {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}\n </RootComponent>\n );\n },\n);\n\nif (process.env.NODE_ENV !== 'production') {\n defineComponentDisplayNames(Spinner, 'Spinner');\n}\n"],"names":["React","classNames","hasReactNode","defineComponentDisplayNames","animationVisibilityDelayStyles","RootComponent","VisuallyHidden","SpinnerAnimation","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","styles","stylesDelay","spinnerIconMap","s","m","l","xl","Spinner","memo","size","children","disableAnimation","noColor","visibilityDelay","restProps","SpinnerIcon","Component","role","baseClassName","host","baseStyle","process","env","NODE_ENV"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,2BAA2B,QAAQ,iDAA8C;AAC1F,SAASC,8BAA8B,QAAQ,2CAAwC;AAEvF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,aAAU;AACrF,OAAOC,YAAY,uBAAuB;AAC1C,OAAOC,iBAAiB,mDAAmD;AAE3E,MAAMC,iBAAiB;IACrBC,GAAGP;IACHQ,GAAGP;IACHQ,GAAGP;IACHQ,IAAIP;AACN;AAqBA;;CAEC,GACD,0FAA0F;AAC1F,OAAO,MAAMQ,wBAAUnB,MAAMoB,IAAI,CAC/B,CAAC,EACCC,OAAO,GAAG,EACVC,WAAW,gBAAgB,EAC3BC,mBAAmB,KAAK,EACxBC,UAAU,KAAK,EACfC,eAAe,EACf,GAAGC,WACU;IACb,MAAMC,cAAcb,cAAc,CAACO,KAAK;IAExC,qBACE,MAAChB;QACCuB,WAAU;QACVC,MAAK;QACJ,GAAGH,SAAS;QACbI,eAAe7B,WACbW,OAAOmB,IAAI,EACXP,WAAWZ,OAAOY,OAAO,EACzBC,mBAAmBZ,YAAYY,eAAe;QAEhDO,WAAW5B,+BAA+BqB;;0BAE1C,KAACE;0BAAaJ,mBAAmB,qBAAO,KAAChB;oBAAiBc,MAAMA;;;YAC/DnB,aAAaoB,2BAAa,KAAChB;0BAAgBgB;;;;AAGlD,GACA;AAEF,IAAIW,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzChC,4BAA4BgB,SAAS;AACvC"}

package/dist/cssm/components/SplitCol/SplitCol.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n none: classNames(styles.viewWidthNone, 'vkuiInternalSplitCol--viewWidth-none'),\n tabletMinus: styles.viewWidthTabletMinus,\n smallTabletPlus: styles.viewWidthSmallTabletPlus,\n tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n const { viewWidth } = useAdaptivity();\n const [animate, setAnimate] = React.useState(Boolean(animateProp));\n const mediaQueries = useMediaQueries();\n\n React.useEffect(() => {\n if (animateProp !== undefined) {\n setAnimate(animateProp);\n return;\n }\n\n if (viewWidth !== undefined) {\n setAnimate(viewWidth < ViewWidth.TABLET);\n return;\n }\n\n // eslint-disable-next-line no-restricted-properties\n const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n listener();\n\n mediaQueries.smallTabletPlus.addEventListener('change', listener);\n return () => {\n mediaQueries.smallTabletPlus.removeEventListener('change', listener);\n };\n }, [animateProp, viewWidth, mediaQueries]);\n\n return animate;\n}\n\nexport interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Ширина колонки.\n /\n width?: number \| string;\n /\n Максимальная ширина колонки.\n /\n maxWidth?: number \| string;\n /\n Минимальная ширина колонки.\n /\n minWidth?: number \| string;\n /\n Если false, то переходы между Panel происходят без анимации.\n /\n animate?: boolean;\n /\n Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`.\n /\n autoSpaced?: boolean;\n /\n Фиксированное положение колонки.\n /\n fixed?: boolean;\n /\n Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`.\n /\n stretchedOnMobile?: boolean;\n}\n\n/\n @see https://vkui.io/components/split-layout#split-col\n */\nexport const SplitCol = (props: SplitColProps): React.ReactNode => {\n const {\n children,\n width,\n maxWidth,\n minWidth,\n animate: animateProp,\n fixed,\n autoSpaced,\n stretchedOnMobile,\n getRootRef,\n ...restProps\n } = props;\n const baseRef = useExternRef(getRootRef);\n const { viewWidth } = useAdaptivity();\n const animate = useTransitionAnimate(animateProp);\n\n const contextValue = React.useMemo(\n () => ({\n colRef: baseRef,\n animate,\n }),\n [animate, baseRef],\n );\n\n return (\n <RootComponent\n {...restProps}\n baseStyle={{\n width,\n maxWidth,\n minWidth,\n }}\n getRootRef={baseRef}\n baseClassName={classNames(\n styles.host,\n viewWidthToClassName(breakpointClassNames, viewWidth),\n autoSpaced && classNames(styles.spacedAuto, 'vkuiInternalSplitCol--spaced-auto'),\n fixed && styles.fixed,\n stretchedOnMobile && styles.stretchedOnMobile,\n )}\n >\n <SplitColContext.Provider value={contextValue}>\n {fixed ? <div className={styles.fixedInner}>{children}</div> : children}\n </SplitColContext.Provider>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useMediaQueries","ViewWidth","viewWidthToClassName","RootComponent","SplitColContext","styles","breakpointClassNames","none","viewWidthNone","tabletMinus","viewWidthTabletMinus","smallTabletPlus","viewWidthSmallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","addEventListener","removeEventListener","SplitCol","props","children","width","maxWidth","minWidth","fixed","autoSpaced","stretchedOnMobile","getRootRef","restProps","baseRef","contextValue","useMemo","colRef","baseStyle","baseClassName","host","spacedAuto","Provider","value","div","className","fixedInner"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,gCAAuB;AAEvE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,eAAe,QAAQ,uBAAoB;AACpD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,uBAAuB;IAC3BC,MAAMV,WAAWQ,OAAOG,aAAa,EAAE;IACvCC,aAAaJ,OAAOK,oBAAoB;IACxCC,iBAAiBN,OAAOO,wBAAwB;IAChDC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,SAAS,EAAE,GAAGlB;IACtB,MAAM,CAACmB,SAASC,WAAW,GAAGtB,MAAMuB,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAerB;IAErBJ,MAAM0B,SAAS,CAAC;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYf,UAAUuB,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaV,eAAe,CAACe,OAAO;QACvED;QAEAJ,aAAaV,eAAe,CAACgB,gBAAgB,CAAC,UAAUF;QACxD,OAAO;YACLJ,aAAaV,eAAe,CAACiB,mBAAmB,CAAC,UAAUH;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AAiCA;;CAEC,GACD,OAAO,MAAMY,WAAW,CAACC;IACvB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRjB,SAASF,WAAW,EACpBoB,KAAK,EACLC,UAAU,EACVC,iBAAiB,EACjBC,UAAU,EACV,GAAGC,WACJ,GAAGT;IACJ,MAAMU,UAAUzC,aAAauC;IAC7B,MAAM,EAAEtB,SAAS,EAAE,GAAGlB;IACtB,MAAMmB,UAAUH,qBAAqBC;IAErC,MAAM0B,eAAe7C,MAAM8C,OAAO,CAChC,IAAO,CAAA;YACLC,QAAQH;YACRvB;QACF,CAAA,GACA;QAACA;QAASuB;KAAQ;IAGpB,qBACE,KAACrC;QACE,GAAGoC,SAAS;QACbK,WAAW;YACTZ;YACAC;YACAC;QACF;QACAI,YAAYE;QACZK,eAAehD,WACbQ,OAAOyC,IAAI,EACX5C,qBAAqBI,sBAAsBU,YAC3CoB,cAAcvC,WAAWQ,OAAO0C,UAAU,EAAE,sCAC5CZ,SAAS9B,OAAO8B,KAAK,EACrBE,qBAAqBhC,OAAOgC,iBAAiB;kBAG/C,cAAA,KAACjC,gBAAgB4C,QAAQ;YAACC,OAAOR;sBAC9BN,sBAAQ,KAACe;gBAAIC,WAAW9C,OAAO+C,UAAU;0BAAGrB;iBAAkBA;;;AAIvE,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n none: classNames(styles.viewWidthNone, 'vkuiInternalSplitCol--viewWidth-none'),\n tabletMinus: styles.viewWidthTabletMinus,\n smallTabletPlus: styles.viewWidthSmallTabletPlus,\n tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n const { viewWidth } = useAdaptivity();\n const [animate, setAnimate] = React.useState(Boolean(animateProp));\n const mediaQueries = useMediaQueries();\n\n React.useEffect(() => {\n if (animateProp !== undefined) {\n setAnimate(animateProp);\n return;\n }\n\n if (viewWidth !== undefined) {\n setAnimate(viewWidth < ViewWidth.TABLET);\n return;\n }\n\n // eslint-disable-next-line no-restricted-properties\n const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n listener();\n\n mediaQueries.smallTabletPlus.addEventListener('change', listener);\n return () => {\n mediaQueries.smallTabletPlus.removeEventListener('change', listener);\n };\n }, [animateProp, viewWidth, mediaQueries]);\n\n return animate;\n}\n\nexport interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Ширина колонки.\n /\n width?: number \| string \| undefined;\n /\n Максимальная ширина колонки.\n /\n maxWidth?: number \| string \| undefined;\n /\n Минимальная ширина колонки.\n /\n minWidth?: number \| string \| undefined;\n /\n Если false, то переходы между Panel происходят без анимации.\n /\n animate?: boolean \| undefined;\n /\n Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`.\n /\n autoSpaced?: boolean \| undefined;\n /\n Фиксированное положение колонки.\n /\n fixed?: boolean \| undefined;\n /\n Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`.\n /\n stretchedOnMobile?: boolean \| undefined;\n}\n\n/\n @see https://vkui.io/components/split-layout#split-col\n */\nexport const SplitCol = (props: SplitColProps): React.ReactNode => {\n const {\n children,\n width,\n maxWidth,\n minWidth,\n animate: animateProp,\n fixed,\n autoSpaced,\n stretchedOnMobile,\n getRootRef,\n ...restProps\n } = props;\n const baseRef = useExternRef(getRootRef);\n const { viewWidth } = useAdaptivity();\n const animate = useTransitionAnimate(animateProp);\n\n const contextValue = React.useMemo(\n () => ({\n colRef: baseRef,\n animate,\n }),\n [animate, baseRef],\n );\n\n return (\n <RootComponent\n {...restProps}\n baseStyle={{\n width,\n maxWidth,\n minWidth,\n }}\n getRootRef={baseRef}\n baseClassName={classNames(\n styles.host,\n viewWidthToClassName(breakpointClassNames, viewWidth),\n autoSpaced && classNames(styles.spacedAuto, 'vkuiInternalSplitCol--spaced-auto'),\n fixed && styles.fixed,\n stretchedOnMobile && styles.stretchedOnMobile,\n )}\n >\n <SplitColContext.Provider value={contextValue}>\n {fixed ? <div className={styles.fixedInner}>{children}</div> : children}\n </SplitColContext.Provider>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useMediaQueries","ViewWidth","viewWidthToClassName","RootComponent","SplitColContext","styles","breakpointClassNames","none","viewWidthNone","tabletMinus","viewWidthTabletMinus","smallTabletPlus","viewWidthSmallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","addEventListener","removeEventListener","SplitCol","props","children","width","maxWidth","minWidth","fixed","autoSpaced","stretchedOnMobile","getRootRef","restProps","baseRef","contextValue","useMemo","colRef","baseStyle","baseClassName","host","spacedAuto","Provider","value","div","className","fixedInner"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,gCAAuB;AAEvE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,eAAe,QAAQ,uBAAoB;AACpD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,uBAAuB;IAC3BC,MAAMV,WAAWQ,OAAOG,aAAa,EAAE;IACvCC,aAAaJ,OAAOK,oBAAoB;IACxCC,iBAAiBN,OAAOO,wBAAwB;IAChDC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,SAAS,EAAE,GAAGlB;IACtB,MAAM,CAACmB,SAASC,WAAW,GAAGtB,MAAMuB,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAerB;IAErBJ,MAAM0B,SAAS,CAAC;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYf,UAAUuB,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaV,eAAe,CAACe,OAAO;QACvED;QAEAJ,aAAaV,eAAe,CAACgB,gBAAgB,CAAC,UAAUF;QACxD,OAAO;YACLJ,aAAaV,eAAe,CAACiB,mBAAmB,CAAC,UAAUH;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AAiCA;;CAEC,GACD,OAAO,MAAMY,WAAW,CAACC;IACvB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRjB,SAASF,WAAW,EACpBoB,KAAK,EACLC,UAAU,EACVC,iBAAiB,EACjBC,UAAU,EACV,GAAGC,WACJ,GAAGT;IACJ,MAAMU,UAAUzC,aAAauC;IAC7B,MAAM,EAAEtB,SAAS,EAAE,GAAGlB;IACtB,MAAMmB,UAAUH,qBAAqBC;IAErC,MAAM0B,eAAe7C,MAAM8C,OAAO,CAChC,IAAO,CAAA;YACLC,QAAQH;YACRvB;QACF,CAAA,GACA;QAACA;QAASuB;KAAQ;IAGpB,qBACE,KAACrC;QACE,GAAGoC,SAAS;QACbK,WAAW;YACTZ;YACAC;YACAC;QACF;QACAI,YAAYE;QACZK,eAAehD,WACbQ,OAAOyC,IAAI,EACX5C,qBAAqBI,sBAAsBU,YAC3CoB,cAAcvC,WAAWQ,OAAO0C,UAAU,EAAE,sCAC5CZ,SAAS9B,OAAO8B,KAAK,EACrBE,qBAAqBhC,OAAOgC,iBAAiB;kBAG/C,cAAA,KAACjC,gBAAgB4C,QAAQ;YAACC,OAAOR;sBAC9BN,sBAAQ,KAACe;gBAAIC,WAAW9C,OAAO+C,UAAU;0BAAGrB;iBAAkBA;;;AAIvE,EAAE"}

package/dist/cssm/components/SplitLayout/SplitLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasDataAttribute, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SplitLayout.module.css';\n\nconst warn = warnOnce('SplitLayout');\n\nexport interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n @deprecated Since 7.9.0. Будет удалeно в VKUI v9.\n * Вместо этого используйте `slotProps={ content: { getRootRef: ... } }`.\n /\n getRef?: React.Ref<HTMLDivElement~~>;\~~n /\n Свойства, которые можно прокинуть внутрь компонента:\n * - `root`: свойства для прокидывания в корень компонента;\n * - `content`: свойства для прокидывания в контент;.\n /\n slotProps?: {\n root?: React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute;\n content?: React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute;\n };\n /\n Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n \n @deprecated Since 7.0.0. Будет удалeно в VKUI v9.\n * Начиная с VKUI v7 компоненты можно располагать в любом\n * месте приложения в пределах `AppRoot`.\n /\n popout?: React.ReactNode;\n /\n Свойство для отрисовки `ModalRoot`.\n \n @deprecated Since 7.0.0. Будет удалeно в VKUI v9.\n * Начиная с VKUI v7 `ModalRoot` можно располагать в любом\n * месте приложения в пределах `AppRoot`.\n /\n modal?: React.ReactNode;\n /\n Компонент для отрисовки заголовка.\n /\n header?: React.ReactNode;\n /\n Центрирует контент.\n /\n center?: boolean;\n}\n\n/\n @see https://vkui.io/components/split-layout\n /\nexport const SplitLayout = ({\n popout,\n modal,\n header,\n center,\n getRef,\n children,\n\n slotProps,\n ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n / istanbul ignore if: не проверяем в тестах */\n if (process.env.NODE_ENV === 'development') {\n if (getRef) {\n warn(\n 'Свойство `getRef` устаревшее, используйте `slotProps={ content: { getRootRef: ... } }`',\n );\n }\n if (popout) {\n warn(\n 'Свойство `popout` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n );\n }\n if (modal) {\n warn(\n 'Свойство `modal` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n );\n }\n }\n\n const rootRest = useMergeProps(restProps, slotProps?.root);\n const contentRest = useMergeProps({ getRootRef: getRef }, slotProps?.content);\n\n const platform = usePlatform();\n\n return (\n <RootComponent\n baseClassName={classNames(styles.host, platform === 'ios' && styles.ios)}\n {...rootRest}\n >\n {header}\n <RootComponent\n baseClassName={classNames(\n styles.inner,\n !!header && styles.innerHeader,\n center && styles.innerCenter,\n )}\n {...contentRest}\n >\n {children}\n {modal}\n {popout}\n </RootComponent>\n </RootComponent>\n );\n};\n"],"names":["classNames","useMergeProps","usePlatform","warnOnce","RootComponent","styles","warn","SplitLayout","popout","modal","header","center","getRef","children","slotProps","restProps","process","env","NODE_ENV","rootRest","root","contentRest","getRootRef","content","platform","baseClassName","host","ios","inner","innerHeader","innerCenter"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAOH,SAAS;~~AA2CtB~~;;CAEC,GACD,OAAO,MAAMI,cAAc,CAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,MAAM,EACNC,QAAQ,EAERC,SAAS,EACT,GAAGC,WACc;IACjB,6CAA6C,GAC7C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIN,QAAQ;YACVN,KACE;QAEJ;QACA,IAAIE,QAAQ;YACVF,KACE;QAEJ;QACA,IAAIG,OAAO;YACTH,KACE;QAEJ;IACF;IAEA,MAAMa,WAAWlB,cAAcc,WAAWD,WAAWM;IACrD,MAAMC,cAAcpB,cAAc;QAAEqB,YAAYV;IAAO,GAAGE,WAAWS;IAErE,MAAMC,WAAWtB;IAEjB,qBACE,MAACE;QACCqB,eAAezB,WAAWK,OAAOqB,IAAI,EAAEF,aAAa,SAASnB,OAAOsB,GAAG;QACtE,GAAGR,QAAQ;;YAEXT;0BACD,MAACN;gBACCqB,eAAezB,WACbK,OAAOuB,KAAK,EACZ,CAAC,CAAClB,UAAUL,OAAOwB,WAAW,EAC9BlB,UAAUN,OAAOyB,WAAW;gBAE7B,GAAGT,WAAW;;oBAEdR;oBACAJ;oBACAD;;;;;AAIT,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useMergeProps } from '../../hooks/useMergeProps';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasDataAttribute, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SplitLayout.module.css';\n\nconst warn = warnOnce('SplitLayout');\n\nexport interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n @deprecated Since 7.9.0. Будет удалeно в VKUI v9.\n * Вместо этого используйте `slotProps={ content: { getRootRef: ... } }`.\n /\n getRef?: React.Ref<HTMLDivElement> \| undefined;\n /\n Свойства, которые можно прокинуть внутрь компонента:\n * - `root`: свойства для прокидывания в корень компонента;\n * - `content`: свойства для прокидывания в контент;.\n /\n slotProps?:\n \| {\n root?:\n \| (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)\n \| undefined;\n content?:\n \| (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)\n \| undefined;\n }\n \| undefined;\n /\n Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n \n @deprecated Since 7.0.0. Будет удалeно в VKUI v9.\n * Начиная с VKUI v7 компоненты можно располагать в любом\n * месте приложения в пределах `AppRoot`.\n /\n popout?: React.ReactNode \| undefined;\n /\n Свойство для отрисовки `ModalRoot`.\n \n @deprecated Since 7.0.0. Будет удалeно в VKUI v9.\n * Начиная с VKUI v7 `ModalRoot` можно располагать в любом\n * месте приложения в пределах `AppRoot`.\n /\n modal?: React.ReactNode \| undefined;\n /\n Компонент для отрисовки заголовка.\n /\n header?: React.ReactNode \| undefined;\n /\n Центрирует контент.\n /\n center?: boolean \| undefined;\n}\n\n/\n @see https://vkui.io/components/split-layout\n /\nexport const SplitLayout = ({\n popout,\n modal,\n header,\n center,\n getRef,\n children,\n\n slotProps,\n ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n / istanbul ignore if: не проверяем в тестах */\n if (process.env.NODE_ENV === 'development') {\n if (getRef) {\n warn(\n 'Свойство `getRef` устаревшее, используйте `slotProps={ content: { getRootRef: ... } }`',\n );\n }\n if (popout) {\n warn(\n 'Свойство `popout` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n );\n }\n if (modal) {\n warn(\n 'Свойство `modal` устаревшее. Передаваемый элемент можно рендерить в любом месте приложения.',\n );\n }\n }\n\n const rootRest = useMergeProps(restProps, slotProps?.root);\n const contentRest = useMergeProps({ getRootRef: getRef }, slotProps?.content);\n\n const platform = usePlatform();\n\n return (\n <RootComponent\n baseClassName={classNames(styles.host, platform === 'ios' && styles.ios)}\n {...rootRest}\n >\n {header}\n <RootComponent\n baseClassName={classNames(\n styles.inner,\n !!header && styles.innerHeader,\n center && styles.innerCenter,\n )}\n {...contentRest}\n >\n {children}\n {modal}\n {popout}\n </RootComponent>\n </RootComponent>\n );\n};\n"],"names":["classNames","useMergeProps","usePlatform","warnOnce","RootComponent","styles","warn","SplitLayout","popout","modal","header","center","getRef","children","slotProps","restProps","process","env","NODE_ENV","rootRest","root","contentRest","getRootRef","content","platform","baseClassName","host","ios","inner","innerHeader","innerCenter"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAOH,SAAS;AAiDtB;;CAEC,GACD,OAAO,MAAMI,cAAc,CAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNC,MAAM,EACNC,QAAQ,EAERC,SAAS,EACT,GAAGC,WACc;IACjB,6CAA6C,GAC7C,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIN,QAAQ;YACVN,KACE;QAEJ;QACA,IAAIE,QAAQ;YACVF,KACE;QAEJ;QACA,IAAIG,OAAO;YACTH,KACE;QAEJ;IACF;IAEA,MAAMa,WAAWlB,cAAcc,WAAWD,WAAWM;IACrD,MAAMC,cAAcpB,cAAc;QAAEqB,YAAYV;IAAO,GAAGE,WAAWS;IAErE,MAAMC,WAAWtB;IAEjB,qBACE,MAACE;QACCqB,eAAezB,WAAWK,OAAOqB,IAAI,EAAEF,aAAa,SAASnB,OAAOsB,GAAG;QACtE,GAAGR,QAAQ;;YAEXT;0BACD,MAACN;gBACCqB,eAAezB,WACbK,OAAOuB,KAAK,EACZ,CAAC,CAAClB,UAAUL,OAAOwB,WAAW,EAC9BlB,UAAUN,OAAOyB,WAAW;gBAE7B,GAAGT,WAAW;;oBAEdR;oBACAJ;oBACAD;;;;;AAIT,EAAE"}