@vkontakte/vkui 5.0.3 → 5.1.2

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

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _getPlatformClassName = require("../../helpers/getPlatformClassName");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _callMultiple = require("../../lib/callMultiple");
 var _usePlatform = require("../../hooks/usePlatform");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
@@ -35,17 +35,16 @@ var Switch = function Switch(_ref) {
     onBlur = _useFocusVisible.onBlur,
     onFocus = _useFocusVisible.onFocus;
   return /*#__PURE__*/React.createElement("label", {
-    className: (0, _classNames.classNamesString)("vkuiSwitch", (0, _getPlatformClassName.getPlatformClassName)("vkuiSwitch", platform), (0, _getSizeYClassName.getSizeYClassName)("vkuiSwitch", sizeY), restProps.disabled && "vkuiSwitch--disabled", focusVisible && "vkuiSwitch--focus-visible", className),
+    className: (0, _vkjs.classNames)("vkuiSwitch", (0, _getPlatformClassName.getPlatformClassName)("vkuiSwitch", platform), (0, _getSizeYClassName.getSizeYClassName)("vkuiSwitch", sizeY), restProps.disabled && "vkuiSwitch--disabled", focusVisible && "vkuiSwitch--focus-visible", className),
     style: style,
-    ref: getRootRef,
-    role: "presentation"
+    ref: getRootRef
   }, /*#__PURE__*/React.createElement(_VisuallyHiddenInput.VisuallyHiddenInput, (0, _extends2.default)({}, restProps, {
     type: "checkbox",
     className: "vkuiSwitch__self",
     onBlur: (0, _callMultiple.callMultiple)(onBlur, restProps.onBlur),
     onFocus: (0, _callMultiple.callMultiple)(onFocus, restProps.onFocus)
   })), /*#__PURE__*/React.createElement("span", {
-    role: "presentation",
+    "aria-hidden": true,
     className: "vkuiSwitch__pseudo"
   }), /*#__PURE__*/React.createElement(_FocusVisible.FocusVisible, {
     mode: "outside"

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["Switch","style","className","getRootRef","restProps","platform","usePlatform","useAdaptivity","sizeY","useFocusVisible","focusVisible","onBlur","onFocus","classNamesString","getPlatformClassName","getSizeYClassName","disabled","callMultiple"],"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { getPlatformClassName } from \"../../helpers/getPlatformClassName\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { callMultiple } from \"../../lib/callMultiple\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from \"../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { useFocusVisible } from \"../../hooks/useFocusVisible\";\nimport { FocusVisible } from \"../FocusVisible/FocusVisible\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./Switch.module.css\";\n\nexport interface SwitchProps\n  extends VisuallyHiddenInputProps,\n    HasRootRef<HTMLLabelElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({\n  style,\n  className,\n  getRootRef,\n  ...restProps\n}: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNamesString(\n        styles[\"Switch\"],\n        getPlatformClassName(styles[\"Switch\"], platform),\n        getSizeYClassName(styles[\"Switch\"], sizeY),\n        restProps.disabled && styles[\"Switch--disabled\"],\n        focusVisible && styles[\"Switch--focus-visible\"],\n        className\n      )}\n      style={style}\n      ref={getRootRef}\n      role=\"presentation\"\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"checkbox\"\n        className={styles[\"Switch__self\"]}\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span role=\"presentation\" className={styles[\"Switch__pseudo\"]} />\n      <FocusVisible mode=\"outside\" />\n    </label>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AAIA;AACA;AACA;AAAoE;AAOpE;AACA;AACA;AACO,IAAMA,MAAM,GAAG,SAATA,MAAM,OAKA;EAAA,IAJjBC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EACb,uBAA0C,IAAAC,iCAAe,GAAE;IAAnDC,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EAErC,oBACE;IACE,SAAS,EAAE,IAAAC,4BAAgB,gBAEzB,IAAAC,0CAAoB,gBAAmBT,QAAQ,CAAC,EAChD,IAAAU,oCAAiB,gBAAmBP,KAAK,CAAC,EAC1CJ,SAAS,CAACY,QAAQ,0BAA8B,EAChDN,YAAY,+BAAmC,EAC/CR,SAAS,CACT;IACF,KAAK,EAAED,KAAM;IACb,GAAG,EAAEE,UAAW;IAChB,IAAI,EAAC;EAAc,gBAEnB,oBAAC,wCAAmB,6BACdC,SAAS;IACb,IAAI,EAAC,UAAU;IACf,SAAS,oBAAyB;IAClC,MAAM,EAAE,IAAAa,0BAAY,EAACN,MAAM,EAAEP,SAAS,CAACO,MAAM,CAAE;IAC/C,OAAO,EAAE,IAAAM,0BAAY,EAACL,OAAO,EAAER,SAAS,CAACQ,OAAO;EAAE,GAClD,eACF;IAAM,IAAI,EAAC,cAAc;IAAC,SAAS;EAA2B,EAAG,eACjE,oBAAC,0BAAY;IAAC,IAAI,EAAC;EAAS,EAAG,CACzB;AAEZ,CAAC;AAAC"}
+{"version":3,"file":"Switch.js","names":["Switch","style","className","getRootRef","restProps","platform","usePlatform","useAdaptivity","sizeY","useFocusVisible","focusVisible","onBlur","onFocus","classNames","getPlatformClassName","getSizeYClassName","disabled","callMultiple"],"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { classNames } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRootRef } from '../../types';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './Switch.module.css';\n\nexport interface SwitchProps extends VisuallyHiddenInputProps, HasRootRef<HTMLLabelElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({ style, className, getRootRef, ...restProps }: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        getPlatformClassName(styles['Switch'], platform),\n        getSizeYClassName(styles['Switch'], sizeY),\n        restProps.disabled && styles['Switch--disabled'],\n        focusVisible && styles['Switch--focus-visible'],\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"checkbox\"\n        className={styles['Switch__self']}\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span aria-hidden className={styles['Switch__pseudo']} />\n      <FocusVisible mode=\"outside\" />\n    </label>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AACA;AAIA;AACA;AACA;AAAoE;AAKpE;AACA;AACA;AACO,IAAMA,MAAM,GAAG,SAATA,MAAM,OAAoE;EAAA,IAA9DC,KAAK,QAALA,KAAK;IAAEC,SAAS,QAATA,SAAS;IAAEC,UAAU,QAAVA,UAAU;IAAKC,SAAS;EACjE,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EACb,uBAA0C,IAAAC,iCAAe,GAAE;IAAnDC,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EAErC,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,gBAEnB,IAAAC,0CAAoB,gBAAmBT,QAAQ,CAAC,EAChD,IAAAU,oCAAiB,gBAAmBP,KAAK,CAAC,EAC1CJ,SAAS,CAACY,QAAQ,0BAA8B,EAChDN,YAAY,+BAAmC,EAC/CR,SAAS,CACT;IACF,KAAK,EAAED,KAAM;IACb,GAAG,EAAEE;EAAW,gBAEhB,oBAAC,wCAAmB,6BACdC,SAAS;IACb,IAAI,EAAC,UAAU;IACf,SAAS,oBAAyB;IAClC,MAAM,EAAE,IAAAa,0BAAY,EAACN,MAAM,EAAEP,SAAS,CAACO,MAAM,CAAE;IAC/C,OAAO,EAAE,IAAAM,0BAAY,EAACL,OAAO,EAAER,SAAS,CAACQ,OAAO;EAAE,GAClD,eACF;IAAM,mBAAW;IAAC,SAAS;EAA2B,EAAG,eACzD,oBAAC,0BAAY;IAAC,IAAI,EAAC;EAAS,EAAG,CACzB;AAEZ,CAAC;AAAC"}

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)
@@ -7,7 +7,7 @@ export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Задает расположение элементов (вертикальное/горизонтальное)
      */
-    mode?: "vertical" | "horizontal" | "auto";
+    mode?: 'vertical' | 'horizontal' | 'auto';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabbar

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

@@ -9,18 +9,18 @@ exports.Tabbar = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
 var _excluded = ["children", "shadow", "mode", "className"];
 var getItemsLayoutClassName = function getItemsLayoutClassName(itemsLayout, children) {
   switch (itemsLayout) {
-    case "horizontal":
+    case 'horizontal':
       return "vkuiTabbar--layout-horizontal";
-    case "vertical":
+    case 'vertical':
       return "vkuiTabbar--layout-vertical";
     default:
-      return React.Children.count(children) > 2 ? getItemsLayoutClassName("vertical", []) : getItemsLayoutClassName("horizontal", []);
+      return React.Children.count(children) > 2 ? getItemsLayoutClassName('vertical', []) : getItemsLayoutClassName('horizontal', []);
   }
 };
 
@@ -36,7 +36,7 @@ var Tabbar = function Tabbar(_ref) {
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
-    className: (0, _classNames.classNamesString)("vkuiTabbar", platform === _platform.Platform.IOS && "vkuiTabbar--ios", getItemsLayoutClassName(mode, children), shadow && "vkuiTabbar--shadow", className)
+    className: (0, _vkjs.classNames)("vkuiTabbar", platform === _platform.Platform.IOS && "vkuiTabbar--ios", getItemsLayoutClassName(mode, children), shadow && "vkuiTabbar--shadow", className)
   }, restProps), /*#__PURE__*/React.createElement("div", {
     className: "vkuiTabbar__in"
   }, children));

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

@@ -1 +1 @@
-{"version":3,"file":"Tabbar.js","names":["getItemsLayoutClassName","itemsLayout","children","React","Children","count","Tabbar","shadow","mode","className","restProps","platform","usePlatform","classNamesString","Platform","IOS"],"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\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 styles[\"Tabbar--layout-horizontal\"];\n    case \"vertical\":\n      return styles[\"Tabbar--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 = ({\n  children,\n  shadow = true,\n  mode,\n  className,\n  ...restProps\n}: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      className={classNamesString(\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      <div className={styles[\"Tabbar__in\"]}>{children}</div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAA8C;AAc9C,IAAMA,uBAAuB,GAAG,SAA1BA,uBAAuB,CAC3BC,WAAgC,EAChCC,QAAiC,EACtB;EACX,QAAQD,WAAW;IACjB,KAAK,YAAY;MACf;IACF,KAAK,UAAU;MACb;IACF;MACE,OAAOE,KAAK,CAACC,QAAQ,CAACC,KAAK,CAACH,QAAQ,CAAC,GAAG,CAAC,GACrCF,uBAAuB,CAAC,UAAU,EAAE,EAAE,CAAC,GACvCA,uBAAuB,CAAC,YAAY,EAAE,EAAE,CAAC;EAAC;AAEpD,CAAC;;AAED;AACA;AACA;AACO,IAAMM,MAAM,GAAG,SAATA,MAAM,OAMA;EAAA,IALjBJ,QAAQ,QAARA,QAAQ;IAAA,mBACRK,MAAM;IAANA,MAAM,4BAAG,IAAI;IACbC,IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,oBACE;IACE,SAAS,EAAE,IAAAC,4BAAgB,gBAEzBF,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,qBAAyB,EAClDf,uBAAuB,CAACQ,IAAI,EAAEN,QAAQ,CAAC,EACvCK,MAAM,wBAA4B,EAClCE,SAAS;EACT,GACEC,SAAS,gBAEb;IAAK,SAAS;EAAuB,GAAER,QAAQ,CAAO,CAClD;AAEV,CAAC;AAAC"}
+{"version":3,"file":"Tabbar.js","names":["getItemsLayoutClassName","itemsLayout","children","React","Children","count","Tabbar","shadow","mode","className","restProps","platform","usePlatform","classNames","Platform","IOS"],"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 styles['Tabbar--layout-horizontal'];\n    case 'vertical':\n      return styles['Tabbar--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        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      <div className={styles['Tabbar__in']}>{children}</div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAA8C;AAc9C,IAAMA,uBAAuB,GAAG,SAA1BA,uBAAuB,CAC3BC,WAAgC,EAChCC,QAAiC,EACtB;EACX,QAAQD,WAAW;IACjB,KAAK,YAAY;MACf;IACF,KAAK,UAAU;MACb;IACF;MACE,OAAOE,KAAK,CAACC,QAAQ,CAACC,KAAK,CAACH,QAAQ,CAAC,GAAG,CAAC,GACrCF,uBAAuB,CAAC,UAAU,EAAE,EAAE,CAAC,GACvCA,uBAAuB,CAAC,YAAY,EAAE,EAAE,CAAC;EAAC;AAEpD,CAAC;;AAED;AACA;AACA;AACO,IAAMM,MAAM,GAAG,SAATA,MAAM,OAAgF;EAAA,IAA1EJ,QAAQ,QAARA,QAAQ;IAAA,mBAAEK,MAAM;IAANA,MAAM,4BAAG,IAAI;IAAEC,IAAI,QAAJA,IAAI;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAC7E,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,oBACE;IACE,SAAS,EAAE,IAAAC,gBAAU,gBAEnBF,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,qBAAyB,EAClDf,uBAAuB,CAACQ,IAAI,EAAEN,QAAQ,CAAC,EACvCK,MAAM,wBAA4B,EAClCE,SAAS;EACT,GACEC,SAAS,gBAEb;IAAK,SAAS;EAAuB,GAAER,QAAQ,CAAO,CAClD;AAEV,CAAC;AAAC"}

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasComponent, HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasComponent, HasRootRef } from '../../types';
 export interface TabbarItemProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
     selected?: boolean;
     /**

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

@@ -9,9 +9,8 @@ exports.TabbarItem = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../hooks/usePlatform");
-var _utils = require("../../lib/utils");
 var _Tappable = require("../Tappable/Tappable");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var _platform = require("../../lib/platform");
@@ -26,7 +25,7 @@ var TabbarItem = function TabbarItem(_ref) {
     text = _ref.text,
     href = _ref.href,
     _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? href ? "a" : "button" : _ref$Component,
+    Component = _ref$Component === void 0 ? href ? 'a' : 'button' : _ref$Component,
     disabled = _ref.disabled,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -34,12 +33,12 @@ var TabbarItem = function TabbarItem(_ref) {
   return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, restProps, {
     disabled: disabled,
     href: href,
-    className: (0, _classNames.classNamesString)("vkuiTabbarItem", platform === _platform.Platform.IOS && "vkuiTabbarItem--ios", platform === _platform.Platform.ANDROID && "vkuiTabbarItem--android", selected && "vkuiTabbarItem--selected", !!text && "vkuiTabbarItem--text", className)
+    className: (0, _vkjs.classNames)("vkuiTabbarItem", platform === _platform.Platform.IOS && "vkuiTabbarItem--ios", platform === _platform.Platform.ANDROID && "vkuiTabbarItem--android", selected && "vkuiTabbarItem--selected", !!text && "vkuiTabbarItem--text", className)
   }), /*#__PURE__*/React.createElement(_Tappable.Tappable, {
     role: "presentation",
     Component: "div",
     disabled: disabled,
-    activeMode: platform === _platform.Platform.IOS ? "vkuiTabbarItem__tappable--active" : "background",
+    activeMode: platform === _platform.Platform.IOS ? "vkuiTabbarItem__tappable--active" : 'background',
     activeEffectDelay: platform === _platform.Platform.IOS ? 0 : 300,
     hasHover: false,
     className: "vkuiTabbarItem__tappable"
@@ -49,7 +48,7 @@ var TabbarItem = function TabbarItem(_ref) {
     className: "vkuiTabbarItem__icon"
   }, children, /*#__PURE__*/React.createElement("div", {
     className: "vkuiTabbarItem__label"
-  }, (0, _utils.hasReactNode)(indicator) && indicator)), text && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
+  }, (0, _vkjs.hasReactNode)(indicator) && indicator)), text && /*#__PURE__*/React.createElement(_Footnote.Footnote, {
     Component: "div",
     className: "vkuiTabbarItem__text",
     weight: "2"

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

@@ -1 +1 @@
-{"version":3,"file":"TabbarItem.js","names":["TabbarItem","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","usePlatform","classNamesString","Platform","IOS","ANDROID","hasReactNode"],"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Platform } from \"../../lib/platform\";\nimport { HasComponent, HasRootRef } from \"../../types\";\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\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? \"a\" : \"button\",\n  disabled,\n  className,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  return (\n    <Component\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      className={classNamesString(\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\n            ? styles[\"TabbarItem__tappable--active\"]\n            : \"background\"\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles[\"TabbarItem__tappable\"]}\n      />\n      <div className={styles[\"TabbarItem__in\"]}>\n        <div className={styles[\"TabbarItem__icon\"]}>\n          {children}\n          <div className={styles[\"TabbarItem__label\"]}>\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {text && (\n          <Footnote\n            Component=\"div\"\n            className={styles[\"TabbarItem__text\"]}\n            weight=\"2\"\n          >\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAA8C;AAmB9C;AACA;AACA;AACO,IAAMA,UAAU,GAAG,SAAbA,UAAU,OAUA;EAAA,IATrBC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,sBACJC,SAAS;IAATA,SAAS,+BAAGD,IAAI,GAAG,GAAG,GAAG,QAAQ;IACjCE,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,oBACE,oBAAC,SAAS,6BACJF,SAAS;IACb,QAAQ,EAAEF,QAAS;IACnB,IAAI,EAAEF,IAAK;IACX,SAAS,EAAE,IAAAO,4BAAgB,oBAEzBF,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,yBAA6B,EACtDJ,QAAQ,KAAKG,kBAAQ,CAACE,OAAO,6BAAiC,EAC9Db,QAAQ,8BAAkC,EAC1C,CAAC,CAACE,IAAI,0BAA8B,EACpCI,SAAS;EACT,iBAEF,oBAAC,kBAAQ;IACP,IAAI,EAAC,cAAc;IACnB,SAAS,EAAC,KAAK;IACf,QAAQ,EAAED,QAAS;IACnB,UAAU,EACRG,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,wCAErB,YACL;IACD,iBAAiB,EAAEJ,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,GAAG,CAAC,GAAG,GAAI;IACvD,QAAQ,EAAE,KAAM;IAChB,SAAS;EAAiC,EAC1C,eACF;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA6B,GACxCb,QAAQ,eACT;IAAK,SAAS;EAA8B,GACzC,IAAAe,mBAAY,EAACb,SAAS,CAAC,IAAIA,SAAS,CACjC,CACF,EACLC,IAAI,iBACH,oBAAC,kBAAQ;IACP,SAAS,EAAC,KAAK;IACf,SAAS,wBAA6B;IACtC,MAAM,EAAC;EAAG,GAETA,IAAI,CAER,CACG,CACI;AAEhB,CAAC;AAAC"}
+{"version":3,"file":"TabbarItem.js","names":["TabbarItem","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","usePlatform","classNames","Platform","IOS","ANDROID","hasReactNode"],"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport 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\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  className,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  return (\n    <Component\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      className={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n        !!text && styles['TabbarItem--text'],\n        className,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className={styles['TabbarItem__label']}>{hasReactNode(indicator) && indicator}</div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAA8C;AAmB9C;AACA;AACA;AACO,IAAMA,UAAU,GAAG,SAAbA,UAAU,OAUA;EAAA,IATrBC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,sBACJC,SAAS;IAATA,SAAS,+BAAGD,IAAI,GAAG,GAAG,GAAG,QAAQ;IACjCE,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,oBACE,oBAAC,SAAS,6BACJF,SAAS;IACb,QAAQ,EAAEF,QAAS;IACnB,IAAI,EAAEF,IAAK;IACX,SAAS,EAAE,IAAAO,gBAAU,oBAEnBF,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,yBAA6B,EACtDJ,QAAQ,KAAKG,kBAAQ,CAACE,OAAO,6BAAiC,EAC9Db,QAAQ,8BAAkC,EAC1C,CAAC,CAACE,IAAI,0BAA8B,EACpCI,SAAS;EACT,iBAEF,oBAAC,kBAAQ;IACP,IAAI,EAAC,cAAc;IACnB,SAAS,EAAC,KAAK;IACf,QAAQ,EAAED,QAAS;IACnB,UAAU,EACRG,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,wCAA4C,YACtE;IACD,iBAAiB,EAAEJ,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,GAAG,CAAC,GAAG,GAAI;IACvD,QAAQ,EAAE,KAAM;IAChB,SAAS;EAAiC,EAC1C,eACF;IAAK,SAAS;EAA2B,gBACvC;IAAK,SAAS;EAA6B,GACxCb,QAAQ,eACT;IAAK,SAAS;EAA8B,GAAE,IAAAe,kBAAY,EAACb,SAAS,CAAC,IAAIA,SAAS,CAAO,CACrF,EACLC,IAAI,iBACH,oBAAC,kBAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS,wBAA6B;IAAC,MAAM,EAAC;EAAG,GACxEA,IAAI,CAER,CACG,CACI;AAEhB,CAAC;AAAC"}

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

@@ -1,10 +1,10 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
 export interface TabsProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
-    mode?: "default" | "accent" | "secondary";
+    mode?: 'default' | 'accent' | 'secondary';
 }
 export interface TabsContextProps {
-    mode: TabsProps["mode"];
+    mode: TabsProps['mode'];
     withGaps: boolean;
 }
 export declare const TabsModeContext: React.Context<TabsContextProps>;

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

@@ -9,17 +9,20 @@ exports.TabsModeContext = exports.Tabs = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
 var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 var _dom = require("../../lib/dom");
 var _accessibility = require("../../lib/accessibility");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-var _getSizeXClassName = require("../../helpers/getSizeXClassName");
 var _excluded = ["children", "mode", "getRootRef", "className", "role"];
+var modeClassNames = {
+  default: "vkuiTabs--mode-default",
+  accent: "vkuiTabs--mode-accent",
+  secondary: "vkuiTabs--mode-secondary"
+};
 var TabsModeContext = /*#__PURE__*/React.createContext({
-  mode: "default",
+  mode: 'default',
   withGaps: false
 });
 
@@ -30,27 +33,25 @@ exports.TabsModeContext = TabsModeContext;
 var Tabs = function Tabs(_ref) {
   var children = _ref.children,
     _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "default" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'default' : _ref$mode,
     getRootRef = _ref.getRootRef,
     className = _ref.className,
     _ref$role = _ref.role,
-    role = _ref$role === void 0 ? "tablist" : _ref$role,
+    role = _ref$role === void 0 ? 'tablist' : _ref$role,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
-  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeX = _useAdaptivity.sizeX;
   var _useDOM = (0, _dom.useDOM)(),
     document = _useDOM.document;
-  var isTabFlow = role === "tablist";
+  var isTabFlow = role === 'tablist';
   var tabsRef = React.useRef(null);
-  var withGaps = mode === "accent" || mode === "secondary";
+  var withGaps = mode === 'accent' || mode === 'secondary';
   var getTabEls = function getTabEls() {
     if (!tabsRef.current) {
       return [];
     }
     return Array.from(
     // eslint-disable-next-line no-restricted-properties
-    tabsRef.current.querySelectorAll("[role=tab]:not([disabled])"));
+    tabsRef.current.querySelectorAll('[role=tab]:not([disabled])'));
   };
   var handleDocumentKeydown = function handleDocumentKeydown(event) {
     if (!document || !tabsRef.current || !isTabFlow) {
@@ -58,10 +59,10 @@ var Tabs = function Tabs(_ref) {
     }
     var key = (0, _accessibility.pressedKey)(event);
     switch (key) {
-      case "ArrowLeft":
-      case "ArrowRight":
-      case "End":
-      case "Home":
+      case 'ArrowLeft':
+      case 'ArrowRight':
+      case 'End':
+      case 'Home':
         {
           var tabEls = getTabEls();
           var currentFocusedElIndex = tabEls.findIndex(function (el) {
@@ -71,12 +72,12 @@ var Tabs = function Tabs(_ref) {
             return;
           }
           var nextIndex = 0;
-          if (key === "Home") {
+          if (key === 'Home') {
             nextIndex = 0;
-          } else if (key === "End") {
+          } else if (key === 'End') {
             nextIndex = tabEls.length - 1;
           } else {
-            var offset = key === "ArrowRight" ? 1 : -1;
+            var offset = key === 'ArrowRight' ? 1 : -1;
             nextIndex = currentFocusedElIndex + offset;
           }
           var nextTabEl = tabEls[nextIndex];
@@ -91,16 +92,16 @@ var Tabs = function Tabs(_ref) {
        Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.
        https://inclusive-components.design/tabbed-interfaces/
       */
-      case "ArrowDown":
+      case 'ArrowDown':
         {
           var _tabEls = getTabEls();
           var currentFocusedEl = _tabEls.find(function (el) {
             return document.activeElement === el;
           });
-          if (!currentFocusedEl || currentFocusedEl.getAttribute("aria-selected") !== "true") {
+          if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {
             return;
           }
-          var relatedContentElId = currentFocusedEl.getAttribute("aria-controls");
+          var relatedContentElId = currentFocusedEl.getAttribute('aria-controls');
           if (!relatedContentElId) {
             return;
           }
@@ -114,8 +115,8 @@ var Tabs = function Tabs(_ref) {
           relatedContentEl.focus();
           break;
         }
-      case "Space":
-      case "Enter":
+      case 'Space':
+      case 'Enter':
         {
           var _tabEls2 = getTabEls();
           var _currentFocusedEl = _tabEls2.find(function (el) {
@@ -127,12 +128,12 @@ var Tabs = function Tabs(_ref) {
         }
     }
   };
-  (0, _useGlobalEventListener.useGlobalEventListener)(document, "keydown", handleDocumentKeydown, {
+  (0, _useGlobalEventListener.useGlobalEventListener)(document, 'keydown', handleDocumentKeydown, {
     capture: true
   });
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
     ref: getRootRef,
-    className: (0, _classNames.classNamesString)("vkuiTabs", platform === _platform.Platform.VKCOM && styles["Tabs--".concat(platform)], (0, _getSizeXClassName.getSizeXClassName)("vkuiTabs", sizeX), withGaps && "vkuiTabs--withGaps", styles["Tabs--mode-".concat(mode)], className),
+    className: (0, _vkjs.classNames)("vkuiTabs", platform === _platform.Platform.VKCOM && "vkuiTabs--vkcom", withGaps && "vkuiTabs--withGaps", modeClassNames[mode], className),
     role: role
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiTabs__in",
@@ -145,14 +146,4 @@ var Tabs = function Tabs(_ref) {
   }, children)));
 };
 exports.Tabs = Tabs;
-var styles = {
-  "Tabs--withGaps": "vkuiTabs--withGaps",
-  "Tabs--mode-default": "vkuiTabs--mode-default",
-  "Tabs--buttons": "vkuiTabs--buttons",
-  "Tabs--sizeX-compact": "vkuiTabs--sizeX-compact",
-  "Tabs--sizeX-none": "vkuiTabs--sizeX-none",
-  "Tabs--mode-accent": "vkuiTabs--mode-accent",
-  "Tabs--mode-secondary": "vkuiTabs--mode-secondary",
-  "Tabs--vkcom": "vkuiTabs--vkcom"
-};
 //# sourceMappingURL=Tabs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["TabsModeContext","React","createContext","mode","withGaps","Tabs","children","getRootRef","className","role","restProps","platform","usePlatform","useAdaptivity","sizeX","useDOM","document","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","pressedKey","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","useGlobalEventListener","capture","classNamesString","Platform","VKCOM","styles","getSizeXClassName"],"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { useDOM } from \"../../lib/dom\";\nimport { pressedKey } from \"../../lib/accessibility\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\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 { sizeX } = useAdaptivity();\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>(\n        \"[role=tab]:not([disabled])\"\n      )\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(\n          (el) => document.activeElement === el\n        );\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(\n          (el) => document.activeElement === el\n        );\n\n        if (\n          !currentFocusedEl ||\n          currentFocusedEl.getAttribute(\"aria-selected\") !== \"true\"\n        ) {\n          return;\n        }\n\n        const relatedContentElId =\n          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(\n          (el) => document.activeElement === el\n        );\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={classNamesString(\n        styles[\"Tabs\"],\n        platform === Platform.VKCOM && styles[`Tabs--${platform}`],\n        getSizeXClassName(styles[\"Tabs\"], sizeX),\n        withGaps && styles[\"Tabs--withGaps\"],\n        styles[`Tabs--mode-${mode}`],\n        className\n      )}\n      role={role}\n    >\n      <div className={styles[\"Tabs__in\"]} ref={tabsRef}>\n        <TabsModeContext.Provider value={{ mode, withGaps }}>\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoE;AAc7D,IAAMA,eAAe,gBAAGC,KAAK,CAACC,aAAa,CAAmB;EACnEC,IAAI,EAAE,SAAS;EACfC,QAAQ,EAAE;AACZ,CAAC,CAAC;;AAEF;AACA;AACA;AAFA;AAGO,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAOA;EAAA,IANfC,QAAQ,QAARA,QAAQ;IAAA,iBACRH,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBI,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IAAA,iBACTC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IACbC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EACb,cAAqB,IAAAC,WAAM,GAAE;IAArBC,QAAQ,WAARA,QAAQ;EAEhB,IAAMC,SAAS,GAAGR,IAAI,KAAK,SAAS;EAEpC,IAAMS,OAAO,GAAGjB,KAAK,CAACkB,MAAM,CAAiB,IAAI,CAAC;EAElD,IAAMf,QAAQ,GAAGD,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,WAAW;EAE1D,IAAMiB,SAAS,GAAG,SAAZA,SAAS,GAAS;IACtB,IAAI,CAACF,OAAO,CAACG,OAAO,EAAE;MACpB,OAAO,EAAE;IACX;IAEA,OAAOC,KAAK,CAACC,IAAI;IACf;IACAL,OAAO,CAACG,OAAO,CAACG,gBAAgB,CAC9B,4BAA4B,CAC7B,CACF;EACH,CAAC;EAED,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,CAAIC,KAAoB,EAAK;IACtD,IAAI,CAACV,QAAQ,IAAI,CAACE,OAAO,CAACG,OAAO,IAAI,CAACJ,SAAS,EAAE;MAC/C;IACF;IAEA,IAAMU,GAAG,GAAG,IAAAC,yBAAU,EAACF,KAAK,CAAC;IAE7B,QAAQC,GAAG;MACT,KAAK,WAAW;MAChB,KAAK,YAAY;MACjB,KAAK,KAAK;MACV,KAAK,MAAM;QAAE;UACX,IAAME,MAAM,GAAGT,SAAS,EAAE;UAC1B,IAAMU,qBAAqB,GAAGD,MAAM,CAACE,SAAS,CAC5C,UAACC,EAAE;YAAA,OAAKhB,QAAQ,CAACiB,aAAa,KAAKD,EAAE;UAAA,EACtC;UACD,IAAIF,qBAAqB,KAAK,CAAC,CAAC,EAAE;YAChC;UACF;UAEA,IAAII,SAAS,GAAG,CAAC;UACjB,IAAIP,GAAG,KAAK,MAAM,EAAE;YAClBO,SAAS,GAAG,CAAC;UACf,CAAC,MAAM,IAAIP,GAAG,KAAK,KAAK,EAAE;YACxBO,SAAS,GAAGL,MAAM,CAACM,MAAM,GAAG,CAAC;UAC/B,CAAC,MAAM;YACL,IAAMC,MAAM,GAAGT,GAAG,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC;YAC5CO,SAAS,GAAGJ,qBAAqB,GAAGM,MAAM;UAC5C;UAEA,IAAMC,SAAS,GAAGR,MAAM,CAACK,SAAS,CAAC;UAEnC,IAAIG,SAAS,EAAE;YACbX,KAAK,CAACY,cAAc,EAAE;YACtBD,SAAS,CAACE,KAAK,EAAE;UACnB;UAEA;QACF;MACA;AACN;AACA;AACA;AACA;MACM,KAAK,WAAW;QAAE;UAChB,IAAMV,OAAM,GAAGT,SAAS,EAAE;UAC1B,IAAMoB,gBAAgB,GAAGX,OAAM,CAACY,IAAI,CAClC,UAACT,EAAE;YAAA,OAAKhB,QAAQ,CAACiB,aAAa,KAAKD,EAAE;UAAA,EACtC;UAED,IACE,CAACQ,gBAAgB,IACjBA,gBAAgB,CAACE,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,EACzD;YACA;UACF;UAEA,IAAMC,kBAAkB,GACtBH,gBAAgB,CAACE,YAAY,CAAC,eAAe,CAAC;UAChD,IAAI,CAACC,kBAAkB,EAAE;YACvB;UACF;;UAEA;UACA,IAAMC,gBAAgB,GAAG5B,QAAQ,CAAC6B,cAAc,CAACF,kBAAkB,CAAC;UACpE,IAAI,CAACC,gBAAgB,EAAE;YACrB;UACF;UAEAlB,KAAK,CAACY,cAAc,EAAE;UACtBM,gBAAgB,CAACL,KAAK,EAAE;UAExB;QACF;MACA,KAAK,OAAO;MACZ,KAAK,OAAO;QAAE;UACZ,IAAMV,QAAM,GAAGT,SAAS,EAAE;UAC1B,IAAMoB,iBAAgB,GAAGX,QAAM,CAACY,IAAI,CAClC,UAACT,EAAE;YAAA,OAAKhB,QAAQ,CAACiB,aAAa,KAAKD,EAAE;UAAA,EACtC;UACD,IAAIQ,iBAAgB,EAAE;YACpBA,iBAAgB,CAACM,KAAK,EAAE;UAC1B;QACF;IAAC;EAEL,CAAC;EAED,IAAAC,8CAAsB,EAAC/B,QAAQ,EAAE,SAAS,EAAES,qBAAqB,EAAE;IACjEuB,OAAO,EAAE;EACX,CAAC,CAAC;EAEF,oBACE,sDACMtC,SAAS;IACb,GAAG,EAAEH,UAAW;IAChB,SAAS,EAAE,IAAA0C,4BAAgB,cAEzBtC,QAAQ,KAAKuC,kBAAQ,CAACC,KAAK,IAAIC,MAAM,iBAAUzC,QAAQ,EAAG,EAC1D,IAAA0C,oCAAiB,cAAiBvC,KAAK,CAAC,EACxCV,QAAQ,wBAA4B,EACpCgD,MAAM,sBAAejD,IAAI,EAAG,EAC5BK,SAAS,CACT;IACF,IAAI,EAAEC;EAAK,iBAEX;IAAK,SAAS,gBAAqB;IAAC,GAAG,EAAES;EAAQ,gBAC/C,oBAAC,eAAe,CAAC,QAAQ;IAAC,KAAK,EAAE;MAAEf,IAAI,EAAJA,IAAI;MAAEC,QAAQ,EAARA;IAAS;EAAE,GACjDE,QAAQ,CACgB,CACvB,CACF;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"Tabs.js","names":["modeClassNames","default","accent","secondary","TabsModeContext","React","createContext","mode","withGaps","Tabs","children","getRootRef","className","role","restProps","platform","usePlatform","useDOM","document","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","pressedKey","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","useGlobalEventListener","capture","classNames","Platform","VKCOM"],"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { pressedKey } from '../../lib/accessibility';\nimport styles from './Tabs.module.css';\n\nconst modeClassNames = {\n  default: styles['Tabs--mode-default'],\n  accent: styles['Tabs--mode-accent'],\n  secondary: styles['Tabs--mode-secondary'],\n};\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: 'default',\n  withGaps: false,\n});\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  getRootRef,\n  className,\n  role = 'tablist',\n  ...restProps\n}: TabsProps) => {\n  const platform = usePlatform();\n  const { document } = useDOM();\n\n  const isTabFlow = role === 'tablist';\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const getTabEls = () => {\n    if (!tabsRef.current) {\n      return [];\n    }\n\n    return Array.from(\n      // eslint-disable-next-line no-restricted-properties\n      tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),\n    );\n  };\n\n  const handleDocumentKeydown = (event: KeyboardEvent) => {\n    if (!document || !tabsRef.current || !isTabFlow) {\n      return;\n    }\n\n    const key = pressedKey(event);\n\n    switch (key) {\n      case 'ArrowLeft':\n      case 'ArrowRight':\n      case 'End':\n      case 'Home': {\n        const tabEls = getTabEls();\n        const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);\n        if (currentFocusedElIndex === -1) {\n          return;\n        }\n\n        let nextIndex = 0;\n        if (key === 'Home') {\n          nextIndex = 0;\n        } else if (key === 'End') {\n          nextIndex = tabEls.length - 1;\n        } else {\n          const offset = key === 'ArrowRight' ? 1 : -1;\n          nextIndex = currentFocusedElIndex + offset;\n        }\n\n        const nextTabEl = tabEls[nextIndex];\n\n        if (nextTabEl) {\n          event.preventDefault();\n          nextTabEl.focus();\n        }\n\n        break;\n      }\n      /*\n       В JAWS и NVDA стрелка вниз активирует контент.\n       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.\n       https://inclusive-components.design/tabbed-interfaces/\n      */\n      case 'ArrowDown': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n\n        if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {\n          return;\n        }\n\n        const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');\n        if (!relatedContentElId) {\n          return;\n        }\n\n        // eslint-disable-next-line no-restricted-properties\n        const relatedContentEl = document.getElementById(relatedContentElId);\n        if (!relatedContentEl) {\n          return;\n        }\n\n        event.preventDefault();\n        relatedContentEl.focus();\n\n        break;\n      }\n      case 'Space':\n      case 'Enter': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n        if (currentFocusedEl) {\n          currentFocusedEl.click();\n        }\n      }\n    }\n  };\n\n  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Tabs'],\n        platform === Platform.VKCOM && styles['Tabs--vkcom'],\n        withGaps && styles['Tabs--withGaps'],\n        modeClassNames[mode],\n        className,\n      )}\n      role={role}\n    >\n      <div className={styles['Tabs__in']} ref={tabsRef}>\n        <TabsModeContext.Provider value={{ mode, withGaps }}>{children}</TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Добавляет иконку слева.

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

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _Tappable = require("../Tappable/Tappable");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _Tabs = require("../Tabs/Tabs");
 var _Headline = require("../Typography/Headline/Headline");
@@ -18,7 +18,7 @@ var _Subhead = require("../Typography/Subhead/Subhead");
 var _getSizeYClassName = require("../../helpers/getSizeYClassName");
 var _warnOnce = require("../../lib/warnOnce");
 var _excluded = ["before", "children", "status", "after", "selected", "className", "role", "tabIndex"];
-var warn = (0, _warnOnce.warnOnce)("TabsItem");
+var warn = (0, _warnOnce.warnOnce)('TabsItem');
 
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
@@ -32,7 +32,7 @@ var TabsItem = function TabsItem(_ref) {
     selected = _ref$selected === void 0 ? false : _ref$selected,
     className = _ref.className,
     _ref$role = _ref.role,
-    role = _ref$role === void 0 ? "tab" : _ref$role,
+    role = _ref$role === void 0 ? 'tab' : _ref$role,
     tabIndexProp = _ref.tabIndex,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
@@ -41,21 +41,21 @@ var TabsItem = function TabsItem(_ref) {
     mode = _React$useContext.mode,
     withGaps = _React$useContext.withGaps;
   var statusComponent = null;
-  var isTabFlow = role === "tab";
+  var isTabFlow = role === 'tab';
   if (status) {
-    statusComponent = typeof status === "number" ? /*#__PURE__*/React.createElement(_Subhead.Subhead, {
+    statusComponent = typeof status === 'number' ? /*#__PURE__*/React.createElement(_Subhead.Subhead, {
       Component: "span",
-      className: (0, _classNames.classNamesString)("vkuiTabsItem__status", "vkuiTabsItem__status--count"),
+      className: (0, _vkjs.classNames)("vkuiTabsItem__status", "vkuiTabsItem__status--count"),
       weight: "2"
     }, status) : /*#__PURE__*/React.createElement("span", {
       className: "vkuiTabsItem__status"
     }, status);
   }
-  if (process.env.NODE_ENV === "development" && isTabFlow) {
-    if (!restProps["aria-controls"]) {
-      warn("\u041F\u0435\u0440\u0435\u0434\u0430\u0439\u0442\u0435 \u0432 \"aria-controls\" id \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0433\u043E \u0431\u043B\u043E\u043A\u0430", "warn");
-    } else if (!restProps["id"]) {
-      warn("\u041F\u0435\u0440\u0435\u0434\u0430\u0439\u0442\u0435 \"id\" \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0443 \u0434\u043B\u044F \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F \u0432 \"aria-labelledby\" \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0433\u043E \u0431\u043B\u043E\u043A\u0430", "warn");
+  if (process.env.NODE_ENV === 'development' && isTabFlow) {
+    if (!restProps['aria-controls']) {
+      warn("\u041F\u0435\u0440\u0435\u0434\u0430\u0439\u0442\u0435 \u0432 \"aria-controls\" id \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0433\u043E \u0431\u043B\u043E\u043A\u0430", 'warn');
+    } else if (!restProps['id']) {
+      warn("\u041F\u0435\u0440\u0435\u0434\u0430\u0439\u0442\u0435 \"id\" \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0443 \u0434\u043B\u044F \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F \u0432 \"aria-labelledby\" \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0433\u043E \u0431\u043B\u043E\u043A\u0430", 'warn');
     }
   }
   var tabIndex = tabIndexProp;
@@ -63,7 +63,7 @@ var TabsItem = function TabsItem(_ref) {
     tabIndex = selected ? 0 : -1;
   }
   return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({}, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiTabsItem", mode && styles["TabsItem--mode-".concat(mode)], selected && "vkuiTabsItem--selected", (0, _getSizeYClassName.getSizeYClassName)("vkuiTabsItem", sizeY), withGaps && "vkuiTabsItem--withGaps", className),
+    className: (0, _vkjs.classNames)("vkuiTabsItem", mode && styles["TabsItem--mode-".concat(mode)], selected && "vkuiTabsItem--selected", (0, _getSizeYClassName.getSizeYClassName)("vkuiTabsItem", sizeY), withGaps && "vkuiTabsItem--withGaps", className),
     hoverMode: "vkuiTabsItem--hover",
     activeMode: "vkuiTabsItem--active",
     focusVisibleMode: "inside",
@@ -76,11 +76,11 @@ var TabsItem = function TabsItem(_ref) {
   }, before), /*#__PURE__*/React.createElement(_Headline.Headline, {
     Component: "span",
     className: "vkuiTabsItem__label",
-    level: mode === "default" ? "1" : "2",
+    level: mode === 'default' ? '1' : '2',
     weight: "2"
   }, children), statusComponent, after && /*#__PURE__*/React.createElement("div", {
     className: "vkuiTabsItem__after"
-  }, after), mode === "default" && /*#__PURE__*/React.createElement("div", {
+  }, after), mode === 'default' && /*#__PURE__*/React.createElement("div", {
     className: "vkuiTabsItem__underline",
     "aria-hidden": true,
     "data-selected": selected

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

@@ -1 +1 @@
-{"version":3,"file":"TabsItem.js","names":["warn","warnOnce","TabsItem","before","children","status","after","selected","className","role","tabIndexProp","tabIndex","restProps","useAdaptivity","sizeY","React","useContext","TabsModeContext","mode","withGaps","statusComponent","isTabFlow","classNamesString","process","env","NODE_ENV","undefined","styles","getSizeYClassName"],"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { TabsModeContext, TabsContextProps } from \"../Tabs/Tabs\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport styles from \"./TabsItem.module.css\";\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce(\"TabsItem\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = \"tab\",\n  tabIndex: tabIndexProp,\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps =\n    React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === \"tab\";\n\n  if (status) {\n    statusComponent =\n      typeof status === \"number\" ? (\n        <Subhead\n          Component=\"span\"\n          className={classNamesString(\n            styles[\"TabsItem__status\"],\n            styles[\"TabsItem__status--count\"]\n          )}\n          weight=\"2\"\n        >\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles[\"TabsItem__status\"]}>{status}</span>\n      );\n  }\n\n  if (process.env.NODE_ENV === \"development\" && isTabFlow) {\n    if (!restProps[\"aria-controls\"]) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, \"warn\");\n    } else if (!restProps[\"id\"]) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        \"warn\"\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNamesString(\n        styles[\"TabsItem\"],\n        mode && styles[`TabsItem--mode-${mode}`],\n        selected && styles[\"TabsItem--selected\"],\n        getSizeYClassName(styles[\"TabsItem\"], sizeY),\n        withGaps && styles[\"TabsItem--withGaps\"],\n        className\n      )}\n      hoverMode={styles[\"TabsItem--hover\"]}\n      activeMode={styles[\"TabsItem--active\"]}\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles[\"TabsItem__before\"]}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles[\"TabsItem__label\"]}\n        level={mode === \"default\" ? \"1\" : \"2\"}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles[\"TabsItem__after\"]}>{after}</div>}\n      {mode === \"default\" && (\n        <div\n          className={styles[\"TabsItem__underline\"]}\n          aria-hidden\n          data-selected={selected}\n        />\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA8C;AA6B9C,IAAMA,IAAI,GAAG,IAAAC,kBAAQ,EAAC,UAAU,CAAC;;AAEjC;AACA;AACA;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAUA;EAAA,IATnBC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IAAA,qBACLC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,SAAS,QAATA,SAAS;IAAA,iBACTC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACFC,YAAY,QAAtBC,QAAQ;IACLC,SAAS;EAEZ,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EACb,wBACEC,KAAK,CAACC,UAAU,CAACC,qBAAe,CAAC;IAD3BC,IAAI,qBAAJA,IAAI;IAAEC,QAAQ,qBAARA,QAAQ;EAEtB,IAAIC,eAAe,GAAG,IAAI;EAE1B,IAAMC,SAAS,GAAGZ,IAAI,KAAK,KAAK;EAEhC,IAAIJ,MAAM,EAAE;IACVe,eAAe,GACb,OAAOf,MAAM,KAAK,QAAQ,gBACxB,oBAAC,gBAAO;MACN,SAAS,EAAC,MAAM;MAChB,SAAS,EAAE,IAAAiB,4BAAgB,wDAGzB;MACF,MAAM,EAAC;IAAG,GAETjB,MAAM,CACC,gBAEV;MAAM,SAAS;IAA6B,GAAEA,MAAM,CACrD;EACL;EAEA,IAAIkB,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,IAAIJ,SAAS,EAAE;IACvD,IAAI,CAACT,SAAS,CAAC,eAAe,CAAC,EAAE;MAC/BZ,IAAI,iNAAyD,MAAM,CAAC;IACtE,CAAC,MAAM,IAAI,CAACY,SAAS,CAAC,IAAI,CAAC,EAAE;MAC3BZ,IAAI,sXAEF,MAAM,CACP;IACH;EACF;EAEA,IAAIW,QAAQ,GAAGD,YAAY;EAC3B,IAAIW,SAAS,IAAIV,QAAQ,KAAKe,SAAS,EAAE;IACvCf,QAAQ,GAAGJ,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC;EAC9B;EAEA,oBACE,oBAAC,kBAAQ,6BACHK,SAAS;IACb,SAAS,EAAE,IAAAU,4BAAgB,kBAEzBJ,IAAI,IAAIS,MAAM,0BAAmBT,IAAI,EAAG,EACxCX,QAAQ,4BAAgC,EACxC,IAAAqB,oCAAiB,kBAAqBd,KAAK,CAAC,EAC5CK,QAAQ,4BAAgC,EACxCX,SAAS,CACT;IACF,SAAS,uBAA4B;IACrC,UAAU,wBAA6B;IACvC,gBAAgB,EAAC,QAAQ;IACzB,SAAS,EAAE,KAAM;IACjB,IAAI,EAAEC,IAAK;IACX,iBAAeF,QAAS;IACxB,QAAQ,EAAEI;EAAS,IAElBR,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,eACrE,oBAAC,kBAAQ;IACP,SAAS,EAAC,MAAM;IAChB,SAAS,uBAA4B;IACrC,KAAK,EAAEe,IAAI,KAAK,SAAS,GAAG,GAAG,GAAG,GAAI;IACtC,MAAM,EAAC;EAAG,GAETd,QAAQ,CACA,EACVgB,eAAe,EACfd,KAAK,iBAAI;IAAK,SAAS;EAA4B,GAAEA,KAAK,CAAO,EACjEY,IAAI,KAAK,SAAS,iBACjB;IACE,SAAS,2BAAgC;IACzC,mBAAW;IACX,iBAAeX;EAAS,EAE3B,CACQ;AAEf,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"TabsItem.js","names":["warn","warnOnce","TabsItem","before","children","status","after","selected","className","role","tabIndexProp","tabIndex","restProps","useAdaptivity","sizeY","React","useContext","TabsModeContext","mode","withGaps","statusComponent","isTabFlow","classNames","process","env","NODE_ENV","undefined","styles","getSizeYClassName"],"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Tappable } from '../Tappable/Tappable';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { TabsModeContext, TabsContextProps } from '../Tabs/Tabs';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { warnOnce } from '../../lib/warnOnce';\nimport styles from './TabsItem.module.css';\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (status) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n          weight=\"2\"\n        >\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>{status}</span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['TabsItem'],\n        mode && styles[`TabsItem--mode-${mode}`],\n        selected && styles['TabsItem--selected'],\n        getSizeYClassName(styles['TabsItem'], sizeY),\n        withGaps && styles['TabsItem--withGaps'],\n        className,\n      )}\n      hoverMode={styles['TabsItem--hover']}\n      activeMode={styles['TabsItem--active']}\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA8C;AA6B9C,IAAMA,IAAI,GAAG,IAAAC,kBAAQ,EAAC,UAAU,CAAC;;AAEjC;AACA;AACA;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAUA;EAAA,IATnBC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IAAA,qBACLC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,SAAS,QAATA,SAAS;IAAA,iBACTC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACFC,YAAY,QAAtBC,QAAQ;IACLC,SAAS;EAEZ,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EACb,wBAA6CC,KAAK,CAACC,UAAU,CAACC,qBAAe,CAAC;IAAtEC,IAAI,qBAAJA,IAAI;IAAEC,QAAQ,qBAARA,QAAQ;EACtB,IAAIC,eAAe,GAAG,IAAI;EAE1B,IAAMC,SAAS,GAAGZ,IAAI,KAAK,KAAK;EAEhC,IAAIJ,MAAM,EAAE;IACVe,eAAe,GACb,OAAOf,MAAM,KAAK,QAAQ,gBACxB,oBAAC,gBAAO;MACN,SAAS,EAAC,MAAM;MAChB,SAAS,EAAE,IAAAiB,gBAAU,wDAAgE;MACrF,MAAM,EAAC;IAAG,GAETjB,MAAM,CACC,gBAEV;MAAM,SAAS;IAA6B,GAAEA,MAAM,CACrD;EACL;EAEA,IAAIkB,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,IAAIJ,SAAS,EAAE;IACvD,IAAI,CAACT,SAAS,CAAC,eAAe,CAAC,EAAE;MAC/BZ,IAAI,iNAAyD,MAAM,CAAC;IACtE,CAAC,MAAM,IAAI,CAACY,SAAS,CAAC,IAAI,CAAC,EAAE;MAC3BZ,IAAI,sXAEF,MAAM,CACP;IACH;EACF;EAEA,IAAIW,QAAQ,GAAGD,YAAY;EAC3B,IAAIW,SAAS,IAAIV,QAAQ,KAAKe,SAAS,EAAE;IACvCf,QAAQ,GAAGJ,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC;EAC9B;EAEA,oBACE,oBAAC,kBAAQ,6BACHK,SAAS;IACb,SAAS,EAAE,IAAAU,gBAAU,kBAEnBJ,IAAI,IAAIS,MAAM,0BAAmBT,IAAI,EAAG,EACxCX,QAAQ,4BAAgC,EACxC,IAAAqB,oCAAiB,kBAAqBd,KAAK,CAAC,EAC5CK,QAAQ,4BAAgC,EACxCX,SAAS,CACT;IACF,SAAS,uBAA4B;IACrC,UAAU,wBAA6B;IACvC,gBAAgB,EAAC,QAAQ;IACzB,SAAS,EAAE,KAAM;IACjB,IAAI,EAAEC,IAAK;IACX,iBAAeF,QAAS;IACxB,QAAQ,EAAEI;EAAS,IAElBR,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,eACrE,oBAAC,kBAAQ;IACP,SAAS,EAAC,MAAM;IAChB,SAAS,uBAA4B;IACrC,KAAK,EAAEe,IAAI,KAAK,SAAS,GAAG,GAAG,GAAG,GAAI;IACtC,MAAM,EAAC;EAAG,GAETd,QAAQ,CACA,EACVgB,eAAe,EACfd,KAAK,iBAAI;IAAK,SAAS;EAA4B,GAAEA,KAAK,CAAO,EACjEY,IAAI,KAAK,SAAS,iBACjB;IAAK,SAAS,2BAAgC;IAAC,mBAAW;IAAC,iBAAeX;EAAS,EACpF,CACQ;AAEf,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1,10 +1,10 @@
-import * as React from "react";
-import { TouchProps } from "../Touch/Touch";
-import { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from "../../types";
-import { FocusVisibleMode } from "../FocusVisible/FocusVisible";
-declare type StateMode = "opacity" | "background";
-export declare type TappableElementProps = Omit<React.AllHTMLAttributes<HTMLElement>, "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onMouseDown" | "onMouseMove" | "onMouseUp" | "onMouseLeave"> & AnchorHTMLAttributesOnly;
-export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElement>, HasComponent, Pick<TouchProps, "onStart" | "onEnd" | "onMove"> {
+import * as React from 'react';
+import { TouchProps } from '../Touch/Touch';
+import { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from '../../types';
+import { FocusVisibleMode } from '../FocusVisible/FocusVisible';
+declare type StateMode = 'opacity' | 'background';
+export declare type TappableElementProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onTouchStart' | 'onTouchMove' | 'onTouchEnd' | 'onTouchCancel' | 'onMouseDown' | 'onMouseMove' | 'onMouseUp' | 'onMouseLeave'> & AnchorHTMLAttributesOnly;
+export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElement>, HasComponent, Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {
     /**
      * Длительность показа active-состояния
      */