@vkontakte/vkui 5.7.2 → 5.8.0

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

@@ -27,16 +27,15 @@ var _usePlatform = require("../../hooks/usePlatform");
 var _accessibility = require("../../lib/accessibility");
 var _dom = require("../../lib/dom");
 var _platform = require("../../lib/platform");
+var _RootComponent = require("../RootComponent/RootComponent");
 var TabsModeContext = /*#__PURE__*/ _react.createContext({
     mode: "default",
     withGaps: false
 });
 var Tabs = function(_param) {
-    var children = _param.children, _param_mode = _param.mode, mode = _param_mode === void 0 ? "default" : _param_mode, getRootRef = _param.getRootRef, className = _param.className, _param_role = _param.role, role = _param_role === void 0 ? "tablist" : _param_role, restProps = _object_without_properties._(_param, [
+    var children = _param.children, _param_mode = _param.mode, mode = _param_mode === void 0 ? "default" : _param_mode, _param_role = _param.role, role = _param_role === void 0 ? "tablist" : _param_role, restProps = _object_without_properties._(_param, [
         "children",
         "mode",
-        "getRootRef",
-        "className",
         "role"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
@@ -127,9 +126,8 @@ var Tabs = function(_param) {
     (0, _useGlobalEventListener.useGlobalEventListener)(document, "keydown", handleDocumentKeydown, {
         capture: true
     });
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        ref: getRootRef,
-        className: (0, _vkjs.classNames)("vkuiTabs", "vkuiInternalTabs", platform === _platform.Platform.VKCOM && "vkuiInternalTabs--vkcom", withGaps && (0, _vkjs.classNames)("vkuiTabs--withGaps", "vkuiInternalTabs--withGaps"), mode === "default" && "vkuiTabs--mode-default", className),
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: (0, _vkjs.classNames)("vkuiTabs", "vkuiInternalTabs", platform === _platform.Platform.VKCOM && "vkuiInternalTabs--vkcom", withGaps && (0, _vkjs.classNames)("vkuiTabs--withGaps", "vkuiInternalTabs--withGaps"), mode === "default" && "vkuiTabs--mode-default"),
         role: role
     }), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiTabs__in",

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

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

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

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

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

@@ -26,6 +26,11 @@ var _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden");
 var sizeYClassNames = _define_property._({
     none: "vkuiTabsItem--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiTabsItem--sizeY-compact");
+var stylesMode = {
+    default: "vkuiTabsItem--mode-default",
+    accent: "vkuiTabsItem--mode-accent",
+    secondary: "vkuiTabsItem--mode-secondary"
+};
 var warn = (0, _warnOnce.warnOnce)("TabsItem");
 var TabsItem = function(_param) {
     var before = _param.before, children = _param.children, status = _param.status, after = _param.after, _param_selected = _param.selected, selected = _param_selected === void 0 ? false : _param_selected, className = _param.className, _param_role = _param.role, role = _param_role === void 0 ? "tab" : _param_role, tabIndexProp = _param.tabIndex, restProps = _object_without_properties._(_param, [
@@ -63,11 +68,7 @@ var TabsItem = function(_param) {
         tabIndex = selected ? 0 : -1;
     }
     return /*#__PURE__*/ _react.createElement(_Tappable.Tappable, _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiTabsItem", mode && ({
-            default: "vkuiTabsItem--mode-default",
-            accent: "vkuiTabsItem--mode-accent",
-            secondary: "vkuiTabsItem--mode-secondary"
-        })[mode], selected && "vkuiTabsItem--selected", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], withGaps && "vkuiTabsItem--withGaps", className),
+        className: (0, _vkjs.classNames)("vkuiTabsItem", mode && stylesMode[mode], selected && "vkuiTabsItem--selected", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], withGaps && "vkuiTabsItem--withGaps", className),
         hoverMode: "vkuiTabsItem--hover",
         activeMode: "",
         focusVisibleMode: "inside",

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

@@ -1 +1 @@
-{"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 { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\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          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['TabsItem'],\n        mode &&\n          {\n            default: styles['TabsItem--mode-default'],\n            accent: styles['TabsItem--mode-accent'],\n            secondary: styles['TabsItem--mode-secondary'],\n          }[mode],\n        selected && styles['TabsItem--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        className,\n      )}\n      hoverMode={styles['TabsItem--hover']}\n      activeMode=\"\"\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["TabsItem","sizeYClassNames","none","SizeType","COMPACT","warn","warnOnce","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","restProps","useAdaptivity","sizeY","React","useContext","TabsModeContext","mode","withGaps","statusComponent","isTabFlow","Subhead","Component","classNames","weight","VisuallyHidden","span","process","env","NODE_ENV","undefined","Tappable","default","accent","secondary","REGULAR","hoverMode","activeMode","focusVisibleMode","hasActive","aria-selected","div","Headline","level","aria-hidden","data-selected"],"mappings":";;;;+BAgDaA;;;eAAAA;;;;;;;;+DAhDU;oBACI;6BACG;0BACL;wBACA;oBACyB;wBACzB;wBACA;uBACD;8BACO;AAG/B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AA6BnB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,WAAW;QACtBO,gBAAAA,QACAC,kBAAAA,UACAC,gBAAAA,QACAC,eAAAA,gCACAC,UAAAA,wCAAW,yBACXC,mBAAAA,gCACAC,MAAAA,gCAAO,qBACPC,AAAUC,sBAAVD,UACGE;QARHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BG,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAA6CC,oBAAAA,OAAMC,UAAU,CAACC,qBAAe,GAArEC,OAAqCH,kBAArCG,MAAMC,WAA+BJ,kBAA/BI;IACd,IAAIC,kBAAkB;IAEtB,IAAMC,YAAYZ,SAAS;IAE3B,IAAIJ,QAAQ;QACVe,kBACE,OAAOf,WAAW,yBAChB,qBAACiB,gBAAO;YACNC,WAAU;YACVf,WAAWgB,IAAAA,gBAAU;YACrBC,QAAO;yBAEP,qBAACC,8BAAc,QAAC,SACfrB,wBAGH,qBAACsB;YAAKnB,SAAS;yBACb,qBAACkB,8BAAc,QAAC,SACfrB;IAGT;IAEA,IAAIuB,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBT,WAAW;QACvD,IAAI,CAACT,SAAS,CAAC,gBAAgB,EAAE;YAC/BX,KAAM,wDAAuD;QAC/D,OAAO,IAAI,CAACW,SAAS,CAAC,KAAK,EAAE;YAC3BX,KACG,yFACD;QAEJ;IACF;IAEA,IAAIS,WAAWC;IACf,IAAIU,aAAaX,aAAaqB,WAAW;QACvCrB,WAAWH,WAAW,IAAI,CAAC;IAC7B;IAEA,qBACE,qBAACyB,kBAAQ,8CACHpB;QACJJ,WAAWgB,IAAAA,gBAAU,kBAEnBN,QACE,CAAA;YACEe,OAAO;YACPC,MAAM;YACNC,SAAS;QACX,CAAA,CAAC,CAACjB,KAAK,EACTX,sCACAO,UAAUf,oBAAQ,CAACqC,OAAO,IAAIvC,eAAe,CAACiB,MAAM,EACpDK,sCACAX;QAEF6B,SAAS;QACTC,YAAW;QACXC,kBAAiB;QACjBC,WAAW;QACX/B,MAAMA;QACNgC,iBAAelC;QACfG,UAAUA;QAETP,wBAAU,qBAACuC;QAAIlC,SAAS;OAA+BL,uBACxD,qBAACwC,kBAAQ;QACPpB,WAAU;QACVf,SAAS;QACToC,OAAO1B,SAAS,YAAY,MAAM;QAClCO,QAAO;OAENrB,WAEFgB,iBACAd,uBAAS,qBAACoC;QAAIlC,SAAS;OAA8BF,QACrDY,SAAS,2BACR,qBAACwB;QAAIlC,SAAS;QAAiCqC,eAAAA;QAAYC,iBAAevC;;AAIlF"}
+{"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 { HTMLAttributesWithRootRef } from '../../types';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles['TabsItem--sizeY-none'],\n  [SizeType.COMPACT]: styles['TabsItem--sizeY-compact'],\n};\n\nconst stylesMode = {\n  default: styles['TabsItem--mode-default'],\n  accent: styles['TabsItem--mode-accent'],\n  secondary: styles['TabsItem--mode-secondary'],\n};\n\nexport interface TabsItemProps extends HTMLAttributesWithRootRef<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          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </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 && stylesMode[mode],\n        selected && styles['TabsItem--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        className,\n      )}\n      hoverMode={styles['TabsItem--hover']}\n      activeMode=\"\"\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["TabsItem","sizeYClassNames","none","SizeType","COMPACT","stylesMode","default","accent","secondary","warn","warnOnce","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","restProps","useAdaptivity","sizeY","React","useContext","TabsModeContext","mode","withGaps","statusComponent","isTabFlow","Subhead","Component","classNames","weight","VisuallyHidden","span","process","env","NODE_ENV","undefined","Tappable","REGULAR","hoverMode","activeMode","focusVisibleMode","hasActive","aria-selected","div","Headline","level","aria-hidden","data-selected"],"mappings":";;;;+BAuDaA;;;eAAAA;;;;;;;;+DAvDU;oBACI;6BACG;0BACL;wBACA;oBAEyB;wBACzB;wBACA;uBACD;8BACO;AAG/B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAGnB,IAAMC,aAAa;IACjBC,OAAO;IACPC,MAAM;IACNC,SAAS;AACX;AA4BA,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMV,WAAW;QACtBW,gBAAAA,QACAC,kBAAAA,UACAC,gBAAAA,QACAC,eAAAA,gCACAC,UAAAA,wCAAW,yBACXC,mBAAAA,gCACAC,MAAAA,gCAAO,qBACPC,AAAUC,sBAAVD,UACGE;QARHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BG,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAA6CC,oBAAAA,OAAMC,UAAU,CAACC,qBAAe,GAArEC,OAAqCH,kBAArCG,MAAMC,WAA+BJ,kBAA/BI;IACd,IAAIC,kBAAkB;IAEtB,IAAMC,YAAYZ,SAAS;IAE3B,IAAIJ,QAAQ;QACVe,kBACE,OAAOf,WAAW,yBAChB,qBAACiB,gBAAO;YACNC,WAAU;YACVf,WAAWgB,IAAAA,gBAAU;YACrBC,QAAO;yBAEP,qBAACC,8BAAc,QAAC,SACfrB,wBAGH,qBAACsB;YAAKnB,SAAS;yBACb,qBAACkB,8BAAc,QAAC,SACfrB;IAGT;IAEA,IAAIuB,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBT,WAAW;QACvD,IAAI,CAACT,SAAS,CAAC,gBAAgB,EAAE;YAC/BX,KAAM,wDAAuD;QAC/D,OAAO,IAAI,CAACW,SAAS,CAAC,KAAK,EAAE;YAC3BX,KACG,yFACD;QAEJ;IACF;IAEA,IAAIS,WAAWC;IACf,IAAIU,aAAaX,aAAaqB,WAAW;QACvCrB,WAAWH,WAAW,IAAI,CAAC;IAC7B;IAEA,qBACE,qBAACyB,kBAAQ,8CACHpB;QACJJ,WAAWgB,IAAAA,gBAAU,kBAEnBN,QAAQrB,UAAU,CAACqB,KAAK,EACxBX,sCACAO,UAAUnB,oBAAQ,CAACsC,OAAO,IAAIxC,eAAe,CAACqB,MAAM,EACpDK,sCACAX;QAEF0B,SAAS;QACTC,YAAW;QACXC,kBAAiB;QACjBC,WAAW;QACX5B,MAAMA;QACN6B,iBAAe/B;QACfG,UAAUA;QAETP,wBAAU,qBAACoC;QAAI/B,SAAS;OAA+BL,uBACxD,qBAACqC,kBAAQ;QACPjB,WAAU;QACVf,SAAS;QACTiC,OAAOvB,SAAS,YAAY,MAAM;QAClCO,QAAO;OAENrB,WAEFgB,iBACAd,uBAAS,qBAACiC;QAAI/B,SAAS;OAA8BF,QACrDY,SAAS,2BACR,qBAACqB;QAAI/B,SAAS;QAAiCkC,eAAAA;QAAYC,iBAAepC;;AAIlF"}

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

@@ -36,6 +36,11 @@ export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElem
     focusVisibleMode?: LiteralUnion<FocusVisibleMode, string>;
     onEnter?(outputEvent: MouseEvent): void;
     onLeave?(outputEvent: MouseEvent): void;
+    /**
+     * Задает border-radius элементу
+     * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`
+     */
+    borderRadiusMode?: 'auto' | 'inherit';
 }
 export interface RootComponentProps extends TouchProps {
     ref?: React.Ref<HTMLElement>;
@@ -45,5 +50,5 @@ export declare const ACTIVE_EFFECT_DELAY = 600;
 /**
  * @see https://vkcom.github.io/VKUI/#/Tappable
  */
-export declare const Tappable: ({ children, Component, onClick, onKeyDown: _onKeyDown, activeEffectDelay, stopPropagation, getRootRef, hasHover: _hasHover, hoverMode, hasActive: _hasActive, activeMode, focusVisibleMode, onEnter, onLeave, className, hovered: hoveredProp, ...props }: TappableProps) => React.JSX.Element;
+export declare const Tappable: ({ children, Component, onClick, onKeyDown: _onKeyDown, activeEffectDelay, stopPropagation, getRootRef, hasHover: _hasHover, hoverMode, hasActive: _hasActive, activeMode, focusVisibleMode, onEnter, onLeave, className, hovered: hoveredProp, borderRadiusMode, ...props }: TappableProps) => React.JSX.Element;
 export {};

package/dist/cjs/components/Tappable/Tappable.js

@@ -51,6 +51,14 @@ var sizeXClassNames = {
     none: "vkuiTappable--sizeX-none",
     compact: "vkuiTappable--sizeX-compact"
 };
+var stylesHoverMode = {
+    background: "vkuiTappable--hover-background",
+    opacity: "vkuiTappable--hover-opacity"
+};
+var stylesActiveMode = {
+    background: "vkuiTappable--active-background",
+    opacity: "vkuiTappable--active-opacity"
+};
 var WAVE_LIVE = 225;
 var ACTIVE_DELAY = 70;
 var ACTIVE_EFFECT_DELAY = 600;
@@ -202,7 +210,7 @@ var Tappable = function(_param) {
         var activeDuration = duration - ACTIVE_DELAY;
         stop(activeDuration >= 100 ? 0 : activeEffectDelay - activeDuration);
     };
-    var children = _param.children, Component = _param.Component, onClick = _param.onClick, _onKeyDown = _param.onKeyDown, _param_activeEffectDelay = _param.activeEffectDelay, activeEffectDelay = _param_activeEffectDelay === void 0 ? ACTIVE_EFFECT_DELAY : _param_activeEffectDelay, _param_stopPropagation = _param.stopPropagation, stopPropagation = _param_stopPropagation === void 0 ? false : _param_stopPropagation, getRootRef = _param.getRootRef, tmp = _param.hasHover, _hasHover = tmp === void 0 ? true : tmp, _param_hoverMode = _param.hoverMode, hoverMode = _param_hoverMode === void 0 ? "background" : _param_hoverMode, tmp1 = _param.hasActive, _hasActive = tmp1 === void 0 ? true : tmp1, _param_activeMode = _param.activeMode, activeMode = _param_activeMode === void 0 ? "background" : _param_activeMode, _param_focusVisibleMode = _param.focusVisibleMode, focusVisibleMode = _param_focusVisibleMode === void 0 ? "inside" : _param_focusVisibleMode, onEnter = _param.onEnter, onLeave = _param.onLeave, className = _param.className, hoveredProp = _param.hovered, props = _object_without_properties._(_param, [
+    var children = _param.children, Component = _param.Component, onClick = _param.onClick, _onKeyDown = _param.onKeyDown, _param_activeEffectDelay = _param.activeEffectDelay, activeEffectDelay = _param_activeEffectDelay === void 0 ? ACTIVE_EFFECT_DELAY : _param_activeEffectDelay, _param_stopPropagation = _param.stopPropagation, stopPropagation = _param_stopPropagation === void 0 ? false : _param_stopPropagation, getRootRef = _param.getRootRef, tmp = _param.hasHover, _hasHover = tmp === void 0 ? true : tmp, _param_hoverMode = _param.hoverMode, hoverMode = _param_hoverMode === void 0 ? "background" : _param_hoverMode, tmp1 = _param.hasActive, _hasActive = tmp1 === void 0 ? true : tmp1, _param_activeMode = _param.activeMode, activeMode = _param_activeMode === void 0 ? "background" : _param_activeMode, _param_focusVisibleMode = _param.focusVisibleMode, focusVisibleMode = _param_focusVisibleMode === void 0 ? "inside" : _param_focusVisibleMode, onEnter = _param.onEnter, onLeave = _param.onLeave, className = _param.className, hoveredProp = _param.hovered, _param_borderRadiusMode = _param.borderRadiusMode, borderRadiusMode = _param_borderRadiusMode === void 0 ? "auto" : _param_borderRadiusMode, props = _object_without_properties._(_param, [
         "children",
         "Component",
         "onClick",
@@ -218,7 +226,8 @@ var Tappable = function(_param) {
         "onEnter",
         "onLeave",
         "className",
-        "hovered"
+        "hovered",
+        "borderRadiusMode"
     ]);
     Component = Component || (props.href ? "a" : "div");
     var onHoverChange = _react.useContext(TappableContext).onHoverChange;
@@ -263,13 +272,7 @@ var Tappable = function(_param) {
     var clearClicks = (0, _useTimeout.useTimeout)(function() {
         return setClicks([]);
     }, WAVE_LIVE);
-    var classes = (0, _vkjs.classNames)(className, "vkuiTappable", "vkuiInternalTappable", platform === _platform.Platform.IOS && "vkuiTappable--ios", sizeX !== _adaptivity.SizeType.REGULAR && sizeXClassNames[sizeX], hasHover && "vkuiTappable--hasHover", hasActive && "vkuiTappable--hasActive", hasHover && hovered && !isPresetHoverMode && hoverMode, hasActive && active && !isPresetActiveMode && activeMode, focusVisible && !isPresetFocusVisibleMode && focusVisibleMode, hasHover && hovered && isPresetHoverMode && ({
-        background: "vkuiTappable--hover-background",
-        opacity: "vkuiTappable--hover-opacity"
-    })[hoverMode], hasActive && active && isPresetActiveMode && ({
-        background: "vkuiTappable--active-background",
-        opacity: "vkuiTappable--active-opacity"
-    })[activeMode], focusVisible && "vkuiTappable--focus-visible");
+    var classes = (0, _vkjs.classNames)(className, "vkuiTappable", "vkuiInternalTappable", platform === _platform.Platform.IOS && "vkuiTappable--ios", sizeX !== _adaptivity.SizeType.REGULAR && sizeXClassNames[sizeX], hasHover && "vkuiTappable--hasHover", hasActive && "vkuiTappable--hasActive", hasHover && hovered && !isPresetHoverMode && hoverMode, hasActive && active && !isPresetActiveMode && activeMode, focusVisible && !isPresetFocusVisibleMode && focusVisibleMode, hasHover && hovered && isPresetHoverMode && stylesHoverMode[hoverMode], hasActive && active && isPresetActiveMode && stylesActiveMode[activeMode], focusVisible && "vkuiTappable--focus-visible", borderRadiusMode === "inherit" && "vkuiTappable--borderRadiusInherit");
     var handlers = {
         onStart: (0, _callMultiple.callMultiple)(onStart, props.onStart),
         onMove: (0, _callMultiple.callMultiple)(onMove, props.onMove),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport mitt from 'mitt';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getOffsetRect } from '../../lib/offset';\nimport { Platform } from '../../lib/platform';\nimport { coordX, coordY } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport {\n  AnchorHTMLAttributesOnly,\n  HasChildren,\n  HasComponent,\n  HasRootRef,\n  LiteralUnion,\n} from '../../types';\nimport { FocusVisible, FocusVisibleMode } from '../FocusVisible/FocusVisible';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Tappable--sizeX-none'],\n  compact: styles['Tappable--sizeX-compact'],\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    HasChildren,\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   * Позволяет управлять hovered-состоянием извне\n   */\n  hovered?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: LiteralUnion<StateMode, string>;\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: LiteralUnion<StateMode, string>;\n  /**\n   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n   */\n  focusVisibleMode?: LiteralUnion<FocusVisibleMode, string>;\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: LiteralUnion<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  hovered: hoveredProp,\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 || hoveredProp) && !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    'vkuiInternalTappable',\n    platform === Platform.IOS && styles['Tappable--ios'],\n    sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n    hasHover && styles['Tappable--hasHover'],\n    hasActive && styles['Tappable--hasActive'],\n    hasHover && hovered && !isPresetHoverMode && hoverMode,\n    hasActive && active && !isPresetActiveMode && activeMode,\n    focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n    hasHover &&\n      hovered &&\n      isPresetHoverMode &&\n      {\n        background: styles['Tappable--hover-background'],\n        opacity: styles['Tappable--hover-opacity'],\n      }[hoverMode],\n    hasActive &&\n      active &&\n      isPresetActiveMode &&\n      {\n        background: styles['Tappable--active-background'],\n        opacity: styles['Tappable--active-opacity'],\n      }[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 visible={focusVisible} mode={focusVisibleMode as FocusVisibleMode} />\n      )}\n    </Touch>\n  );\n};\n"],"names":["ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","Tappable","sizeXClassNames","none","compact","WAVE_LIVE","activeBus","mitt","TapState","pending","active","exiting","TappableContext","React","createContext","onHoverChange","noop","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","useTimeout","stopTimeout","useIsomorphicLayoutEffect","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","onKeyDown","e","isCustomElement","shouldTriggerClickOnEnterOrSpace","containerRef","preventDefault","current","click","addClick","x","y","dateNow","Date","now","filteredClicks","clicks","filter","setClicks","clearClicks","onStart","originalEvent","touches","length","needWaves","getOffsetRect","top","left","coordX","coordY","onMove","isSlide","onEnd","duration","activeDuration","activeEffectDelay","children","Component","onClick","_onKeyDown","stopPropagation","getRootRef","_hasHover","hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","hovered","hoveredProp","props","href","useContext","insideTouchRoot","TouchRootContext","platform","usePlatform","useFocusVisible","focusVisible","onBlur","onFocus","useAdaptivity","sizeX","hasPointerContext","useAdaptivityHasPointer","hasHoverContext","useAdaptivityHasHover","childHover","setChildHover","useBooleanState","value","_hovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","disabled","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","useExternRef","childContext","useRef","Platform","ANDROID","classes","classNames","IOS","SizeType","REGULAR","background","opacity","handlers","callMultiple","role","Touch","type","undefined","tabIndex","aria-disabled","slideThreshold","usePointerHover","Provider","span","aria-hidden","map","wave","key","style","FocusVisible","visible","mode"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Tappable/Tappable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport mitt from 'mitt';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getOffsetRect } from '../../lib/offset';\nimport { Platform } from '../../lib/platform';\nimport { coordX, coordY } from '../../lib/touch';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport {\n  AnchorHTMLAttributesOnly,\n  HasChildren,\n  HasComponent,\n  HasRootRef,\n  LiteralUnion,\n} from '../../types';\nimport { FocusVisible, FocusVisibleMode } from '../FocusVisible/FocusVisible';\nimport { Touch, TouchEvent, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport styles from './Tappable.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Tappable--sizeX-none'],\n  compact: styles['Tappable--sizeX-compact'],\n};\n\nconst stylesHoverMode = {\n  background: styles['Tappable--hover-background'],\n  opacity: styles['Tappable--hover-opacity'],\n};\n\nconst stylesActiveMode = {\n  background: styles['Tappable--active-background'],\n  opacity: styles['Tappable--active-opacity'],\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    HasChildren,\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   * Позволяет управлять hovered-состоянием извне\n   */\n  hovered?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n  /**\n   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active\n   */\n  activeMode?: LiteralUnion<StateMode, string>;\n  /**\n   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover\n   */\n  hoverMode?: LiteralUnion<StateMode, string>;\n  /**\n   * Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс во время focus-visible\n   */\n  focusVisibleMode?: LiteralUnion<FocusVisibleMode, string>;\n  onEnter?(outputEvent: MouseEvent): void;\n  onLeave?(outputEvent: MouseEvent): void;\n  /**\n   * Задает border-radius элементу\n   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`\n   */\n  borderRadiusMode?: 'auto' | 'inherit';\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: LiteralUnion<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  hovered: hoveredProp,\n  borderRadiusMode = 'auto',\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 || hoveredProp) && !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    'vkuiInternalTappable',\n    platform === Platform.IOS && styles['Tappable--ios'],\n    sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n    hasHover && styles['Tappable--hasHover'],\n    hasActive && styles['Tappable--hasActive'],\n    hasHover && hovered && !isPresetHoverMode && hoverMode,\n    hasActive && active && !isPresetActiveMode && activeMode,\n    focusVisible && !isPresetFocusVisibleMode && focusVisibleMode,\n    hasHover && hovered && isPresetHoverMode && stylesHoverMode[hoverMode],\n    hasActive && active && isPresetActiveMode && stylesActiveMode[activeMode],\n    focusVisible && styles['Tappable--focus-visible'],\n    borderRadiusMode === 'inherit' && styles['Tappable--borderRadiusInherit'],\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 visible={focusVisible} mode={focusVisibleMode as FocusVisibleMode} />\n      )}\n    </Touch>\n  );\n};\n"],"names":["ACTIVE_DELAY","ACTIVE_EFFECT_DELAY","Tappable","sizeXClassNames","none","compact","stylesHoverMode","background","opacity","stylesActiveMode","WAVE_LIVE","activeBus","mitt","TapState","pending","active","exiting","TappableContext","React","createContext","onHoverChange","noop","isPresetStateMode","stateMode","useActivity","hasActive","stopDelay","id","useMemo","Math","round","random","toString","useState","activity","setActivity","_stop","start","delayStart","activeTimeout","useTimeout","stopTimeout","useIsomorphicLayoutEffect","set","clear","emit","onActiveChange","activeId","on","off","stop","delay","onKeyDown","e","isCustomElement","shouldTriggerClickOnEnterOrSpace","containerRef","preventDefault","current","click","addClick","x","y","dateNow","Date","now","filteredClicks","clicks","filter","setClicks","clearClicks","onStart","originalEvent","touches","length","needWaves","getOffsetRect","top","left","coordX","coordY","onMove","isSlide","onEnd","duration","activeDuration","activeEffectDelay","children","Component","onClick","_onKeyDown","stopPropagation","getRootRef","_hasHover","hasHover","hoverMode","_hasActive","activeMode","focusVisibleMode","onEnter","onLeave","className","hovered","hoveredProp","borderRadiusMode","props","href","useContext","insideTouchRoot","TouchRootContext","platform","usePlatform","useFocusVisible","focusVisible","onBlur","onFocus","useAdaptivity","sizeX","hasPointerContext","useAdaptivityHasPointer","hasHoverContext","useAdaptivityHasHover","childHover","setChildHover","useBooleanState","value","_hovered","setTrue","setHoveredTrue","setFalse","setHoveredFalse","disabled","contentEditable","isPresetHoverMode","isPresetActiveMode","isPresetFocusVisibleMode","includes","useExternRef","childContext","useRef","Platform","ANDROID","classes","classNames","IOS","SizeType","REGULAR","handlers","callMultiple","role","Touch","type","undefined","tabIndex","aria-disabled","slideThreshold","usePointerHover","Provider","span","aria-hidden","map","wave","key","style","FocusVisible","visible","mode"],"mappings":"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"}

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

@@ -15,6 +15,12 @@ var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _HoverPopper = require("../HoverPopper/HoverPopper");
 var _Subhead = require("../Typography/Subhead/Subhead");
+var stylesAppearance = {
+    accent: "vkuiTextTooltip--appearance-accent",
+    white: "vkuiTextTooltip--appearance-white",
+    black: "vkuiTextTooltip--appearance-black",
+    inversion: "vkuiTextTooltip--appearance-inversion"
+};
 var TextTooltip = function(_param) {
     var children = _param.children, text = _param.text, header = _param.header, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "neutral" : _param_appearance, className = _param.className, popperProps = _object_without_properties._(_param, [
         "children",
@@ -24,12 +30,7 @@ var TextTooltip = function(_param) {
         "className"
     ]);
     return /*#__PURE__*/ _react.createElement(_HoverPopper.HoverPopper, _object_spread._({
-        className: (0, _vkjs.classNames)("vkuiTextTooltip", appearance !== "neutral" && ({
-            accent: "vkuiTextTooltip--appearance-accent",
-            white: "vkuiTextTooltip--appearance-white",
-            black: "vkuiTextTooltip--appearance-black",
-            inversion: "vkuiTextTooltip--appearance-inversion"
-        })[appearance], className),
+        className: (0, _vkjs.classNames)("vkuiTextTooltip", appearance !== "neutral" && stylesAppearance[appearance], className),
         arrow: true,
         arrowClassName: "vkuiTextTooltip__arrow",
         content: /*#__PURE__*/ _react.createElement(_react.Fragment, null, (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/ _react.createElement(_Subhead.Subhead, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport { Subhead } from '../Typography/Subhead/Subhead';\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        appearance !== 'neutral' &&\n          {\n            accent: styles['TextTooltip--appearance-accent'],\n            white: styles['TextTooltip--appearance-white'],\n            black: styles['TextTooltip--appearance-black'],\n            inversion: styles['TextTooltip--appearance-inversion'],\n          }[appearance],\n        className,\n      )}\n      arrow\n      arrowClassName={styles['TextTooltip__arrow']}\n      content={\n        <React.Fragment>\n          {hasReactNode(header) && <Subhead weight=\"2\">{header}</Subhead>}\n          {hasReactNode(text) && <Subhead>{text}</Subhead>}\n        </React.Fragment>\n      }\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"names":["TextTooltip","children","text","header","appearance","className","popperProps","HoverPopper","classNames","accent","white","black","inversion","arrow","arrowClassName","content","React","Fragment","hasReactNode","Subhead","weight"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;+DAzBU;oBACkB;2BACK;uBACtB;AAsBjB,IAAMA,cAAc;QACzBC,kBAAAA,UACAC,cAAAA,MACAC,gBAAAA,mCACAC,YAAAA,4CAAa,+BACbC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,wBAAW;QACVF,WAAWG,IAAAA,gBAAU,qBAEnBJ,eAAe,aACb,CAAA;YACEK,MAAM;YACNC,KAAK;YACLC,KAAK;YACLC,SAAS;QACX,CAAA,CAAC,CAACR,WAAW,EACfC;QAEFQ,OAAAA;QACAC,cAAc;QACdC,uBACE,qBAACC,OAAMC,QAAQ,QACZC,IAAAA,kBAAY,EAACf,yBAAW,qBAACgB,gBAAO;YAACC,QAAO;WAAKjB,SAC7Ce,IAAAA,kBAAY,EAAChB,uBAAS,qBAACiB,gBAAO,QAAEjB;OAGjCI,cAEHL;AAGP"}
+{"version":3,"sources":["../../../../src/components/TextTooltip/TextTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './TextTooltip.module.css';\n\nconst stylesAppearance = {\n  accent: styles['TextTooltip--appearance-accent'],\n  white: styles['TextTooltip--appearance-white'],\n  black: styles['TextTooltip--appearance-black'],\n  inversion: styles['TextTooltip--appearance-inversion'],\n};\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        appearance !== 'neutral' && stylesAppearance[appearance],\n        className,\n      )}\n      arrow\n      arrowClassName={styles['TextTooltip__arrow']}\n      content={\n        <React.Fragment>\n          {hasReactNode(header) && <Subhead weight=\"2\">{header}</Subhead>}\n          {hasReactNode(text) && <Subhead>{text}</Subhead>}\n        </React.Fragment>\n      }\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"names":["TextTooltip","stylesAppearance","accent","white","black","inversion","children","text","header","appearance","className","popperProps","HoverPopper","classNames","arrow","arrowClassName","content","React","Fragment","hasReactNode","Subhead","weight"],"mappings":";;;;+BAgCaA;;;eAAAA;;;;;;+DAhCU;oBACkB;2BACK;uBACtB;AAGxB,IAAMC,mBAAmB;IACvBC,MAAM;IACNC,KAAK;IACLC,KAAK;IACLC,SAAS;AACX;AAqBO,IAAML,cAAc;QACzBM,kBAAAA,UACAC,cAAAA,MACAC,gBAAAA,mCACAC,YAAAA,4CAAa,+BACbC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,wBAAW;QACVF,WAAWG,IAAAA,gBAAU,qBAEnBJ,eAAe,aAAaR,gBAAgB,CAACQ,WAAW,EACxDC;QAEFI,OAAAA;QACAC,cAAc;QACdC,uBACE,qBAACC,OAAMC,QAAQ,QACZC,IAAAA,kBAAY,EAACX,yBAAW,qBAACY,gBAAO;YAACC,QAAO;WAAKb,SAC7CW,IAAAA,kBAAY,EAACZ,uBAAS,qBAACa,gBAAO,QAAEb;OAGjCI,cAEHL;AAGP"}

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

@@ -55,4 +55,4 @@ export interface TooltipProps extends Omit<TooltipBaseProps, 'arrowCoords' | 'ar
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
-export declare const Tooltip: ({ children, isShown: isShownProp, offsetX, offsetY, alignX, alignY, onClose, cornerOffset, cornerAbsoluteOffset, arrow, arrowPadding, placement: placementProp, ...restProps }: TooltipProps) => React.JSX.Element;
+export declare const Tooltip: ({ children, isShown: isShownProp, offsetX, offsetY, alignX, alignY, onClose, cornerOffset, cornerAbsoluteOffset, arrow, arrowPadding, placement: placementProp, maxWidth, ...restProps }: TooltipProps) => React.JSX.Element;

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -50,7 +50,7 @@ function isVerticalPlacement(placement) {
     return placement.startsWith("top") || placement.startsWith("bottom");
 }
 var Tooltip = function(_param) {
-    var children = _param.children, tmp = _param.isShown, isShownProp = tmp === void 0 ? true : tmp, _param_offsetX = _param.offsetX, offsetX = _param_offsetX === void 0 ? 0 : _param_offsetX, _param_offsetY = _param.offsetY, offsetY = _param_offsetY === void 0 ? 15 : _param_offsetY, alignX = _param.alignX, alignY = _param.alignY, onClose = _param.onClose, _param_cornerOffset = _param.cornerOffset, cornerOffset = _param_cornerOffset === void 0 ? 0 : _param_cornerOffset, cornerAbsoluteOffset = _param.cornerAbsoluteOffset, _param_arrow = _param.arrow, arrow = _param_arrow === void 0 ? true : _param_arrow, _param_arrowPadding = _param.arrowPadding, arrowPadding = _param_arrowPadding === void 0 ? 14 : _param_arrowPadding, placementProp = _param.placement, restProps = _object_without_properties._(_param, [
+    var children = _param.children, tmp = _param.isShown, isShownProp = tmp === void 0 ? true : tmp, _param_offsetX = _param.offsetX, offsetX = _param_offsetX === void 0 ? 0 : _param_offsetX, _param_offsetY = _param.offsetY, offsetY = _param_offsetY === void 0 ? 15 : _param_offsetY, alignX = _param.alignX, alignY = _param.alignY, onClose = _param.onClose, _param_cornerOffset = _param.cornerOffset, cornerOffset = _param_cornerOffset === void 0 ? 0 : _param_cornerOffset, cornerAbsoluteOffset = _param.cornerAbsoluteOffset, _param_arrow = _param.arrow, arrow = _param_arrow === void 0 ? true : _param_arrow, _param_arrowPadding = _param.arrowPadding, arrowPadding = _param_arrowPadding === void 0 ? 14 : _param_arrowPadding, placementProp = _param.placement, _param_maxWidth = _param.maxWidth, maxWidth = _param_maxWidth === void 0 ? _TooltipBase.TOOLTIP_MAX_WIDTH : _param_maxWidth, restProps = _object_without_properties._(_param, [
         "children",
         "isShown",
         "offsetX",
@@ -62,7 +62,8 @@ var Tooltip = function(_param) {
         "cornerAbsoluteOffset",
         "arrow",
         "arrowPadding",
-        "placement"
+        "placement",
+        "maxWidth"
     ]);
     var _React_useState = _sliced_to_array._(_react.useState(null), 2), arrowRef = _React_useState[0], setArrowRef = _React_useState[1];
     var _React_useState1 = _sliced_to_array._(_react.useState(null), 2), target = _React_useState1[0], setTarget = _React_useState1[1];
@@ -168,7 +169,8 @@ var Tooltip = function(_param) {
         withArrow: arrow,
         arrowCoords: arrowCoords,
         arrowPlacement: resolvedPlacement,
-        getArrowRef: setArrowRef
+        getArrowRef: setArrowRef,
+        maxWidth: maxWidth
     })), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiTooltip__overlay",
         onClickCapture: onClose

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  autoUpdateFloatingElement,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  getAutoPlacementAlign,\n  offsetMiddleware,\n  type Placement,\n  type PlacementWithAuto,\n  shiftMiddleware,\n  useFloating,\n  type UseFloatingMiddleware,\n} from '../../lib/floating';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { useNavTransition } from '../NavTransitionContext/NavTransitionContext';\nimport { TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { tooltipContainerAttr } from './TooltipContainer';\nimport styles from './Tooltip.module.css';\n\n/**\n * Перебиваем `ref`.\n *\n * В оригинальном `React.DOMElement` задаётся `React.LegacyRef<T>`, в котором есть `string`.\n * Когда как `{ ref: \"string\" }` уже давно депрекейтнут.\n */\ninterface DOMElement<P extends React.HTMLAttributes<T> | React.SVGAttributes<T>, T extends Element>\n  extends React.DOMElement<P, T> {\n  ref: React.Ref<T>;\n}\n\nconst isDOMTypeElement = <\n  P extends React.HTMLAttributes<T> | React.SVGAttributes<T>,\n  T extends Element,\n>(\n  element: React.ReactElement,\n): element is DOMElement<P, T> => {\n  return React.isValidElement(element) && typeof element.type === 'string';\n};\n\nconst warn = warnOnce('Tooltip');\n\nexport interface TooltipProps\n  extends Omit<\n    TooltipBaseProps,\n    'arrowCoords' | 'arrowPlacement' | 'getArrowRef' | 'floatingStyle' | 'withArrow'\n  > {\n  /**\n   * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает\n   * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,\n   * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.\n   */\n  children: React.ReactElement<HasRootRef<any>> | React.ReactElement;\n  /**\n   * Если передан `false`, то рисуется просто `children`.\n   */\n  isShown?: boolean;\n  alignX?: 'center' | 'left' | 'right';\n  /**\n   * Положение по вертикали (расположение над или под `children`).\n   * Если не задано, позиция по вертикали определятся автоматически\n   */\n  alignY?: 'top' | 'bottom';\n  /**\n   * Сдвиг по горизонтали (относительно портала, в котором рисуется тултип).\n   */\n  offsetX?: number;\n  /**\n   * Сдвиг по вертикали (относительно портала, в котором рисуется тултип).\n   */\n  offsetY?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.\n   */\n  arrowPadding?: number;\n  /**\n   * Сдвиг стрелочки относительно центра дочернего элемента.\n   */\n  cornerOffset?: number;\n  /**\n   * Сдвиг стрелочки относительно ширины тултипа\n   */\n  cornerAbsoluteOffset?: number;\n  /**\n   * Callback, который вызывается при клике по любому месту в пределах экрана.\n   */\n  onClose?: () => void;\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n}\n\nfunction mapAlignX(x: TooltipProps['alignX']) {\n  switch (x) {\n    case 'left':\n      return 'start';\n    case 'right':\n      return 'end';\n    default:\n      return '';\n  }\n}\nfunction getDefaultPlacement(\n  alignX: TooltipProps['alignX'],\n  alignY: TooltipProps['alignY'],\n): Placement {\n  return [alignY || 'bottom', mapAlignX(alignX || 'left')]\n    .filter((p) => !!p)\n    .join('-') as Placement;\n}\nfunction isVerticalPlacement(placement: PlacementWithAuto) {\n  return placement.startsWith('top') || placement.startsWith('bottom');\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const Tooltip = ({\n  children,\n  isShown: isShownProp = true,\n  offsetX = 0,\n  offsetY = 15,\n  alignX,\n  alignY,\n  onClose,\n  cornerOffset = 0,\n  cornerAbsoluteOffset,\n  arrow = true,\n  arrowPadding = 14,\n  placement: placementProp,\n  ...restProps\n}: TooltipProps) => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const [target, setTarget] = React.useState<HTMLElement | null>(null);\n  /* eslint-disable no-restricted-properties */\n  const tooltipContainer = React.useMemo(\n    () => target?.closest<HTMLDivElement>(`[${tooltipContainerAttr}]`),\n    [target],\n  );\n  const { entering } = useNavTransition();\n  const isShown = isShownProp && tooltipContainer && !entering;\n\n  const placement = placementProp || getDefaultPlacement(alignX, alignY);\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placement);\n\n  if (process.env.NODE_ENV === 'development') {\n    const multiChildren = React.Children.count(children) > 1;\n    // Empty children is a noop\n    const primitiveChild = hasReactNode(children) && typeof children !== 'object';\n    (multiChildren || primitiveChild) &&\n      warn(\n        [\n          'children должен быть одним React элементом, получено',\n          multiChildren && 'несколько',\n          primitiveChild && JSON.stringify(children),\n        ]\n          .filter(Boolean)\n          .join(' '),\n        'error',\n      );\n  }\n\n  const floatingPositionStrategy = React.useMemo(\n    () => (target?.style.position === 'fixed' ? 'fixed' : 'absolute'),\n    [target],\n  );\n\n  if (process.env.NODE_ENV === 'development' && target && !tooltipContainer) {\n    throw new Error('Use TooltipContainer for Tooltip outside Panel (see docs)');\n  }\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetX,\n        mainAxis: offsetY,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({\n          alignment: placement ? getAutoPlacementAlign(placement) : null,\n        }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: arrowPadding,\n        }),\n      );\n      middlewares.push({\n        name: 'arrowOffset',\n        fn({ placement, middlewareData }) {\n          if (!middlewareData.arrow) {\n            return Promise.resolve({});\n          }\n          if (isVerticalPlacement(placement)) {\n            if (cornerAbsoluteOffset !== undefined) {\n              middlewareData.arrow.x = cornerAbsoluteOffset;\n            } else if (middlewareData.arrow.x !== undefined) {\n              middlewareData.arrow.x += cornerOffset;\n            }\n          } else {\n            if (cornerAbsoluteOffset !== undefined) {\n              middlewareData.arrow.y = cornerAbsoluteOffset;\n            } else if (middlewareData.arrow.y !== undefined) {\n              middlewareData.arrow.y += cornerOffset;\n            }\n          }\n          return Promise.resolve({});\n        },\n      });\n    }\n\n    return middlewares;\n  }, [\n    arrow,\n    arrowRef,\n    arrowPadding,\n    cornerAbsoluteOffset,\n    cornerOffset,\n    offsetX,\n    offsetY,\n    placement,\n    isNotAutoPlacement,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    strategy: floatingPositionStrategy,\n    placement: isNotAutoPlacement ? placement : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted: autoUpdateFloatingElement,\n  });\n\n  const childRef = isDOMTypeElement<React.HTMLAttributes<HTMLElement>, HTMLElement>(children)\n    ? children.ref\n    : React.isValidElement<HasRootRef<HTMLElement>>(children)\n    ? children.props.getRootRef\n    : null;\n  const patchedRef = useExternRef<HTMLElement>(setTarget, refs.setReference, childRef);\n  const child = React.isValidElement(children)\n    ? React.cloneElement(children, {\n        [isDOMTypeElement(children) ? 'ref' : 'getRootRef']: patchedRef,\n      })\n    : children;\n\n  return (\n    <React.Fragment>\n      {child}\n      {isShown &&\n        target != null &&\n        ReactDOM.createPortal(\n          <>\n            <TooltipBase\n              {...restProps}\n              getRootRef={refs.setFloating}\n              floatingStyle={convertFloatingDataToReactCSSProperties(\n                floatingPositionStrategy,\n                floatingDataX,\n                floatingDataY,\n              )}\n              withArrow={arrow}\n              arrowCoords={arrowCoords}\n              arrowPlacement={resolvedPlacement}\n              getArrowRef={setArrowRef}\n            />\n            <div className={styles['Tooltip__overlay']} onClickCapture={onClose} />\n          </>,\n          tooltipContainer,\n        )}\n    </React.Fragment>\n  );\n};\n"],"names":["Tooltip","isDOMTypeElement","element","React","isValidElement","type","warn","warnOnce","mapAlignX","x","getDefaultPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","children","isShownProp","isShown","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","arrow","arrowPadding","placementProp","restProps","useState","arrowRef","setArrowRef","target","setTarget","tooltipContainer","useMemo","closest","tooltipContainerAttr","entering","useNavTransition","isNotAutoPlacement","checkIsNotAutoPlacement","process","env","NODE_ENV","multiChildren","Children","count","primitiveChild","hasReactNode","JSON","stringify","Boolean","floatingPositionStrategy","style","position","Error","memoizedMiddlewares","middlewares","offsetMiddleware","crossAxis","mainAxis","push","flipMiddleware","autoPlacementMiddleware","alignment","getAutoPlacementAlign","shiftMiddleware","arrowMiddleware","padding","name","fn","middlewareData","Promise","resolve","undefined","y","useFloating","strategy","middleware","whileElementsMounted","autoUpdateFloatingElement","floatingDataX","floatingDataY","resolvedPlacement","refs","arrowCoords","childRef","ref","props","getRootRef","patchedRef","useExternRef","setReference","child","cloneElement","Fragment","ReactDOM","createPortal","TooltipBase","setFloating","floatingStyle","convertFloatingDataToReactCSSProperties","withArrow","arrowPlacement","getArrowRef","div","className","onClickCapture"],"mappings":";;;;+BAgIaA;;;eAAAA;;;;;;;;;;+DAhIU;iEACF;oBACQ;4BACA;wBAetB;wBACkB;oCAEQ;2BACkB;gCACd;AAcrC,IAAMC,mBAAmB,SAIvBC;IAEA,qBAAOC,OAAMC,cAAc,CAACF,YAAY,OAAOA,QAAQG,IAAI,KAAK;AAClE;AAEA,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAyDtB,SAASC,UAAUC,CAAyB;IAC1C,OAAQA;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF;AACA,SAASC,oBACPC,MAA8B,EAC9BC,MAA8B;IAE9B,OAAO;QAACA,UAAU;QAAUJ,UAAUG,UAAU;KAAQ,CACrDE,MAAM,CAAC,SAACC;eAAM,CAAC,CAACA;OAChBC,IAAI,CAAC;AACV;AACA,SAASC,oBAAoBC,SAA4B;IACvD,OAAOA,UAAUC,UAAU,CAAC,UAAUD,UAAUC,UAAU,CAAC;AAC7D;AAKO,IAAMlB,UAAU;QACrBmB,kBAAAA,UACSC,aAATC,SAASD,cAAAA,iBAAc,OAAdA,6BACTE,SAAAA,sCAAU,4CACVC,SAAAA,sCAAU,qBACVZ,gBAAAA,QACAC,gBAAAA,QACAY,iBAAAA,sCACAC,cAAAA,gDAAe,yBACfC,8BAAAA,4CACAC,OAAAA,kCAAQ,kDACRC,cAAAA,gDAAe,0BACfX,AAAWY,uBAAXZ,WACGa;QAZHX;QACAE;QACAC;QACAC;QACAZ;QACAC;QACAY;QACAC;QACAC;QACAC;QACAC;QACAX;;IAGA,IAAgCd,qCAAAA,OAAM4B,QAAQ,CAAwB,WAA/DC,WAAyB7B,oBAAf8B,cAAe9B;IAChC,IAA4BA,sCAAAA,OAAM4B,QAAQ,CAAqB,WAAxDG,SAAqB/B,qBAAbgC,YAAahC;IAC5B,2CAA2C,GAC3C,IAAMiC,mBAAmBjC,OAAMkC,OAAO,CACpC;YAAMH;gBAAAA,UAAAA,oBAAAA,8BAAAA,QAAQI,OAAO,CAAiB,AAAC,IAAwB,OAArBC,sCAAoB,EAAC;OAC/D;QAACL;KAAO;IAEV,IAAM,AAAEM,WAAaC,IAAAA,sCAAgB,IAA7BD;IACR,IAAMnB,UAAUD,eAAegB,oBAAoB,CAACI;IAEpD,IAAMvB,YAAYY,iBAAiBnB,oBAAoBC,QAAQC;IAC/D,IAAM8B,qBAAqBC,IAAAA,iCAAuB,EAAC1B;IAEnD,IAAI2B,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAMC,gBAAgB5C,OAAM6C,QAAQ,CAACC,KAAK,CAAC9B,YAAY;QACvD,2BAA2B;QAC3B,IAAM+B,iBAAiBC,IAAAA,kBAAY,EAAChC,aAAa,OAAOA,aAAa;QACpE4B,CAAAA,iBAAiBG,cAAa,KAC7B5C,KACE;YACE;YACAyC,iBAAiB;YACjBG,kBAAkBE,KAAKC,SAAS,CAAClC;SAClC,CACEN,MAAM,CAACyC,SACPvC,IAAI,CAAC,MACR;IAEN;IAEA,IAAMwC,2BAA2BpD,OAAMkC,OAAO,CAC5C;YAAOH;eAAAA,EAAAA,UAAAA,oBAAAA,8BAAAA,QAAQsB,KAAK,CAACC,QAAQ,MAAK,UAAU,UAAU;OACtD;QAACvB;KAAO;IAGV,IAAIU,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBZ,UAAU,CAACE,kBAAkB;QACzE,MAAM,IAAIsB,MAAM;IAClB;IAEA,IAAMC,sBAAsBxD,OAAMkC,OAAO,CAAC;QACxC,IAAMuB,cAAuC;YAC3CC,IAAAA,0BAAgB,EAAC;gBACfC,WAAWxC;gBACXyC,UAAUxC;YACZ;SACD;QAED,oEAAoE;QACpE,IAAImB,oBAAoB;YACtBkB,YAAYI,IAAI,CAACC,IAAAA,wBAAc;QACjC,OAAO;YACLL,YAAYI,IAAI,CACdE,IAAAA,iCAAuB,EAAC;gBACtBC,WAAWlD,YAAYmD,IAAAA,+BAAqB,EAACnD,aAAa;YAC5D;QAEJ;QAEA2C,YAAYI,IAAI,CAACK,IAAAA,yBAAe;QAEhC,+CAA+C;QAC/C,IAAI1C,OAAO;YACTiC,YAAYI,IAAI,CACdM,IAAAA,yBAAe,EAAC;gBACdpE,SAAS8B;gBACTuC,SAAS3C;YACX;YAEFgC,YAAYI,IAAI,CAAC;gBACfQ,MAAM;gBACNC,IAAAA,SAAAA,GAAG,KAA6B;wBAA3BxD,YAAF,MAAEA,WAAWyD,iBAAb,MAAaA;oBACd,IAAI,CAACA,eAAe/C,KAAK,EAAE;wBACzB,OAAOgD,QAAQC,OAAO,CAAC,CAAC;oBAC1B;oBACA,IAAI5D,oBAAoBC,YAAY;wBAClC,IAAIS,yBAAyBmD,WAAW;4BACtCH,eAAe/C,KAAK,CAAClB,CAAC,GAAGiB;wBAC3B,OAAO,IAAIgD,eAAe/C,KAAK,CAAClB,CAAC,KAAKoE,WAAW;4BAC/CH,eAAe/C,KAAK,CAAClB,CAAC,IAAIgB;wBAC5B;oBACF,OAAO;wBACL,IAAIC,yBAAyBmD,WAAW;4BACtCH,eAAe/C,KAAK,CAACmD,CAAC,GAAGpD;wBAC3B,OAAO,IAAIgD,eAAe/C,KAAK,CAACmD,CAAC,KAAKD,WAAW;4BAC/CH,eAAe/C,KAAK,CAACmD,CAAC,IAAIrD;wBAC5B;oBACF;oBACA,OAAOkD,QAAQC,OAAO,CAAC,CAAC;gBAC1B;YACF;QACF;QAEA,OAAOhB;IACT,GAAG;QACDjC;QACAK;QACAJ;QACAF;QACAD;QACAH;QACAC;QACAN;QACAyB;KACD;IAED,IAMIqC,eAAAA,IAAAA,qBAAW,EAAC;QACdC,UAAUzB;QACVtC,WAAWyB,qBAAqBzB,YAAY4D;QAC5CI,YAAYtB;QACZuB,sBAAsBC,mCAAyB;IACjD,IAVE1E,AAAG2E,gBAKDL,aALFtE,GACAqE,AAAGO,gBAIDN,aAJFD,GACA7D,AAAWqE,oBAGTP,aAHF9D,WACAsE,OAEER,aAFFQ,oCAEER,aADFL,gBAAkB/C,AAAO6D,0CAAP7D;IAQpB,IAAM8D,WAAWxF,iBAAiEkB,YAC9EA,SAASuE,GAAG,iBACZvF,OAAMC,cAAc,CAA0Be,YAC9CA,SAASwE,KAAK,CAACC,UAAU,GACzB;IACJ,IAAMC,aAAaC,IAAAA,0BAAY,EAAc3D,WAAWoD,KAAKQ,YAAY,EAAEN;IAC3E,IAAMO,sBAAQ7F,OAAMC,cAAc,CAACe,0BAC/BhB,OAAM8F,YAAY,CAAC9E,UACjB,uBAAClB,iBAAiBkB,YAAY,QAAQ,cAAe0E,eAEvD1E;IAEJ,qBACE,qBAAChB,OAAM+F,QAAQ,QACZF,OACA3E,WACCa,UAAU,sBACViE,iBAAQ,CAACC,YAAY,eACnB,0DACE,qBAACC,wBAAW,8CACNvE;QACJ8D,YAAYL,KAAKe,WAAW;QAC5BC,eAAeC,IAAAA,iDAAuC,EACpDjD,0BACA6B,eACAC;QAEFoB,WAAW9E;QACX6D,aAAaA;QACbkB,gBAAgBpB;QAChBqB,aAAa1E;uBAEf,qBAAC2E;QAAIC,SAAS;QAA8BC,gBAAgBtF;SAE9DY;AAIV"}
+{"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  autoUpdateFloatingElement,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  getAutoPlacementAlign,\n  offsetMiddleware,\n  type Placement,\n  type PlacementWithAuto,\n  shiftMiddleware,\n  useFloating,\n  type UseFloatingMiddleware,\n} from '../../lib/floating';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { useNavTransition } from '../NavTransitionContext/NavTransitionContext';\nimport { TOOLTIP_MAX_WIDTH, TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { tooltipContainerAttr } from './TooltipContainer';\nimport styles from './Tooltip.module.css';\n\n/**\n * Перебиваем `ref`.\n *\n * В оригинальном `React.DOMElement` задаётся `React.LegacyRef<T>`, в котором есть `string`.\n * Когда как `{ ref: \"string\" }` уже давно депрекейтнут.\n */\ninterface DOMElement<P extends React.HTMLAttributes<T> | React.SVGAttributes<T>, T extends Element>\n  extends React.DOMElement<P, T> {\n  ref: React.Ref<T>;\n}\n\nconst isDOMTypeElement = <\n  P extends React.HTMLAttributes<T> | React.SVGAttributes<T>,\n  T extends Element,\n>(\n  element: React.ReactElement,\n): element is DOMElement<P, T> => {\n  return React.isValidElement(element) && typeof element.type === 'string';\n};\n\nconst warn = warnOnce('Tooltip');\n\nexport interface TooltipProps\n  extends Omit<\n    TooltipBaseProps,\n    'arrowCoords' | 'arrowPlacement' | 'getArrowRef' | 'floatingStyle' | 'withArrow'\n  > {\n  /**\n   * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает\n   * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,\n   * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.\n   */\n  children: React.ReactElement<HasRootRef<any>> | React.ReactElement;\n  /**\n   * Если передан `false`, то рисуется просто `children`.\n   */\n  isShown?: boolean;\n  alignX?: 'center' | 'left' | 'right';\n  /**\n   * Положение по вертикали (расположение над или под `children`).\n   * Если не задано, позиция по вертикали определятся автоматически\n   */\n  alignY?: 'top' | 'bottom';\n  /**\n   * Сдвиг по горизонтали (относительно портала, в котором рисуется тултип).\n   */\n  offsetX?: number;\n  /**\n   * Сдвиг по вертикали (относительно портала, в котором рисуется тултип).\n   */\n  offsetY?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.\n   */\n  arrowPadding?: number;\n  /**\n   * Сдвиг стрелочки относительно центра дочернего элемента.\n   */\n  cornerOffset?: number;\n  /**\n   * Сдвиг стрелочки относительно ширины тултипа\n   */\n  cornerAbsoluteOffset?: number;\n  /**\n   * Callback, который вызывается при клике по любому месту в пределах экрана.\n   */\n  onClose?: () => void;\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n}\n\nfunction mapAlignX(x: TooltipProps['alignX']) {\n  switch (x) {\n    case 'left':\n      return 'start';\n    case 'right':\n      return 'end';\n    default:\n      return '';\n  }\n}\nfunction getDefaultPlacement(\n  alignX: TooltipProps['alignX'],\n  alignY: TooltipProps['alignY'],\n): Placement {\n  return [alignY || 'bottom', mapAlignX(alignX || 'left')]\n    .filter((p) => !!p)\n    .join('-') as Placement;\n}\nfunction isVerticalPlacement(placement: PlacementWithAuto) {\n  return placement.startsWith('top') || placement.startsWith('bottom');\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const Tooltip = ({\n  children,\n  isShown: isShownProp = true,\n  offsetX = 0,\n  offsetY = 15,\n  alignX,\n  alignY,\n  onClose,\n  cornerOffset = 0,\n  cornerAbsoluteOffset,\n  arrow = true,\n  arrowPadding = 14,\n  placement: placementProp,\n  maxWidth = TOOLTIP_MAX_WIDTH,\n  ...restProps\n}: TooltipProps) => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const [target, setTarget] = React.useState<HTMLElement | null>(null);\n  /* eslint-disable no-restricted-properties */\n  const tooltipContainer = React.useMemo(\n    () => target?.closest<HTMLDivElement>(`[${tooltipContainerAttr}]`),\n    [target],\n  );\n  const { entering } = useNavTransition();\n  const isShown = isShownProp && tooltipContainer && !entering;\n\n  const placement = placementProp || getDefaultPlacement(alignX, alignY);\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placement);\n\n  if (process.env.NODE_ENV === 'development') {\n    const multiChildren = React.Children.count(children) > 1;\n    // Empty children is a noop\n    const primitiveChild = hasReactNode(children) && typeof children !== 'object';\n    (multiChildren || primitiveChild) &&\n      warn(\n        [\n          'children должен быть одним React элементом, получено',\n          multiChildren && 'несколько',\n          primitiveChild && JSON.stringify(children),\n        ]\n          .filter(Boolean)\n          .join(' '),\n        'error',\n      );\n  }\n\n  const floatingPositionStrategy = React.useMemo(\n    () => (target?.style.position === 'fixed' ? 'fixed' : 'absolute'),\n    [target],\n  );\n\n  if (process.env.NODE_ENV === 'development' && target && !tooltipContainer) {\n    throw new Error('Use TooltipContainer for Tooltip outside Panel (see docs)');\n  }\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetX,\n        mainAxis: offsetY,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({\n          alignment: placement ? getAutoPlacementAlign(placement) : null,\n        }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: arrowPadding,\n        }),\n      );\n      middlewares.push({\n        name: 'arrowOffset',\n        fn({ placement, middlewareData }) {\n          if (!middlewareData.arrow) {\n            return Promise.resolve({});\n          }\n          if (isVerticalPlacement(placement)) {\n            if (cornerAbsoluteOffset !== undefined) {\n              middlewareData.arrow.x = cornerAbsoluteOffset;\n            } else if (middlewareData.arrow.x !== undefined) {\n              middlewareData.arrow.x += cornerOffset;\n            }\n          } else {\n            if (cornerAbsoluteOffset !== undefined) {\n              middlewareData.arrow.y = cornerAbsoluteOffset;\n            } else if (middlewareData.arrow.y !== undefined) {\n              middlewareData.arrow.y += cornerOffset;\n            }\n          }\n          return Promise.resolve({});\n        },\n      });\n    }\n\n    return middlewares;\n  }, [\n    arrow,\n    arrowRef,\n    arrowPadding,\n    cornerAbsoluteOffset,\n    cornerOffset,\n    offsetX,\n    offsetY,\n    placement,\n    isNotAutoPlacement,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    strategy: floatingPositionStrategy,\n    placement: isNotAutoPlacement ? placement : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted: autoUpdateFloatingElement,\n  });\n\n  const childRef = isDOMTypeElement<React.HTMLAttributes<HTMLElement>, HTMLElement>(children)\n    ? children.ref\n    : React.isValidElement<HasRootRef<HTMLElement>>(children)\n    ? children.props.getRootRef\n    : null;\n  const patchedRef = useExternRef<HTMLElement>(setTarget, refs.setReference, childRef);\n  const child = React.isValidElement(children)\n    ? React.cloneElement(children, {\n        [isDOMTypeElement(children) ? 'ref' : 'getRootRef']: patchedRef,\n      })\n    : children;\n\n  return (\n    <React.Fragment>\n      {child}\n      {isShown &&\n        target != null &&\n        ReactDOM.createPortal(\n          <>\n            <TooltipBase\n              {...restProps}\n              getRootRef={refs.setFloating}\n              floatingStyle={convertFloatingDataToReactCSSProperties(\n                floatingPositionStrategy,\n                floatingDataX,\n                floatingDataY,\n              )}\n              withArrow={arrow}\n              arrowCoords={arrowCoords}\n              arrowPlacement={resolvedPlacement}\n              getArrowRef={setArrowRef}\n              maxWidth={maxWidth}\n            />\n            <div className={styles['Tooltip__overlay']} onClickCapture={onClose} />\n          </>,\n          tooltipContainer,\n        )}\n    </React.Fragment>\n  );\n};\n"],"names":["Tooltip","isDOMTypeElement","element","React","isValidElement","type","warn","warnOnce","mapAlignX","x","getDefaultPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","children","isShownProp","isShown","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","arrow","arrowPadding","placementProp","maxWidth","TOOLTIP_MAX_WIDTH","restProps","useState","arrowRef","setArrowRef","target","setTarget","tooltipContainer","useMemo","closest","tooltipContainerAttr","entering","useNavTransition","isNotAutoPlacement","checkIsNotAutoPlacement","process","env","NODE_ENV","multiChildren","Children","count","primitiveChild","hasReactNode","JSON","stringify","Boolean","floatingPositionStrategy","style","position","Error","memoizedMiddlewares","middlewares","offsetMiddleware","crossAxis","mainAxis","push","flipMiddleware","autoPlacementMiddleware","alignment","getAutoPlacementAlign","shiftMiddleware","arrowMiddleware","padding","name","fn","middlewareData","Promise","resolve","undefined","y","useFloating","strategy","middleware","whileElementsMounted","autoUpdateFloatingElement","floatingDataX","floatingDataY","resolvedPlacement","refs","arrowCoords","childRef","ref","props","getRootRef","patchedRef","useExternRef","setReference","child","cloneElement","Fragment","ReactDOM","createPortal","TooltipBase","setFloating","floatingStyle","convertFloatingDataToReactCSSProperties","withArrow","arrowPlacement","getArrowRef","div","className","onClickCapture"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { HasRootRef } from '../../types';
 import { type PopperArrowProps } from '../PopperArrow/PopperArrow';
+export declare const TOOLTIP_MAX_WIDTH = 220;
 export interface TooltipBaseProps extends HasRootRef<HTMLDivElement> {
     /**
      * Стиль отображения подсказки
@@ -39,6 +40,12 @@ export interface TooltipBaseProps extends HasRootRef<HTMLDivElement> {
      * Пользовательские css-классы, будут добавлены на root-элемент
      */
     className?: string;
+    /**
+     * Перебивает максимальную ширину заданную по умолчанию.
+     *
+     * Передача `null` полностью сбрасывает установку `max-width` на элемент.
+     */
+    maxWidth?: number | string | null;
     floatingStyle?: React.CSSProperties;
 }
 /**
@@ -46,4 +53,4 @@ export interface TooltipBaseProps extends HasRootRef<HTMLDivElement> {
  * Примеры использования и Readme можно найти в документации Tooltip
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
-export declare const TooltipBase: ({ appearance, withArrow, arrowCoords, arrowPlacement, getArrowRef, getRootRef, floatingStyle, ArrowIcon, text, header, className, ...restProps }: TooltipBaseProps) => React.JSX.Element;
+export declare const TooltipBase: ({ appearance, withArrow, arrowCoords, arrowPlacement, getArrowRef, getRootRef, floatingStyle, ArrowIcon, text, header, maxWidth, ...restProps }: TooltipBaseProps) => React.JSX.Element;