@vkontakte/vkui 4.23.0 → 4.24.0

package/dist/components/Switch/Switch.js

@@ -4,11 +4,12 @@ var _excluded = ["style", "className", "getRef", "getRootRef"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
+import { callMultiple } from "../../lib/callMultiple";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { useExternRef } from "../../hooks/useExternRef";
+import { useFocusVisible } from "../../hooks/useFocusVisible";
 import { FocusVisible } from "../FocusVisible/FocusVisible";
-;
 export var Switch = function Switch(_ref) {
   var style = _ref.style,
       className = _ref.className,
@@ -21,9 +22,17 @@ export var Switch = function Switch(_ref) {
   var _useAdaptivity = useAdaptivity(),
       sizeY = _useAdaptivity.sizeY;
 
+  var _useFocusVisible = useFocusVisible(),
+      focusVisible = _useFocusVisible.focusVisible,
+      onBlur = _useFocusVisible.onBlur,
+      onFocus = _useFocusVisible.onFocus;
+
   var inputRef = useExternRef(getRef);
   return createScopedElement("label", {
-    vkuiClass: classNames(getClassName('Switch', platform), "Switch--sizeY-".concat(sizeY)),
+    vkuiClass: classNames(getClassName("Switch", platform), "Switch--sizeY-".concat(sizeY), {
+      "Switch--disabled": restProps.disabled,
+      "Switch--focus-visible": focusVisible
+    }),
     className: className,
     style: style,
     ref: getRootRef,
@@ -31,7 +40,9 @@ export var Switch = function Switch(_ref) {
   }, createScopedElement("input", _extends({}, restProps, {
     type: "checkbox",
     vkuiClass: "Switch__self",
-    ref: inputRef
+    ref: inputRef,
+    onBlur: callMultiple(onBlur, restProps.onBlur),
+    onFocus: callMultiple(onFocus, restProps.onFocus)
   })), createScopedElement("span", {
     role: "presentation",
     vkuiClass: "Switch__pseudo"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Switch/Switch.tsx"],"names":["getClassName","classNames","usePlatform","useAdaptivity","useExternRef","FocusVisible","Switch","style","className","getRef","getRootRef","restProps","platform","sizeY","inputRef"],"mappings":";;;;AACA,SAASA,YAAT;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AAEA,SAASC,aAAT;AACA,SAASC,YAAT;AACA,SAASC,YAAT;AAM6B;AAE7B,OAAO,IAAMC,MAA6B,GAAG,SAAhCA,MAAgC,OAM1B;AAAA,MALjBC,KAKiB,QALjBA,KAKiB;AAAA,MAJjBC,SAIiB,QAJjBA,SAIiB;AAAA,MAHjBC,MAGiB,QAHjBA,MAGiB;AAAA,MAFjBC,UAEiB,QAFjBA,UAEiB;AAAA,MADdC,SACc;;AACjB,MAAMC,QAAQ,GAAGV,WAAW,EAA5B;;AACA,uBAAkBC,aAAa,EAA/B;AAAA,MAAQU,KAAR,kBAAQA,KAAR;;AAEA,MAAMC,QAAQ,GAAGV,YAAY,CAACK,MAAD,CAA7B;AAEA,SACE;AACE,IAAA,SAAS,EAAER,UAAU,CAACD,YAAY,CAAC,QAAD,EAAWY,QAAX,CAAb,0BAAoDC,KAApD,EADvB;AAEE,IAAA,SAAS,EAAEL,SAFb;AAGE,IAAA,KAAK,EAAED,KAHT;AAIE,IAAA,GAAG,EAAEG,UAJP;AAKE,IAAA,IAAI,EAAC;AALP,KAOE,0CAAWC,SAAX;AAAsB,IAAA,IAAI,EAAC,UAA3B;AAAsC,IAAA,SAAS,EAAC,cAAhD;AAA+D,IAAA,GAAG,EAAEG;AAApE,KAPF,EAQE;AAAM,IAAA,IAAI,EAAC,cAAX;AAA0B,IAAA,SAAS,EAAC;AAApC,IARF,EASE,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC;AAAnB,IATF,CADF;AAaD,CAzBM","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport './Switch.css';\n\nexport interface SwitchProps extends\n  React.InputHTMLAttributes<HTMLInputElement>,\n  HasRootRef<HTMLLabelElement>,\n  HasRef<HTMLInputElement> {};\n\nexport const Switch: React.FC<SwitchProps> = ({\n  style,\n  className,\n  getRef,\n  getRootRef,\n  ...restProps\n}: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  const inputRef = useExternRef(getRef);\n\n  return (\n    <label\n      vkuiClass={classNames(getClassName('Switch', platform), `Switch--sizeY-${sizeY}`)}\n      className={className}\n      style={style}\n      ref={getRootRef}\n      role=\"presentation\"\n    >\n      <input {...restProps} type=\"checkbox\" vkuiClass=\"Switch__self\" ref={inputRef} />\n      <span role=\"presentation\" vkuiClass=\"Switch__pseudo\" />\n      <FocusVisible mode=\"outside\" />\n    </label>\n  );\n};\n"],"file":"Switch.js"}
+{"version":3,"sources":["../../../src/components/Switch/Switch.tsx"],"names":["getClassName","classNames","callMultiple","usePlatform","useAdaptivity","useExternRef","useFocusVisible","FocusVisible","Switch","style","className","getRef","getRootRef","restProps","platform","sizeY","focusVisible","onBlur","onFocus","inputRef","disabled"],"mappings":";;;;AACA,SAASA,YAAT;AACA,SAASC,UAAT;AACA,SAASC,YAAT;AACA,SAASC,WAAT;AAEA,SAASC,aAAT;AACA,SAASC,YAAT;AACA,SAASC,eAAT;AACA,SAASC,YAAT;AAQA,OAAO,IAAMC,MAA6B,GAAG,SAAhCA,MAAgC,OAM1B;AAAA,MALjBC,KAKiB,QALjBA,KAKiB;AAAA,MAJjBC,SAIiB,QAJjBA,SAIiB;AAAA,MAHjBC,MAGiB,QAHjBA,MAGiB;AAAA,MAFjBC,UAEiB,QAFjBA,UAEiB;AAAA,MADdC,SACc;;AACjB,MAAMC,QAAQ,GAAGX,WAAW,EAA5B;;AACA,uBAAkBC,aAAa,EAA/B;AAAA,MAAQW,KAAR,kBAAQA,KAAR;;AACA,yBAA0CT,eAAe,EAAzD;AAAA,MAAQU,YAAR,oBAAQA,YAAR;AAAA,MAAsBC,MAAtB,oBAAsBA,MAAtB;AAAA,MAA8BC,OAA9B,oBAA8BA,OAA9B;;AAEA,MAAMC,QAAQ,GAAGd,YAAY,CAACM,MAAD,CAA7B;AAEA,SACE;AACE,IAAA,SAAS,EAAEV,UAAU,CACnBD,YAAY,CAAC,QAAD,EAAWc,QAAX,CADO,0BAEFC,KAFE,GAGnB;AACE,0BAAoBF,SAAS,CAACO,QADhC;AAEE,+BAAyBJ;AAF3B,KAHmB,CADvB;AASE,IAAA,SAAS,EAAEN,SATb;AAUE,IAAA,KAAK,EAAED,KAVT;AAWE,IAAA,GAAG,EAAEG,UAXP;AAYE,IAAA,IAAI,EAAC;AAZP,KAcE,0CACMC,SADN;AAEE,IAAA,IAAI,EAAC,UAFP;AAGE,IAAA,SAAS,EAAC,cAHZ;AAIE,IAAA,GAAG,EAAEM,QAJP;AAKE,IAAA,MAAM,EAAEjB,YAAY,CAACe,MAAD,EAASJ,SAAS,CAACI,MAAnB,CALtB;AAME,IAAA,OAAO,EAAEf,YAAY,CAACgB,OAAD,EAAUL,SAAS,CAACK,OAApB;AANvB,KAdF,EAsBE;AAAM,IAAA,IAAI,EAAC,cAAX;AAA0B,IAAA,SAAS,EAAC;AAApC,IAtBF,EAuBE,oBAAC,YAAD;AAAc,IAAA,IAAI,EAAC;AAAnB,IAvBF,CADF;AA2BD,CAxCM","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { callMultiple } from \"../../lib/callMultiple\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useFocusVisible } from \"../../hooks/useFocusVisible\";\nimport { FocusVisible } from \"../FocusVisible/FocusVisible\";\nimport \"./Switch.css\";\n\nexport interface SwitchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\nexport const Switch: React.FC<SwitchProps> = ({\n  style,\n  className,\n  getRef,\n  getRootRef,\n  ...restProps\n}: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  const inputRef = useExternRef(getRef);\n\n  return (\n    <label\n      vkuiClass={classNames(\n        getClassName(\"Switch\", platform),\n        `Switch--sizeY-${sizeY}`,\n        {\n          \"Switch--disabled\": restProps.disabled,\n          \"Switch--focus-visible\": focusVisible,\n        }\n      )}\n      className={className}\n      style={style}\n      ref={getRootRef}\n      role=\"presentation\"\n    >\n      <input\n        {...restProps}\n        type=\"checkbox\"\n        vkuiClass=\"Switch__self\"\n        ref={inputRef}\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span role=\"presentation\" vkuiClass=\"Switch__pseudo\" />\n      <FocusVisible mode=\"outside\" />\n    </label>\n  );\n};\n"],"file":"Switch.js"}

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

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import './Tabbar.css';
+import * as React from "react";
+import "./Tabbar.css";
 export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)
      */
     shadow?: boolean;
-    itemsLayout?: 'vertical' | 'horizontal' | 'auto';
+    itemsLayout?: "vertical" | "horizontal" | "auto";
 }
 declare const Tabbar: React.FunctionComponent<TabbarProps>;
 export default Tabbar;

package/dist/components/Tabbar/Tabbar.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "shadow", "itemsLayout"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import * as React from 'react';
+import * as React from "react";
 import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
@@ -17,18 +17,18 @@ var Tabbar = function Tabbar(props) {
 
   var getItemsLayout = function getItemsLayout() {
     switch (itemsLayout) {
-      case 'horizontal':
-      case 'vertical':
+      case "horizontal":
+      case "vertical":
         return itemsLayout;
 
       default:
-        return React.Children.count(children) > 2 ? 'vertical' : 'horizontal';
+        return React.Children.count(children) > 2 ? "vertical" : "horizontal";
     }
   };
 
   return createScopedElement("div", _extends({
-    vkuiClass: classNames(getClassName('Tabbar', platform), "Tabbar--l-".concat(getItemsLayout()), {
-      'Tabbar--shadow': shadow
+    vkuiClass: classNames(getClassName("Tabbar", platform), "Tabbar--l-".concat(getItemsLayout()), {
+      "Tabbar--shadow": shadow
     })
   }, restProps), createScopedElement("div", {
     vkuiClass: "Tabbar__in"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tabbar/Tabbar.tsx"],"names":["React","getClassName","classNames","usePlatform","Tabbar","props","children","shadow","itemsLayout","restProps","platform","getItemsLayout","Children","count","defaultProps"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT;AACA,SAASC,UAAT;AACA,SAASC,WAAT;;AAWA,IAAMC,MAA4C,GAAG,SAA/CA,MAA+C,CAACC,KAAD,EAAwB;AAC3E,MAAQC,QAAR,GAAwDD,KAAxD,CAAQC,QAAR;AAAA,MAAkBC,MAAlB,GAAwDF,KAAxD,CAAkBE,MAAlB;AAAA,MAA0BC,WAA1B,GAAwDH,KAAxD,CAA0BG,WAA1B;AAAA,MAA0CC,SAA1C,4BAAwDJ,KAAxD;;AACA,MAAMK,QAAQ,GAAGP,WAAW,EAA5B;;AAEA,MAAMQ,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,YAAQH,WAAR;AACE,WAAK,YAAL;AACA,WAAK,UAAL;AACE,eAAOA,WAAP;;AACF;AACE,eAAOR,KAAK,CAACY,QAAN,CAAeC,KAAf,CAAqBP,QAArB,IAAiC,CAAjC,GAAqC,UAArC,GAAkD,YAAzD;AALJ;AAOD,GARD;;AAUA,SACE;AACE,IAAA,SAAS,EAAEJ,UAAU,CAACD,YAAY,CAAC,QAAD,EAAWS,QAAX,CAAb,sBAAgDC,cAAc,EAA9D,GAAoE;AACvF,wBAAkBJ;AADqE,KAApE;AADvB,KAIME,SAJN,GAME;AAAK,IAAA,SAAS,EAAC;AAAf,KACGH,QADH,CANF,CADF;AAYD,CA1BD;;AA4BAF,MAAM,CAACU,YAAP,GAAsB;AACpBP,EAAAA,MAAM,EAAE;AADY,CAAtB;AAIA,eAAeH,MAAf","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport './Tabbar.css';\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  itemsLayout?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst Tabbar: React.FunctionComponent<TabbarProps> = (props: TabbarProps) => {\n  const { children, shadow, itemsLayout, ...restProps } = props;\n  const platform = usePlatform();\n\n  const getItemsLayout = () => {\n    switch (itemsLayout) {\n      case 'horizontal':\n      case 'vertical':\n        return itemsLayout;\n      default:\n        return React.Children.count(children) > 2 ? 'vertical' : 'horizontal';\n    }\n  };\n\n  return (\n    <div\n      vkuiClass={classNames(getClassName('Tabbar', platform), `Tabbar--l-${getItemsLayout()}`, {\n        'Tabbar--shadow': shadow,\n      })}\n      {...restProps}\n    >\n      <div vkuiClass=\"Tabbar__in\">\n        {children}\n      </div>\n    </div>\n  );\n};\n\nTabbar.defaultProps = {\n  shadow: true,\n};\n\nexport default Tabbar;\n"],"file":"Tabbar.js"}
+{"version":3,"sources":["../../../src/components/Tabbar/Tabbar.tsx"],"names":["React","getClassName","classNames","usePlatform","Tabbar","props","children","shadow","itemsLayout","restProps","platform","getItemsLayout","Children","count","defaultProps"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT;AACA,SAASC,UAAT;AACA,SAASC,WAAT;;AAWA,IAAMC,MAA4C,GAAG,SAA/CA,MAA+C,CAACC,KAAD,EAAwB;AAC3E,MAAQC,QAAR,GAAwDD,KAAxD,CAAQC,QAAR;AAAA,MAAkBC,MAAlB,GAAwDF,KAAxD,CAAkBE,MAAlB;AAAA,MAA0BC,WAA1B,GAAwDH,KAAxD,CAA0BG,WAA1B;AAAA,MAA0CC,SAA1C,4BAAwDJ,KAAxD;;AACA,MAAMK,QAAQ,GAAGP,WAAW,EAA5B;;AAEA,MAAMQ,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,YAAQH,WAAR;AACE,WAAK,YAAL;AACA,WAAK,UAAL;AACE,eAAOA,WAAP;;AACF;AACE,eAAOR,KAAK,CAACY,QAAN,CAAeC,KAAf,CAAqBP,QAArB,IAAiC,CAAjC,GAAqC,UAArC,GAAkD,YAAzD;AALJ;AAOD,GARD;;AAUA,SACE;AACE,IAAA,SAAS,EAAEJ,UAAU,CACnBD,YAAY,CAAC,QAAD,EAAWS,QAAX,CADO,sBAENC,cAAc,EAFR,GAGnB;AACE,wBAAkBJ;AADpB,KAHmB;AADvB,KAQME,SARN,GAUE;AAAK,IAAA,SAAS,EAAC;AAAf,KAA6BH,QAA7B,CAVF,CADF;AAcD,CA5BD;;AA8BAF,MAAM,CAACU,YAAP,GAAsB;AACpBP,EAAAA,MAAM,EAAE;AADY,CAAtB;AAIA,eAAeH,MAAf","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport \"./Tabbar.css\";\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  itemsLayout?: \"vertical\" | \"horizontal\" | \"auto\";\n}\n\nconst Tabbar: React.FunctionComponent<TabbarProps> = (props: TabbarProps) => {\n  const { children, shadow, itemsLayout, ...restProps } = props;\n  const platform = usePlatform();\n\n  const getItemsLayout = () => {\n    switch (itemsLayout) {\n      case \"horizontal\":\n      case \"vertical\":\n        return itemsLayout;\n      default:\n        return React.Children.count(children) > 2 ? \"vertical\" : \"horizontal\";\n    }\n  };\n\n  return (\n    <div\n      vkuiClass={classNames(\n        getClassName(\"Tabbar\", platform),\n        `Tabbar--l-${getItemsLayout()}`,\n        {\n          \"Tabbar--shadow\": shadow,\n        }\n      )}\n      {...restProps}\n    >\n      <div vkuiClass=\"Tabbar__in\">{children}</div>\n    </div>\n  );\n};\n\nTabbar.defaultProps = {\n  shadow: true,\n};\n\nexport default Tabbar;\n"],"file":"Tabbar.js"}

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { HasComponent, HasRootRef } from '../../types';
-import './TabbarItem.css';
-export interface TabbarItemProps extends Omit<React.AllHTMLAttributes<HTMLElement>, 'label'>, // TODO убрать Omit после удаления свойства label
+import * as React from "react";
+import { HasComponent, HasRootRef } from "../../types";
+import "./TabbarItem.css";
+export interface TabbarItemProps extends Omit<React.AllHTMLAttributes<HTMLElement>, "label">, // TODO убрать Omit после удаления свойства label
 HasRootRef<HTMLElement>, HasComponent {
     selected?: boolean;
     /**

package/dist/components/TabbarItem/TabbarItem.js

@@ -18,7 +18,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,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
@@ -27,15 +27,15 @@ var TabbarItem = function TabbarItem(_ref) {
   return createScopedElement(Component, _extends({}, restProps, {
     disabled: disabled,
     href: href,
-    vkuiClass: classNames(getClassName('TabbarItem', platform), {
-      'TabbarItem--selected': selected,
-      'TabbarItem--text': !!text
+    vkuiClass: classNames(getClassName("TabbarItem", platform), {
+      "TabbarItem--selected": selected,
+      "TabbarItem--text": !!text
     })
   }), createScopedElement(Tappable, {
     role: "presentation",
     Component: "div",
     disabled: disabled,
-    activeMode: platform === Platform.IOS ? 'TabbarItem__tappable--active' : 'background',
+    activeMode: platform === Platform.IOS ? "TabbarItem__tappable--active" : "background",
     activeEffectDelay: platform === Platform.IOS ? 0 : 300,
     hasHover: false,
     vkuiClass: "TabbarItem__tappable"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"names":["getClassName","Counter","classNames","usePlatform","hasReactNode","Tappable","Platform","TabbarItem","children","selected","label","indicator","text","href","Component","disabled","restProps","platform","IOS"],"mappings":";;;;AACA,SAASA,YAAT;AACA,OAAOC,OAAP;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,OAAOC,QAAP;AACA,SAASC,QAAT;;AAuBA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAUtC;AAAA,MATrBC,QASqB,QATrBA,QASqB;AAAA,MARrBC,QAQqB,QARrBA,QAQqB;AAAA,MAPrBC,KAOqB,QAPrBA,KAOqB;AAAA,MANrBC,SAMqB,QANrBA,SAMqB;AAAA,MALrBC,IAKqB,QALrBA,IAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,4BAHrBC,SAGqB;AAAA,MAHrBA,SAGqB,+BAHTD,IAAI,GAAG,GAAH,GAAS,QAGJ;AAAA,MAFrBE,QAEqB,QAFrBA,QAEqB;AAAA,MADlBC,SACkB;;AACrB,MAAMC,QAAQ,GAAGd,WAAW,EAA5B,CADqB,CAGrB;;AACA,SAAQ,oBAAC,SAAD,eACFa,SADE;AAEN,IAAA,QAAQ,EAAED,QAFJ;AAGN,IAAA,IAAI,EAAEF,IAHA;AAIN,IAAA,SAAS,EAAEX,UAAU,CAACF,YAAY,CAAC,YAAD,EAAeiB,QAAf,CAAb,EAAuC;AAC1D,8BAAwBR,QADkC;AAE1D,0BAAoB,CAAC,CAACG;AAFoC,KAAvC;AAJf,MASN,oBAAC,QAAD;AACE,IAAA,IAAI,EAAC,cADP;AAEE,IAAA,SAAS,EAAC,KAFZ;AAGE,IAAA,QAAQ,EAAEG,QAHZ;AAIE,IAAA,UAAU,EAAEE,QAAQ,KAAKX,QAAQ,CAACY,GAAtB,GAA4B,8BAA5B,GAA6D,YAJ3E;AAKE,IAAA,iBAAiB,EAAED,QAAQ,KAAKX,QAAQ,CAACY,GAAtB,GAA4B,CAA5B,GAAgC,GALrD;AAME,IAAA,QAAQ,EAAE,KANZ;AAOE,IAAA,SAAS,EAAC;AAPZ,IATM,EAkBN;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGV,QADH,EAEE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGJ,YAAY,CAACO,SAAD,CAAZ,IAA2BA,SAD9B,EAEG,CAACA,SAAD,IAAcD,KAAd,IAAuB,oBAAC,OAAD;AAAS,IAAA,IAAI,EAAC,GAAd;AAAkB,IAAA,IAAI,EAAC;AAAvB,KAAoCA,KAApC,CAF1B,CAFF,CADF,EAQGE,IAAI,IAAI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAmCA,IAAnC,CARX,CAlBM,CAAR;AA6BD,CA3CD;;AA6CA,eAAeL,UAAf","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport Counter from '../Counter/Counter';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasReactNode } from '../../lib/utils';\nimport Tappable from '../Tappable/Tappable';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport './TabbarItem.css';\n\nexport interface TabbarItemProps extends\n  Omit<React.AllHTMLAttributes<HTMLElement>, 'label'>, // TODO убрать Omit после удаления свойства label\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   * @deprecated будет удалено в 5.0.0. Используйте `indicator`\n   */\n  label?: React.ReactNode;\n}\n\nconst TabbarItem: React.FunctionComponent<TabbarItemProps> = ({\n  children,\n  selected,\n  label,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  // @ts-ignore ругается на то, что у AllHTMLAttributes type это строка, а button не любую строку считает валидным значением\n  return (<Component\n    {...restProps}\n    disabled={disabled}\n    href={href}\n    vkuiClass={classNames(getClassName('TabbarItem', platform), {\n      'TabbarItem--selected': selected,\n      'TabbarItem--text': !!text,\n    })}\n  >\n    <Tappable\n      role=\"presentation\"\n      Component=\"div\"\n      disabled={disabled}\n      activeMode={platform === Platform.IOS ? 'TabbarItem__tappable--active' : 'background'}\n      activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n      hasHover={false}\n      vkuiClass=\"TabbarItem__tappable\"\n    />\n    <div vkuiClass=\"TabbarItem__in\">\n      <div vkuiClass=\"TabbarItem__icon\">\n        {children}\n        <div vkuiClass=\"TabbarItem__label\">\n          {hasReactNode(indicator) && indicator}\n          {!indicator && label && <Counter size=\"s\" mode=\"prominent\">{label}</Counter>}\n        </div>\n      </div>\n      {text && <div vkuiClass=\"TabbarItem__text\">{text}</div>}\n    </div>\n  </Component>);\n};\n\nexport default TabbarItem;\n"],"file":"TabbarItem.js"}
+{"version":3,"sources":["../../../src/components/TabbarItem/TabbarItem.tsx"],"names":["getClassName","Counter","classNames","usePlatform","hasReactNode","Tappable","Platform","TabbarItem","children","selected","label","indicator","text","href","Component","disabled","restProps","platform","IOS"],"mappings":";;;;AACA,SAASA,YAAT;AACA,OAAOC,OAAP;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,OAAOC,QAAP;AACA,SAASC,QAAT;;AAuBA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAUtC;AAAA,MATrBC,QASqB,QATrBA,QASqB;AAAA,MARrBC,QAQqB,QARrBA,QAQqB;AAAA,MAPrBC,KAOqB,QAPrBA,KAOqB;AAAA,MANrBC,SAMqB,QANrBA,SAMqB;AAAA,MALrBC,IAKqB,QALrBA,IAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,4BAHrBC,SAGqB;AAAA,MAHrBA,SAGqB,+BAHTD,IAAI,GAAG,GAAH,GAAS,QAGJ;AAAA,MAFrBE,QAEqB,QAFrBA,QAEqB;AAAA,MADlBC,SACkB;;AACrB,MAAMC,QAAQ,GAAGd,WAAW,EAA5B,CADqB,CAGrB;;AACA,SACE,oBAAC,SAAD,eACMa,SADN;AAEE,IAAA,QAAQ,EAAED,QAFZ;AAGE,IAAA,IAAI,EAAEF,IAHR;AAIE,IAAA,SAAS,EAAEX,UAAU,CAACF,YAAY,CAAC,YAAD,EAAeiB,QAAf,CAAb,EAAuC;AAC1D,8BAAwBR,QADkC;AAE1D,0BAAoB,CAAC,CAACG;AAFoC,KAAvC;AAJvB,MASE,oBAAC,QAAD;AACE,IAAA,IAAI,EAAC,cADP;AAEE,IAAA,SAAS,EAAC,KAFZ;AAGE,IAAA,QAAQ,EAAEG,QAHZ;AAIE,IAAA,UAAU,EACRE,QAAQ,KAAKX,QAAQ,CAACY,GAAtB,GACI,8BADJ,GAEI,YAPR;AASE,IAAA,iBAAiB,EAAED,QAAQ,KAAKX,QAAQ,CAACY,GAAtB,GAA4B,CAA5B,GAAgC,GATrD;AAUE,IAAA,QAAQ,EAAE,KAVZ;AAWE,IAAA,SAAS,EAAC;AAXZ,IATF,EAsBE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGV,QADH,EAEE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGJ,YAAY,CAACO,SAAD,CAAZ,IAA2BA,SAD9B,EAEG,CAACA,SAAD,IAAcD,KAAd,IACC,oBAAC,OAAD;AAAS,IAAA,IAAI,EAAC,GAAd;AAAkB,IAAA,IAAI,EAAC;AAAvB,KACGA,KADH,CAHJ,CAFF,CADF,EAYGE,IAAI,IAAI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAmCA,IAAnC,CAZX,CAtBF,CADF;AAuCD,CArDD;;AAuDA,eAAeL,UAAf","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport Counter from \"../Counter/Counter\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport Tappable from \"../Tappable/Tappable\";\nimport { Platform } from \"../../lib/platform\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport \"./TabbarItem.css\";\n\nexport interface TabbarItemProps\n  extends Omit<React.AllHTMLAttributes<HTMLElement>, \"label\">, // TODO убрать Omit после удаления свойства label\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   * @deprecated будет удалено в 5.0.0. Используйте `indicator`\n   */\n  label?: React.ReactNode;\n}\n\nconst TabbarItem: React.FunctionComponent<TabbarItemProps> = ({\n  children,\n  selected,\n  label,\n  indicator,\n  text,\n  href,\n  Component = href ? \"a\" : \"button\",\n  disabled,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  // @ts-ignore ругается на то, что у AllHTMLAttributes type это строка, а button не любую строку считает валидным значением\n  return (\n    <Component\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      vkuiClass={classNames(getClassName(\"TabbarItem\", platform), {\n        \"TabbarItem--selected\": selected,\n        \"TabbarItem--text\": !!text,\n      })}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS\n            ? \"TabbarItem__tappable--active\"\n            : \"background\"\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        vkuiClass=\"TabbarItem__tappable\"\n      />\n      <div vkuiClass=\"TabbarItem__in\">\n        <div vkuiClass=\"TabbarItem__icon\">\n          {children}\n          <div vkuiClass=\"TabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n            {!indicator && label && (\n              <Counter size=\"s\" mode=\"prominent\">\n                {label}\n              </Counter>\n            )}\n          </div>\n        </div>\n        {text && <div vkuiClass=\"TabbarItem__text\">{text}</div>}\n      </div>\n    </Component>\n  );\n};\n\nexport default TabbarItem;\n"],"file":"TabbarItem.js"}

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

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { HasRootRef } from '../../types';
-import { AdaptivityProps } from '../../hoc/withAdaptivity';
-import './Tabs.css';
+import * as React from "react";
+import { HasRootRef } from "../../types";
+import { AdaptivityProps } from "../../hoc/withAdaptivity";
+import "./Tabs.css";
 export interface TabsProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, AdaptivityProps {
-    mode?: 'default' | 'buttons' | 'segmented';
+    mode?: "default" | "buttons" | "segmented";
 }
 export declare const TabsModeContext: React.Context<"default" | "buttons" | "segmented">;
 declare const _default: React.FunctionComponent<TabsProps>;

package/dist/components/Tabs/Tabs.js

@@ -2,13 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "mode", "getRootRef", "sizeX"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import * as React from 'react';
+import * as React from "react";
 import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { IOS } from "../../lib/platform";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
-export var TabsModeContext = /*#__PURE__*/React.createContext('default');
+export var TabsModeContext = /*#__PURE__*/React.createContext("default");
 
 var Tabs = function Tabs(_ref) {
   var children = _ref.children,
@@ -19,13 +19,13 @@ var Tabs = function Tabs(_ref) {
 
   var platform = usePlatform();
 
-  if (platform !== IOS && mode === 'segmented') {
-    mode = 'default';
+  if (platform !== IOS && mode === "segmented") {
+    mode = "default";
   }
 
   return createScopedElement("div", _extends({}, restProps, {
     ref: getRootRef,
-    vkuiClass: classNames(getClassName('Tabs', platform), "Tabs--".concat(mode), "Tabs--sizeX-".concat(sizeX))
+    vkuiClass: classNames(getClassName("Tabs", platform), "Tabs--".concat(mode), "Tabs--sizeX-".concat(sizeX))
   }), createScopedElement("div", {
     vkuiClass: "Tabs__in"
   }, createScopedElement(TabsModeContext.Provider, {
@@ -34,7 +34,7 @@ var Tabs = function Tabs(_ref) {
 };
 
 Tabs.defaultProps = {
-  mode: 'default'
+  mode: "default"
 };
 export default withAdaptivity(Tabs, {
   sizeX: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tabs/Tabs.tsx"],"names":["React","getClassName","classNames","usePlatform","IOS","withAdaptivity","TabsModeContext","createContext","Tabs","children","mode","getRootRef","sizeX","restProps","platform","defaultProps"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT;AACA,SAASC,UAAT;AAEA,SAASC,WAAT;AACA,SAASC,GAAT;AACA,SAASC,cAAT;AAOA,OAAO,IAAMC,eAAe,gBAAGN,KAAK,CAACO,aAAN,CAAuC,SAAvC,CAAxB;;AAEP,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OAMhC;AAAA,MALfC,QAKe,QALfA,QAKe;AAAA,MAJfC,IAIe,QAJfA,IAIe;AAAA,MAHfC,UAGe,QAHfA,UAGe;AAAA,MAFfC,KAEe,QAFfA,KAEe;AAAA,MADZC,SACY;;AACf,MAAMC,QAAQ,GAAGX,WAAW,EAA5B;;AAEA,MAAIW,QAAQ,KAAKV,GAAb,IAAoBM,IAAI,KAAK,WAAjC,EAA8C;AAC5CA,IAAAA,IAAI,GAAG,SAAP;AACD;;AAED,SACE,wCACMG,SADN;AAEE,IAAA,GAAG,EAAEF,UAFP;AAGE,IAAA,SAAS,EAAET,UAAU,CAACD,YAAY,CAAC,MAAD,EAASa,QAAT,CAAb,kBAA0CJ,IAA1C,yBAAiEE,KAAjE;AAHvB,MAKE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE,oBAAC,eAAD,CAAiB,QAAjB;AAA0B,IAAA,KAAK,EAAEF;AAAjC,KACGD,QADH,CADF,CALF,CADF;AAaD,CA1BD;;AA4BAD,IAAI,CAACO,YAAL,GAAoB;AAClBL,EAAAA,IAAI,EAAE;AADY,CAApB;AAIA,eAAeL,cAAc,CAACG,IAAD,EAAO;AAAEI,EAAAA,KAAK,EAAE;AAAT,CAAP,CAA7B","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { IOS } from '../../lib/platform';\nimport { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';\nimport './Tabs.css';\n\nexport interface TabsProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, AdaptivityProps {\n  mode?: 'default' | 'buttons' | 'segmented';\n}\n\nexport const TabsModeContext = React.createContext<TabsProps['mode']>('default');\n\nconst Tabs: React.FunctionComponent<TabsProps> = ({\n  children,\n  mode,\n  getRootRef,\n  sizeX,\n  ...restProps\n}: TabsProps) => {\n  const platform = usePlatform();\n\n  if (platform !== IOS && mode === 'segmented') {\n    mode = 'default';\n  }\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      vkuiClass={classNames(getClassName('Tabs', platform), `Tabs--${mode}`, `Tabs--sizeX-${sizeX}`)}\n    >\n      <div vkuiClass=\"Tabs__in\">\n        <TabsModeContext.Provider value={mode}>\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n\nTabs.defaultProps = {\n  mode: 'default',\n};\n\nexport default withAdaptivity(Tabs, { sizeX: true });\n"],"file":"Tabs.js"}
+{"version":3,"sources":["../../../src/components/Tabs/Tabs.tsx"],"names":["React","getClassName","classNames","usePlatform","IOS","withAdaptivity","TabsModeContext","createContext","Tabs","children","mode","getRootRef","sizeX","restProps","platform","defaultProps"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT;AACA,SAASC,UAAT;AAEA,SAASC,WAAT;AACA,SAASC,GAAT;AACA,SAASC,cAAT;AAUA,OAAO,IAAMC,eAAe,gBAC1BN,KAAK,CAACO,aAAN,CAAuC,SAAvC,CADK;;AAGP,IAAMC,IAAwC,GAAG,SAA3CA,IAA2C,OAMhC;AAAA,MALfC,QAKe,QALfA,QAKe;AAAA,MAJfC,IAIe,QAJfA,IAIe;AAAA,MAHfC,UAGe,QAHfA,UAGe;AAAA,MAFfC,KAEe,QAFfA,KAEe;AAAA,MADZC,SACY;;AACf,MAAMC,QAAQ,GAAGX,WAAW,EAA5B;;AAEA,MAAIW,QAAQ,KAAKV,GAAb,IAAoBM,IAAI,KAAK,WAAjC,EAA8C;AAC5CA,IAAAA,IAAI,GAAG,SAAP;AACD;;AAED,SACE,wCACMG,SADN;AAEE,IAAA,GAAG,EAAEF,UAFP;AAGE,IAAA,SAAS,EAAET,UAAU,CACnBD,YAAY,CAAC,MAAD,EAASa,QAAT,CADO,kBAEVJ,IAFU,yBAGJE,KAHI;AAHvB,MASE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE,oBAAC,eAAD,CAAiB,QAAjB;AAA0B,IAAA,KAAK,EAAEF;AAAjC,KACGD,QADH,CADF,CATF,CADF;AAiBD,CA9BD;;AAgCAD,IAAI,CAACO,YAAL,GAAoB;AAClBL,EAAAA,IAAI,EAAE;AADY,CAApB;AAIA,eAAeL,cAAc,CAACG,IAAD,EAAO;AAAEI,EAAAA,KAAK,EAAE;AAAT,CAAP,CAA7B","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { IOS } from \"../../lib/platform\";\nimport { withAdaptivity, AdaptivityProps } from \"../../hoc/withAdaptivity\";\nimport \"./Tabs.css\";\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    AdaptivityProps {\n  mode?: \"default\" | \"buttons\" | \"segmented\";\n}\n\nexport const TabsModeContext =\n  React.createContext<TabsProps[\"mode\"]>(\"default\");\n\nconst Tabs: React.FunctionComponent<TabsProps> = ({\n  children,\n  mode,\n  getRootRef,\n  sizeX,\n  ...restProps\n}: TabsProps) => {\n  const platform = usePlatform();\n\n  if (platform !== IOS && mode === \"segmented\") {\n    mode = \"default\";\n  }\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      vkuiClass={classNames(\n        getClassName(\"Tabs\", platform),\n        `Tabs--${mode}`,\n        `Tabs--sizeX-${sizeX}`\n      )}\n    >\n      <div vkuiClass=\"Tabs__in\">\n        <TabsModeContext.Provider value={mode}>\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n\nTabs.defaultProps = {\n  mode: \"default\",\n};\n\nexport default withAdaptivity(Tabs, { sizeX: true });\n"],"file":"Tabs.js"}

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import './TabsItem.css';
+import * as React from "react";
+import "./TabsItem.css";
 export interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {
     after?: React.ReactNode;
     selected?: boolean;

package/dist/components/TabsItem/TabsItem.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "selected", "after"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import * as React from 'react';
+import * as React from "react";
 import { getClassName } from "../../helpers/getClassName";
 import Tappable from "../Tappable/Tappable";
 import { classNames } from "../../lib/classNames";
@@ -22,19 +22,19 @@ var TabsItem = function TabsItem(_ref) {
 
   var platform = usePlatform();
   var mode = React.useContext(TabsModeContext);
-  var TypographyComponent = mode === 'buttons' || mode === 'segmented' ? Subhead : Headline;
+  var TypographyComponent = mode === "buttons" || mode === "segmented" ? Subhead : Headline;
 
   if (platform === VKCOM) {
     TypographyComponent = Text;
   }
 
   return createScopedElement(Tappable, _extends({}, restProps, {
-    vkuiClass: classNames(getClassName('TabsItem', platform), {
-      'TabsItem--selected': selected
+    vkuiClass: classNames(getClassName("TabsItem", platform), {
+      "TabsItem--selected": selected
     }),
-    hasActive: mode === 'segmented',
+    hasActive: mode === "segmented",
     activeMode: "TabsItem--active",
-    focusVisibleMode: mode === 'segmented' ? 'outside' : 'inside'
+    focusVisibleMode: mode === "segmented" ? "outside" : "inside"
   }), createScopedElement(TypographyComponent, {
     Component: "span",
     vkuiClass: "TabsItem__in",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TabsItem/TabsItem.tsx"],"names":["React","getClassName","Tappable","classNames","VKCOM","usePlatform","hasReactNode","TabsModeContext","Headline","Subhead","Text","TabsItem","children","selected","after","restProps","platform","mode","useContext","TypographyComponent","defaultProps"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT;AACA,OAAOC,QAAP;AACA,SAASC,UAAT;AACA,SAASC,KAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAAoBC,eAApB;AACA,OAAOC,QAAP;AACA,OAAOC,OAAP;AACA,OAAOC,IAAP;;AAQA,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,OAKrB;AAAA,MAJnBC,QAImB,QAJnBA,QAImB;AAAA,MAHnBC,QAGmB,QAHnBA,QAGmB;AAAA,MAFnBC,KAEmB,QAFnBA,KAEmB;AAAA,MADhBC,SACgB;;AACnB,MAAMC,QAAQ,GAAGX,WAAW,EAA5B;AACA,MAAMY,IAAuB,GAAGjB,KAAK,CAACkB,UAAN,CAAiBX,eAAjB,CAAhC;AAEA,MAAIY,mBAAmB,GAAGF,IAAI,KAAK,SAAT,IAAsBA,IAAI,KAAK,WAA/B,GACtBR,OADsB,GAEtBD,QAFJ;;AAIA,MAAIQ,QAAQ,KAAKZ,KAAjB,EAAwB;AACtBe,IAAAA,mBAAmB,GAAGT,IAAtB;AACD;;AAED,SACE,oBAAC,QAAD,eACMK,SADN;AAEE,IAAA,SAAS,EAAEZ,UAAU,CAACF,YAAY,CAAC,UAAD,EAAae,QAAb,CAAb,EAAqC;AAAE,4BAAsBH;AAAxB,KAArC,CAFvB;AAGE,IAAA,SAAS,EAAEI,IAAI,KAAK,WAHtB;AAIE,IAAA,UAAU,EAAC,kBAJb;AAKE,IAAA,gBAAgB,EAAEA,IAAI,KAAK,WAAT,GAAuB,SAAvB,GAAmC;AALvD,MAOE,oBAAC,mBAAD;AAAqB,IAAA,SAAS,EAAC,MAA/B;AAAsC,IAAA,SAAS,EAAC,cAAhD;AAA+D,IAAA,MAAM,EAAC;AAAtE,KAAgFL,QAAhF,CAPF,EAQGN,YAAY,CAACQ,KAAD,CAAZ,IAAuB;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCA,KAAlC,CAR1B,CADF;AAYD,CA7BD;;AA+BAH,QAAQ,CAACS,YAAT,GAAwB;AACtBP,EAAAA,QAAQ,EAAE;AADY,CAAxB;AAIA,eAAeF,QAAf","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport Tappable from '../Tappable/Tappable';\nimport { classNames } from '../../lib/classNames';\nimport { VKCOM } from '../../lib/platform';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasReactNode } from '../../lib/utils';\nimport { TabsProps, TabsModeContext } from '../Tabs/Tabs';\nimport Headline from '../Typography/Headline/Headline';\nimport Subhead from '../Typography/Subhead/Subhead';\nimport Text from '../Typography/Text/Text';\nimport './TabsItem.css';\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  after?: React.ReactNode;\n  selected?: boolean;\n}\n\nconst TabsItem: React.FC<TabsItemProps> = ({\n  children,\n  selected,\n  after,\n  ...restProps\n}: TabsItemProps) => {\n  const platform = usePlatform();\n  const mode: TabsProps['mode'] = React.useContext(TabsModeContext);\n\n  let TypographyComponent = mode === 'buttons' || mode === 'segmented'\n    ? Subhead\n    : Headline;\n\n  if (platform === VKCOM) {\n    TypographyComponent = Text;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      vkuiClass={classNames(getClassName('TabsItem', platform), { 'TabsItem--selected': selected })}\n      hasActive={mode === 'segmented'}\n      activeMode=\"TabsItem--active\"\n      focusVisibleMode={mode === 'segmented' ? 'outside' : 'inside'}\n    >\n      <TypographyComponent Component=\"span\" vkuiClass=\"TabsItem__in\" weight=\"medium\">{children}</TypographyComponent>\n      {hasReactNode(after) && <div vkuiClass=\"TabsItem__after\">{after}</div>}\n    </Tappable>\n  );\n};\n\nTabsItem.defaultProps = {\n  selected: false,\n};\n\nexport default TabsItem;\n"],"file":"TabsItem.js"}
+{"version":3,"sources":["../../../src/components/TabsItem/TabsItem.tsx"],"names":["React","getClassName","Tappable","classNames","VKCOM","usePlatform","hasReactNode","TabsModeContext","Headline","Subhead","Text","TabsItem","children","selected","after","restProps","platform","mode","useContext","TypographyComponent","defaultProps"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT;AACA,OAAOC,QAAP;AACA,SAASC,UAAT;AACA,SAASC,KAAT;AACA,SAASC,WAAT;AACA,SAASC,YAAT;AACA,SAAoBC,eAApB;AACA,OAAOC,QAAP;AACA,OAAOC,OAAP;AACA,OAAOC,IAAP;;AAQA,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,OAKrB;AAAA,MAJnBC,QAImB,QAJnBA,QAImB;AAAA,MAHnBC,QAGmB,QAHnBA,QAGmB;AAAA,MAFnBC,KAEmB,QAFnBA,KAEmB;AAAA,MADhBC,SACgB;;AACnB,MAAMC,QAAQ,GAAGX,WAAW,EAA5B;AACA,MAAMY,IAAuB,GAAGjB,KAAK,CAACkB,UAAN,CAAiBX,eAAjB,CAAhC;AAEA,MAAIY,mBAAmB,GACrBF,IAAI,KAAK,SAAT,IAAsBA,IAAI,KAAK,WAA/B,GAA6CR,OAA7C,GAAuDD,QADzD;;AAGA,MAAIQ,QAAQ,KAAKZ,KAAjB,EAAwB;AACtBe,IAAAA,mBAAmB,GAAGT,IAAtB;AACD;;AAED,SACE,oBAAC,QAAD,eACMK,SADN;AAEE,IAAA,SAAS,EAAEZ,UAAU,CAACF,YAAY,CAAC,UAAD,EAAae,QAAb,CAAb,EAAqC;AACxD,4BAAsBH;AADkC,KAArC,CAFvB;AAKE,IAAA,SAAS,EAAEI,IAAI,KAAK,WALtB;AAME,IAAA,UAAU,EAAC,kBANb;AAOE,IAAA,gBAAgB,EAAEA,IAAI,KAAK,WAAT,GAAuB,SAAvB,GAAmC;AAPvD,MASE,oBAAC,mBAAD;AACE,IAAA,SAAS,EAAC,MADZ;AAEE,IAAA,SAAS,EAAC,cAFZ;AAGE,IAAA,MAAM,EAAC;AAHT,KAKGL,QALH,CATF,EAgBGN,YAAY,CAACQ,KAAD,CAAZ,IAAuB;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCA,KAAlC,CAhB1B,CADF;AAoBD,CApCD;;AAsCAH,QAAQ,CAACS,YAAT,GAAwB;AACtBP,EAAAA,QAAQ,EAAE;AADY,CAAxB;AAIA,eAAeF,QAAf","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport Tappable from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { VKCOM } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { TabsProps, TabsModeContext } from \"../Tabs/Tabs\";\nimport Headline from \"../Typography/Headline/Headline\";\nimport Subhead from \"../Typography/Subhead/Subhead\";\nimport Text from \"../Typography/Text/Text\";\nimport \"./TabsItem.css\";\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  after?: React.ReactNode;\n  selected?: boolean;\n}\n\nconst TabsItem: React.FC<TabsItemProps> = ({\n  children,\n  selected,\n  after,\n  ...restProps\n}: TabsItemProps) => {\n  const platform = usePlatform();\n  const mode: TabsProps[\"mode\"] = React.useContext(TabsModeContext);\n\n  let TypographyComponent =\n    mode === \"buttons\" || mode === \"segmented\" ? Subhead : Headline;\n\n  if (platform === VKCOM) {\n    TypographyComponent = Text;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      vkuiClass={classNames(getClassName(\"TabsItem\", platform), {\n        \"TabsItem--selected\": selected,\n      })}\n      hasActive={mode === \"segmented\"}\n      activeMode=\"TabsItem--active\"\n      focusVisibleMode={mode === \"segmented\" ? \"outside\" : \"inside\"}\n    >\n      <TypographyComponent\n        Component=\"span\"\n        vkuiClass=\"TabsItem__in\"\n        weight=\"medium\"\n      >\n        {children}\n      </TypographyComponent>\n      {hasReactNode(after) && <div vkuiClass=\"TabsItem__after\">{after}</div>}\n    </Tappable>\n  );\n};\n\nTabsItem.defaultProps = {\n  selected: false,\n};\n\nexport default TabsItem;\n"],"file":"TabsItem.js"}

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

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { TouchProps } from '../Touch/Touch';
-import { HasComponent, HasRootRef } from '../../types';
-import { AdaptivityProps } from '../../hoc/withAdaptivity';
-import { FocusVisibleMode } from '../FocusVisible/FocusVisible';
-import './Tappable.css';
-export interface TappableProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, AdaptivityProps, HasComponent {
+import * as React from "react";
+import { TouchProps } from "../Touch/Touch";
+import { HasComponent, HasRootRef } from "../../types";
+import { AdaptivityProps } from "../../hoc/withAdaptivity";
+import { FocusVisibleMode } from "../FocusVisible/FocusVisible";
+import "./Tappable.css";
+export interface TappableProps extends Omit<React.AllHTMLAttributes<HTMLElement>, "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onMouseDown" | "onMouseMove" | "onMouseUp" | "onMouseLeave">, HasRootRef<HTMLElement>, AdaptivityProps, HasComponent, Pick<TouchProps, "onStart" | "onEnd" | "onMove"> {
     /**
      * Длительность показа active-состояния
      */
@@ -21,15 +21,15 @@ export interface TappableProps extends React.AllHTMLAttributes<HTMLElement>, Has
     /**
      * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active
      */
-    activeMode?: 'opacity' | 'background' | string;
+    activeMode?: "opacity" | "background" | string;
     /**
      * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover
      */
-    hoverMode?: 'opacity' | 'background' | string;
+    hoverMode?: "opacity" | "background" | string;
     /**
-     * Стиль аутлайна focus visible.
+     * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible
      */
-    focusVisibleMode?: FocusVisibleMode;
+    focusVisibleMode?: FocusVisibleMode | string;
 }
 export interface RootComponentProps extends TouchProps {
     ref?: React.Ref<HTMLElement>;

package/dist/components/Tappable/Tappable.js

@@ -5,9 +5,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["children", "Component", "onClick", "onKeyDown", "activeEffectDelay", "stopPropagation", "getRootRef", "sizeX", "hasMouse", "deviceHasHover", "hasHover", "hoverMode", "hasActive", "activeMode", "focusVisibleMode"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import * as React from 'react';
-import mitt from 'mitt';
-import { noop } from '@vkontakte/vkjs';
+import * as React from "react";
+import mitt from "mitt";
+import { noop } from "@vkontakte/vkjs";
 import { Touch } from "../Touch/Touch";
 import TouchRootContext from "../Touch/TouchContext";
 import { classNames } from "../../lib/classNames";
@@ -22,6 +22,8 @@ import { FocusVisible } from "../FocusVisible/FocusVisible";
 import { useTimeout } from "../../hooks/useTimeout";
 import { useExternRef } from "../../hooks/useExternRef";
 import { usePlatform } from "../../hooks/usePlatform";
+import { useFocusVisible } from "../../hooks/useFocusVisible";
+import { callMultiple } from "../../lib/callMultiple";
 export var ACTIVE_DELAY = 70;
 export var ACTIVE_EFFECT_DELAY = 600;
 var activeBus = mitt();
@@ -70,7 +72,7 @@ function useActivity(hasActive, stopDelay) {
     }
 
     if (activity === TapState.active) {
-      activeBus.emit('active', id);
+      activeBus.emit("active", id);
     }
 
     return noop;
@@ -84,9 +86,9 @@ function useActivity(hasActive, stopDelay) {
       activeId !== id && _stop();
     };
 
-    activeBus.on('active', onActiveChange);
+    activeBus.on("active", onActiveChange);
     return function () {
-      return activeBus.off('active', onActiveChange);
+      return activeBus.off("active", onActiveChange);
     };
   }, [activity === TapState.none]);
   useIsomorphicLayoutEffect(function () {
@@ -127,16 +129,16 @@ var Tappable = function Tappable(_ref) {
       _ref$hasHover = _ref.hasHover,
       _hasHover = _ref$hasHover === void 0 ? true : _ref$hasHover,
       _ref$hoverMode = _ref.hoverMode,
-      hoverMode = _ref$hoverMode === void 0 ? 'background' : _ref$hoverMode,
+      hoverMode = _ref$hoverMode === void 0 ? "background" : _ref$hoverMode,
       _ref$hasActive = _ref.hasActive,
       _hasActive = _ref$hasActive === void 0 ? true : _ref$hasActive,
       _ref$activeMode = _ref.activeMode,
-      activeMode = _ref$activeMode === void 0 ? 'background' : _ref$activeMode,
+      activeMode = _ref$activeMode === void 0 ? "background" : _ref$activeMode,
       _ref$focusVisibleMode = _ref.focusVisibleMode,
-      focusVisibleMode = _ref$focusVisibleMode === void 0 ? 'inside' : _ref$focusVisibleMode,
+      focusVisibleMode = _ref$focusVisibleMode === void 0 ? "inside" : _ref$focusVisibleMode,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  Component = Component || (props.href ? 'a' : 'div');
+  Component = Component || (props.href ? "a" : "div");
 
   var _React$useContext = React.useContext(TappableContext),
       onHoverChange = _React$useContext.onHoverChange;
@@ -144,6 +146,11 @@ var Tappable = function Tappable(_ref) {
   var insideTouchRoot = React.useContext(TouchRootContext);
   var platform = usePlatform();
 
+  var _useFocusVisible = useFocusVisible(),
+      focusVisible = _useFocusVisible.focusVisible,
+      onBlur = _useFocusVisible.onBlur,
+      onFocus = _useFocusVisible.onFocus;
+
   var _React$useState3 = React.useState([]),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       clicks = _React$useState4[0],
@@ -162,9 +169,10 @@ var Tappable = function Tappable(_ref) {
   var hovered = _hovered && !props.disabled;
   var hasActive = _hasActive && !childHover && !props.disabled;
   var hasHover = deviceHasHover && _hasHover && !childHover;
-  var isCustomElement = Component !== 'a' && Component !== 'button' && !props.contentEditable;
-  var isPresetHoverMode = ['opacity', 'background'].includes(hoverMode);
-  var isPresetActiveMode = ['opacity', 'background'].includes(activeMode);
+  var isCustomElement = Component !== "a" && Component !== "button" && !props.contentEditable;
+  var isPresetHoverMode = ["opacity", "background"].includes(hoverMode);
+  var isPresetActiveMode = ["opacity", "background"].includes(activeMode);
+  var isPresetFocusVisibleMode = ["inside", "outside"].includes(focusVisibleMode);
 
   var _useActivity = useActivity(hasActive, activeEffectDelay),
       _useActivity2 = _slicedToArray(_useActivity, 2),
@@ -203,10 +211,6 @@ var Tappable = function Tappable(_ref) {
       e.preventDefault();
       containerRef.current.click();
     }
-
-    if (typeof _onKeyDown === 'function') {
-      return _onKeyDown(e);
-    }
   }
 
   function onStart(_ref2) {
@@ -261,18 +265,18 @@ var Tappable = function Tappable(_ref) {
     stop(activeDuraion >= 100 ? 0 : activeEffectDelay - activeDuraion);
   }
 
-  var classes = classNames(getClassName('Tappable', platform), "Tappable--sizeX-".concat(sizeX), (_classNames = {
-    'Tappable--active': hasActive && active,
-    'Tappable--mouse': hasMouse
-  }, _defineProperty(_classNames, "Tappable--hover-".concat(hoverMode), hasHover && hovered && isPresetHoverMode), _defineProperty(_classNames, "Tappable--active-".concat(activeMode), hasActive && active && isPresetActiveMode), _defineProperty(_classNames, hoverMode, hasHover && hovered && !isPresetHoverMode), _defineProperty(_classNames, activeMode, hasActive && active && !isPresetActiveMode), _classNames));
+  var classes = classNames(getClassName("Tappable", platform), "Tappable--sizeX-".concat(sizeX), hasHover && hovered && !isPresetHoverMode && hoverMode, hasActive && active && !isPresetActiveMode && activeMode, focusVisible && !isPresetFocusVisibleMode && focusVisibleMode, (_classNames = {
+    "Tappable--active": hasActive && active,
+    "Tappable--mouse": hasMouse
+  }, _defineProperty(_classNames, "Tappable--hover-".concat(hoverMode), hasHover && hovered && isPresetHoverMode), _defineProperty(_classNames, "Tappable--active-".concat(activeMode), hasActive && active && isPresetActiveMode), _defineProperty(_classNames, "Tappable--focus-visible", focusVisible), _classNames));
   var handlers = {
-    onStart: onStart,
-    onMove: onMove,
-    onEnd: onEnd,
+    onStart: callMultiple(onStart, props.onStart),
+    onMove: callMultiple(onMove, props.onMove),
+    onEnd: callMultiple(onEnd, props.onEnd),
     onClick: onClick,
-    onKeyDown: onKeyDown
+    onKeyDown: callMultiple(onKeyDown, _onKeyDown)
   };
-  var role = props.href ? 'link' : 'button';
+  var role = props.href ? "link" : "button";
   return createScopedElement(Touch, _extends({
     onEnter: function onEnter() {
       return setHovered(true);
@@ -280,7 +284,7 @@ var Tappable = function Tappable(_ref) {
     onLeave: function onLeave() {
       return setHovered(false);
     },
-    type: Component === 'button' ? 'button' : undefined,
+    type: Component === "button" ? "button" : undefined,
     tabIndex: isCustomElement && !props.disabled ? 0 : undefined,
     role: isCustomElement ? role : undefined,
     "aria-disabled": isCustomElement ? props.disabled : null,
@@ -290,10 +294,12 @@ var Tappable = function Tappable(_ref) {
     usePointerHover: true,
     vkuiClass: classes,
     Component: Component,
-    getRootRef: containerRef
+    getRootRef: containerRef,
+    onBlur: callMultiple(onBlur, props.onBlur),
+    onFocus: callMultiple(onFocus, props.onFocus)
   }, props.disabled ? {} : handlers), createScopedElement(TappableContext.Provider, {
     value: childContext
-  }, children), platform === ANDROID && !hasMouse && hasActive && activeMode === 'background' && createScopedElement("span", {
+  }, children), platform === ANDROID && !hasMouse && hasActive && activeMode === "background" && createScopedElement("span", {
     "aria-hidden": "true",
     vkuiClass: "Tappable__waves"
   }, clicks.map(function (wave) {
@@ -305,10 +311,10 @@ var Tappable = function Tappable(_ref) {
         }));
       }
     }));
-  })), hasHover && hoverMode === 'background' && createScopedElement("span", {
+  })), hasHover && hoverMode === "background" && createScopedElement("span", {
     "aria-hidden": "true",
     vkuiClass: "Tappable__hoverShadow"
-  }), !props.disabled && createScopedElement(FocusVisible, {
+  }), !props.disabled && isPresetFocusVisibleMode && createScopedElement(FocusVisible, {
     mode: focusVisibleMode
   }));
 };