@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/cssm/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","styles","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/cssm/components/Tabs/Tabs.module.css

@@ -1 +1 @@
-.vkuiTabs__in{align-items:stretch;display:flex}.vkuiTabs--withGaps{justify-content:flex-start}.vkuiPanelHeader .vkuiTabs{font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);overflow:hidden}.vkuiPanelHeader .vkuiTabs:after{content:"";display:block;width:1000px}.vkuiFixedLayout--ios.vkuiFixedLayout--vertical-bottom .vkuiTabs:after{background:#fff;background:var(--vkui--color_background_content);content:"";height:100%;left:0;position:absolute;top:0;width:100%}.vkuiFixedLayout--ios.vkuiFixedLayout--vertical-bottom .vkuiSeparator,.vkuiFixedLayout--ios.vkuiFixedLayout--vertical-bottom .vkuiTabs__in{position:relative;z-index:2;z-index:var(--vkui_internal--z_index_tabs)}.vkuiGroup--mode-plain .vkuiGroup__inner>.vkuiTabs--mode-default:first-child{margin-top:-8px}.vkuiGroup--mode-card>.vkuiGroup__inner>.vkuiTabs--mode-default:first-child{margin-top:-4px}
+.vkuiTabs__in{align-items:stretch;display:flex}.vkuiTabs--withGaps{justify-content:flex-start}.vkuiPanelHeader .vkuiTabs{font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);overflow:hidden}.vkuiPanelHeader .vkuiTabs:after{content:"";display:block;width:1000px}.vkuiInternalGroup--mode-plain>.vkuiTabs--mode-default:first-child{margin-top:-8px}.vkuiInternalGroup--mode-card>.vkuiTabs--mode-default:first-child{margin-top:-4px}.vkuiInternalFixedLayout--ios.vkuiInternalFixedLayout--vertical-bottom .vkuiTabs:after{background:#fff;background:var(--vkui--color_background_content);content:"";height:100%;left:0;position:absolute;top:0;width:100%}.vkuiInternalFixedLayout--ios.vkuiInternalFixedLayout--vertical-bottom .vkuiSeparator,.vkuiInternalFixedLayout--ios.vkuiInternalFixedLayout--vertical-bottom .vkuiTabs__in{position:relative;z-index:2;z-index:var(--vkui_internal--z_index_tabs)}

package/dist/cssm/components/TabsItem/TabsItem.js

@@ -1,7 +1,3 @@
-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';
@@ -11,82 +7,67 @@ import { TabsModeContext } from '../Tabs/Tabs';
 import { Tappable } from '../Tappable/Tappable';
 import { Headline } from '../Typography/Headline/Headline';
 import { Subhead } from '../Typography/Subhead/Subhead';
-import "./TabsItem.module.css";
-var sizeYClassNames = _defineProperty({
-  none: "vkuiTabsItem--sizeY-none"
-}, SizeType.COMPACT, "vkuiTabsItem--sizeY-compact");
-var warn = warnOnce('TabsItem');
-
+import styles from './TabsItem.module.css';
+const sizeYClassNames = {
+    none: styles['TabsItem--sizeY-none'],
+    [SizeType.COMPACT]: styles['TabsItem--sizeY-compact']
+};
+const 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 const TabsItem = ({ before , children , status , after , selected =false , className , role ='tab' , tabIndex: tabIndexProp , ...restProps })=>{
+    const { sizeY ='none'  } = useAdaptivity();
+    const { mode , withGaps  } = React.useContext(TabsModeContext);
+    let statusComponent = null;
+    const isTabFlow = role === 'tab';
+    if (status) {
+        statusComponent = typeof status === 'number' ? /*#__PURE__*/ React.createElement(Subhead, {
+            Component: "span",
+            className: classNames(styles['TabsItem__status'], styles['TabsItem__status--count']),
+            weight: "2"
+        }, status) : /*#__PURE__*/ React.createElement("span", {
+            className: styles['TabsItem__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');
+        }
+    }
+    let tabIndex = tabIndexProp;
+    if (isTabFlow && tabIndex === undefined) {
+        tabIndex = selected ? 0 : -1;
+    }
+    return /*#__PURE__*/ React.createElement(Tappable, {
+        ...restProps,
+        className: classNames(styles['TabsItem'], mode && ({
+            default: styles['TabsItem--mode-default'],
+            accent: styles['TabsItem--mode-accent'],
+            secondary: styles['TabsItem--mode-secondary']
+        })[mode], selected && styles['TabsItem--selected'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], withGaps && styles['TabsItem--withGaps'], className),
+        hoverMode: styles['TabsItem--hover'],
+        activeMode: "",
+        focusVisibleMode: "inside",
+        hasActive: false,
+        role: role,
+        "aria-selected": selected,
+        tabIndex: tabIndex
+    }, before && /*#__PURE__*/ React.createElement("div", {
+        className: styles['TabsItem__before']
+    }, before), /*#__PURE__*/ React.createElement(Headline, {
+        Component: "span",
+        className: styles['TabsItem__label'],
+        level: mode === 'default' ? '1' : '2',
+        weight: "2"
+    }, children), statusComponent, after && /*#__PURE__*/ React.createElement("div", {
+        className: styles['TabsItem__after']
+    }, after), mode === 'default' && /*#__PURE__*/ React.createElement("div", {
+        className: styles['TabsItem__underline'],
+        "aria-hidden": true,
+        "data-selected": selected
+    }));
 };
+
 //# sourceMappingURL=TabsItem.js.map

package/dist/cssm/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":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAA2BC,eAAe,QAAQ,cAAc;AAChE,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,OAAO,QAAQ,+BAA+B;AAAC;AAGxD,IAAMC,eAAe;EACnBC,IAAI;AAAgC,GACnCP,QAAQ,CAACQ,OAAO,gCAClB;AA4BD,IAAMC,IAAI,GAAGR,QAAQ,CAAC,UAAU,CAAC;;AAEjC;AACA;AACA;AACA,OAAO,IAAMS,QAAQ,GAAG,SAAXA,QAAQ,OAUA;EAAA,IATnBC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IAAA,qBACLC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,SAAS,QAATA,SAAS;IAAA,iBACTC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACFC,YAAY,QAAtBC,QAAQ;IACLC,SAAS;EAEZ,qBAA2BrB,aAAa,EAAE;IAAA,sCAAlCsB,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB,wBAA6CxB,KAAK,CAACyB,UAAU,CAACpB,eAAe,CAAC;IAAtEqB,IAAI,qBAAJA,IAAI;IAAEC,QAAQ,qBAARA,QAAQ;EACtB,IAAIC,eAAe,GAAG,IAAI;EAE1B,IAAMC,SAAS,GAAGT,IAAI,KAAK,KAAK;EAEhC,IAAIJ,MAAM,EAAE;IACVY,eAAe,GACb,OAAOZ,MAAM,KAAK,QAAQ,gBACxB,oBAAC,OAAO;MACN,SAAS,EAAC,MAAM;MAChB,SAAS,EAAEf,UAAU,uDAAgE;MACrF,MAAM,EAAC;IAAG,GAETe,MAAM,CACC,gBAEV;MAAM,SAAS;IAA6B,GAAEA,MAAM,CACrD;EACL;EAEA,IAAIc,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,IAAIH,SAAS,EAAE;IACvD,IAAI,CAACN,SAAS,CAAC,eAAe,CAAC,EAAE;MAC/BX,IAAI,iNAAyD,MAAM,CAAC;IACtE,CAAC,MAAM,IAAI,CAACW,SAAS,CAAC,IAAI,CAAC,EAAE;MAC3BX,IAAI,sXAEF,MAAM,CACP;IACH;EACF;EAEA,IAAIU,QAAQ,GAAGD,YAAY;EAC3B,IAAIQ,SAAS,IAAIP,QAAQ,KAAKW,SAAS,EAAE;IACvCX,QAAQ,GAAGJ,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC;EAC9B;EAEA,oBACE,oBAAC,QAAQ,eACHK,SAAS;IACb,SAAS,EAAEtB,UAAU,iBAEnByB,IAAI,IAAIQ,MAAM,0BAAmBR,IAAI,EAAG,EACxCR,QAAQ,4BAAgC,EACxCM,KAAK,KAAKrB,QAAQ,CAACgC,OAAO,IAAI1B,eAAe,CAACe,KAAK,CAAC,EACpDG,QAAQ,4BAAgC,EACxCR,SAAS,CACT;IACF,SAAS,uBAA4B;IACrC,UAAU,wBAA6B;IACvC,gBAAgB,EAAC,QAAQ;IACzB,SAAS,EAAE,KAAM;IACjB,IAAI,EAAEC,IAAK;IACX,iBAAeF,QAAS;IACxB,QAAQ,EAAEI;EAAS,IAElBR,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,eACrE,oBAAC,QAAQ;IACP,SAAS,EAAC,MAAM;IAChB,SAAS,uBAA4B;IACrC,KAAK,EAAEY,IAAI,KAAK,SAAS,GAAG,GAAG,GAAG,GAAI;IACtC,MAAM,EAAC;EAAG,GAETX,QAAQ,CACA,EACVa,eAAe,EACfX,KAAK,iBAAI;IAAK,SAAS;EAA4B,GAAEA,KAAK,CAAO,EACjES,IAAI,KAAK,SAAS,iBACjB;IAAK,SAAS,2BAAgC;IAAC,mBAAW;IAAC,iBAAeR;EAAS,EACpF,CACQ;AAEf,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}
+{"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","styles","sizeYClassNames","none","COMPACT","warn","TabsItem","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","restProps","sizeY","mode","withGaps","useContext","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;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpC,CAACN,SAASS,OAAO,CAAC,EAAEH,MAAM,CAAC,0BAA0B;AACvD;AA4BA,MAAMI,OAAOT,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMU,WAAW,CAAC,EACvBC,OAAM,EACNC,SAAQ,EACRC,OAAM,EACNC,MAAK,EACLC,UAAW,KAAK,CAAA,EAChBC,UAAS,EACTC,MAAO,MAAK,EACZC,UAAUC,aAAY,EACtB,GAAGC,WACW,GAAK;IACnB,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGvB;IAC3B,MAAM,EAAEwB,KAAI,EAAEC,SAAQ,EAAE,GAAqB3B,MAAM4B,UAAU,CAACvB;IAC9D,IAAIwB,kBAAkB,IAAI;IAE1B,MAAMC,YAAYT,SAAS;IAE3B,IAAIJ,QAAQ;QACVY,kBACE,OAAOZ,WAAW,yBAChB,oBAACT;YACCuB,WAAU;YACVX,WAAWnB,WAAWQ,MAAM,CAAC,mBAAmB,EAAEA,MAAM,CAAC,0BAA0B;YACnFuB,QAAO;WAENf,wBAGH,oBAACgB;YAAKb,WAAWX,MAAM,CAAC,mBAAmB;WAAGQ,OAC/C;IACL,CAAC;IAED,IAAIiB,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBN,WAAW;QACvD,IAAI,CAACN,SAAS,CAAC,gBAAgB,EAAE;YAC/BX,KAAK,CAAC,oDAAoD,CAAC,EAAE;QAC/D,OAAO,IAAI,CAACW,SAAS,CAAC,KAAK,EAAE;YAC3BX,KACE,CAAC,qFAAqF,CAAC,EACvF;QAEJ,CAAC;IACH,CAAC;IAED,IAAIS,WAAWC;IACf,IAAIO,aAAaR,aAAae,WAAW;QACvCf,WAAWH,WAAW,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,qBACE,oBAACb;QACE,GAAGkB,SAAS;QACbJ,WAAWnB,WACTQ,MAAM,CAAC,WAAW,EAClBiB,QACE,CAAA;YACEY,SAAS7B,MAAM,CAAC,yBAAyB;YACzC8B,QAAQ9B,MAAM,CAAC,wBAAwB;YACvC+B,WAAW/B,MAAM,CAAC,2BAA2B;QAC/C,CAAA,CAAC,CAACiB,KAAK,EACTP,YAAYV,MAAM,CAAC,qBAAqB,EACxCgB,UAAUtB,SAASsC,OAAO,IAAI/B,eAAe,CAACe,MAAM,EACpDE,YAAYlB,MAAM,CAAC,qBAAqB,EACxCW;QAEFsB,WAAWjC,MAAM,CAAC,kBAAkB;QACpCkC,YAAW;QACXC,kBAAiB;QACjBC,WAAW,KAAK;QAChBxB,MAAMA;QACNyB,iBAAe3B;QACfG,UAAUA;OAETP,wBAAU,oBAACgC;QAAI3B,WAAWX,MAAM,CAAC,mBAAmB;OAAGM,uBACxD,oBAACR;QACCwB,WAAU;QACVX,WAAWX,MAAM,CAAC,kBAAkB;QACpCuC,OAAOtB,SAAS,YAAY,MAAM,GAAG;QACrCM,QAAO;OAENhB,WAEFa,iBACAX,uBAAS,oBAAC6B;QAAI3B,WAAWX,MAAM,CAAC,kBAAkB;OAAGS,QACrDQ,SAAS,2BACR,oBAACqB;QAAI3B,WAAWX,MAAM,CAAC,sBAAsB;QAAEwC,eAAAA,IAAW;QAACC,iBAAe/B;;AAIlF,EAAE"}

package/dist/cssm/components/TabsItem/TabsItem.module.css

@@ -1 +1 @@
-.vkuiTabsItem{align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;display:flex;justify-content:center;max-width:100%;min-height:32px;min-width:0;padding:4px 8px;transition:background-color .15s ease-out}.vkuiTabsItem--withGaps{margin-bottom:8px;margin-top:8px}.vkuiTabsItem--withGaps:not(:first-of-type){margin-left:6px}.vkuiTabsItem--sizeY-compact{min-height:28px;padding-bottom:2px;padding-top:2px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiTabsItem--sizeY-none{min-height:28px;padding-bottom:2px;padding-top:2px}}.vkuiTabsItem[disabled]{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiTabsItem--mode-default{flex-basis:0;flex-grow:1;flex-shrink:0;min-height:48px;padding:12px 16px;position:relative}.vkuiTabsItem--sizeY-compact.vkuiTabsItem--mode-default{min-height:44px;padding-bottom:10px;padding-top:10px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiTabsItem--sizeY-none.vkuiTabsItem--mode-default{min-height:44px;padding-bottom:10px;padding-top:10px}}.vkuiTabsItem--hover.vkuiTabsItem--mode-default{background-color:rgba(0,16,61,.04);background-color:var(--vkui--color_transparent--hover)}.vkuiTabsItem--mode-accent{transition:background-color .15s ease-out,box-shadow .15s ease-out}.vkuiTabsItem--selected.vkuiTabsItem--mode-accent{background-color:#fff;background-color:var(--vkui--color_background_modal);box-shadow:0 4px 8px rgba(0,0,0,.04),0 0 4px rgba(0,0,0,.06);box-shadow:var(--vkui--elevation2)}.vkuiTabsItem--hover.vkuiTabsItem--mode-accent{background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary)}.vkuiTabsItem--mode-accent:before{border:1px solid transparent;border:var(--vkui_internal--thin_border) solid transparent;border-radius:inherit;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.vkuiTabsItem--selected.vkuiTabsItem--mode-accent:before{border-color:#d7d8d9;border-color:var(--vkui--color_separator_primary)}.vkuiTabsItem--selected.vkuiTabsItem--mode-secondary{background-color:rgba(0,0,0,.04);background-color:var(--vkui--color_background_secondary_alpha)}.vkuiTabsItem--hover.vkuiTabsItem--mode-secondary{background-color:rgba(0,0,0,.08);background-color:var(--vkui--color_background_secondary_alpha--hover)}.vkuiTabsItem__before{color:#818c99;color:var(--vkui--color_icon_medium);margin-right:6px;transition:color .15s ease-out}.vkuiTabsItem--selected .vkuiTabsItem__before{color:#2c2d2e;color:var(--vkui--color_icon_primary)}.vkuiTabsItem--selected.vkuiTabsItem--mode-accent .vkuiTabsItem__before{color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiTabsItem--selected.vkuiTabsItem--mode-secondary .vkuiTabsItem__before{opacity:.72}.vkuiTabsItem__label{color:#818c99;color:var(--vkui--color_text_secondary);max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:color .15s ease-out;white-space:nowrap}.vkuiTabsItem--selected .vkuiTabsItem__label{color:#000;color:var(--vkui--color_text_primary)}.vkuiTabsItem--selected.vkuiTabsItem--mode-accent .vkuiTabsItem__label{color:#2688eb;color:var(--vkui--color_text_accent_themed)}.vkuiTabsItem--selected.vkuiTabsItem--mode-secondary .vkuiTabsItem__label{opacity:.72}.vkuiTabsItem__status{margin-left:6px}.vkuiTabsItem__status--count{color:#99a2ad;color:var(--vkui--color_text_tertiary)}.vkuiTabsItem__after{color:#2688eb;color:var(--vkui--color_icon_accent_themed);margin-left:6px}.vkuiTabsItem__underline{background-color:#2688eb;background-color:var(--vkui--color_background_accent);border-radius:2px;bottom:5px;height:2px;left:16px;opacity:0;pointer-events:none;position:absolute;right:16px;transition:opacity .15s ease-out}.vkuiTabsItem--sizeY-compact .vkuiTabsItem__underline{bottom:3px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiTabsItem--sizeY-none .vkuiTabsItem__underline{bottom:3px}}.vkuiTabsItem__underline[data-selected=true]{opacity:1}.vkuiTabs--vkcom .vkuiTabsItem{flex-grow:0;min-width:auto;padding-left:10px;padding-right:10px}.vkuiTabs--vkcom .vkuiTabsItem__underline{bottom:0;left:2px;right:2px}.vkuiHorizontalScroll .vkuiTabsItem{flex-basis:auto;flex-grow:1;flex-shrink:0;min-width:64px}
+.vkuiTabsItem{align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;display:flex;justify-content:center;max-width:100%;min-height:32px;min-width:0;padding:4px 8px;transition:background-color .15s ease-out}.vkuiTabsItem--withGaps{margin-bottom:8px;margin-top:8px}.vkuiTabsItem--withGaps:not(:first-of-type){margin-left:6px}.vkuiTabsItem--sizeY-compact{min-height:28px;padding-bottom:2px;padding-top:2px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiTabsItem--sizeY-none{min-height:28px;padding-bottom:2px;padding-top:2px}}.vkuiTabsItem[disabled]{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiTabsItem--mode-default{flex-basis:0;flex-grow:1;flex-shrink:0;min-height:48px;padding:12px 16px;position:relative}.vkuiTabsItem--sizeY-compact.vkuiTabsItem--mode-default{min-height:44px;padding-bottom:10px;padding-top:10px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiTabsItem--sizeY-none.vkuiTabsItem--mode-default{min-height:44px;padding-bottom:10px;padding-top:10px}}.vkuiTabsItem--hover.vkuiTabsItem--mode-default{background-color:rgba(0,16,61,.04);background-color:var(--vkui--color_transparent--hover)}.vkuiTabsItem--mode-accent{transition:background-color .15s ease-out,box-shadow .15s ease-out}.vkuiTabsItem--selected.vkuiTabsItem--mode-accent{background-color:#fff;background-color:var(--vkui--color_background_modal);box-shadow:0 4px 8px rgba(0,0,0,.04),0 0 4px rgba(0,0,0,.06);box-shadow:var(--vkui--elevation2)}.vkuiTabsItem--hover.vkuiTabsItem--mode-accent{background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary)}.vkuiTabsItem--mode-accent:before{border:1px solid transparent;border:var(--vkui_internal--thin_border) solid transparent;border-radius:inherit;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.vkuiTabsItem--selected.vkuiTabsItem--mode-accent:before{border-color:#d7d8d9;border-color:var(--vkui--color_separator_primary)}.vkuiTabsItem--selected.vkuiTabsItem--mode-secondary{background-color:rgba(0,0,0,.04);background-color:var(--vkui--color_background_secondary_alpha)}.vkuiTabsItem--hover.vkuiTabsItem--mode-secondary{background-color:rgba(0,0,0,.08);background-color:var(--vkui--color_background_secondary_alpha--hover)}.vkuiTabsItem__before{color:#818c99;color:var(--vkui--color_icon_medium);margin-right:6px;transition:color .15s ease-out}.vkuiTabsItem--selected .vkuiTabsItem__before{color:#2c2d2e;color:var(--vkui--color_icon_primary)}.vkuiTabsItem--selected.vkuiTabsItem--mode-accent .vkuiTabsItem__before{color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiTabsItem--selected.vkuiTabsItem--mode-secondary .vkuiTabsItem__before{opacity:.72}.vkuiTabsItem__label{color:#818c99;color:var(--vkui--color_text_secondary);max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:color .15s ease-out;white-space:nowrap}.vkuiTabsItem--selected .vkuiTabsItem__label{color:#000;color:var(--vkui--color_text_primary)}.vkuiTabsItem--selected.vkuiTabsItem--mode-accent .vkuiTabsItem__label{color:#2688eb;color:var(--vkui--color_text_accent_themed)}.vkuiTabsItem--selected.vkuiTabsItem--mode-secondary .vkuiTabsItem__label{opacity:.72}.vkuiTabsItem__status{margin-left:6px}.vkuiTabsItem__status--count{color:#99a2ad;color:var(--vkui--color_text_tertiary)}.vkuiTabsItem__after{color:#2688eb;color:var(--vkui--color_icon_accent_themed);margin-left:6px}.vkuiTabsItem__underline{background-color:#2688eb;background-color:var(--vkui--color_background_accent);border-radius:2px;bottom:5px;height:2px;left:16px;opacity:0;pointer-events:none;position:absolute;right:16px;transition:opacity .15s ease-out}.vkuiTabsItem--sizeY-compact .vkuiTabsItem__underline{bottom:3px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiTabsItem--sizeY-none .vkuiTabsItem__underline{bottom:3px}}.vkuiTabsItem__underline[data-selected=true]{opacity:1}.vkuiInternalTabs--vkcom .vkuiTabsItem{flex-grow:0;min-width:auto;padding-left:10px;padding-right:10px}.vkuiInternalTabs--vkcom .vkuiTabsItem__underline{bottom:0;left:2px;right:2px}.vkuiInternalHorizontalScroll .vkuiTabsItem{flex-basis:auto;flex-grow:1;flex-shrink:0;min-width:64px}

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