@vkontakte/vkui 7.0.1 → 7.1.0

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 { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useStateWithPrev } from '../../hooks/useStateWithPrev';\nimport { useDOM } from '../../lib/dom';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.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.MutableRefObject<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  useGlobalEventListener(window, 'resize', 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 * > на экране должен заменяться заглушкой.\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  ...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(styles.host, disableAnimation && styles.disableAnimation)}\n      baseStyle={skeletonStyle}\n      {...restProps}\n    >\n      {children || <>&zwnj;</>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","millisecondsInSecond","useExternRef","useGlobalEventListener","useStateWithPrev","useDOM","RootComponent","styles","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","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 { useExternRef } from '../../hooks/useExternRef';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useStateWithPrev } from '../../hooks/useStateWithPrev';\nimport { useDOM } from '../../lib/dom';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.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 * > на экране должен заменяться заглушкой.\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  ...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(styles.host, disableAnimation && styles.disableAnimation)}\n      baseStyle={skeletonStyle}\n      {...restProps}\n    >\n      {children || <>&zwnj;</>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","millisecondsInSecond","useExternRef","useResizeObserver","useStateWithPrev","useDOM","RootComponent","styles","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","restProps","skeletonStyle","Number","isFinite","Component","baseClassName","host","baseStyle"],"mappings":"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"}

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

@@ -23,7 +23,7 @@ const sizeClassNames = {
  */ export const Slider = ({ step = 1, min = 0, max = 100, value: valueProp, multiple: multipleProp, defaultValue = multipleProp ? [
     min,
     max
-] : min, disabled, className, getRootRef, getAriaLabel, getAriaValueText, onChange, withTooltip, size = 'l', ...restProps })=>{
+] : min, disabled, className, getRootRef, getAriaLabel, getAriaValueText, startThumbTestId, endThumbTestId, onChange, withTooltip, size = 'l', ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     const isControlled = valueProp !== undefined;
     const [localValue, setValue] = React.useState(defaultValue);
@@ -149,6 +149,7 @@ const sizeClassNames = {
                         withTooltip: withTooltip,
                         inputProps: {
                             'data-type': 'start',
+                            'data-testid': startThumbTestId,
                             'ref': thumbStartInputRef,
                             'step': step,
                             'min': min,
@@ -171,6 +172,7 @@ const sizeClassNames = {
                         withTooltip: withTooltip,
                         inputProps: {
                             'data-type': 'end',
+                            'data-testid': endThumbTestId,
                             'ref': thumbEndInputRef,
                             'step': step,
                             'min': startValue,

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 { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { 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  min?: number;\n  max?: number;\n  step?: number;\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  withTooltip?: boolean;\n  /**\n   * Размер ползунка.\n   */\n  size?: 's' | 'm' | 'l';\n}\n\nexport interface SliderProps extends SliderBaseProps {\n  multiple?: false;\n  value?: number;\n  defaultValue?: number;\n  onChange?: (value: number, event: CustomTouchEvent | React.ChangeEvent) => void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n  multiple: true;\n  value?: [number, number];\n  defaultValue?: [number, number];\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  onChange,\n  withTooltip,\n  size = 'l',\n  ...restProps\n}: SliderProps | SliderMultipleProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\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    const nextStartX = event.startX - nextContainerX;\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 + 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  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        className,\n      )}\n      onStart={disabled ? undefined : handlePointerStart}\n      onMove={disabled ? undefined : handlePointerMove}\n      onEnd={disabled ? undefined : handlePointerEnd}\n    >\n      <div className={styles.track} />\n      <div\n        className={styles.trackFill}\n        style={\n          multiple\n            ? { left: `${startValueInPercent}%`, right: `${100 - endReversedValueInPercent}%` }\n            : { width: `${startValueInPercent}%` }\n        }\n      />\n      <div ref={thumbsContainerRef} className={styles.thumbs}>\n        <SliderThumb\n          data-type=\"start\"\n          className={styles.thumb}\n          style={{\n            left: `${startValueInPercent}%`,\n            // Меняем местами порядок слоёв, иначе, при достижении `start` и `end` 100%, `end` будет перекрывать `start`.\n            zIndex: multiple && startValueInPercent >= 50 ? 2 : undefined,\n          }}\n          withTooltip={withTooltip}\n          inputProps={{\n            'data-type': 'start',\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={styles.thumb}\n            style={{ left: `${endReversedValueInPercent}%` }}\n            withTooltip={withTooltip}\n            inputProps={{\n              'data-type': 'end',\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","useAdaptivity","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","onChange","withTooltip","size","restProps","sizeY","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","data-value","host","onStart","onMove","onEnd","div","track","trackFill","style","right","ref","thumbs","data-type","thumb","zIndex","inputProps","isActive"],"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 { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { 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  min?: number;\n  max?: number;\n  step?: number;\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  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  multiple?: false;\n  value?: number;\n  defaultValue?: number;\n  onChange?: (value: number, event: CustomTouchEvent | React.ChangeEvent) => void;\n}\n\nexport interface SliderMultipleProps extends SliderBaseProps {\n  multiple: true;\n  value?: [number, number];\n  defaultValue?: [number, number];\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  ...restProps\n}: SliderProps | SliderMultipleProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\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    const nextStartX = event.startX - nextContainerX;\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 + 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  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        className,\n      )}\n      onStart={disabled ? undefined : handlePointerStart}\n      onMove={disabled ? undefined : handlePointerMove}\n      onEnd={disabled ? undefined : handlePointerEnd}\n    >\n      <div className={styles.track} />\n      <div\n        className={styles.trackFill}\n        style={\n          multiple\n            ? { left: `${startValueInPercent}%`, right: `${100 - endReversedValueInPercent}%` }\n            : { width: `${startValueInPercent}%` }\n        }\n      />\n      <div ref={thumbsContainerRef} className={styles.thumbs}>\n        <SliderThumb\n          data-type=\"start\"\n          className={styles.thumb}\n          style={{\n            left: `${startValueInPercent}%`,\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={styles.thumb}\n            style={{ left: `${endReversedValueInPercent}%` }}\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","useAdaptivity","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","restProps","sizeY","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","data-value","host","onStart","onMove","onEnd","div","track","trackFill","style","right","ref","thumbs","data-type","thumb","zIndex","inputProps","isActive"],"mappings":"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"}

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

@@ -44,7 +44,7 @@ const animationStateClassNames = {
     const panGestureRecognizer = React.useRef(null);
     const shiftDataRef = React.useRef(null);
     const rafRef = React.useRef(null);
-    const closeTimeoutIdRef = React.useRef();
+    const closeTimeoutIdRef = React.useRef(undefined);
     const mediaQueries = useMediaQueries();
     const [animationState, animationHandlers] = useCSSKeyframesAnimationController(open ? 'enter' : 'exit', {
         onExited: onClose

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 { 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 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>>();\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      );\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      )\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      )}\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","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","rootRef","focused","inRef","useRef","panGestureRecognizer","shiftDataRef","rafRef","closeTimeoutIdRef","mediaQueries","animationState","animationHandlers","onExited","clearRAF","useCallback","current","cancelAnimationFrame","updateShiftAxisCSSProperties","x","y","direction","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","baseStyle","div","className","in","ref","onTouchStart","onTouchMove","onTouchEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","align","appearance","size","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\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 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      );\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      )\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      )}\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","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","rootRef","focused","inRef","useRef","panGestureRecognizer","shiftDataRef","rafRef","closeTimeoutIdRef","mediaQueries","animationState","animationHandlers","onExited","clearRAF","useCallback","current","cancelAnimationFrame","updateShiftAxisCSSProperties","x","y","direction","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","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/Snackbar/subcomponents/Basic/Basic.module.css

@@ -1,9 +1,11 @@
 .body {
   --vkui_internal--snackbar-body_layout_vertical_action_shift: calc(
-    -1 * (
+    -1 *
+      (
         var(--vkui--size_button_small_height--compact) -
           var(--vkui--font_subhead--line_height--compact)
-      ) / 2
+      ) /
+      2
   );
 
   box-sizing: border-box;
@@ -18,20 +20,24 @@
 
 .sizeYRegular {
   --vkui_internal--snackbar-body_layout_vertical_action_shift: calc(
-    -1 * (
+    -1 *
+      (
         var(--vkui--size_button_small_height--regular) -
           var(--vkui--font_subhead--line_height--regular)
-      ) / 2
+      ) /
+      2
   );
 }
 
 @media (pointer: coarse) and (min-height: 415px),(pointer: none) and (min-height: 415px),(max-width: 767.9px) and (min-height: 415px) {
   .sizeYNone {
     --vkui_internal--snackbar-body_layout_vertical_action_shift: calc(
-      -1 * (
+      -1 *
+        (
           var(--vkui--size_button_small_height--regular) -
             var(--vkui--font_subhead--line_height--regular)
-        ) / 2
+        ) /
+        2
     );
   }
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitCol/SplitColContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext: React.Context<SplitColContextProps> =\n  React.createContext<SplitColContextProps>({\n    colRef: null,\n    animate: true,\n  });\n\nexport const useSplitCol = (): SplitColContextProps => React.useContext(SplitColContext);\n"],"names":["React","SplitColContext","createContext","colRef","animate","useSplitCol","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,OAAO,MAAMC,gCACXD,MAAME,aAAa,CAAuB;IACxCC,QAAQ;IACRC,SAAS;AACX,GAAG;AAEL,OAAO,MAAMC,cAAc,IAA4BL,MAAMM,UAAU,CAACL,iBAAiB"}
+{"version":3,"sources":["../../../../src/components/SplitCol/SplitColContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement | null> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext: React.Context<SplitColContextProps> =\n  React.createContext<SplitColContextProps>({\n    colRef: null,\n    animate: true,\n  });\n\nexport const useSplitCol = (): SplitColContextProps => React.useContext(SplitColContext);\n"],"names":["React","SplitColContext","createContext","colRef","animate","useSplitCol","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,OAAO,MAAMC,gCACXD,MAAME,aAAa,CAAuB;IACxCC,QAAQ;IACRC,SAAS;AACX,GAAG;AAEL,OAAO,MAAMC,cAAc,IAA4BL,MAAMM,UAAU,CAACL,iBAAiB"}

package/dist/cssm/components/Tabs/Tabs.js

@@ -2,10 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
-import { useGlobalEventListener } from "../../hooks/useGlobalEventListener.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
-import { pressedKey } from "../../lib/accessibility.js";
-import { useDOM } from "../../lib/dom.js";
+import { useTabsNavigation } from "../../hooks/useTabsNavigation.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import styles from "./Tabs.module.css";
 export const TabsModeContext = /*#__PURE__*/ React.createContext({
@@ -19,87 +17,9 @@ export const TabsModeContext = /*#__PURE__*/ React.createContext({
  * @see https://vkcom.github.io/VKUI/#/Tabs
  */ export const Tabs = ({ children, mode = 'default', role = 'tablist', withScrollToSelectedTab, scrollBehaviorToSelectedTab = 'nearest', layoutFillMode = 'auto', ...restProps })=>{
     const platform = usePlatform();
-    const { document } = useDOM();
     const isTabFlow = role === 'tablist';
-    const tabsRef = React.useRef(null);
     const withGaps = mode === 'accent' || mode === 'secondary';
-    const getTabEls = ()=>{
-        if (!tabsRef.current) {
-            return [];
-        }
-        return Array.from(// eslint-disable-next-line no-restricted-properties
-        tabsRef.current.querySelectorAll('[role=tab]:not([disabled])'));
-    };
-    const handleDocumentKeydown = (event)=>{
-        if (!document || !tabsRef.current || !isTabFlow) {
-            return;
-        }
-        const key = pressedKey(event);
-        switch(key){
-            case 'ArrowLeft':
-            case 'ArrowRight':
-            case 'End':
-            case 'Home':
-                {
-                    const tabEls = getTabEls();
-                    const currentFocusedElIndex = tabEls.findIndex((el)=>document.activeElement === el);
-                    if (currentFocusedElIndex === -1) {
-                        return;
-                    }
-                    let nextIndex = 0;
-                    if (key === 'Home') {
-                        nextIndex = 0;
-                    } else if (key === 'End') {
-                        nextIndex = tabEls.length - 1;
-                    } else {
-                        const offset = key === 'ArrowRight' ? 1 : -1;
-                        nextIndex = currentFocusedElIndex + offset;
-                    }
-                    const nextTabEl = tabEls[nextIndex];
-                    if (nextTabEl) {
-                        event.preventDefault();
-                        nextTabEl.focus();
-                    }
-                    break;
-                }
-            /*
-       В JAWS и NVDA стрелка вниз активирует контент.
-       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.
-       https://inclusive-components.design/tabbed-interfaces/
-      */ case 'ArrowDown':
-                {
-                    const tabEls = getTabEls();
-                    const currentFocusedEl = tabEls.find((el)=>document.activeElement === el);
-                    if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {
-                        return;
-                    }
-                    const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');
-                    if (!relatedContentElId) {
-                        return;
-                    }
-                    // eslint-disable-next-line no-restricted-properties
-                    const relatedContentEl = document.getElementById(relatedContentElId);
-                    if (!relatedContentEl) {
-                        return;
-                    }
-                    event.preventDefault();
-                    relatedContentEl.focus();
-                    break;
-                }
-            case 'Space':
-            case 'Enter':
-                {
-                    const tabEls = getTabEls();
-                    const currentFocusedEl = tabEls.find((el)=>document.activeElement === el);
-                    if (currentFocusedEl) {
-                        currentFocusedEl.click();
-                    }
-                }
-        }
-    };
-    useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {
-        capture: true
-    });
+    const { tabsRef } = useTabsNavigation(isTabFlow);
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
         baseClassName: classNames(styles.host, 'vkuiInternalTabs', platform === 'vkcom' && 'vkuiInternalTabs--vkcom', withGaps && classNames(styles.withGaps, 'vkuiInternalTabs--withGaps'), mode === 'default' && styles.modeDefault),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n  /**\n   * Включает прокрутку контейнера до активной (`selected`) вкладки\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;\n}\n\nexport const TabsModeContext: React.Context<TabsContextProps> =\n  React.createContext<TabsContextProps>({\n    mode: 'default',\n    withGaps: false,\n    layoutFillMode: 'auto',\n    withScrollToSelectedTab: false,\n    scrollBehaviorToSelectedTab: 'nearest',\n  });\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\n  ...restProps\n}: TabsProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { document } = useDOM();\n\n  const isTabFlow = role === 'tablist';\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const getTabEls = () => {\n    if (!tabsRef.current) {\n      return [];\n    }\n\n    return Array.from(\n      // eslint-disable-next-line no-restricted-properties\n      tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),\n    );\n  };\n\n  const handleDocumentKeydown = (event: KeyboardEvent) => {\n    if (!document || !tabsRef.current || !isTabFlow) {\n      return;\n    }\n\n    const key = pressedKey(event);\n\n    switch (key) {\n      case 'ArrowLeft':\n      case 'ArrowRight':\n      case 'End':\n      case 'Home': {\n        const tabEls = getTabEls();\n        const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);\n        if (currentFocusedElIndex === -1) {\n          return;\n        }\n\n        let nextIndex = 0;\n        if (key === 'Home') {\n          nextIndex = 0;\n        } else if (key === 'End') {\n          nextIndex = tabEls.length - 1;\n        } else {\n          const offset = key === 'ArrowRight' ? 1 : -1;\n          nextIndex = currentFocusedElIndex + offset;\n        }\n\n        const nextTabEl = tabEls[nextIndex];\n\n        if (nextTabEl) {\n          event.preventDefault();\n          nextTabEl.focus();\n        }\n\n        break;\n      }\n      /*\n       В JAWS и NVDA стрелка вниз активирует контент.\n       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.\n       https://inclusive-components.design/tabbed-interfaces/\n      */\n      case 'ArrowDown': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n\n        if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {\n          return;\n        }\n\n        const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');\n        if (!relatedContentElId) {\n          return;\n        }\n\n        // eslint-disable-next-line no-restricted-properties\n        const relatedContentEl = document.getElementById(relatedContentElId);\n        if (!relatedContentEl) {\n          return;\n        }\n\n        event.preventDefault();\n        relatedContentEl.focus();\n\n        break;\n      }\n      case 'Space':\n      case 'Enter': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n        if (currentFocusedEl) {\n          currentFocusedEl.click();\n        }\n      }\n    }\n  };\n\n  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalTabs',\n        platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles.withGaps, 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles.modeDefault,\n      )}\n      role={role}\n    >\n      <div className={styles.in} ref={tabsRef}>\n        <TabsModeContext.Provider\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useGlobalEventListener","usePlatform","pressedKey","useDOM","RootComponent","styles","TabsModeContext","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab","Tabs","children","role","restProps","platform","document","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","capture","baseClassName","host","modeDefault","div","className","in","ref","Provider","value"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTabsNavigation } from '../../hooks/useTabsNavigation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n  /**\n   * Включает прокрутку контейнера до активной (`selected`) вкладки\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;\n}\n\nexport const TabsModeContext: React.Context<TabsContextProps> =\n  React.createContext<TabsContextProps>({\n    mode: 'default',\n    withGaps: false,\n    layoutFillMode: 'auto',\n    withScrollToSelectedTab: false,\n    scrollBehaviorToSelectedTab: 'nearest',\n  });\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\n  ...restProps\n}: TabsProps): React.ReactNode => {\n  const platform = usePlatform();\n  const isTabFlow = role === 'tablist';\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const { tabsRef } = useTabsNavigation(isTabFlow);\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalTabs',\n        platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles.withGaps, 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles.modeDefault,\n      )}\n      role={role}\n    >\n      <div className={styles.in} ref={tabsRef}>\n        <TabsModeContext.Provider\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","usePlatform","useTabsNavigation","RootComponent","styles","TabsModeContext","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab","Tabs","children","role","restProps","platform","isTabFlow","tabsRef","baseClassName","host","modeDefault","div","className","in","ref","Provider","value"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,mCAAgC;AAElE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,oBAAoB;AAiCvC,OAAO,MAAMC,gCACXN,MAAMO,aAAa,CAAmB;IACpCC,MAAM;IACNC,UAAU;IACVC,gBAAgB;IAChBC,yBAAyB;IACzBC,6BAA6B;AAC/B,GAAG;AAEL;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,QAAQ,EACRN,OAAO,SAAS,EAChBO,OAAO,SAAS,EAChBJ,uBAAuB,EACvBC,8BAA8B,SAAS,EACvCF,iBAAiB,MAAM,EACvB,GAAGM,WACO;IACV,MAAMC,WAAWf;IACjB,MAAMgB,YAAYH,SAAS;IAC3B,MAAMN,WAAWD,SAAS,YAAYA,SAAS;IAE/C,MAAM,EAAEW,OAAO,EAAE,GAAGhB,kBAAkBe;IAEtC,qBACE,KAACd;QACE,GAAGY,SAAS;QACbI,eAAenB,WACbI,OAAOgB,IAAI,EACX,oBACAJ,aAAa,WAAW,2BACxBR,YAAYR,WAAWI,OAAOI,QAAQ,EAAE,+BACxCD,SAAS,aAAaH,OAAOiB,WAAW;QAE1CP,MAAMA;kBAEN,cAAA,KAACQ;YAAIC,WAAWnB,OAAOoB,EAAE;YAAEC,KAAKP;sBAC9B,cAAA,KAACb,gBAAgBqB,QAAQ;gBACvBC,OAAO;oBACLpB;oBACAC;oBACAC;oBACAC;oBACAC;gBACF;0BAECE;;;;AAKX,EAAE"}

package/dist/cssm/components/Textarea/Textarea.js

@@ -4,8 +4,8 @@ import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
-import { useGlobalEventListener } from "../../hooks/useGlobalEventListener.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
+import { useResizeObserver } from "../../hooks/useResizeObserver.js";
 import { callMultiple } from "../../lib/callMultiple.js";
 import { useDOM } from "../../lib/dom.js";
 import { FormField } from "../FormField/FormField.js";
@@ -30,7 +30,7 @@ const sizeYClassNames = {
         platform,
         value
     ]);
-    useGlobalEventListener(window, 'resize', resize);
+    useResizeObserver(window, resize);
     return /*#__PURE__*/ _jsx(FormField, {
         className: classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY], align === 'right' && styles.alignRight, align === 'center' && styles.alignCenter, className),
         style: style,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Textarea/Textarea.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 { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { useDOM } from '../../lib/dom';\nimport type { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport { useResizeTextarea } from './useResizeTextarea';\nimport styles from './Textarea.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface TextareaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onResize'>,\n    HasRef<HTMLTextAreaElement>,\n    HasRootRef<HTMLElement>,\n    HasAlign,\n    FormFieldProps {\n  grow?: boolean;\n  onResize?: (el: HTMLTextAreaElement) => void;\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Textarea\n */\nexport const Textarea = ({\n  grow = true,\n  style,\n  onResize,\n  className,\n  getRootRef,\n  getRef,\n  rows = 2,\n  maxHeight,\n  status,\n  onChange,\n  align,\n  mode,\n  after,\n  before,\n  afterAlign,\n  beforeAlign,\n  value,\n  ...restProps\n}: TextareaProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n  const { window } = useDOM();\n\n  const [refResizeTextarea, resize] = useResizeTextarea(onResize, grow);\n  const elementRef = useExternRef(getRef, refResizeTextarea);\n\n  React.useEffect(resize, [resize, sizeY, platform, value]);\n  useGlobalEventListener(window, 'resize', resize);\n\n  return (\n    <FormField\n      className={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        align === 'right' && styles.alignRight,\n        align === 'center' && styles.alignCenter,\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n      status={status}\n      mode={mode}\n      after={after}\n      before={before}\n      afterAlign={afterAlign}\n      beforeAlign={beforeAlign}\n      maxHeight={maxHeight}\n    >\n      <UnstyledTextField\n        {...restProps}\n        value={value}\n        as=\"textarea\"\n        rows={rows}\n        className={styles.el}\n        onChange={callMultiple(onChange, resize)}\n        getRootRef={elementRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useGlobalEventListener","usePlatform","callMultiple","useDOM","FormField","UnstyledTextField","useResizeTextarea","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","Textarea","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChange","align","mode","after","before","afterAlign","beforeAlign","value","restProps","sizeY","platform","window","refResizeTextarea","resize","elementRef","useEffect","host","alignRight","alignCenter","disabled","as","el"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,sBAAsB,QAAQ,wCAAqC;AAC5E,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AAEvC,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SAASC,iBAAiB,QAAQ,4CAAyC;AAC3E,SAASC,iBAAiB,QAAQ,yBAAsB;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAaA;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,OAAO,IAAI,EACXC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,OAAO,CAAC,EACRC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,KAAK,EACLC,IAAI,EACJC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,WAAW,EACXC,KAAK,EACL,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGlC;IAC3B,MAAMmC,WAAWhC;IACjB,MAAM,EAAEiC,MAAM,EAAE,GAAG/B;IAEnB,MAAM,CAACgC,mBAAmBC,OAAO,GAAG9B,kBAAkBU,UAAUF;IAChE,MAAMuB,aAAatC,aAAaoB,QAAQgB;IAExCvC,MAAM0C,SAAS,CAACF,QAAQ;QAACA;QAAQJ;QAAOC;QAAUH;KAAM;IACxD9B,uBAAuBkC,QAAQ,UAAUE;IAEzC,qBACE,KAAChC;QACCa,WAAWpB,WACTU,OAAOgC,IAAI,EACXP,UAAU,aAAaxB,eAAe,CAACwB,MAAM,EAC7CR,UAAU,WAAWjB,OAAOiC,UAAU,EACtChB,UAAU,YAAYjB,OAAOkC,WAAW,EACxCxB;QAEFF,OAAOA;QACPG,YAAYA;QACZwB,UAAUX,UAAUW,QAAQ;QAC5BpB,QAAQA;QACRG,MAAMA;QACNC,OAAOA;QACPC,QAAQA;QACRC,YAAYA;QACZC,aAAaA;QACbR,WAAWA;kBAEX,cAAA,KAAChB;YACE,GAAG0B,SAAS;YACbD,OAAOA;YACPa,IAAG;YACHvB,MAAMA;YACNH,WAAWV,OAAOqC,EAAE;YACpBrB,UAAUrB,aAAaqB,UAAUa;YACjClB,YAAYmB;;;AAIpB,EAAE"}
+{"version":3,"sources":["../../../../src/components/Textarea/Textarea.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 { usePlatform } from '../../hooks/usePlatform';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { useDOM } from '../../lib/dom';\nimport type { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport { useResizeTextarea } from './useResizeTextarea';\nimport styles from './Textarea.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface TextareaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onResize'>,\n    HasRef<HTMLTextAreaElement>,\n    HasRootRef<HTMLElement>,\n    HasAlign,\n    FormFieldProps {\n  grow?: boolean;\n  onResize?: (el: HTMLTextAreaElement) => void;\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Textarea\n */\nexport const Textarea = ({\n  grow = true,\n  style,\n  onResize,\n  className,\n  getRootRef,\n  getRef,\n  rows = 2,\n  maxHeight,\n  status,\n  onChange,\n  align,\n  mode,\n  after,\n  before,\n  afterAlign,\n  beforeAlign,\n  value,\n  ...restProps\n}: TextareaProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n  const { window } = useDOM();\n\n  const [refResizeTextarea, resize] = useResizeTextarea(onResize, grow);\n  const elementRef = useExternRef(getRef, refResizeTextarea);\n\n  React.useEffect(resize, [resize, sizeY, platform, value]);\n  useResizeObserver(window, resize);\n\n  return (\n    <FormField\n      className={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        align === 'right' && styles.alignRight,\n        align === 'center' && styles.alignCenter,\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n      status={status}\n      mode={mode}\n      after={after}\n      before={before}\n      afterAlign={afterAlign}\n      beforeAlign={beforeAlign}\n      maxHeight={maxHeight}\n    >\n      <UnstyledTextField\n        {...restProps}\n        value={value}\n        as=\"textarea\"\n        rows={rows}\n        className={styles.el}\n        onChange={callMultiple(onChange, resize)}\n        getRootRef={elementRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","usePlatform","useResizeObserver","callMultiple","useDOM","FormField","UnstyledTextField","useResizeTextarea","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","Textarea","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChange","align","mode","after","before","afterAlign","beforeAlign","value","restProps","sizeY","platform","window","refResizeTextarea","resize","elementRef","useEffect","host","alignRight","alignCenter","disabled","as","el"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,mCAAgC;AAClE,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AAEvC,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SAASC,iBAAiB,QAAQ,4CAAyC;AAC3E,SAASC,iBAAiB,QAAQ,yBAAsB;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAaA;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,OAAO,IAAI,EACXC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,MAAM,EACNC,OAAO,CAAC,EACRC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,KAAK,EACLC,IAAI,EACJC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,WAAW,EACXC,KAAK,EACL,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGlC;IAC3B,MAAMmC,WAAWjC;IACjB,MAAM,EAAEkC,MAAM,EAAE,GAAG/B;IAEnB,MAAM,CAACgC,mBAAmBC,OAAO,GAAG9B,kBAAkBU,UAAUF;IAChE,MAAMuB,aAAatC,aAAaoB,QAAQgB;IAExCvC,MAAM0C,SAAS,CAACF,QAAQ;QAACA;QAAQJ;QAAOC;QAAUH;KAAM;IACxD7B,kBAAkBiC,QAAQE;IAE1B,qBACE,KAAChC;QACCa,WAAWpB,WACTU,OAAOgC,IAAI,EACXP,UAAU,aAAaxB,eAAe,CAACwB,MAAM,EAC7CR,UAAU,WAAWjB,OAAOiC,UAAU,EACtChB,UAAU,YAAYjB,OAAOkC,WAAW,EACxCxB;QAEFF,OAAOA;QACPG,YAAYA;QACZwB,UAAUX,UAAUW,QAAQ;QAC5BpB,QAAQA;QACRG,MAAMA;QACNC,OAAOA;QACPC,QAAQA;QACRC,YAAYA;QACZC,aAAaA;QACbR,WAAWA;kBAEX,cAAA,KAAChB;YACE,GAAG0B,SAAS;YACbD,OAAOA;YACPa,IAAG;YACHvB,MAAMA;YACNH,WAAWV,OAAOqC,EAAE;YACpBrB,UAAUrB,aAAaqB,UAAUa;YACjClB,YAAYmB;;;AAIpB,EAAE"}

package/dist/cssm/components/Textarea/useResizeTextarea.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 export function useResizeTextarea(onResize, grow) {
     const elementRef = React.useRef(null);
-    const currentScrollHeight = React.useRef();
+    const currentScrollHeight = React.useRef(undefined);
     const resizeElement = React.useCallback((el)=>{
         if (grow && el.offsetParent) {
             el.style.height = '';

package/dist/cssm/components/Textarea/useResizeTextarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Textarea/useResizeTextarea.ts"],"sourcesContent":["import * as React from 'react';\n\nexport function useResizeTextarea(\n  onResize: ((el: HTMLTextAreaElement) => void) | undefined,\n  grow: boolean,\n): readonly [React.RefObject<HTMLTextAreaElement>, () => void] {\n  const elementRef = React.useRef<HTMLTextAreaElement>(null);\n  const currentScrollHeight = React.useRef<number>();\n\n  const resizeElement = React.useCallback(\n    (el: HTMLTextAreaElement) => {\n      if (grow && el.offsetParent) {\n        el.style.height = '';\n        el.style.height = `${el.scrollHeight}px`;\n\n        if (el.scrollHeight !== currentScrollHeight.current && onResize) {\n          onResize(el);\n          currentScrollHeight.current = el.scrollHeight;\n        }\n      }\n    },\n    [grow, onResize],\n  );\n\n  const resize = React.useCallback(() => {\n    const el = elementRef.current;\n    if (!el) {\n      /* istanbul ignore next: нет возможности воспроизвести */\n      return;\n    }\n\n    resizeElement(el);\n  }, [elementRef, resizeElement]);\n\n  return [elementRef, resize];\n}\n"],"names":["React","useResizeTextarea","onResize","grow","elementRef","useRef","currentScrollHeight","resizeElement","useCallback","el","offsetParent","style","height","scrollHeight","current","resize"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,OAAO,SAASC,kBACdC,QAAyD,EACzDC,IAAa;IAEb,MAAMC,aAAaJ,MAAMK,MAAM,CAAsB;IACrD,MAAMC,sBAAsBN,MAAMK,MAAM;IAExC,MAAME,gBAAgBP,MAAMQ,WAAW,CACrC,CAACC;QACC,IAAIN,QAAQM,GAAGC,YAAY,EAAE;YAC3BD,GAAGE,KAAK,CAACC,MAAM,GAAG;YAClBH,GAAGE,KAAK,CAACC,MAAM,GAAG,GAAGH,GAAGI,YAAY,CAAC,EAAE,CAAC;YAExC,IAAIJ,GAAGI,YAAY,KAAKP,oBAAoBQ,OAAO,IAAIZ,UAAU;gBAC/DA,SAASO;gBACTH,oBAAoBQ,OAAO,GAAGL,GAAGI,YAAY;YAC/C;QACF;IACF,GACA;QAACV;QAAMD;KAAS;IAGlB,MAAMa,SAASf,MAAMQ,WAAW,CAAC;QAC/B,MAAMC,KAAKL,WAAWU,OAAO;QAC7B,IAAI,CAACL,IAAI;YACP,uDAAuD,GACvD;QACF;QAEAF,cAAcE;IAChB,GAAG;QAACL;QAAYG;KAAc;IAE9B,OAAO;QAACH;QAAYW;KAAO;AAC7B"}
+{"version":3,"sources":["../../../../src/components/Textarea/useResizeTextarea.ts"],"sourcesContent":["import * as React from 'react';\n\nexport function useResizeTextarea(\n  onResize: ((el: HTMLTextAreaElement) => void) | undefined,\n  grow: boolean,\n): readonly [React.RefObject<HTMLTextAreaElement | null>, () => void] {\n  const elementRef = React.useRef<HTMLTextAreaElement | null>(null);\n  const currentScrollHeight = React.useRef<number>(undefined);\n\n  const resizeElement = React.useCallback(\n    (el: HTMLTextAreaElement) => {\n      if (grow && el.offsetParent) {\n        el.style.height = '';\n        el.style.height = `${el.scrollHeight}px`;\n\n        if (el.scrollHeight !== currentScrollHeight.current && onResize) {\n          onResize(el);\n          currentScrollHeight.current = el.scrollHeight;\n        }\n      }\n    },\n    [grow, onResize],\n  );\n\n  const resize = React.useCallback(() => {\n    const el = elementRef.current;\n    if (!el) {\n      /* istanbul ignore next: нет возможности воспроизвести */\n      return;\n    }\n\n    resizeElement(el);\n  }, [elementRef, resizeElement]);\n\n  return [elementRef, resize];\n}\n"],"names":["React","useResizeTextarea","onResize","grow","elementRef","useRef","currentScrollHeight","undefined","resizeElement","useCallback","el","offsetParent","style","height","scrollHeight","current","resize"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,OAAO,SAASC,kBACdC,QAAyD,EACzDC,IAAa;IAEb,MAAMC,aAAaJ,MAAMK,MAAM,CAA6B;IAC5D,MAAMC,sBAAsBN,MAAMK,MAAM,CAASE;IAEjD,MAAMC,gBAAgBR,MAAMS,WAAW,CACrC,CAACC;QACC,IAAIP,QAAQO,GAAGC,YAAY,EAAE;YAC3BD,GAAGE,KAAK,CAACC,MAAM,GAAG;YAClBH,GAAGE,KAAK,CAACC,MAAM,GAAG,GAAGH,GAAGI,YAAY,CAAC,EAAE,CAAC;YAExC,IAAIJ,GAAGI,YAAY,KAAKR,oBAAoBS,OAAO,IAAIb,UAAU;gBAC/DA,SAASQ;gBACTJ,oBAAoBS,OAAO,GAAGL,GAAGI,YAAY;YAC/C;QACF;IACF,GACA;QAACX;QAAMD;KAAS;IAGlB,MAAMc,SAAShB,MAAMS,WAAW,CAAC;QAC/B,MAAMC,KAAKN,WAAWW,OAAO;QAC7B,IAAI,CAACL,IAAI;YACP,uDAAuD,GACvD;QACF;QAEAF,cAAcE;IAChB,GAAG;QAACN;QAAYI;KAAc;IAE9B,OAAO;QAACJ;QAAYY;KAAO;AAC7B"}

package/dist/cssm/components/Tooltip/Tooltip.js

@@ -13,7 +13,7 @@ import { TooltipBase } from "../TooltipBase/TooltipBase.js";
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */ export const Tooltip = ({ // UseFloatingMiddlewaresBootstrapOptions
 placement: placementProp = 'bottom', arrowPadding = 10, arrowHeight = 8, offsetByMainAxis = 8, offsetByCrossAxis = 0, hideWhenReferenceHidden, disableFlipMiddleware = false, disableTriggerOnFocus = false, // useFloatingWithInteractions
-defaultShown, shown: shownProp, onShownChange, hoverDelay = 150, // инверсированные св-ва для useFloatingWithInteractions
+defaultShown, shown: shownProp, onShownChange, hoverDelay = 150, strategy, // инверсированные св-ва для useFloatingWithInteractions
 enableInteractive = false, disableArrow = false, disableCloseAfterClick = false, // Reference
 children, // AppRootProps
 usePortal, // TooltipBaseProps
@@ -44,7 +44,8 @@ id: idProp, getRootRef, appearance = 'neutral', style: styleProp, className, zIn
         hoverDelay,
         closeAfterClick: !disableCloseAfterClick,
         disableInteractive: !enableInteractive,
-        middlewares
+        middlewares,
+        strategy
     });
     const tooltipRef = useExternRef(getRootRef, refs.setFloating);
     usePlacementChangeCallback(placementProp, placement, onPlacementChange);