@vkontakte/vkui 5.2.0 → 5.2.1

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

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.js","names":["React","Touch","classNames","Platform","rubber","ViewWidth","Paragraph","Subhead","Button","AppRootPortal","useWaitTransitionFinish","usePlatform","useAdaptivityWithJSMediaQueries","useTimeout","Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","viewWidth","isDesktop","SMALL_TABLET","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","IOS","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","styles"],"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Button } from '../Button/Button';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useTimeout } from '../../hooks/useTimeout';\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   * Цветная иконка 24x24 пикселя\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть `<Avatar size={32} />`\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          styles[`Snackbar--layout-${layout}`],\n          styles[`Snackbar--mode-${mode}`],\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"],"mappings":"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"}
+{"version":3,"file":"Snackbar.js","names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","useTimeout","useWaitTransitionFinish","ViewWidth","Platform","rubber","AppRootPortal","Button","Touch","Paragraph","Subhead","Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","viewWidth","isDesktop","SMALL_TABLET","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","IOS","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","styles"],"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   * Цветная иконка 24x24 пикселя\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть `<Avatar size={32} />`\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          styles[`Snackbar--layout-${layout}`],\n          styles[`Snackbar--mode-${mode}`],\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"],"mappings":"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"}

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

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["size", "aria-label", "className"];
 import * as React from 'react';
+import { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
-import { Icon24Spinner, Icon32Spinner, Icon44Spinner, Icon16Spinner } from '@vkontakte/icons';
 import "./Spinner.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","names":["React","classNames","Icon24Spinner","Icon32Spinner","Icon44Spinner","Icon16Spinner","Spinner","memo","size","ariaLabel","className","restProps","SpinnerIcon","small","regular","medium","large","displayName"],"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Icon24Spinner, Icon32Spinner, Icon44Spinner, Icon16Spinner } from '@vkontakte/icons';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\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    return (\n      <span\n        role=\"status\"\n        aria-label={ariaLabel}\n        {...restProps}\n        className={classNames(styles['Spinner'], className)}\n      >\n        <SpinnerIcon className={styles['Spinner__self']} />\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,kBAAkB;AAAC;AAO9F;AACA;AACA;AACA,OAAO,IAAMC,OAAO,gBAAGN,KAAK,CAACO,IAAI,CAC/B,gBAKoB;EAAA,qBAJlBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,sBAChB,YAAY;IAAEC,SAAS,+BAAG,gBAAgB;IAC1CC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,WAAW,GAAG;IAClBC,KAAK,EAAER,aAAa;IACpBS,OAAO,EAAEZ,aAAa;IACtBa,MAAM,EAAEZ,aAAa;IACrBa,KAAK,EAAEZ;EACT,CAAC,CAACI,IAAI,CAAC;EAEP,oBACE;IACE,IAAI,EAAC,QAAQ;IACb,cAAYC;EAAU,GAClBE,SAAS;IACb,SAAS,EAAEV,UAAU,gBAAoBS,SAAS;EAAE,iBAEpD,oBAAC,WAAW;IAAC,SAAS;EAA0B,EAAG,CAC9C;AAEX,CAAC,CACF;AAEDJ,OAAO,CAACW,WAAW,GAAG,SAAS"}
+{"version":3,"file":"Spinner.js","names":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","classNames","Spinner","memo","size","ariaLabel","className","restProps","SpinnerIcon","small","regular","medium","large","displayName"],"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 styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\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    return (\n      <span\n        role=\"status\"\n        aria-label={ariaLabel}\n        {...restProps}\n        className={classNames(styles['Spinner'], className)}\n      >\n        <SpinnerIcon className={styles['Spinner__self']} />\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,kBAAkB;AAC7F,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAO7C;AACA;AACA;AACA,OAAO,IAAMC,OAAO,gBAAGN,KAAK,CAACO,IAAI,CAC/B,gBAKoB;EAAA,qBAJlBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,sBAChB,YAAY;IAAEC,SAAS,+BAAG,gBAAgB;IAC1CC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,WAAW,GAAG;IAClBC,KAAK,EAAEZ,aAAa;IACpBa,OAAO,EAAEZ,aAAa;IACtBa,MAAM,EAAEZ,aAAa;IACrBa,KAAK,EAAEZ;EACT,CAAC,CAACI,IAAI,CAAC;EAEP,oBACE;IACE,IAAI,EAAC,QAAQ;IACb,cAAYC;EAAU,GAClBE,SAAS;IACb,SAAS,EAAEN,UAAU,gBAAoBK,SAAS;EAAE,iBAEpD,oBAAC,WAAW;IAAC,SAAS;EAA0B,EAAG,CAC9C;AAEX,CAAC,CACF;AAEDJ,OAAO,CAACW,WAAW,GAAG,SAAS"}

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

@@ -5,15 +5,18 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["children", "width", "maxWidth", "minWidth", "spaced", "animate", "fixed", "style", "autoSpaced", "stretchedOnMobile", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { getSizeXClassName } from '../../helpers/getSizeXClassName';
-import { getViewWidthClassName } from '../../helpers/getViewWidthClassName';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { ViewWidth } from '../../lib/adaptivity';
-import { useObjectMemo } from '../../hooks/useObjectMemo';
 import { useMediaQueries } from '../../hooks/useMediaQueries';
+import { useObjectMemo } from '../../hooks/useObjectMemo';
+import { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';
 import { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';
 import { SplitColContext } from './SplitColContext';
 import "./SplitCol.module.css";
+var breakpointClassNames = {
+  none: "vkuiSplitCol--viewWidth-none",
+  tabletMinus: "vkuiSplitCol--viewWidth-tabletMinus",
+  smallTabletPlus: "vkuiSplitCol--viewWidth-smallTabletPlus"
+};
 function useTransitionAnimate(animateProp) {
   var _useAdaptivity = useAdaptivity(),
     viewWidth = _useAdaptivity.viewWidth;
@@ -62,8 +65,7 @@ export var SplitCol = function SplitCol(props) {
     restProps = _objectWithoutProperties(props, _excluded);
   var baseRef = React.useRef(null);
   var _useAdaptivity2 = useAdaptivity(),
-    viewWidth = _useAdaptivity2.viewWidth,
-    sizeX = _useAdaptivity2.sizeX;
+    viewWidth = _useAdaptivity2.viewWidth;
   var animate = useTransitionAnimate(animateProp);
   var contextValue = useObjectMemo({
     colRef: baseRef,
@@ -76,7 +78,7 @@ export var SplitCol = function SplitCol(props) {
       minWidth: minWidth
     }),
     ref: baseRef,
-    className: classNames("vkuiSplitCol", getSizeXClassName("vkuiSplitCol", sizeX), getViewWidthClassName("vkuiSplitCol", viewWidth), spaced && "vkuiSplitCol--spaced", spaced === undefined && "vkuiSplitCol--spaced-none", autoSpaced && "vkuiSplitCol--spaced-auto", fixed && "vkuiSplitCol--fixed", stretchedOnMobile && "vkuiSplitCol--stretched-on-mobile", className)
+    className: classNames("vkuiSplitCol", viewWidthToClassName(breakpointClassNames, viewWidth), spaced && "vkuiSplitCol--spaced", spaced === undefined && "vkuiSplitCol--spaced-none", autoSpaced && "vkuiSplitCol--spaced-auto", fixed && "vkuiSplitCol--fixed", stretchedOnMobile && "vkuiSplitCol--stretched-on-mobile", className)
   }), /*#__PURE__*/React.createElement(SplitColContext.Provider, {
     value: contextValue
   }, fixed ? /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"SplitCol.js","names":["React","classNames","getSizeXClassName","getViewWidthClassName","useAdaptivity","ViewWidth","useObjectMemo","useMediaQueries","matchMediaListAddListener","matchMediaListRemoveListener","SplitColContext","useTransitionAnimate","animateProp","viewWidth","useState","Boolean","animate","setAnimate","mediaQueries","useEffect","undefined","TABLET","listener","smallTabletPlus","matches","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","sizeX","contextValue","colRef"],"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { getViewWidthClassName } from '../../helpers/getViewWidthClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\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  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\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, sizeX } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\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        getSizeXClassName(styles['SplitCol'], sizeX),\n        getViewWidthClassName(styles['SplitCol'], viewWidth),\n        spaced && styles['SplitCol--spaced'],\n        spaced === undefined && styles['SplitCol--spaced-none'],\n        autoSpaced && styles['SplitCol--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"],"mappings":"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"}
+{"version":3,"file":"SplitCol.js","names":["React","classNames","useAdaptivity","useMediaQueries","useObjectMemo","ViewWidth","viewWidthToClassName","matchMediaListAddListener","matchMediaListRemoveListener","SplitColContext","breakpointClassNames","none","tabletMinus","smallTabletPlus","useTransitionAnimate","animateProp","viewWidth","useState","Boolean","animate","setAnimate","mediaQueries","useEffect","undefined","TABLET","listener","matches","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","contextValue","colRef"],"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 { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: styles['SplitCol--viewWidth-none'],\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\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  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\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  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 && styles['SplitCol--spaced'],\n        spaced === undefined && styles['SplitCol--spaced-none'],\n        autoSpaced && styles['SplitCol--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"],"mappings":"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"}

package/dist/cssm/components/SplitCol/SplitCol.module.css

@@ -1 +1 @@
-.vkuiSplitCol{flex-grow:1;flex-shrink:1;height:100%;position:relative;width:1px}.vkuiSplitCol--spaced,.vkuiSplitCol--viewWidth-tabletPlus.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto{margin:0 16px;margin:0 var(--vkui--size_split_col_padding_horizontal--regular)}@media (min-width:768px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto{margin:0 16px;margin:0 var(--vkui--size_split_col_padding_horizontal--regular)}}.vkuiSplitCol--viewWidth-mobile.vkuiSplitCol--stretched-on-mobile,.vkuiSplitCol--viewWidth-smallMobile.vkuiSplitCol--stretched-on-mobile,.vkuiSplitCol--viewWidth-smallTablet.vkuiSplitCol--stretched-on-mobile{max-width:100%!important;width:100%!important}@media not (min-width:1024px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--stretched-on-mobile{max-width:100%!important;width:100%!important}}.vkuiSplitCol--fixed{flex-grow:1;flex-shrink:1;height:100%;width:1px}.vkuiSplitCol__fixedInner{height:inherit;max-width:inherit;min-width:inherit;overflow:hidden;position:fixed;top:0;transform:translateZ(0);width:inherit}
+.vkuiSplitCol{flex-grow:1;flex-shrink:1;height:100%;position:relative;width:1px}.vkuiSplitCol--spaced,.vkuiSplitCol--viewWidth-smallTabletPlus.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto{margin:0 16px;margin:0 var(--vkui--size_split_col_padding_horizontal--regular)}@media (min-width:768px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto{margin:0 16px;margin:0 var(--vkui--size_split_col_padding_horizontal--regular)}}.vkuiSplitCol--viewWidth-tabletMinus.vkuiSplitCol--stretched-on-mobile{max-width:100%!important;width:100%!important}@media (max-width:1023.9px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--stretched-on-mobile{max-width:100%!important;width:100%!important}}.vkuiSplitCol--fixed{flex-grow:1;flex-shrink:1;height:100%;width:1px}.vkuiSplitCol__fixedInner{height:inherit;max-width:inherit;min-width:inherit;overflow:hidden;position:fixed;top:0;transform:translateZ(0);width:inherit}

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

@@ -3,9 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["popout", "modal", "header", "children", "getRootRef", "getRef", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { usePlatform } from '../../hooks/usePlatform';
 import { Platform } from '../../lib/platform';
 import { PopoutRoot } from '../PopoutRoot/PopoutRoot';
-import { usePlatform } from '../../hooks/usePlatform';
 import "./SplitLayout.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitLayout

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

@@ -1 +1 @@
-{"version":3,"file":"SplitLayout.js","names":["React","classNames","Platform","PopoutRoot","usePlatform","SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","IOS"],"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport { usePlatform } from '../../hooks/usePlatform';\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"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,WAAW,QAAQ,yBAAyB;AAAC;AAkBtD;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,IARtBC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGV,WAAW,EAAE;EAE9B,oBACE,oBAAC,UAAU;IACT,SAAS,EAAEH,UAAU,oBAEnBa,QAAQ,KAAKZ,QAAQ,CAACa,GAAG,0BAA8B,CACvD;IACF,MAAM,EAAET,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,UAAU,EAAEG;EAAW,GAEtBF,MAAM,eACP,wCACMK,SAAS;IACb,GAAG,EAAEF,MAAO;IACZ,SAAS,EAAEV,UAAU,2BAEnB,CAAC,CAACO,MAAM,oCAAwC,EAChDI,SAAS;EACT,IAEDH,QAAQ,CACL,CACK;AAEjB,CAAC"}
+{"version":3,"file":"SplitLayout.js","names":["React","classNames","usePlatform","Platform","PopoutRoot","SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","IOS"],"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"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,UAAU,QAAQ,0BAA0B;AAAC;AAkBtD;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,IARtBC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGZ,WAAW,EAAE;EAE9B,oBACE,oBAAC,UAAU;IACT,SAAS,EAAED,UAAU,oBAEnBa,QAAQ,KAAKX,QAAQ,CAACY,GAAG,0BAA8B,CACvD;IACF,MAAM,EAAET,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,UAAU,EAAEG;EAAW,GAEtBF,MAAM,eACP,wCACMK,SAAS;IACb,GAAG,EAAEF,MAAO;IACZ,SAAS,EAAEV,UAAU,2BAEnB,CAAC,CAACO,MAAM,oCAAwC,EAChDI,SAAS;EACT,IAEDH,QAAQ,CACL,CACK;AAEjB,CAAC"}

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

@@ -1,17 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["textLevel"],
   _excluded2 = ["mode", "size", "selected", "textLevel", "before", "after", "expandable", "children", "className"];
 import * as React from 'react';
-import { getSizeYClassName } from '../../helpers/getSizeYClassName';
+import { Icon16Dropdown } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
-import { getTitleFromChildren } from '../../lib/utils';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { SizeType } from '../../lib/adaptivity';
+import { getTitleFromChildren } from '../../lib/utils';
 import { Tappable } from '../Tappable/Tappable';
-import { Icon16Dropdown } from '@vkontakte/icons';
 import { Caption } from '../Typography/Caption/Caption';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import "./SubnavigationButton.module.css";
+var sizeYClassNames = _defineProperty({
+  none: "vkuiSubnavigationButton--sizeY-none"
+}, SizeType.COMPACT, "vkuiSubnavigationButton--sizeY-compact");
 var SubnavigationButtonTypography = function SubnavigationButtonTypography(_ref) {
   var textLevel = _ref.textLevel,
     restProps = _objectWithoutProperties(_ref, _excluded);
@@ -41,11 +45,12 @@ export var SubnavigationButton = function SubnavigationButton(_ref2) {
     className = _ref2.className,
     restProps = _objectWithoutProperties(_ref2, _excluded2);
   var _useAdaptivity = useAdaptivity(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   return /*#__PURE__*/React.createElement(Tappable, _extends({}, restProps, {
     hasActive: false,
     focusVisibleMode: "outside",
-    className: classNames("vkuiSubnavigationButton", styles["SubnavigationButton--size-".concat(size)], styles["SubnavigationButton--mode-".concat(mode)], selected && "vkuiSubnavigationButton--selected", getSizeYClassName("vkuiSubnavigationButton", sizeY), className),
+    className: classNames("vkuiSubnavigationButton", styles["SubnavigationButton--size-".concat(size)], styles["SubnavigationButton--mode-".concat(mode)], selected && "vkuiSubnavigationButton--selected", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
     "aria-label": getTitleFromChildren(children)
   }), /*#__PURE__*/React.createElement("span", {
     className: "vkuiSubnavigationButton__in"

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

@@ -1 +1 @@
-{"version":3,"file":"SubnavigationButton.js","names":["React","getSizeYClassName","classNames","getTitleFromChildren","useAdaptivity","Tappable","Icon16Dropdown","Caption","Subhead","SubnavigationButtonTypography","textLevel","restProps","SubnavigationButton","mode","size","selected","before","after","expandable","children","className","sizeY","styles"],"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { HasComponent, HasChildren } from '../../types';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { TappableProps, Tappable } from '../Tappable/Tappable';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\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 } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        styles[`SubnavigationButton--size-${size}`],\n        styles[`SubnavigationButton--mode-${mode}`],\n        selected && styles['SubnavigationButton--selected'],\n        getSizeYClassName(styles['SubnavigationButton'], sizeY),\n        className,\n      )}\n      aria-label={getTitleFromChildren(children)}\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"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,iBAAiB,QAAQ,iCAAiC;AAEnE,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAAwBC,QAAQ,QAAQ,sBAAsB;AAC9D,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,OAAO,QAAQ,+BAA+B;AAAC;AA6BxD,IAAMC,6BAA6B,GAAG,SAAhCA,6BAA6B,OAGO;EAAA,IAFxCC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAID,SAAS,KAAK,GAAG,EAAE;IACrB,oBAAO,oBAAC,OAAO,EAAKC,SAAS,CAAI;EACnC;EAEA,oBAAO,oBAAC,OAAO;IAAC,KAAK,EAAED,SAAS,KAAK,GAAG,GAAG,GAAG,GAAG;EAAI,GAAKC,SAAS,EAAI;AACzE,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,QAWA;EAAA,uBAV9BC,IAAI;IAAJA,IAAI,2BAAG,SAAS;IAAA,mBAChBC,IAAI;IAAJA,IAAI,2BAAG,GAAG;IACVC,QAAQ,SAARA,QAAQ;IAAA,wBACRL,SAAS;IAATA,SAAS,gCAAG,GAAG;IACfM,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLC,UAAU,SAAVA,UAAU;IACVC,QAAQ,SAARA,QAAQ;IACRC,SAAS,SAATA,SAAS;IACNT,SAAS;EAEZ,qBAAkBP,aAAa,EAAE;IAAzBiB,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,QAAQ,eACHV,SAAS;IACb,SAAS,EAAE,KAAM;IACjB,gBAAgB,EAAC,SAAS;IAC1B,SAAS,EAAET,UAAU,4BAEnBoB,MAAM,qCAA8BR,IAAI,EAAG,EAC3CQ,MAAM,qCAA8BT,IAAI,EAAG,EAC3CE,QAAQ,uCAA2C,EACnDd,iBAAiB,4BAAgCoB,KAAK,CAAC,EACvDD,SAAS,CACT;IACF,cAAYjB,oBAAoB,CAACgB,QAAQ;EAAE,iBAE3C;IAAM,SAAS;EAAoC,GAChDH,MAAM,iBAAI;IAAM,SAAS;EAAwC,GAAEA,MAAM,CAAQ,eAClF,oBAAC,6BAA6B;IAC5B,SAAS,EAAEN,SAAU;IACrB,SAAS,kCAAuC;IAChD,SAAS,EAAC;EAAM,GAEfS,QAAQ,CACqB,EAC/BF,KAAK,iBAAI;IAAM,SAAS;EAAuC,GAAEA,KAAK,CAAQ,EAC9EC,UAAU,iBAAI,oBAAC,cAAc;IAAC,SAAS;EAAgD,EAAG,CACtF,CACE;AAEf,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"SubnavigationButton.js","names":["React","Icon16Dropdown","classNames","useAdaptivity","SizeType","getTitleFromChildren","Tappable","Caption","Subhead","sizeYClassNames","none","COMPACT","SubnavigationButtonTypography","textLevel","restProps","SubnavigationButton","mode","size","selected","before","after","expandable","children","className","sizeY","styles","REGULAR"],"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 { getTitleFromChildren } from '../../lib/utils';\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        styles[`SubnavigationButton--size-${size}`],\n        styles[`SubnavigationButton--mode-${mode}`],\n        selected && styles['SubnavigationButton--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      aria-label={getTitleFromChildren(children)}\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"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,oBAAoB,QAAQ,iBAAiB;AAEtD,SAASC,QAAQ,QAAuB,sBAAsB;AAC9D,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,OAAO,QAAQ,+BAA+B;AAAC;AAGxD,IAAMC,eAAe;EACnBC,IAAI;AAA2C,GAC9CN,QAAQ,CAACO,OAAO,2CAClB;AA4BD,IAAMC,6BAA6B,GAAG,SAAhCA,6BAA6B,OAGO;EAAA,IAFxCC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAID,SAAS,KAAK,GAAG,EAAE;IACrB,oBAAO,oBAAC,OAAO,EAAKC,SAAS,CAAI;EACnC;EAEA,oBAAO,oBAAC,OAAO;IAAC,KAAK,EAAED,SAAS,KAAK,GAAG,GAAG,GAAG,GAAG;EAAI,GAAKC,SAAS,EAAI;AACzE,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,QAWA;EAAA,uBAV9BC,IAAI;IAAJA,IAAI,2BAAG,SAAS;IAAA,mBAChBC,IAAI;IAAJA,IAAI,2BAAG,GAAG;IACVC,QAAQ,SAARA,QAAQ;IAAA,wBACRL,SAAS;IAATA,SAAS,gCAAG,GAAG;IACfM,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLC,UAAU,SAAVA,UAAU;IACVC,QAAQ,SAARA,QAAQ;IACRC,SAAS,SAATA,SAAS;IACNT,SAAS;EAEZ,qBAA2BX,aAAa,EAAE;IAAA,sCAAlCqB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,oBAAC,QAAQ,eACHV,SAAS;IACb,SAAS,EAAE,KAAM;IACjB,gBAAgB,EAAC,SAAS;IAC1B,SAAS,EAAEZ,UAAU,4BAEnBuB,MAAM,qCAA8BR,IAAI,EAAG,EAC3CQ,MAAM,qCAA8BT,IAAI,EAAG,EAC3CE,QAAQ,uCAA2C,EACnDM,KAAK,KAAKpB,QAAQ,CAACsB,OAAO,IAAIjB,eAAe,CAACe,KAAK,CAAC,EACpDD,SAAS,CACT;IACF,cAAYlB,oBAAoB,CAACiB,QAAQ;EAAE,iBAE3C;IAAM,SAAS;EAAoC,GAChDH,MAAM,iBAAI;IAAM,SAAS;EAAwC,GAAEA,MAAM,CAAQ,eAClF,oBAAC,6BAA6B;IAC5B,SAAS,EAAEN,SAAU;IACrB,SAAS,kCAAuC;IAChD,SAAS,EAAC;EAAM,GAEfS,QAAQ,CACqB,EAC/BF,KAAK,iBAAI;IAAM,SAAS;EAAuC,GAAEA,KAAK,CAAQ,EAC9EC,UAAU,iBAAI,oBAAC,cAAc;IAAC,SAAS;EAAgD,EAAG,CACtF,CACE;AAEf,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/cssm/components/SubnavigationButton/SubnavigationButton.module.css

@@ -1 +1 @@
-.vkuiSubnavigationButton{border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiSubnavigationButton__in{align-items:center;display:flex;justify-content:center}.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:30px;height:var(--vkui--size_button_small_height--regular)}.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_medium_height--regular)}.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:44px;height:var(--vkui--size_button_large_height--regular)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:28px;height:var(--vkui--size_button_small_height--compact)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:32px;height:var(--vkui--size_button_medium_height--compact)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_large_height--compact)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:28px;height:var(--vkui--size_button_small_height--compact)}.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:32px;height:var(--vkui--size_button_medium_height--compact)}.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_large_height--compact)}}.vkuiSubnavigationButton__before{color:#2688eb;color:var(--vkui--color_icon_accent);margin-right:8px}.vkuiSubnavigationButton__label{flex-grow:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSubnavigationButton__after{margin-left:8px}.vkuiSubnavigationButton__expandableIcon{color:#99a2ad;color:var(--vkui--color_icon_secondary);margin-left:8px;margin-top:1px}.vkuiSubnavigationButton__before:first-child,.vkuiSubnavigationButton__label:first-child{padding-left:12px;padding-left:var(--vkui--size_button_base_small_padding_horizontal_icon--regular)}.vkuiSubnavigationButton__after:last-child,.vkuiSubnavigationButton__expandableIcon,.vkuiSubnavigationButton__label:last-child{padding-right:12px;padding-right:var(--vkui--size_button_base_small_padding_horizontal_icon--regular)}.vkuiSubnavigationButton--mode-primary{background-color:#fff;background-color:var(--vkui--color_background_modal);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3)}.vkuiSubnavigationButton--mode-outline{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha)}.vkuiSubnavigationButton--selected{background-color:#2688eb;background-color:var(--vkui--color_background_accent_themed);border:none;box-shadow:none;color:#fff;color:var(--vkui--color_text_contrast_themed)}.vkuiSubnavigationButton--selected.vkuiSubnavigationButton--mode-tertiary{background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active);color:#000;color:var(--vkui--color_text_primary)}.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__before,.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__expandableIcon{color:inherit}.vkuiSubnavigationBar .vkuiSubnavigationButton+.vkuiSubnavigationButton{margin-left:8px;margin-left:var(--vkui--size_subnavigation_bar_gap--regular)}.vkuiSubnavigationBar--mode-fixed .vkuiSubnavigationButton{flex:1;min-width:0}
+.vkuiSubnavigationButton{border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiSubnavigationButton__in{align-items:center;display:flex;justify-content:center}.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:30px;height:var(--vkui--size_button_small_height--regular)}.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_medium_height--regular)}.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:44px;height:var(--vkui--size_button_large_height--regular)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:28px;height:var(--vkui--size_button_small_height--compact)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:32px;height:var(--vkui--size_button_medium_height--compact)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_large_height--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:28px;height:var(--vkui--size_button_small_height--compact)}.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:32px;height:var(--vkui--size_button_medium_height--compact)}.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_large_height--compact)}}.vkuiSubnavigationButton__before{color:#2688eb;color:var(--vkui--color_icon_accent);margin-right:8px}.vkuiSubnavigationButton__label{flex-grow:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSubnavigationButton__after{margin-left:8px}.vkuiSubnavigationButton__expandableIcon{color:#99a2ad;color:var(--vkui--color_icon_secondary);margin-left:8px;margin-top:1px}.vkuiSubnavigationButton__before:first-child,.vkuiSubnavigationButton__label:first-child{padding-left:12px;padding-left:var(--vkui--size_button_base_small_padding_horizontal_icon--regular)}.vkuiSubnavigationButton__after:last-child,.vkuiSubnavigationButton__expandableIcon,.vkuiSubnavigationButton__label:last-child{padding-right:12px;padding-right:var(--vkui--size_button_base_small_padding_horizontal_icon--regular)}.vkuiSubnavigationButton--mode-primary{background-color:#fff;background-color:var(--vkui--color_background_modal);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3)}.vkuiSubnavigationButton--mode-outline{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha)}.vkuiSubnavigationButton--selected{background-color:#2688eb;background-color:var(--vkui--color_background_accent_themed);border:none;box-shadow:none;color:#fff;color:var(--vkui--color_text_contrast_themed)}.vkuiSubnavigationButton--selected.vkuiSubnavigationButton--mode-tertiary{background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active);color:#000;color:var(--vkui--color_text_primary)}.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__before,.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__expandableIcon{color:inherit}.vkuiSubnavigationBar .vkuiSubnavigationButton+.vkuiSubnavigationButton{margin-left:8px;margin-left:var(--vkui--size_subnavigation_bar_gap--regular)}.vkuiSubnavigationBar--mode-fixed .vkuiSubnavigationButton{flex:1;min-width:0}

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

@@ -1,17 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["style", "className", "getRootRef"];
 import * as React from 'react';
-import { getPlatformClassName } from '../../helpers/getPlatformClassName';
 import { classNames } from '@vkontakte/vkjs';
-import { callMultiple } from '../../lib/callMultiple';
-import { usePlatform } from '../../hooks/usePlatform';
+import { getPlatformClassName } from '../../helpers/getPlatformClassName';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
 import { useFocusVisible } from '../../hooks/useFocusVisible';
+import { usePlatform } from '../../hooks/usePlatform';
+import { SizeType } from '../../lib/adaptivity';
+import { callMultiple } from '../../lib/callMultiple';
 import { FocusVisible } from '../FocusVisible/FocusVisible';
-import { getSizeYClassName } from '../../helpers/getSizeYClassName';
+import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
 import "./Switch.module.css";
+var sizeYClassNames = _defineProperty({
+  none: "vkuiSwitch--sizeY-none"
+}, SizeType.COMPACT, "vkuiSwitch--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/Switch
  */
@@ -22,13 +26,14 @@ export var Switch = function Switch(_ref) {
     restProps = _objectWithoutProperties(_ref, _excluded);
   var platform = usePlatform();
   var _useAdaptivity = useAdaptivity(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var _useFocusVisible = useFocusVisible(),
     focusVisible = _useFocusVisible.focusVisible,
     onBlur = _useFocusVisible.onBlur,
     onFocus = _useFocusVisible.onFocus;
   return /*#__PURE__*/React.createElement("label", {
-    className: classNames("vkuiSwitch", getPlatformClassName("vkuiSwitch", platform), getSizeYClassName("vkuiSwitch", sizeY), restProps.disabled && "vkuiSwitch--disabled", focusVisible && "vkuiSwitch--focus-visible", className),
+    className: classNames("vkuiSwitch", getPlatformClassName("vkuiSwitch", platform), sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], restProps.disabled && "vkuiSwitch--disabled", focusVisible && "vkuiSwitch--focus-visible", className),
     style: style,
     ref: getRootRef
   }, /*#__PURE__*/React.createElement(VisuallyHiddenInput, _extends({}, restProps, {

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["React","getPlatformClassName","classNames","callMultiple","usePlatform","useAdaptivity","VisuallyHiddenInput","useFocusVisible","FocusVisible","getSizeYClassName","Switch","style","className","getRootRef","restProps","platform","sizeY","focusVisible","onBlur","onFocus","disabled"],"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { classNames } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRootRef } from '../../types';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './Switch.module.css';\n\nexport interface SwitchProps extends VisuallyHiddenInputProps, HasRootRef<HTMLLabelElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({ style, className, getRootRef, ...restProps }: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        getPlatformClassName(styles['Switch'], platform),\n        getSizeYClassName(styles['Switch'], sizeY),\n        restProps.disabled && styles['Switch--disabled'],\n        focusVisible && styles['Switch--focus-visible'],\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"checkbox\"\n        className={styles['Switch__self']}\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span aria-hidden className={styles['Switch__pseudo']} />\n      <FocusVisible mode=\"outside\" />\n    </label>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SACEC,mBAAmB,QAEd,4CAA4C;AACnD,SAASC,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,iBAAiB,QAAQ,iCAAiC;AAAC;AAKpE;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAM,OAAoE;EAAA,IAA9DC,KAAK,QAALA,KAAK;IAAEC,SAAS,QAATA,SAAS;IAAEC,UAAU,QAAVA,UAAU;IAAKC,SAAS;EACjE,IAAMC,QAAQ,GAAGX,WAAW,EAAE;EAC9B,qBAAkBC,aAAa,EAAE;IAAzBW,KAAK,kBAALA,KAAK;EACb,uBAA0CT,eAAe,EAAE;IAAnDU,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EAErC,oBACE;IACE,SAAS,EAAEjB,UAAU,eAEnBD,oBAAoB,eAAmBc,QAAQ,CAAC,EAChDN,iBAAiB,eAAmBO,KAAK,CAAC,EAC1CF,SAAS,CAACM,QAAQ,0BAA8B,EAChDH,YAAY,+BAAmC,EAC/CL,SAAS,CACT;IACF,KAAK,EAAED,KAAM;IACb,GAAG,EAAEE;EAAW,gBAEhB,oBAAC,mBAAmB,eACdC,SAAS;IACb,IAAI,EAAC,UAAU;IACf,SAAS,oBAAyB;IAClC,MAAM,EAAEX,YAAY,CAACe,MAAM,EAAEJ,SAAS,CAACI,MAAM,CAAE;IAC/C,OAAO,EAAEf,YAAY,CAACgB,OAAO,EAAEL,SAAS,CAACK,OAAO;EAAE,GAClD,eACF;IAAM,mBAAW;IAAC,SAAS;EAA2B,EAAG,eACzD,oBAAC,YAAY;IAAC,IAAI,EAAC;EAAS,EAAG,CACzB;AAEZ,CAAC"}
+{"version":3,"file":"Switch.js","names":["React","classNames","getPlatformClassName","useAdaptivity","useFocusVisible","usePlatform","SizeType","callMultiple","FocusVisible","VisuallyHiddenInput","sizeYClassNames","none","COMPACT","Switch","style","className","getRootRef","restProps","platform","sizeY","focusVisible","onBlur","onFocus","REGULAR","disabled"],"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\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 { HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from '../VisuallyHiddenInput/VisuallyHiddenInput';\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 extends VisuallyHiddenInputProps, HasRootRef<HTMLLabelElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({ style, className, getRootRef, ...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        getPlatformClassName(styles['Switch'], platform),\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        restProps.disabled && styles['Switch--disabled'],\n        focusVisible && styles['Switch--focus-visible'],\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"checkbox\"\n        className={styles['Switch__self']}\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span aria-hidden className={styles['Switch__pseudo']} />\n      <FocusVisible mode=\"outside\" />\n    </label>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,oBAAoB,QAAQ,oCAAoC;AACzE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,YAAY,QAAQ,wBAAwB;AAErD,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SACEC,mBAAmB,QAEd,4CAA4C;AAAC;AAGpD,IAAMC,eAAe;EACnBC,IAAI;AAA8B,GACjCL,QAAQ,CAACM,OAAO,8BAClB;AAID;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAM,OAAoE;EAAA,IAA9DC,KAAK,QAALA,KAAK;IAAEC,SAAS,QAATA,SAAS;IAAEC,UAAU,QAAVA,UAAU;IAAKC,SAAS;EACjE,IAAMC,QAAQ,GAAGb,WAAW,EAAE;EAC9B,qBAA2BF,aAAa,EAAE;IAAA,sCAAlCgB,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB,uBAA0Cf,eAAe,EAAE;IAAnDgB,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EAErC,oBACE;IACE,SAAS,EAAErB,UAAU,eAEnBC,oBAAoB,eAAmBgB,QAAQ,CAAC,EAChDC,KAAK,KAAKb,QAAQ,CAACiB,OAAO,IAAIb,eAAe,CAACS,KAAK,CAAC,EACpDF,SAAS,CAACO,QAAQ,0BAA8B,EAChDJ,YAAY,+BAAmC,EAC/CL,SAAS,CACT;IACF,KAAK,EAAED,KAAM;IACb,GAAG,EAAEE;EAAW,gBAEhB,oBAAC,mBAAmB,eACdC,SAAS;IACb,IAAI,EAAC,UAAU;IACf,SAAS,oBAAyB;IAClC,MAAM,EAAEV,YAAY,CAACc,MAAM,EAAEJ,SAAS,CAACI,MAAM,CAAE;IAC/C,OAAO,EAAEd,YAAY,CAACe,OAAO,EAAEL,SAAS,CAACK,OAAO;EAAE,GAClD,eACF;IAAM,mBAAW;IAAC,SAAS;EAA2B,EAAG,eACzD,oBAAC,YAAY;IAAC,IAAI,EAAC;EAAS,EAAG,CACzB;AAEZ,CAAC"}

package/dist/cssm/components/Switch/Switch.module.css

@@ -1 +1 @@
-.vkuiSwitch{cursor:pointer;display:block;padding:calc((20px - 14px) / 2);padding:calc((var(--vkui--size_switch_pin--regular) - var(--vkui--size_switch_height--regular)) / 2);position:relative}.vkuiSwitch--sizeY-compact{padding:calc((18px - 12px) / 2);padding:calc((var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSwitch--sizeY-none{padding:calc((18px - 12px) / 2);padding:calc((var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2)}}.vkuiSwitch--disabled{cursor:default}.vkuiSwitch__pseudo{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box;display:block;position:relative}.vkuiSwitch__pseudo:before{background:#f2f3f5;background:var(--vkui--color_icon_contrast_secondary);border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24);box-sizing:border-box;content:"";height:20px;height:var(--vkui--size_switch_pin--regular);left:calc((14px - 20px) / 2);left:calc((var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2);position:absolute;top:calc((14px - 20px) / 2);top:calc((var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2);width:20px;width:var(--vkui--size_switch_pin--regular)}.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo:before{height:18px;height:var(--vkui--size_switch_pin--compact);left:calc((12px - 18px) / 2);left:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);top:calc((12px - 18px) / 2);top:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);width:18px;width:var(--vkui--size_switch_pin--compact)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSwitch--sizeY-none .vkuiSwitch__pseudo:before{height:18px;height:var(--vkui--size_switch_pin--compact);left:calc((12px - 18px) / 2);left:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);top:calc((12px - 18px) / 2);top:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);width:18px;width:var(--vkui--size_switch_pin--compact)}}.vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{background:#2688eb;background:var(--vkui--color_icon_accent);transform:translateX(calc(34px - 14px));transform:translateX(calc(var(--vkui--size_switch_width--regular) - var(--vkui--size_switch_height--regular)))}.vkuiSwitch__pseudo:after{background:rgba(0,0,0,.24);background:var(--vkui--color_icon_tertiary_alpha);border-radius:calc(34px / 2);border-radius:calc(var(--vkui--size_switch_width--regular) / 2);content:"";display:block;height:14px;height:var(--vkui--size_switch_height--regular);width:34px;width:var(--vkui--size_switch_width--regular)}.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo:after{border-radius:calc(32px / 2);border-radius:calc(var(--vkui--size_switch_width--compact) / 2);height:12px;height:var(--vkui--size_switch_height--compact);width:32px;width:var(--vkui--size_switch_width--compact)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSwitch--sizeY-none .vkuiSwitch__pseudo:after{border-radius:calc(32px / 2);border-radius:calc(var(--vkui--size_switch_width--compact) / 2);height:12px;height:var(--vkui--size_switch_height--compact);width:32px;width:var(--vkui--size_switch_width--compact)}}.vkuiSwitch__self:checked+.vkuiSwitch__pseudo:after{background:#2688eb;background:var(--vkui--color_icon_accent);opacity:.48}.vkuiSwitch--sizeY-compact .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{transform:translateX(calc(32px - 12px));transform:translateX(calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact)))}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSwitch--sizeY-none .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{transform:translateX(calc(32px - 12px));transform:translateX(calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact)))}}.vkuiSwitch__self[disabled]+.vkuiSwitch__pseudo{opacity:.4;opacity:var(--vkui--opacity_disable)}.vkuiSwitch--ios .vkuiSwitch__pseudo:before{box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06),inset 0 0 0 .5px rgba(0,0,0,.04)}.vkuiSwitch--ios .vkuiSwitch__pseudo:before,.vkuiSwitch--ios .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{background:#fff;background:var(--vkui_internal--white)}.vkuiSwitch--ios .vkuiSwitch__pseudo:after{background:#e1e3e6;background:var(--vkui--color_track_background)}.vkuiSwitch--ios .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:after{opacity:1}@media (prefers-reduced-motion:no-preference){.vkuiSwitch__pseudo:after{transition:background-color .1s ease}.vkuiSwitch__pseudo:before{transition:transform .1s ease}.vkuiSwitch--ios .vkuiSwitch__pseudo:after{transition:background-color .2s ease}.vkuiSwitch--ios .vkuiSwitch__pseudo:before{transition:transform .2s cubic-bezier(.36,-.24,.26,1.32)}}.vkuiSimpleCell__after>.vkuiSwitch{margin-left:12px}.vkuiSimpleCell>.vkuiSwitch:first-child{margin-right:12px}
+.vkuiSwitch{cursor:pointer;display:block;padding:calc((20px - 14px) / 2);padding:calc((var(--vkui--size_switch_pin--regular) - var(--vkui--size_switch_height--regular)) / 2);position:relative}.vkuiSwitch--sizeY-compact{padding:calc((18px - 12px) / 2);padding:calc((var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSwitch--sizeY-none{padding:calc((18px - 12px) / 2);padding:calc((var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2)}}.vkuiSwitch--disabled{cursor:default}.vkuiSwitch__pseudo{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box;display:block;position:relative}.vkuiSwitch__pseudo:before{background:#f2f3f5;background:var(--vkui--color_icon_contrast_secondary);border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24);box-sizing:border-box;content:"";height:20px;height:var(--vkui--size_switch_pin--regular);left:calc((14px - 20px) / 2);left:calc((var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2);position:absolute;top:calc((14px - 20px) / 2);top:calc((var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2);width:20px;width:var(--vkui--size_switch_pin--regular)}.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo:before{height:18px;height:var(--vkui--size_switch_pin--compact);left:calc((12px - 18px) / 2);left:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);top:calc((12px - 18px) / 2);top:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);width:18px;width:var(--vkui--size_switch_pin--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSwitch--sizeY-none .vkuiSwitch__pseudo:before{height:18px;height:var(--vkui--size_switch_pin--compact);left:calc((12px - 18px) / 2);left:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);top:calc((12px - 18px) / 2);top:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);width:18px;width:var(--vkui--size_switch_pin--compact)}}.vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{background:#2688eb;background:var(--vkui--color_icon_accent);transform:translateX(calc(34px - 14px));transform:translateX(calc(var(--vkui--size_switch_width--regular) - var(--vkui--size_switch_height--regular)))}.vkuiSwitch__pseudo:after{background:rgba(0,0,0,.24);background:var(--vkui--color_icon_tertiary_alpha);border-radius:calc(34px / 2);border-radius:calc(var(--vkui--size_switch_width--regular) / 2);content:"";display:block;height:14px;height:var(--vkui--size_switch_height--regular);width:34px;width:var(--vkui--size_switch_width--regular)}.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo:after{border-radius:calc(32px / 2);border-radius:calc(var(--vkui--size_switch_width--compact) / 2);height:12px;height:var(--vkui--size_switch_height--compact);width:32px;width:var(--vkui--size_switch_width--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSwitch--sizeY-none .vkuiSwitch__pseudo:after{border-radius:calc(32px / 2);border-radius:calc(var(--vkui--size_switch_width--compact) / 2);height:12px;height:var(--vkui--size_switch_height--compact);width:32px;width:var(--vkui--size_switch_width--compact)}}.vkuiSwitch__self:checked+.vkuiSwitch__pseudo:after{background:#2688eb;background:var(--vkui--color_icon_accent);opacity:.48}.vkuiSwitch--sizeY-compact .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{transform:translateX(calc(32px - 12px));transform:translateX(calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact)))}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSwitch--sizeY-none .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{transform:translateX(calc(32px - 12px));transform:translateX(calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact)))}}.vkuiSwitch__self[disabled]+.vkuiSwitch__pseudo{opacity:.4;opacity:var(--vkui--opacity_disable)}.vkuiSwitch--ios .vkuiSwitch__pseudo:before{box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06),inset 0 0 0 .5px rgba(0,0,0,.04)}.vkuiSwitch--ios .vkuiSwitch__pseudo:before,.vkuiSwitch--ios .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{background:#fff;background:var(--vkui_internal--white)}.vkuiSwitch--ios .vkuiSwitch__pseudo:after{background:#e1e3e6;background:var(--vkui--color_track_background)}.vkuiSwitch--ios .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:after{opacity:1}@media (prefers-reduced-motion:no-preference){.vkuiSwitch__pseudo:after{transition:background-color .1s ease}.vkuiSwitch__pseudo:before{transition:transform .1s ease}.vkuiSwitch--ios .vkuiSwitch__pseudo:after{transition:background-color .2s ease}.vkuiSwitch--ios .vkuiSwitch__pseudo:before{transition:transform .2s cubic-bezier(.36,-.24,.26,1.32)}}.vkuiSimpleCell__after>.vkuiSwitch{margin-left:12px}.vkuiSimpleCell>.vkuiSwitch:first-child{margin-right:12px}

package/dist/cssm/components/TabbarItem/TabbarItem.js

@@ -4,10 +4,10 @@ var _excluded = ["children", "selected", "indicator", "text", "href", "Component
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
-import { Tappable } from '../Tappable/Tappable';
-import { Footnote } from '../Typography/Footnote/Footnote';
 import { Platform } from '../../lib/platform';
 import { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';
+import { Tappable } from '../Tappable/Tappable';
+import { Footnote } from '../Typography/Footnote/Footnote';
 import "./TabbarItem.module.css";
 var warn = warnOnce('TabbarItem');
 

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

@@ -1 +1 @@
-{"version":3,"file":"TabbarItem.js","names":["React","classNames","hasReactNode","usePlatform","Tappable","Footnote","Platform","COMMON_WARNINGS","warnOnce","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","process","env","NODE_ENV","isAccessible","a11y","IOS","ANDROID"],"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\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  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = !text && (!restProps['aria-label'] || !restProps['aria-labelledby']);\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Component\n      {...restProps}\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={styles['TabbarItem__label']}>{hasReactNode(indicator) && indicator}</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"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,oBAAoB;AAAC;AAkB/D,IAAMC,IAAI,GAAGD,QAAQ,CAAC,YAAY,CAAC;;AAEnC;AACA;AACA;AACA,OAAO,IAAME,UAAU,GAAG,SAAbA,UAAU,OAUA;EAAA,IATrBC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,sBACJC,SAAS;IAATA,SAAS,+BAAGD,IAAI,GAAG,GAAG,GAAG,QAAQ;IACjCE,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGjB,WAAW,EAAE;EAE9B,IAAIkB,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAMC,YAAY,GAAG,CAACV,IAAI,KAAK,CAACK,SAAS,CAAC,YAAY,CAAC,IAAI,CAACA,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAEzF,IAAI,CAACK,YAAY,EAAE;MACjBf,IAAI,CAACF,eAAe,CAACkB,IAAI,CAACT,SAAS,KAAK,GAAG,GAAG,WAAW,GAAG,aAAa,CAAC,EAAE,OAAO,CAAC;IACtF;EACF;EAEA,oBACE,oBAAC,SAAS,eACJG,SAAS;IACb,QAAQ,EAAEF,QAAS;IACnB,IAAI,EAAEF,IAAK;IACX,SAAS,EAAEd,UAAU,mBAEnBmB,QAAQ,KAAKd,QAAQ,CAACoB,GAAG,yBAA6B,EACtDN,QAAQ,KAAKd,QAAQ,CAACqB,OAAO,6BAAiC,EAC9Df,QAAQ,8BAAkC,EAC1C,CAAC,CAACE,IAAI,0BAA8B,EACpCI,SAAS;EACT,iBAEF,oBAAC,QAAQ;IACP,IAAI,EAAC,cAAc;IACnB,SAAS,EAAC,KAAK;IACf,QAAQ,EAAED,QAAS;IACnB,UAAU,EACRG,QAAQ,KAAKd,QAAQ,CAACoB,GAAG,wCAA4C,YACtE;IACD,iBAAiB,EAAEN,QAAQ,KAAKd,QAAQ,CAACoB,GAAG,GAAG,CAAC,GAAG,GAAI;IACvD,QAAQ,EAAE,KAAM;IAChB,SAAS;EAAiC,EAC1C,eACF;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA6B,GACxCf,QAAQ,eACT;IAAK,SAAS;EAA8B,GAAET,YAAY,CAACW,SAAS,CAAC,IAAIA,SAAS,CAAO,CACrF,EACLC,IAAI,iBACH,oBAAC,QAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS,wBAA6B;IAAC,MAAM,EAAC;EAAG,GACxEA,IAAI,CAER,CACG,CACI;AAEhB,CAAC"}
+{"version":3,"file":"TabbarItem.js","names":["React","classNames","hasReactNode","usePlatform","Platform","COMMON_WARNINGS","warnOnce","Tappable","Footnote","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","process","env","NODE_ENV","isAccessible","a11y","IOS","ANDROID"],"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  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const isAccessible = !text && (!restProps['aria-label'] || !restProps['aria-labelledby']);\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Component\n      {...restProps}\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={styles['TabbarItem__label']}>{hasReactNode(indicator) && indicator}</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"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,oBAAoB;AAE9D,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,iCAAiC;AAAC;AAkB3D,IAAMC,IAAI,GAAGH,QAAQ,CAAC,YAAY,CAAC;;AAEnC;AACA;AACA;AACA,OAAO,IAAMI,UAAU,GAAG,SAAbA,UAAU,OAUA;EAAA,IATrBC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,sBACJC,SAAS;IAATA,SAAS,+BAAGD,IAAI,GAAG,GAAG,GAAG,QAAQ;IACjCE,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGjB,WAAW,EAAE;EAE9B,IAAIkB,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAMC,YAAY,GAAG,CAACV,IAAI,KAAK,CAACK,SAAS,CAAC,YAAY,CAAC,IAAI,CAACA,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAEzF,IAAI,CAACK,YAAY,EAAE;MACjBf,IAAI,CAACJ,eAAe,CAACoB,IAAI,CAACT,SAAS,KAAK,GAAG,GAAG,WAAW,GAAG,aAAa,CAAC,EAAE,OAAO,CAAC;IACtF;EACF;EAEA,oBACE,oBAAC,SAAS,eACJG,SAAS;IACb,QAAQ,EAAEF,QAAS;IACnB,IAAI,EAAEF,IAAK;IACX,SAAS,EAAEd,UAAU,mBAEnBmB,QAAQ,KAAKhB,QAAQ,CAACsB,GAAG,yBAA6B,EACtDN,QAAQ,KAAKhB,QAAQ,CAACuB,OAAO,6BAAiC,EAC9Df,QAAQ,8BAAkC,EAC1C,CAAC,CAACE,IAAI,0BAA8B,EACpCI,SAAS;EACT,iBAEF,oBAAC,QAAQ;IACP,IAAI,EAAC,cAAc;IACnB,SAAS,EAAC,KAAK;IACf,QAAQ,EAAED,QAAS;IACnB,UAAU,EACRG,QAAQ,KAAKhB,QAAQ,CAACsB,GAAG,wCAA4C,YACtE;IACD,iBAAiB,EAAEN,QAAQ,KAAKhB,QAAQ,CAACsB,GAAG,GAAG,CAAC,GAAG,GAAI;IACvD,QAAQ,EAAE,KAAM;IAChB,SAAS;EAAiC,EAC1C,eACF;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA6B,GACxCf,QAAQ,eACT;IAAK,SAAS;EAA8B,GAAET,YAAY,CAACW,SAAS,CAAC,IAAIA,SAAS,CAAO,CACrF,EACLC,IAAI,iBACH,oBAAC,QAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS,wBAA6B;IAAC,MAAM,EAAC;EAAG,GACxEA,IAAI,CAER,CACG,CACI;AAEhB,CAAC"}

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

@@ -3,11 +3,11 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["children", "mode", "getRootRef", "className", "role"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { usePlatform } from '../../hooks/usePlatform';
-import { Platform } from '../../lib/platform';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
-import { useDOM } from '../../lib/dom';
+import { usePlatform } from '../../hooks/usePlatform';
 import { pressedKey } from '../../lib/accessibility';
+import { useDOM } from '../../lib/dom';
+import { Platform } from '../../lib/platform';
 import "./Tabs.module.css";
 var modeClassNames = {
   default: "vkuiTabs--mode-default",

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["React","classNames","usePlatform","Platform","useGlobalEventListener","useDOM","pressedKey","modeClassNames","default","accent","secondary","TabsModeContext","createContext","mode","withGaps","Tabs","children","getRootRef","className","role","restProps","platform","document","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","capture","VKCOM"],"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { pressedKey } from '../../lib/accessibility';\nimport styles from './Tabs.module.css';\n\nconst modeClassNames = {\n  default: styles['Tabs--mode-default'],\n  accent: styles['Tabs--mode-accent'],\n  secondary: styles['Tabs--mode-secondary'],\n};\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        platform === Platform.VKCOM && styles['Tabs--vkcom'],\n        withGaps && styles['Tabs--withGaps'],\n        modeClassNames[mode],\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"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":["React","classNames","useGlobalEventListener","usePlatform","pressedKey","useDOM","Platform","modeClassNames","default","accent","secondary","TabsModeContext","createContext","mode","withGaps","Tabs","children","getRootRef","className","role","restProps","platform","document","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","capture","VKCOM"],"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\nconst modeClassNames = {\n  default: styles['Tabs--mode-default'],\n  accent: styles['Tabs--mode-accent'],\n  secondary: styles['Tabs--mode-secondary'],\n};\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        platform === Platform.VKCOM && styles['Tabs--vkcom'],\n        withGaps && styles['Tabs--withGaps'],\n        modeClassNames[mode],\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"],"mappings":"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"}

package/dist/cssm/components/TabsItem/TabsItem.js

@@ -1,16 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["before", "children", "status", "after", "selected", "className", "role", "tabIndex"];
 import * as React from 'react';
-import { Tappable } from '../Tappable/Tappable';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { SizeType } from '../../lib/adaptivity';
+import { warnOnce } from '../../lib/warnOnce';
 import { TabsModeContext } from '../Tabs/Tabs';
+import { Tappable } from '../Tappable/Tappable';
 import { Headline } from '../Typography/Headline/Headline';
 import { Subhead } from '../Typography/Subhead/Subhead';
-import { getSizeYClassName } from '../../helpers/getSizeYClassName';
-import { warnOnce } from '../../lib/warnOnce';
 import "./TabsItem.module.css";
+var sizeYClassNames = _defineProperty({
+  none: "vkuiTabsItem--sizeY-none"
+}, SizeType.COMPACT, "vkuiTabsItem--sizeY-compact");
 var warn = warnOnce('TabsItem');
 
 /**
@@ -29,7 +33,8 @@ export var TabsItem = function TabsItem(_ref) {
     tabIndexProp = _ref.tabIndex,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useAdaptivity = useAdaptivity(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var _React$useContext = React.useContext(TabsModeContext),
     mode = _React$useContext.mode,
     withGaps = _React$useContext.withGaps;
@@ -56,7 +61,7 @@ export var TabsItem = function TabsItem(_ref) {
     tabIndex = selected ? 0 : -1;
   }
   return /*#__PURE__*/React.createElement(Tappable, _extends({}, restProps, {
-    className: classNames("vkuiTabsItem", mode && styles["TabsItem--mode-".concat(mode)], selected && "vkuiTabsItem--selected", getSizeYClassName("vkuiTabsItem", sizeY), withGaps && "vkuiTabsItem--withGaps", className),
+    className: classNames("vkuiTabsItem", mode && styles["TabsItem--mode-".concat(mode)], selected && "vkuiTabsItem--selected", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], withGaps && "vkuiTabsItem--withGaps", className),
     hoverMode: "vkuiTabsItem--hover",
     activeMode: "vkuiTabsItem--active",
     focusVisibleMode: "inside",