@vkontakte/vkui 5.0.3 → 5.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["React","classNamesString","usePlatform","Platform","useGlobalEventListener","useDOM","pressedKey","useAdaptivity","getSizeXClassName","TabsModeContext","createContext","mode","withGaps","Tabs","children","getRootRef","className","role","restProps","platform","sizeX","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","styles"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { Platform } from \"../../lib/platform\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { useDOM } from \"../../lib/dom\";\nimport { pressedKey } from \"../../lib/accessibility\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\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 { sizeX } = useAdaptivity();\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>(\n        \"[role=tab]:not([disabled])\"\n      )\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(\n          (el) => document.activeElement === el\n        );\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(\n          (el) => document.activeElement === el\n        );\n\n        if (\n          !currentFocusedEl ||\n          currentFocusedEl.getAttribute(\"aria-selected\") !== \"true\"\n        ) {\n          return;\n        }\n\n        const relatedContentElId =\n          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(\n          (el) => document.activeElement === el\n        );\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={classNamesString(\n        styles[\"Tabs\"],\n        platform === Platform.VKCOM && styles[`Tabs--${platform}`],\n        getSizeXClassName(styles[\"Tabs\"], sizeX),\n        withGaps && styles[\"Tabs--withGaps\"],\n        styles[`Tabs--mode-${mode}`],\n        className\n      )}\n      role={role}\n    >\n      <div className={styles[\"Tabs__in\"]} ref={tabsRef}>\n        <TabsModeContext.Provider value={{ mode, withGaps }}>\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":["React","classNames","usePlatform","Platform","useGlobalEventListener","useDOM","pressedKey","useAdaptivity","getSizeXClassName","TabsModeContext","createContext","mode","withGaps","Tabs","children","getRootRef","className","role","restProps","platform","sizeX","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","styles"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { pressedKey } from '../../lib/accessibility';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\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 { sizeX } = useAdaptivity();\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--${platform}`],\n        getSizeXClassName(styles['Tabs'], sizeX),\n        withGaps && styles['Tabs--withGaps'],\n        styles[`Tabs--mode-${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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"}

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Добавляет иконку слева.

package/dist/components/TabsItem/TabsItem.js

@@ -1,16 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["before", "children", "status", "after", "selected", "className", "role", "tabIndex"];
-import * as React from "react";
-import { Tappable } from "../Tappable/Tappable";
-import { classNamesString } from "../../lib/classNames";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { TabsModeContext } from "../Tabs/Tabs";
-import { Headline } from "../Typography/Headline/Headline";
-import { Subhead } from "../Typography/Subhead/Subhead";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
-import { warnOnce } from "../../lib/warnOnce";
-var warn = warnOnce("TabsItem");
+import * as React from 'react';
+import { Tappable } from '../Tappable/Tappable';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { TabsModeContext } from '../Tabs/Tabs';
+import { Headline } from '../Typography/Headline/Headline';
+import { Subhead } from '../Typography/Subhead/Subhead';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
+import { warnOnce } from '../../lib/warnOnce';
+var warn = warnOnce('TabsItem');
 
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
@@ -24,7 +24,7 @@ export var TabsItem = function TabsItem(_ref) {
     selected = _ref$selected === void 0 ? false : _ref$selected,
     className = _ref.className,
     _ref$role = _ref.role,
-    role = _ref$role === void 0 ? "tab" : _ref$role,
+    role = _ref$role === void 0 ? 'tab' : _ref$role,
     tabIndexProp = _ref.tabIndex,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useAdaptivity = useAdaptivity(),
@@ -33,21 +33,21 @@ export var TabsItem = function TabsItem(_ref) {
     mode = _React$useContext.mode,
     withGaps = _React$useContext.withGaps;
   var statusComponent = null;
-  var isTabFlow = role === "tab";
+  var isTabFlow = role === 'tab';
   if (status) {
-    statusComponent = typeof status === "number" ? /*#__PURE__*/React.createElement(Subhead, {
+    statusComponent = typeof status === 'number' ? /*#__PURE__*/React.createElement(Subhead, {
       Component: "span",
-      className: classNamesString("vkuiTabsItem__status", "vkuiTabsItem__status--count"),
+      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");
+  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 tabIndex = tabIndexProp;
@@ -55,7 +55,7 @@ export var TabsItem = function TabsItem(_ref) {
     tabIndex = selected ? 0 : -1;
   }
   return /*#__PURE__*/React.createElement(Tappable, _extends({}, restProps, {
-    className: classNamesString("vkuiTabsItem", mode && styles["TabsItem--mode-".concat(mode)], selected && "vkuiTabsItem--selected", getSizeYClassName("vkuiTabsItem", sizeY), withGaps && "vkuiTabsItem--withGaps", className),
+    className: classNames("vkuiTabsItem", mode && styles["TabsItem--mode-".concat(mode)], selected && "vkuiTabsItem--selected", getSizeYClassName("vkuiTabsItem", sizeY), withGaps && "vkuiTabsItem--withGaps", className),
     hoverMode: "vkuiTabsItem--hover",
     activeMode: "vkuiTabsItem--active",
     focusVisibleMode: "inside",
@@ -68,11 +68,11 @@ export var TabsItem = function TabsItem(_ref) {
   }, before), /*#__PURE__*/React.createElement(Headline, {
     Component: "span",
     className: "vkuiTabsItem__label",
-    level: mode === "default" ? "1" : "2",
+    level: mode === 'default' ? '1' : '2',
     weight: "2"
   }, children), statusComponent, after && /*#__PURE__*/React.createElement("div", {
     className: "vkuiTabsItem__after"
-  }, after), mode === "default" && /*#__PURE__*/React.createElement("div", {
+  }, after), mode === 'default' && /*#__PURE__*/React.createElement("div", {
     className: "vkuiTabsItem__underline",
     "aria-hidden": true,
     "data-selected": selected

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

@@ -1 +1 @@
-{"version":3,"file":"TabsItem.js","names":["React","Tappable","classNamesString","useAdaptivity","TabsModeContext","Headline","Subhead","getSizeYClassName","warnOnce","warn","TabsItem","before","children","status","after","selected","className","role","tabIndexProp","tabIndex","restProps","sizeY","useContext","mode","withGaps","statusComponent","isTabFlow","process","env","NODE_ENV","undefined","styles"],"sources":["../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { TabsModeContext, TabsContextProps } from \"../Tabs/Tabs\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport styles from \"./TabsItem.module.css\";\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\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 } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps =\n    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={classNamesString(\n            styles[\"TabsItem__status\"],\n            styles[\"TabsItem__status--count\"]\n          )}\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={classNamesString(\n        styles[\"TabsItem\"],\n        mode && styles[`TabsItem--mode-${mode}`],\n        selected && styles[\"TabsItem--selected\"],\n        getSizeYClassName(styles[\"TabsItem\"], 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\n          className={styles[\"TabsItem__underline\"]}\n          aria-hidden\n          data-selected={selected}\n        />\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"TabsItem.js","names":["React","Tappable","classNames","useAdaptivity","TabsModeContext","Headline","Subhead","getSizeYClassName","warnOnce","warn","TabsItem","before","children","status","after","selected","className","role","tabIndexProp","tabIndex","restProps","sizeY","useContext","mode","withGaps","statusComponent","isTabFlow","process","env","NODE_ENV","undefined","styles"],"sources":["../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Tappable } from '../Tappable/Tappable';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { TabsModeContext, TabsContextProps } from '../Tabs/Tabs';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { warnOnce } from '../../lib/warnOnce';\nimport styles from './TabsItem.module.css';\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\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 } = 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        getSizeYClassName(styles['TabsItem'], 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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"}

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

@@ -1,10 +1,10 @@
-import * as React from "react";
-import { TouchProps } from "../Touch/Touch";
-import { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from "../../types";
-import { FocusVisibleMode } from "../FocusVisible/FocusVisible";
-declare type StateMode = "opacity" | "background";
-export declare 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"> {
+import * as React from 'react';
+import { TouchProps } from '../Touch/Touch';
+import { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from '../../types';
+import { FocusVisibleMode } from '../FocusVisible/FocusVisible';
+declare type StateMode = 'opacity' | 'background';
+export declare 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-состояния
      */

package/dist/components/Tappable/Tappable.js

@@ -3,27 +3,26 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["children", "Component", "onClick", "onKeyDown", "activeEffectDelay", "stopPropagation", "getRootRef", "hasHover", "hoverMode", "hasActive", "activeMode", "focusVisibleMode", "onEnter", "onLeave", "className"];
-import * as React from "react";
-import mitt from "mitt";
-import { noop } from "../../lib/utils";
-import { Touch } from "../Touch/Touch";
-import TouchRootContext from "../Touch/TouchContext";
-import { classNamesString } from "../../lib/classNames";
-import { Platform } from "../../lib/platform";
-import { getOffsetRect } from "../../lib/offset";
-import { coordX, coordY } from "../../lib/touch";
-import { shouldTriggerClickOnEnterOrSpace } from "../../lib/accessibility";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { FocusVisible } from "../FocusVisible/FocusVisible";
-import { useTimeout } from "../../hooks/useTimeout";
-import { useExternRef } from "../../hooks/useExternRef";
-import { usePlatform } from "../../hooks/usePlatform";
-import { useFocusVisible } from "../../hooks/useFocusVisible";
-import { callMultiple } from "../../lib/callMultiple";
-import { useBooleanState } from "../../hooks/useBooleanState";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { useAdaptivityHasHover } from "../../hooks/useAdaptivityHasHover";
-import { useAdaptivityHasPointer } from "../../hooks/useAdaptivityHasPointer";
+import * as React from 'react';
+import mitt from 'mitt';
+import { classNames, noop } from '@vkontakte/vkjs';
+import { Touch } from '../Touch/Touch';
+import TouchRootContext from '../Touch/TouchContext';
+import { Platform } from '../../lib/platform';
+import { getOffsetRect } from '../../lib/offset';
+import { coordX, coordY } from '../../lib/touch';
+import { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { FocusVisible } from '../FocusVisible/FocusVisible';
+import { useTimeout } from '../../hooks/useTimeout';
+import { useExternRef } from '../../hooks/useExternRef';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useFocusVisible } from '../../hooks/useFocusVisible';
+import { callMultiple } from '../../lib/callMultiple';
+import { useBooleanState } from '../../hooks/useBooleanState';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';
+import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
 var sizeXClassNames = {
   none: "vkuiTappable--sizeX-none",
   compact: "vkuiTappable--sizeX-compact",
@@ -44,8 +43,8 @@ var TappableContext = /*#__PURE__*/React.createContext({
 });
 function isPresetStateMode(stateMode) {
   switch (stateMode) {
-    case "opacity":
-    case "background":
+    case 'opacity':
+    case 'background':
       return true;
     default:
       return false;
@@ -79,7 +78,7 @@ function useActivity(hasActive, stopDelay) {
       return stopTimeout.clear;
     }
     if (activity === TapState.active) {
-      activeBus.emit("active", id);
+      activeBus.emit('active', id);
     }
     return noop;
   }, [activity]);
@@ -90,9 +89,9 @@ function useActivity(hasActive, stopDelay) {
     var onActiveChange = function onActiveChange(activeId) {
       activeId !== id && _stop();
     };
-    activeBus.on("active", onActiveChange);
+    activeBus.on('active', onActiveChange);
     return function () {
-      return activeBus.off("active", onActiveChange);
+      return activeBus.off('active', onActiveChange);
     };
   }, [activity === TapState.none]);
   useIsomorphicLayoutEffect(function () {
@@ -128,18 +127,18 @@ export var Tappable = function Tappable(_ref) {
     _ref$hasHover = _ref.hasHover,
     _hasHover = _ref$hasHover === void 0 ? true : _ref$hasHover,
     _ref$hoverMode = _ref.hoverMode,
-    hoverMode = _ref$hoverMode === void 0 ? "background" : _ref$hoverMode,
+    hoverMode = _ref$hoverMode === void 0 ? 'background' : _ref$hoverMode,
     _ref$hasActive = _ref.hasActive,
     _hasActive = _ref$hasActive === void 0 ? true : _ref$hasActive,
     _ref$activeMode = _ref.activeMode,
-    activeMode = _ref$activeMode === void 0 ? "background" : _ref$activeMode,
+    activeMode = _ref$activeMode === void 0 ? 'background' : _ref$activeMode,
     _ref$focusVisibleMode = _ref.focusVisibleMode,
-    focusVisibleMode = _ref$focusVisibleMode === void 0 ? "inside" : _ref$focusVisibleMode,
+    focusVisibleMode = _ref$focusVisibleMode === void 0 ? 'inside' : _ref$focusVisibleMode,
     onEnter = _ref.onEnter,
     onLeave = _ref.onLeave,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
-  Component = Component || (props.href ? "a" : "div");
+  Component = Component || (props.href ? 'a' : 'div');
   var _React$useContext = React.useContext(TappableContext),
     onHoverChange = _React$useContext.onHoverChange;
   var insideTouchRoot = React.useContext(TouchRootContext);
@@ -150,7 +149,7 @@ export var Tappable = function Tappable(_ref) {
     onFocus = _useFocusVisible.onFocus;
   var _useAdaptivity = useAdaptivity(),
     _useAdaptivity$sizeX = _useAdaptivity.sizeX,
-    sizeX = _useAdaptivity$sizeX === void 0 ? "none" : _useAdaptivity$sizeX;
+    sizeX = _useAdaptivity$sizeX === void 0 ? 'none' : _useAdaptivity$sizeX;
   var hasPointerContext = useAdaptivityHasPointer();
   var hasHoverContext = useAdaptivityHasHover();
   var _React$useState3 = React.useState([]),
@@ -167,11 +166,11 @@ export var Tappable = function Tappable(_ref) {
     setHoveredFalse = _useBooleanState.setFalse;
   var hovered = _hovered && !props.disabled;
   var hasActive = _hasActive && !childHover && !props.disabled;
-  var hasHover = hasHoverContext === true && _hasHover && !childHover;
-  var isCustomElement = Component !== "a" && Component !== "button" && Component !== "label" && !props.contentEditable;
+  var hasHover = hasHoverContext && _hasHover && !childHover;
+  var isCustomElement = Component !== 'a' && Component !== 'button' && Component !== 'label' && !props.contentEditable;
   var isPresetHoverMode = isPresetStateMode(hoverMode);
   var isPresetActiveMode = isPresetStateMode(activeMode);
-  var isPresetFocusVisibleMode = ["inside", "outside"].includes(focusVisibleMode);
+  var isPresetFocusVisibleMode = ['inside', 'outside'].includes(focusVisibleMode);
   var _useActivity = useActivity(hasActive, activeEffectDelay),
     _useActivity2 = _slicedToArray(_useActivity, 2),
     activity = _useActivity2[0],
@@ -210,7 +209,7 @@ export var Tappable = function Tappable(_ref) {
       (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.click();
     }
   }
-  var needWaves = platform === Platform.ANDROID && !hasPointerContext && hasActive && activeMode === "background";
+  var needWaves = platform === Platform.ANDROID && !hasPointerContext && hasActive && activeMode === 'background';
   var clearClicks = useTimeout(function () {
     return setClicks([]);
   }, WAVE_LIVE);
@@ -264,7 +263,7 @@ export var Tappable = function Tappable(_ref) {
     var activeDuration = duration - ACTIVE_DELAY;
     stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);
   }
-  var classes = classNamesString(className, "vkuiTappable", platform === Platform.IOS && "vkuiTappable--ios", sizeXClassNames[sizeX], hasHoverContext && "vkuiTappable--hover-has", hasActive && "vkuiTappable--hasActive", hasHover && hovered && !isPresetHoverMode && hoverMode, hasActive && active && !isPresetActiveMode && activeMode, focusVisible && !isPresetFocusVisibleMode && focusVisibleMode, hasActive && active && "vkuiTappable--active", hasHover && hovered && isPresetHoverMode && styles["Tappable--hover-".concat(hoverMode)], hasActive && active && isPresetActiveMode && styles["Tappable--active-".concat(activeMode)], focusVisible && "vkuiTappable--focus-visible");
+  var classes = classNames(className, "vkuiTappable", platform === Platform.IOS && "vkuiTappable--ios", sizeXClassNames[sizeX], hasHoverContext && "vkuiTappable--hover-has", hasActive && "vkuiTappable--hasActive", hasHover && hovered && !isPresetHoverMode && hoverMode, hasActive && active && !isPresetActiveMode && activeMode, focusVisible && !isPresetFocusVisibleMode && focusVisibleMode, hasActive && active && "vkuiTappable--active", hasHover && hovered && isPresetHoverMode && styles["Tappable--hover-".concat(hoverMode)], hasActive && active && isPresetActiveMode && styles["Tappable--active-".concat(activeMode)], focusVisible && "vkuiTappable--focus-visible");
   var handlers = {
     onStart: callMultiple(onStart, props.onStart),
     onMove: callMultiple(onMove, props.onMove),
@@ -272,11 +271,11 @@ export var Tappable = function Tappable(_ref) {
     onClick: onClick,
     onKeyDown: callMultiple(onKeyDown, _onKeyDown)
   };
-  var role = props.href ? "link" : "button";
+  var role = props.href ? 'link' : 'button';
   return /*#__PURE__*/React.createElement(Touch, _extends({
     onEnter: callMultiple(setHoveredTrue, onEnter),
     onLeave: callMultiple(setHoveredFalse, onLeave),
-    type: Component === "button" ? "button" : undefined,
+    type: Component === 'button' ? 'button' : undefined,
     tabIndex: isCustomElement && !props.disabled ? 0 : undefined,
     role: isCustomElement ? role : undefined,
     "aria-disabled": isCustomElement ? props.disabled : undefined,
@@ -292,7 +291,7 @@ export var Tappable = function Tappable(_ref) {
   }, props.disabled ? {} : handlers), /*#__PURE__*/React.createElement(TappableContext.Provider, {
     value: childContext
   }, children), needWaves && /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true",
+    "aria-hidden": true,
     className: "vkuiTappable__waves"
   }, clicks.map(function (wave) {
     return /*#__PURE__*/React.createElement("span", {
@@ -303,8 +302,8 @@ export var Tappable = function Tappable(_ref) {
         left: wave.x
       }
     });
-  })), (hasHover && hoverMode === "background" || hasActive && activeMode === "background") && /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true",
+  })), (hasHover && hoverMode === 'background' || hasActive && activeMode === 'background') && /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": true,
     className: "vkuiTappable__stateLayer"
   }), !props.disabled && isPresetFocusVisibleMode && /*#__PURE__*/React.createElement(FocusVisible, {
     mode: focusVisibleMode

package/dist/components/Tappable/Tappable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tappable.js","names":["React","mitt","noop","Touch","TouchRootContext","classNamesString","Platform","getOffsetRect","coordX","coordY","shouldTriggerClickOnEnterOrSpace","useIsomorphicLayoutEffect","FocusVisible","useTimeout","useExternRef","usePlatform","useFocusVisible","callMultiple","useBooleanState","useAdaptivity","useAdaptivityHasHover","useAdaptivityHasPointer","sizeXClassNames","none","compact","regular","WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","TapState","pending","active","exiting","TappableContext","createContext","onHoverChange","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","stopTimeout","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","Tappable","children","Component","onClick","_onKeyDown","onKeyDown","activeEffectDelay","stopPropagation","getRootRef","hasHover","_hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","props","href","useContext","insideTouchRoot","platform","focusVisible","onBlur","onFocus","sizeX","hasPointerContext","hasHoverContext","clicks","setClicks","childHover","setChildHover","_hovered","value","setHoveredTrue","setTrue","setHoveredFalse","setFalse","hovered","disabled","isCustomElement","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","containerRef","childContext","useRef","current","e","preventDefault","click","needWaves","ANDROID","clearClicks","addClick","x","y","dateNow","Date","now","filteredClicks","filter","onStart","originalEvent","touches","length","top","left","onMove","isSlide","onEnd","duration","activeDuration","classes","IOS","styles","handlers","role","undefined","map","wave"],"sources":["../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from \"react\";\nimport mitt from \"mitt\";\nimport { noop } from \"../../lib/utils\";\nimport { Touch, TouchEvent, TouchProps } from \"../Touch/Touch\";\nimport TouchRootContext from \"../Touch/TouchContext\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport { getOffsetRect } from \"../../lib/offset\";\nimport { coordX, coordY } from \"../../lib/touch\";\nimport {\n  AnchorHTMLAttributesOnly,\n  HasComponent,\n  HasRootRef,\n} from \"../../types\";\nimport { shouldTriggerClickOnEnterOrSpace } from \"../../lib/accessibility\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { FocusVisible, FocusVisibleMode } from \"../FocusVisible/FocusVisible\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useFocusVisible } from \"../../hooks/useFocusVisible\";\nimport { callMultiple } from \"../../lib/callMultiple\";\nimport { useBooleanState } from \"../../hooks/useBooleanState\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useAdaptivityHasHover } from \"../../hooks/useAdaptivityHasHover\";\nimport { useAdaptivityHasPointer } from \"../../hooks/useAdaptivityHasPointer\";\nimport styles from \"./Tappable.module.css\";\n\nconst sizeXClassNames = {\n  none: styles[\"Tappable--sizeX-none\"],\n  compact: styles[\"Tappable--sizeX-compact\"],\n  regular: styles[\"Tappable--sizeX-regular\"],\n};\n\ntype StateMode = \"opacity\" | \"background\";\n\nconst WAVE_LIVE = 225;\n\nexport type TappableElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  | \"onTouchStart\"\n  | \"onTouchMove\"\n  | \"onTouchEnd\"\n  | \"onTouchCancel\"\n  | \"onMouseDown\"\n  | \"onMouseMove\"\n  | \"onMouseUp\"\n  | \"onMouseLeave\"\n> &\n  AnchorHTMLAttributesOnly; // В AllHTMLAttributes не хватает типов для ссылок\n\nexport interface TappableProps\n  extends TappableElementProps,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    Pick<TouchProps, \"onStart\" | \"onEnd\" | \"onMove\"> {\n  /**\n   * Длительность показа active-состояния\n   */\n  activeEffectDelay?: number;\n  stopPropagation?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: StateMode | string;\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: StateMode | string;\n  /**\n   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n   */\n  focusVisibleMode?: FocusVisibleMode | string;\n  children?: React.ReactNode;\n  onEnter?(outputEvent: MouseEvent): void;\n  onLeave?(outputEvent: MouseEvent): void;\n}\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n}\n\nexport interface RootComponentProps extends TouchProps {\n  ref?: React.Ref<HTMLElement>;\n}\n\nexport const ACTIVE_DELAY = 70;\nexport const ACTIVE_EFFECT_DELAY = 600;\n\nconst activeBus = mitt<{ active: string }>();\nconst TapState = { none: 0, pending: 1, active: 2, exiting: 3 } as const;\n\ntype TappableContextInterface = { onHoverChange: (s: boolean) => void };\nconst TappableContext = React.createContext<TappableContextInterface>({\n  onHoverChange: noop,\n});\n\nfunction isPresetStateMode(\n  stateMode: StateMode | string\n): stateMode is StateMode {\n  switch (stateMode) {\n    case \"opacity\":\n    case \"background\":\n      return true;\n    default:\n      return false;\n  }\n}\n\nfunction useActivity(hasActive: boolean, stopDelay: number) {\n  const id = React.useMemo(\n    () => Math.round(Math.random() * 1e8).toString(16),\n    []\n  );\n\n  const [activity, setActivity] = React.useState<\n    typeof TapState[keyof typeof TapState]\n  >(TapState.none);\n  const _stop = () => setActivity(TapState.none);\n  const start = () => hasActive && setActivity(TapState.active);\n  const delayStart = () => {\n    hasActive && setActivity(TapState.pending);\n  };\n\n  const activeTimeout = useTimeout(start, ACTIVE_DELAY);\n  const stopTimeout = useTimeout(_stop, stopDelay);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.pending) {\n      activeTimeout.set();\n      return activeTimeout.clear;\n    }\n    if (activity === TapState.exiting) {\n      return stopTimeout.clear;\n    }\n    if (activity === TapState.active) {\n      activeBus.emit(\"active\", id);\n    }\n    return noop;\n  }, [activity]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.none) {\n      return noop;\n    }\n    const onActiveChange = (activeId: string) => {\n      activeId !== id && _stop();\n    };\n    activeBus.on(\"active\", onActiveChange);\n    return () => activeBus.off(\"active\", onActiveChange);\n  }, [activity === TapState.none]);\n\n  useIsomorphicLayoutEffect(() => {\n    !hasActive && _stop();\n  }, [hasActive]);\n\n  const stop = (delay?: number) => {\n    if (delay) {\n      setActivity(TapState.exiting);\n      return stopTimeout.set(delay);\n    }\n    _stop();\n  };\n\n  return [activity, { delayStart, start, stop }] as const;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tappable\n */\nexport const Tappable = ({\n  children,\n  Component,\n  onClick,\n  onKeyDown: _onKeyDown,\n  activeEffectDelay = ACTIVE_EFFECT_DELAY,\n  stopPropagation = false,\n  getRootRef,\n  hasHover: _hasHover = true,\n  hoverMode = \"background\",\n  hasActive: _hasActive = true,\n  activeMode = \"background\",\n  focusVisibleMode = \"inside\",\n  onEnter,\n  onLeave,\n  className,\n  ...props\n}: TappableProps) => {\n  Component = Component || ((props.href ? \"a\" : \"div\") as React.ElementType);\n\n  const { onHoverChange } = React.useContext(TappableContext);\n  const insideTouchRoot = React.useContext(TouchRootContext);\n  const platform = usePlatform();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeX = \"none\" } = useAdaptivity();\n  const hasPointerContext = useAdaptivityHasPointer();\n  const hasHoverContext = useAdaptivityHasHover();\n\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n  const [childHover, setChildHover] = React.useState(false);\n  const {\n    value: _hovered,\n    setTrue: setHoveredTrue,\n    setFalse: setHoveredFalse,\n  } = useBooleanState(false);\n\n  const hovered = _hovered && !props.disabled;\n  const hasActive = _hasActive && !childHover && !props.disabled;\n  const hasHover = hasHoverContext === true && _hasHover && !childHover;\n  const isCustomElement =\n    Component !== \"a\" &&\n    Component !== \"button\" &&\n    Component !== \"label\" &&\n    !props.contentEditable;\n  const isPresetHoverMode = isPresetStateMode(hoverMode);\n  const isPresetActiveMode = isPresetStateMode(activeMode);\n  const isPresetFocusVisibleMode = [\"inside\", \"outside\"].includes(\n    focusVisibleMode\n  );\n\n  const [activity, { start, stop, delayStart }] = useActivity(\n    hasActive,\n    activeEffectDelay\n  );\n  const active = activity === TapState.active || activity === TapState.exiting;\n\n  const containerRef = useExternRef(getRootRef);\n\n  // hover propagation\n  const childContext = React.useRef({ onHoverChange: setChildHover }).current;\n  useIsomorphicLayoutEffect(() => {\n    if (!hovered) {\n      return noop;\n    }\n    onHoverChange(true);\n    return () => onHoverChange(false);\n  }, [hovered]);\n\n  /*\n   * [a11y]\n   * Обрабатывает событие onkeydown\n   * для кастомных доступных элементов:\n   * - role=\"link\" (активация по Enter)\n   * - role=\"button\" (активация по Space и Enter)\n   */\n  function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {\n    if (isCustomElement && shouldTriggerClickOnEnterOrSpace(e)) {\n      e.preventDefault();\n      containerRef.current?.click();\n    }\n  }\n\n  const needWaves =\n    platform === Platform.ANDROID &&\n    !hasPointerContext &&\n    hasActive &&\n    activeMode === \"background\";\n\n  const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n  function addClick(x: number, y: number) {\n    const dateNow = Date.now();\n    const filteredClicks = clicks.filter(\n      (click) => click.id + WAVE_LIVE > dateNow\n    );\n\n    setClicks([...filteredClicks, { x, y, id: dateNow }]);\n    clearClicks.set();\n  }\n\n  function onStart({ originalEvent }: TouchEvent) {\n    if (hasActive) {\n      if (originalEvent.touches && originalEvent.touches.length > 1) {\n        // r сожалению я так и не понял, что это делает и можно ли упихнуть его в Touch\n        return stop();\n      }\n\n      if (needWaves) {\n        const { top, left } = getOffsetRect(containerRef.current);\n        const x = coordX(originalEvent) - (left ?? 0);\n        const y = coordY(originalEvent) - (top ?? 0);\n        addClick(x, y);\n      }\n\n      delayStart();\n    }\n  }\n\n  function onMove({ isSlide }: TouchEvent) {\n    if (isSlide) {\n      stop();\n    }\n  }\n\n  function onEnd({ duration }: TouchEvent) {\n    if (activity === TapState.none) {\n      return;\n    }\n    if (activity === TapState.pending) {\n      // активировать при коротком тапе\n      start();\n    }\n\n    // отключить без задержки при длинном тапе\n    const activeDuration = duration - ACTIVE_DELAY;\n    stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);\n  }\n\n  const classes = classNamesString(\n    className,\n    styles[\"Tappable\"],\n    platform === Platform.IOS && styles[\"Tappable--ios\"],\n    sizeXClassNames[sizeX],\n    hasHoverContext && styles[\"Tappable--hover-has\"],\n    hasActive && styles[\"Tappable--hasActive\"],\n    hasHover && hovered && !isPresetHoverMode && hoverMode,\n    hasActive && active && !isPresetActiveMode && activeMode,\n    focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n    hasActive && active && styles[\"Tappable--active\"],\n    hasHover &&\n      hovered &&\n      isPresetHoverMode &&\n      styles[`Tappable--hover-${hoverMode}`],\n    hasActive &&\n      active &&\n      isPresetActiveMode &&\n      styles[`Tappable--active-${activeMode}`],\n    focusVisible && styles[\"Tappable--focus-visible\"]\n  );\n\n  const handlers: RootComponentProps = {\n    onStart: callMultiple(onStart, props.onStart),\n    onMove: callMultiple(onMove, props.onMove),\n    onEnd: callMultiple(onEnd, props.onEnd),\n    onClick,\n    onKeyDown: callMultiple(onKeyDown, _onKeyDown),\n  };\n  const role = props.href ? \"link\" : \"button\";\n\n  return (\n    <Touch\n      onEnter={callMultiple(setHoveredTrue, onEnter)}\n      onLeave={callMultiple(setHoveredFalse, onLeave)}\n      type={Component === \"button\" ? \"button\" : undefined}\n      tabIndex={isCustomElement && !props.disabled ? 0 : undefined}\n      role={isCustomElement ? role : undefined}\n      aria-disabled={isCustomElement ? props.disabled : undefined}\n      stopPropagation={stopPropagation && !insideTouchRoot && !props.disabled}\n      {...props}\n      slideThreshold={20}\n      usePointerHover\n      className={classes}\n      Component={Component}\n      getRootRef={containerRef}\n      onBlur={callMultiple(onBlur, props.onBlur)}\n      onFocus={callMultiple(onFocus, props.onFocus)}\n      {...(props.disabled ? {} : handlers)}\n    >\n      <TappableContext.Provider value={childContext}>\n        {children}\n      </TappableContext.Provider>\n      {needWaves && (\n        <span aria-hidden=\"true\" className={styles.Tappable__waves}>\n          {clicks.map((wave) => (\n            <span\n              key={wave.id}\n              className={styles.Tappable__wave}\n              style={{ top: wave.y, left: wave.x }}\n            />\n          ))}\n        </span>\n      )}\n      {((hasHover && hoverMode === \"background\") ||\n        (hasActive && activeMode === \"background\")) && (\n        <span aria-hidden=\"true\" className={styles.Tappable__stateLayer} />\n      )}\n      {!props.disabled && isPresetFocusVisibleMode && (\n        <FocusVisible mode={focusVisibleMode as FocusVisibleMode} />\n      )}\n    </Touch>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Tappable.js","names":["React","mitt","classNames","noop","Touch","TouchRootContext","Platform","getOffsetRect","coordX","coordY","shouldTriggerClickOnEnterOrSpace","useIsomorphicLayoutEffect","FocusVisible","useTimeout","useExternRef","usePlatform","useFocusVisible","callMultiple","useBooleanState","useAdaptivity","useAdaptivityHasHover","useAdaptivityHasPointer","sizeXClassNames","none","compact","regular","WAVE_LIVE","ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","activeBus","TapState","pending","active","exiting","TappableContext","createContext","onHoverChange","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","stopTimeout","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","Tappable","children","Component","onClick","_onKeyDown","onKeyDown","activeEffectDelay","stopPropagation","getRootRef","hasHover","_hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","props","href","useContext","insideTouchRoot","platform","focusVisible","onBlur","onFocus","sizeX","hasPointerContext","hasHoverContext","clicks","setClicks","childHover","setChildHover","_hovered","value","setHoveredTrue","setTrue","setHoveredFalse","setFalse","hovered","disabled","isCustomElement","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","containerRef","childContext","useRef","current","e","preventDefault","click","needWaves","ANDROID","clearClicks","addClick","x","y","dateNow","Date","now","filteredClicks","filter","onStart","originalEvent","touches","length","top","left","onMove","isSlide","onEnd","duration","activeDuration","classes","IOS","styles","handlers","role","undefined","map","wave"],"sources":["../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from 'react';\nimport mitt from 'mitt';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport { Platform } from '../../lib/platform';\nimport { getOffsetRect } from '../../lib/offset';\nimport { coordX, coordY } from '../../lib/touch';\nimport { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from '../../types';\nimport { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { FocusVisible, FocusVisibleMode } from '../FocusVisible/FocusVisible';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Tappable--sizeX-none'],\n  compact: styles['Tappable--sizeX-compact'],\n  regular: styles['Tappable--sizeX-regular'],\n};\n\ntype StateMode = 'opacity' | 'background';\n\nconst WAVE_LIVE = 225;\n\nexport type TappableElementProps = Omit<\n  React.AllHTMLAttributes<HTMLElement>,\n  | 'onTouchStart'\n  | 'onTouchMove'\n  | 'onTouchEnd'\n  | 'onTouchCancel'\n  | 'onMouseDown'\n  | 'onMouseMove'\n  | 'onMouseUp'\n  | 'onMouseLeave'\n> &\n  AnchorHTMLAttributesOnly; // В AllHTMLAttributes не хватает типов для ссылок\n\nexport interface TappableProps\n  extends TappableElementProps,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {\n  /**\n   * Длительность показа active-состояния\n   */\n  activeEffectDelay?: number;\n  stopPropagation?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: StateMode | string;\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: StateMode | string;\n  /**\n   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n   */\n  focusVisibleMode?: FocusVisibleMode | string;\n  children?: React.ReactNode;\n  onEnter?(outputEvent: MouseEvent): void;\n  onLeave?(outputEvent: MouseEvent): void;\n}\n\ninterface Wave {\n  x: number;\n  y: number;\n  id: number;\n}\n\nexport interface RootComponentProps extends TouchProps {\n  ref?: React.Ref<HTMLElement>;\n}\n\nexport const ACTIVE_DELAY = 70;\nexport const ACTIVE_EFFECT_DELAY = 600;\n\nconst activeBus = mitt<{ active: string }>();\nconst TapState = { none: 0, pending: 1, active: 2, exiting: 3 } as const;\n\ntype TappableContextInterface = { onHoverChange: (s: boolean) => void };\nconst TappableContext = React.createContext<TappableContextInterface>({\n  onHoverChange: noop,\n});\n\nfunction isPresetStateMode(stateMode: StateMode | string): stateMode is StateMode {\n  switch (stateMode) {\n    case 'opacity':\n    case 'background':\n      return true;\n    default:\n      return false;\n  }\n}\n\nfunction useActivity(hasActive: boolean, stopDelay: number) {\n  const id = React.useMemo(() => Math.round(Math.random() * 1e8).toString(16), []);\n\n  const [activity, setActivity] = React.useState<(typeof TapState)[keyof typeof TapState]>(\n    TapState.none,\n  );\n  const _stop = () => setActivity(TapState.none);\n  const start = () => hasActive && setActivity(TapState.active);\n  const delayStart = () => {\n    hasActive && setActivity(TapState.pending);\n  };\n\n  const activeTimeout = useTimeout(start, ACTIVE_DELAY);\n  const stopTimeout = useTimeout(_stop, stopDelay);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.pending) {\n      activeTimeout.set();\n      return activeTimeout.clear;\n    }\n    if (activity === TapState.exiting) {\n      return stopTimeout.clear;\n    }\n    if (activity === TapState.active) {\n      activeBus.emit('active', id);\n    }\n    return noop;\n  }, [activity]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (activity === TapState.none) {\n      return noop;\n    }\n    const onActiveChange = (activeId: string) => {\n      activeId !== id && _stop();\n    };\n    activeBus.on('active', onActiveChange);\n    return () => activeBus.off('active', onActiveChange);\n  }, [activity === TapState.none]);\n\n  useIsomorphicLayoutEffect(() => {\n    !hasActive && _stop();\n  }, [hasActive]);\n\n  const stop = (delay?: number) => {\n    if (delay) {\n      setActivity(TapState.exiting);\n      return stopTimeout.set(delay);\n    }\n    _stop();\n  };\n\n  return [activity, { delayStart, start, stop }] as const;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tappable\n */\nexport const Tappable = ({\n  children,\n  Component,\n  onClick,\n  onKeyDown: _onKeyDown,\n  activeEffectDelay = ACTIVE_EFFECT_DELAY,\n  stopPropagation = false,\n  getRootRef,\n  hasHover: _hasHover = true,\n  hoverMode = 'background',\n  hasActive: _hasActive = true,\n  activeMode = 'background',\n  focusVisibleMode = 'inside',\n  onEnter,\n  onLeave,\n  className,\n  ...props\n}: TappableProps) => {\n  Component = Component || ((props.href ? 'a' : 'div') as React.ElementType);\n\n  const { onHoverChange } = React.useContext(TappableContext);\n  const insideTouchRoot = React.useContext(TouchRootContext);\n  const platform = usePlatform();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n  const { sizeX = 'none' } = useAdaptivity();\n  const hasPointerContext = useAdaptivityHasPointer();\n  const hasHoverContext = useAdaptivityHasHover();\n\n  const [clicks, setClicks] = React.useState<Wave[]>([]);\n  const [childHover, setChildHover] = React.useState(false);\n  const {\n    value: _hovered,\n    setTrue: setHoveredTrue,\n    setFalse: setHoveredFalse,\n  } = useBooleanState(false);\n\n  const hovered = _hovered && !props.disabled;\n  const hasActive = _hasActive && !childHover && !props.disabled;\n  const hasHover = hasHoverContext && _hasHover && !childHover;\n  const isCustomElement =\n    Component !== 'a' && Component !== 'button' && Component !== 'label' && !props.contentEditable;\n  const isPresetHoverMode = isPresetStateMode(hoverMode);\n  const isPresetActiveMode = isPresetStateMode(activeMode);\n  const isPresetFocusVisibleMode = ['inside', 'outside'].includes(focusVisibleMode);\n\n  const [activity, { start, stop, delayStart }] = useActivity(hasActive, activeEffectDelay);\n  const active = activity === TapState.active || activity === TapState.exiting;\n\n  const containerRef = useExternRef(getRootRef);\n\n  // hover propagation\n  const childContext = React.useRef({ onHoverChange: setChildHover }).current;\n  useIsomorphicLayoutEffect(() => {\n    if (!hovered) {\n      return noop;\n    }\n    onHoverChange(true);\n    return () => onHoverChange(false);\n  }, [hovered]);\n\n  /*\n   * [a11y]\n   * Обрабатывает событие onkeydown\n   * для кастомных доступных элементов:\n   * - role=\"link\" (активация по Enter)\n   * - role=\"button\" (активация по Space и Enter)\n   */\n  function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {\n    if (isCustomElement && shouldTriggerClickOnEnterOrSpace(e)) {\n      e.preventDefault();\n      containerRef.current?.click();\n    }\n  }\n\n  const needWaves =\n    platform === Platform.ANDROID && !hasPointerContext && hasActive && activeMode === 'background';\n\n  const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);\n\n  function addClick(x: number, y: number) {\n    const dateNow = Date.now();\n    const filteredClicks = clicks.filter((click) => click.id + WAVE_LIVE > dateNow);\n\n    setClicks([...filteredClicks, { x, y, id: dateNow }]);\n    clearClicks.set();\n  }\n\n  function onStart({ originalEvent }: TouchEvent) {\n    if (hasActive) {\n      if (originalEvent.touches && originalEvent.touches.length > 1) {\n        // r сожалению я так и не понял, что это делает и можно ли упихнуть его в Touch\n        return stop();\n      }\n\n      if (needWaves) {\n        const { top, left } = getOffsetRect(containerRef.current);\n        const x = coordX(originalEvent) - (left ?? 0);\n        const y = coordY(originalEvent) - (top ?? 0);\n        addClick(x, y);\n      }\n\n      delayStart();\n    }\n  }\n\n  function onMove({ isSlide }: TouchEvent) {\n    if (isSlide) {\n      stop();\n    }\n  }\n\n  function onEnd({ duration }: TouchEvent) {\n    if (activity === TapState.none) {\n      return;\n    }\n    if (activity === TapState.pending) {\n      // активировать при коротком тапе\n      start();\n    }\n\n    // отключить без задержки при длинном тапе\n    const activeDuration = duration - ACTIVE_DELAY;\n    stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);\n  }\n\n  const classes = classNames(\n    className,\n    styles['Tappable'],\n    platform === Platform.IOS && styles['Tappable--ios'],\n    sizeXClassNames[sizeX],\n    hasHoverContext && styles['Tappable--hover-has'],\n    hasActive && styles['Tappable--hasActive'],\n    hasHover && hovered && !isPresetHoverMode && hoverMode,\n    hasActive && active && !isPresetActiveMode && activeMode,\n    focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n    hasActive && active && styles['Tappable--active'],\n    hasHover && hovered && isPresetHoverMode && styles[`Tappable--hover-${hoverMode}`],\n    hasActive && active && isPresetActiveMode && styles[`Tappable--active-${activeMode}`],\n    focusVisible && styles['Tappable--focus-visible'],\n  );\n\n  const handlers: RootComponentProps = {\n    onStart: callMultiple(onStart, props.onStart),\n    onMove: callMultiple(onMove, props.onMove),\n    onEnd: callMultiple(onEnd, props.onEnd),\n    onClick,\n    onKeyDown: callMultiple(onKeyDown, _onKeyDown),\n  };\n  const role = props.href ? 'link' : 'button';\n\n  return (\n    <Touch\n      onEnter={callMultiple(setHoveredTrue, onEnter)}\n      onLeave={callMultiple(setHoveredFalse, onLeave)}\n      type={Component === 'button' ? 'button' : undefined}\n      tabIndex={isCustomElement && !props.disabled ? 0 : undefined}\n      role={isCustomElement ? role : undefined}\n      aria-disabled={isCustomElement ? props.disabled : undefined}\n      stopPropagation={stopPropagation && !insideTouchRoot && !props.disabled}\n      {...props}\n      slideThreshold={20}\n      usePointerHover\n      className={classes}\n      Component={Component}\n      getRootRef={containerRef}\n      onBlur={callMultiple(onBlur, props.onBlur)}\n      onFocus={callMultiple(onFocus, props.onFocus)}\n      {...(props.disabled ? {} : handlers)}\n    >\n      <TappableContext.Provider value={childContext}>{children}</TappableContext.Provider>\n      {needWaves && (\n        <span aria-hidden className={styles.Tappable__waves}>\n          {clicks.map((wave) => (\n            <span\n              key={wave.id}\n              className={styles.Tappable__wave}\n              style={{ top: wave.y, left: wave.x }}\n            />\n          ))}\n        </span>\n      )}\n      {((hasHover && hoverMode === 'background') || (hasActive && activeMode === 'background')) && (\n        <span aria-hidden className={styles.Tappable__stateLayer} />\n      )}\n      {!props.disabled && isPresetFocusVisibleMode && (\n        <FocusVisible mode={focusVisibleMode as FocusVisibleMode} />\n      )}\n    </Touch>\n  );\n};\n"],"mappings":"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"}

package/dist/components/TextTooltip/TextTooltip.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { HoverPopperProps } from "../HoverPopper/HoverPopper";
-export interface TextTooltipProps extends Omit<HoverPopperProps, "arrow" | "arrowClassName" | "content"> {
+import * as React from 'react';
+import { HoverPopperProps } from '../HoverPopper/HoverPopper';
+export interface TextTooltipProps extends Omit<HoverPopperProps, 'arrow' | 'arrowClassName' | 'content'> {
     /**
      * Текст тултипа
      */
@@ -12,7 +12,7 @@ export interface TextTooltipProps extends Omit<HoverPopperProps, "arrow" | "arro
     /**
      * Стиль отображения подсказки
      */
-    appearance?: "accent" | "neutral" | "white" | "black" | "inversion";
+    appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/TextTooltip

package/dist/components/TextTooltip/TextTooltip.js

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "text", "header", "appearance", "className"];
-import * as React from "react";
-import { HoverPopper } from "../HoverPopper/HoverPopper";
-import { hasReactNode } from "../../lib/utils";
-import { Subhead } from "../Typography/Subhead/Subhead";
-import { classNamesString } from "../../lib/classNames";
+import * as React from 'react';
+import { HoverPopper } from '../HoverPopper/HoverPopper';
+import { Subhead } from '../Typography/Subhead/Subhead';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
 /**
  * @see https://vkcom.github.io/VKUI/#/TextTooltip
  */
@@ -14,11 +13,11 @@ export var TextTooltip = function TextTooltip(_ref) {
     text = _ref.text,
     header = _ref.header,
     _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? "neutral" : _ref$appearance,
+    appearance = _ref$appearance === void 0 ? 'neutral' : _ref$appearance,
     className = _ref.className,
     popperProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(HoverPopper, _extends({
-    className: classNamesString("vkuiTextTooltip", styles["TextTooltip--appearance-".concat(appearance)], className),
+    className: classNames("vkuiTextTooltip", styles["TextTooltip--appearance-".concat(appearance)], className),
     arrow: true,
     arrowClassName: "vkuiTextTooltip__arrow",
     content: /*#__PURE__*/React.createElement(React.Fragment, null, hasReactNode(header) && /*#__PURE__*/React.createElement(Subhead, {

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

@@ -1 +1 @@
-{"version":3,"file":"TextTooltip.js","names":["React","HoverPopper","hasReactNode","Subhead","classNamesString","TextTooltip","children","text","header","appearance","className","popperProps","styles"],"sources":["../../../src/components/TextTooltip/TextTooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HoverPopper, HoverPopperProps } from \"../HoverPopper/HoverPopper\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./TextTooltip.module.css\";\n\nexport interface TextTooltipProps\n  extends Omit<HoverPopperProps, \"arrow\" | \"arrowClassName\" | \"content\"> {\n  /**\n   * Текст тултипа\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа\n   */\n  header?: React.ReactNode;\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: \"accent\" | \"neutral\" | \"white\" | \"black\" | \"inversion\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TextTooltip\n */\nexport const TextTooltip = ({\n  children,\n  text,\n  header,\n  appearance = \"neutral\",\n  className,\n  ...popperProps\n}: TextTooltipProps) => {\n  return (\n    <HoverPopper\n      className={classNamesString(\n        styles[\"TextTooltip\"],\n        styles[`TextTooltip--appearance-${appearance}`],\n        className\n      )}\n      arrow\n      arrowClassName={styles[\"TextTooltip__arrow\"]}\n      content={\n        <React.Fragment>\n          {hasReactNode(header) && (\n            <Subhead weight=\"2\" className={styles[\"TextTooltip__header\"]}>\n              {header}\n            </Subhead>\n          )}\n          {hasReactNode(text) && (\n            <Subhead className={styles[\"TextTooltip__text\"]}>{text}</Subhead>\n          )}\n        </React.Fragment>\n      }\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,QAA0B,4BAA4B;AAC1E,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,gBAAgB,QAAQ,sBAAsB;AAmBvD;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAOA;EAAA,IANtBC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IAAA,uBACNC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,SAAS,QAATA,SAAS;IACNC,WAAW;EAEd,oBACE,oBAAC,WAAW;IACV,SAAS,EAAEP,gBAAgB,oBAEzBQ,MAAM,mCAA4BH,UAAU,EAAG,EAC/CC,SAAS,CACT;IACF,KAAK;IACL,cAAc,0BAA+B;IAC7C,OAAO,eACL,oBAAC,KAAK,CAAC,QAAQ,QACZR,YAAY,CAACM,MAAM,CAAC,iBACnB,oBAAC,OAAO;MAAC,MAAM,EAAC,GAAG;MAAC,SAAS;IAAgC,GAC1DA,MAAM,CAEV,EACAN,YAAY,CAACK,IAAI,CAAC,iBACjB,oBAAC,OAAO;MAAC,SAAS;IAA8B,GAAEA,IAAI,CACvD;EAEJ,GACGI,WAAW,GAEdL,QAAQ,CACG;AAElB,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"TextTooltip.js","names":["React","HoverPopper","Subhead","classNames","hasReactNode","TextTooltip","children","text","header","appearance","className","popperProps","styles"],"sources":["../../../src/components/TextTooltip/TextTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport styles from './TextTooltip.module.css';\n\nexport interface TextTooltipProps\n  extends Omit<HoverPopperProps, 'arrow' | 'arrowClassName' | 'content'> {\n  /**\n   * Текст тултипа\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа\n   */\n  header?: React.ReactNode;\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TextTooltip\n */\nexport const TextTooltip = ({\n  children,\n  text,\n  header,\n  appearance = 'neutral',\n  className,\n  ...popperProps\n}: TextTooltipProps) => {\n  return (\n    <HoverPopper\n      className={classNames(\n        styles['TextTooltip'],\n        styles[`TextTooltip--appearance-${appearance}`],\n        className,\n      )}\n      arrow\n      arrowClassName={styles['TextTooltip__arrow']}\n      content={\n        <React.Fragment>\n          {hasReactNode(header) && (\n            <Subhead weight=\"2\" className={styles['TextTooltip__header']}>\n              {header}\n            </Subhead>\n          )}\n          {hasReactNode(text) && <Subhead className={styles['TextTooltip__text']}>{text}</Subhead>}\n        </React.Fragment>\n      }\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,QAA0B,4BAA4B;AAC1E,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAmB1D;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAOA;EAAA,IANtBC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IAAA,uBACNC,UAAU;IAAVA,UAAU,gCAAG,SAAS;IACtBC,SAAS,QAATA,SAAS;IACNC,WAAW;EAEd,oBACE,oBAAC,WAAW;IACV,SAAS,EAAER,UAAU,oBAEnBS,MAAM,mCAA4BH,UAAU,EAAG,EAC/CC,SAAS,CACT;IACF,KAAK;IACL,cAAc,0BAA+B;IAC7C,OAAO,eACL,oBAAC,KAAK,CAAC,QAAQ,QACZN,YAAY,CAACI,MAAM,CAAC,iBACnB,oBAAC,OAAO;MAAC,MAAM,EAAC,GAAG;MAAC,SAAS;IAAgC,GAC1DA,MAAM,CAEV,EACAJ,YAAY,CAACG,IAAI,CAAC,iBAAI,oBAAC,OAAO;MAAC,SAAS;IAA8B,GAAEA,IAAI,CAAW;EAE3F,GACGI,WAAW,GAEdL,QAAQ,CACG;AAElB,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}