@vkontakte/vkui 6.1.2 → 6.2.1

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

@@ -1,196 +1,252 @@
 .Switch {
+  /* Switch__track */
+  --vkui_internal--Switch__track_shape: calc(var(--vkui_internal--Switch__track_width) / 2);
+  --vkui_internal--Switch__track_outline_width: 2px;
+  --vkui_internal--Switch__handle_shift_x: var(--vkui_internal--Switch__track_outline_width);
+  /* prettier-ignore */
+  --vkui_internal--Switch__handle_shift_y: calc(var(--vkui_internal--Switch__track_height) - var(--vkui_internal--Switch__handle_height) - var(--vkui_internal--Switch__track_outline_width));
+  /* prettier-ignore */
+  --vkui_internal--Switch__handle_scale: calc(var(--vkui_internal--Switch__handle_widthNoUnit--not-checked) / var(--vkui_internal--Switch__handle_heightNoUnit));
+
+  position: relative;
+  display: block;
+  border-radius: var(--vkui_internal--Switch__track_shape);
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  position: relative;
-  display: block;
   cursor: pointer;
-
-  /* Добавляем отступы, если пин больше трека */
-  padding: calc(
-    (var(--vkui--size_switch_pin--regular) - var(--vkui--size_switch_height--regular)) / 2
-  );
+  -webkit-tap-highlight-color: transparent;
 }
 
-.Switch--sizeY-compact {
-  padding: calc(
-    (var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2
-  );
+.Switch--disabled {
+  cursor: not-allowed;
+  opacity: var(--vkui_internal--Switch_disabled);
 }
 
-@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
-  .Switch--sizeY-none {
-    padding: calc(
-      (var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2
-    );
-  }
+.Switch--default {
+  --vkui_internal--Switch_disabled: 0.5;
+  /* Switch__track */
+  --vkui_internal--Switch__track_width: 52px;
+  --vkui_internal--Switch__track_height: 32px;
+  --vkui_internal--Switch__track_color: var(--vkui--color_background);
+  --vkui_internal--Switch__track_color_duration: 67ms;
+  /* prettier-ignore */
+  --vkui_internal--Switch__track_shadow: inset 0 0 0 var(--vkui_internal--Switch__track_outline_width) var(--vkui--color_field_border_alpha);
+
+  /* Switch__handle */
+  --vkui_internal--Switch__handle_width: 28px;
+  --vkui_internal--Switch__handle_widthNoUnit--checked: 24;
+  --vkui_internal--Switch__handle_widthNoUnit--not-checked: 16;
+  --vkui_internal--Switch__handle_height: 28px;
+  --vkui_internal--Switch__handle_heightNoUnit: 28;
+  --vkui_internal--Switch__handle_color: var(--vkui--color_icon_medium);
+  --vkui_internal--Switch__handle_color_duration: 67ms;
+  --vkui_internal--Switch__handle_scale_duration: 250ms;
+  --vkui_internal--Switch__handle_shift_x_duration: 300ms;
+  --vkui_internal--Switch__handle_shift_x_easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --vkui_internal--Switch__handle_shadow: none;
 }
 
-.Switch--disabled {
-  cursor: default;
+.Switch--default.Switch--sizeY-compact {
+  /* Switch__track */
+  --vkui_internal--Switch__track_width: 42px;
+  --vkui_internal--Switch__track_height: 26px;
+
+  /* Switch__handle */
+  --vkui_internal--Switch__handle_width: 22px;
+  --vkui_internal--Switch__handle_widthNoUnit--checked: 20;
+  --vkui_internal--Switch__handle_widthNoUnit--not-checked: 12;
+  --vkui_internal--Switch__handle_height: 22px;
+  --vkui_internal--Switch__handle_heightNoUnit: 22;
 }
 
-.Switch__pseudo {
-  position: relative;
-  display: block;
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -webkit-tap-highlight-color: transparent;
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .Switch--default.Switch--sizeY-none {
+    /* Switch__track */
+    --vkui_internal--Switch__track_width: 42px;
+    --vkui_internal--Switch__track_height: 26px;
+
+    /* Switch__handle */
+    --vkui_internal--Switch__handle_width: 22px;
+    --vkui_internal--Switch__handle_widthNoUnit--checked: 20;
+    --vkui_internal--Switch__handle_widthNoUnit--not-checked: 12;
+    --vkui_internal--Switch__handle_height: 22px;
+    --vkui_internal--Switch__handle_heightNoUnit: 22;
+  }
 }
 
-/**
- * Пин
- */
+.Switch--ios {
+  --vkui_internal--Switch_disabled: 0.7;
+  /* Switch__track */
+  --vkui_internal--Switch__track_width: 51px;
+  --vkui_internal--Switch__track_height: 31px;
+  --vkui_internal--Switch__track_color: var(--vkui--color_track_background);
+  --vkui_internal--Switch__track_color_duration: 200ms;
+  --vkui_internal--Switch__track_shadow: none;
+
+  /* Switch__handle */
+  --vkui_internal--Switch__handle_width: 27px;
+  --vkui_internal--Switch__handle_widthNoUnit--pressed: 27px;
+  --vkui_internal--Switch__handle_widthNoUnit--not-checked: 27px;
+  --vkui_internal--Switch__handle_height: 27px;
+  --vkui_internal--Switch__handle_heightNoUnit: 27;
+  --vkui_internal--Switch__handle_color: var(--vkui--color_icon_contrast);
+  --vkui_internal--Switch__handle_color_duration: 200ms;
+  --vkui_internal--Switch__handle_scale_duration: 200ms;
+  --vkui_internal--Switch__handle_shift_x_duration: 200ms;
+  --vkui_internal--Switch__handle_shift_x_easing: cubic-bezier(0.36, -0.24, 0.26, 1.32);
+  /* prettier-ignore */
+  --vkui_internal--Switch__handle_shadow:
+    0 3px 8px rgba(0, 0, 0, 0.15),
+    0 3px 1px rgba(0, 0, 0, 0.06),
+    inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
+}
 
-.Switch__pseudo::before {
-  position: absolute;
-  content: '';
-  border-radius: 50%;
-  box-sizing: border-box;
-  background: var(--vkui--color_icon_contrast_secondary);
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
-
-  /* Делаем пин по центру */
-  inset-block-start: calc(
-    (var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2
-  );
-  inset-inline-start: calc(
-    (var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2
-  );
-  inline-size: var(--vkui--size_switch_pin--regular);
-  block-size: var(--vkui--size_switch_pin--regular);
-}
-
-.Switch--sizeY-compact .Switch__pseudo::before {
-  inset-block-start: calc(
-    (var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2
-  );
-  inset-inline-start: calc(
-    (var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2
-  );
-  inline-size: var(--vkui--size_switch_pin--compact);
-  block-size: var(--vkui--size_switch_pin--compact);
+.Switch--ios.Switch--sizeY-compact {
+  /* Switch__track */
+  --vkui_internal--Switch__track_width: 47px;
+  --vkui_internal--Switch__track_height: 27px;
+
+  /* Switch__handle */
+  --vkui_internal--Switch__handle_width: 23px;
+  --vkui_internal--Switch__handle_widthNoUnit--pressed: 23px;
+  --vkui_internal--Switch__handle_widthNoUnit--not-checked: 23px;
+  --vkui_internal--Switch__handle_height: 23px;
+  --vkui_internal--Switch__handle_heightNoUnit: 23;
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
-  .Switch--sizeY-none .Switch__pseudo::before {
-    inset-block-start: calc(
-      (var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2
-    );
-    inset-inline-start: calc(
-      (var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2
-    );
-    inline-size: var(--vkui--size_switch_pin--compact);
-    block-size: var(--vkui--size_switch_pin--compact);
+  .Switch--ios.Switch--sizeY-none {
+    /* Switch__track */
+    --vkui_internal--Switch__track_width: 47px;
+    --vkui_internal--Switch__track_height: 27px;
+
+    /* Switch__handle */
+    --vkui_internal--Switch__handle_width: 23px;
+    --vkui_internal--Switch__handle_widthNoUnit--pressed: 23px;
+    --vkui_internal--Switch__handle_widthNoUnit--not-checked: 23px;
+    --vkui_internal--Switch__handle_height: 23px;
+    --vkui_internal--Switch__handle_heightNoUnit: 23;
   }
 }
 
-.Switch__self:checked + .Switch__pseudo::before {
-  background: var(--vkui--color_icon_accent);
-  transform: translateX(
-    calc(var(--vkui--size_switch_width--regular) - var(--vkui--size_switch_height--regular))
-  );
-}
-
-/**
- * Трек
- */
-
-.Switch__pseudo::after {
-  content: '';
+.Switch__inputFake {
   display: block;
-  background: var(--vkui--color_icon_tertiary_alpha);
-  border-radius: calc(var(--vkui--size_switch_width--regular) / 2);
-  inline-size: var(--vkui--size_switch_width--regular);
-  block-size: var(--vkui--size_switch_height--regular);
 }
 
-.Switch--sizeY-compact .Switch__pseudo::after {
-  border-radius: calc(var(--vkui--size_switch_width--compact) / 2);
-  inline-size: var(--vkui--size_switch_width--compact);
-  block-size: var(--vkui--size_switch_height--compact);
-}
+.Switch__inputNative:checked + .Switch__inputFake {
+  /* Switch__track */
+  --vkui_internal--Switch__track_color: var(--vkui--color_background_accent);
 
-@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
-  .Switch--sizeY-none .Switch__pseudo::after {
-    border-radius: calc(var(--vkui--size_switch_width--compact) / 2);
-    inline-size: var(--vkui--size_switch_width--compact);
-    block-size: var(--vkui--size_switch_height--compact);
-  }
+  /* Switch__handle */
+  /* prettier-ignore */
+  --vkui_internal--Switch__handle_shift_x: calc(var(--vkui_internal--Switch__track_width) - var(--vkui_internal--Switch__handle_width) - var(--vkui_internal--Switch__track_outline_width));
+  /* prettier-ignore */
+  --vkui_internal--Switch__handle_scale: calc(var(--vkui_internal--Switch__handle_widthNoUnit--checked) / var(--vkui_internal--Switch__handle_heightNoUnit));
+  --vkui_internal--Switch__handle_color: var(--vkui--color_icon_contrast);
 }
 
-.Switch__self:checked + .Switch__pseudo::after {
-  opacity: 0.48;
-  background: var(--vkui--color_icon_accent);
+.Switch--default:not(.Switch--disabled) .Switch__inputFake:active {
+  /* Switch__handle */
+  --vkui_internal--Switch__handle_scale: 1;
+  --vkui_internal--Switch__handle_shift_x_easing: cubic-bezier(0.2, 0, 0, 1);
 }
 
-.Switch--sizeY-compact .Switch__self:checked + .Switch__pseudo::before {
-  transform: translateX(
-    calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact))
-  );
+.Switch__track {
+  position: relative;
+  display: block;
+  inline-size: var(--vkui_internal--Switch__track_width);
+  block-size: var(--vkui_internal--Switch__track_height);
+  border-radius: var(--vkui_internal--Switch__track_shape);
+  background-color: var(--vkui_internal--Switch__track_color);
+  box-shadow: var(--vkui_internal--Switch__track_shadow);
+  transition: background-color var(--vkui_internal--Switch__track_color_duration) linear;
 }
 
-@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
-  .Switch--sizeY-none .Switch__self:checked + .Switch__pseudo::before {
-    transform: translateX(
-      calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact))
-    );
-  }
+.Switch__handle {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  inline-size: var(--vkui_internal--Switch__handle_width);
+  block-size: var(--vkui_internal--Switch__handle_height);
+  border-radius: 9999px;
+  /* prettier-ignore */
+  transform: translate(var(--vkui_internal--Switch__handle_shift_x), var(--vkui_internal--Switch__handle_shift_y));
+  /* prettier-ignore */
+  transition: transform var(--vkui_internal--Switch__handle_shift_x_duration) var(--vkui_internal--Switch__handle_shift_x_easing);
 }
 
-.Switch__self[disabled] + .Switch__pseudo {
-  opacity: var(--vkui--opacity_disable);
+.Switch__handle::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: var(--vkui_internal--Switch__handle_color);
+  box-shadow: var(--vkui_internal--Switch__handle_shadow);
+  transform: scale(var(--vkui_internal--Switch__handle_scale));
+  transition-property: transform, background-color;
+  transition-timing-function: var(--vkui_internal--Switch__handle_shift_x_easing), linear;
+  /* prettier-ignore */
+  transition-duration: var(--vkui_internal--Switch__handle_scale_duration), var(--vkui_internal--Switch__handle_color_duration);
 }
 
-/**
- * Пин
- */
+.Switch__handle--withRipple::before {
+  --vkui_internal--Switch__handleRipple_opacity: 0;
+  --vkui_internal--Switch__handleRipple_opacity_duration: 15ms;
+  --vkui_internal--Switch__handleRipple_color: var(--vkui--color_icon_medium);
+  --vkui_internal--Switch__handleRipple_color_duration: 15ms;
 
-.Switch--ios .Switch__pseudo::before {
-  background: var(--vkui_internal--white);
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06),
-    inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
+  content: '';
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  inline-size: 40px;
+  block-size: 40px;
+  border-radius: inherit;
+  background-color: var(--vkui_internal--Switch__handleRipple_color);
+  opacity: var(--vkui_internal--Switch__handleRipple_opacity);
+  transform: translate(-50%, -50%);
+  transition-property: opacity, background-color;
+  /* prettier-ignore */
+  transition-duration:
+    var(--vkui_internal--Switch__handleRipple_opacity_duration),
+    var(--vkui_internal--Switch__handleRipple_color_duration);
+  transition-timing-function: linear;
 }
 
-.Switch--ios .Switch__self:checked + .Switch__pseudo::before {
-  background: var(--vkui_internal--white);
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .Switch__handle--withRipple::before {
+    inline-size: 32px;
+    block-size: 32px;
+  }
 }
 
-/**
- * Трек
- */
+/* устройства с мышкой */
 
-.Switch--ios .Switch__pseudo::after {
-  background: var(--vkui--color_track_background);
+@media (hover: hover) and (pointer: fine) {
+  .Switch__inputFake:hover .Switch__handle--withRipple::before {
+    --vkui_internal--Switch__handleRipple_opacity: 0.08;
+  }
 }
 
-.Switch--ios .Switch__self:checked + .Switch__pseudo::after {
-  opacity: 1;
+.Switch__inputFake:active .Switch__handle--withRipple::before {
+  --vkui_internal--Switch__handleRipple_opacity: 0.12;
 }
 
-/**
- * [a11y]
- * add animation for browsers that support prefers-reduced-motion
- * so that users with vestibular motion disorders have no problem
- * navigating accessible vkui apps via keyboard
- */
-
-@media (prefers-reduced-motion: no-preference) {
-  .Switch__pseudo::after {
-    transition: background-color 0.1s ease;
-  }
+.Switch__inputNative:checked + .Switch__inputFake .Switch__handle--withRipple::before {
+  --vkui_internal--Switch__handleRipple_color: var(--vkui--color_background_accent);
+}
 
-  .Switch__pseudo::before {
-    transition: transform 0.1s ease;
-  }
+/* тач-устройства */
 
-  .Switch--ios .Switch__pseudo::after {
-    transition: background-color 0.2s ease;
+@media (hover: none) {
+  .Switch__handle--withRipple::before {
+    --vkui_internal--Switch__handleRipple_opacity_duration: 375ms;
   }
 
-  .Switch--ios .Switch__pseudo::before {
-    transition: transform 0.2s cubic-bezier(0.36, -0.24, 0.26, 1.32);
+  .Switch__inputFake:active .Switch__handle--withRipple::before {
+    --vkui_internal--Switch__handleRipple_opacity_duration: 105ms;
   }
 }
 

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 { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Флаг, который скрывает тень (Android) или границы (iOS)\n   */\n  plain?: 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 = ({ plain = false, mode, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === 'ios' && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, restProps.children),\n        !plain && styles['Tabbar--shadow'],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","usePlatform","RootComponent","styles","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","plain","mode","restProps","platform","baseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,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,EAAEC,QAAQ,KAAK,EAAEC,IAAI,EAAE,GAAGC,WAAwB;IACvE,MAAMC,WAAWZ;IAEjB,qBACE,KAACC;QACCY,eAAed,WACb,sBACAG,MAAM,CAAC,SAAS,EAChBU,aAAa,SAASV,MAAM,CAAC,cAAc,EAC3CC,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChD,CAACI,SAASP,MAAM,CAAC,iBAAiB;QAEnC,GAAGS,SAAS;;AAGnB,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 { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Флаг, который скрывает тень (Android) или границы (iOS)\n   */\n  plain?: 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 = ({ plain = false, mode, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === 'ios' && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, restProps.children),\n        !plain && styles['Tabbar--shadow'],\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","usePlatform","RootComponent","styles","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","plain","mode","restProps","platform","baseClassName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,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,EAAEC,QAAQ,KAAK,EAAEC,IAAI,EAAE,GAAGC,WAAwB;IACvE,MAAMC,WAAWZ;IAEjB,qBACE,KAACC;QACCY,eAAed,WACb,sBACAG,MAAM,CAAC,SAAS,EAChBU,aAAa,SAASV,MAAM,CAAC,cAAc,EAC3CC,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChD,CAACI,SAASP,MAAM,CAAC,iBAAiB;QAEnC,GAAGS,SAAS;;AAGnB,EAAE"}

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, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\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  ...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    <RootComponent\n      Component={Component}\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      baseClassName={classNames(\n        styles['TabbarItem'],\n        platform === 'ios' && styles['TabbarItem--ios'],\n        platform === 'android' && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        disabled={disabled}\n        activeMode={platform === 'ios' ? styles['TabbarItem__tappable--active'] : 'background'}\n        activeEffectDelay={platform === 'ios' ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n        onClick={noop}\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    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","usePlatform","COMMON_WARNINGS","warnOnce","RootComponent","Tappable","Footnote","styles","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","baseClassName","role","activeMode","activeEffectDelay","hasHover","className","onClick","div","weight"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,0BAA0B;AAiB7C,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,aAAa,CAAC,EACzBC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EACR,GAAGC,WACa;IAChB,MAAMC,WAAWjB;IAEjB,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBT,QAAQI,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACK,mBAAmB;YACtBd,KAAKN,gBAAgBqB,IAAI,CAACR,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,MAACX;QACCW,WAAWA;QACV,GAAGE,SAAS;QACbD,UAAUA;QACVF,MAAMA;QACNU,eAAe1B,WACbS,MAAM,CAAC,aAAa,EACpBW,aAAa,SAASX,MAAM,CAAC,kBAAkB,EAC/CW,aAAa,aAAaX,MAAM,CAAC,sBAAsB,EACvDI,YAAYJ,MAAM,CAAC,uBAAuB;;0BAG5C,KAACF;gBACCoB,MAAK;gBACLT,UAAUA;gBACVU,YAAYR,aAAa,QAAQX,MAAM,CAAC,+BAA+B,GAAG;gBAC1EoB,mBAAmBT,aAAa,QAAQ,IAAI;gBAC5CU,UAAU;gBACVC,WAAWtB,MAAM,CAAC,uBAAuB;gBACzCuB,SAAS9B;;0BAEX,MAAC+B;gBAAIF,WAAWtB,MAAM,CAAC,iBAAiB;;kCACtC,MAACwB;wBAAIF,WAAWtB,MAAM,CAAC,mBAAmB;;4BACvCG;0CACD,KAACqB;gCAAIF,WAAU;0CACZ9B,aAAaa,cAAcA;;;;oBAG/BC,sBACC,KAACP;wBAASS,WAAU;wBAAMc,WAAWtB,MAAM,CAAC,mBAAmB;wBAAEyB,QAAO;kCACrEnB;;;;;;AAMb,EAAE"}
+{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\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  ...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    <RootComponent\n      Component={Component}\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      baseClassName={classNames(\n        styles['TabbarItem'],\n        platform === 'ios' && styles['TabbarItem--ios'],\n        platform === 'android' && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        disabled={disabled}\n        activeMode={platform === 'ios' ? styles['TabbarItem__tappable--active'] : 'background'}\n        activeEffectDelay={platform === 'ios' ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n        onClick={noop}\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    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","usePlatform","COMMON_WARNINGS","warnOnce","RootComponent","Tappable","Footnote","styles","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","baseClassName","role","activeMode","activeEffectDelay","hasHover","className","onClick","div","weight"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,0BAA0B;AAiB7C,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,aAAa,CAAC,EACzBC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EACR,GAAGC,WACa;IAChB,MAAMC,WAAWjB;IAEjB,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBT,QAAQI,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACK,mBAAmB;YACtBd,KAAKN,gBAAgBqB,IAAI,CAACR,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,MAACX;QACCW,WAAWA;QACV,GAAGE,SAAS;QACbD,UAAUA;QACVF,MAAMA;QACNU,eAAe1B,WACbS,MAAM,CAAC,aAAa,EACpBW,aAAa,SAASX,MAAM,CAAC,kBAAkB,EAC/CW,aAAa,aAAaX,MAAM,CAAC,sBAAsB,EACvDI,YAAYJ,MAAM,CAAC,uBAAuB;;0BAG5C,KAACF;gBACCoB,MAAK;gBACLT,UAAUA;gBACVU,YAAYR,aAAa,QAAQX,MAAM,CAAC,+BAA+B,GAAG;gBAC1EoB,mBAAmBT,aAAa,QAAQ,IAAI;gBAC5CU,UAAU;gBACVC,WAAWtB,MAAM,CAAC,uBAAuB;gBACzCuB,SAAS9B;;0BAEX,MAAC+B;gBAAIF,WAAWtB,MAAM,CAAC,iBAAiB;;kCACtC,MAACwB;wBAAIF,WAAWtB,MAAM,CAAC,mBAAmB;;4BACvCG;0CACD,KAACqB;gCAAIF,WAAU;0CACZ9B,aAAaa,cAAcA;;;;oBAG/BC,sBACC,KAACP;wBAASS,WAAU;wBAAMc,WAAWtB,MAAM,CAAC,mBAAmB;wBAAEyB,QAAO;kCACrEnB;;;;;;AAMb,EAAE"}

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 { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n  /**\n   * Включает прокрутку контейнера до активной (`selected`) вкладки\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: 'default',\n  withGaps: false,\n  layoutFillMode: 'auto',\n  withScrollToSelectedTab: false,\n  scrollBehaviorToSelectedTab: 'nearest',\n});\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\n  ...restProps\n}: TabsProps) => {\n  const platform = usePlatform();\n  const { document } = useDOM();\n\n  const isTabFlow = role === 'tablist';\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const getTabEls = () => {\n    if (!tabsRef.current) {\n      return [];\n    }\n\n    return Array.from(\n      // eslint-disable-next-line no-restricted-properties\n      tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),\n    );\n  };\n\n  const handleDocumentKeydown = (event: KeyboardEvent) => {\n    if (!document || !tabsRef.current || !isTabFlow) {\n      return;\n    }\n\n    const key = pressedKey(event);\n\n    switch (key) {\n      case 'ArrowLeft':\n      case 'ArrowRight':\n      case 'End':\n      case 'Home': {\n        const tabEls = getTabEls();\n        const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);\n        if (currentFocusedElIndex === -1) {\n          return;\n        }\n\n        let nextIndex = 0;\n        if (key === 'Home') {\n          nextIndex = 0;\n        } else if (key === 'End') {\n          nextIndex = tabEls.length - 1;\n        } else {\n          const offset = key === 'ArrowRight' ? 1 : -1;\n          nextIndex = currentFocusedElIndex + offset;\n        }\n\n        const nextTabEl = tabEls[nextIndex];\n\n        if (nextTabEl) {\n          event.preventDefault();\n          nextTabEl.focus();\n        }\n\n        break;\n      }\n      /*\n       В JAWS и NVDA стрелка вниз активирует контент.\n       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.\n       https://inclusive-components.design/tabbed-interfaces/\n      */\n      case 'ArrowDown': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n\n        if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {\n          return;\n        }\n\n        const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');\n        if (!relatedContentElId) {\n          return;\n        }\n\n        // eslint-disable-next-line no-restricted-properties\n        const relatedContentEl = document.getElementById(relatedContentElId);\n        if (!relatedContentEl) {\n          return;\n        }\n\n        event.preventDefault();\n        relatedContentEl.focus();\n\n        break;\n      }\n      case 'Space':\n      case 'Enter': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n        if (currentFocusedEl) {\n          currentFocusedEl.click();\n        }\n      }\n    }\n  };\n\n  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Tabs'],\n        'vkuiInternalTabs',\n        platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles['Tabs--withGaps'], 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles['Tabs--mode-default'],\n      )}\n      role={role}\n    >\n      <div className={styles['Tabs__in']} ref={tabsRef}>\n        <TabsModeContext.Provider\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useGlobalEventListener","usePlatform","pressedKey","useDOM","RootComponent","styles","TabsModeContext","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab","Tabs","children","role","restProps","platform","document","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","capture","baseClassName","div","className","ref","Provider","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n  /**\n   * Включает прокрутку контейнера до активной (`selected`) вкладки\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: 'default',\n  withGaps: false,\n  layoutFillMode: 'auto',\n  withScrollToSelectedTab: false,\n  scrollBehaviorToSelectedTab: 'nearest',\n});\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\n  ...restProps\n}: TabsProps) => {\n  const platform = usePlatform();\n  const { document } = useDOM();\n\n  const isTabFlow = role === 'tablist';\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const getTabEls = () => {\n    if (!tabsRef.current) {\n      return [];\n    }\n\n    return Array.from(\n      // eslint-disable-next-line no-restricted-properties\n      tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),\n    );\n  };\n\n  const handleDocumentKeydown = (event: KeyboardEvent) => {\n    if (!document || !tabsRef.current || !isTabFlow) {\n      return;\n    }\n\n    const key = pressedKey(event);\n\n    switch (key) {\n      case 'ArrowLeft':\n      case 'ArrowRight':\n      case 'End':\n      case 'Home': {\n        const tabEls = getTabEls();\n        const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);\n        if (currentFocusedElIndex === -1) {\n          return;\n        }\n\n        let nextIndex = 0;\n        if (key === 'Home') {\n          nextIndex = 0;\n        } else if (key === 'End') {\n          nextIndex = tabEls.length - 1;\n        } else {\n          const offset = key === 'ArrowRight' ? 1 : -1;\n          nextIndex = currentFocusedElIndex + offset;\n        }\n\n        const nextTabEl = tabEls[nextIndex];\n\n        if (nextTabEl) {\n          event.preventDefault();\n          nextTabEl.focus();\n        }\n\n        break;\n      }\n      /*\n       В JAWS и NVDA стрелка вниз активирует контент.\n       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.\n       https://inclusive-components.design/tabbed-interfaces/\n      */\n      case 'ArrowDown': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n\n        if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {\n          return;\n        }\n\n        const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');\n        if (!relatedContentElId) {\n          return;\n        }\n\n        // eslint-disable-next-line no-restricted-properties\n        const relatedContentEl = document.getElementById(relatedContentElId);\n        if (!relatedContentEl) {\n          return;\n        }\n\n        event.preventDefault();\n        relatedContentEl.focus();\n\n        break;\n      }\n      case 'Space':\n      case 'Enter': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n        if (currentFocusedEl) {\n          currentFocusedEl.click();\n        }\n      }\n    }\n  };\n\n  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Tabs'],\n        'vkuiInternalTabs',\n        platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles['Tabs--withGaps'], 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles['Tabs--mode-default'],\n      )}\n      role={role}\n    >\n      <div className={styles['Tabs__in']} ref={tabsRef}>\n        <TabsModeContext.Provider\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useGlobalEventListener","usePlatform","pressedKey","useDOM","RootComponent","styles","TabsModeContext","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab","Tabs","children","role","restProps","platform","document","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","capture","baseClassName","div","className","ref","Provider","value"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles['TabsItem--sizeY-none'],\n  ['compact']: styles['TabsItem--sizeY-compact'],\n};\n\nconst stylesMode = {\n  default: styles['TabsItem--mode-default'],\n  accent: styles['TabsItem--mode-accent'],\n  secondary: styles['TabsItem--mode-secondary'],\n};\n\nconst fillModeClassNames = {\n  stretched: styles['TabsItem--stretched'],\n  shrinked: styles['TabsItem--shrinked'],\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableProps,\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles['TabsItem--hover'],\n  activeMode = '',\n  hovered,\n  activated,\n  hasHover,\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const {\n    mode,\n    withGaps,\n    layoutFillMode,\n    scrollBehaviorToSelectedTab,\n    withScrollToSelectedTab,\n  }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  const rootRef = useExternRef(getRootRef);\n\n  const prevSelected = usePrevious(selected);\n  const isInitialRender = prevSelected === undefined;\n  const shouldScrollToSelected =\n    withScrollToSelectedTab && !isInitialRender && prevSelected !== selected && selected;\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, shouldScrollToSelected, scrollBehaviorToSelectedTab],\n  );\n\n  return (\n    <Tappable\n      {...restProps}\n      getRootRef={rootRef}\n      className={classNames(\n        styles['TabsItem'],\n        mode && stylesMode[mode],\n        selected && styles['TabsItem--selected'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n        className,\n      )}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      hovered={hovered}\n      activated={activated}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","usePrevious","useDOM","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","styles","sizeYClassNames","none","stylesMode","default","accent","secondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","getRootRef","hoverMode","activeMode","hovered","activated","hasHover","hasActive","focusVisibleMode","restProps","sizeY","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","statusComponent","isTabFlow","Component","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelected","isInitialRender","shouldScrollToSelected","document","useEffect","scrollToSelectedItem","current","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","aria-selected","div","level","aria-hidden","data-selected"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles['TabsItem--sizeY-none'],\n  ['compact']: styles['TabsItem--sizeY-compact'],\n};\n\nconst stylesMode = {\n  default: styles['TabsItem--mode-default'],\n  accent: styles['TabsItem--mode-accent'],\n  secondary: styles['TabsItem--mode-secondary'],\n};\n\nconst fillModeClassNames = {\n  stretched: styles['TabsItem--stretched'],\n  shrinked: styles['TabsItem--shrinked'],\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableProps,\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles['TabsItem--hover'],\n  activeMode = '',\n  hovered,\n  activated,\n  hasHover,\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const {\n    mode,\n    withGaps,\n    layoutFillMode,\n    scrollBehaviorToSelectedTab,\n    withScrollToSelectedTab,\n  }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  const rootRef = useExternRef(getRootRef);\n\n  const prevSelected = usePrevious(selected);\n  const isInitialRender = prevSelected === undefined;\n  const shouldScrollToSelected =\n    withScrollToSelectedTab && !isInitialRender && prevSelected !== selected && selected;\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, shouldScrollToSelected, scrollBehaviorToSelectedTab],\n  );\n\n  return (\n    <Tappable\n      {...restProps}\n      getRootRef={rootRef}\n      className={classNames(\n        styles['TabsItem'],\n        mode && stylesMode[mode],\n        selected && styles['TabsItem--selected'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n        className,\n      )}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      hovered={hovered}\n      activated={activated}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","usePrevious","useDOM","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","styles","sizeYClassNames","none","stylesMode","default","accent","secondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","getRootRef","hoverMode","activeMode","hovered","activated","hasHover","hasActive","focusVisibleMode","restProps","sizeY","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","statusComponent","isTabFlow","Component","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelected","isInitialRender","shouldScrollToSelected","document","useEffect","scrollToSelectedItem","current","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","aria-selected","div","level","aria-hidden","data-selected"],"mappings":"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"}

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

@@ -69,11 +69,13 @@
 /* mode="accent" */
 
 .TabsItem--mode-accent {
-  transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
+  transition:
+    background-color 150ms ease-out,
+    box-shadow 150ms ease-out;
 }
 
 .TabsItem--selected.TabsItem--mode-accent {
-  background-color: var(--vkui--color_background_modal);
+  background-color: var(--vkui--color_background_contrast_themed);
   box-shadow: var(--vkui--elevation2);
 }
 

package/dist/cssm/components/Tappable/Ripple.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Ripple.d.ts","sourceRoot":"","sources":["../../../../src/components/Tappable/Ripple.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;GAGG;AACH,eAAO,MAAM,kBAAkB,eAAgB,MAAM,cAAc,OAAO,GAAG,SAAS,YAIrF,CAAC;AAEF,UAAU,IAAI;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;CACnB;AAKD;;GAEG;AACH,eAAO,MAAM,SAAS,eAAgB,OAAO,qBAAqB,OAAO,GAAG,SAAS;;;;CAkDpF,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,IAAI,EAAE,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,2BAAmC,WAAW,4CAkBhE,CAAC"}
+{"version":3,"file":"Ripple.d.ts","sourceRoot":"","sources":["../../../../src/components/Tappable/Ripple.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;GAGG;AACH,eAAO,MAAM,kBAAkB,eAAgB,MAAM,cAAc,OAAO,GAAG,SAAS,YAIrF,CAAC;AAEF,UAAU,IAAI;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;CACnB;AAKD;;GAEG;AACH,eAAO,MAAM,SAAS,eAAgB,OAAO,qBAAqB,OAAO,GAAG,SAAS;;;;CA2DpF,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,IAAI,EAAE,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,2BAAmC,WAAW,4CAkBhE,CAAC"}

package/dist/cssm/components/Tappable/Ripple.js

@@ -2,7 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames, hasMouse as hasPointerLib, noop } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
-import { useTimeout } from '../../hooks/useTimeout';
 import { getOffsetRect } from '../../lib/offset';
 import styles from './Tappable.module.css';
 /**
@@ -21,7 +20,16 @@ const WAVE_LIVE = 225;
     /**
    * Коллекция нажатий и таймеров задержки появления волны
    */ const pointerDelayTimers = React.useMemo(()=>new Map(), []);
-    const clearClicks = useTimeout(()=>setClicks([]), WAVE_LIVE);
+    React.useEffect(function setClearClicksTimeout() {
+        const clicksTimeoutId = clicks.length > 0 ? setTimeout(()=>setClicks([]), WAVE_LIVE) : null;
+        return function cancelClearClicksTimeout() {
+            if (clicksTimeoutId) {
+                clearTimeout(clicksTimeoutId);
+            }
+        };
+    }, [
+        clicks
+    ]);
     function addClick(x, y, pointerId) {
         const dateNow = Date.now();
         const filteredClicks = clicks.filter((click)=>click.id + WAVE_LIVE > dateNow);
@@ -34,7 +42,6 @@ const WAVE_LIVE = 225;
                 pointerId
             }
         ]);
-        clearClicks.set();
         pointerDelayTimers.delete(pointerId);
     }
     /**