@vkontakte/vkui 5.5.4 → 5.6.0

package/dist/cjs/components/Slider/SliderThumb/SliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport type { HasDataAttribute, HasRootRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport styles from './SliderThumb.module.css';\n\ninterface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {\n  className?: string;\n  style?: React.CSSProperties;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement> &\n    React.RefAttributes<HTMLInputElement> &\n    HasDataAttribute;\n}\n\nexport const SliderThumb = ({\n  className,\n  getRootRef,\n  inputProps,\n  ...restProps\n}: SliderThumbProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible(false);\n\n  return (\n    <span\n      ref={getRootRef}\n      className={classNames(\n        styles['SliderThumb'],\n        focusVisible && styles['SliderThumb--focused'],\n        className,\n      )}\n      {...restProps}\n    >\n      <input\n        {...inputProps}\n        type=\"range\"\n        className={styles['SliderThumb__nativeInput']}\n        aria-orientation=\"horizontal\"\n        onBlur={onBlur}\n        onFocus={onFocus}\n      />\n      <FocusVisible visible={focusVisible} mode=\"outside\" />\n    </span>\n  );\n};\n"],"names":["SliderThumb","className","getRootRef","inputProps","restProps","useFocusVisible","focusVisible","onBlur","onFocus","span","ref","classNames","input","type","aria-orientation","FocusVisible","visible","mode"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;+DAfU;oBACI;+BACK;4BAEH;AAWtB,IAAMA,cAAc;QACzBC,mBAAAA,WACAC,oBAAAA,YACAC,oBAAAA,YACGC;QAHHH;QACAC;QACAC;;IAGA,IAA0CE,oBAAAA,IAAAA,kCAAgB,QAAlDC,eAAkCD,kBAAlCC,cAAcC,SAAoBF,kBAApBE,QAAQC,UAAYH,kBAAZG;IAE9B,qBACE,qBAACC;QACCC,KAAKR;QACLD,WAAWU,IAAAA,qCAETL,4CACAL;OAEEG,0BAEJ,qBAACQ,qDACKT;QACJU,MAAK;QACLZ,SAAS;QACTa,oBAAiB;QACjBP,QAAQA;QACRC,SAASA;uBAEX,qBAACO;QAAaC,SAASV;QAAcW,MAAK;;AAGhD"}
+{"version":3,"sources":["../../../../../src/components/Slider/SliderThumb/SliderThumb.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport type { HasDataAttribute, HasRootRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport styles from './SliderThumb.module.css';\n\ninterface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {\n  className?: string;\n  style?: React.CSSProperties;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement> &\n    React.RefAttributes<HTMLInputElement> &\n    HasDataAttribute;\n}\n\nexport const SliderThumb = ({\n  className,\n  getRootRef,\n  inputProps,\n  ...restProps\n}: SliderThumbProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible(false);\n\n  return (\n    <span\n      ref={getRootRef}\n      className={classNames(\n        styles['SliderThumb'],\n        focusVisible && styles['SliderThumb--focused'],\n        className,\n      )}\n      {...restProps}\n    >\n      <input\n        {...inputProps}\n        type=\"range\"\n        className={styles['SliderThumb__nativeInput']}\n        aria-orientation=\"horizontal\"\n        onBlur={onBlur}\n        onFocus={onFocus}\n      />\n      <FocusVisible visible={focusVisible} mode=\"outside\" />\n    </span>\n  );\n};\n"],"names":["SliderThumb","className","getRootRef","inputProps","restProps","useFocusVisible","focusVisible","onBlur","onFocus","span","ref","classNames","input","type","aria-orientation","FocusVisible","visible","mode"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;+DAfU;oBACI;+BACK;4BAEH;AAWtB,IAAMA,cAAc;QACzBC,mBAAAA,WACAC,oBAAAA,YACAC,oBAAAA,YACGC;QAHHH;QACAC;QACAC;;IAGA,IAA0CE,oBAAAA,IAAAA,gCAAe,EAAC,QAAlDC,eAAkCD,kBAAlCC,cAAcC,SAAoBF,kBAApBE,QAAQC,UAAYH,kBAAZG;IAE9B,qBACE,qBAACC;QACCC,KAAKR;QACLD,WAAWU,IAAAA,gBAAU,qBAEnBL,4CACAL;OAEEG,0BAEJ,qBAACQ,qDACKT;QACJU,MAAK;QACLZ,SAAS;QACTa,oBAAiB;QACjBP,QAAQA;QACRC,SAASA;uBAEX,qBAACO,0BAAY;QAACC,SAASV;QAAcW,MAAK;;AAGhD"}

package/dist/cjs/components/Slider/helpers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Slider/helpers.ts"],"sourcesContent":["import * as React from 'react';\nimport { rescale } from '../../helpers/math';\nimport type { InternalDraggingType, InternalValueState } from './types';\n\nexport const toPercent = (v: number, min: number, max: number) => ((v - min) / (max - min)) * 100;\n\nexport const offsetToValue = (\n  startX: number,\n  width: number,\n  min: number,\n  max: number,\n  step?: number,\n) => {\n  return rescale(startX, [0, width], [min, max], { step });\n};\n\nconst restrictValueByMinMax = (value: number, min: number, max: number) => {\n  if (value < min) {\n    return min;\n  }\n  if (value > max) {\n    return max;\n  }\n  return value;\n};\n\nexport const updateInternalStateValue = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  min: number,\n  max: number,\n  dragging: InternalDraggingType | null,\n): InternalValueState => {\n  const [prevStartValue, prevEndValue] = prevValue;\n\n  if (prevEndValue === null) {\n    return [restrictValueByMinMax(nextValue, min, max), null];\n  }\n\n  switch (dragging) {\n    case 'start':\n      return nextValue > prevEndValue\n        ? [prevEndValue, prevEndValue]\n        : [restrictValueByMinMax(nextValue, min, max), prevEndValue];\n    case 'end':\n      return nextValue < prevStartValue\n        ? [prevStartValue, prevStartValue]\n        : [prevStartValue, restrictValueByMinMax(nextValue, min, max)];\n    case null:\n    default:\n      return prevValue;\n  }\n};\n\nexport const updateInternalStateValueByNativeChange = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  dragging: InternalDraggingType | null,\n): InternalValueState => {\n  const [prevStartValue, prevEndValue] = prevValue;\n  switch (dragging) {\n    case 'start':\n      return [nextValue, prevEndValue];\n    case 'end':\n      return [prevStartValue, nextValue];\n    case null:\n    default:\n      return prevValue;\n  }\n};\n\nexport function isMultipleValues(value: InternalValueState): value is [number, number] {\n  return value[1] !== null;\n}\n\nexport const snapDirection = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  type: InternalDraggingType | null,\n) => {\n  if (type === 'start') {\n    return 'start';\n  }\n  if (type === 'end') {\n    return 'end';\n  }\n\n  const [startRaw, endRaw] = prevValue;\n  /* startRaw и endRaw могут быть равны, поэтому насильно добавляем разницу. */\n  const FORCE_DIFF_VALUE = 0.1;\n  const start = endRaw !== null ? startRaw - FORCE_DIFF_VALUE : startRaw;\n  const end = endRaw !== null ? endRaw + FORCE_DIFF_VALUE : 0;\n  return Math.abs(start - nextValue) <= Math.abs(end - nextValue) ? 'start' : 'end';\n};\n\nexport const getDraggingTypeByTargetDataset = <T extends (EventTarget & HTMLElement) | null>(\n  target: T,\n) => {\n  if (target) {\n    if (target.dataset.type === 'start') {\n      return 'start';\n    }\n    if (target.dataset.type === 'end') {\n      return 'end';\n    }\n  }\n  return null;\n};\n\nconst resetProps = {\n  'aria-label': undefined,\n  'aria-valuetext': undefined,\n  'aria-labelledby': undefined,\n};\n\nexport const extractSliderAriaAttributesFromRestProps = <T extends React.AriaAttributes>(\n  restProps: T,\n) => {\n  const ariaLabel = restProps['aria-label'];\n  const ariaValueText = restProps['aria-valuetext'];\n  const ariaLabelledBy = restProps['aria-labelledby'];\n  return { ...restProps, ...resetProps, ariaLabel, ariaValueText, ariaLabelledBy };\n};\n"],"names":["toPercent","offsetToValue","updateInternalStateValue","updateInternalStateValueByNativeChange","isMultipleValues","snapDirection","getDraggingTypeByTargetDataset","extractSliderAriaAttributesFromRestProps","v","min","max","startX","width","step","rescale","restrictValueByMinMax","value","prevValue","nextValue","dragging","prevStartValue","prevEndValue","type","startRaw","endRaw","FORCE_DIFF_VALUE","start","end","Math","abs","target","dataset","resetProps","undefined","restProps","ariaLabel","ariaValueText","ariaLabelledBy"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Slider/helpers.ts"],"sourcesContent":["import * as React from 'react';\nimport { rescale } from '../../helpers/math';\nimport type { InternalDraggingType, InternalValueState } from './types';\n\nexport const toPercent = (v: number, min: number, max: number) => ((v - min) / (max - min)) * 100;\n\nexport const offsetToValue = (\n  startX: number,\n  width: number,\n  min: number,\n  max: number,\n  step?: number,\n) => {\n  return rescale(startX, [0, width], [min, max], { step });\n};\n\nconst restrictValueByMinMax = (value: number, min: number, max: number) => {\n  if (value < min) {\n    return min;\n  }\n  if (value > max) {\n    return max;\n  }\n  return value;\n};\n\nexport const updateInternalStateValue = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  min: number,\n  max: number,\n  dragging: InternalDraggingType | null,\n): InternalValueState => {\n  const [prevStartValue, prevEndValue] = prevValue;\n\n  if (prevEndValue === null) {\n    return [restrictValueByMinMax(nextValue, min, max), null];\n  }\n\n  switch (dragging) {\n    case 'start':\n      return nextValue > prevEndValue\n        ? [prevEndValue, prevEndValue]\n        : [restrictValueByMinMax(nextValue, min, max), prevEndValue];\n    case 'end':\n      return nextValue < prevStartValue\n        ? [prevStartValue, prevStartValue]\n        : [prevStartValue, restrictValueByMinMax(nextValue, min, max)];\n    case null:\n    default:\n      return prevValue;\n  }\n};\n\nexport const updateInternalStateValueByNativeChange = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  dragging: InternalDraggingType | null,\n): InternalValueState => {\n  const [prevStartValue, prevEndValue] = prevValue;\n  switch (dragging) {\n    case 'start':\n      return [nextValue, prevEndValue];\n    case 'end':\n      return [prevStartValue, nextValue];\n    case null:\n    default:\n      return prevValue;\n  }\n};\n\nexport function isMultipleValues(value: InternalValueState): value is [number, number] {\n  return value[1] !== null;\n}\n\nexport const snapDirection = (\n  prevValue: InternalValueState,\n  nextValue: number,\n  type: InternalDraggingType | null,\n) => {\n  if (type === 'start') {\n    return 'start';\n  }\n  if (type === 'end') {\n    return 'end';\n  }\n\n  const [startRaw, endRaw] = prevValue;\n  /* startRaw и endRaw могут быть равны, поэтому насильно добавляем разницу. */\n  const FORCE_DIFF_VALUE = 0.1;\n  const start = endRaw !== null ? startRaw - FORCE_DIFF_VALUE : startRaw;\n  const end = endRaw !== null ? endRaw + FORCE_DIFF_VALUE : 0;\n  return Math.abs(start - nextValue) <= Math.abs(end - nextValue) ? 'start' : 'end';\n};\n\nexport const getDraggingTypeByTargetDataset = <T extends (EventTarget & HTMLElement) | null>(\n  target: T,\n) => {\n  if (target) {\n    if (target.dataset.type === 'start') {\n      return 'start';\n    }\n    if (target.dataset.type === 'end') {\n      return 'end';\n    }\n  }\n  return null;\n};\n\nconst resetProps = {\n  'aria-label': undefined,\n  'aria-valuetext': undefined,\n  'aria-labelledby': undefined,\n};\n\nexport const extractSliderAriaAttributesFromRestProps = <T extends React.AriaAttributes>(\n  restProps: T,\n) => {\n  const ariaLabel = restProps['aria-label'];\n  const ariaValueText = restProps['aria-valuetext'];\n  const ariaLabelledBy = restProps['aria-labelledby'];\n  return { ...restProps, ...resetProps, ariaLabel, ariaValueText, ariaLabelledBy };\n};\n"],"names":["toPercent","offsetToValue","updateInternalStateValue","updateInternalStateValueByNativeChange","isMultipleValues","snapDirection","getDraggingTypeByTargetDataset","extractSliderAriaAttributesFromRestProps","v","min","max","startX","width","step","rescale","restrictValueByMinMax","value","prevValue","nextValue","dragging","prevStartValue","prevEndValue","type","startRaw","endRaw","FORCE_DIFF_VALUE","start","end","Math","abs","target","dataset","resetProps","undefined","restProps","ariaLabel","ariaValueText","ariaLabelledBy"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  className,\n  subtitle,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          {\n            vertical: styles['Snackbar--layout-vertical'],\n            horizontal: styles['Snackbar--layout-horizontal'],\n          }[layout],\n          mode === 'dark' && styles['Snackbar--mode-dark'],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n          className,\n        )}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"names":["Snackbar","children","layoutProps","layout","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","usePlatform","viewWidth","useAdaptivityWithJSMediaQueries","isDesktop","ViewWidth","SMALL_TABLET","waitTransitionFinish","useWaitTransitionFinish","React","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","Platform","IOS","close","current","handleActionClick","e","closeTimeout","useTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","rubber","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","AppRootPortal","div","classNames","vertical","horizontal","Touch","getRootRef","onStart","onMoveX","onEnd","ref","Paragraph","Subhead","Button","align","appearance","size","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  className,\n  subtitle,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          {\n            vertical: styles['Snackbar--layout-vertical'],\n            horizontal: styles['Snackbar--layout-horizontal'],\n          }[layout],\n          mode === 'dark' && styles['Snackbar--mode-dark'],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n          className,\n        )}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"names":["Snackbar","children","layoutProps","layout","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","usePlatform","viewWidth","useAdaptivityWithJSMediaQueries","isDesktop","ViewWidth","SMALL_TABLET","waitTransitionFinish","useWaitTransitionFinish","React","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","Platform","IOS","close","current","handleActionClick","e","closeTimeout","useTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","rubber","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","AppRootPortal","div","classNames","vertical","horizontal","Touch","getRootRef","onStart","onMoveX","onEnd","ref","Paragraph","Subhead","Button","align","appearance","size","onClick"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasChildren } from '../../types';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasChildren {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return <div {...restProps} className={classNames(className, styles['Spacing'])} style={style} />;\n};\n"],"names":["Spacing","size","style","styleProp","className","restProps","height","padding","div","classNames"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;+DAfU;oBACI;AAcpB,IAAMA,UAAU;6BAAGC,MAAAA,gCAAO,iBAAGC,AAAOC,mBAAPD,OAAkBE,mBAAAA,WAAcC;QAA1CJ;QAAUC;QAAkBE;;IACpD,IAAMF,QAA6B;QACjCI,QAAQL;QACRM,SAAS,AAAC,GAAW,OAATN,OAAO,GAAE;OAClBE;IAGL,qBAAO,qBAACK,mDAAQH;QAAWD,WAAWK,IAAAA,kBAAWL;QAA+BF,OAAOA;;AACzF"}
+{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasChildren } from '../../types';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasChildren {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return <div {...restProps} className={classNames(className, styles['Spacing'])} style={style} />;\n};\n"],"names":["Spacing","size","style","styleProp","className","restProps","height","padding","div","classNames"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;+DAfU;oBACI;AAcpB,IAAMA,UAAU;6BAAGC,MAAAA,gCAAO,iBAAGC,AAAOC,mBAAPD,OAAkBE,mBAAAA,WAAcC;QAA1CJ;QAAUC;QAAkBE;;IACpD,IAAMF,QAA6B;QACjCI,QAAQL;QACRM,SAAS,AAAC,GAAW,OAATN,OAAO,GAAE;OAClBE;IAGL,qBAAO,qBAACK,mDAAQH;QAAWD,WAAWK,IAAAA,gBAAU,EAACL;QAA+BF,OAAOA;;AACzF"}

package/dist/cjs/components/Spinner/Spinner.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
     size?: 'small' | 'regular' | 'medium' | 'large';
+    disableAnimation?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
  */
-export declare const Spinner: React.MemoExoticComponent<({ size, children, "aria-label": ariaLabel, className, ...restProps }: SpinnerProps) => React.JSX.Element>;
+export declare const Spinner: React.MemoExoticComponent<({ size, children, "aria-label": ariaLabel, disableAnimation, className, ...restProps }: SpinnerProps) => React.JSX.Element>;

package/dist/cjs/components/Spinner/Spinner.js

@@ -20,10 +20,11 @@ var _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden");
 var warn = (0, _warnOnce.warnOnce)("Spinner");
 var Spinner = /*#__PURE__*/ _react.memo(function(_param) {
     var _param_size = _param.size, size = _param_size === void 0 ? "regular" : _param_size, _param_children = _param.children, children = _param_children === void 0 ? "Загружается..." : _param_children, tmp = _param[// TODO [>=6]: Удалить автоматическое приведение aria-label
-    "aria-label"], ariaLabel = tmp === void 0 ? "Загружается..." : tmp, className = _param.className, restProps = _object_without_properties._(_param, [
+    "aria-label"], ariaLabel = tmp === void 0 ? "Загружается..." : tmp, disableAnimation = _param.disableAnimation, className = _param.className, restProps = _object_without_properties._(_param, [
         "size",
         "children",
         "aria-label",
+        "disableAnimation",
         "className"
     ]);
     var SpinnerIcon = {
@@ -32,6 +33,12 @@ var Spinner = /*#__PURE__*/ _react.memo(function(_param) {
         medium: _icons.Icon32Spinner,
         large: _icons.Icon44Spinner
     }[size];
+    var center = {
+        small: 8,
+        regular: 12,
+        medium: 16,
+        large: 22
+    }[size];
     // TODO [>=6]: Удалить варнинг
     if (process.env.NODE_ENV === "development") {
         if (ariaLabel && !children) {
@@ -42,9 +49,17 @@ var Spinner = /*#__PURE__*/ _react.memo(function(_param) {
         role: "status"
     }, restProps), {
         className: (0, _vkjs.classNames)("vkuiSpinner", className)
-    }), /*#__PURE__*/ _react.createElement(SpinnerIcon, {
-        className: "vkuiSpinner__self"
-    }), /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, null, children !== null && children !== void 0 ? children : ariaLabel));
+    }), /*#__PURE__*/ _react.createElement(SpinnerIcon, null, !disableAnimation && // TODO [a11y]: use reduced motion hook?
+    //              https://github.com/VKCOM/VKUI/pull/4673
+    /*#__PURE__*/ _react.createElement("animateTransform", {
+        attributeName: "transform",
+        attributeType: "XML",
+        type: "rotate",
+        from: "0 ".concat(center, " ").concat(center),
+        to: "360 ".concat(center, " ").concat(center),
+        dur: "0.7s",
+        repeatCount: "indefinite"
+    })), /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, null, children !== null && children !== void 0 ? children : ariaLabel));
 });
 Spinner.displayName = "Spinner";
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n}\n\nconst warn = warnOnce('Spinner');\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    children = 'Загружается...',\n    // TODO [>=6]: Удалить автоматическое приведение aria-label\n    'aria-label': ariaLabel = 'Загружается...',\n    className,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    // TODO [>=6]: Удалить варнинг\n    if (process.env.NODE_ENV === 'development') {\n      if (ariaLabel && !children) {\n        warn(\n          'a11y: Пожалуйста, передавайте ваш текст для ассистивных технологий в children вместо aria-label.',\n        );\n      }\n    }\n\n    return (\n      <span role=\"status\" {...restProps} className={classNames(styles['Spinner'], className)}>\n        <SpinnerIcon className={styles['Spinner__self']} />\n        <VisuallyHidden>{children ?? ariaLabel}</VisuallyHidden>\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["Spinner","warn","warnOnce","React","memo","size","children","ariaLabel","className","restProps","SpinnerIcon","small","Icon16Spinner","regular","Icon24Spinner","medium","Icon32Spinner","large","Icon44Spinner","process","env","NODE_ENV","span","role","classNames","VisuallyHidden","displayName"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;+DAfU;qBACoD;oBAChD;wBACF;8BACM;AAO/B,IAAMC,OAAOC,IAAAA,oBAAS;AAIf,IAAMF,wBAAUG,OAAMC,KAC3B;6BACEC,MAAAA,gCAAO,kDACPC,UAAAA,wCAAW,oCAEGC,aADd,2DAA2D;IAC3D,eAAcA,YAAAA,iBAAY,mBAAZA,KACdC,mBAAAA,WACGC;QALHJ;QACAC;QAEA;QACAE;;IAGA,IAAME,cAAc;QAClBC,OAAOC;QACPC,SAASC;QACTC,QAAQC;QACRC,OAAOC;IACT,CAAC,CAACb,KAAK;IAEP,8BAA8B;IAC9B,IAAIc,QAAQC,IAAIC,aAAa,eAAe;QAC1C,IAAId,aAAa,CAACD,UAAU;YAC1BL,KACE;QAEJ;IACF;IAEA,qBACE,qBAACqB;QAAKC,MAAK;OAAad;QAAWD,WAAWgB,IAAAA,iCAA8BhB;sBAC1E,qBAACE;QAAYF,SAAS;sBACtB,qBAACiB,sCAAgBnB,qBAAAA,sBAAAA,WAAYC;AAGnC;AAGFP,QAAQ0B,cAAc"}
+{"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n  disableAnimation?: boolean;\n}\n\nconst warn = warnOnce('Spinner');\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    children = 'Загружается...',\n    // TODO [>=6]: Удалить автоматическое приведение aria-label\n    'aria-label': ariaLabel = 'Загружается...',\n    disableAnimation,\n    className,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    const center = {\n      small: 8,\n      regular: 12,\n      medium: 16,\n      large: 22,\n    }[size];\n\n    // TODO [>=6]: Удалить варнинг\n    if (process.env.NODE_ENV === 'development') {\n      if (ariaLabel && !children) {\n        warn(\n          'a11y: Пожалуйста, передавайте ваш текст для ассистивных технологий в children вместо aria-label.',\n        );\n      }\n    }\n\n    return (\n      <span role=\"status\" {...restProps} className={classNames(styles['Spinner'], className)}>\n        <SpinnerIcon>\n          {!disableAnimation && (\n            // TODO [a11y]: use reduced motion hook?\n            //              https://github.com/VKCOM/VKUI/pull/4673\n            <animateTransform\n              attributeName=\"transform\"\n              attributeType=\"XML\"\n              type=\"rotate\"\n              from={`0 ${center} ${center}`}\n              to={`360 ${center} ${center}`}\n              dur=\"0.7s\"\n              repeatCount=\"indefinite\"\n            />\n          )}\n        </SpinnerIcon>\n        <VisuallyHidden>{children ?? ariaLabel}</VisuallyHidden>\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["Spinner","warn","warnOnce","React","memo","size","children","ariaLabel","disableAnimation","className","restProps","SpinnerIcon","small","Icon16Spinner","regular","Icon24Spinner","medium","Icon32Spinner","large","Icon44Spinner","center","process","env","NODE_ENV","span","role","classNames","animateTransform","attributeName","attributeType","type","from","to","dur","repeatCount","VisuallyHidden","displayName"],"mappings":";;;;+BAgBaA;;;eAAAA;;;;;;;+DAhBU;qBACoD;oBAChD;wBACF;8BACM;AAQ/B,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAIf,IAAMF,wBAAUG,OAAMC,IAAI,CAC/B;6BACEC,MAAAA,gCAAO,kDACPC,UAAAA,wCAAW,oCAEGC,aADd,2DAA2D;IAC3D,eAAcA,YAAAA,iBAAY,mBAAZA,KACdC,0BAAAA,kBACAC,mBAAAA,WACGC;QANHL;QACAC;QAEA;QACAE;QACAC;;IAGA,IAAME,cAAc;QAClBC,OAAOC,oBAAa;QACpBC,SAASC,oBAAa;QACtBC,QAAQC,oBAAa;QACrBC,OAAOC,oBAAa;IACtB,CAAC,CAACd,KAAK;IAEP,IAAMe,SAAS;QACbR,OAAO;QACPE,SAAS;QACTE,QAAQ;QACRE,OAAO;IACT,CAAC,CAACb,KAAK;IAEP,8BAA8B;IAC9B,IAAIgB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIhB,aAAa,CAACD,UAAU;YAC1BL,KACE;QAEJ;IACF;IAEA,qBACE,qBAACuB;QAAKC,MAAK;OAAaf;QAAWD,WAAWiB,IAAAA,gBAAU,iBAAoBjB;sBAC1E,qBAACE,mBACE,CAACH,oBACA,wCAAwC;IACxC,uDAAuD;kBACvD,qBAACmB;QACCC,eAAc;QACdC,eAAc;QACdC,MAAK;QACLC,MAAM,AAAC,KAAcX,OAAVA,QAAO,KAAU,OAAPA;QACrBY,IAAI,AAAC,OAAgBZ,OAAVA,QAAO,KAAU,OAAPA;QACrBa,KAAI;QACJC,aAAY;uBAIlB,qBAACC,8BAAc,QAAE7B,qBAAAA,sBAAAA,WAAYC;AAGnC;AAGFP,QAAQoC,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   *\n   * @deprecated используйте autoSpaced\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\nconst warn = warnOnce('SplitCol');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  if (process.env.NODE_ENV === 'development' && spaced !== undefined) {\n    // TODO [>=6]: Удалить spaced\n    warn('Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced');\n  }\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        spaced && classNames(styles['SplitCol--spaced'], 'vkuiInternalSplitCol--spaced'),\n        spaced === undefined &&\n          classNames(styles['SplitCol--spaced-none'], 'vkuiInternalSplitCol--spaced-none'),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n        className,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"names":["SplitCol","breakpointClassNames","none","classNames","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","useAdaptivity","React","useState","Boolean","animate","setAnimate","mediaQueries","useMediaQueries","useEffect","undefined","ViewWidth","TABLET","listener","matches","matchMediaListAddListener","matchMediaListRemoveListener","warn","warnOnce","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","contextValue","useObjectMemo","colRef","process","env","NODE_ENV","div","ref","viewWidthToClassName","SplitColContext","Provider","value"],"mappings":";;;;+BA6EaA;;;eAAAA;;;;;;;;+DA7EU;oBACI;6BACG;+BACE;6BACF;0BACkB;0BACwB;wBAC/C;+BACO;AAGhC,IAAMC,uBAAuB;IAC3BC,MAAMC,IAAAA,kDAA+C;IACrDC,WAAW;IACXC,eAAe;IACfC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,IAAM,AAAEC,YAAcC,IAAAA,gCAAdD;IACR,IAA8BE,qCAAAA,OAAMC,SAASC,QAAQL,mBAA9CM,UAAuBH,oBAAdI,aAAcJ;IAC9B,IAAMK,eAAeC,IAAAA;IAErBN,OAAMO,UAAU;QACd,IAAIV,gBAAgBW,WAAW;YAC7BJ,WAAWP;YACX;QACF;QAEA,IAAIC,cAAcU,WAAW;YAC3BJ,WAAWN,YAAYW,sBAAUC;YACjC;QACF;QAEA,oDAAoD;QACpD,IAAMC,WAAW;mBAAMP,WAAW,CAACC,aAAaX,gBAAgBkB;;QAChED;QAEAE,IAAAA,uCAA0BR,aAAaX,iBAAiBiB;QACxD,OAAO;YACLG,IAAAA,0CAA6BT,aAAaX,iBAAiBiB;QAC7D;IACF,GAAG;QAACd;QAAaC;QAAWO;KAAa;IAEzC,OAAOF;AACT;AA2BA,IAAMY,OAAOC,IAAAA,oBAAS;AAKf,IAAM3B,WAAW,SAAC4B;IACvB,IACEC,WAYED,MAZFC,UACAC,QAWEF,MAXFE,OACAC,WAUEH,MAVFG,UACAC,WASEJ,MATFI,UACAC,SAQEL,MARFK,QACAnB,AAASN,cAOPoB,MAPFd,SACAoB,QAMEN,MANFM,OACAC,QAKEP,MALFO,OACAC,aAIER,MAJFQ,YACAC,oBAGET,MAHFS,mBACAC,YAEEV,MAFFU,WACGC,yCACDX;QAZFC;QACAC;QACAC;QACAC;QACAC;QACAnB;QACAoB;QACAC;QACAC;QACAC;QACAC;;IAGF,IAAME,UAAU7B,OAAM8B,OAAuB;IAC7C,IAAM,AAAEhC,YAAcC,IAAAA,gCAAdD;IACR,IAAMK,UAAUP,qBAAqBC;IAErC,IAAMkC,eAAeC,IAAAA,8BAAc;QACjCC,QAAQJ;QACR1B,SAAAA;IACF;IAEA,IAAI+B,QAAQC,IAAIC,aAAa,iBAAiBd,WAAWd,WAAW;QAClE,6BAA6B;QAC7BO,KAAK;IACP;IAEA,qBACE,qBAACsB,mDACKT;QACJJ,OAAO,4CACFA;YACHL,OAAOA;YACPC,UAAUA;YACVC,UAAUA;;QAEZiB,KAAKT;QACLF,WAAWnC,IAAAA,kCAET+C,IAAAA,kCAAqBjD,sBAAsBQ,YAC3CwB,UAAU9B,IAAAA,0CAAuC,iCACjD8B,WAAWd,aACThB,IAAAA,+CAA4C,sCAC9CiC,cACEjC,IAAAA,+CAA4C,sCAC9C+B,gCACAG,0DACAC;sBAGF,qBAACa,iCAAgBC;QAASC,OAAOX;OAC9BR,sBAAQ,qBAACc;QAAIV,SAAS;OAAmCT,YAAkBA;AAIpF"}
+{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   *\n   * @deprecated используйте autoSpaced\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\nconst warn = warnOnce('SplitCol');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  if (process.env.NODE_ENV === 'development' && spaced !== undefined) {\n    // TODO [>=6]: Удалить spaced\n    warn('Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced');\n  }\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        spaced && classNames(styles['SplitCol--spaced'], 'vkuiInternalSplitCol--spaced'),\n        spaced === undefined &&\n          classNames(styles['SplitCol--spaced-none'], 'vkuiInternalSplitCol--spaced-none'),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n        className,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"names":["SplitCol","breakpointClassNames","none","classNames","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","useAdaptivity","React","useState","Boolean","animate","setAnimate","mediaQueries","useMediaQueries","useEffect","undefined","ViewWidth","TABLET","listener","matches","matchMediaListAddListener","matchMediaListRemoveListener","warn","warnOnce","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","contextValue","useObjectMemo","colRef","process","env","NODE_ENV","div","ref","viewWidthToClassName","SplitColContext","Provider","value"],"mappings":";;;;+BA6EaA;;;eAAAA;;;;;;;;+DA7EU;oBACI;6BACG;+BACE;6BACF;0BACkB;0BACwB;wBAC/C;+BACO;AAGhC,IAAMC,uBAAuB;IAC3BC,MAAMC,IAAAA,gBAAU,kCAAqC;IACrDC,WAAW;IACXC,eAAe;IACfC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,IAAM,AAAEC,YAAcC,IAAAA,4BAAa,IAA3BD;IACR,IAA8BE,qCAAAA,OAAMC,QAAQ,CAACC,QAAQL,mBAA9CM,UAAuBH,oBAAdI,aAAcJ;IAC9B,IAAMK,eAAeC,IAAAA,gCAAe;IAEpCN,OAAMO,SAAS,CAAC;QACd,IAAIV,gBAAgBW,WAAW;YAC7BJ,WAAWP;YACX;QACF;QAEA,IAAIC,cAAcU,WAAW;YAC3BJ,WAAWN,YAAYW,qBAAS,CAACC,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,IAAMC,WAAW;mBAAMP,WAAW,CAACC,aAAaX,eAAe,CAACkB,OAAO;;QACvED;QAEAE,IAAAA,qCAAyB,EAACR,aAAaX,eAAe,EAAEiB;QACxD,OAAO;YACLG,IAAAA,wCAA4B,EAACT,aAAaX,eAAe,EAAEiB;QAC7D;IACF,GAAG;QAACd;QAAaC;QAAWO;KAAa;IAEzC,OAAOF;AACT;AA2BA,IAAMY,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAM3B,WAAW,SAAC4B;IACvB,IACEC,WAYED,MAZFC,UACAC,QAWEF,MAXFE,OACAC,WAUEH,MAVFG,UACAC,WASEJ,MATFI,UACAC,SAQEL,MARFK,QACAnB,AAASN,cAOPoB,MAPFd,SACAoB,QAMEN,MANFM,OACAC,QAKEP,MALFO,OACAC,aAIER,MAJFQ,YACAC,oBAGET,MAHFS,mBACAC,YAEEV,MAFFU,WACGC,yCACDX;QAZFC;QACAC;QACAC;QACAC;QACAC;QACAnB;QACAoB;QACAC;QACAC;QACAC;QACAC;;IAGF,IAAME,UAAU7B,OAAM8B,MAAM,CAAiB;IAC7C,IAAM,AAAEhC,YAAcC,IAAAA,4BAAa,IAA3BD;IACR,IAAMK,UAAUP,qBAAqBC;IAErC,IAAMkC,eAAeC,IAAAA,4BAAa,EAAC;QACjCC,QAAQJ;QACR1B,SAAAA;IACF;IAEA,IAAI+B,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBd,WAAWd,WAAW;QAClE,6BAA6B;QAC7BO,KAAK;IACP;IAEA,qBACE,qBAACsB,mDACKT;QACJJ,OAAO,4CACFA;YACHL,OAAOA;YACPC,UAAUA;YACVC,UAAUA;;QAEZiB,KAAKT;QACLF,WAAWnC,IAAAA,gBAAU,kBAEnB+C,IAAAA,gCAAoB,EAACjD,sBAAsBQ,YAC3CwB,UAAU9B,IAAAA,gBAAU,0BAA6B,iCACjD8B,WAAWd,aACThB,IAAAA,gBAAU,+BAAkC,sCAC9CiC,cACEjC,IAAAA,gBAAU,+BAAkC,sCAC9C+B,gCACAG,0DACAC;sBAGF,qBAACa,gCAAe,CAACC,QAAQ;QAACC,OAAOX;OAC9BR,sBAAQ,qBAACc;QAAIV,SAAS;OAAmCT,YAAkBA;AAIpF"}

package/dist/cjs/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.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n"],"names":["SplitColContext","useSplitCol","React","createContext","colRef","animate","useContext"],"mappings":";;;;;;;;;;;IAOaA,eAAe;eAAfA;;IAKAC,WAAW;eAAXA;;;;+DAZU;AAOhB,IAAMD,gCAAkBE,OAAMC,cAAoC;IACvEC,QAAQ;IACRC,SAAS;AACX;AAEO,IAAMJ,cAAc;WAAMC,OAAMI,WAAWN"}
+{"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.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n"],"names":["SplitColContext","useSplitCol","React","createContext","colRef","animate","useContext"],"mappings":";;;;;;;;;;;IAOaA,eAAe;eAAfA;;IAKAC,WAAW;eAAXA;;;;+DAZU;AAOhB,IAAMD,gCAAkBE,OAAMC,aAAa,CAAuB;IACvEC,QAAQ;IACRC,SAAS;AACX;AAEO,IAAMJ,cAAc;WAAMC,OAAMI,UAAU,CAACN"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === Platform.IOS && styles['SplitLayout--ios'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"names":["SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","usePlatform","PopoutRoot","classNames","Platform","IOS","div","ref"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;+DA1BU;oBACI;2BACC;wBACH;0BAEE;AAqBpB,IAAMA,cAAc;QACzBC,gBAAAA,QACAC,eAAAA,OACAC,gBAAAA,QACAC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA;IAEjB,qBACE,qBAACC;QACCJ,WAAWK,IAAAA,qCAETH,aAAaI,mBAASC;QAExBb,QAAQA;QACRC,OAAOA;QACPG,YAAYA;OAEXF,sBACD,qBAACY,mDACKP;QACJQ,KAAKV;QACLC,WAAWK,IAAAA,4CAET,CAAC,CAACT,4CACFI;QAGDH;AAIT"}
+{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === Platform.IOS && styles['SplitLayout--ios'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"names":["SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","usePlatform","PopoutRoot","classNames","Platform","IOS","div","ref"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;+DA1BU;oBACI;2BACC;wBACH;0BAEE;AAqBpB,IAAMA,cAAc;QACzBC,gBAAAA,QACAC,eAAAA,OACAC,gBAAAA,QACAC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,sBAAU;QACTJ,WAAWK,IAAAA,gBAAU,qBAEnBH,aAAaI,kBAAQ,CAACC,GAAG;QAE3Bb,QAAQA;QACRC,OAAOA;QACPG,YAAYA;OAEXF,sBACD,qBAACY,mDACKP;QACJQ,KAAKV;QACLC,WAAWK,IAAAA,gBAAU,4BAEnB,CAAC,CAACT,4CACFI;QAGDH;AAIT"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  mode?: 'fixed' | 'overflow';\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = 'overflow',\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  className,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === 'fixed') {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        'vkuiInternalSubnavigationBar',\n        mode === 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed'),\n        className,\n      )}\n    >\n      <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>\n        <div className={styles['SubnavigationBar__scrollIn']}>{children}</div>\n      </ScrollWrapper>\n    </div>\n  );\n};\n"],"names":["SubnavigationBar","defaultScrollToLeft","x","defaultScrollToRight","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","className","restProps","ScrollWrapper","scrollWrapperProps","HorizontalScroll","div","classNames"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;+DAzBU;oBACI;gCAKpB;AAYP,IAAMC,sBAA6C,SAACC;WAAMA,IAAI;;AAE9D,IAAMC,uBAA8C,SAACD;WAAMA,IAAI;;AAKxD,IAAMF,mBAAmB;6BAC9BI,MAAAA,gCAAO,0BACPC,kBAAAA,qCACAC,YAAAA,4CAAa,0DACbC,iBAAAA,sDAAkBN,+EAClBO,kBAAAA,wDAAmBL,gDACnBM,iCAAAA,yBACAC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAIE;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIT,SAAS,SAAS;QACpBQ,gBAAgB;IAClB,OAAO;QACLA,gBAAgBE;QAChBD,qBAAqB;YACnBP,YAAAA;YACAC,iBAAAA;YACAC,kBAAAA;YACAC,yBAAAA;QACF;IACF;IAEA,qBACE,qBAACM,mDACKJ;QACJD,WAAWM,IAAAA,kBACT,gCACAZ,SAAS,WAAWY,IAAAA,kBAAW,6CAC/BN;sBAGF,qBAACE;QAAcF,SAAS;OAAsCG,mCAC5D,qBAACE;QAAIL,SAAS;OAAyCL;AAI/D"}
+{"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  mode?: 'fixed' | 'overflow';\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = 'overflow',\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  className,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === 'fixed') {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        'vkuiInternalSubnavigationBar',\n        mode === 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed'),\n        className,\n      )}\n    >\n      <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>\n        <div className={styles['SubnavigationBar__scrollIn']}>{children}</div>\n      </ScrollWrapper>\n    </div>\n  );\n};\n"],"names":["SubnavigationBar","defaultScrollToLeft","x","defaultScrollToRight","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","className","restProps","ScrollWrapper","scrollWrapperProps","HorizontalScroll","div","classNames"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;+DAzBU;oBACI;gCAKpB;AAYP,IAAMC,sBAA6C,SAACC;WAAMA,IAAI;;AAE9D,IAAMC,uBAA8C,SAACD;WAAMA,IAAI;;AAKxD,IAAMF,mBAAmB;6BAC9BI,MAAAA,gCAAO,0BACPC,kBAAAA,qCACAC,YAAAA,4CAAa,0DACbC,iBAAAA,sDAAkBN,+EAClBO,kBAAAA,wDAAmBL,gDACnBM,iCAAAA,yBACAC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAIE;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIT,SAAS,SAAS;QACpBQ,gBAAgB;IAClB,OAAO;QACLA,gBAAgBE,kCAAgB;QAChCD,qBAAqB;YACnBP,YAAAA;YACAC,iBAAAA;YACAC,kBAAAA;YACAC,yBAAAA;QACF;IACF;IAEA,qBACE,qBAACM,mDACKJ;QACJD,WAAWM,IAAAA,gBAAU,EACnB,gCACAZ,SAAS,WAAWY,IAAAA,gBAAU,EAAC,6CAC/BN;sBAGF,qBAACE;QAAcF,SAAS;OAAsCG,mCAC5D,qBAACE;QAAIL,SAAS;OAAyCL;AAI/D"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasChildren, HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SubnavigationButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['SubnavigationButton--sizeY-compact'],\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        {\n          s: styles['SubnavigationButton--size-s'],\n          m: styles['SubnavigationButton--size-m'],\n          l: styles['SubnavigationButton--size-l'],\n        }[size],\n        {\n          primary: styles['SubnavigationButton--mode-primary'],\n          outline: styles['SubnavigationButton--mode-outline'],\n          tertiary: styles['SubnavigationButton--mode-tertiary'],\n        }[mode],\n        selected && styles['SubnavigationButton--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["SubnavigationButton","sizeYClassNames","none","SizeType","COMPACT","SubnavigationButtonTypography","textLevel","restProps","Subhead","Caption","level","mode","size","selected","before","after","expandable","children","className","useAdaptivity","sizeY","Tappable","hasActive","focusVisibleMode","classNames","s","m","l","primary","outline","tertiary","REGULAR","span","Component","Icon16Dropdown"],"mappings":";;;;+BAwDaA;;;eAAAA;;;;;;;;+DAxDU;qBACQ;oBACJ;6BACG;0BACL;wBAEe;uBAChB;uBACA;AAGxB,IAAMC;IACJC,IAAI;GACHC,qBAASC;AA6BZ,IAAMC,gCAAgC;QACpCC,mBAAAA,WACGC;QADHD;;IAGA,IAAIA,cAAc,KAAK;QACrB,qBAAO,qBAACE,kBAAYD;IACtB;IAEA,qBAAO,qBAACE;QAAQC,OAAOJ,cAAc,MAAM,MAAM;OAASC;AAC5D;AAKO,IAAMP,sBAAsB;6BACjCW,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,mBACPC,kBAAAA,oCACAP,WAAAA,0CAAY,wBACZQ,gBAAAA,QACAC,eAAAA,OACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,WACGX;QATHI;QACAC;QACAC;QACAP;QACAQ;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BC,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,gEACKd;QACJe,WAAW;QACXC,kBAAiB;QACjBL,WAAWM,IAAAA,6CAET;YACEC,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAACf,KAAK,EACP;YACEgB,OAAO;YACPC,OAAO;YACPC,QAAQ;QACV,CAAC,CAACnB,KAAK,EACPE,iDACAO,UAAUjB,qBAAS4B,WAAW9B,eAAe,CAACmB,MAAM,EACpDF;sBAGF,qBAACc;QAAKd,SAAS;OACZJ,wBAAU,qBAACkB;QAAKd,SAAS;OAA0CJ,uBACpE,qBAACT;QACCC,WAAWA;QACXY,SAAS;QACTe,WAAU;OAEThB,WAEFF,uBAAS,qBAACiB;QAAKd,SAAS;OAAyCH,QACjEC,4BAAc,qBAACkB;QAAehB,SAAS;;AAIhD"}
+{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasChildren, HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SubnavigationButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['SubnavigationButton--sizeY-compact'],\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        {\n          s: styles['SubnavigationButton--size-s'],\n          m: styles['SubnavigationButton--size-m'],\n          l: styles['SubnavigationButton--size-l'],\n        }[size],\n        {\n          primary: styles['SubnavigationButton--mode-primary'],\n          outline: styles['SubnavigationButton--mode-outline'],\n          tertiary: styles['SubnavigationButton--mode-tertiary'],\n        }[mode],\n        selected && styles['SubnavigationButton--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["SubnavigationButton","sizeYClassNames","none","SizeType","COMPACT","SubnavigationButtonTypography","textLevel","restProps","Subhead","Caption","level","mode","size","selected","before","after","expandable","children","className","useAdaptivity","sizeY","Tappable","hasActive","focusVisibleMode","classNames","s","m","l","primary","outline","tertiary","REGULAR","span","Component","Icon16Dropdown"],"mappings":";;;;+BAwDaA;;;eAAAA;;;;;;;;+DAxDU;qBACQ;oBACJ;6BACG;0BACL;wBAEe;uBAChB;uBACA;AAGxB,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AA6BnB,IAAMC,gCAAgC;QACpCC,mBAAAA,WACGC;QADHD;;IAGA,IAAIA,cAAc,KAAK;QACrB,qBAAO,qBAACE,gBAAO,EAAKD;IACtB;IAEA,qBAAO,qBAACE,gBAAO;QAACC,OAAOJ,cAAc,MAAM,MAAM;OAASC;AAC5D;AAKO,IAAMP,sBAAsB;6BACjCW,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,mBACPC,kBAAAA,oCACAP,WAAAA,0CAAY,wBACZQ,gBAAAA,QACAC,eAAAA,OACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,WACGX;QATHI;QACAC;QACAC;QACAP;QACAQ;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC,kBAAQ,8CACHd;QACJe,WAAW;QACXC,kBAAiB;QACjBL,WAAWM,IAAAA,gBAAU,6BAEnB;YACEC,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAACf,KAAK,EACP;YACEgB,OAAO;YACPC,OAAO;YACPC,QAAQ;QACV,CAAC,CAACnB,KAAK,EACPE,iDACAO,UAAUjB,oBAAQ,CAAC4B,OAAO,IAAI9B,eAAe,CAACmB,MAAM,EACpDF;sBAGF,qBAACc;QAAKd,SAAS;OACZJ,wBAAU,qBAACkB;QAAKd,SAAS;OAA0CJ,uBACpE,qBAACT;QACCC,WAAWA;QACXY,SAAS;QACTe,WAAU;OAEThB,WAEFF,uBAAS,qBAACiB;QAAKd,SAAS;OAAyCH,QACjEC,4BAAc,qBAACkB,qBAAc;QAAChB,SAAS;;AAIhD"}

package/dist/cjs/components/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  [SizeType.COMPACT]: styles['Switch--sizeY-compact'],\n};\n\nexport interface SwitchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({ style, className, getRootRef, getRef, ...restProps }: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        platform === Platform.IOS && styles['Switch--ios'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        restProps.disabled && styles['Switch--disabled'],\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n      onBlur={callMultiple(onBlur, restProps.onBlur)}\n      onFocus={callMultiple(onFocus, restProps.onFocus)}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        getRootRef={getRef}\n        type=\"checkbox\"\n        className={styles['Switch__self']}\n      />\n      <span aria-hidden className={styles['Switch__pseudo']} />\n      <FocusVisible visible={focusVisible} mode=\"outside\" />\n    </label>\n  );\n};\n"],"names":["Switch","sizeYClassNames","none","SizeType","COMPACT","style","className","getRootRef","getRef","restProps","platform","usePlatform","useAdaptivity","sizeY","useFocusVisible","focusVisible","onBlur","onFocus","label","classNames","Platform","IOS","REGULAR","disabled","ref","callMultiple","VisuallyHidden","Component","type","span","aria-hidden","FocusVisible","visible","mode"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;;+DA1BU;oBACI;6BACG;+BACE;2BACJ;0BACH;4BACI;wBACJ;4BAEI;8BACE;AAG/B,IAAMC;IACJC,IAAI;GACHC,qBAASC;AAWL,IAAMJ,SAAS;QAAGK,eAAAA,OAAOC,mBAAAA,WAAWC,oBAAAA,YAAYC,gBAAAA,QAAWC;QAAzCJ;QAAOC;QAAWC;QAAYC;;IACrD,IAAME,WAAWC,IAAAA;IACjB,IAA2BC,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAA0CC,oBAAAA,IAAAA,qCAAlCC,eAAkCD,kBAAlCC,cAAcC,SAAoBF,kBAApBE,QAAQC,UAAYH,kBAAZG;IAE9B,qBACE,qBAACC;QACCZ,WAAWa,IAAAA,gCAETT,aAAaU,mBAASC,0BACtBR,UAAUV,qBAASmB,WAAWrB,eAAe,CAACY,MAAM,EACpDJ,UAAUc,oCACVjB;QAEFD,OAAOA;QACPmB,KAAKjB;QACLS,QAAQS,IAAAA,4BAAaT,QAAQP,UAAUO;QACvCC,SAASQ,IAAAA,4BAAaR,SAASR,UAAUQ;qBAEzC,qBAACS,4EACKjB;QACJkB,WAAU;QACVpB,YAAYC;QACZoB,MAAK;QACLtB,SAAS;uBAEX,qBAACuB;QAAKC,eAAAA;QAAYxB,SAAS;sBAC3B,qBAACyB;QAAaC,SAASjB;QAAckB,MAAK;;AAGhD"}
+{"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  [SizeType.COMPACT]: styles['Switch--sizeY-compact'],\n};\n\nexport interface SwitchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({ style, className, getRootRef, getRef, ...restProps }: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        platform === Platform.IOS && styles['Switch--ios'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        restProps.disabled && styles['Switch--disabled'],\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n      onBlur={callMultiple(onBlur, restProps.onBlur)}\n      onFocus={callMultiple(onFocus, restProps.onFocus)}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        getRootRef={getRef}\n        type=\"checkbox\"\n        className={styles['Switch__self']}\n      />\n      <span aria-hidden className={styles['Switch__pseudo']} />\n      <FocusVisible visible={focusVisible} mode=\"outside\" />\n    </label>\n  );\n};\n"],"names":["Switch","sizeYClassNames","none","SizeType","COMPACT","style","className","getRootRef","getRef","restProps","platform","usePlatform","useAdaptivity","sizeY","useFocusVisible","focusVisible","onBlur","onFocus","label","classNames","Platform","IOS","REGULAR","disabled","ref","callMultiple","VisuallyHidden","Component","type","span","aria-hidden","FocusVisible","visible","mode"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;;+DA1BU;oBACI;6BACG;+BACE;2BACJ;0BACH;4BACI;wBACJ;4BAEI;8BACE;AAG/B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAWZ,IAAMJ,SAAS;QAAGK,eAAAA,OAAOC,mBAAAA,WAAWC,oBAAAA,YAAYC,gBAAAA,QAAWC;QAAzCJ;QAAOC;QAAWC;QAAYC;;IACrD,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAA0CC,oBAAAA,IAAAA,gCAAe,KAAjDC,eAAkCD,kBAAlCC,cAAcC,SAAoBF,kBAApBE,QAAQC,UAAYH,kBAAZG;IAE9B,qBACE,qBAACC;QACCZ,WAAWa,IAAAA,gBAAU,gBAEnBT,aAAaU,kBAAQ,CAACC,GAAG,uBACzBR,UAAUV,oBAAQ,CAACmB,OAAO,IAAIrB,eAAe,CAACY,MAAM,EACpDJ,UAAUc,QAAQ,4BAClBjB;QAEFD,OAAOA;QACPmB,KAAKjB;QACLS,QAAQS,IAAAA,0BAAY,EAACT,QAAQP,UAAUO,MAAM;QAC7CC,SAASQ,IAAAA,0BAAY,EAACR,SAASR,UAAUQ,OAAO;qBAEhD,qBAACS,8BAAc,8CACTjB;QACJkB,WAAU;QACVpB,YAAYC;QACZoB,MAAK;QACLtB,SAAS;uBAEX,qBAACuB;QAAKC,eAAAA;QAAYxB,SAAS;sBAC3B,qBAACyB,0BAAY;QAACC,SAASjB;QAAckB,MAAK;;AAGhD"}

package/dist/cjs/components/Tabbar/Tabbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ children, shadow = true, mode, className, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === Platform.IOS && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, children),\n        shadow && styles['Tabbar--shadow'],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["Tabbar","getItemsLayoutClassName","itemsLayout","children","React","Children","count","shadow","mode","className","restProps","platform","usePlatform","div","classNames","Platform","IOS"],"mappings":";;;;+BAoCaA;;;eAAAA;;;;;;+DApCU;oBACI;2BACC;wBACH;AAczB,IAAMC,0BAA0B,SAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAOE,OAAMC,SAASC,MAAMH,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAKO,IAAMD,SAAS;QAAGG,kBAAAA,iCAAUI,QAAAA,oCAAS,sBAAMC,cAAAA,MAAMC,mBAAAA,WAAcC;QAA7CP;QAAUI;QAAeC;QAAMC;;IACtD,IAAME,WAAWC,IAAAA;IAEjB,qBACE,qBAACC;QACCJ,WAAWK,IAAAA,kBACT,oCAEAH,aAAaI,mBAASC,0BACtBf,wBAAwBO,MAAML,WAC9BI,gCACAE;OAEEC,YAEHP;AAGP"}
+{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ children, shadow = true, mode, className, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === Platform.IOS && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, children),\n        shadow && styles['Tabbar--shadow'],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["Tabbar","getItemsLayoutClassName","itemsLayout","children","React","Children","count","shadow","mode","className","restProps","platform","usePlatform","div","classNames","Platform","IOS"],"mappings":";;;;+BAoCaA;;;eAAAA;;;;;;+DApCU;oBACI;2BACC;wBACH;AAczB,IAAMC,0BAA0B,SAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAOE,OAAMC,QAAQ,CAACC,KAAK,CAACH,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAKO,IAAMD,SAAS;QAAGG,kBAAAA,iCAAUI,QAAAA,oCAAS,sBAAMC,cAAAA,MAAMC,mBAAAA,WAAcC;QAA7CP;QAAUI;QAAeC;QAAMC;;IACtD,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC;QACCJ,WAAWK,IAAAA,gBAAU,EACnB,oCAEAH,aAAaI,kBAAQ,CAACC,GAAG,uBACzBf,wBAAwBO,MAAML,WAC9BI,gCACAE;OAEEC,YAEHP;AAGP"}

package/dist/cjs/components/TabbarItem/TabbarItem.js

@@ -43,7 +43,7 @@ var TabbarItem = function(_param) {
         ref: getRootRef,
         disabled: disabled,
         href: href,
-        className: (0, _vkjs.classNames)("vkuiTabbarItem", platform === _platform.Platform.IOS && "vkuiTabbarItem--ios", platform === _platform.Platform.ANDROID && "vkuiTabbarItem--android", selected && "vkuiTabbarItem--selected", !!text && "vkuiTabbarItem--text", className)
+        className: (0, _vkjs.classNames)("vkuiTabbarItem", platform === _platform.Platform.IOS && "vkuiTabbarItem--ios", platform === _platform.Platform.ANDROID && "vkuiTabbarItem--android", selected && "vkuiTabbarItem--selected", className)
     }), /*#__PURE__*/ _react.createElement(_Tappable.Tappable, {
         role: "presentation",
         Component: "div",

package/dist/cjs/components/TabbarItem/TabbarItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  className,\n  getRootRef,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      disabled={disabled}\n      href={href}\n      className={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n        !!text && styles['TabbarItem--text'],\n        className,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"names":["TabbarItem","warn","warnOnce","children","selected","indicator","text","href","Component","disabled","className","getRootRef","restProps","platform","usePlatform","process","env","NODE_ENV","hasAccessibleName","COMMON_WARNINGS","a11y","ref","classNames","Platform","IOS","ANDROID","Tappable","role","activeMode","activeEffectDelay","hasHover","div","hasReactNode","Footnote","weight"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;+DA9BU;oBACkB;2BACb;wBACH;wBACiB;wBAEjB;wBACA;AAkBzB,IAAMC,OAAOC,IAAAA,oBAAS;AAKf,IAAMF,aAAa;QACxBG,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,cAAAA,MACAC,cAAAA,gCACAC,WAAAA,0CAAYD,OAAO,MAAM,6BACzBE,kBAAAA,UACAC,mBAAAA,WACAC,oBAAAA,YACGC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA;IAEjB,IAAIC,QAAQC,IAAIC,aAAa,eAAe;QAC1C,IAAMC,oBAAoBZ,QAAQM,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACM,mBAAmB;YACtBjB,KAAKkB,0BAAgBC,IAAI,CAACZ,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,qBAACA,uDACKI;QACJS,KAAKV;QACLF,UAAUA;QACVF,MAAMA;QACNG,WAAWY,IAAAA,oCAETT,aAAaU,mBAASC,8BACtBX,aAAaU,mBAASE,sCACtBrB,wCACA,CAAC,CAACE,gCACFI;sBAGF,qBAACgB;QACCC,MAAK;QACLnB,WAAU;QACVC,UAAUA;QACVmB,YACEf,aAAaU,mBAASC,2CAA+C;QAEvEK,mBAAmBhB,aAAaU,mBAASC,MAAM,IAAI;QACnDM,UAAU;QACVpB,SAAS;sBAEX,qBAACqB;QAAIrB,SAAS;qBACZ,qBAACqB;QAAIrB,SAAS;OACXP,wBACD,qBAAC4B;QAAIrB,WAAU;OACZsB,IAAAA,oBAAa3B,cAAcA,aAG/BC,sBACC,qBAAC2B;QAASzB,WAAU;QAAME,SAAS;QAA8BwB,QAAO;OACrE5B;AAMb"}
+{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  className,\n  getRootRef,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      disabled={disabled}\n      href={href}\n      className={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n        className,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"names":["TabbarItem","warn","warnOnce","children","selected","indicator","text","href","Component","disabled","className","getRootRef","restProps","platform","usePlatform","process","env","NODE_ENV","hasAccessibleName","COMMON_WARNINGS","a11y","ref","classNames","Platform","IOS","ANDROID","Tappable","role","activeMode","activeEffectDelay","hasHover","div","hasReactNode","Footnote","weight"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;+DA9BU;oBACkB;2BACb;wBACH;wBACiB;wBAEjB;wBACA;AAkBzB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMF,aAAa;QACxBG,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,cAAAA,MACAC,cAAAA,gCACAC,WAAAA,0CAAYD,OAAO,MAAM,6BACzBE,kBAAAA,UACAC,mBAAAA,WACAC,oBAAAA,YACGC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAMC,oBAAoBZ,QAAQM,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACM,mBAAmB;YACtBjB,KAAKkB,yBAAe,CAACC,IAAI,CAACZ,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,qBAACA,uDACKI;QACJS,KAAKV;QACLF,UAAUA;QACVF,MAAMA;QACNG,WAAWY,IAAAA,gBAAU,oBAEnBT,aAAaU,kBAAQ,CAACC,GAAG,2BACzBX,aAAaU,kBAAQ,CAACE,OAAO,+BAC7BrB,wCACAM;sBAGF,qBAACgB,kBAAQ;QACPC,MAAK;QACLnB,WAAU;QACVC,UAAUA;QACVmB,YACEf,aAAaU,kBAAQ,CAACC,GAAG,wCAA4C;QAEvEK,mBAAmBhB,aAAaU,kBAAQ,CAACC,GAAG,GAAG,IAAI;QACnDM,UAAU;QACVpB,SAAS;sBAEX,qBAACqB;QAAIrB,SAAS;qBACZ,qBAACqB;QAAIrB,SAAS;OACXP,wBACD,qBAAC4B;QAAIrB,WAAU;OACZsB,IAAAA,kBAAY,EAAC3B,cAAcA,aAG/BC,sBACC,qBAAC2B,kBAAQ;QAACzB,WAAU;QAAME,SAAS;QAA8BwB,QAAO;OACrE5B;AAMb"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * 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 { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: 'default',\n  withGaps: false,\n});\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  getRootRef,\n  className,\n  role = 'tablist',\n  ...restProps\n}: TabsProps) => {\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    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Tabs'],\n        'vkuiInternalTabs',\n        platform === Platform.VKCOM && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles['Tabs--withGaps'], 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles['Tabs--mode-default'],\n        className,\n      )}\n      role={role}\n    >\n      <div className={styles['Tabs__in']} ref={tabsRef}>\n        <TabsModeContext.Provider value={{ mode, withGaps }}>{children}</TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n"],"names":["TabsModeContext","Tabs","React","createContext","mode","withGaps","children","getRootRef","className","role","restProps","platform","usePlatform","document","useDOM","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","pressedKey","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","useGlobalEventListener","capture","div","ref","classNames","Platform","VKCOM","Provider","value"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * 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 { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: 'default',\n  withGaps: false,\n});\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  getRootRef,\n  className,\n  role = 'tablist',\n  ...restProps\n}: TabsProps) => {\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    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Tabs'],\n        'vkuiInternalTabs',\n        platform === Platform.VKCOM && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles['Tabs--withGaps'], 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles['Tabs--mode-default'],\n        className,\n      )}\n      role={role}\n    >\n      <div className={styles['Tabs__in']} ref={tabsRef}>\n        <TabsModeContext.Provider value={{ mode, withGaps }}>{children}</TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n"],"names":["TabsModeContext","Tabs","React","createContext","mode","withGaps","children","getRootRef","className","role","restProps","platform","usePlatform","document","useDOM","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","pressedKey","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","useGlobalEventListener","capture","div","ref","classNames","Platform","VKCOM","Provider","value"],"mappings":"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"}

package/dist/cjs/components/TabsItem/TabsItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles['TabsItem--sizeY-none'],\n  [SizeType.COMPACT]: styles['TabsItem--sizeY-compact'],\n};\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (status) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['TabsItem'],\n        mode &&\n          {\n            default: styles['TabsItem--mode-default'],\n            accent: styles['TabsItem--mode-accent'],\n            secondary: styles['TabsItem--mode-secondary'],\n          }[mode],\n        selected && styles['TabsItem--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        className,\n      )}\n      hoverMode={styles['TabsItem--hover']}\n      activeMode=\"\"\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["TabsItem","sizeYClassNames","none","SizeType","COMPACT","warn","warnOnce","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","restProps","useAdaptivity","sizeY","React","useContext","TabsModeContext","mode","withGaps","statusComponent","isTabFlow","Subhead","Component","classNames","weight","VisuallyHidden","span","process","env","NODE_ENV","undefined","Tappable","default","accent","secondary","REGULAR","hoverMode","activeMode","focusVisibleMode","hasActive","aria-selected","div","Headline","level","aria-hidden","data-selected"],"mappings":";;;;+BAgDaA;;;eAAAA;;;;;;;;+DAhDU;oBACI;6BACG;0BACL;wBACA;oBACyB;wBACzB;wBACA;uBACD;8BACO;AAG/B,IAAMC;IACJC,IAAI;GACHC,qBAASC;AA6BZ,IAAMC,OAAOC,IAAAA,oBAAS;AAKf,IAAMN,WAAW;QACtBO,gBAAAA,QACAC,kBAAAA,UACAC,gBAAAA,QACAC,eAAAA,gCACAC,UAAAA,wCAAW,yBACXC,mBAAAA,gCACAC,MAAAA,gCAAO,qBACPC,AAAUC,sBAAVD,UACGE;QARHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BG,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAA6CC,oBAAAA,OAAMC,WAAWC,wBAAtDC,OAAqCH,kBAArCG,MAAMC,WAA+BJ,kBAA/BI;IACd,IAAIC,kBAAkB;IAEtB,IAAMC,YAAYZ,SAAS;IAE3B,IAAIJ,QAAQ;QACVe,kBACE,OAAOf,WAAW,yBAChB,qBAACiB;YACCC,WAAU;YACVf,WAAWgB,IAAAA;YACXC,QAAO;yBAEP,qBAACC,sCAAe,SACfrB,wBAGH,qBAACsB;YAAKnB,SAAS;yBACb,qBAACkB,sCAAe,SACfrB;IAGT;IAEA,IAAIuB,QAAQC,IAAIC,aAAa,iBAAiBT,WAAW;QACvD,IAAI,CAACT,SAAS,CAAC,gBAAgB,EAAE;YAC/BX,KAAM,wDAAuD;QAC/D,OAAO,IAAI,CAACW,SAAS,CAAC,KAAK,EAAE;YAC3BX,KACG,yFACD;QAEJ;IACF;IAEA,IAAIS,WAAWC;IACf,IAAIU,aAAaX,aAAaqB,WAAW;QACvCrB,WAAWH,WAAW,IAAI,CAAC;IAC7B;IAEA,qBACE,qBAACyB,gEACKpB;QACJJ,WAAWgB,IAAAA,kCAETN,QACE,CAAA;YACEe,OAAO;YACPC,MAAM;YACNC,SAAS;QACX,CAAA,CAAC,CAACjB,KAAK,EACTX,sCACAO,UAAUf,qBAASqC,WAAWvC,eAAe,CAACiB,MAAM,EACpDK,sCACAX;QAEF6B,SAAS;QACTC,YAAW;QACXC,kBAAiB;QACjBC,WAAW;QACX/B,MAAMA;QACNgC,iBAAelC;QACfG,UAAUA;QAETP,wBAAU,qBAACuC;QAAIlC,SAAS;OAA+BL,uBACxD,qBAACwC;QACCpB,WAAU;QACVf,SAAS;QACToC,OAAO1B,SAAS,YAAY,MAAM;QAClCO,QAAO;OAENrB,WAEFgB,iBACAd,uBAAS,qBAACoC;QAAIlC,SAAS;OAA8BF,QACrDY,SAAS,2BACR,qBAACwB;QAAIlC,SAAS;QAAiCqC,eAAAA;QAAYC,iBAAevC;;AAIlF"}
+{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles['TabsItem--sizeY-none'],\n  [SizeType.COMPACT]: styles['TabsItem--sizeY-compact'],\n};\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (status) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['TabsItem'],\n        mode &&\n          {\n            default: styles['TabsItem--mode-default'],\n            accent: styles['TabsItem--mode-accent'],\n            secondary: styles['TabsItem--mode-secondary'],\n          }[mode],\n        selected && styles['TabsItem--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        className,\n      )}\n      hoverMode={styles['TabsItem--hover']}\n      activeMode=\"\"\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["TabsItem","sizeYClassNames","none","SizeType","COMPACT","warn","warnOnce","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","restProps","useAdaptivity","sizeY","React","useContext","TabsModeContext","mode","withGaps","statusComponent","isTabFlow","Subhead","Component","classNames","weight","VisuallyHidden","span","process","env","NODE_ENV","undefined","Tappable","default","accent","secondary","REGULAR","hoverMode","activeMode","focusVisibleMode","hasActive","aria-selected","div","Headline","level","aria-hidden","data-selected"],"mappings":";;;;+BAgDaA;;;eAAAA;;;;;;;;+DAhDU;oBACI;6BACG;0BACL;wBACA;oBACyB;wBACzB;wBACA;uBACD;8BACO;AAG/B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AA6BnB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,WAAW;QACtBO,gBAAAA,QACAC,kBAAAA,UACAC,gBAAAA,QACAC,eAAAA,gCACAC,UAAAA,wCAAW,yBACXC,mBAAAA,gCACAC,MAAAA,gCAAO,qBACPC,AAAUC,sBAAVD,UACGE;QARHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BG,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAA6CC,oBAAAA,OAAMC,UAAU,CAACC,qBAAe,GAArEC,OAAqCH,kBAArCG,MAAMC,WAA+BJ,kBAA/BI;IACd,IAAIC,kBAAkB;IAEtB,IAAMC,YAAYZ,SAAS;IAE3B,IAAIJ,QAAQ;QACVe,kBACE,OAAOf,WAAW,yBAChB,qBAACiB,gBAAO;YACNC,WAAU;YACVf,WAAWgB,IAAAA,gBAAU;YACrBC,QAAO;yBAEP,qBAACC,8BAAc,QAAC,SACfrB,wBAGH,qBAACsB;YAAKnB,SAAS;yBACb,qBAACkB,8BAAc,QAAC,SACfrB;IAGT;IAEA,IAAIuB,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBT,WAAW;QACvD,IAAI,CAACT,SAAS,CAAC,gBAAgB,EAAE;YAC/BX,KAAM,wDAAuD;QAC/D,OAAO,IAAI,CAACW,SAAS,CAAC,KAAK,EAAE;YAC3BX,KACG,yFACD;QAEJ;IACF;IAEA,IAAIS,WAAWC;IACf,IAAIU,aAAaX,aAAaqB,WAAW;QACvCrB,WAAWH,WAAW,IAAI,CAAC;IAC7B;IAEA,qBACE,qBAACyB,kBAAQ,8CACHpB;QACJJ,WAAWgB,IAAAA,gBAAU,kBAEnBN,QACE,CAAA;YACEe,OAAO;YACPC,MAAM;YACNC,SAAS;QACX,CAAA,CAAC,CAACjB,KAAK,EACTX,sCACAO,UAAUf,oBAAQ,CAACqC,OAAO,IAAIvC,eAAe,CAACiB,MAAM,EACpDK,sCACAX;QAEF6B,SAAS;QACTC,YAAW;QACXC,kBAAiB;QACjBC,WAAW;QACX/B,MAAMA;QACNgC,iBAAelC;QACfG,UAAUA;QAETP,wBAAU,qBAACuC;QAAIlC,SAAS;OAA+BL,uBACxD,qBAACwC,kBAAQ;QACPpB,WAAU;QACVf,SAAS;QACToC,OAAO1B,SAAS,YAAY,MAAM;QAClCO,QAAO;OAENrB,WAEFgB,iBACAd,uBAAS,qBAACoC;QAAIlC,SAAS;OAA8BF,QACrDY,SAAS,2BACR,qBAACwB;QAAIlC,SAAS;QAAiCqC,eAAAA;QAAYC,iBAAevC;;AAIlF"}