@vkontakte/vkui 5.2.4 → 5.3.0

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

@@ -1,149 +1,145 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TabsModeContext: function() {
+        return TabsModeContext;
+    },
+    Tabs: function() {
+        return Tabs;
+    }
 });
-exports.TabsModeContext = exports.Tabs = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 var _usePlatform = require("../../hooks/usePlatform");
 var _accessibility = require("../../lib/accessibility");
 var _dom = require("../../lib/dom");
 var _platform = require("../../lib/platform");
-var _excluded = ["children", "mode", "getRootRef", "className", "role"];
-var modeClassNames = {
-  default: "vkuiTabs--mode-default",
-  accent: "vkuiTabs--mode-accent",
-  secondary: "vkuiTabs--mode-secondary"
-};
-var TabsModeContext = /*#__PURE__*/React.createContext({
-  mode: 'default',
-  withGaps: false
+var TabsModeContext = /*#__PURE__*/ _react.createContext({
+    mode: "default",
+    withGaps: false
 });
-
-/**
- * @see https://vkcom.github.io/VKUI/#/Tabs
- */
-exports.TabsModeContext = TabsModeContext;
-var Tabs = function Tabs(_ref) {
-  var children = _ref.children,
-    _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'default' : _ref$mode,
-    getRootRef = _ref.getRootRef,
-    className = _ref.className,
-    _ref$role = _ref.role,
-    role = _ref$role === void 0 ? 'tablist' : _ref$role,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var platform = (0, _usePlatform.usePlatform)();
-  var _useDOM = (0, _dom.useDOM)(),
-    document = _useDOM.document;
-  var isTabFlow = role === 'tablist';
-  var tabsRef = React.useRef(null);
-  var withGaps = mode === 'accent' || mode === 'secondary';
-  var getTabEls = function getTabEls() {
-    if (!tabsRef.current) {
-      return [];
-    }
-    return Array.from(
-    // eslint-disable-next-line no-restricted-properties
-    tabsRef.current.querySelectorAll('[role=tab]:not([disabled])'));
-  };
-  var handleDocumentKeydown = function handleDocumentKeydown(event) {
-    if (!document || !tabsRef.current || !isTabFlow) {
-      return;
-    }
-    var key = (0, _accessibility.pressedKey)(event);
-    switch (key) {
-      case 'ArrowLeft':
-      case 'ArrowRight':
-      case 'End':
-      case 'Home':
-        {
-          var tabEls = getTabEls();
-          var currentFocusedElIndex = tabEls.findIndex(function (el) {
-            return document.activeElement === el;
-          });
-          if (currentFocusedElIndex === -1) {
+var Tabs = function(_param) {
+    var children = _param.children, _param_mode = _param.mode, mode = _param_mode === void 0 ? "default" : _param_mode, getRootRef = _param.getRootRef, className = _param.className, _param_role = _param.role, role = _param_role === void 0 ? "tablist" : _param_role, restProps = _objectWithoutProperties(_param, [
+        "children",
+        "mode",
+        "getRootRef",
+        "className",
+        "role"
+    ]);
+    var platform = (0, _usePlatform.usePlatform)();
+    var document = (0, _dom.useDOM)().document;
+    var isTabFlow = role === "tablist";
+    var tabsRef = _react.useRef(null);
+    var withGaps = mode === "accent" || mode === "secondary";
+    var getTabEls = function() {
+        if (!tabsRef.current) {
+            return [];
+        }
+        return Array.from(// eslint-disable-next-line no-restricted-properties
+        tabsRef.current.querySelectorAll("[role=tab]:not([disabled])"));
+    };
+    var handleDocumentKeydown = function(event) {
+        if (!document || !tabsRef.current || !isTabFlow) {
             return;
-          }
-          var nextIndex = 0;
-          if (key === 'Home') {
-            nextIndex = 0;
-          } else if (key === 'End') {
-            nextIndex = tabEls.length - 1;
-          } else {
-            var offset = key === 'ArrowRight' ? 1 : -1;
-            nextIndex = currentFocusedElIndex + offset;
-          }
-          var nextTabEl = tabEls[nextIndex];
-          if (nextTabEl) {
-            event.preventDefault();
-            nextTabEl.focus();
-          }
-          break;
         }
-      /*
+        var key = (0, _accessibility.pressedKey)(event);
+        switch(key){
+            case "ArrowLeft":
+            case "ArrowRight":
+            case "End":
+            case "Home":
+                {
+                    var tabEls = getTabEls();
+                    var currentFocusedElIndex = tabEls.findIndex(function(el) {
+                        return document.activeElement === el;
+                    });
+                    if (currentFocusedElIndex === -1) {
+                        return;
+                    }
+                    var nextIndex = 0;
+                    if (key === "Home") {
+                        nextIndex = 0;
+                    } else if (key === "End") {
+                        nextIndex = tabEls.length - 1;
+                    } else {
+                        var offset = key === "ArrowRight" ? 1 : -1;
+                        nextIndex = currentFocusedElIndex + offset;
+                    }
+                    var nextTabEl = tabEls[nextIndex];
+                    if (nextTabEl) {
+                        event.preventDefault();
+                        nextTabEl.focus();
+                    }
+                    break;
+                }
+            /*
        В JAWS и NVDA стрелка вниз активирует контент.
        Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.
        https://inclusive-components.design/tabbed-interfaces/
-      */
-      case 'ArrowDown':
-        {
-          var _tabEls = getTabEls();
-          var currentFocusedEl = _tabEls.find(function (el) {
-            return document.activeElement === el;
-          });
-          if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {
-            return;
-          }
-          var relatedContentElId = currentFocusedEl.getAttribute('aria-controls');
-          if (!relatedContentElId) {
-            return;
-          }
-
-          // eslint-disable-next-line no-restricted-properties
-          var relatedContentEl = document.getElementById(relatedContentElId);
-          if (!relatedContentEl) {
-            return;
-          }
-          event.preventDefault();
-          relatedContentEl.focus();
-          break;
+      */ case "ArrowDown":
+                {
+                    var tabEls1 = getTabEls();
+                    var currentFocusedEl = tabEls1.find(function(el) {
+                        return document.activeElement === el;
+                    });
+                    if (!currentFocusedEl || currentFocusedEl.getAttribute("aria-selected") !== "true") {
+                        return;
+                    }
+                    var relatedContentElId = currentFocusedEl.getAttribute("aria-controls");
+                    if (!relatedContentElId) {
+                        return;
+                    }
+                    // eslint-disable-next-line no-restricted-properties
+                    var relatedContentEl = document.getElementById(relatedContentElId);
+                    if (!relatedContentEl) {
+                        return;
+                    }
+                    event.preventDefault();
+                    relatedContentEl.focus();
+                    break;
+                }
+            case "Space":
+            case "Enter":
+                {
+                    var tabEls2 = getTabEls();
+                    var currentFocusedEl1 = tabEls2.find(function(el) {
+                        return document.activeElement === el;
+                    });
+                    if (currentFocusedEl1) {
+                        currentFocusedEl1.click();
+                    }
+                }
         }
-      case 'Space':
-      case 'Enter':
-        {
-          var _tabEls2 = getTabEls();
-          var _currentFocusedEl = _tabEls2.find(function (el) {
-            return document.activeElement === el;
-          });
-          if (_currentFocusedEl) {
-            _currentFocusedEl.click();
-          }
+    };
+    (0, _useGlobalEventListener.useGlobalEventListener)(document, "keydown", handleDocumentKeydown, {
+        capture: true
+    });
+    return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+        ref: getRootRef,
+        className: (0, _vkjs.classNames)("vkuiTabs", "vkuiInternalTabs", platform === _platform.Platform.VKCOM && "vkuiInternalTabs--vkcom", withGaps && (0, _vkjs.classNames)("vkuiTabs--withGaps", "vkuiInternalTabs--withGaps"), mode === "default" && "vkuiTabs--mode-default", className),
+        role: role
+    }), /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiTabs__in",
+        ref: tabsRef
+    }, /*#__PURE__*/ _react.createElement(TabsModeContext.Provider, {
+        value: {
+            mode: mode,
+            withGaps: withGaps
         }
-    }
-  };
-  (0, _useGlobalEventListener.useGlobalEventListener)(document, 'keydown', handleDocumentKeydown, {
-    capture: true
-  });
-  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    ref: getRootRef,
-    className: (0, _vkjs.classNames)("vkuiTabs", platform === _platform.Platform.VKCOM && "vkuiTabs--vkcom", withGaps && "vkuiTabs--withGaps", modeClassNames[mode], className),
-    role: role
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiTabs__in",
-    ref: tabsRef
-  }, /*#__PURE__*/React.createElement(TabsModeContext.Provider, {
-    value: {
-      mode: mode,
-      withGaps: withGaps
-    }
-  }, children)));
+    }, children)));
 };
-exports.Tabs = Tabs;
+
 //# sourceMappingURL=Tabs.js.map

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

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

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

@@ -1,100 +1,93 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "TabsItem", {
+    enumerable: true,
+    get: function() {
+        return TabsItem;
+    }
 });
-exports.TabsItem = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var React = _interopRequireWildcard(require("react"));
+var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _adaptivity = require("../../lib/adaptivity");
 var _warnOnce = require("../../lib/warnOnce");
-var _Tabs = require("../Tabs/Tabs");
-var _Tappable = require("../Tappable/Tappable");
-var _Headline = require("../Typography/Headline/Headline");
-var _Subhead = require("../Typography/Subhead/Subhead");
-var _excluded = ["before", "children", "status", "after", "selected", "className", "role", "tabIndex"];
-var sizeYClassNames = (0, _defineProperty2.default)({
-  none: "vkuiTabsItem--sizeY-none"
+var _tabs = require("../Tabs/Tabs");
+var _tappable = require("../Tappable/Tappable");
+var _headline = require("../Typography/Headline/Headline");
+var _subhead = require("../Typography/Subhead/Subhead");
+var sizeYClassNames = _defineProperty({
+    none: "vkuiTabsItem--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiTabsItem--sizeY-compact");
-var warn = (0, _warnOnce.warnOnce)('TabsItem');
-
-/**
- * @see https://vkcom.github.io/VKUI/#/TabsItem
- */
-var TabsItem = function TabsItem(_ref) {
-  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,
-    className = _ref.className,
-    _ref$role = _ref.role,
-    role = _ref$role === void 0 ? 'tab' : _ref$role,
-    tabIndexProp = _ref.tabIndex,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  var _React$useContext = React.useContext(_Tabs.TabsModeContext),
-    mode = _React$useContext.mode,
-    withGaps = _React$useContext.withGaps;
-  var statusComponent = null;
-  var isTabFlow = role === 'tab';
-  if (status) {
-    statusComponent = typeof status === 'number' ? /*#__PURE__*/React.createElement(_Subhead.Subhead, {
-      Component: "span",
-      className: (0, _vkjs.classNames)("vkuiTabsItem__status", "vkuiTabsItem__status--count"),
-      weight: "2"
-    }, status) : /*#__PURE__*/React.createElement("span", {
-      className: "vkuiTabsItem__status"
-    }, status);
-  }
-  if (process.env.NODE_ENV === 'development' && isTabFlow) {
-    if (!restProps['aria-controls']) {
-      warn("\u041F\u0435\u0440\u0435\u0434\u0430\u0439\u0442\u0435 \u0432 \"aria-controls\" id \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0433\u043E \u0431\u043B\u043E\u043A\u0430", 'warn');
-    } else if (!restProps['id']) {
-      warn("\u041F\u0435\u0440\u0435\u0434\u0430\u0439\u0442\u0435 \"id\" \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0443 \u0434\u043B\u044F \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F \u0432 \"aria-labelledby\" \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0433\u043E \u0431\u043B\u043E\u043A\u0430", 'warn');
+var warn = (0, _warnOnce.warnOnce)("TabsItem");
+var TabsItem = function(_param) {
+    var before = _param.before, children = _param.children, status = _param.status, after = _param.after, _param_selected = _param.selected, selected = _param_selected === void 0 ? false : _param_selected, className = _param.className, _param_role = _param.role, role = _param_role === void 0 ? "tab" : _param_role, tabIndexProp = _param.tabIndex, restProps = _objectWithoutProperties(_param, [
+        "before",
+        "children",
+        "status",
+        "after",
+        "selected",
+        "className",
+        "role",
+        "tabIndex"
+    ]);
+    var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
+    var _React_useContext = _react.useContext(_tabs.TabsModeContext), mode = _React_useContext.mode, withGaps = _React_useContext.withGaps;
+    var statusComponent = null;
+    var isTabFlow = role === "tab";
+    if (status) {
+        statusComponent = typeof status === "number" ? /*#__PURE__*/ _react.createElement(_subhead.Subhead, {
+            Component: "span",
+            className: (0, _vkjs.classNames)("vkuiTabsItem__status", "vkuiTabsItem__status--count"),
+            weight: "2"
+        }, status) : /*#__PURE__*/ _react.createElement("span", {
+            className: "vkuiTabsItem__status"
+        }, status);
     }
-  }
-  var tabIndex = tabIndexProp;
-  if (isTabFlow && tabIndex === undefined) {
-    tabIndex = selected ? 0 : -1;
-  }
-  return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({}, restProps, {
-    className: (0, _vkjs.classNames)("vkuiTabsItem", mode && styles["TabsItem--mode-".concat(mode)], selected && "vkuiTabsItem--selected", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], withGaps && "vkuiTabsItem--withGaps", className),
-    hoverMode: "vkuiTabsItem--hover",
-    activeMode: "vkuiTabsItem--active",
-    focusVisibleMode: "inside",
-    hasActive: false,
-    role: role,
-    "aria-selected": selected,
-    tabIndex: tabIndex
-  }), before && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiTabsItem__before"
-  }, before), /*#__PURE__*/React.createElement(_Headline.Headline, {
-    Component: "span",
-    className: "vkuiTabsItem__label",
-    level: mode === 'default' ? '1' : '2',
-    weight: "2"
-  }, children), statusComponent, after && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiTabsItem__after"
-  }, after), mode === 'default' && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiTabsItem__underline",
-    "aria-hidden": true,
-    "data-selected": selected
-  }));
-};
-exports.TabsItem = TabsItem;
-var styles = {
-  "TabsItem--mode-default": "vkuiTabsItem--mode-default",
-  "TabsItem--mode-accent": "vkuiTabsItem--mode-accent",
-  "TabsItem--mode-secondary": "vkuiTabsItem--mode-secondary"
+    if (process.env.NODE_ENV === "development" && isTabFlow) {
+        if (!restProps["aria-controls"]) {
+            warn('Передайте в "aria-controls" id контролируемого блока', "warn");
+        } else if (!restProps["id"]) {
+            warn('Передайте "id" компоненту для использования в "aria-labelledby" контролируемого блока', "warn");
+        }
+    }
+    var tabIndex = tabIndexProp;
+    if (isTabFlow && tabIndex === undefined) {
+        tabIndex = selected ? 0 : -1;
+    }
+    return /*#__PURE__*/ _react.createElement(_tappable.Tappable, _objectSpreadProps(_objectSpread({}, restProps), {
+        className: (0, _vkjs.classNames)("vkuiTabsItem", mode && ({
+            default: "vkuiTabsItem--mode-default",
+            accent: "vkuiTabsItem--mode-accent",
+            secondary: "vkuiTabsItem--mode-secondary"
+        })[mode], selected && "vkuiTabsItem--selected", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], withGaps && "vkuiTabsItem--withGaps", className),
+        hoverMode: "vkuiTabsItem--hover",
+        activeMode: "",
+        focusVisibleMode: "inside",
+        hasActive: false,
+        role: role,
+        "aria-selected": selected,
+        tabIndex: tabIndex
+    }), before && /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiTabsItem__before"
+    }, before), /*#__PURE__*/ _react.createElement(_headline.Headline, {
+        Component: "span",
+        className: "vkuiTabsItem__label",
+        level: mode === "default" ? "1" : "2",
+        weight: "2"
+    }, children), statusComponent, after && /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiTabsItem__after"
+    }, after), mode === "default" && /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiTabsItem__underline",
+        "aria-hidden": true,
+        "data-selected": selected
+    }));
 };
+
 //# sourceMappingURL=TabsItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabsItem.js","names":["sizeYClassNames","none","SizeType","COMPACT","warn","warnOnce","TabsItem","before","children","status","after","selected","className","role","tabIndexProp","tabIndex","restProps","useAdaptivity","sizeY","React","useContext","TabsModeContext","mode","withGaps","statusComponent","isTabFlow","classNames","process","env","NODE_ENV","undefined","styles","REGULAR"],"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles['TabsItem--sizeY-none'],\n  [SizeType.COMPACT]: styles['TabsItem--sizeY-compact'],\n};\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (status) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n          weight=\"2\"\n        >\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>{status}</span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['TabsItem'],\n        mode && styles[`TabsItem--mode-${mode}`],\n        selected && styles['TabsItem--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        className,\n      )}\n      hoverMode={styles['TabsItem--hover']}\n      activeMode={styles['TabsItem--active']}\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles['TabsItem--sizeY-none'],\n  [SizeType.COMPACT]: styles['TabsItem--sizeY-compact'],\n};\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (status) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n          weight=\"2\"\n        >\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>{status}</span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['TabsItem'],\n        mode &&\n          {\n            default: styles['TabsItem--mode-default'],\n            accent: styles['TabsItem--mode-accent'],\n            secondary: styles['TabsItem--mode-secondary'],\n          }[mode],\n        selected && styles['TabsItem--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        className,\n      )}\n      hoverMode={styles['TabsItem--hover']}\n      activeMode=\"\"\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["TabsItem","sizeYClassNames","none","SizeType","COMPACT","warn","warnOnce","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","restProps","useAdaptivity","sizeY","React","useContext","TabsModeContext","mode","withGaps","statusComponent","isTabFlow","Subhead","Component","classNames","weight","span","process","env","NODE_ENV","undefined","Tappable","default","accent","secondary","REGULAR","hoverMode","activeMode","focusVisibleMode","hasActive","aria-selected","div","Headline","level","aria-hidden","data-selected"],"mappings":";;;;+BA+CaA;;;eAAAA;;;;;;;;2DA/CU;oBACI;6BACG;0BACL;wBACA;oBACyB;wBACzB;wBACA;uBACD;AAGxB,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AA6BnB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,WAAW,iBAUH;QATnBO,gBAAAA,QACAC,kBAAAA,UACAC,gBAAAA,QACAC,eAAAA,gCACAC,UAAAA,wCAAW,KAAK,oBAChBC,mBAAAA,gCACAC,MAAAA,gCAAO,qBACPC,AAAUC,sBAAVD,UACGE;QARHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BG,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAA6CC,oBAAAA,OAAMC,UAAU,CAACC,qBAAe,GAArEC,OAAqCH,kBAArCG,MAAMC,WAA+BJ,kBAA/BI;IACd,IAAIC,kBAAkB,IAAI;IAE1B,IAAMC,YAAYZ,SAAS;IAE3B,IAAIJ,QAAQ;QACVe,kBACE,OAAOf,WAAW,yBAChB,qBAACiB,gBAAO;YACNC,WAAU;YACVf,WAAWgB,IAAAA,gBAAU;YACrBC,QAAO;WAENpB,wBAGH,qBAACqB;YAAKlB,SAAS;WAA+BH,OAC/C;IACL,CAAC;IAED,IAAIsB,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBR,WAAW;QACvD,IAAI,CAACT,SAAS,CAAC,gBAAgB,EAAE;YAC/BX,KAAM,wDAAuD;QAC/D,OAAO,IAAI,CAACW,SAAS,CAAC,KAAK,EAAE;YAC3BX,KACG,yFACD;QAEJ,CAAC;IACH,CAAC;IAED,IAAIS,WAAWC;IACf,IAAIU,aAAaX,aAAaoB,WAAW;QACvCpB,WAAWH,WAAW,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,qBACE,qBAACwB,kBAAQ,uCACHnB;QACJJ,WAAWgB,IAAAA,gBAAU,kBAEnBN,QACE,CAAA;YACEc,OAAO;YACPC,MAAM;YACNC,SAAS;QACX,CAAA,CAAC,CAAChB,KAAK,EACTX,sCACAO,UAAUf,oBAAQ,CAACoC,OAAO,IAAItC,eAAe,CAACiB,MAAM,EACpDK,sCACAX;QAEF4B,SAAS;QACTC,YAAW;QACXC,kBAAiB;QACjBC,WAAW,KAAK;QAChB9B,MAAMA;QACN+B,iBAAejC;QACfG,UAAUA;QAETP,wBAAU,qBAACsC;QAAIjC,SAAS;OAA+BL,uBACxD,qBAACuC,kBAAQ;QACPnB,WAAU;QACVf,SAAS;QACTmC,OAAOzB,SAAS,YAAY,MAAM,GAAG;QACrCO,QAAO;OAENrB,WAEFgB,iBACAd,uBAAS,qBAACmC;QAAIjC,SAAS;OAA8BF,QACrDY,SAAS,2BACR,qBAACuB;QAAIjC,SAAS;QAAiCoC,eAAAA,IAAW;QAACC,iBAAetC;;AAIlF"}

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

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