@vkontakte/vkui 5.5.4 → 5.6.0

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

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

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

@@ -3,7 +3,7 @@ import { classNames } from '@vkontakte/vkjs';
 import styles from './Spacing.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
- */ export const Spacing = ({ size =8 , style: styleProp , className , ...restProps })=>{
+ */ export const Spacing = ({ size = 8, style: styleProp, className, ...restProps })=>{
     const style = {
         height: size,
         padding: `${size / 2}px 0`,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasChildren } from '../../types';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasChildren {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return <div {...restProps} className={classNames(className, styles['Spacing'])} style={style} />;\n};\n"],"names":["React","classNames","styles","Spacing","size","style","styleProp","className","restProps","height","padding","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,uBAAuB;AAS1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,MAAO,EAAC,EAAEC,OAAOC,UAAS,EAAEC,UAAS,EAAE,GAAGC,WAAyB;IAC3F,MAAMH,QAA6B;QACjCI,QAAQL;QACRM,SAAS,CAAC,EAAEN,OAAO,EAAE,IAAI,CAAC;QAC1B,GAAGE,SAAS;IACd;IAEA,qBAAO,oBAACK;QAAK,GAAGH,SAAS;QAAED,WAAWN,WAAWM,WAAWL,MAAM,CAAC,UAAU;QAAGG,OAAOA;;AACzF,EAAE"}
+{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasChildren } from '../../types';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasChildren {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return <div {...restProps} className={classNames(className, styles['Spacing'])} style={style} />;\n};\n"],"names":["React","classNames","styles","Spacing","size","style","styleProp","className","restProps","height","padding","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,uBAAuB;AAS1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,OAAO,CAAC,EAAEC,OAAOC,SAAS,EAAEC,SAAS,EAAE,GAAGC,WAAyB;IAC3F,MAAMH,QAA6B;QACjCI,QAAQL;QACRM,SAAS,CAAC,EAAEN,OAAO,EAAE,IAAI,CAAC;QAC1B,GAAGE,SAAS;IACd;IAEA,qBAAO,oBAACK;QAAK,GAAGH,SAAS;QAAED,WAAWN,WAAWM,WAAWL,MAAM,CAAC,UAAU;QAAGG,OAAOA;;AACzF,EAAE"}

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

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

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

@@ -7,14 +7,20 @@ import styles from './Spinner.module.css';
 const warn = warnOnce('Spinner');
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
- */ export const Spinner = /*#__PURE__*/ React.memo(({ size ='regular' , children ='Загружается...' , // TODO [>=6]: Удалить автоматическое приведение aria-label
-'aria-label': ariaLabel = 'Загружается...' , className , ...restProps })=>{
+ */ export const Spinner = /*#__PURE__*/ React.memo(({ size = 'regular', children = 'Загружается...', // TODO [>=6]: Удалить автоматическое приведение aria-label
+'aria-label': ariaLabel = 'Загружается...', disableAnimation, className, ...restProps })=>{
     const SpinnerIcon = {
         small: Icon16Spinner,
         regular: Icon24Spinner,
         medium: Icon32Spinner,
         large: Icon44Spinner
     }[size];
+    const center = {
+        small: 8,
+        regular: 12,
+        medium: 16,
+        large: 22
+    }[size];
     // TODO [>=6]: Удалить варнинг
     if (process.env.NODE_ENV === 'development') {
         if (ariaLabel && !children) {
@@ -25,9 +31,17 @@ const warn = warnOnce('Spinner');
         role: "status",
         ...restProps,
         className: classNames(styles['Spinner'], className)
-    }, /*#__PURE__*/ React.createElement(SpinnerIcon, {
-        className: styles['Spinner__self']
-    }), /*#__PURE__*/ React.createElement(VisuallyHidden, null, children ?? ariaLabel));
+    }, /*#__PURE__*/ React.createElement(SpinnerIcon, null, !disableAnimation && // TODO [a11y]: use reduced motion hook?
+    //              https://github.com/VKCOM/VKUI/pull/4673
+    /*#__PURE__*/ React.createElement("animateTransform", {
+        attributeName: "transform",
+        attributeType: "XML",
+        type: "rotate",
+        from: `0 ${center} ${center}`,
+        to: `360 ${center} ${center}`,
+        dur: "0.7s",
+        repeatCount: "indefinite"
+    })), /*#__PURE__*/ React.createElement(VisuallyHidden, null, children ?? ariaLabel));
 });
 Spinner.displayName = 'Spinner';
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n}\n\nconst warn = warnOnce('Spinner');\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    children = 'Загружается...',\n    // TODO [>=6]: Удалить автоматическое приведение aria-label\n    'aria-label': ariaLabel = 'Загружается...',\n    className,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    // TODO [>=6]: Удалить варнинг\n    if (process.env.NODE_ENV === 'development') {\n      if (ariaLabel && !children) {\n        warn(\n          'a11y: Пожалуйста, передавайте ваш текст для ассистивных технологий в children вместо aria-label.',\n        );\n      }\n    }\n\n    return (\n      <span role=\"status\" {...restProps} className={classNames(styles['Spinner'], className)}>\n        <SpinnerIcon className={styles['Spinner__self']} />\n        <VisuallyHidden>{children ?? ariaLabel}</VisuallyHidden>\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","classNames","warnOnce","VisuallyHidden","styles","warn","Spinner","memo","size","children","ariaLabel","className","restProps","SpinnerIcon","small","regular","medium","large","process","env","NODE_ENV","span","role","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAC9F,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,uBAAuB;AAM1C,MAAMC,OAAOH,SAAS;AACtB;;CAEC,GACD,OAAO,MAAMI,wBAAUV,MAAMW,KAC3B,CAAC,EACCC,MAAO,UAAS,EAChBC,UAAW,iBAAgB,EAC3B,2DAA2D;AAC3D,cAAcC,YAAY,gBAAgB,CAAA,EAC1CC,UAAS,EACT,GAAGC,WACU;IACb,MAAMC,cAAc;QAClBC,OAAOjB;QACPkB,SAASjB;QACTkB,QAAQjB;QACRkB,OAAOjB;IACT,CAAC,CAACQ,KAAK;IAEP,8BAA8B;IAC9B,IAAIU,QAAQC,IAAIC,aAAa,eAAe;QAC1C,IAAIV,aAAa,CAACD,UAAU;YAC1BJ,KACE;QAEJ;IACF;IAEA,qBACE,oBAACgB;QAAKC,MAAK;QAAU,GAAGV,SAAS;QAAED,WAAWV,WAAWG,MAAM,CAAC,UAAU,EAAEO;qBAC1E,oBAACE;QAAYF,WAAWP,MAAM,CAAC,gBAAgB;sBAC/C,oBAACD,sBAAgBM,YAAYC;AAGnC,GACA;AAEFJ,QAAQiB,cAAc"}
+{"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n  disableAnimation?: boolean;\n}\n\nconst warn = warnOnce('Spinner');\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    children = 'Загружается...',\n    // TODO [>=6]: Удалить автоматическое приведение aria-label\n    'aria-label': ariaLabel = 'Загружается...',\n    disableAnimation,\n    className,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    const center = {\n      small: 8,\n      regular: 12,\n      medium: 16,\n      large: 22,\n    }[size];\n\n    // TODO [>=6]: Удалить варнинг\n    if (process.env.NODE_ENV === 'development') {\n      if (ariaLabel && !children) {\n        warn(\n          'a11y: Пожалуйста, передавайте ваш текст для ассистивных технологий в children вместо aria-label.',\n        );\n      }\n    }\n\n    return (\n      <span role=\"status\" {...restProps} className={classNames(styles['Spinner'], className)}>\n        <SpinnerIcon>\n          {!disableAnimation && (\n            // TODO [a11y]: use reduced motion hook?\n            //              https://github.com/VKCOM/VKUI/pull/4673\n            <animateTransform\n              attributeName=\"transform\"\n              attributeType=\"XML\"\n              type=\"rotate\"\n              from={`0 ${center} ${center}`}\n              to={`360 ${center} ${center}`}\n              dur=\"0.7s\"\n              repeatCount=\"indefinite\"\n            />\n          )}\n        </SpinnerIcon>\n        <VisuallyHidden>{children ?? ariaLabel}</VisuallyHidden>\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","classNames","warnOnce","VisuallyHidden","styles","warn","Spinner","memo","size","children","ariaLabel","disableAnimation","className","restProps","SpinnerIcon","small","regular","medium","large","center","process","env","NODE_ENV","span","role","animateTransform","attributeName","attributeType","type","from","to","dur","repeatCount","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAC9F,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,uBAAuB;AAO1C,MAAMC,OAAOH,SAAS;AACtB;;CAEC,GACD,OAAO,MAAMI,wBAAUV,MAAMW,IAAI,CAC/B,CAAC,EACCC,OAAO,SAAS,EAChBC,WAAW,gBAAgB,EAC3B,2DAA2D;AAC3D,cAAcC,YAAY,gBAAgB,EAC1CC,gBAAgB,EAChBC,SAAS,EACT,GAAGC,WACU;IACb,MAAMC,cAAc;QAClBC,OAAOlB;QACPmB,SAASlB;QACTmB,QAAQlB;QACRmB,OAAOlB;IACT,CAAC,CAACQ,KAAK;IAEP,MAAMW,SAAS;QACbJ,OAAO;QACPC,SAAS;QACTC,QAAQ;QACRC,OAAO;IACT,CAAC,CAACV,KAAK;IAEP,8BAA8B;IAC9B,IAAIY,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIZ,aAAa,CAACD,UAAU;YAC1BJ,KACE;QAEJ;IACF;IAEA,qBACE,oBAACkB;QAAKC,MAAK;QAAU,GAAGX,SAAS;QAAED,WAAWX,WAAWG,MAAM,CAAC,UAAU,EAAEQ;qBAC1E,oBAACE,mBACE,CAACH,oBACA,wCAAwC;IACxC,uDAAuD;kBACvD,oBAACc;QACCC,eAAc;QACdC,eAAc;QACdC,MAAK;QACLC,MAAM,CAAC,EAAE,EAAEV,OAAO,CAAC,EAAEA,OAAO,CAAC;QAC7BW,IAAI,CAAC,IAAI,EAAEX,OAAO,CAAC,EAAEA,OAAO,CAAC;QAC7BY,KAAI;QACJC,aAAY;uBAIlB,oBAAC7B,sBAAgBM,YAAYC;AAGnC,GACA;AAEFJ,QAAQ2B,WAAW,GAAG"}

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

@@ -7,15 +7,6 @@
   color: var(--vkui--color_icon_medium);
 }
 
-.Spinner__self {
-  animation: vkui-spinner-rotator var(--vkui_internal--duration) linear infinite;
-  transform-origin: center;
-}
-
-.Spinner__self svg {
-  transform: scale(1);
-}
-
 /**
  * CMP:
  * PanelHeader
@@ -24,13 +15,3 @@
 :global(.vkuiInternalPanelHeader) .Spinner {
   color: currentColor;
 }
-
-@keyframes vkui-spinner-rotator {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}

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

@@ -15,7 +15,7 @@ const breakpointClassNames = {
     tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus'
 };
 function useTransitionAnimate(animateProp) {
-    const { viewWidth  } = useAdaptivity();
+    const { viewWidth } = useAdaptivity();
     const [animate, setAnimate] = React.useState(Boolean(animateProp));
     const mediaQueries = useMediaQueries();
     React.useEffect(()=>{
@@ -45,9 +45,9 @@ const warn = warnOnce('SplitCol');
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitCol
  */ export const SplitCol = (props)=>{
-    const { children , width , maxWidth , minWidth , spaced , animate: animateProp , fixed , style , autoSpaced , stretchedOnMobile , className , ...restProps } = props;
+    const { children, width, maxWidth, minWidth, spaced, animate: animateProp, fixed, style, autoSpaced, stretchedOnMobile, className, ...restProps } = props;
     const baseRef = React.useRef(null);
-    const { viewWidth  } = useAdaptivity();
+    const { viewWidth } = useAdaptivity();
     const animate = useTransitionAnimate(animateProp);
     const contextValue = useObjectMemo({
         colRef: baseRef,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   *\n   * @deprecated используйте autoSpaced\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\nconst warn = warnOnce('SplitCol');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  if (process.env.NODE_ENV === 'development' && spaced !== undefined) {\n    // TODO [>=6]: Удалить spaced\n    warn('Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced');\n  }\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        spaced && classNames(styles['SplitCol--spaced'], 'vkuiInternalSplitCol--spaced'),\n        spaced === undefined &&\n          classNames(styles['SplitCol--spaced-none'], 'vkuiInternalSplitCol--spaced-none'),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n        className,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useMediaQueries","useObjectMemo","ViewWidth","viewWidthToClassName","matchMediaListAddListener","matchMediaListRemoveListener","warnOnce","SplitColContext","styles","breakpointClassNames","none","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","warn","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","contextValue","colRef","process","env","NODE_ENV","div","ref","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,uBAAuB;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,uBAAuB;AAC/F,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,QAAQ,oBAAoB;AACpD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,uBAAuB;IAC3BC,MAAMZ,WAAWU,MAAM,CAAC,2BAA2B,EAAE;IACrDG,aAAaH,MAAM,CAAC,kCAAkC;IACtDI,iBAAiBJ,MAAM,CAAC,sCAAsC;IAC9DK,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,UAAS,EAAE,GAAGjB;IACtB,MAAM,CAACkB,SAASC,WAAW,GAAGrB,MAAMsB,SAASC,QAAQL;IACrD,MAAMM,eAAerB;IAErBH,MAAMyB,UAAU;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYd,UAAUsB;YACjC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaT,gBAAgBc;QAChED;QAEArB,0BAA0BiB,aAAaT,iBAAiBa;QACxD,OAAO;YACLpB,6BAA6BgB,aAAaT,iBAAiBa;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AA2BA,MAAMU,OAAOrB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMsB,WAAW,CAACC;IACvB,MAAM,EACJC,SAAQ,EACRC,MAAK,EACLC,SAAQ,EACRC,SAAQ,EACRC,OAAM,EACNjB,SAASF,YAAW,EACpBoB,MAAK,EACLC,MAAK,EACLC,WAAU,EACVC,kBAAiB,EACjBC,UAAS,EACT,GAAGC,WACJ,GAAGX;IACJ,MAAMY,UAAU5C,MAAM6C,OAAuB;IAC7C,MAAM,EAAE1B,UAAS,EAAE,GAAGjB;IACtB,MAAMkB,UAAUH,qBAAqBC;IAErC,MAAM4B,eAAe1C,cAAc;QACjC2C,QAAQH;QACRxB;IACF;IAEA,IAAI4B,QAAQC,IAAIC,aAAa,iBAAiBb,WAAWX,WAAW;QAClE,6BAA6B;QAC7BI,KAAK;IACP;IAEA,qBACE,oBAACqB;QACE,GAAGR,SAAS;QACbJ,OAAO;YACL,GAAGA,KAAK;YACRL,OAAOA;YACPC,UAAUA;YACVC,UAAUA;QACZ;QACAgB,KAAKR;QACLF,WAAWzC,WACTU,MAAM,CAAC,WAAW,EAClBL,qBAAqBM,sBAAsBO,YAC3CkB,UAAUpC,WAAWU,MAAM,CAAC,mBAAmB,EAAE,iCACjD0B,WAAWX,aACTzB,WAAWU,MAAM,CAAC,wBAAwB,EAAE,sCAC9C6B,cACEvC,WAAWU,MAAM,CAAC,wBAAwB,EAAE,sCAC9C2B,SAAS3B,MAAM,CAAC,kBAAkB,EAClC8B,qBAAqB9B,MAAM,CAAC,gCAAgC,EAC5D+B;qBAGF,oBAAChC,gBAAgB2C;QAASC,OAAOR;OAC9BR,sBAAQ,oBAACa;QAAIT,WAAW/B,MAAM,CAAC,uBAAuB;OAAGsB,YAAkBA;AAIpF,EAAE"}
+{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   *\n   * @deprecated используйте autoSpaced\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\nconst warn = warnOnce('SplitCol');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  if (process.env.NODE_ENV === 'development' && spaced !== undefined) {\n    // TODO [>=6]: Удалить spaced\n    warn('Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced');\n  }\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        spaced && classNames(styles['SplitCol--spaced'], 'vkuiInternalSplitCol--spaced'),\n        spaced === undefined &&\n          classNames(styles['SplitCol--spaced-none'], 'vkuiInternalSplitCol--spaced-none'),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n        className,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useMediaQueries","useObjectMemo","ViewWidth","viewWidthToClassName","matchMediaListAddListener","matchMediaListRemoveListener","warnOnce","SplitColContext","styles","breakpointClassNames","none","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","warn","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","contextValue","colRef","process","env","NODE_ENV","div","ref","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,uBAAuB;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,uBAAuB;AAC/F,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,QAAQ,oBAAoB;AACpD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,uBAAuB;IAC3BC,MAAMZ,WAAWU,MAAM,CAAC,2BAA2B,EAAE;IACrDG,aAAaH,MAAM,CAAC,kCAAkC;IACtDI,iBAAiBJ,MAAM,CAAC,sCAAsC;IAC9DK,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,SAAS,EAAE,GAAGjB;IACtB,MAAM,CAACkB,SAASC,WAAW,GAAGrB,MAAMsB,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAerB;IAErBH,MAAMyB,SAAS,CAAC;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYd,UAAUsB,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaT,eAAe,CAACc,OAAO;QACvED;QAEArB,0BAA0BiB,aAAaT,eAAe,EAAEa;QACxD,OAAO;YACLpB,6BAA6BgB,aAAaT,eAAe,EAAEa;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AA2BA,MAAMU,OAAOrB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMsB,WAAW,CAACC;IACvB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,MAAM,EACNjB,SAASF,WAAW,EACpBoB,KAAK,EACLC,KAAK,EACLC,UAAU,EACVC,iBAAiB,EACjBC,SAAS,EACT,GAAGC,WACJ,GAAGX;IACJ,MAAMY,UAAU5C,MAAM6C,MAAM,CAAiB;IAC7C,MAAM,EAAE1B,SAAS,EAAE,GAAGjB;IACtB,MAAMkB,UAAUH,qBAAqBC;IAErC,MAAM4B,eAAe1C,cAAc;QACjC2C,QAAQH;QACRxB;IACF;IAEA,IAAI4B,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBb,WAAWX,WAAW;QAClE,6BAA6B;QAC7BI,KAAK;IACP;IAEA,qBACE,oBAACqB;QACE,GAAGR,SAAS;QACbJ,OAAO;YACL,GAAGA,KAAK;YACRL,OAAOA;YACPC,UAAUA;YACVC,UAAUA;QACZ;QACAgB,KAAKR;QACLF,WAAWzC,WACTU,MAAM,CAAC,WAAW,EAClBL,qBAAqBM,sBAAsBO,YAC3CkB,UAAUpC,WAAWU,MAAM,CAAC,mBAAmB,EAAE,iCACjD0B,WAAWX,aACTzB,WAAWU,MAAM,CAAC,wBAAwB,EAAE,sCAC9C6B,cACEvC,WAAWU,MAAM,CAAC,wBAAwB,EAAE,sCAC9C2B,SAAS3B,MAAM,CAAC,kBAAkB,EAClC8B,qBAAqB9B,MAAM,CAAC,gCAAgC,EAC5D+B;qBAGF,oBAAChC,gBAAgB2C,QAAQ;QAACC,OAAOR;OAC9BR,sBAAQ,oBAACa;QAAIT,WAAW/B,MAAM,CAAC,uBAAuB;OAAGsB,YAAkBA;AAIpF,EAAE"}

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

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

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

@@ -6,7 +6,7 @@ import { PopoutRoot } from '../PopoutRoot/PopoutRoot';
 import styles from './SplitLayout.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitLayout
- */ export const SplitLayout = ({ popout , modal , header , children , getRootRef , getRef , className , ...restProps })=>{
+ */ export const SplitLayout = ({ popout, modal, header, children, getRootRef, getRef, className, ...restProps })=>{
     const platform = usePlatform();
     return /*#__PURE__*/ React.createElement(PopoutRoot, {
         className: classNames(styles['SplitLayout'], platform === Platform.IOS && styles['SplitLayout--ios']),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === Platform.IOS && styles['SplitLayout--ios'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"names":["React","classNames","usePlatform","Platform","PopoutRoot","styles","SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","IOS","div","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,OAAOC,YAAY,2BAA2B;AAiB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,OAAM,EACNC,MAAK,EACLC,OAAM,EACNC,SAAQ,EACRC,WAAU,EACVC,OAAM,EACNC,UAAS,EACT,GAAGC,WACc;IACjB,MAAMC,WAAWb;IAEjB,qBACE,oBAACE;QACCS,WAAWZ,WACTI,MAAM,CAAC,cAAc,EACrBU,aAAaZ,SAASa,OAAOX,MAAM,CAAC,mBAAmB;QAEzDE,QAAQA;QACRC,OAAOA;QACPG,YAAYA;OAEXF,sBACD,oBAACQ;QACE,GAAGH,SAAS;QACbI,KAAKN;QACLC,WAAWZ,WACTI,MAAM,CAAC,qBAAqB,EAC5B,CAAC,CAACI,UAAUJ,MAAM,CAAC,6BAA6B,EAChDQ;OAGDH;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === Platform.IOS && styles['SplitLayout--ios'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"names":["React","classNames","usePlatform","Platform","PopoutRoot","styles","SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","IOS","div","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,OAAOC,YAAY,2BAA2B;AAiB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACT,GAAGC,WACc;IACjB,MAAMC,WAAWb;IAEjB,qBACE,oBAACE;QACCS,WAAWZ,WACTI,MAAM,CAAC,cAAc,EACrBU,aAAaZ,SAASa,GAAG,IAAIX,MAAM,CAAC,mBAAmB;QAEzDE,QAAQA;QACRC,OAAOA;QACPG,YAAYA;OAEXF,sBACD,oBAACQ;QACE,GAAGH,SAAS;QACbI,KAAKN;QACLC,WAAWZ,WACTI,MAAM,CAAC,qBAAqB,EAC5B,CAAC,CAACI,UAAUJ,MAAM,CAAC,6BAA6B,EAChDQ;OAGDH;AAIT,EAAE"}

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

@@ -6,7 +6,7 @@ const defaultScrollToLeft = (x)=>x - 240;
 const defaultScrollToRight = (x)=>x + 240;
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationBar
- */ export const SubnavigationBar = ({ mode ='overflow' , children , showArrows =true , getScrollToLeft =defaultScrollToLeft , getScrollToRight =defaultScrollToRight , scrollAnimationDuration , className , ...restProps })=>{
+ */ export const SubnavigationBar = ({ mode = 'overflow', children, showArrows = true, getScrollToLeft = defaultScrollToLeft, getScrollToRight = defaultScrollToRight, scrollAnimationDuration, className, ...restProps })=>{
     let ScrollWrapper;
     let scrollWrapperProps = {};
     if (mode === 'fixed') {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  mode?: 'fixed' | 'overflow';\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = 'overflow',\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  className,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === 'fixed') {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        'vkuiInternalSubnavigationBar',\n        mode === 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed'),\n        className,\n      )}\n    >\n      <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>\n        <div className={styles['SubnavigationBar__scrollIn']}>{children}</div>\n      </ScrollWrapper>\n    </div>\n  );\n};\n"],"names":["React","classNames","HorizontalScroll","styles","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","className","restProps","ScrollWrapper","scrollWrapperProps","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,gBAAgB,QAGX,uCAAuC;AAC9C,OAAOC,YAAY,gCAAgC;AAWnD,MAAMC,sBAA6C,CAACC,IAAMA,IAAI;AAE9D,MAAMC,uBAA8C,CAACD,IAAMA,IAAI;AAE/D;;CAEC,GACD,OAAO,MAAME,mBAAmB,CAAC,EAC/BC,MAAO,WAAU,EACjBC,SAAQ,EACRC,YAAa,KAAI,EACjBC,iBAAkBP,oBAAmB,EACrCQ,kBAAmBN,qBAAoB,EACvCO,wBAAuB,EACvBC,UAAS,EACT,GAAGC,WACmB;IACtB,IAAIC;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIT,SAAS,SAAS;QACpBQ,gBAAgB;IAClB,OAAO;QACLA,gBAAgBd;QAChBe,qBAAqB;YACnBP;YACAC;YACAC;YACAC;QACF;IACF;IAEA,qBACE,oBAACK;QACE,GAAGH,SAAS;QACbD,WAAWb,WACT,gCACAO,SAAS,WAAWP,WAAW,6CAC/Ba;qBAGF,oBAACE;QAAcF,WAAWX,MAAM,CAAC,uBAAuB;QAAG,GAAGc,kBAAkB;qBAC9E,oBAACC;QAAIJ,WAAWX,MAAM,CAAC,6BAA6B;OAAGM;AAI/D,EAAE"}
+{"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  mode?: 'fixed' | 'overflow';\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = 'overflow',\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  className,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === 'fixed') {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        'vkuiInternalSubnavigationBar',\n        mode === 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed'),\n        className,\n      )}\n    >\n      <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>\n        <div className={styles['SubnavigationBar__scrollIn']}>{children}</div>\n      </ScrollWrapper>\n    </div>\n  );\n};\n"],"names":["React","classNames","HorizontalScroll","styles","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","className","restProps","ScrollWrapper","scrollWrapperProps","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,gBAAgB,QAGX,uCAAuC;AAC9C,OAAOC,YAAY,gCAAgC;AAWnD,MAAMC,sBAA6C,CAACC,IAAMA,IAAI;AAE9D,MAAMC,uBAA8C,CAACD,IAAMA,IAAI;AAE/D;;CAEC,GACD,OAAO,MAAME,mBAAmB,CAAC,EAC/BC,OAAO,UAAU,EACjBC,QAAQ,EACRC,aAAa,IAAI,EACjBC,kBAAkBP,mBAAmB,EACrCQ,mBAAmBN,oBAAoB,EACvCO,uBAAuB,EACvBC,SAAS,EACT,GAAGC,WACmB;IACtB,IAAIC;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIT,SAAS,SAAS;QACpBQ,gBAAgB;IAClB,OAAO;QACLA,gBAAgBd;QAChBe,qBAAqB;YACnBP;YACAC;YACAC;YACAC;QACF;IACF;IAEA,qBACE,oBAACK;QACE,GAAGH,SAAS;QACbD,WAAWb,WACT,gCACAO,SAAS,WAAWP,WAAW,6CAC/Ba;qBAGF,oBAACE;QAAcF,WAAWX,MAAM,CAAC,uBAAuB;QAAG,GAAGc,kBAAkB;qBAC9E,oBAACC;QAAIJ,WAAWX,MAAM,CAAC,6BAA6B;OAAGM;AAI/D,EAAE"}

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

@@ -11,7 +11,7 @@ const sizeYClassNames = {
     none: styles['SubnavigationButton--sizeY-none'],
     [SizeType.COMPACT]: styles['SubnavigationButton--sizeY-compact']
 };
-const SubnavigationButtonTypography = ({ textLevel , ...restProps })=>{
+const SubnavigationButtonTypography = ({ textLevel, ...restProps })=>{
     if (textLevel === '1') {
         return /*#__PURE__*/ React.createElement(Subhead, restProps);
     }
@@ -22,8 +22,8 @@ const SubnavigationButtonTypography = ({ textLevel , ...restProps })=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationButton
- */ export const SubnavigationButton = ({ mode ='primary' , size ='m' , selected , textLevel ='1' , before , after , expandable , children , className , ...restProps })=>{
-    const { sizeY ='none'  } = useAdaptivity();
+ */ export const SubnavigationButton = ({ mode = 'primary', size = 'm', selected, textLevel = '1', before, after, expandable, children, className, ...restProps })=>{
+    const { sizeY = 'none' } = useAdaptivity();
     return /*#__PURE__*/ React.createElement(Tappable, {
         ...restProps,
         hasActive: false,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasChildren, HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SubnavigationButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['SubnavigationButton--sizeY-compact'],\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        {\n          s: styles['SubnavigationButton--size-s'],\n          m: styles['SubnavigationButton--size-m'],\n          l: styles['SubnavigationButton--size-l'],\n        }[size],\n        {\n          primary: styles['SubnavigationButton--mode-primary'],\n          outline: styles['SubnavigationButton--mode-outline'],\n          tertiary: styles['SubnavigationButton--mode-tertiary'],\n        }[mode],\n        selected && styles['SubnavigationButton--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","SizeType","Tappable","Caption","Subhead","styles","sizeYClassNames","none","COMPACT","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","size","selected","before","after","expandable","children","className","sizeY","hasActive","focusVisibleMode","s","m","l","primary","outline","tertiary","REGULAR","span","Component"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,mCAAmC;AAEtD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,kCAAkC;IAC/C,CAACJ,SAASO,QAAQ,EAAEH,MAAM,CAAC,qCAAqC;AAClE;AA4BA,MAAMI,gCAAgC,CAAC,EACrCC,UAAS,EACT,GAAGC,WACgC;IACnC,IAAID,cAAc,KAAK;QACrB,qBAAO,oBAACN,SAAYO;IACtB;IAEA,qBAAO,oBAACR;QAAQS,OAAOF,cAAc,MAAM,MAAM;QAAM,GAAGC,SAAS;;AACrE;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAAC,EAClCC,MAAO,UAAS,EAChBC,MAAO,IAAG,EACVC,SAAQ,EACRN,WAAY,IAAG,EACfO,OAAM,EACNC,MAAK,EACLC,WAAU,EACVC,SAAQ,EACRC,UAAS,EACT,GAAGV,WACsB;IACzB,MAAM,EAAEW,OAAQ,OAAM,EAAE,GAAGtB;IAE3B,qBACE,oBAACE;QACE,GAAGS,SAAS;QACbY,WAAW;QACXC,kBAAiB;QACjBH,WAAWtB,WACTM,MAAM,CAAC,sBAAsB,EAC7B;YACEoB,GAAGpB,MAAM,CAAC,8BAA8B;YACxCqB,GAAGrB,MAAM,CAAC,8BAA8B;YACxCsB,GAAGtB,MAAM,CAAC,8BAA8B;QAC1C,CAAC,CAACU,KAAK,EACP;YACEa,SAASvB,MAAM,CAAC,oCAAoC;YACpDwB,SAASxB,MAAM,CAAC,oCAAoC;YACpDyB,UAAUzB,MAAM,CAAC,qCAAqC;QACxD,CAAC,CAACS,KAAK,EACPE,YAAYX,MAAM,CAAC,gCAAgC,EACnDiB,UAAUrB,SAAS8B,WAAWzB,eAAe,CAACgB,MAAM,EACpDD;qBAGF,oBAACW;QAAKX,WAAWhB,MAAM,CAAC,0BAA0B;OAC/CY,wBAAU,oBAACe;QAAKX,WAAWhB,MAAM,CAAC,8BAA8B;OAAGY,uBACpE,oBAACR;QACCC,WAAWA;QACXW,WAAWhB,MAAM,CAAC,6BAA6B;QAC/C4B,WAAU;OAETb,WAEFF,uBAAS,oBAACc;QAAKX,WAAWhB,MAAM,CAAC,6BAA6B;OAAGa,QACjEC,4BAAc,oBAACrB;QAAeuB,WAAWhB,MAAM,CAAC,sCAAsC;;AAI/F,EAAE"}
+{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasChildren, HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SubnavigationButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['SubnavigationButton--sizeY-compact'],\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        {\n          s: styles['SubnavigationButton--size-s'],\n          m: styles['SubnavigationButton--size-m'],\n          l: styles['SubnavigationButton--size-l'],\n        }[size],\n        {\n          primary: styles['SubnavigationButton--mode-primary'],\n          outline: styles['SubnavigationButton--mode-outline'],\n          tertiary: styles['SubnavigationButton--mode-tertiary'],\n        }[mode],\n        selected && styles['SubnavigationButton--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","SizeType","Tappable","Caption","Subhead","styles","sizeYClassNames","none","COMPACT","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","size","selected","before","after","expandable","children","className","sizeY","hasActive","focusVisibleMode","s","m","l","primary","outline","tertiary","REGULAR","span","Component"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,mCAAmC;AAEtD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,kCAAkC;IAC/C,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,qCAAqC;AAClE;AA4BA,MAAMI,gCAAgC,CAAC,EACrCC,SAAS,EACT,GAAGC,WACgC;IACnC,IAAID,cAAc,KAAK;QACrB,qBAAO,oBAACN,SAAYO;IACtB;IAEA,qBAAO,oBAACR;QAAQS,OAAOF,cAAc,MAAM,MAAM;QAAM,GAAGC,SAAS;;AACrE;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAAC,EAClCC,OAAO,SAAS,EAChBC,OAAO,GAAG,EACVC,QAAQ,EACRN,YAAY,GAAG,EACfO,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACT,GAAGV,WACsB;IACzB,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAGtB;IAE3B,qBACE,oBAACE;QACE,GAAGS,SAAS;QACbY,WAAW;QACXC,kBAAiB;QACjBH,WAAWtB,WACTM,MAAM,CAAC,sBAAsB,EAC7B;YACEoB,GAAGpB,MAAM,CAAC,8BAA8B;YACxCqB,GAAGrB,MAAM,CAAC,8BAA8B;YACxCsB,GAAGtB,MAAM,CAAC,8BAA8B;QAC1C,CAAC,CAACU,KAAK,EACP;YACEa,SAASvB,MAAM,CAAC,oCAAoC;YACpDwB,SAASxB,MAAM,CAAC,oCAAoC;YACpDyB,UAAUzB,MAAM,CAAC,qCAAqC;QACxD,CAAC,CAACS,KAAK,EACPE,YAAYX,MAAM,CAAC,gCAAgC,EACnDiB,UAAUrB,SAAS8B,OAAO,IAAIzB,eAAe,CAACgB,MAAM,EACpDD;qBAGF,oBAACW;QAAKX,WAAWhB,MAAM,CAAC,0BAA0B;OAC/CY,wBAAU,oBAACe;QAAKX,WAAWhB,MAAM,CAAC,8BAA8B;OAAGY,uBACpE,oBAACR;QACCC,WAAWA;QACXW,WAAWhB,MAAM,CAAC,6BAA6B;QAC/C4B,WAAU;OAETb,WAEFF,uBAAS,oBAACc;QAAKX,WAAWhB,MAAM,CAAC,6BAA6B;OAAGa,QACjEC,4BAAc,oBAACrB;QAAeuB,WAAWhB,MAAM,CAAC,sCAAsC;;AAI/F,EAAE"}

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

@@ -15,10 +15,10 @@ const sizeYClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Switch
- */ export const Switch = ({ style , className , getRootRef , getRef , ...restProps })=>{
+ */ export const Switch = ({ style, className, getRootRef, getRef, ...restProps })=>{
     const platform = usePlatform();
-    const { sizeY ='none'  } = useAdaptivity();
-    const { focusVisible , onBlur , onFocus  } = useFocusVisible();
+    const { sizeY = 'none' } = useAdaptivity();
+    const { focusVisible, onBlur, onFocus } = useFocusVisible();
     return /*#__PURE__*/ React.createElement("label", {
         className: classNames(styles['Switch'], platform === Platform.IOS && styles['Switch--ios'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], restProps.disabled && styles['Switch--disabled'], className),
         style: style,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  [SizeType.COMPACT]: styles['Switch--sizeY-compact'],\n};\n\nexport interface SwitchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({ style, className, getRootRef, getRef, ...restProps }: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        platform === Platform.IOS && styles['Switch--ios'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        restProps.disabled && styles['Switch--disabled'],\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n      onBlur={callMultiple(onBlur, restProps.onBlur)}\n      onFocus={callMultiple(onFocus, restProps.onFocus)}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        getRootRef={getRef}\n        type=\"checkbox\"\n        className={styles['Switch__self']}\n      />\n      <span aria-hidden className={styles['Switch__pseudo']} />\n      <FocusVisible visible={focusVisible} mode=\"outside\" />\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","usePlatform","SizeType","callMultiple","Platform","FocusVisible","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","Switch","style","className","getRootRef","getRef","restProps","platform","sizeY","focusVisible","onBlur","onFocus","label","IOS","REGULAR","disabled","ref","Component","type","span","aria-hidden","visible","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,sBAAsB;AAEzC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;IAClC,CAACL,SAASQ,QAAQ,EAAEH,MAAM,CAAC,wBAAwB;AACrD;AAOA;;CAEC,GACD,OAAO,MAAMI,SAAS,CAAC,EAAEC,MAAK,EAAEC,UAAS,EAAEC,WAAU,EAAEC,OAAM,EAAE,GAAGC,WAAwB;IACxF,MAAMC,WAAWhB;IACjB,MAAM,EAAEiB,OAAQ,OAAM,EAAE,GAAGnB;IAC3B,MAAM,EAAEoB,aAAY,EAAEC,OAAM,EAAEC,QAAO,EAAE,GAAGrB;IAE1C,qBACE,oBAACsB;QACCT,WAAWf,WACTS,MAAM,CAAC,SAAS,EAChBU,aAAab,SAASmB,OAAOhB,MAAM,CAAC,cAAc,EAClDW,UAAUhB,SAASsB,WAAWhB,eAAe,CAACU,MAAM,EACpDF,UAAUS,YAAYlB,MAAM,CAAC,mBAAmB,EAChDM;QAEFD,OAAOA;QACPc,KAAKZ;QACLM,QAAQjB,aAAaiB,QAAQJ,UAAUI;QACvCC,SAASlB,aAAakB,SAASL,UAAUK;qBAEzC,oBAACf;QACE,GAAGU,SAAS;QACbW,WAAU;QACVb,YAAYC;QACZa,MAAK;QACLf,WAAWN,MAAM,CAAC,eAAe;sBAEnC,oBAACsB;QAAKC,eAAAA;QAAYjB,WAAWN,MAAM,CAAC,iBAAiB;sBACrD,oBAACF;QAAa0B,SAASZ;QAAca,MAAK;;AAGhD,EAAE"}
+{"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  [SizeType.COMPACT]: styles['Switch--sizeY-compact'],\n};\n\nexport interface SwitchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({ style, className, getRootRef, getRef, ...restProps }: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        platform === Platform.IOS && styles['Switch--ios'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        restProps.disabled && styles['Switch--disabled'],\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n      onBlur={callMultiple(onBlur, restProps.onBlur)}\n      onFocus={callMultiple(onFocus, restProps.onFocus)}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        getRootRef={getRef}\n        type=\"checkbox\"\n        className={styles['Switch__self']}\n      />\n      <span aria-hidden className={styles['Switch__pseudo']} />\n      <FocusVisible visible={focusVisible} mode=\"outside\" />\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","usePlatform","SizeType","callMultiple","Platform","FocusVisible","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","Switch","style","className","getRootRef","getRef","restProps","platform","sizeY","focusVisible","onBlur","onFocus","label","IOS","REGULAR","disabled","ref","Component","type","span","aria-hidden","visible","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,sBAAsB;AAEzC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;IAClC,CAACL,SAASQ,OAAO,CAAC,EAAEH,MAAM,CAAC,wBAAwB;AACrD;AAOA;;CAEC,GACD,OAAO,MAAMI,SAAS,CAAC,EAAEC,KAAK,EAAEC,SAAS,EAAEC,UAAU,EAAEC,MAAM,EAAE,GAAGC,WAAwB;IACxF,MAAMC,WAAWhB;IACjB,MAAM,EAAEiB,QAAQ,MAAM,EAAE,GAAGnB;IAC3B,MAAM,EAAEoB,YAAY,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGrB;IAE1C,qBACE,oBAACsB;QACCT,WAAWf,WACTS,MAAM,CAAC,SAAS,EAChBU,aAAab,SAASmB,GAAG,IAAIhB,MAAM,CAAC,cAAc,EAClDW,UAAUhB,SAASsB,OAAO,IAAIhB,eAAe,CAACU,MAAM,EACpDF,UAAUS,QAAQ,IAAIlB,MAAM,CAAC,mBAAmB,EAChDM;QAEFD,OAAOA;QACPc,KAAKZ;QACLM,QAAQjB,aAAaiB,QAAQJ,UAAUI,MAAM;QAC7CC,SAASlB,aAAakB,SAASL,UAAUK,OAAO;qBAEhD,oBAACf;QACE,GAAGU,SAAS;QACbW,WAAU;QACVb,YAAYC;QACZa,MAAK;QACLf,WAAWN,MAAM,CAAC,eAAe;sBAEnC,oBAACsB;QAAKC,eAAAA;QAAYjB,WAAWN,MAAM,CAAC,iBAAiB;sBACrD,oBAACF;QAAa0B,SAASZ;QAAca,MAAK;;AAGhD,EAAE"}

package/dist/cssm/components/Tabbar/Tabbar.js

@@ -15,7 +15,7 @@ const getItemsLayoutClassName = (itemsLayout, children)=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabbar
- */ export const Tabbar = ({ children , shadow =true , mode , className , ...restProps })=>{
+ */ export const Tabbar = ({ children, shadow = true, mode, className, ...restProps })=>{
     const platform = usePlatform();
     return /*#__PURE__*/ React.createElement("div", {
         className: classNames('vkuiInternalTabbar', styles['Tabbar'], platform === Platform.IOS && styles['Tabbar--ios'], getItemsLayoutClassName(mode, children), shadow && styles['Tabbar--shadow'], className),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ children, shadow = true, mode, className, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === Platform.IOS && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, children),\n        shadow && styles['Tabbar--shadow'],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","Platform","styles","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","shadow","mode","className","restProps","platform","div","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,OAAOC,YAAY,sBAAsB;AAazC,MAAMC,0BAA0B,CAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAON,MAAMQ,SAASC,MAAMF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS,CAAC,EAAEH,SAAQ,EAAEI,QAAS,KAAI,EAAEC,KAAI,EAAEC,UAAS,EAAE,GAAGC,WAAwB;IAC5F,MAAMC,WAAWb;IAEjB,qBACE,oBAACc;QACCH,WAAWZ,WACT,sBACAG,MAAM,CAAC,SAAS,EAChBW,aAAaZ,SAASc,OAAOb,MAAM,CAAC,cAAc,EAClDC,wBAAwBO,MAAML,WAC9BI,UAAUP,MAAM,CAAC,iBAAiB,EAClCS;QAED,GAAGC,SAAS;OAEZP;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ children, shadow = true, mode, className, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === Platform.IOS && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, children),\n        shadow && styles['Tabbar--shadow'],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","Platform","styles","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","shadow","mode","className","restProps","platform","div","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,OAAOC,YAAY,sBAAsB;AAazC,MAAMC,0BAA0B,CAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAON,MAAMQ,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS,CAAC,EAAEH,QAAQ,EAAEI,SAAS,IAAI,EAAEC,IAAI,EAAEC,SAAS,EAAE,GAAGC,WAAwB;IAC5F,MAAMC,WAAWb;IAEjB,qBACE,oBAACc;QACCH,WAAWZ,WACT,sBACAG,MAAM,CAAC,SAAS,EAChBW,aAAaZ,SAASc,GAAG,IAAIb,MAAM,CAAC,cAAc,EAClDC,wBAAwBO,MAAML,WAC9BI,UAAUP,MAAM,CAAC,iBAAiB,EAClCS;QAED,GAAGC,SAAS;OAEZP;AAGP,EAAE"}

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

@@ -9,7 +9,7 @@ import styles from './TabbarItem.module.css';
 const warn = warnOnce('TabbarItem');
 /**
  * @see https://vkcom.github.io/VKUI/#/TabbarItem
- */ export const TabbarItem = ({ children , selected , indicator , text , href , Component =href ? 'a' : 'button' , disabled , className , getRootRef , ...restProps })=>{
+ */ export const TabbarItem = ({ children, selected, indicator, text, href, Component = href ? 'a' : 'button', disabled, className, getRootRef, ...restProps })=>{
     const platform = usePlatform();
     if (process.env.NODE_ENV === 'development') {
         const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];
@@ -22,7 +22,7 @@ const warn = warnOnce('TabbarItem');
         ref: getRootRef,
         disabled: disabled,
         href: href,
-        className: classNames(styles['TabbarItem'], platform === Platform.IOS && styles['TabbarItem--ios'], platform === Platform.ANDROID && styles['TabbarItem--android'], selected && styles['TabbarItem--selected'], !!text && styles['TabbarItem--text'], className)
+        className: classNames(styles['TabbarItem'], platform === Platform.IOS && styles['TabbarItem--ios'], platform === Platform.ANDROID && styles['TabbarItem--android'], selected && styles['TabbarItem--selected'], className)
     }, /*#__PURE__*/ React.createElement(Tappable, {
         role: "presentation",
         Component: "div",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  className,\n  getRootRef,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      disabled={disabled}\n      href={href}\n      className={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n        !!text && styles['TabbarItem--text'],\n        className,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","usePlatform","Platform","COMMON_WARNINGS","warnOnce","Tappable","Footnote","styles","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","getRootRef","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","ref","IOS","ANDROID","role","activeMode","activeEffectDelay","hasHover","div","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,0BAA0B;AAiB7C,MAAMC,OAAOJ,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMK,aAAa,CAAC,EACzBC,SAAQ,EACRC,SAAQ,EACRC,UAAS,EACTC,KAAI,EACJC,KAAI,EACJC,WAAYD,OAAO,MAAM,SAAQ,EACjCE,SAAQ,EACRC,UAAS,EACTC,WAAU,EACV,GAAGC,WACa;IAChB,MAAMC,WAAWnB;IAEjB,IAAIoB,QAAQC,IAAIC,aAAa,eAAe;QAC1C,MAAMC,oBAAoBX,QAAQM,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACK,mBAAmB;YACtBhB,KAAKL,gBAAgBsB,IAAI,CAACV,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,oBAACA;QACE,GAAGI,SAAS;QACbO,KAAKR;QACLF,UAAUA;QACVF,MAAMA;QACNG,WAAWlB,WACTQ,MAAM,CAAC,aAAa,EACpBa,aAAalB,SAASyB,OAAOpB,MAAM,CAAC,kBAAkB,EACtDa,aAAalB,SAAS0B,WAAWrB,MAAM,CAAC,sBAAsB,EAC9DI,YAAYJ,MAAM,CAAC,uBAAuB,EAC1C,CAAC,CAACM,QAAQN,MAAM,CAAC,mBAAmB,EACpCU;qBAGF,oBAACZ;QACCwB,MAAK;QACLd,WAAU;QACVC,UAAUA;QACVc,YACEV,aAAalB,SAASyB,MAAMpB,MAAM,CAAC,+BAA+B,GAAG;QAEvEwB,mBAAmBX,aAAalB,SAASyB,MAAM,IAAI;QACnDK,UAAU;QACVf,WAAWV,MAAM,CAAC,uBAAuB;sBAE3C,oBAAC0B;QAAIhB,WAAWV,MAAM,CAAC,iBAAiB;qBACtC,oBAAC0B;QAAIhB,WAAWV,MAAM,CAAC,mBAAmB;OACvCG,wBACD,oBAACuB;QAAIhB,WAAU;OACZjB,aAAaY,cAAcA,aAG/BC,sBACC,oBAACP;QAASS,WAAU;QAAME,WAAWV,MAAM,CAAC,mBAAmB;QAAE2B,QAAO;OACrErB;AAMb,EAAE"}
+{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  className,\n  getRootRef,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      disabled={disabled}\n      href={href}\n      className={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n        className,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","usePlatform","Platform","COMMON_WARNINGS","warnOnce","Tappable","Footnote","styles","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","getRootRef","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","ref","IOS","ANDROID","role","activeMode","activeEffectDelay","hasHover","div","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,0BAA0B;AAiB7C,MAAMC,OAAOJ,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMK,aAAa,CAAC,EACzBC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EACRC,SAAS,EACTC,UAAU,EACV,GAAGC,WACa;IAChB,MAAMC,WAAWnB;IAEjB,IAAIoB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBX,QAAQM,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACK,mBAAmB;YACtBhB,KAAKL,gBAAgBsB,IAAI,CAACV,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,oBAACA;QACE,GAAGI,SAAS;QACbO,KAAKR;QACLF,UAAUA;QACVF,MAAMA;QACNG,WAAWlB,WACTQ,MAAM,CAAC,aAAa,EACpBa,aAAalB,SAASyB,GAAG,IAAIpB,MAAM,CAAC,kBAAkB,EACtDa,aAAalB,SAAS0B,OAAO,IAAIrB,MAAM,CAAC,sBAAsB,EAC9DI,YAAYJ,MAAM,CAAC,uBAAuB,EAC1CU;qBAGF,oBAACZ;QACCwB,MAAK;QACLd,WAAU;QACVC,UAAUA;QACVc,YACEV,aAAalB,SAASyB,GAAG,GAAGpB,MAAM,CAAC,+BAA+B,GAAG;QAEvEwB,mBAAmBX,aAAalB,SAASyB,GAAG,GAAG,IAAI;QACnDK,UAAU;QACVf,WAAWV,MAAM,CAAC,uBAAuB;sBAE3C,oBAAC0B;QAAIhB,WAAWV,MAAM,CAAC,iBAAiB;qBACtC,oBAAC0B;QAAIhB,WAAWV,MAAM,CAAC,mBAAmB;OACvCG,wBACD,oBAACuB;QAAIhB,WAAU;OACZjB,aAAaY,cAAcA,aAG/BC,sBACC,oBAACP;QAASS,WAAU;QAAME,WAAWV,MAAM,CAAC,mBAAmB;QAAE2B,QAAO;OACrErB;AAMb,EAAE"}

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

@@ -12,9 +12,9 @@ export const TabsModeContext = /*#__PURE__*/ React.createContext({
 });
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabs
- */ export const Tabs = ({ children , mode ='default' , getRootRef , className , role ='tablist' , ...restProps })=>{
+ */ export const Tabs = ({ children, mode = 'default', getRootRef, className, role = 'tablist', ...restProps })=>{
     const platform = usePlatform();
-    const { document  } = useDOM();
+    const { document } = useDOM();
     const isTabFlow = role === 'tablist';
     const tabsRef = React.useRef(null);
     const withGaps = mode === 'accent' || mode === 'secondary';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: 'default',\n  withGaps: false,\n});\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  getRootRef,\n  className,\n  role = 'tablist',\n  ...restProps\n}: TabsProps) => {\n  const platform = usePlatform();\n  const { document } = useDOM();\n\n  const isTabFlow = role === 'tablist';\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const getTabEls = () => {\n    if (!tabsRef.current) {\n      return [];\n    }\n\n    return Array.from(\n      // eslint-disable-next-line no-restricted-properties\n      tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),\n    );\n  };\n\n  const handleDocumentKeydown = (event: KeyboardEvent) => {\n    if (!document || !tabsRef.current || !isTabFlow) {\n      return;\n    }\n\n    const key = pressedKey(event);\n\n    switch (key) {\n      case 'ArrowLeft':\n      case 'ArrowRight':\n      case 'End':\n      case 'Home': {\n        const tabEls = getTabEls();\n        const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);\n        if (currentFocusedElIndex === -1) {\n          return;\n        }\n\n        let nextIndex = 0;\n        if (key === 'Home') {\n          nextIndex = 0;\n        } else if (key === 'End') {\n          nextIndex = tabEls.length - 1;\n        } else {\n          const offset = key === 'ArrowRight' ? 1 : -1;\n          nextIndex = currentFocusedElIndex + offset;\n        }\n\n        const nextTabEl = tabEls[nextIndex];\n\n        if (nextTabEl) {\n          event.preventDefault();\n          nextTabEl.focus();\n        }\n\n        break;\n      }\n      /*\n       В JAWS и NVDA стрелка вниз активирует контент.\n       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.\n       https://inclusive-components.design/tabbed-interfaces/\n      */\n      case 'ArrowDown': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n\n        if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {\n          return;\n        }\n\n        const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');\n        if (!relatedContentElId) {\n          return;\n        }\n\n        // eslint-disable-next-line no-restricted-properties\n        const relatedContentEl = document.getElementById(relatedContentElId);\n        if (!relatedContentEl) {\n          return;\n        }\n\n        event.preventDefault();\n        relatedContentEl.focus();\n\n        break;\n      }\n      case 'Space':\n      case 'Enter': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n        if (currentFocusedEl) {\n          currentFocusedEl.click();\n        }\n      }\n    }\n  };\n\n  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Tabs'],\n        'vkuiInternalTabs',\n        platform === Platform.VKCOM && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles['Tabs--withGaps'], 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles['Tabs--mode-default'],\n        className,\n      )}\n      role={role}\n    >\n      <div className={styles['Tabs__in']} ref={tabsRef}>\n        <TabsModeContext.Provider value={{ mode, withGaps }}>{children}</TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","useGlobalEventListener","usePlatform","pressedKey","useDOM","Platform","styles","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","div","ref","VKCOM","Provider","value"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: 'default',\n  withGaps: false,\n});\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  getRootRef,\n  className,\n  role = 'tablist',\n  ...restProps\n}: TabsProps) => {\n  const platform = usePlatform();\n  const { document } = useDOM();\n\n  const isTabFlow = role === 'tablist';\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const getTabEls = () => {\n    if (!tabsRef.current) {\n      return [];\n    }\n\n    return Array.from(\n      // eslint-disable-next-line no-restricted-properties\n      tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),\n    );\n  };\n\n  const handleDocumentKeydown = (event: KeyboardEvent) => {\n    if (!document || !tabsRef.current || !isTabFlow) {\n      return;\n    }\n\n    const key = pressedKey(event);\n\n    switch (key) {\n      case 'ArrowLeft':\n      case 'ArrowRight':\n      case 'End':\n      case 'Home': {\n        const tabEls = getTabEls();\n        const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);\n        if (currentFocusedElIndex === -1) {\n          return;\n        }\n\n        let nextIndex = 0;\n        if (key === 'Home') {\n          nextIndex = 0;\n        } else if (key === 'End') {\n          nextIndex = tabEls.length - 1;\n        } else {\n          const offset = key === 'ArrowRight' ? 1 : -1;\n          nextIndex = currentFocusedElIndex + offset;\n        }\n\n        const nextTabEl = tabEls[nextIndex];\n\n        if (nextTabEl) {\n          event.preventDefault();\n          nextTabEl.focus();\n        }\n\n        break;\n      }\n      /*\n       В JAWS и NVDA стрелка вниз активирует контент.\n       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.\n       https://inclusive-components.design/tabbed-interfaces/\n      */\n      case 'ArrowDown': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n\n        if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {\n          return;\n        }\n\n        const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');\n        if (!relatedContentElId) {\n          return;\n        }\n\n        // eslint-disable-next-line no-restricted-properties\n        const relatedContentEl = document.getElementById(relatedContentElId);\n        if (!relatedContentEl) {\n          return;\n        }\n\n        event.preventDefault();\n        relatedContentEl.focus();\n\n        break;\n      }\n      case 'Space':\n      case 'Enter': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n        if (currentFocusedEl) {\n          currentFocusedEl.click();\n        }\n      }\n    }\n  };\n\n  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Tabs'],\n        'vkuiInternalTabs',\n        platform === Platform.VKCOM && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles['Tabs--withGaps'], 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles['Tabs--mode-default'],\n        className,\n      )}\n      role={role}\n    >\n      <div className={styles['Tabs__in']} ref={tabsRef}>\n        <TabsModeContext.Provider value={{ mode, withGaps }}>{children}</TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","useGlobalEventListener","usePlatform","pressedKey","useDOM","Platform","styles","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","div","ref","VKCOM","Provider","value"],"mappings":"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"}

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

@@ -16,9 +16,9 @@ const sizeYClassNames = {
 const warn = warnOnce('TabsItem');
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
- */ export const TabsItem = ({ before , children , status , after , selected =false , className , role ='tab' , tabIndex: tabIndexProp , ...restProps })=>{
-    const { sizeY ='none'  } = useAdaptivity();
-    const { mode , withGaps  } = React.useContext(TabsModeContext);
+ */ export const TabsItem = ({ before, children, status, after, selected = false, className, role = 'tab', tabIndex: tabIndexProp, ...restProps })=>{
+    const { sizeY = 'none' } = useAdaptivity();
+    const { mode, withGaps } = React.useContext(TabsModeContext);
     let statusComponent = null;
     const isTabFlow = role === 'tab';
     if (status) {