@vkontakte/vkui 7.4.3 → 7.5.0

package/dist/cssm/components/SimpleGrid/SimpleGrid.js

@@ -15,7 +15,9 @@ const alignClassNames = {
     stretch: styles.alignStretch,
     baseline: styles.alignBaseline
 };
-export const SimpleGrid = ({ columns = 1, gap, margin = 'none', minColWidth, align = 'stretch', ...props })=>{
+/**
+ * @see https://vkui.io/components/simple-grid
+ */ export const SimpleGrid = ({ columns = 1, gap, margin = 'none', minColWidth, align = 'stretch', ...props })=>{
     const style = {};
     const [rowGap, columnGap] = calculateGap(gap);
     if (typeof rowGap === 'number') {

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

@@ -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  rowGapClassNames,\n} from '../../lib/layouts';\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\nexport interface SimpleGridProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {\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\nexport const SimpleGrid = ({\n  columns = 1,\n  gap,\n  margin = 'none',\n  minColWidth,\n  align = 'stretch',\n  ...props\n}: SimpleGridProps) => {\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      {...props}\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      )}\n      baseStyle={style}\n    />\n  );\n};\n"],"names":["classNames","calculateGap","columnGapClassNames","rowGapClassNames","RootComponent","styles","marginClassNames","marginAuto","marginAutoInline","marginAutoBlock","alignClassNames","start","alignStart","end","alignEnd","center","alignCenter","stretch","alignStretch","baseline","alignBaseline","SimpleGrid","columns","gap","margin","minColWidth","align","props","style","rowGap","columnGap","baseClassName","host","withMinWidth","baseStyle"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAEnBC,gBAAgB,QACX,6BAAoB;AAE3B,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;AA+BA,OAAO,MAAMC,aAAa,CAAC,EACzBC,UAAU,CAAC,EACXC,GAAG,EACHC,SAAS,MAAM,EACfC,WAAW,EACXC,QAAQ,SAAS,EACjB,GAAGC,OACa;IAChB,MAAMC,QAA6B,CAAC;IACpC,MAAM,CAACC,QAAQC,UAAU,GAAG7B,aAAasB;IACzC,IAAI,OAAOM,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,GAAGN,SAAS;IACrD,IAAIG,aAAa;QACfG,KAAK,CAAC,iCAAiC,GAAG,GAAGH,YAAY,EAAE,CAAC;IAC9D;IAEA,qBACE,KAACrB;QACE,GAAGuB,KAAK;QACTI,eAAe/B,WACbK,OAAO2B,IAAI,EACXR,WAAW,UAAUlB,gBAAgB,CAACkB,OAAO,EAC7Cd,eAAe,CAACgB,MAAM,EACtBD,eAAepB,OAAO4B,YAAY,EAClC,OAAOH,cAAc,YAAY5B,mBAAmB,CAAC4B,UAAU,EAC/D,OAAOD,WAAW,YAAY1B,gBAAgB,CAAC0B,OAAO;QAExDK,WAAWN;;AAGjB,EAAE"}
+{"version":3,"sources":["../../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapsProp,\n  rowGapClassNames,\n} from '../../lib/layouts';\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\nexport interface SimpleGridProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {\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\n/**\n * @see https://vkui.io/components/simple-grid\n */\nexport const SimpleGrid = ({\n  columns = 1,\n  gap,\n  margin = 'none',\n  minColWidth,\n  align = 'stretch',\n  ...props\n}: SimpleGridProps) => {\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      {...props}\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      )}\n      baseStyle={style}\n    />\n  );\n};\n"],"names":["classNames","calculateGap","columnGapClassNames","rowGapClassNames","RootComponent","styles","marginClassNames","marginAuto","marginAutoInline","marginAutoBlock","alignClassNames","start","alignStart","end","alignEnd","center","alignCenter","stretch","alignStretch","baseline","alignBaseline","SimpleGrid","columns","gap","margin","minColWidth","align","props","style","rowGap","columnGap","baseClassName","host","withMinWidth","baseStyle"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAEnBC,gBAAgB,QACX,6BAAoB;AAE3B,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;AA+BA;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,UAAU,CAAC,EACXC,GAAG,EACHC,SAAS,MAAM,EACfC,WAAW,EACXC,QAAQ,SAAS,EACjB,GAAGC,OACa;IAChB,MAAMC,QAA6B,CAAC;IACpC,MAAM,CAACC,QAAQC,UAAU,GAAG7B,aAAasB;IACzC,IAAI,OAAOM,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,GAAGN,SAAS;IACrD,IAAIG,aAAa;QACfG,KAAK,CAAC,iCAAiC,GAAG,GAAGH,YAAY,EAAE,CAAC;IAC9D;IAEA,qBACE,KAACrB;QACE,GAAGuB,KAAK;QACTI,eAAe/B,WACbK,OAAO2B,IAAI,EACXR,WAAW,UAAUlB,gBAAgB,CAACkB,OAAO,EAC7Cd,eAAe,CAACgB,MAAM,EACtBD,eAAepB,OAAO4B,YAAY,EAClC,OAAOH,cAAc,YAAY5B,mBAAmB,CAAC4B,UAAU,EAC/D,OAAOD,WAAW,YAAY1B,gBAAgB,CAAC0B,OAAO;QAExDK,WAAWN;;AAGjB,EAAE"}

package/dist/cssm/components/Skeleton/Skeleton.js

@@ -92,6 +92,9 @@ const CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';
  * > вписывается в слоты компонентов, которые обычно ожидают текст.
  *
  * @since 6.1.0
+ *
+ * @see https://vkui.io/components/skeleton
+ *
  */ export const Skeleton = ({ width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, children, colorFrom, colorTo, noAnimation = false, duration, margin, getRootRef, visibilityDelay, ...restProps })=>{
     const rootRef = useExternRef(getRootRef);
     const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);

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

@@ -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 { millisecondsInSecond } from 'date-fns/constants';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useStateWithPrev } from '../../hooks/useStateWithPrev';\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, setIsAnimationStarted] = React.useState<boolean>(false);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const syncAnimation = React.useCallback(() => {\n    clearTimeout(timer.current);\n    setIsAnimationStarted(false);\n\n    const durationInMilliseconds = duration * millisecondsInSecond;\n    const delay = durationInMilliseconds - (performance.now() % durationInMilliseconds);\n\n    timer.current = setTimeout(() => setIsAnimationStarted(true), delay);\n\n    return () => clearTimeout(timer.current);\n  }, [duration]);\n\n  React.useEffect(() => {\n    if (disableAnimation) {\n      setIsAnimationStarted(false);\n      return;\n    }\n\n    if (isAnimationStarted) {\n      return;\n    }\n\n    return syncAnimation();\n  }, [disableAnimation, isAnimationStarted, 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 */\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","millisecondsInSecond","mergeStyle","useExternRef","useResizeObserver","useStateWithPrev","useDOM","animationVisibilityDelayStyles","RootComponent","styles","stylesDelay","CUSTOM_PROPERTY_GRADIENT_LEFT","useSkeletonSyncAnimation","disableAnimation","duration","isAnimationStarted","setIsAnimationStarted","useState","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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"}
+{"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { millisecondsInSecond } from 'date-fns/constants';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useStateWithPrev } from '../../hooks/useStateWithPrev';\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, setIsAnimationStarted] = React.useState<boolean>(false);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const syncAnimation = React.useCallback(() => {\n    clearTimeout(timer.current);\n    setIsAnimationStarted(false);\n\n    const durationInMilliseconds = duration * millisecondsInSecond;\n    const delay = durationInMilliseconds - (performance.now() % durationInMilliseconds);\n\n    timer.current = setTimeout(() => setIsAnimationStarted(true), delay);\n\n    return () => clearTimeout(timer.current);\n  }, [duration]);\n\n  React.useEffect(() => {\n    if (disableAnimation) {\n      setIsAnimationStarted(false);\n      return;\n    }\n\n    if (isAnimationStarted) {\n      return;\n    }\n\n    return syncAnimation();\n  }, [disableAnimation, isAnimationStarted, 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","millisecondsInSecond","mergeStyle","useExternRef","useResizeObserver","useStateWithPrev","useDOM","animationVisibilityDelayStyles","RootComponent","styles","stylesDelay","CUSTOM_PROPERTY_GRADIENT_LEFT","useSkeletonSyncAnimation","disableAnimation","duration","isAnimationStarted","setIsAnimationStarted","useState","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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"}

package/dist/cssm/components/Slider/Slider.js

@@ -21,7 +21,7 @@ const sizeClassNames = {
     s: styles.sizeS
 };
 /**
- * @see https://vkcom.github.io/VKUI/#/Slider
+ * @see https://vkui.io/components/slider
  */ export const Slider = ({ step = 1, min = 0, max = 100, value: valueProp, multiple: multipleProp, defaultValue = multipleProp ? [
     min,
     max

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

@@ -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 sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\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://vkcom.github.io/VKUI/#/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 { sizeY = '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        sizeY !== 'regular' && sizeYClassNames[sizeY],\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","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","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","sizeY","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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"}
+{"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 sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\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 { sizeY = '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        sizeY !== 'regular' && sizeYClassNames[sizeY],\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","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","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","sizeY","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/Snackbar/Snackbar.js

@@ -34,7 +34,7 @@ const animationStateClassNames = {
     exited: undefined
 };
 /**
- * @see https://vkcom.github.io/VKUI/#/Snackbar
+ * @see https://vkui.io/components/snackbar
  */ export const Snackbar = ({ placement = 'bottom-start', children, layout, action, before, after, duration = 4000, onActionClick, onClose, mode = 'default', subtitle, offsetY, getRootRef, ...restProps })=>{
     const platform = usePlatform();
     const [open, setOpen] = React.useState(true);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["'use client';\n\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 { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { getRelativeBoundingClientRect } from '../../lib/dom';\nimport { UIPanGestureRecognizer } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { 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\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 interface SnackbarProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'role'>,\n    BasicProps {\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;\n  /**\n   * Обработчик закрытия уведомления.\n   */\n  onClose: () => void;\n  /**\n   * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n   */\n  offsetY?: React.CSSProperties['bottom'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/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,\n  onClose,\n  mode = 'default',\n  subtitle,\n  offsetY,\n  getRootRef,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n\n  const [open, setOpen] = React.useState(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      onExited: onClose,\n    },\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    setOpen(false);\n  }, []);\n\n  const handleActionClick = (event: React.MouseEvent) => {\n    close();\n    if (action) {\n      onActionClick?.(event);\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();\n    }\n\n    setTouched(false);\n  };\n\n  useIsomorphicLayoutEffect(\n    function closeAfterDelay() {\n      if (!open || focused || touched || animationState !== 'entered') {\n        return;\n      }\n      closeTimeoutIdRef.current = setTimeout(close, 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  useGlobalEscKeyDown(open, close);\n\n  if (animationState === 'exited') {\n    return null;\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      role=\"presentation\"\n      baseClassName={classNames(\n        styles.host,\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    >\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              >\n                {action}\n              </Button>\n            )\n          }\n        >\n          {children}\n        </Basic>\n      </div>\n    </RootComponent>\n  );\n};\n\nSnackbar.Basic = Basic;\n"],"names":["React","classNames","useConfigDirection","useExternRef","useFocusWithin","useGlobalEscKeyDown","useMediaQueries","usePlatform","useCSSKeyframesAnimationController","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","onClose","mode","subtitle","offsetY","getRootRef","restProps","platform","open","setOpen","useState","touched","setTouched","direction","isRtl","rootRef","focused","inRef","useRef","panGestureRecognizer","shiftDataRef","rafRef","closeTimeoutIdRef","mediaQueries","animationState","animationHandlers","onExited","clearRAF","useCallback","current","cancelAnimationFrame","updateShiftAxisCSSProperties","x","y","requestAnimationFrame","style","removeProperty","setProperty","close","handleActionClick","event","handleTouchStart","setStartCoords","nativeEvent","offsetWidth","offsetHeight","handleTouchMove","setInitialTimeOnce","setEndCoords","delta","shifted","handleTouchEnd","velocity","closeAfterDelay","setTimeout","preventCloseAfterDelayOnUnmount","clearTimeout","clearUserInteractionDataAfterTouchEnd","useEffect","role","baseClassName","host","ios","rtl","baseStyle","div","className","in","ref","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","align","appearance","size","onClick"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,mBAAmB,QAAQ,qCAAkC;AACtE,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,kCAAkC,QAAQ,+BAAsB;AACzE,SAASC,6BAA6B,QAAQ,mBAAgB;AAC9D,SAASC,sBAAsB,QAAQ,2BAAkB;AACzD,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,KAAK,QAAyB,iCAA8B;AAErE,SACEC,mBAAmB,EACnBC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,QACpB,aAAU;AACjB,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,sBAAsB;IAC1B,aAAaD,OAAOE,iBAAiB;IACrC,OAAOF,OAAOG,YAAY;IAC1B,WAAWH,OAAOI,eAAe;IACjC,gBAAgBJ,OAAOK,oBAAoB;IAC3C,UAAUL,OAAOM,eAAe;IAChC,cAAcN,OAAOO,kBAAkB;AACzC;AAEA,MAAMC,2BAA2B;IAC/BC,OAAOT,OAAOU,UAAU;IACxBC,UAAUX,OAAOY,aAAa;IAC9BC,SAASb,OAAOc,YAAY;IAC5BC,MAAMf,OAAOgB,SAAS;IACtBC,SAASjB,OAAOkB,YAAY;IAC5BC,QAAQC;AACV;AAwCA;;CAEC,GACD,OAAO,MAAMC,WAA8D,CAAC,EAC1EC,YAAY,cAAc,EAC1BC,QAAQ,EACRC,MAAM,EACNC,MAAM,EACNC,MAAM,EACNC,KAAK,EACLC,WAAW,IAAI,EACfC,aAAa,EACbC,OAAO,EACPC,OAAO,SAAS,EAChBC,QAAQ,EACRC,OAAO,EACPC,UAAU,EACV,GAAGC,WACW;IACd,MAAMC,WAAWhD;IAEjB,MAAM,CAACiD,MAAMC,QAAQ,GAAGzD,MAAM0D,QAAQ,CAAC;IACvC,MAAM,CAACC,SAASC,WAAW,GAAG5D,MAAM0D,QAAQ,CAAC;IAE7C,MAAMG,YAAY3D;IAClB,MAAM4D,QAAQD,cAAc;IAE5B,MAAME,UAAU5D,aAAakD;IAC7B,MAAMW,UAAU5D,eAAe2D;IAC/B,MAAME,QAAQjE,MAAMkE,MAAM,CAAiB;IAC3C,MAAMC,uBAAuBnE,MAAMkE,MAAM,CAAgC;IAEzE,MAAME,eAAepE,MAAMkE,MAAM,CAAmB;IAEpD,MAAMG,SAASrE,MAAMkE,MAAM,CAAkD;IAC7E,MAAMI,oBAAoBtE,MAAMkE,MAAM,CAA4C3B;IAClF,MAAMgC,eAAejE;IACrB,MAAM,CAACkE,gBAAgBC,kBAAkB,GAAGjE,mCAC1CgD,OAAO,UAAU,QACjB;QACEkB,UAAUzB;IACZ;IAGF,MAAM0B,WAAW3E,MAAM4E,WAAW,CAAC;QACjC,IAAIP,OAAOQ,OAAO,KAAK,MAAM;YAC3BC,qBAAqBT,OAAOQ,OAAO;YACnCR,OAAOQ,OAAO,GAAG;QACnB;IACF,GAAG,EAAE;IAEL,MAAME,+BAA+B/E,MAAM4E,WAAW,CACpD,CAACI,GAAkBC,GAAkBpB;QACnCQ,OAAOQ,OAAO,GAAGK,sBAAsB;YACrC,IAAInB,QAAQc,OAAO,EAAE;gBACnBG,MAAM,OACFjB,QAAQc,OAAO,CAACM,KAAK,CAACC,cAAc,CAAC,uCACrCrB,QAAQc,OAAO,CAACM,KAAK,CAACE,WAAW,CAAC,qCAAqC,GAAGL,EAAE,EAAE,CAAC;gBACnFC,MAAM,OACFlB,QAAQc,OAAO,CAACM,KAAK,CAACC,cAAc,CAAC,uCACrCrB,QAAQc,OAAO,CAACM,KAAK,CAACE,WAAW,CAAC,qCAAqC,GAAGJ,EAAE,EAAE,CAAC;gBACnFpB,cAAc,OACVE,QAAQc,OAAO,CAACM,KAAK,CAACC,cAAc,CAAC,yCACrC,+IAA+I,GAC/IrB,QAAQc,OAAO,CAACM,KAAK,CAACE,WAAW,CAC/B,uCACA,GAAGxB,WAAW;YAEtB;QACF;IACF,GACA;QAACE;KAAQ;IAGX,MAAMuB,QAAQtF,MAAM4E,WAAW,CAAC;QAC9BnB,QAAQ;IACV,GAAG,EAAE;IAEL,MAAM8B,oBAAoB,CAACC;QACzBF;QACA,IAAI1C,QAAQ;YACVI,gBAAgBwC;QAClB;IACF;IAEA,MAAMC,mBAAmB,CAACD;QACxBrB,qBAAqBU,OAAO,GAAG,IAAInE;QACnCyD,qBAAqBU,OAAO,CAACa,cAAc,CAACF,MAAMG,WAAW;QAC7DvB,aAAaS,OAAO,GAAG9D,oBACrBgD,QAAQc,OAAO,CAAEe,WAAW,EAC5B7B,QAAQc,OAAO,CAAEgB,YAAY,EAC7BtB;QAEFX,WAAW;IACb;IAEA,MAAMkC,kBAAkB,CAACN;QACvB,IAAIpB,aAAaS,OAAO,IAAIV,qBAAqBU,OAAO,EAAE;YACxDV,qBAAqBU,OAAO,CAACkB,kBAAkB;YAC/C5B,qBAAqBU,OAAO,CAACmB,YAAY,CAACR,MAAMG,WAAW;YAC3DvB,aAAaS,OAAO,GAAG7D,kBACrByB,WACA2B,aAAaS,OAAO,EACpBV,qBAAqBU,OAAO,CAACoB,KAAK,IAClCnC;YAGF,IAAIM,aAAaS,OAAO,CAACqB,OAAO,EAAE;gBAChCnB,6BACEX,aAAaS,OAAO,CAACG,CAAC,EACtBZ,aAAaS,OAAO,CAACI,CAAC,EACtBb,aAAaS,OAAO,CAAChB,SAAS;YAElC;QACF;IACF;IAEA,MAAMsC,iBAAiB;QACrB,IACExC,WACAS,aAAaS,OAAO,IACpBV,qBAAqBU,OAAO,IAC5B3D,0BACEuB,WACA2B,aAAaS,OAAO,EACpBpE,8BAA8BsD,QAAQc,OAAO,EAAGZ,MAAMY,OAAO,GAC7DV,qBAAqBU,OAAO,CAACuB,QAAQ,IACrCtC,QAEF;YACAwB;QACF;QAEA1B,WAAW;IACb;IAEAjD,0BACE,SAAS0F;QACP,IAAI,CAAC7C,QAAQQ,WAAWL,WAAWa,mBAAmB,WAAW;YAC/D;QACF;QACAF,kBAAkBO,OAAO,GAAGyB,WAAWhB,OAAOvC;QAC9C,OAAO,SAASwD;YACdC,aAAalC,kBAAkBO,OAAO;QACxC;IACF,GACA;QAACrB;QAAMQ;QAASL;QAASa;QAAgBc;QAAOvC;KAAS;IAG3DpC,0BACE,SAAS8F;QACP,IAAI,CAAC9C,SAAS;YACZgB;YACAP,aAAaS,OAAO,GAAG;YACvBV,qBAAqBU,OAAO,GAAG;YAE/B,IAAIrB,MAAM;gBACRuB,6BAA6B,MAAM,MAAM;YAC3C;QACF;IACF,GACA;QAACpB;QAASH;QAAMuB;QAA8BJ;KAAS;IAGzD3E,MAAM0G,SAAS,CAAC,IAAM/B,UAAU;QAACA;KAAS;IAE1CtE,oBAAoBmD,MAAM8B;IAE1B,IAAId,mBAAmB,UAAU;QAC/B,OAAO;IACT;IAEA,qBACE,KAAC3D;QACE,GAAGyC,SAAS;QACbqD,MAAK;QACLC,eAAe3G,WACbkB,OAAO0F,IAAI,EACXtD,aAAa,SAASpC,OAAO2F,GAAG,EAChCnD,WAAWxC,OAAOwC,OAAO,EACzBvC,mBAAmB,CAACqB,UAAU,EAC9Bd,wBAAwB,CAAC6C,eAAe,EACxCV,SAAS3C,OAAO4F,GAAG;QAErBC,WAAW/F,uBAAuBwB,WAAWW;QAC7CC,YAAYU;kBAEZ,cAAA,KAACkD;YACCN,MAAK;YACLO,WAAW/F,OAAOgG,EAAE;YACpBC,KAAKnD;YACL,SAAS;YACToD,cAAc5B;YACd6B,aAAaxB;YACbyB,YAAYpB;YACZ,UAAU;YACVqB,aAAa/B;YACbgC,aAAa3B;YACb4B,WAAWvB;YACXwB,cAAcxB;YACb,GAAG1B,iBAAiB;sBAErB,cAAA,KAAC3D;gBACCoC,MAAMA;gBACNP,QAAQA;gBACRE,QAAQA;gBACRC,OAAOA;gBACPK,UAAUA;gBACVP,QACEA,wBACE,KAAChC;oBACCgH,OAAM;oBACN1E,MAAK;oBACL2E,YACE3E,SAAS,SACL,2CAA2C,GAC3C,YACA;oBAEN4E,MAAK;oBACLC,SAASxC;8BAER3C;;0BAKNF;;;;AAKX,EAAE;AAEFF,SAAS1B,KAAK,GAAGA"}
+{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["'use client';\n\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 { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { getRelativeBoundingClientRect } from '../../lib/dom';\nimport { UIPanGestureRecognizer } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { 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\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 interface SnackbarProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'role'>,\n    BasicProps {\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;\n  /**\n   * Обработчик закрытия уведомления.\n   */\n  onClose: () => void;\n  /**\n   * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n   */\n  offsetY?: React.CSSProperties['bottom'];\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,\n  onClose,\n  mode = 'default',\n  subtitle,\n  offsetY,\n  getRootRef,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n\n  const [open, setOpen] = React.useState(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      onExited: onClose,\n    },\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    setOpen(false);\n  }, []);\n\n  const handleActionClick = (event: React.MouseEvent) => {\n    close();\n    if (action) {\n      onActionClick?.(event);\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();\n    }\n\n    setTouched(false);\n  };\n\n  useIsomorphicLayoutEffect(\n    function closeAfterDelay() {\n      if (!open || focused || touched || animationState !== 'entered') {\n        return;\n      }\n      closeTimeoutIdRef.current = setTimeout(close, 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  useGlobalEscKeyDown(open, close);\n\n  if (animationState === 'exited') {\n    return null;\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      role=\"presentation\"\n      baseClassName={classNames(\n        styles.host,\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    >\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              >\n                {action}\n              </Button>\n            )\n          }\n        >\n          {children}\n        </Basic>\n      </div>\n    </RootComponent>\n  );\n};\n\nSnackbar.Basic = Basic;\n"],"names":["React","classNames","useConfigDirection","useExternRef","useFocusWithin","useGlobalEscKeyDown","useMediaQueries","usePlatform","useCSSKeyframesAnimationController","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","onClose","mode","subtitle","offsetY","getRootRef","restProps","platform","open","setOpen","useState","touched","setTouched","direction","isRtl","rootRef","focused","inRef","useRef","panGestureRecognizer","shiftDataRef","rafRef","closeTimeoutIdRef","mediaQueries","animationState","animationHandlers","onExited","clearRAF","useCallback","current","cancelAnimationFrame","updateShiftAxisCSSProperties","x","y","requestAnimationFrame","style","removeProperty","setProperty","close","handleActionClick","event","handleTouchStart","setStartCoords","nativeEvent","offsetWidth","offsetHeight","handleTouchMove","setInitialTimeOnce","setEndCoords","delta","shifted","handleTouchEnd","velocity","closeAfterDelay","setTimeout","preventCloseAfterDelayOnUnmount","clearTimeout","clearUserInteractionDataAfterTouchEnd","useEffect","role","baseClassName","host","ios","rtl","baseStyle","div","className","in","ref","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","align","appearance","size","onClick"],"mappings":"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"}

package/dist/cssm/components/Spacing/Spacing.js

@@ -6,7 +6,7 @@ import { RootComponent } from "../RootComponent/RootComponent.js";
 import styles from "./Spacing.module.css";
 export const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--spacing_size';
 /**
- * @see https://vkcom.github.io/VKUI/#/Spacing
+ * @see https://vkui.io/components/spacing
  */ export const Spacing = ({ size = 'm', ...restProps })=>{
     const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(CUSTOM_CSS_TOKEN_FOR_USER_GAP, size);
     return /*#__PURE__*/ _jsx(RootComponent, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * 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.\n   *\n   * Свойство устарело и будет удалено в v8.\n   */\n  children?: React.ReactNode;\n}\n/**\n * @see https://vkcom.github.io/VKUI/#/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":["React","classNames","resolveSpacingSize","RootComponent","styles","CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","size","restProps","spacingSizeClassName","spacingSizeStyle","baseStyle","baseClassName","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,gCAAgC,gCAAgC;AAgB7E;;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"}
+{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * 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.\n   *\n   * Свойство устарело и будет удалено в v8.\n   */\n  children?: React.ReactNode;\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":["React","classNames","resolveSpacingSize","RootComponent","styles","CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","size","restProps","spacingSizeClassName","spacingSizeStyle","baseStyle","baseClassName","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,gCAAgC,gCAAgC;AAgB7E;;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

@@ -16,7 +16,7 @@ const spinnerIconMap = {
     xl: Icon44Spinner
 };
 /**
- * @see https://vkcom.github.io/VKUI/#/Spinner
+ * @see https://vkui.io/components/spinner
  */ // eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames
 export const Spinner = /*#__PURE__*/ React.memo(({ size = 'm', children = 'Загружается...', disableAnimation = false, noColor = false, visibilityDelay, ...restProps })=>{
     const SpinnerIcon = spinnerIconMap[size];

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

@@ -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://vkcom.github.io/VKUI/#/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"}
+{"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"}

package/dist/cssm/components/SplitCol/SplitCol.js

@@ -44,7 +44,7 @@ function useTransitionAnimate(animateProp) {
     return animate;
 }
 /**
- * @see https://vkcom.github.io/VKUI/#/SplitCol
+ * @see https://vkui.io/components/split-layout#split-col
  */ export const SplitCol = (props)=>{
     const { children, width, maxWidth, minWidth, animate: animateProp, fixed, autoSpaced, stretchedOnMobile, getRootRef, ...restProps } = props;
     const baseRef = useExternRef(getRootRef);

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

@@ -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 { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\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    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, 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://vkcom.github.io/VKUI/#/SplitCol\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","matchMediaListAddListener","matchMediaListRemoveListener","RootComponent","SplitColContext","styles","breakpointClassNames","none","viewWidthNone","tabletMinus","viewWidthTabletMinus","smallTabletPlus","viewWidthSmallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","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;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,0BAAuB;AAE/F,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,eAAe,QAAQ,uBAAoB;AACpD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,uBAAuB;IAC3BC,MAAMZ,WAAWU,OAAOG,aAAa,EAAE;IACvCC,aAAaJ,OAAOK,oBAAoB;IACxCC,iBAAiBN,OAAOO,wBAAwB;IAChDC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,SAAS,EAAE,GAAGpB;IACtB,MAAM,CAACqB,SAASC,WAAW,GAAGxB,MAAMyB,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAevB;IAErBJ,MAAM4B,SAAS,CAAC;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYjB,UAAUyB,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaV,eAAe,CAACe,OAAO;QACvED;QAEAxB,0BAA0BoB,aAAaV,eAAe,EAAEc;QACxD,OAAO;YACLvB,6BAA6BmB,aAAaV,eAAe,EAAEc;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AAiCA;;CAEC,GACD,OAAO,MAAMU,WAAW,CAACC;IACvB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRf,SAASF,WAAW,EACpBkB,KAAK,EACLC,UAAU,EACVC,iBAAiB,EACjBC,UAAU,EACV,GAAGC,WACJ,GAAGT;IACJ,MAAMU,UAAUzC,aAAauC;IAC7B,MAAM,EAAEpB,SAAS,EAAE,GAAGpB;IACtB,MAAMqB,UAAUH,qBAAqBC;IAErC,MAAMwB,eAAe7C,MAAM8C,OAAO,CAChC,IAAO,CAAA;YACLC,QAAQH;YACRrB;QACF,CAAA,GACA;QAACA;QAASqB;KAAQ;IAGpB,qBACE,KAACnC;QACE,GAAGkC,SAAS;QACbK,WAAW;YACTZ;YACAC;YACAC;QACF;QACAI,YAAYE;QACZK,eAAehD,WACbU,OAAOuC,IAAI,EACX5C,qBAAqBM,sBAAsBU,YAC3CkB,cAAcvC,WAAWU,OAAOwC,UAAU,EAAE,sCAC5CZ,SAAS5B,OAAO4B,KAAK,EACrBE,qBAAqB9B,OAAO8B,iBAAiB;kBAG/C,cAAA,KAAC/B,gBAAgB0C,QAAQ;YAACC,OAAOR;sBAC9BN,sBAAQ,KAACe;gBAAIC,WAAW5C,OAAO6C,UAAU;0BAAGrB;iBAAkBA;;;AAIvE,EAAE"}
+{"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 { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\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    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, 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","matchMediaListAddListener","matchMediaListRemoveListener","RootComponent","SplitColContext","styles","breakpointClassNames","none","viewWidthNone","tabletMinus","viewWidthTabletMinus","smallTabletPlus","viewWidthSmallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","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;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,0BAAuB;AAE/F,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,eAAe,QAAQ,uBAAoB;AACpD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,uBAAuB;IAC3BC,MAAMZ,WAAWU,OAAOG,aAAa,EAAE;IACvCC,aAAaJ,OAAOK,oBAAoB;IACxCC,iBAAiBN,OAAOO,wBAAwB;IAChDC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,SAAS,EAAE,GAAGpB;IACtB,MAAM,CAACqB,SAASC,WAAW,GAAGxB,MAAMyB,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAevB;IAErBJ,MAAM4B,SAAS,CAAC;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYjB,UAAUyB,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaV,eAAe,CAACe,OAAO;QACvED;QAEAxB,0BAA0BoB,aAAaV,eAAe,EAAEc;QACxD,OAAO;YACLvB,6BAA6BmB,aAAaV,eAAe,EAAEc;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AAiCA;;CAEC,GACD,OAAO,MAAMU,WAAW,CAACC;IACvB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRf,SAASF,WAAW,EACpBkB,KAAK,EACLC,UAAU,EACVC,iBAAiB,EACjBC,UAAU,EACV,GAAGC,WACJ,GAAGT;IACJ,MAAMU,UAAUzC,aAAauC;IAC7B,MAAM,EAAEpB,SAAS,EAAE,GAAGpB;IACtB,MAAMqB,UAAUH,qBAAqBC;IAErC,MAAMwB,eAAe7C,MAAM8C,OAAO,CAChC,IAAO,CAAA;YACLC,QAAQH;YACRrB;QACF,CAAA,GACA;QAACA;QAASqB;KAAQ;IAGpB,qBACE,KAACnC;QACE,GAAGkC,SAAS;QACbK,WAAW;YACTZ;YACAC;YACAC;QACF;QACAI,YAAYE;QACZK,eAAehD,WACbU,OAAOuC,IAAI,EACX5C,qBAAqBM,sBAAsBU,YAC3CkB,cAAcvC,WAAWU,OAAOwC,UAAU,EAAE,sCAC5CZ,SAAS5B,OAAO4B,KAAK,EACrBE,qBAAqB9B,OAAO8B,iBAAiB;kBAG/C,cAAA,KAAC/B,gBAAgB0C,QAAQ;YAACC,OAAOR;sBAC9BN,sBAAQ,KAACe;gBAAIC,WAAW5C,OAAO6C,UAAU;0BAAGrB;iBAAkBA;;;AAIvE,EAAE"}

package/dist/cssm/components/SplitLayout/SplitLayout.js

@@ -5,7 +5,7 @@ import { classNames } from "@vkontakte/vkjs";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import styles from "./SplitLayout.module.css";
 /**
- * @see https://vkcom.github.io/VKUI/#/SplitLayout
+ * @see https://vkui.io/components/split-layout
  */ export const SplitLayout = ({ header, children, getRootRef, getRef, className, center, modal, popout, ...restProps })=>{
     const platform = usePlatform();
     return /*#__PURE__*/ _jsxs("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   *\n   * @deprecated Будет удалeно в **VKUI v8**.\n   * Начиная с **VKUI v7** компоненты можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   *\n   * @deprecated Будет удалeно в **VKUI v8**.\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://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  center,\n  modal,\n  popout,\n  ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <div className={classNames(styles.host, platform === 'ios' && styles.ios)} ref={getRootRef}>\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles.inner,\n          !!header && styles.innerHeader,\n          center && styles.innerCenter,\n          className,\n        )}\n      >\n        {children}\n        {modal}\n        {popout}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","styles","SplitLayout","header","children","getRootRef","getRef","className","center","modal","popout","restProps","platform","div","host","ios","ref","inner","innerHeader","innerCenter"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,OAAOC,YAAY,2BAA2B;AA+B9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,MAAM,EACN,GAAGC,WACc;IACjB,MAAMC,WAAWZ;IAEjB,qBACE,MAACa;QAAIN,WAAWR,WAAWE,OAAOa,IAAI,EAAEF,aAAa,SAASX,OAAOc,GAAG;QAAGC,KAAKX;;YAC7EF;0BACD,MAACU;gBACE,GAAGF,SAAS;gBACbK,KAAKV;gBACLC,WAAWR,WACTE,OAAOgB,KAAK,EACZ,CAAC,CAACd,UAAUF,OAAOiB,WAAW,EAC9BV,UAAUP,OAAOkB,WAAW,EAC5BZ;;oBAGDH;oBACAK;oBACAC;;;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   *\n   * @deprecated Будет удалeно в **VKUI v8**.\n   * Начиная с **VKUI v7** компоненты можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   *\n   * @deprecated Будет удалeно в **VKUI v8**.\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  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  center,\n  modal,\n  popout,\n  ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <div className={classNames(styles.host, platform === 'ios' && styles.ios)} ref={getRootRef}>\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles.inner,\n          !!header && styles.innerHeader,\n          center && styles.innerCenter,\n          className,\n        )}\n      >\n        {children}\n        {modal}\n        {popout}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","styles","SplitLayout","header","children","getRootRef","getRef","className","center","modal","popout","restProps","platform","div","host","ios","ref","inner","innerHeader","innerCenter"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,OAAOC,YAAY,2BAA2B;AA+B9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,MAAM,EACN,GAAGC,WACc;IACjB,MAAMC,WAAWZ;IAEjB,qBACE,MAACa;QAAIN,WAAWR,WAAWE,OAAOa,IAAI,EAAEF,aAAa,SAASX,OAAOc,GAAG;QAAGC,KAAKX;;YAC7EF;0BACD,MAACU;gBACE,GAAGF,SAAS;gBACbK,KAAKV;gBACLC,WAAWR,WACTE,OAAOgB,KAAK,EACZ,CAAC,CAACd,UAAUF,OAAOiB,WAAW,EAC9BV,UAAUP,OAAOkB,WAAW,EAC5BZ;;oBAGDH;oBACAK;oBACAC;;;;;AAIT,EAAE"}

package/dist/cssm/components/SubnavigationBar/SubnavigationBar.js

@@ -7,7 +7,7 @@ import styles from "./SubnavigationBar.module.css";
 const defaultScrollToLeft = (x)=>x - 240;
 const defaultScrollToRight = (x)=>x + 240;
 /**
- * @see https://vkcom.github.io/VKUI/#/SubnavigationBar
+ * @see https://vkui.io/components/subnavigation-bar
  */ export const SubnavigationBar = ({ fixed = false, children, showArrows = true, getScrollToLeft = defaultScrollToLeft, getScrollToRight = defaultScrollToRight, scrollAnimationDuration, ...restProps })=>{
     let ScrollWrapper;
     let scrollWrapperProps = {};

package/dist/cssm/components/SubnavigationBar/SubnavigationBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  HorizontalScroll,\n  type HorizontalScrollProps,\n  type ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  /**\n   * Отключение возможности прокручивания компонента по горизонтали.\n   */\n  fixed?: boolean;\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  fixed = false,\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  ...restProps\n}: SubnavigationBarProps): React.ReactNode => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (fixed) {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <RootComponent baseClassName={fixed && styles.modeFixed} {...restProps}>\n      <ScrollWrapper className={styles.in} {...scrollWrapperProps}>\n        <ul className={styles.scrollIn}>\n          {React.Children.map(children, (child, idx) =>\n            hasReactNode(child) ? (\n              <li key={idx} className={styles.item}>\n                {child}\n              </li>\n            ) : null,\n          )}\n        </ul>\n      </ScrollWrapper>\n    </RootComponent>\n  );\n};\n"],"names":["React","hasReactNode","HorizontalScroll","RootComponent","styles","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","fixed","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","restProps","ScrollWrapper","scrollWrapperProps","baseClassName","modeFixed","className","in","ul","scrollIn","Children","map","child","idx","li","item"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SACEC,gBAAgB,QAGX,0CAAuC;AAC9C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,gCAAgC;AAcnD,MAAMC,sBAA6C,CAACC,IAAMA,IAAI;AAE9D,MAAMC,uBAA8C,CAACD,IAAMA,IAAI;AAE/D;;CAEC,GACD,OAAO,MAAME,mBAAmB,CAAC,EAC/BC,QAAQ,KAAK,EACbC,QAAQ,EACRC,aAAa,IAAI,EACjBC,kBAAkBP,mBAAmB,EACrCQ,mBAAmBN,oBAAoB,EACvCO,uBAAuB,EACvB,GAAGC,WACmB;IACtB,IAAIC;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIR,OAAO;QACTO,gBAAgB;IAClB,OAAO;QACLA,gBAAgBd;QAChBe,qBAAqB;YACnBN;YACAC;YACAC;YACAC;QACF;IACF;IAEA,qBACE,KAACX;QAAce,eAAeT,SAASL,OAAOe,SAAS;QAAG,GAAGJ,SAAS;kBACpE,cAAA,KAACC;YAAcI,WAAWhB,OAAOiB,EAAE;YAAG,GAAGJ,kBAAkB;sBACzD,cAAA,KAACK;gBAAGF,WAAWhB,OAAOmB,QAAQ;0BAC3BvB,MAAMwB,QAAQ,CAACC,GAAG,CAACf,UAAU,CAACgB,OAAOC,MACpC1B,aAAayB,uBACX,KAACE;wBAAaR,WAAWhB,OAAOyB,IAAI;kCACjCH;uBADMC,OAGP;;;;AAMhB,EAAE"}
+{"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  HorizontalScroll,\n  type HorizontalScrollProps,\n  type ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  /**\n   * Отключение возможности прокручивания компонента по горизонтали.\n   */\n  fixed?: boolean;\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkui.io/components/subnavigation-bar\n */\nexport const SubnavigationBar = ({\n  fixed = false,\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  ...restProps\n}: SubnavigationBarProps): React.ReactNode => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (fixed) {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <RootComponent baseClassName={fixed && styles.modeFixed} {...restProps}>\n      <ScrollWrapper className={styles.in} {...scrollWrapperProps}>\n        <ul className={styles.scrollIn}>\n          {React.Children.map(children, (child, idx) =>\n            hasReactNode(child) ? (\n              <li key={idx} className={styles.item}>\n                {child}\n              </li>\n            ) : null,\n          )}\n        </ul>\n      </ScrollWrapper>\n    </RootComponent>\n  );\n};\n"],"names":["React","hasReactNode","HorizontalScroll","RootComponent","styles","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","fixed","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","restProps","ScrollWrapper","scrollWrapperProps","baseClassName","modeFixed","className","in","ul","scrollIn","Children","map","child","idx","li","item"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SACEC,gBAAgB,QAGX,0CAAuC;AAC9C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,gCAAgC;AAcnD,MAAMC,sBAA6C,CAACC,IAAMA,IAAI;AAE9D,MAAMC,uBAA8C,CAACD,IAAMA,IAAI;AAE/D;;CAEC,GACD,OAAO,MAAME,mBAAmB,CAAC,EAC/BC,QAAQ,KAAK,EACbC,QAAQ,EACRC,aAAa,IAAI,EACjBC,kBAAkBP,mBAAmB,EACrCQ,mBAAmBN,oBAAoB,EACvCO,uBAAuB,EACvB,GAAGC,WACmB;IACtB,IAAIC;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIR,OAAO;QACTO,gBAAgB;IAClB,OAAO;QACLA,gBAAgBd;QAChBe,qBAAqB;YACnBN;YACAC;YACAC;YACAC;QACF;IACF;IAEA,qBACE,KAACX;QAAce,eAAeT,SAASL,OAAOe,SAAS;QAAG,GAAGJ,SAAS;kBACpE,cAAA,KAACC;YAAcI,WAAWhB,OAAOiB,EAAE;YAAG,GAAGJ,kBAAkB;sBACzD,cAAA,KAACK;gBAAGF,WAAWhB,OAAOmB,QAAQ;0BAC3BvB,MAAMwB,QAAQ,CAACC,GAAG,CAACf,UAAU,CAACgB,OAAOC,MACpC1B,aAAayB,uBACX,KAACE;wBAAaR,WAAWhB,OAAOyB,IAAI;kCACjCH;uBADMC,OAGP;;;;AAMhB,EAAE"}

package/dist/cssm/components/SubnavigationButton/SubnavigationButton.js

@@ -38,7 +38,7 @@ const SubnavigationButtonTypography = ({ textLevel, ...restProps })=>{
     });
 };
 /**
- * @see https://vkcom.github.io/VKUI/#/SubnavigationButton
+ * @see https://vkui.io/components/subnavigation-bar#subnavigation-button
  */ export const SubnavigationButton = ({ mode = 'primary', appearance = 'accent', size = 'm', selected, textLevel = '1', before, after, chevron, children, ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     return /*#__PURE__*/ _jsx(Tappable, {

package/dist/cssm/components/SubnavigationButton/SubnavigationButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasChildren, HasComponent } from '../../types';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst appearanceStyles = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst modeStyles = {\n  primary: styles.modePrimary,\n  outline: styles.modeOutline,\n  tertiary: styles.modeTertiary,\n};\n\nconst sizeStyles = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableOmitProps, 'size'> {\n  /**\n   * Стиль отображения кнопки.\n   */\n  mode?: 'primary' | 'outline' | 'tertiary';\n  /**\n   * Тип внешнего вида кнопки.\n   */\n  appearance?: 'accent' | 'neutral';\n  /**\n   * Размер кнопки.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Выбранное состояние.\n   */\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar fixed />`.\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24.\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Нужно ли отображать иконку `\"chevron\"`.\n   */\n  chevron?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  chevron,\n  children,\n  ...restProps\n}: SubnavigationButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        sizeStyles[size],\n        modeStyles[mode],\n        appearanceStyles[appearance],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        restProps.disabled && styles.disabled,\n      )}\n    >\n      <span className={styles.in}>\n        {before && <span className={styles.before}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles.label}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles.after}>{after}</span>}\n        {chevron && <Icon16Dropdown className={styles.chevronIcon} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","Tappable","Caption","Subhead","styles","appearanceStyles","accent","appearanceAccent","neutral","appearanceNeutral","modeStyles","primary","modePrimary","outline","modeOutline","tertiary","modeTertiary","sizeStyles","s","sizeS","m","sizeM","l","sizeL","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","appearance","size","selected","before","after","chevron","children","sizeY","hasActive","focusVisibleMode","baseClassName","host","disabled","span","className","in","label","Component","chevronIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,OAAOC,YAAY,mCAAmC;AAEtD,MAAMC,mBAAmB;IACvBC,QAAQF,OAAOG,gBAAgB;IAC/BC,SAASJ,OAAOK,iBAAiB;AACnC;AAEA,MAAMC,aAAa;IACjBC,SAASP,OAAOQ,WAAW;IAC3BC,SAAST,OAAOU,WAAW;IAC3BC,UAAUX,OAAOY,YAAY;AAC/B;AAEA,MAAMC,aAAa;IACjBC,GAAGd,OAAOe,KAAK;IACfC,GAAGhB,OAAOiB,KAAK;IACfC,GAAGlB,OAAOmB,KAAK;AACjB;AAEA,MAAMC,kBAAkB;IACtBC,MAAMrB,OAAOsB,SAAS;IACtBC,SAASvB,OAAOwB,YAAY;AAC9B;AA4CA,MAAMC,gCAAgC,CAAC,EACrCC,SAAS,EACT,GAAGC,WACgC;IACnC,IAAID,cAAc,KAAK;QACrB,qBAAO,KAAC3B;YAAS,GAAG4B,SAAS;;IAC/B;IAEA,qBAAO,KAAC7B;QAAQ8B,OAAOF,cAAc,MAAM,MAAM;QAAM,GAAGC,SAAS;;AACrE;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAAC,EAClCC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,OAAO,GAAG,EACVC,QAAQ,EACRP,YAAY,GAAG,EACfQ,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACR,GAAGV,WACsB;IACzB,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAG1C;IAE3B,qBACE,KAACC;QACC0C,WAAW;QACXC,kBAAiB;QAChB,GAAGb,SAAS;QACbc,eAAe9C,WACbK,OAAO0C,IAAI,EACX7B,UAAU,CAACmB,KAAK,EAChB1B,UAAU,CAACwB,KAAK,EAChB7B,gBAAgB,CAAC8B,WAAW,EAC5BE,YAAYjC,OAAOiC,QAAQ,EAC3BK,UAAU,aAAalB,eAAe,CAACkB,MAAM,EAC7CX,UAAUgB,QAAQ,IAAI3C,OAAO2C,QAAQ;kBAGvC,cAAA,MAACC;YAAKC,WAAW7C,OAAO8C,EAAE;;gBACvBZ,wBAAU,KAACU;oBAAKC,WAAW7C,OAAOkC,MAAM;8BAAGA;;8BAC5C,KAACT;oBACCC,WAAWA;oBACXmB,WAAW7C,OAAO+C,KAAK;oBACvBC,WAAU;8BAETX;;gBAEFF,uBAAS,KAACS;oBAAKC,WAAW7C,OAAOmC,KAAK;8BAAGA;;gBACzCC,yBAAW,KAAC1C;oBAAemD,WAAW7C,OAAOiD,WAAW;;;;;AAIjE,EAAE"}
+{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasChildren, HasComponent } from '../../types';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst appearanceStyles = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst modeStyles = {\n  primary: styles.modePrimary,\n  outline: styles.modeOutline,\n  tertiary: styles.modeTertiary,\n};\n\nconst sizeStyles = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableOmitProps, 'size'> {\n  /**\n   * Стиль отображения кнопки.\n   */\n  mode?: 'primary' | 'outline' | 'tertiary';\n  /**\n   * Тип внешнего вида кнопки.\n   */\n  appearance?: 'accent' | 'neutral';\n  /**\n   * Размер кнопки.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Выбранное состояние.\n   */\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar fixed />`.\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24.\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Нужно ли отображать иконку `\"chevron\"`.\n   */\n  chevron?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkui.io/components/subnavigation-bar#subnavigation-button\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  chevron,\n  children,\n  ...restProps\n}: SubnavigationButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        sizeStyles[size],\n        modeStyles[mode],\n        appearanceStyles[appearance],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        restProps.disabled && styles.disabled,\n      )}\n    >\n      <span className={styles.in}>\n        {before && <span className={styles.before}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles.label}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles.after}>{after}</span>}\n        {chevron && <Icon16Dropdown className={styles.chevronIcon} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","Tappable","Caption","Subhead","styles","appearanceStyles","accent","appearanceAccent","neutral","appearanceNeutral","modeStyles","primary","modePrimary","outline","modeOutline","tertiary","modeTertiary","sizeStyles","s","sizeS","m","sizeM","l","sizeL","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","appearance","size","selected","before","after","chevron","children","sizeY","hasActive","focusVisibleMode","baseClassName","host","disabled","span","className","in","label","Component","chevronIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,OAAOC,YAAY,mCAAmC;AAEtD,MAAMC,mBAAmB;IACvBC,QAAQF,OAAOG,gBAAgB;IAC/BC,SAASJ,OAAOK,iBAAiB;AACnC;AAEA,MAAMC,aAAa;IACjBC,SAASP,OAAOQ,WAAW;IAC3BC,SAAST,OAAOU,WAAW;IAC3BC,UAAUX,OAAOY,YAAY;AAC/B;AAEA,MAAMC,aAAa;IACjBC,GAAGd,OAAOe,KAAK;IACfC,GAAGhB,OAAOiB,KAAK;IACfC,GAAGlB,OAAOmB,KAAK;AACjB;AAEA,MAAMC,kBAAkB;IACtBC,MAAMrB,OAAOsB,SAAS;IACtBC,SAASvB,OAAOwB,YAAY;AAC9B;AA4CA,MAAMC,gCAAgC,CAAC,EACrCC,SAAS,EACT,GAAGC,WACgC;IACnC,IAAID,cAAc,KAAK;QACrB,qBAAO,KAAC3B;YAAS,GAAG4B,SAAS;;IAC/B;IAEA,qBAAO,KAAC7B;QAAQ8B,OAAOF,cAAc,MAAM,MAAM;QAAM,GAAGC,SAAS;;AACrE;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAAC,EAClCC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,OAAO,GAAG,EACVC,QAAQ,EACRP,YAAY,GAAG,EACfQ,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACR,GAAGV,WACsB;IACzB,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAG1C;IAE3B,qBACE,KAACC;QACC0C,WAAW;QACXC,kBAAiB;QAChB,GAAGb,SAAS;QACbc,eAAe9C,WACbK,OAAO0C,IAAI,EACX7B,UAAU,CAACmB,KAAK,EAChB1B,UAAU,CAACwB,KAAK,EAChB7B,gBAAgB,CAAC8B,WAAW,EAC5BE,YAAYjC,OAAOiC,QAAQ,EAC3BK,UAAU,aAAalB,eAAe,CAACkB,MAAM,EAC7CX,UAAUgB,QAAQ,IAAI3C,OAAO2C,QAAQ;kBAGvC,cAAA,MAACC;YAAKC,WAAW7C,OAAO8C,EAAE;;gBACvBZ,wBAAU,KAACU;oBAAKC,WAAW7C,OAAOkC,MAAM;8BAAGA;;8BAC5C,KAACT;oBACCC,WAAWA;oBACXmB,WAAW7C,OAAO+C,KAAK;oBACvBC,WAAU;8BAETX;;gBAEFF,uBAAS,KAACS;oBAAKC,WAAW7C,OAAOmC,KAAK;8BAAGA;;gBACzCC,yBAAW,KAAC1C;oBAAemD,WAAW7C,OAAOiD,WAAW;;;;;AAIjE,EAAE"}

package/dist/cssm/components/Switch/Switch.js

@@ -15,7 +15,7 @@ const sizeYClassNames = {
     compact: styles.sizeYCompact
 };
 /**
- * @see https://vkcom.github.io/VKUI/#/Switch
+ * @see https://vkui.io/components/switch
  */ export const Switch = ({ style, className, getRootRef, getRef, checked: checkedProp, disabled, onBlur: onBlurProp, onFocus: onFocusProp, onClick, ...restProps })=>{
     const direction = useConfigDirection();
     const isRtl = direction === 'rtl';