@vkontakte/vkui 4.34.2 → 4.35.0

package/dist/cjs/components/SplitCol/SplitCol.js

@@ -7,7 +7,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SplitColContext = exports.SplitCol = void 0;
+exports.useSplitCol = exports.SplitColContext = exports.SplitCol = void 0;
 
 var _jsxRuntime = require("../../lib/jsxRuntime");
 
@@ -32,6 +32,12 @@ var SplitColContext = /*#__PURE__*/React.createContext({
 });
 exports.SplitColContext = SplitColContext;
 
+var useSplitCol = function useSplitCol() {
+  return React.useContext(SplitColContext);
+};
+
+exports.useSplitCol = useSplitCol;
+
 /**
  * @see https://vkcom.github.io/VKUI/#/SplitCol
  */

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"names":["SplitColContext","React","createContext","colRef","animate","SplitCol","children","width","maxWidth","minWidth","spaced","fixed","style","restProps","baseRef","useRef","fixedInnerRef","contextValue","useMemo","fixedInner","current","noop","top","offsetTop"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;AAQO,IAAMA,eAAe,gBAAGC,KAAK,CAACC,aAAN,CAA0C;AACvEC,EAAAA,MAAM,EAAE,IAD+D;AAEvEC,EAAAA,OAAO,EAAE;AAF8D,CAA1C,CAAxB;;;AAoBP;AACA;AACA;AACO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAUH;AAAA,MATnBC,QASmB,QATnBA,QASmB;AAAA,MARnBC,KAQmB,QARnBA,KAQmB;AAAA,MAPnBC,QAOmB,QAPnBA,QAOmB;AAAA,MANnBC,QAMmB,QANnBA,QAMmB;AAAA,MALnBC,MAKmB,QALnBA,MAKmB;AAAA,0BAJnBN,OAImB;AAAA,MAJnBA,OAImB,6BAJT,KAIS;AAAA,MAHnBO,KAGmB,QAHnBA,KAGmB;AAAA,MAFnBC,KAEmB,QAFnBA,KAEmB;AAAA,MADhBC,SACgB;AACnB,MAAMC,OAAO,GAAGb,KAAK,CAACc,MAAN,CAA6B,IAA7B,CAAhB;AAEA,MAAMC,aAAa,GAAGf,KAAK,CAACc,MAAN,CAA6B,IAA7B,CAAtB;AAEA,MAAME,YAAY,GAAGhB,KAAK,CAACiB,OAAN,CAAc,YAAM;AACvC,WAAO;AACLf,MAAAA,MAAM,EAAEW,OADH;AAELV,MAAAA,OAAO,EAAPA;AAFK,KAAP;AAID,GALoB,EAKlB,CAACU,OAAD,EAAUV,OAAV,CALkB,CAArB;AAOA,0CAAoB,YAAM;AACxB,QAAMe,UAAU,GAAGH,aAAa,CAACI,OAAjC;;AACA,QAAI,CAACD,UAAL,EAAiB;AACf,aAAOE,WAAP;AACD;;AAEDF,IAAAA,UAAU,CAACP,KAAX,CAAiBU,GAAjB,aAA0BH,UAAU,CAACI,SAArC;AAEA,WAAO,YAAM;AACXJ,MAAAA,UAAU,CAACP,KAAX,CAAiBU,GAAjB,GAAuB,EAAvB;AACD,KAFD;AAGD,GAXD,EAWG,CAACN,aAAa,CAACI,OAAf,CAXH;AAaA,SACE,uEACMP,SADN;AAEE,IAAA,KAAK,8DACAD,KADA;AAEHL,MAAAA,KAAK,EAAEA,KAFJ;AAGHC,MAAAA,QAAQ,EAAEA,QAHP;AAIHC,MAAAA,QAAQ,EAAEA;AAJP,MAFP;AAQE,IAAA,GAAG,EAAEK,OARP;AASE,IAAA,SAAS,EAAE,4BACT,UADS,EAETJ,MAAM,IAAI,kBAFD,EAGTC,KAAK,IAAI,iBAHA;AATb,MAeE,qCAAC,eAAD,CAAiB,QAAjB;AAA0B,IAAA,KAAK,EAAEM;AAAjC,KACGN,KAAK,GACJ;AAAK,IAAA,GAAG,EAAEK,aAAV;AAAyB,IAAA,SAAS,EAAC;AAAnC,KACGV,QADH,CADI,GAKJA,QANJ,CAfF,CADF;AA2BD,CA9DM","sourcesContent":["import * as React from \"react\";\nimport { useScrollLockEffect } from \"../AppRoot/ScrollContext\";\nimport { classNames } from \"../../lib/classNames\";\nimport { noop } from \"../../lib/utils\";\nimport \"./SplitCol.css\";\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   */\n  spaced?: boolean;\n  fixed?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = ({\n  children,\n  width,\n  maxWidth,\n  minWidth,\n  spaced,\n  animate = false,\n  fixed,\n  style,\n  ...restProps\n}: SplitColProps) => {\n  const baseRef = React.useRef<HTMLDivElement>(null);\n\n  const fixedInnerRef = React.useRef<HTMLDivElement>(null);\n\n  const contextValue = React.useMemo(() => {\n    return {\n      colRef: baseRef,\n      animate,\n    };\n  }, [baseRef, animate]);\n\n  useScrollLockEffect(() => {\n    const fixedInner = fixedInnerRef.current;\n    if (!fixedInner) {\n      return noop;\n    }\n\n    fixedInner.style.top = `${fixedInner.offsetTop}px`;\n\n    return () => {\n      fixedInner.style.top = \"\";\n    };\n  }, [fixedInnerRef.current]);\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      vkuiClass={classNames(\n        \"SplitCol\",\n        spaced && \"SplitCol--spaced\",\n        fixed && \"SplitCol--fixed\"\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? (\n          <div ref={fixedInnerRef} vkuiClass=\"SplitCol__fixedInner\">\n            {children}\n          </div>\n        ) : (\n          children\n        )}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"file":"SplitCol.js"}
+{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"names":["SplitColContext","React","createContext","colRef","animate","useSplitCol","useContext","SplitCol","children","width","maxWidth","minWidth","spaced","fixed","style","restProps","baseRef","useRef","fixedInnerRef","contextValue","useMemo","fixedInner","current","noop","top","offsetTop"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;AAQO,IAAMA,eAAe,gBAAGC,KAAK,CAACC,aAAN,CAA0C;AACvEC,EAAAA,MAAM,EAAE,IAD+D;AAEvEC,EAAAA,OAAO,EAAE;AAF8D,CAA1C,CAAxB;;;AAKA,IAAMC,WAAW,GAAG,SAAdA,WAAc;AAAA,SAAMJ,KAAK,CAACK,UAAN,CAAiBN,eAAjB,CAAN;AAAA,CAApB;;;;AAiBP;AACA;AACA;AACO,IAAMO,QAAQ,GAAG,SAAXA,QAAW,OAUH;AAAA,MATnBC,QASmB,QATnBA,QASmB;AAAA,MARnBC,KAQmB,QARnBA,KAQmB;AAAA,MAPnBC,QAOmB,QAPnBA,QAOmB;AAAA,MANnBC,QAMmB,QANnBA,QAMmB;AAAA,MALnBC,MAKmB,QALnBA,MAKmB;AAAA,0BAJnBR,OAImB;AAAA,MAJnBA,OAImB,6BAJT,KAIS;AAAA,MAHnBS,KAGmB,QAHnBA,KAGmB;AAAA,MAFnBC,KAEmB,QAFnBA,KAEmB;AAAA,MADhBC,SACgB;AACnB,MAAMC,OAAO,GAAGf,KAAK,CAACgB,MAAN,CAA6B,IAA7B,CAAhB;AAEA,MAAMC,aAAa,GAAGjB,KAAK,CAACgB,MAAN,CAA6B,IAA7B,CAAtB;AAEA,MAAME,YAAY,GAAGlB,KAAK,CAACmB,OAAN,CAAc,YAAM;AACvC,WAAO;AACLjB,MAAAA,MAAM,EAAEa,OADH;AAELZ,MAAAA,OAAO,EAAPA;AAFK,KAAP;AAID,GALoB,EAKlB,CAACY,OAAD,EAAUZ,OAAV,CALkB,CAArB;AAOA,0CAAoB,YAAM;AACxB,QAAMiB,UAAU,GAAGH,aAAa,CAACI,OAAjC;;AACA,QAAI,CAACD,UAAL,EAAiB;AACf,aAAOE,WAAP;AACD;;AAEDF,IAAAA,UAAU,CAACP,KAAX,CAAiBU,GAAjB,aAA0BH,UAAU,CAACI,SAArC;AAEA,WAAO,YAAM;AACXJ,MAAAA,UAAU,CAACP,KAAX,CAAiBU,GAAjB,GAAuB,EAAvB;AACD,KAFD;AAGD,GAXD,EAWG,CAACN,aAAa,CAACI,OAAf,CAXH;AAaA,SACE,uEACMP,SADN;AAEE,IAAA,KAAK,8DACAD,KADA;AAEHL,MAAAA,KAAK,EAAEA,KAFJ;AAGHC,MAAAA,QAAQ,EAAEA,QAHP;AAIHC,MAAAA,QAAQ,EAAEA;AAJP,MAFP;AAQE,IAAA,GAAG,EAAEK,OARP;AASE,IAAA,SAAS,EAAE,4BACT,UADS,EAETJ,MAAM,IAAI,kBAFD,EAGTC,KAAK,IAAI,iBAHA;AATb,MAeE,qCAAC,eAAD,CAAiB,QAAjB;AAA0B,IAAA,KAAK,EAAEM;AAAjC,KACGN,KAAK,GACJ;AAAK,IAAA,GAAG,EAAEK,aAAV;AAAyB,IAAA,SAAS,EAAC;AAAnC,KACGV,QADH,CADI,GAKJA,QANJ,CAfF,CADF;AA2BD,CA9DM","sourcesContent":["import * as React from \"react\";\nimport { useScrollLockEffect } from \"../AppRoot/ScrollContext\";\nimport { classNames } from \"../../lib/classNames\";\nimport { noop } from \"../../lib/utils\";\nimport \"./SplitCol.css\";\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   */\n  spaced?: boolean;\n  fixed?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = ({\n  children,\n  width,\n  maxWidth,\n  minWidth,\n  spaced,\n  animate = false,\n  fixed,\n  style,\n  ...restProps\n}: SplitColProps) => {\n  const baseRef = React.useRef<HTMLDivElement>(null);\n\n  const fixedInnerRef = React.useRef<HTMLDivElement>(null);\n\n  const contextValue = React.useMemo(() => {\n    return {\n      colRef: baseRef,\n      animate,\n    };\n  }, [baseRef, animate]);\n\n  useScrollLockEffect(() => {\n    const fixedInner = fixedInnerRef.current;\n    if (!fixedInner) {\n      return noop;\n    }\n\n    fixedInner.style.top = `${fixedInner.offsetTop}px`;\n\n    return () => {\n      fixedInner.style.top = \"\";\n    };\n  }, [fixedInnerRef.current]);\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      vkuiClass={classNames(\n        \"SplitCol\",\n        spaced && \"SplitCol--spaced\",\n        fixed && \"SplitCol--fixed\"\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? (\n          <div ref={fixedInnerRef} vkuiClass=\"SplitCol__fixedInner\">\n            {children}\n          </div>\n        ) : (\n          children\n        )}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"file":"SplitCol.js"}

package/dist/cjs/components/SplitLayout/SplitLayout.js

@@ -13,10 +13,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _getClassName = require("../../helpers/getClassName");
-
 var _classNames = require("../../lib/classNames");
 
+var _platform = require("../../lib/platform");
+
 var _PopoutRoot = require("../PopoutRoot/PopoutRoot");
 
 var _usePlatform = require("../../hooks/usePlatform");
@@ -36,16 +36,13 @@ var SplitLayout = function SplitLayout(_ref) {
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
   return (0, _jsxRuntime.createScopedElement)(_PopoutRoot.PopoutRoot, {
-    vkuiClass: (0, _getClassName.getClassName)("SplitLayout", platform),
+    vkuiClass: (0, _classNames.classNames)("SplitLayout", platform === _platform.IOS && "SplitLayout--ios"),
     popout: popout,
     modal: modal,
     getRootRef: getRootRef
   }, header, (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, restProps, {
-    ref: getRef // eslint-disable-next-line vkui/no-object-expression-in-arguments
-    ,
-    vkuiClass: (0, _classNames.classNames)("SplitLayout__inner", {
-      "SplitLayout__inner--header": !!header
-    })
+    ref: getRef,
+    vkuiClass: (0, _classNames.classNames)("SplitLayout__inner", !!header && "SplitLayout__inner--header")
   }), children));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"names":["SplitLayout","popout","modal","header","children","getRootRef","getRef","restProps","platform"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AAEA;;AACA;;;;AAkBA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAQH;AAAA,MAPtBC,MAOsB,QAPtBA,MAOsB;AAAA,MANtBC,KAMsB,QANtBA,KAMsB;AAAA,MALtBC,MAKsB,QALtBA,MAKsB;AAAA,MAJtBC,QAIsB,QAJtBA,QAIsB;AAAA,MAHtBC,UAGsB,QAHtBA,UAGsB;AAAA,MAFtBC,MAEsB,QAFtBA,MAEsB;AAAA,MADnBC,SACmB;AACtB,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,SACE,qCAAC,sBAAD;AACE,IAAA,SAAS,EAAE,gCAAa,aAAb,EAA4BA,QAA5B,CADb;AAEE,IAAA,MAAM,EAAEP,MAFV;AAGE,IAAA,KAAK,EAAEC,KAHT;AAIE,IAAA,UAAU,EAAEG;AAJd,KAMGF,MANH,EAOE,uEACMI,SADN;AAEE,IAAA,GAAG,EAAED,MAFP,CAGE;AAHF;AAIE,IAAA,SAAS,EAAE,4BAAW,oBAAX,EAAiC;AAC1C,oCAA8B,CAAC,CAACH;AADU,KAAjC;AAJb,MAQGC,QARH,CAPF,CADF;AAoBD,CA/BM","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { PopoutRoot } from \"../PopoutRoot/PopoutRoot\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport \"./SplitLayout.css\";\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      vkuiClass={getClassName(\"SplitLayout\", platform)}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        // eslint-disable-next-line vkui/no-object-expression-in-arguments\n        vkuiClass={classNames(\"SplitLayout__inner\", {\n          \"SplitLayout__inner--header\": !!header,\n        })}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"file":"SplitLayout.js"}
+{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"names":["SplitLayout","popout","modal","header","children","getRootRef","getRef","restProps","platform","IOS"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AAEA;;AACA;;;;AAkBA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAQH;AAAA,MAPtBC,MAOsB,QAPtBA,MAOsB;AAAA,MANtBC,KAMsB,QANtBA,KAMsB;AAAA,MALtBC,MAKsB,QALtBA,MAKsB;AAAA,MAJtBC,QAIsB,QAJtBA,QAIsB;AAAA,MAHtBC,UAGsB,QAHtBA,UAGsB;AAAA,MAFtBC,MAEsB,QAFtBA,MAEsB;AAAA,MADnBC,SACmB;AACtB,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,SACE,qCAAC,sBAAD;AACE,IAAA,SAAS,EAAE,4BACT,aADS,EAETA,QAAQ,KAAKC,aAAb,IAAoB,kBAFX,CADb;AAKE,IAAA,MAAM,EAAER,MALV;AAME,IAAA,KAAK,EAAEC,KANT;AAOE,IAAA,UAAU,EAAEG;AAPd,KASGF,MATH,EAUE,uEACMI,SADN;AAEE,IAAA,GAAG,EAAED,MAFP;AAGE,IAAA,SAAS,EAAE,4BACT,oBADS,EAET,CAAC,CAACH,MAAF,IAAY,4BAFH;AAHb,MAQGC,QARH,CAVF,CADF;AAuBD,CAlCM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { IOS } from \"../../lib/platform\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { PopoutRoot } from \"../PopoutRoot/PopoutRoot\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport \"./SplitLayout.css\";\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      vkuiClass={classNames(\n        \"SplitLayout\",\n        platform === IOS && \"SplitLayout--ios\"\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        vkuiClass={classNames(\n          \"SplitLayout__inner\",\n          !!header && \"SplitLayout__inner--header\"\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"file":"SplitLayout.js"}

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

@@ -23,32 +23,33 @@ var _usePlatform = require("../../hooks/usePlatform");
 
 var _platform = require("../../lib/platform");
 
-var _excluded = ["children", "shadow", "itemsLayout"];
+var _excluded = ["children", "shadow", "itemsLayout", "mode"];
 
+var getItemsLayout = function getItemsLayout(itemsLayout, children) {
+  switch (itemsLayout) {
+    case "horizontal":
+    case "vertical":
+      return itemsLayout;
+
+    default:
+      return React.Children.count(children) > 2 ? "vertical" : "horizontal";
+  }
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabbar
  */
+
+
 var Tabbar = function Tabbar(_ref) {
   var children = _ref.children,
       _ref$shadow = _ref.shadow,
       shadow = _ref$shadow === void 0 ? true : _ref$shadow,
       itemsLayout = _ref.itemsLayout,
+      mode = _ref.mode,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
-
-  var getItemsLayout = function getItemsLayout() {
-    switch (itemsLayout) {
-      case "horizontal":
-      case "vertical":
-        return itemsLayout;
-
-      default:
-        return React.Children.count(children) > 2 ? "vertical" : "horizontal";
-    }
-  };
-
   return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({
-    vkuiClass: (0, _classNames.classNames)("Tabbar", platform === _platform.Platform.IOS && "Tabbar--ios", "Tabbar--l-".concat(getItemsLayout()), shadow && "Tabbar--shadow")
+    vkuiClass: (0, _classNames.classNames)("Tabbar", platform === _platform.Platform.IOS && "Tabbar--ios", "Tabbar--l-".concat(getItemsLayout(itemsLayout !== null && itemsLayout !== void 0 ? itemsLayout : mode, children)), shadow && "Tabbar--shadow")
   }, restProps), (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "Tabbar__in"
   }, children));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"names":["Tabbar","children","shadow","itemsLayout","restProps","platform","getItemsLayout","React","Children","count","Platform","IOS"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAWA;AACA;AACA;AACO,IAAMA,MAAM,GAAG,SAATA,MAAS,OAKH;AAAA,MAJjBC,QAIiB,QAJjBA,QAIiB;AAAA,yBAHjBC,MAGiB;AAAA,MAHjBA,MAGiB,4BAHR,IAGQ;AAAA,MAFjBC,WAEiB,QAFjBA,WAEiB;AAAA,MADdC,SACc;AACjB,MAAMC,QAAQ,GAAG,+BAAjB;;AAEA,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,YAAQH,WAAR;AACE,WAAK,YAAL;AACA,WAAK,UAAL;AACE,eAAOA,WAAP;;AACF;AACE,eAAOI,KAAK,CAACC,QAAN,CAAeC,KAAf,CAAqBR,QAArB,IAAiC,CAAjC,GAAqC,UAArC,GAAkD,YAAzD;AALJ;AAOD,GARD;;AAUA,SACE;AACE,IAAA,SAAS,EAAE,4BACT,QADS,EAETI,QAAQ,KAAKK,mBAASC,GAAtB,IAA6B,aAFpB,sBAGIL,cAAc,EAHlB,GAITJ,MAAM,IAAI,gBAJD;AADb,KAOME,SAPN,GASE;AAAK,IAAA,SAAS,EAAC;AAAf,KAA6BH,QAA7B,CATF,CADF;AAaD,CA/BM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\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\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({\n  children,\n  shadow = true,\n  itemsLayout,\n  ...restProps\n}: TabbarProps) => {\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        \"Tabbar\",\n        platform === Platform.IOS && \"Tabbar--ios\",\n        `Tabbar--l-${getItemsLayout()}`,\n        shadow && \"Tabbar--shadow\"\n      )}\n      {...restProps}\n    >\n      <div vkuiClass=\"Tabbar__in\">{children}</div>\n    </div>\n  );\n};\n"],"file":"Tabbar.js"}
+{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"names":["getItemsLayout","itemsLayout","children","React","Children","count","Tabbar","shadow","mode","restProps","platform","Platform","IOS"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAkBA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CACrBC,WADqB,EAErBC,QAFqB,EAGlB;AACH,UAAQD,WAAR;AACE,SAAK,YAAL;AACA,SAAK,UAAL;AACE,aAAOA,WAAP;;AACF;AACE,aAAOE,KAAK,CAACC,QAAN,CAAeC,KAAf,CAAqBH,QAArB,IAAiC,CAAjC,GAAqC,UAArC,GAAkD,YAAzD;AALJ;AAOD,CAXD;AAaA;AACA;AACA;;;AACO,IAAMI,MAAM,GAAG,SAATA,MAAS,OAMH;AAAA,MALjBJ,QAKiB,QALjBA,QAKiB;AAAA,yBAJjBK,MAIiB;AAAA,MAJjBA,MAIiB,4BAJR,IAIQ;AAAA,MAHjBN,WAGiB,QAHjBA,WAGiB;AAAA,MAFjBO,IAEiB,QAFjBA,IAEiB;AAAA,MADdC,SACc;AACjB,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,SACE;AACE,IAAA,SAAS,EAAE,4BACT,QADS,EAETA,QAAQ,KAAKC,mBAASC,GAAtB,IAA6B,aAFpB,sBAGIZ,cAAc,CAACC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgBO,IAAhB,EAAsBN,QAAtB,CAHlB,GAITK,MAAM,IAAI,gBAJD;AADb,KAOME,SAPN,GASE;AAAK,IAAA,SAAS,EAAC;AAAf,KAA6BP,QAA7B,CATF,CADF;AAaD,CAtBM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\nimport \"./Tabbar.css\";\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  /**\n   * @deprecated будет удалено в 5.0.0. Используйте `mode`\n   */\n  itemsLayout?: \"vertical\" | \"horizontal\" | \"auto\"; // TODO v5.0.0 удалить, будет использоваться mode\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: \"vertical\" | \"horizontal\" | \"auto\";\n}\n\nconst getItemsLayout = (\n  itemsLayout: TabbarProps[\"mode\"],\n  children: TabbarProps[\"children\"]\n) => {\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/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({\n  children,\n  shadow = true,\n  itemsLayout,\n  mode,\n  ...restProps\n}: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      vkuiClass={classNames(\n        \"Tabbar\",\n        platform === Platform.IOS && \"Tabbar--ios\",\n        `Tabbar--l-${getItemsLayout(itemsLayout ?? mode, children)}`,\n        shadow && \"Tabbar--shadow\"\n      )}\n      {...restProps}\n    >\n      <div vkuiClass=\"Tabbar__in\">{children}</div>\n    </div>\n  );\n};\n"],"file":"Tabbar.js"}

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

@@ -13,8 +13,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _getClassName = require("../../helpers/getClassName");
-
 var _Counter = require("../Counter/Counter");
 
 var _classNames = require("../../lib/classNames");
@@ -25,6 +23,8 @@ var _utils = require("../../lib/utils");
 
 var _Tappable = require("../Tappable/Tappable");
 
+var _Footnote = require("../Typography/Footnote/Footnote");
+
 var _platform = require("../../lib/platform");
 
 var _warnOnce = require("../../lib/warnOnce");
@@ -54,12 +54,8 @@ var TabbarItem = function TabbarItem(_ref) {
 
   return (0, _jsxRuntime.createScopedElement)(Component, (0, _extends2.default)({}, restProps, {
     disabled: disabled,
-    href: href // eslint-disable-next-line vkui/no-object-expression-in-arguments
-    ,
-    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("TabbarItem", platform), {
-      "TabbarItem--selected": selected,
-      "TabbarItem--text": !!text
-    })
+    href: href,
+    vkuiClass: (0, _classNames.classNames)("TabbarItem", platform === _platform.Platform.IOS && "TabbarItem--ios", platform === _platform.Platform.ANDROID && "TabbarItem--android", selected && "TabbarItem--selected", !!text && "TabbarItem--text")
   }), (0, _jsxRuntime.createScopedElement)(_Tappable.Tappable, {
     role: "presentation",
     Component: "div",
@@ -77,8 +73,10 @@ var TabbarItem = function TabbarItem(_ref) {
   }, (0, _utils.hasReactNode)(indicator) && indicator, !indicator && label && (0, _jsxRuntime.createScopedElement)(_Counter.Counter, {
     size: "s",
     mode: "prominent"
-  }, label))), text && (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: "TabbarItem__text"
+  }, label))), text && (0, _jsxRuntime.createScopedElement)(_Footnote.Footnote, {
+    Component: "div",
+    vkuiClass: "TabbarItem__text",
+    weight: "2"
   }, text)));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"names":["warn","TabbarItem","children","selected","label","indicator","text","href","Component","disabled","restProps","platform","process","env","NODE_ENV","Platform","IOS"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;AAsBA,IAAMA,IAAI,GAAG,wBAAS,YAAT,CAAb;AAEA;AACA;AACA;;AACO,IAAMC,UAAU,GAAG,SAAbA,UAAa,OAUH;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,GAAG,+BAAjB;;AAEA,MAAIP,KAAK,IAAIQ,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAtC,EAAqD;AACnDd,IAAAA,IAAI,CACF,yEADE,CAAJ;AAGD;;AAED,SACE,qCAAC,SAAD,6BACMU,SADN;AAEE,IAAA,QAAQ,EAAED,QAFZ;AAGE,IAAA,IAAI,EAAEF,IAHR,CAIE;AAJF;AAKE,IAAA,SAAS,EAAE,4BAAW,gCAAa,YAAb,EAA2BI,QAA3B,CAAX,EAAiD;AAC1D,8BAAwBR,QADkC;AAE1D,0BAAoB,CAAC,CAACG;AAFoC,KAAjD;AALb,MAUE,qCAAC,kBAAD;AACE,IAAA,IAAI,EAAC,cADP;AAEE,IAAA,SAAS,EAAC,KAFZ;AAGE,IAAA,QAAQ,EAAEG,QAHZ;AAIE,IAAA,UAAU,EACRE,QAAQ,KAAKI,mBAASC,GAAtB,GACI,8BADJ,GAEI,YAPR;AASE,IAAA,iBAAiB,EAAEL,QAAQ,KAAKI,mBAASC,GAAtB,GAA4B,CAA5B,GAAgC,GATrD;AAUE,IAAA,QAAQ,EAAE,KAVZ;AAWE,IAAA,SAAS,EAAC;AAXZ,IAVF,EAuBE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGd,QADH,EAEE;AAAK,IAAA,SAAS,EAAC;AAAf,KACG,yBAAaG,SAAb,KAA2BA,SAD9B,EAEG,CAACA,SAAD,IAAcD,KAAd,IACC,qCAAC,gBAAD;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,CAvBF,CADF;AAwCD,CA3DM","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 { warnOnce } from \"../../lib/warnOnce\";\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 warn = warnOnce(\"TabbarItem\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\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  if (label && process.env.NODE_ENV === \"development\") {\n    warn(\n      \"Свойство label устарело и будет удалено в 5.0.0. Используйте indicator.\"\n    );\n  }\n\n  return (\n    <Component\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      // eslint-disable-next-line vkui/no-object-expression-in-arguments\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"],"file":"TabbarItem.js"}
+{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"names":["warn","TabbarItem","children","selected","label","indicator","text","href","Component","disabled","restProps","platform","process","env","NODE_ENV","Platform","IOS","ANDROID"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;AAsBA,IAAMA,IAAI,GAAG,wBAAS,YAAT,CAAb;AAEA;AACA;AACA;;AACO,IAAMC,UAAU,GAAG,SAAbA,UAAa,OAUH;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,GAAG,+BAAjB;;AAEA,MAAIP,KAAK,IAAIQ,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAtC,EAAqD;AACnDd,IAAAA,IAAI,CACF,yEADE,CAAJ;AAGD;;AAED,SACE,qCAAC,SAAD,6BACMU,SADN;AAEE,IAAA,QAAQ,EAAED,QAFZ;AAGE,IAAA,IAAI,EAAEF,IAHR;AAIE,IAAA,SAAS,EAAE,4BACT,YADS,EAETI,QAAQ,KAAKI,mBAASC,GAAtB,IAA6B,iBAFpB,EAGTL,QAAQ,KAAKI,mBAASE,OAAtB,IAAiC,qBAHxB,EAITd,QAAQ,IAAI,sBAJH,EAKT,CAAC,CAACG,IAAF,IAAU,kBALD;AAJb,MAYE,qCAAC,kBAAD;AACE,IAAA,IAAI,EAAC,cADP;AAEE,IAAA,SAAS,EAAC,KAFZ;AAGE,IAAA,QAAQ,EAAEG,QAHZ;AAIE,IAAA,UAAU,EACRE,QAAQ,KAAKI,mBAASC,GAAtB,GACI,8BADJ,GAEI,YAPR;AASE,IAAA,iBAAiB,EAAEL,QAAQ,KAAKI,mBAASC,GAAtB,GAA4B,CAA5B,GAAgC,GATrD;AAUE,IAAA,QAAQ,EAAE,KAVZ;AAWE,IAAA,SAAS,EAAC;AAXZ,IAZF,EAyBE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGd,QADH,EAEE;AAAK,IAAA,SAAS,EAAC;AAAf,KACG,yBAAaG,SAAb,KAA2BA,SAD9B,EAEG,CAACA,SAAD,IAAcD,KAAd,IACC,qCAAC,gBAAD;AAAS,IAAA,IAAI,EAAC,GAAd;AAAkB,IAAA,IAAI,EAAC;AAAvB,KACGA,KADH,CAHJ,CAFF,CADF,EAYGE,IAAI,IACH,qCAAC,kBAAD;AAAU,IAAA,SAAS,EAAC,KAApB;AAA0B,IAAA,SAAS,EAAC,kBAApC;AAAuD,IAAA,MAAM,EAAC;AAA9D,KACGA,IADH,CAbJ,CAzBF,CADF;AA8CD,CAjEM","sourcesContent":["import * as React from \"react\";\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 { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Platform } from \"../../lib/platform\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { warnOnce } from \"../../lib/warnOnce\";\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 warn = warnOnce(\"TabbarItem\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\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  if (label && process.env.NODE_ENV === \"development\") {\n    warn(\n      \"Свойство label устарело и будет удалено в 5.0.0. Используйте indicator.\"\n    );\n  }\n\n  return (\n    <Component\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      vkuiClass={classNames(\n        \"TabbarItem\",\n        platform === Platform.IOS && \"TabbarItem--ios\",\n        platform === Platform.ANDROID && \"TabbarItem--android\",\n        selected && \"TabbarItem--selected\",\n        !!text && \"TabbarItem--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 && (\n          <Footnote Component=\"div\" vkuiClass=\"TabbarItem__text\" weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"file":"TabbarItem.js"}

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

@@ -17,8 +17,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var React = _interopRequireWildcard(require("react"));
 
-var _getClassName = require("../../helpers/getClassName");
-
 var _classNames = require("../../lib/classNames");
 
 var _usePlatform = require("../../hooks/usePlatform");
@@ -27,8 +25,14 @@ var _platform = require("../../lib/platform");
 
 var _withAdaptivity = require("../../hoc/withAdaptivity");
 
+var _warnOnce = require("../../lib/warnOnce");
+
 var _excluded = ["children", "mode", "getRootRef", "sizeX"];
-var TabsModeContext = /*#__PURE__*/React.createContext("default");
+var warn = (0, _warnOnce.warnOnce)("Tabs");
+var TabsModeContext = /*#__PURE__*/React.createContext({
+  mode: "default",
+  withGaps: false
+});
 exports.TabsModeContext = TabsModeContext;
 
 var TabsComponent = function TabsComponent(_ref) {
@@ -40,17 +44,31 @@ var TabsComponent = function TabsComponent(_ref) {
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
 
+  if ((mode === "buttons" || mode === "segmented") && process.env.NODE_ENV === "development") {
+    var expectedValueText = mode === "buttons" ? "\u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F \"secondary\"" : "компонент SegmentedControl";
+    warn("mode=\"".concat(mode, "\" \u0443\u0441\u0442\u0430\u0440\u0435\u043B\u043E \u0438 \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u0430\u043B\u0435\u043D\u043E \u0432 5.0.0. \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 ").concat(expectedValueText));
+  }
+
   if (platform !== _platform.IOS && mode === "segmented") {
     mode = "default";
   }
 
+  if (mode === "buttons") {
+    mode = "secondary";
+  }
+
+  var withGaps = mode === "accent" || mode === "secondary";
   return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, restProps, {
     ref: getRootRef,
-    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("Tabs", platform), "Tabs--".concat(mode), "Tabs--sizeX-".concat(sizeX))
+    vkuiClass: (0, _classNames.classNames)("Tabs", (platform === _platform.IOS || platform === _platform.VKCOM) && "Tabs--".concat(platform), "Tabs--".concat(mode), withGaps && "Tabs--withGaps", // TODO v5.0.0 новая адаптивность
+    "Tabs--sizeX-".concat(sizeX))
   }), (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "Tabs__in"
   }, (0, _jsxRuntime.createScopedElement)(TabsModeContext.Provider, {
-    value: mode
+    value: {
+      mode: mode,
+      withGaps: withGaps
+    }
   }, children)));
 };
 /**

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":["TabsModeContext","React","createContext","TabsComponent","children","mode","getRootRef","sizeX","restProps","platform","IOS","Tabs","displayName"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;AAUO,IAAMA,eAAe,gBAC1BC,KAAK,CAACC,aAAN,CAAuC,SAAvC,CADK;;;AAGP,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAML;AAAA,MALfC,QAKe,QALfA,QAKe;AAAA,uBAJfC,IAIe;AAAA,MAJfA,IAIe,0BAJR,SAIQ;AAAA,MAHfC,UAGe,QAHfA,UAGe;AAAA,MAFfC,KAEe,QAFfA,KAEe;AAAA,MADZC,SACY;AACf,MAAMC,QAAQ,GAAG,+BAAjB;;AAEA,MAAIA,QAAQ,KAAKC,aAAb,IAAoBL,IAAI,KAAK,WAAjC,EAA8C;AAC5CA,IAAAA,IAAI,GAAG,SAAP;AACD;;AAED,SACE,uEACMG,SADN;AAEE,IAAA,GAAG,EAAEF,UAFP;AAGE,IAAA,SAAS,EAAE,4BACT,gCAAa,MAAb,EAAqBG,QAArB,CADS,kBAEAJ,IAFA,yBAGME,KAHN;AAHb,MASE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE,qCAAC,eAAD,CAAiB,QAAjB;AAA0B,IAAA,KAAK,EAAEF;AAAjC,KACGD,QADH,CADF,CATF,CADF;AAiBD,CA9BD;AAgCA;AACA;AACA;;;AACO,IAAMO,IAAI,GAAG,oCAAeR,aAAf,EAA8B;AAAEI,EAAAA,KAAK,EAAE;AAAT,CAA9B,CAAb;;AAEPI,IAAI,CAACC,WAAL,GAAmB,MAAnB","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 TabsComponent = ({\n  children,\n  mode = \"default\",\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\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = withAdaptivity(TabsComponent, { sizeX: true });\n\nTabs.displayName = \"Tabs\";\n"],"file":"Tabs.js"}
+{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":["warn","TabsModeContext","React","createContext","mode","withGaps","TabsComponent","children","getRootRef","sizeX","restProps","platform","process","env","NODE_ENV","expectedValueText","IOS","VKCOM","Tabs","displayName"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;AAiBA,IAAMA,IAAI,GAAG,wBAAS,MAAT,CAAb;AAOO,IAAMC,eAAe,gBAAGC,KAAK,CAACC,aAAN,CAAsC;AACnEC,EAAAA,IAAI,EAAE,SAD6D;AAEnEC,EAAAA,QAAQ,EAAE;AAFyD,CAAtC,CAAxB;;;AAKP,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAML;AAAA,MALfC,QAKe,QALfA,QAKe;AAAA,uBAJfH,IAIe;AAAA,MAJfA,IAIe,0BAJR,SAIQ;AAAA,MAHfI,UAGe,QAHfA,UAGe;AAAA,MAFfC,KAEe,QAFfA,KAEe;AAAA,MADZC,SACY;AACf,MAAMC,QAAQ,GAAG,+BAAjB;;AAEA,MACE,CAACP,IAAI,KAAK,SAAT,IAAsBA,IAAI,KAAK,WAAhC,KACAQ,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAF3B,EAGE;AACA,QAAMC,iBAAiB,GACrBX,IAAI,KAAK,SAAT,sEAEI,4BAHN;AAIAJ,IAAAA,IAAI,kBACOI,IADP,mOAC8DW,iBAD9D,EAAJ;AAGD;;AAED,MAAIJ,QAAQ,KAAKK,aAAb,IAAoBZ,IAAI,KAAK,WAAjC,EAA8C;AAC5CA,IAAAA,IAAI,GAAG,SAAP;AACD;;AAED,MAAIA,IAAI,KAAK,SAAb,EAAwB;AACtBA,IAAAA,IAAI,GAAG,WAAP;AACD;;AAED,MAAMC,QAAQ,GAAGD,IAAI,KAAK,QAAT,IAAqBA,IAAI,KAAK,WAA/C;AAEA,SACE,uEACMM,SADN;AAEE,IAAA,GAAG,EAAEF,UAFP;AAGE,IAAA,SAAS,EAAE,4BACT,MADS,EAET,CAACG,QAAQ,KAAKK,aAAb,IAAoBL,QAAQ,KAAKM,eAAlC,qBAAqDN,QAArD,CAFS,kBAGAP,IAHA,GAITC,QAAQ,IAAI,gBAJH,EAKT;AALS,0BAMMI,KANN;AAHb,MAYE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE,qCAAC,eAAD,CAAiB,QAAjB;AAA0B,IAAA,KAAK,EAAE;AAAEL,MAAAA,IAAI,EAAJA,IAAF;AAAQC,MAAAA,QAAQ,EAARA;AAAR;AAAjC,KACGE,QADH,CADF,CAZF,CADF;AAoBD,CApDD;AAsDA;AACA;AACA;;;AACO,IAAMW,IAAI,GAAG,oCAAeZ,aAAf,EAA8B;AAAEG,EAAAA,KAAK,EAAE;AAAT,CAA9B,CAAb;;AAEPS,IAAI,CAACC,WAAL,GAAmB,MAAnB","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { IOS, VKCOM } from \"../../lib/platform\";\nimport { withAdaptivity, AdaptivityProps } from \"../../hoc/withAdaptivity\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./Tabs.css\";\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    AdaptivityProps {\n  /**\n   * Задаёт вид кнопок.\n   *\n   * > ⚠️ Значения `\"buttons\"`, `\"segmented\"` устарели и будут удалены в 5.0.0. Вместо `\"buttons\"` используйте `\"secondary\"`.\n   * > Режим `\"segmented\"` переехал в отдельный компонент [`SegmentedControl`](https://vkcom.github.io/VKUI#/SegmentedControl),\n   * > поэтому используйте его вместо `Tabs`.\n   */\n  mode?: \"buttons\" | \"segmented\" | \"default\" | \"accent\" | \"secondary\";\n}\n\nconst warn = warnOnce(\"Tabs\");\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\nconst TabsComponent = ({\n  children,\n  mode = \"default\",\n  getRootRef,\n  sizeX,\n  ...restProps\n}: TabsProps) => {\n  const platform = usePlatform();\n\n  if (\n    (mode === \"buttons\" || mode === \"segmented\") &&\n    process.env.NODE_ENV === \"development\"\n  ) {\n    const expectedValueText =\n      mode === \"buttons\"\n        ? `значения \"secondary\"`\n        : \"компонент SegmentedControl\";\n    warn(\n      `mode=\"${mode}\" устарело и будет удалено в 5.0.0. Используйте ${expectedValueText}`\n    );\n  }\n\n  if (platform !== IOS && mode === \"segmented\") {\n    mode = \"default\";\n  }\n\n  if (mode === \"buttons\") {\n    mode = \"secondary\";\n  }\n\n  const withGaps = mode === \"accent\" || mode === \"secondary\";\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      vkuiClass={classNames(\n        \"Tabs\",\n        (platform === IOS || platform === VKCOM) && `Tabs--${platform}`,\n        `Tabs--${mode}`,\n        withGaps && \"Tabs--withGaps\",\n        // TODO v5.0.0 новая адаптивность\n        `Tabs--sizeX-${sizeX}`\n      )}\n    >\n      <div vkuiClass=\"Tabs__in\">\n        <TabsModeContext.Provider value={{ mode, withGaps }}>\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = withAdaptivity(TabsComponent, { sizeX: true });\n\nTabs.displayName = \"Tabs\";\n"],"file":"Tabs.js"}

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

@@ -17,8 +17,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var React = _interopRequireWildcard(require("react"));
 
-var _getClassName = require("../../helpers/getClassName");
-
 var _Tappable = require("../Tappable/Tappable");
 
 var _classNames = require("../../lib/classNames");
@@ -27,7 +25,7 @@ var _platform = require("../../lib/platform");
 
 var _usePlatform = require("../../hooks/usePlatform");
 
-var _utils = require("../../lib/utils");
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 
 var _Tabs = require("../Tabs/Tabs");
 
@@ -35,42 +33,61 @@ var _Headline = require("../Typography/Headline/Headline");
 
 var _Subhead = require("../Typography/Subhead/Subhead");
 
-var _Text = require("../Typography/Text/Text");
-
-var _excluded = ["children", "selected", "after"];
+var _excluded = ["before", "children", "status", "after", "selected"];
 
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
  */
 var TabsItem = function TabsItem(_ref) {
-  var children = _ref.children,
+  var before = _ref.before,
+      children = _ref.children,
+      status = _ref.status,
+      after = _ref.after,
       _ref$selected = _ref.selected,
       selected = _ref$selected === void 0 ? false : _ref$selected,
-      after = _ref.after,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
-  var mode = React.useContext(_Tabs.TabsModeContext);
-  var ItemTypography = mode === "buttons" || mode === "segmented" ? _Subhead.Subhead : _Headline.Headline;
 
-  if (platform === _platform.VKCOM) {
-    ItemTypography = _Text.Text;
+  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
+      sizeY = _useAdaptivity.sizeY;
+
+  var _React$useContext = React.useContext(_Tabs.TabsModeContext),
+      mode = _React$useContext.mode,
+      withGaps = _React$useContext.withGaps;
+
+  var statusComponent = null;
+
+  if (status) {
+    statusComponent = typeof status === "number" ? (0, _jsxRuntime.createScopedElement)(_Subhead.Subhead, {
+      Component: "span",
+      vkuiClass: "TabsItem__status TabsItem__status--count",
+      weight: "2"
+    }, status) : (0, _jsxRuntime.createScopedElement)("span", {
+      vkuiClass: "TabsItem__status"
+    }, status);
   }
 
   return (0, _jsxRuntime.createScopedElement)(_Tappable.Tappable, (0, _extends2.default)({}, restProps, {
-    // eslint-disable-next-line vkui/no-object-expression-in-arguments
-    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("TabsItem", platform), {
-      "TabsItem--selected": selected
-    }),
-    hasActive: mode === "segmented",
+    vkuiClass: (0, _classNames.classNames)("TabsItem", (platform === _platform.IOS || platform === _platform.VKCOM) && "TabsItem--".concat(platform), mode && "TabsItem--".concat(mode), selected && "TabsItem--selected", // TODO v5.0.0 новая адаптивность
+    sizeY && "TabsItem--sizeY-".concat(sizeY), withGaps && "TabsItem--withGaps"),
+    hoverMode: "TabsItem--hover",
     activeMode: "TabsItem--active",
-    focusVisibleMode: mode === "segmented" ? "outside" : "inside"
-  }), (0, _jsxRuntime.createScopedElement)(ItemTypography, {
+    focusVisibleMode: mode === "segmented" ? "outside" : "inside",
+    hasActive: mode === "segmented"
+  }), before && (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: "TabsItem__before"
+  }, before), (0, _jsxRuntime.createScopedElement)(_Headline.Headline, {
     Component: "span",
-    vkuiClass: "TabsItem__in",
+    vkuiClass: "TabsItem__label",
+    level: mode === "default" ? "1" : "2",
     weight: "2"
-  }, children), (0, _utils.hasReactNode)(after) && (0, _jsxRuntime.createScopedElement)("div", {
+  }, children), statusComponent, after && (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "TabsItem__after"
-  }, after));
+  }, after), mode === "default" && (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: "TabsItem__underline",
+    "aria-hidden": true,
+    "data-selected": selected
+  }));
 };
 
 exports.TabsItem = TabsItem;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"names":["TabsItem","children","selected","after","restProps","platform","mode","React","useContext","TabsModeContext","ItemTypography","Subhead","Headline","VKCOM","Text"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAQA;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,OAKH;AAAA,MAJnBC,QAImB,QAJnBA,QAImB;AAAA,2BAHnBC,QAGmB;AAAA,MAHnBA,QAGmB,8BAHR,KAGQ;AAAA,MAFnBC,KAEmB,QAFnBA,KAEmB;AAAA,MADhBC,SACgB;AACnB,MAAMC,QAAQ,GAAG,+BAAjB;AACA,MAAMC,IAAuB,GAAGC,KAAK,CAACC,UAAN,CAAiBC,qBAAjB,CAAhC;AAEA,MAAIC,cAAc,GAChBJ,IAAI,KAAK,SAAT,IAAsBA,IAAI,KAAK,WAA/B,GAA6CK,gBAA7C,GAAuDC,kBADzD;;AAGA,MAAIP,QAAQ,KAAKQ,eAAjB,EAAwB;AACtBH,IAAAA,cAAc,GAAGI,UAAjB;AACD;;AAED,SACE,qCAAC,kBAAD,6BACMV,SADN;AAEE;AACA,IAAA,SAAS,EAAE,4BAAW,gCAAa,UAAb,EAAyBC,QAAzB,CAAX,EAA+C;AACxD,4BAAsBH;AADkC,KAA/C,CAHb;AAME,IAAA,SAAS,EAAEI,IAAI,KAAK,WANtB;AAOE,IAAA,UAAU,EAAC,kBAPb;AAQE,IAAA,gBAAgB,EAAEA,IAAI,KAAK,WAAT,GAAuB,SAAvB,GAAmC;AARvD,MAUE,qCAAC,cAAD;AAAgB,IAAA,SAAS,EAAC,MAA1B;AAAiC,IAAA,SAAS,EAAC,cAA3C;AAA0D,IAAA,MAAM,EAAC;AAAjE,KACGL,QADH,CAVF,EAaG,yBAAaE,KAAb,KAAuB;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCA,KAAlC,CAb1B,CADF;AAiBD,CAjCM","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\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  children,\n  selected = false,\n  after,\n  ...restProps\n}: TabsItemProps) => {\n  const platform = usePlatform();\n  const mode: TabsProps[\"mode\"] = React.useContext(TabsModeContext);\n\n  let ItemTypography =\n    mode === \"buttons\" || mode === \"segmented\" ? Subhead : Headline;\n\n  if (platform === VKCOM) {\n    ItemTypography = Text;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      // eslint-disable-next-line vkui/no-object-expression-in-arguments\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      <ItemTypography Component=\"span\" vkuiClass=\"TabsItem__in\" weight=\"2\">\n        {children}\n      </ItemTypography>\n      {hasReactNode(after) && <div vkuiClass=\"TabsItem__after\">{after}</div>}\n    </Tappable>\n  );\n};\n"],"file":"TabsItem.js"}
+{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"names":["TabsItem","before","children","status","after","selected","restProps","platform","sizeY","React","useContext","TabsModeContext","mode","withGaps","statusComponent","IOS","VKCOM"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AA6BA;AACA;AACA;AACO,IAAMA,QAAQ,GAAG,SAAXA,QAAW,OAOH;AAAA,MANnBC,MAMmB,QANnBA,MAMmB;AAAA,MALnBC,QAKmB,QALnBA,QAKmB;AAAA,MAJnBC,MAImB,QAJnBA,MAImB;AAAA,MAHnBC,KAGmB,QAHnBA,KAGmB;AAAA,2BAFnBC,QAEmB;AAAA,MAFnBA,QAEmB,8BAFR,KAEQ;AAAA,MADhBC,SACgB;AACnB,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AACA,0BACEC,KAAK,CAACC,UAAN,CAAiBC,qBAAjB,CADF;AAAA,MAAQC,IAAR,qBAAQA,IAAR;AAAA,MAAcC,QAAd,qBAAcA,QAAd;;AAEA,MAAIC,eAAe,GAAG,IAAtB;;AAEA,MAAIX,MAAJ,EAAY;AACVW,IAAAA,eAAe,GACb,OAAOX,MAAP,KAAkB,QAAlB,GACE,qCAAC,gBAAD;AACE,MAAA,SAAS,EAAC,MADZ;AAEE,MAAA,SAAS,EAAC,0CAFZ;AAGE,MAAA,MAAM,EAAC;AAHT,OAKGA,MALH,CADF,GASE;AAAM,MAAA,SAAS,EAAC;AAAhB,OAAoCA,MAApC,CAVJ;AAYD;;AAED,SACE,qCAAC,kBAAD,6BACMG,SADN;AAEE,IAAA,SAAS,EAAE,4BACT,UADS,EAET,CAACC,QAAQ,KAAKQ,aAAb,IAAoBR,QAAQ,KAAKS,eAAlC,yBAAyDT,QAAzD,CAFS,EAGTK,IAAI,wBAAiBA,IAAjB,CAHK,EAITP,QAAQ,IAAI,oBAJH,EAKT;AACAG,IAAAA,KAAK,8BAAuBA,KAAvB,CANI,EAOTK,QAAQ,IAAI,oBAPH,CAFb;AAWE,IAAA,SAAS,EAAC,iBAXZ;AAYE,IAAA,UAAU,EAAC,kBAZb;AAaE,IAAA,gBAAgB,EAAED,IAAI,KAAK,WAAT,GAAuB,SAAvB,GAAmC,QAbvD;AAcE,IAAA,SAAS,EAAEA,IAAI,KAAK;AAdtB,MAgBGX,MAAM,IAAI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAmCA,MAAnC,CAhBb,EAiBE,qCAAC,kBAAD;AACE,IAAA,SAAS,EAAC,MADZ;AAEE,IAAA,SAAS,EAAC,iBAFZ;AAGE,IAAA,KAAK,EAAEW,IAAI,KAAK,SAAT,GAAqB,GAArB,GAA2B,GAHpC;AAIE,IAAA,MAAM,EAAC;AAJT,KAMGV,QANH,CAjBF,EAyBGY,eAzBH,EA0BGV,KAAK,IAAI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAkCA,KAAlC,CA1BZ,EA2BGQ,IAAI,KAAK,SAAT,IACC;AACE,IAAA,SAAS,EAAC,qBADZ;AAEE,uBAFF;AAGE,qBAAeP;AAHjB,IA5BJ,CADF;AAqCD,CAlEM","sourcesContent":["import * as React from \"react\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { IOS, VKCOM } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { TabsModeContext, TabsContextProps } from \"../Tabs/Tabs\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport \"./TabsItem.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\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  ...restProps\n}: TabsItemProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps =\n    React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  if (status) {\n    statusComponent =\n      typeof status === \"number\" ? (\n        <Subhead\n          Component=\"span\"\n          vkuiClass=\"TabsItem__status TabsItem__status--count\"\n          weight=\"2\"\n        >\n          {status}\n        </Subhead>\n      ) : (\n        <span vkuiClass=\"TabsItem__status\">{status}</span>\n      );\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      vkuiClass={classNames(\n        \"TabsItem\",\n        (platform === IOS || platform === VKCOM) && `TabsItem--${platform}`,\n        mode && `TabsItem--${mode}`,\n        selected && \"TabsItem--selected\",\n        // TODO v5.0.0 новая адаптивность\n        sizeY && `TabsItem--sizeY-${sizeY}`,\n        withGaps && \"TabsItem--withGaps\"\n      )}\n      hoverMode=\"TabsItem--hover\"\n      activeMode=\"TabsItem--active\"\n      focusVisibleMode={mode === \"segmented\" ? \"outside\" : \"inside\"}\n      hasActive={mode === \"segmented\"}\n    >\n      {before && <div vkuiClass=\"TabsItem__before\">{before}</div>}\n      <Headline\n        Component=\"span\"\n        vkuiClass=\"TabsItem__label\"\n        level={mode === \"default\" ? \"1\" : \"2\"}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div vkuiClass=\"TabsItem__after\">{after}</div>}\n      {mode === \"default\" && (\n        <div\n          vkuiClass=\"TabsItem__underline\"\n          aria-hidden\n          data-selected={selected}\n        />\n      )}\n    </Tappable>\n  );\n};\n"],"file":"TabsItem.js"}

package/dist/cjs/components/TextTooltip/TextTooltip.js

@@ -19,17 +19,15 @@ var React = _interopRequireWildcard(require("react"));
 
 var _HoverPopper = require("../HoverPopper/HoverPopper");
 
-var _getClassName = require("../../helpers/getClassName");
-
-var _usePlatform = require("../../hooks/usePlatform");
-
 var _utils = require("../../lib/utils");
 
 var _Subhead = require("../Typography/Subhead/Subhead");
 
 var _prefixClass = require("../../lib/prefixClass");
 
-var _excluded = ["children", "text", "header"];
+var _classNames = require("../../lib/classNames");
+
+var _excluded = ["children", "text", "header", "appearance"];
 
 /**
  * @see https://vkcom.github.io/VKUI/#/TextTooltip
@@ -38,18 +36,17 @@ var TextTooltip = function TextTooltip(_ref) {
   var children = _ref.children,
       text = _ref.text,
       header = _ref.header,
+      _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? "black" : _ref$appearance,
       popperProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var platform = (0, _usePlatform.usePlatform)();
   return (0, _jsxRuntime.createScopedElement)(_HoverPopper.HoverPopper, (0, _extends2.default)({
-    vkuiClass: (0, _getClassName.getClassName)("TextTooltip", platform),
+    vkuiClass: (0, _classNames.classNames)("TextTooltip", "TextTooltip--".concat(appearance)),
     arrow: true,
     arrowClassName: (0, _prefixClass.prefixClass)("TextTooltip__arrow"),
     content: (0, _jsxRuntime.createScopedElement)(React.Fragment, null, (0, _utils.hasReactNode)(header) && (0, _jsxRuntime.createScopedElement)(_Subhead.Subhead, {
-      Component: "span",
       weight: "2",
       vkuiClass: "TextTooltip__header"
     }, header), (0, _utils.hasReactNode)(text) && (0, _jsxRuntime.createScopedElement)(_Subhead.Subhead, {
-      Component: "span",
       vkuiClass: "TextTooltip__text"
     }, text))
   }, popperProps), children);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"names":["TextTooltip","children","text","header","popperProps","platform"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAeA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAKH;AAAA,MAJtBC,QAIsB,QAJtBA,QAIsB;AAAA,MAHtBC,IAGsB,QAHtBA,IAGsB;AAAA,MAFtBC,MAEsB,QAFtBA,MAEsB;AAAA,MADnBC,WACmB;AACtB,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,SACE,qCAAC,wBAAD;AACE,IAAA,SAAS,EAAE,gCAAa,aAAb,EAA4BA,QAA5B,CADb;AAEE,IAAA,KAAK,MAFP;AAGE,IAAA,cAAc,EAAE,8BAAY,oBAAZ,CAHlB;AAIE,IAAA,OAAO,EACL,qCAAC,KAAD,CAAO,QAAP,QACG,yBAAaF,MAAb,KACC,qCAAC,gBAAD;AACE,MAAA,SAAS,EAAC,MADZ;AAEE,MAAA,MAAM,EAAC,GAFT;AAGE,MAAA,SAAS,EAAC;AAHZ,OAKGA,MALH,CAFJ,EAUG,yBAAaD,IAAb,KACC,qCAAC,gBAAD;AAAS,MAAA,SAAS,EAAC,MAAnB;AAA0B,MAAA,SAAS,EAAC;AAApC,OACGA,IADH,CAXJ;AALJ,KAsBME,WAtBN,GAwBGH,QAxBH,CADF;AA4BD,CApCM","sourcesContent":["import * as React from \"react\";\nimport { HoverPopper, HoverPopperProps } from \"../HoverPopper/HoverPopper\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport \"./TextTooltip.css\";\n\nexport interface TextTooltipProps\n  extends Omit<HoverPopperProps, \"arrow\" | \"arrowClassName\" | \"content\"> {\n  /**\n   * Текст тултипа\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа\n   */\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TextTooltip\n */\nexport const TextTooltip = ({\n  children,\n  text,\n  header,\n  ...popperProps\n}: TextTooltipProps) => {\n  const platform = usePlatform();\n\n  return (\n    <HoverPopper\n      vkuiClass={getClassName(\"TextTooltip\", platform)}\n      arrow\n      arrowClassName={prefixClass(\"TextTooltip__arrow\")}\n      content={\n        <React.Fragment>\n          {hasReactNode(header) && (\n            <Subhead\n              Component=\"span\"\n              weight=\"2\"\n              vkuiClass=\"TextTooltip__header\"\n            >\n              {header}\n            </Subhead>\n          )}\n          {hasReactNode(text) && (\n            <Subhead Component=\"span\" vkuiClass=\"TextTooltip__text\">\n              {text}\n            </Subhead>\n          )}\n        </React.Fragment>\n      }\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"file":"TextTooltip.js"}
+{"version":3,"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"names":["TextTooltip","children","text","header","appearance","popperProps"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAmBA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAMH;AAAA,MALtBC,QAKsB,QALtBA,QAKsB;AAAA,MAJtBC,IAIsB,QAJtBA,IAIsB;AAAA,MAHtBC,MAGsB,QAHtBA,MAGsB;AAAA,6BAFtBC,UAEsB;AAAA,MAFtBA,UAEsB,gCAFT,OAES;AAAA,MADnBC,WACmB;AACtB,SACE,qCAAC,wBAAD;AACE,IAAA,SAAS,EAAE,4BAAW,aAAX,yBAA0CD,UAA1C,EADb;AAEE,IAAA,KAAK,MAFP;AAGE,IAAA,cAAc,EAAE,8BAAY,oBAAZ,CAHlB;AAIE,IAAA,OAAO,EACL,qCAAC,KAAD,CAAO,QAAP,QACG,yBAAaD,MAAb,KACC,qCAAC,gBAAD;AAAS,MAAA,MAAM,EAAC,GAAhB;AAAoB,MAAA,SAAS,EAAC;AAA9B,OACGA,MADH,CAFJ,EAMG,yBAAaD,IAAb,KACC,qCAAC,gBAAD;AAAS,MAAA,SAAS,EAAC;AAAnB,OAAwCA,IAAxC,CAPJ;AALJ,KAgBMG,WAhBN,GAkBGJ,QAlBH,CADF;AAsBD,CA7BM","sourcesContent":["import * as React from \"react\";\nimport { HoverPopper, HoverPopperProps } from \"../HoverPopper/HoverPopper\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport { classNames } from \"../../lib/classNames\";\nimport \"./TextTooltip.css\";\n\nexport interface TextTooltipProps\n  extends Omit<HoverPopperProps, \"arrow\" | \"arrowClassName\" | \"content\"> {\n  /**\n   * Текст тултипа\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа\n   */\n  header?: React.ReactNode;\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: \"accent\" | \"neutral\" | \"white\" | \"black\" | \"inversion\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TextTooltip\n */\nexport const TextTooltip = ({\n  children,\n  text,\n  header,\n  appearance = \"black\", // TODO v5 сменить по умолчанию на \"neutral\"\n  ...popperProps\n}: TextTooltipProps) => {\n  return (\n    <HoverPopper\n      vkuiClass={classNames(\"TextTooltip\", `TextTooltip--${appearance}`)}\n      arrow\n      arrowClassName={prefixClass(\"TextTooltip__arrow\")}\n      content={\n        <React.Fragment>\n          {hasReactNode(header) && (\n            <Subhead weight=\"2\" vkuiClass=\"TextTooltip__header\">\n              {header}\n            </Subhead>\n          )}\n          {hasReactNode(text) && (\n            <Subhead vkuiClass=\"TextTooltip__text\">{text}</Subhead>\n          )}\n        </React.Fragment>\n      }\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"file":"TextTooltip.js"}