@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/components/Tabs/Tabs.js

@@ -1,139 +1,128 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "mode", "getRootRef", "className", "role"];
-import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
-import { usePlatform } from '../../hooks/usePlatform';
-import { pressedKey } from '../../lib/accessibility';
-import { useDOM } from '../../lib/dom';
-import { Platform } from '../../lib/platform';
-var modeClassNames = {
-  default: "vkuiTabs--mode-default",
-  accent: "vkuiTabs--mode-accent",
-  secondary: "vkuiTabs--mode-secondary"
-};
-export var TabsModeContext = /*#__PURE__*/React.createContext({
-  mode: 'default',
-  withGaps: false
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import { usePlatform } from "../../hooks/usePlatform";
+import { pressedKey } from "../../lib/accessibility";
+import { useDOM } from "../../lib/dom";
+import { Platform } from "../../lib/platform";
+export var TabsModeContext = /*#__PURE__*/ React.createContext({
+    mode: "default",
+    withGaps: false
 });
-
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabs
- */
-export 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 = _objectWithoutProperties(_ref, _excluded);
-  var platform = usePlatform();
-  var _useDOM = 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 = 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) {
+ */ export 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 = _object_without_properties(_param, [
+        "children",
+        "mode",
+        "getRootRef",
+        "className",
+        "role"
+    ]);
+    var platform = usePlatform();
+    var document = 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 = 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();
-          }
+    };
+    useGlobalEventListener(document, "keydown", handleDocumentKeydown, {
+        capture: true
+    });
+    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
+        ref: getRootRef,
+        className: classNames("vkuiTabs", "vkuiInternalTabs", platform === Platform.VKCOM && "vkuiInternalTabs--vkcom", withGaps && 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
         }
-    }
-  };
-  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {
-    capture: true
-  });
-  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    ref: getRootRef,
-    className: classNames("vkuiTabs", 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)));
 };
+
 //# sourceMappingURL=Tabs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["React","classNames","useGlobalEventListener","usePlatform","pressedKey","useDOM","Platform","modeClassNames","default","accent","secondary","TabsModeContext","createContext","mode","withGaps","Tabs","children","getRootRef","className","role","restProps","platform","document","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","capture","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":["React","classNames","useGlobalEventListener","usePlatform","pressedKey","useDOM","Platform","TabsModeContext","createContext","mode","withGaps","Tabs","children","getRootRef","className","role","restProps","platform","document","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","capture","div","ref","VKCOM","Provider","value"],"mappings":"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"}

package/dist/components/TabsItem/TabsItem.js

@@ -1,91 +1,84 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["before", "children", "status", "after", "selected", "className", "role", "tabIndex"];
-import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { SizeType } from '../../lib/adaptivity';
-import { warnOnce } from '../../lib/warnOnce';
-import { TabsModeContext } from '../Tabs/Tabs';
-import { Tappable } from '../Tappable/Tappable';
-import { Headline } from '../Typography/Headline/Headline';
-import { Subhead } from '../Typography/Subhead/Subhead';
-var sizeYClassNames = _defineProperty({
-  none: "vkuiTabsItem--sizeY-none"
+import _define_property from "@swc/helpers/src/_define_property.mjs";
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { SizeType } from "../../lib/adaptivity";
+import { warnOnce } from "../../lib/warnOnce";
+import { TabsModeContext } from "../Tabs/Tabs";
+import { Tappable } from "../Tappable/Tappable";
+import { Headline } from "../Typography/Headline/Headline";
+import { Subhead } from "../Typography/Subhead/Subhead";
+var sizeYClassNames = _define_property({
+    none: "vkuiTabsItem--sizeY-none"
 }, SizeType.COMPACT, "vkuiTabsItem--sizeY-compact");
-var warn = warnOnce('TabsItem');
-
+var warn = warnOnce("TabsItem");
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
- */
-export 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 = _objectWithoutProperties(_ref, _excluded);
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  var _React$useContext = React.useContext(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, {
-      Component: "span",
-      className: 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');
+ */ export 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 = _object_without_properties(_param, [
+        "before",
+        "children",
+        "status",
+        "after",
+        "selected",
+        "className",
+        "role",
+        "tabIndex"
+    ]);
+    var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
+    var _React_useContext = React.useContext(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, {
+            Component: "span",
+            className: 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, _extends({}, restProps, {
-    className: classNames("vkuiTabsItem", mode && styles["TabsItem--mode-".concat(mode)], selected && "vkuiTabsItem--selected", sizeY !== 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, {
-    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
-  }));
-};
-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, _object_spread_props(_object_spread({}, restProps), {
+        className: classNames("vkuiTabsItem", mode && ({
+            default: "vkuiTabsItem--mode-default",
+            accent: "vkuiTabsItem--mode-accent",
+            secondary: "vkuiTabsItem--mode-secondary"
+        })[mode], selected && "vkuiTabsItem--selected", sizeY !== 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, {
+        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/components/TabsItem/TabsItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsItem.js","names":["React","classNames","useAdaptivity","SizeType","warnOnce","TabsModeContext","Tappable","Headline","Subhead","sizeYClassNames","none","COMPACT","warn","TabsItem","before","children","status","after","selected","className","role","tabIndexProp","tabIndex","restProps","sizeY","useContext","mode","withGaps","statusComponent","isTabFlow","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":["React","classNames","useAdaptivity","SizeType","warnOnce","TabsModeContext","Tappable","Headline","Subhead","sizeYClassNames","none","COMPACT","warn","TabsItem","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","restProps","sizeY","useContext","mode","withGaps","statusComponent","isTabFlow","Component","weight","span","process","env","NODE_ENV","undefined","default","accent","secondary","REGULAR","hoverMode","activeMode","focusVisibleMode","hasActive","aria-selected","div","level","aria-hidden","data-selected"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAA2BC,eAAe,QAAQ,eAAe;AACjE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,IAAMC;IACJC,IAAI;GACHP,SAASQ,OAAO;AA6BnB,IAAMC,OAAOR,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMS,WAAW,iBAUH;QATnBC,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,IAA2BnB,iBAAAA,wCAAAA,eAAnBsB,OAAAA,0CAAQ;IAChB,IAA6CxB,oBAAAA,MAAMyB,UAAU,CAACpB,kBAAtDqB,OAAqC1B,kBAArC0B,MAAMC,WAA+B3B,kBAA/B2B;IACd,IAAIC,kBAAkB,IAAI;IAE1B,IAAMC,YAAYT,SAAS;IAE3B,IAAIJ,QAAQ;QACVY,kBACE,OAAOZ,WAAW,yBAChB,oBAACR;YACCsB,WAAU;YACVX,WAAWlB;YACX8B,QAAO;WAENf,wBAGH,oBAACgB;YAAKb,SAAS;WAA+BH,OAC/C;IACL,CAAC;IAED,IAAIiB,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBN,WAAW;QACvD,IAAI,CAACN,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,IAAIO,aAAaR,aAAae,WAAW;QACvCf,WAAWH,WAAW,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,qBACE,oBAACZ,kDACKiB;QACJJ,WAAWlB,2BAETyB,QACE,CAAA;YACEW,OAAO;YACPC,MAAM;YACNC,SAAS;QACX,CAAA,CAAC,CAACb,KAAK,EACTR,sCACAM,UAAUrB,SAASqC,OAAO,IAAI/B,eAAe,CAACe,MAAM,EACpDG,sCACAR;QAEFsB,SAAS;QACTC,YAAW;QACXC,kBAAiB;QACjBC,WAAW,KAAK;QAChBxB,MAAMA;QACNyB,iBAAe3B;QACfG,UAAUA;QAETP,wBAAU,oBAACgC;QAAI3B,SAAS;OAA+BL,uBACxD,oBAACP;QACCuB,WAAU;QACVX,SAAS;QACT4B,OAAOrB,SAAS,YAAY,MAAM,GAAG;QACrCK,QAAO;OAENhB,WAEFa,iBACAX,uBAAS,oBAAC6B;QAAI3B,SAAS;OAA8BF,QACrDS,SAAS,2BACR,oBAACoB;QAAI3B,SAAS;QAAiC6B,eAAAA,IAAW;QAACC,iBAAe/B;;AAIlF,EAAE"}

package/dist/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-состояния