@vkontakte/vkui 5.2.0 → 5.2.1

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["React","classNames","usePlatform","Platform","useGlobalEventListener","useDOM","pressedKey","modeClassNames","default","accent","secondary","TabsModeContext","createContext","mode","withGaps","Tabs","children","getRootRef","className","role","restProps","platform","document","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","capture","VKCOM"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { pressedKey } from '../../lib/accessibility';\nimport styles from './Tabs.module.css';\n\nconst modeClassNames = {\n  default: styles['Tabs--mode-default'],\n  accent: styles['Tabs--mode-accent'],\n  secondary: styles['Tabs--mode-secondary'],\n};\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: 'default',\n  withGaps: false,\n});\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  getRootRef,\n  className,\n  role = 'tablist',\n  ...restProps\n}: TabsProps) => {\n  const platform = usePlatform();\n  const { document } = useDOM();\n\n  const isTabFlow = role === 'tablist';\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const getTabEls = () => {\n    if (!tabsRef.current) {\n      return [];\n    }\n\n    return Array.from(\n      // eslint-disable-next-line no-restricted-properties\n      tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),\n    );\n  };\n\n  const handleDocumentKeydown = (event: KeyboardEvent) => {\n    if (!document || !tabsRef.current || !isTabFlow) {\n      return;\n    }\n\n    const key = pressedKey(event);\n\n    switch (key) {\n      case 'ArrowLeft':\n      case 'ArrowRight':\n      case 'End':\n      case 'Home': {\n        const tabEls = getTabEls();\n        const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);\n        if (currentFocusedElIndex === -1) {\n          return;\n        }\n\n        let nextIndex = 0;\n        if (key === 'Home') {\n          nextIndex = 0;\n        } else if (key === 'End') {\n          nextIndex = tabEls.length - 1;\n        } else {\n          const offset = key === 'ArrowRight' ? 1 : -1;\n          nextIndex = currentFocusedElIndex + offset;\n        }\n\n        const nextTabEl = tabEls[nextIndex];\n\n        if (nextTabEl) {\n          event.preventDefault();\n          nextTabEl.focus();\n        }\n\n        break;\n      }\n      /*\n       В JAWS и NVDA стрелка вниз активирует контент.\n       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.\n       https://inclusive-components.design/tabbed-interfaces/\n      */\n      case 'ArrowDown': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n\n        if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {\n          return;\n        }\n\n        const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');\n        if (!relatedContentElId) {\n          return;\n        }\n\n        // eslint-disable-next-line no-restricted-properties\n        const relatedContentEl = document.getElementById(relatedContentElId);\n        if (!relatedContentEl) {\n          return;\n        }\n\n        event.preventDefault();\n        relatedContentEl.focus();\n\n        break;\n      }\n      case 'Space':\n      case 'Enter': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n        if (currentFocusedEl) {\n          currentFocusedEl.click();\n        }\n      }\n    }\n  };\n\n  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Tabs'],\n        platform === Platform.VKCOM && styles['Tabs--vkcom'],\n        withGaps && styles['Tabs--withGaps'],\n        modeClassNames[mode],\n        className,\n      )}\n      role={role}\n    >\n      <div className={styles['Tabs__in']} ref={tabsRef}>\n        <TabsModeContext.Provider value={{ mode, withGaps }}>{children}</TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":["React","classNames","useGlobalEventListener","usePlatform","pressedKey","useDOM","Platform","modeClassNames","default","accent","secondary","TabsModeContext","createContext","mode","withGaps","Tabs","children","getRootRef","className","role","restProps","platform","document","isTabFlow","tabsRef","useRef","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","capture","VKCOM"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport styles from './Tabs.module.css';\n\nconst modeClassNames = {\n  default: styles['Tabs--mode-default'],\n  accent: styles['Tabs--mode-accent'],\n  secondary: styles['Tabs--mode-secondary'],\n};\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: 'default',\n  withGaps: false,\n});\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  getRootRef,\n  className,\n  role = 'tablist',\n  ...restProps\n}: TabsProps) => {\n  const platform = usePlatform();\n  const { document } = useDOM();\n\n  const isTabFlow = role === 'tablist';\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const getTabEls = () => {\n    if (!tabsRef.current) {\n      return [];\n    }\n\n    return Array.from(\n      // eslint-disable-next-line no-restricted-properties\n      tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),\n    );\n  };\n\n  const handleDocumentKeydown = (event: KeyboardEvent) => {\n    if (!document || !tabsRef.current || !isTabFlow) {\n      return;\n    }\n\n    const key = pressedKey(event);\n\n    switch (key) {\n      case 'ArrowLeft':\n      case 'ArrowRight':\n      case 'End':\n      case 'Home': {\n        const tabEls = getTabEls();\n        const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);\n        if (currentFocusedElIndex === -1) {\n          return;\n        }\n\n        let nextIndex = 0;\n        if (key === 'Home') {\n          nextIndex = 0;\n        } else if (key === 'End') {\n          nextIndex = tabEls.length - 1;\n        } else {\n          const offset = key === 'ArrowRight' ? 1 : -1;\n          nextIndex = currentFocusedElIndex + offset;\n        }\n\n        const nextTabEl = tabEls[nextIndex];\n\n        if (nextTabEl) {\n          event.preventDefault();\n          nextTabEl.focus();\n        }\n\n        break;\n      }\n      /*\n       В JAWS и NVDA стрелка вниз активирует контент.\n       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.\n       https://inclusive-components.design/tabbed-interfaces/\n      */\n      case 'ArrowDown': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n\n        if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {\n          return;\n        }\n\n        const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');\n        if (!relatedContentElId) {\n          return;\n        }\n\n        // eslint-disable-next-line no-restricted-properties\n        const relatedContentEl = document.getElementById(relatedContentElId);\n        if (!relatedContentEl) {\n          return;\n        }\n\n        event.preventDefault();\n        relatedContentEl.focus();\n\n        break;\n      }\n      case 'Space':\n      case 'Enter': {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);\n        if (currentFocusedEl) {\n          currentFocusedEl.click();\n        }\n      }\n    }\n  };\n\n  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Tabs'],\n        platform === Platform.VKCOM && styles['Tabs--vkcom'],\n        withGaps && styles['Tabs--withGaps'],\n        modeClassNames[mode],\n        className,\n      )}\n      role={role}\n    >\n      <div className={styles['Tabs__in']} ref={tabsRef}>\n        <TabsModeContext.Provider value={{ mode, withGaps }}>{children}</TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,sBAAsB,QAAQ,oCAAoC;AAC3E,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,QAAQ,QAAQ,oBAAoB;AAI7C,IAAMC,cAAc,GAAG;EACrBC,OAAO,0BAA8B;EACrCC,MAAM,yBAA6B;EACnCC,SAAS;AACX,CAAC;AAaD,OAAO,IAAMC,eAAe,gBAAGX,KAAK,CAACY,aAAa,CAAmB;EACnEC,IAAI,EAAE,SAAS;EACfC,QAAQ,EAAE;AACZ,CAAC,CAAC;;AAEF;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAOA;EAAA,IANfC,QAAQ,QAARA,QAAQ;IAAA,iBACRH,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBI,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IAAA,iBACTC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IACbC,SAAS;EAEZ,IAAMC,QAAQ,GAAGlB,WAAW,EAAE;EAC9B,cAAqBE,MAAM,EAAE;IAArBiB,QAAQ,WAARA,QAAQ;EAEhB,IAAMC,SAAS,GAAGJ,IAAI,KAAK,SAAS;EAEpC,IAAMK,OAAO,GAAGxB,KAAK,CAACyB,MAAM,CAAiB,IAAI,CAAC;EAElD,IAAMX,QAAQ,GAAGD,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,WAAW;EAE1D,IAAMa,SAAS,GAAG,SAAZA,SAAS,GAAS;IACtB,IAAI,CAACF,OAAO,CAACG,OAAO,EAAE;MACpB,OAAO,EAAE;IACX;IAEA,OAAOC,KAAK,CAACC,IAAI;IACf;IACAL,OAAO,CAACG,OAAO,CAACG,gBAAgB,CAAiB,4BAA4B,CAAC,CAC/E;EACH,CAAC;EAED,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,CAAIC,KAAoB,EAAK;IACtD,IAAI,CAACV,QAAQ,IAAI,CAACE,OAAO,CAACG,OAAO,IAAI,CAACJ,SAAS,EAAE;MAC/C;IACF;IAEA,IAAMU,GAAG,GAAG7B,UAAU,CAAC4B,KAAK,CAAC;IAE7B,QAAQC,GAAG;MACT,KAAK,WAAW;MAChB,KAAK,YAAY;MACjB,KAAK,KAAK;MACV,KAAK,MAAM;QAAE;UACX,IAAMC,MAAM,GAAGR,SAAS,EAAE;UAC1B,IAAMS,qBAAqB,GAAGD,MAAM,CAACE,SAAS,CAAC,UAACC,EAAE;YAAA,OAAKf,QAAQ,CAACgB,aAAa,KAAKD,EAAE;UAAA,EAAC;UACrF,IAAIF,qBAAqB,KAAK,CAAC,CAAC,EAAE;YAChC;UACF;UAEA,IAAII,SAAS,GAAG,CAAC;UACjB,IAAIN,GAAG,KAAK,MAAM,EAAE;YAClBM,SAAS,GAAG,CAAC;UACf,CAAC,MAAM,IAAIN,GAAG,KAAK,KAAK,EAAE;YACxBM,SAAS,GAAGL,MAAM,CAACM,MAAM,GAAG,CAAC;UAC/B,CAAC,MAAM;YACL,IAAMC,MAAM,GAAGR,GAAG,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC;YAC5CM,SAAS,GAAGJ,qBAAqB,GAAGM,MAAM;UAC5C;UAEA,IAAMC,SAAS,GAAGR,MAAM,CAACK,SAAS,CAAC;UAEnC,IAAIG,SAAS,EAAE;YACbV,KAAK,CAACW,cAAc,EAAE;YACtBD,SAAS,CAACE,KAAK,EAAE;UACnB;UAEA;QACF;MACA;AACN;AACA;AACA;AACA;MACM,KAAK,WAAW;QAAE;UAChB,IAAMV,OAAM,GAAGR,SAAS,EAAE;UAC1B,IAAMmB,gBAAgB,GAAGX,OAAM,CAACY,IAAI,CAAC,UAACT,EAAE;YAAA,OAAKf,QAAQ,CAACgB,aAAa,KAAKD,EAAE;UAAA,EAAC;UAE3E,IAAI,CAACQ,gBAAgB,IAAIA,gBAAgB,CAACE,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,EAAE;YAClF;UACF;UAEA,IAAMC,kBAAkB,GAAGH,gBAAgB,CAACE,YAAY,CAAC,eAAe,CAAC;UACzE,IAAI,CAACC,kBAAkB,EAAE;YACvB;UACF;;UAEA;UACA,IAAMC,gBAAgB,GAAG3B,QAAQ,CAAC4B,cAAc,CAACF,kBAAkB,CAAC;UACpE,IAAI,CAACC,gBAAgB,EAAE;YACrB;UACF;UAEAjB,KAAK,CAACW,cAAc,EAAE;UACtBM,gBAAgB,CAACL,KAAK,EAAE;UAExB;QACF;MACA,KAAK,OAAO;MACZ,KAAK,OAAO;QAAE;UACZ,IAAMV,QAAM,GAAGR,SAAS,EAAE;UAC1B,IAAMmB,iBAAgB,GAAGX,QAAM,CAACY,IAAI,CAAC,UAACT,EAAE;YAAA,OAAKf,QAAQ,CAACgB,aAAa,KAAKD,EAAE;UAAA,EAAC;UAC3E,IAAIQ,iBAAgB,EAAE;YACpBA,iBAAgB,CAACM,KAAK,EAAE;UAC1B;QACF;IAAC;EAEL,CAAC;EAEDjD,sBAAsB,CAACoB,QAAQ,EAAE,SAAS,EAAES,qBAAqB,EAAE;IACjEqB,OAAO,EAAE;EACX,CAAC,CAAC;EAEF,oBACE,wCACMhC,SAAS;IACb,GAAG,EAAEH,UAAW;IAChB,SAAS,EAAEhB,UAAU,aAEnBoB,QAAQ,KAAKf,QAAQ,CAAC+C,KAAK,qBAAyB,EACpDvC,QAAQ,wBAA4B,EACpCP,cAAc,CAACM,IAAI,CAAC,EACpBK,SAAS,CACT;IACF,IAAI,EAAEC;EAAK,iBAEX;IAAK,SAAS,gBAAqB;IAAC,GAAG,EAAEK;EAAQ,gBAC/C,oBAAC,eAAe,CAAC,QAAQ;IAAC,KAAK,EAAE;MAAEX,IAAI,EAAJA,IAAI;MAAEC,QAAQ,EAARA;IAAS;EAAE,GAAEE,QAAQ,CAA4B,CACtF,CACF;AAEV,CAAC"}

package/dist/components/TabsItem/TabsItem.js

@@ -1,15 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["before", "children", "status", "after", "selected", "className", "role", "tabIndex"];
 import * as React from 'react';
-import { Tappable } from '../Tappable/Tappable';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { SizeType } from '../../lib/adaptivity';
+import { warnOnce } from '../../lib/warnOnce';
 import { TabsModeContext } from '../Tabs/Tabs';
+import { Tappable } from '../Tappable/Tappable';
 import { Headline } from '../Typography/Headline/Headline';
 import { Subhead } from '../Typography/Subhead/Subhead';
-import { getSizeYClassName } from '../../helpers/getSizeYClassName';
-import { warnOnce } from '../../lib/warnOnce';
+var sizeYClassNames = _defineProperty({
+  none: "vkuiTabsItem--sizeY-none"
+}, SizeType.COMPACT, "vkuiTabsItem--sizeY-compact");
 var warn = warnOnce('TabsItem');
 
 /**
@@ -28,7 +32,8 @@ export var TabsItem = function TabsItem(_ref) {
     tabIndexProp = _ref.tabIndex,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useAdaptivity = useAdaptivity(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var _React$useContext = React.useContext(TabsModeContext),
     mode = _React$useContext.mode,
     withGaps = _React$useContext.withGaps;
@@ -55,7 +60,7 @@ export var TabsItem = function TabsItem(_ref) {
     tabIndex = selected ? 0 : -1;
   }
   return /*#__PURE__*/React.createElement(Tappable, _extends({}, restProps, {
-    className: classNames("vkuiTabsItem", mode && styles["TabsItem--mode-".concat(mode)], selected && "vkuiTabsItem--selected", getSizeYClassName("vkuiTabsItem", sizeY), withGaps && "vkuiTabsItem--withGaps", className),
+    className: classNames("vkuiTabsItem", mode && styles["TabsItem--mode-".concat(mode)], selected && "vkuiTabsItem--selected", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], withGaps && "vkuiTabsItem--withGaps", className),
     hoverMode: "vkuiTabsItem--hover",
     activeMode: "vkuiTabsItem--active",
     focusVisibleMode: "inside",

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

@@ -1 +1 @@
-{"version":3,"file":"TabsItem.js","names":["React","Tappable","classNames","useAdaptivity","TabsModeContext","Headline","Subhead","getSizeYClassName","warnOnce","warn","TabsItem","before","children","status","after","selected","className","role","tabIndexProp","tabIndex","restProps","sizeY","useContext","mode","withGaps","statusComponent","isTabFlow","process","env","NODE_ENV","undefined","styles"],"sources":["../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Tappable } from '../Tappable/Tappable';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { TabsModeContext, TabsContextProps } from '../Tabs/Tabs';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { warnOnce } from '../../lib/warnOnce';\nimport styles from './TabsItem.module.css';\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (status) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n          weight=\"2\"\n        >\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>{status}</span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['TabsItem'],\n        mode && styles[`TabsItem--mode-${mode}`],\n        selected && styles['TabsItem--selected'],\n        getSizeYClassName(styles['TabsItem'], sizeY),\n        withGaps && styles['TabsItem--withGaps'],\n        className,\n      )}\n      hoverMode={styles['TabsItem--hover']}\n      activeMode={styles['TabsItem--active']}\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"TabsItem.js","names":["React","classNames","useAdaptivity","SizeType","warnOnce","TabsModeContext","Tappable","Headline","Subhead","sizeYClassNames","none","COMPACT","warn","TabsItem","before","children","status","after","selected","className","role","tabIndexProp","tabIndex","restProps","sizeY","useContext","mode","withGaps","statusComponent","isTabFlow","process","env","NODE_ENV","undefined","styles","REGULAR"],"sources":["../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles['TabsItem--sizeY-none'],\n  [SizeType.COMPACT]: styles['TabsItem--sizeY-compact'],\n};\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (status) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n          weight=\"2\"\n        >\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>{status}</span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['TabsItem'],\n        mode && styles[`TabsItem--mode-${mode}`],\n        selected && styles['TabsItem--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        className,\n      )}\n      hoverMode={styles['TabsItem--hover']}\n      activeMode={styles['TabsItem--active']}\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAA2BC,eAAe,QAAQ,cAAc;AAChE,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,OAAO,QAAQ,+BAA+B;AAGvD,IAAMC,eAAe;EACnBC,IAAI;AAAgC,GACnCP,QAAQ,CAACQ,OAAO,gCAClB;AA4BD,IAAMC,IAAI,GAAGR,QAAQ,CAAC,UAAU,CAAC;;AAEjC;AACA;AACA;AACA,OAAO,IAAMS,QAAQ,GAAG,SAAXA,QAAQ,OAUA;EAAA,IATnBC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IAAA,qBACLC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,SAAS,QAATA,SAAS;IAAA,iBACTC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACFC,YAAY,QAAtBC,QAAQ;IACLC,SAAS;EAEZ,qBAA2BrB,aAAa,EAAE;IAAA,sCAAlCsB,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB,wBAA6CxB,KAAK,CAACyB,UAAU,CAACpB,eAAe,CAAC;IAAtEqB,IAAI,qBAAJA,IAAI;IAAEC,QAAQ,qBAARA,QAAQ;EACtB,IAAIC,eAAe,GAAG,IAAI;EAE1B,IAAMC,SAAS,GAAGT,IAAI,KAAK,KAAK;EAEhC,IAAIJ,MAAM,EAAE;IACVY,eAAe,GACb,OAAOZ,MAAM,KAAK,QAAQ,gBACxB,oBAAC,OAAO;MACN,SAAS,EAAC,MAAM;MAChB,SAAS,EAAEf,UAAU,uDAAgE;MACrF,MAAM,EAAC;IAAG,GAETe,MAAM,CACC,gBAEV;MAAM,SAAS;IAA6B,GAAEA,MAAM,CACrD;EACL;EAEA,IAAIc,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,IAAIH,SAAS,EAAE;IACvD,IAAI,CAACN,SAAS,CAAC,eAAe,CAAC,EAAE;MAC/BX,IAAI,iNAAyD,MAAM,CAAC;IACtE,CAAC,MAAM,IAAI,CAACW,SAAS,CAAC,IAAI,CAAC,EAAE;MAC3BX,IAAI,sXAEF,MAAM,CACP;IACH;EACF;EAEA,IAAIU,QAAQ,GAAGD,YAAY;EAC3B,IAAIQ,SAAS,IAAIP,QAAQ,KAAKW,SAAS,EAAE;IACvCX,QAAQ,GAAGJ,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC;EAC9B;EAEA,oBACE,oBAAC,QAAQ,eACHK,SAAS;IACb,SAAS,EAAEtB,UAAU,iBAEnByB,IAAI,IAAIQ,MAAM,0BAAmBR,IAAI,EAAG,EACxCR,QAAQ,4BAAgC,EACxCM,KAAK,KAAKrB,QAAQ,CAACgC,OAAO,IAAI1B,eAAe,CAACe,KAAK,CAAC,EACpDG,QAAQ,4BAAgC,EACxCR,SAAS,CACT;IACF,SAAS,uBAA4B;IACrC,UAAU,wBAA6B;IACvC,gBAAgB,EAAC,QAAQ;IACzB,SAAS,EAAE,KAAM;IACjB,IAAI,EAAEC,IAAK;IACX,iBAAeF,QAAS;IACxB,QAAQ,EAAEI;EAAS,IAElBR,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,eACrE,oBAAC,QAAQ;IACP,SAAS,EAAC,MAAM;IAChB,SAAS,uBAA4B;IACrC,KAAK,EAAEY,IAAI,KAAK,SAAS,GAAG,GAAG,GAAG,GAAI;IACtC,MAAM,EAAC;EAAG,GAETX,QAAQ,CACA,EACVa,eAAe,EACfX,KAAK,iBAAI;IAAK,SAAS;EAA4B,GAAEA,KAAK,CAAO,EACjES,IAAI,KAAK,SAAS,iBACjB;IAAK,SAAS,2BAAgC;IAAC,mBAAW;IAAC,iBAAeR;EAAS,EACpF,CACQ;AAEf,CAAC;AAAC;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { TouchProps } from '../Touch/Touch';
 import { AnchorHTMLAttributesOnly, HasComponent, HasRootRef } from '../../types';
 import { FocusVisibleMode } from '../FocusVisible/FocusVisible';
+import { TouchProps } from '../Touch/Touch';
 declare type StateMode = 'opacity' | 'background';
 export declare type TappableElementProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onTouchStart' | 'onTouchMove' | 'onTouchEnd' | 'onTouchCancel' | 'onMouseDown' | 'onMouseMove' | 'onMouseUp' | 'onMouseLeave'> & AnchorHTMLAttributesOnly;
 export interface TappableProps extends TappableElementProps, HasRootRef<HTMLElement>, HasComponent, Pick<TouchProps, 'onStart' | 'onEnd' | 'onMove'> {

package/dist/components/Tappable/Tappable.js

@@ -4,25 +4,25 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["children", "Component", "onClick", "onKeyDown", "activeEffectDelay", "stopPropagation", "getRootRef", "hasHover", "hoverMode", "hasActive", "activeMode", "focusVisibleMode", "onEnter", "onLeave", "className"];
 import * as React from 'react';
-import mitt from 'mitt';
 import { classNames, noop } from '@vkontakte/vkjs';
-import { Touch } from '../Touch/Touch';
-import TouchRootContext from '../Touch/TouchContext';
-import { Platform } from '../../lib/platform';
+import mitt from 'mitt';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';
+import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
+import { useBooleanState } from '../../hooks/useBooleanState';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useFocusVisible } from '../../hooks/useFocusVisible';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useTimeout } from '../../hooks/useTimeout';
+import { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';
+import { callMultiple } from '../../lib/callMultiple';
 import { getOffsetRect } from '../../lib/offset';
+import { Platform } from '../../lib/platform';
 import { coordX, coordY } from '../../lib/touch';
-import { shouldTriggerClickOnEnterOrSpace } from '../../lib/accessibility';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { FocusVisible } from '../FocusVisible/FocusVisible';
-import { useTimeout } from '../../hooks/useTimeout';
-import { useExternRef } from '../../hooks/useExternRef';
-import { usePlatform } from '../../hooks/usePlatform';
-import { useFocusVisible } from '../../hooks/useFocusVisible';
-import { callMultiple } from '../../lib/callMultiple';
-import { useBooleanState } from '../../hooks/useBooleanState';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useAdaptivityHasHover } from '../../hooks/useAdaptivityHasHover';
-import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
+import { Touch } from '../Touch/Touch';
+import TouchRootContext from '../Touch/TouchContext';
 var sizeXClassNames = {
   none: "vkuiTappable--sizeX-none",
   compact: "vkuiTappable--sizeX-compact",

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

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

package/dist/components/TextTooltip/TextTooltip.js

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "text", "header", "appearance", "className"];
 import * as React from 'react';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { HoverPopper } from '../HoverPopper/HoverPopper';
 import { Subhead } from '../Typography/Subhead/Subhead';
-import { classNames, hasReactNode } from '@vkontakte/vkjs';
 /**
  * @see https://vkcom.github.io/VKUI/#/TextTooltip
  */

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

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

package/dist/components/Textarea/Textarea.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { FormFieldProps } from '../FormField/FormField';
 import { HasRef, HasRootRef } from '../../types';
+import { FormFieldProps } from '../FormField/FormField';
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, HasRef<HTMLTextAreaElement>, HasRootRef<HTMLElement>, Pick<React.CSSProperties, 'maxHeight'>, Pick<FormFieldProps, 'status'> {
     grow?: boolean;
     onResize?(el: HTMLTextAreaElement): void;

package/dist/components/Textarea/Textarea.js

@@ -1,14 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["defaultValue", "grow", "style", "onResize", "className", "getRootRef", "getRef", "rows", "maxHeight", "status", "onChange", "value"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { FormField } from '../FormField/FormField';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useEnsuredControl } from '../../hooks/useEnsuredControl';
 import { useExternRef } from '../../hooks/useExternRef';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { getSizeYClassName } from '../../helpers/getSizeYClassName';
+import { SizeType } from '../../lib/adaptivity';
+import { FormField } from '../FormField/FormField';
+var sizeYClassNames = _defineProperty({
+  none: "vkuiTextarea--sizeY-none"
+}, SizeType.COMPACT, "vkuiTextarea--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/Textarea
  */
@@ -40,7 +44,8 @@ export var Textarea = function Textarea(_ref) {
   var currentScrollHeight = React.useRef();
   var elementRef = useExternRef(getRef);
   var _useAdaptivity = useAdaptivity(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
 
   // autosize input
   React.useEffect(function () {
@@ -55,7 +60,7 @@ export var Textarea = function Textarea(_ref) {
     }
   }, [grow, value, sizeY, elementRef, onResize]);
   return /*#__PURE__*/React.createElement(FormField, {
-    className: classNames("vkuiTextarea", getSizeYClassName("vkuiTextarea", sizeY), className),
+    className: classNames("vkuiTextarea", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
     style: style,
     getRootRef: getRootRef,
     disabled: restProps.disabled,

package/dist/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["React","classNames","FormField","useEnsuredControl","useExternRef","useAdaptivity","getSizeYClassName","Textarea","defaultValue","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChangeProp","onChange","valueProp","value","restProps","currentScrollHeight","useRef","elementRef","sizeY","useEffect","el","current","offsetParent","height","scrollHeight","disabled"],"sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { HasRef, HasRootRef } from '../../types';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './Textarea.module.css';\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HasRef<HTMLTextAreaElement>,\n    HasRootRef<HTMLElement>,\n    Pick<React.CSSProperties, 'maxHeight'>,\n    Pick<FormFieldProps, 'status'> {\n  grow?: boolean;\n  onResize?(el: HTMLTextAreaElement): void;\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Textarea\n */\nexport const Textarea = ({\n  defaultValue = '',\n  grow = true,\n  style,\n  onResize,\n  className,\n  getRootRef,\n  getRef,\n  rows = 2,\n  maxHeight,\n  status,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: TextareaProps) => {\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const currentScrollHeight = React.useRef<number>();\n  const elementRef = useExternRef(getRef);\n  const { sizeY } = useAdaptivity();\n\n  // autosize input\n  React.useEffect(() => {\n    const el = elementRef.current;\n\n    if (grow && el?.offsetParent) {\n      el.style.height = '';\n      el.style.height = `${el.scrollHeight}px`;\n\n      if (el.scrollHeight !== currentScrollHeight.current && onResize) {\n        onResize(el);\n        currentScrollHeight.current = el.scrollHeight;\n      }\n    }\n  }, [grow, value, sizeY, elementRef, onResize]);\n\n  return (\n    <FormField\n      className={classNames(\n        styles['Textarea'],\n        getSizeYClassName(styles['Textarea'], sizeY),\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n      status={status}\n    >\n      <textarea\n        {...restProps}\n        style={{ maxHeight }}\n        rows={rows}\n        className={styles['Textarea__el']}\n        value={value}\n        onChange={onChange}\n        ref={elementRef}\n      />\n    </FormField>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,SAAS,QAAwB,wBAAwB;AAElE,SAASC,iBAAiB,QAAQ,+BAA+B;AACjE,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,iBAAiB,QAAQ,iCAAiC;AAcnE;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAcA;EAAA,6BAbnBC,YAAY;IAAZA,YAAY,kCAAG,EAAE;IAAA,iBACjBC,IAAI;IAAJA,IAAI,0BAAG,IAAI;IACXC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IAAA,iBACNC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IACRC,SAAS,QAATA,SAAS;IACTC,MAAM,QAANA,MAAM;IACIC,YAAY,QAAtBC,QAAQ;IACDC,SAAS,QAAhBC,KAAK;IACFC,SAAS;EAEZ,yBAA0BnB,iBAAiB,CAAC;MAC1CK,YAAY,EAAZA,YAAY;MACZW,QAAQ,EAAED,YAAY;MACtBG,KAAK,EAAED;IACT,CAAC,CAAC;IAAA;IAJKC,KAAK;IAAEF,QAAQ;EAKtB,IAAMI,mBAAmB,GAAGvB,KAAK,CAACwB,MAAM,EAAU;EAClD,IAAMC,UAAU,GAAGrB,YAAY,CAACU,MAAM,CAAC;EACvC,qBAAkBT,aAAa,EAAE;IAAzBqB,KAAK,kBAALA,KAAK;;EAEb;EACA1B,KAAK,CAAC2B,SAAS,CAAC,YAAM;IACpB,IAAMC,EAAE,GAAGH,UAAU,CAACI,OAAO;IAE7B,IAAIpB,IAAI,IAAImB,EAAE,aAAFA,EAAE,eAAFA,EAAE,CAAEE,YAAY,EAAE;MAC5BF,EAAE,CAAClB,KAAK,CAACqB,MAAM,GAAG,EAAE;MACpBH,EAAE,CAAClB,KAAK,CAACqB,MAAM,aAAMH,EAAE,CAACI,YAAY,OAAI;MAExC,IAAIJ,EAAE,CAACI,YAAY,KAAKT,mBAAmB,CAACM,OAAO,IAAIlB,QAAQ,EAAE;QAC/DA,QAAQ,CAACiB,EAAE,CAAC;QACZL,mBAAmB,CAACM,OAAO,GAAGD,EAAE,CAACI,YAAY;MAC/C;IACF;EACF,CAAC,EAAE,CAACvB,IAAI,EAAEY,KAAK,EAAEK,KAAK,EAAED,UAAU,EAAEd,QAAQ,CAAC,CAAC;EAE9C,oBACE,oBAAC,SAAS;IACR,SAAS,EAAEV,UAAU,iBAEnBK,iBAAiB,iBAAqBoB,KAAK,CAAC,EAC5Cd,SAAS,CACT;IACF,KAAK,EAAEF,KAAM;IACb,UAAU,EAAEG,UAAW;IACvB,QAAQ,EAAES,SAAS,CAACW,QAAS;IAC7B,MAAM,EAAEhB;EAAO,gBAEf,6CACMK,SAAS;IACb,KAAK,EAAE;MAAEN,SAAS,EAATA;IAAU,CAAE;IACrB,IAAI,EAAED,IAAK;IACX,SAAS,oBAAyB;IAClC,KAAK,EAAEM,KAAM;IACb,QAAQ,EAAEF,QAAS;IACnB,GAAG,EAAEM;EAAW,GAChB,CACQ;AAEhB,CAAC"}
+{"version":3,"file":"Textarea.js","names":["React","classNames","useAdaptivity","useEnsuredControl","useExternRef","SizeType","FormField","sizeYClassNames","none","COMPACT","Textarea","defaultValue","grow","style","onResize","className","getRootRef","getRef","rows","maxHeight","status","onChangeProp","onChange","valueProp","value","restProps","currentScrollHeight","useRef","elementRef","sizeY","useEffect","el","current","offsetParent","height","scrollHeight","REGULAR","disabled"],"sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport styles from './Textarea.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Textarea--sizeY-none'],\n  [SizeType.COMPACT]: styles['Textarea--sizeY-compact'],\n};\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HasRef<HTMLTextAreaElement>,\n    HasRootRef<HTMLElement>,\n    Pick<React.CSSProperties, 'maxHeight'>,\n    Pick<FormFieldProps, 'status'> {\n  grow?: boolean;\n  onResize?(el: HTMLTextAreaElement): void;\n  defaultValue?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Textarea\n */\nexport const Textarea = ({\n  defaultValue = '',\n  grow = true,\n  style,\n  onResize,\n  className,\n  getRootRef,\n  getRef,\n  rows = 2,\n  maxHeight,\n  status,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: TextareaProps) => {\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const currentScrollHeight = React.useRef<number>();\n  const elementRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  // autosize input\n  React.useEffect(() => {\n    const el = elementRef.current;\n\n    if (grow && el?.offsetParent) {\n      el.style.height = '';\n      el.style.height = `${el.scrollHeight}px`;\n\n      if (el.scrollHeight !== currentScrollHeight.current && onResize) {\n        onResize(el);\n        currentScrollHeight.current = el.scrollHeight;\n      }\n    }\n  }, [grow, value, sizeY, elementRef, onResize]);\n\n  return (\n    <FormField\n      className={classNames(\n        styles['Textarea'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n      status={status}\n    >\n      <textarea\n        {...restProps}\n        style={{ maxHeight }}\n        rows={rows}\n        className={styles['Textarea__el']}\n        value={value}\n        onChange={onChange}\n        ref={elementRef}\n      />\n    </FormField>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,iBAAiB,QAAQ,+BAA+B;AACjE,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,QAAQ,QAAQ,sBAAsB;AAE/C,SAASC,SAAS,QAAwB,wBAAwB;AAGlE,IAAMC,eAAe;EACnBC,IAAI;AAAgC,GACnCH,QAAQ,CAACI,OAAO,gCAClB;AAaD;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAcA;EAAA,6BAbnBC,YAAY;IAAZA,YAAY,kCAAG,EAAE;IAAA,iBACjBC,IAAI;IAAJA,IAAI,0BAAG,IAAI;IACXC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IAAA,iBACNC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IACRC,SAAS,QAATA,SAAS;IACTC,MAAM,QAANA,MAAM;IACIC,YAAY,QAAtBC,QAAQ;IACDC,SAAS,QAAhBC,KAAK;IACFC,SAAS;EAEZ,yBAA0BtB,iBAAiB,CAAC;MAC1CQ,YAAY,EAAZA,YAAY;MACZW,QAAQ,EAAED,YAAY;MACtBG,KAAK,EAAED;IACT,CAAC,CAAC;IAAA;IAJKC,KAAK;IAAEF,QAAQ;EAKtB,IAAMI,mBAAmB,GAAG1B,KAAK,CAAC2B,MAAM,EAAU;EAClD,IAAMC,UAAU,GAAGxB,YAAY,CAACa,MAAM,CAAC;EACvC,qBAA2Bf,aAAa,EAAE;IAAA,sCAAlC2B,KAAK;IAALA,KAAK,qCAAG,MAAM;;EAEtB;EACA7B,KAAK,CAAC8B,SAAS,CAAC,YAAM;IACpB,IAAMC,EAAE,GAAGH,UAAU,CAACI,OAAO;IAE7B,IAAIpB,IAAI,IAAImB,EAAE,aAAFA,EAAE,eAAFA,EAAE,CAAEE,YAAY,EAAE;MAC5BF,EAAE,CAAClB,KAAK,CAACqB,MAAM,GAAG,EAAE;MACpBH,EAAE,CAAClB,KAAK,CAACqB,MAAM,aAAMH,EAAE,CAACI,YAAY,OAAI;MAExC,IAAIJ,EAAE,CAACI,YAAY,KAAKT,mBAAmB,CAACM,OAAO,IAAIlB,QAAQ,EAAE;QAC/DA,QAAQ,CAACiB,EAAE,CAAC;QACZL,mBAAmB,CAACM,OAAO,GAAGD,EAAE,CAACI,YAAY;MAC/C;IACF;EACF,CAAC,EAAE,CAACvB,IAAI,EAAEY,KAAK,EAAEK,KAAK,EAAED,UAAU,EAAEd,QAAQ,CAAC,CAAC;EAE9C,oBACE,oBAAC,SAAS;IACR,SAAS,EAAEb,UAAU,iBAEnB4B,KAAK,KAAKxB,QAAQ,CAAC+B,OAAO,IAAI7B,eAAe,CAACsB,KAAK,CAAC,EACpDd,SAAS,CACT;IACF,KAAK,EAAEF,KAAM;IACb,UAAU,EAAEG,UAAW;IACvB,QAAQ,EAAES,SAAS,CAACY,QAAS;IAC7B,MAAM,EAAEjB;EAAO,gBAEf,6CACMK,SAAS;IACb,KAAK,EAAE;MAAEN,SAAS,EAATA;IAAU,CAAE;IACrB,IAAI,EAAED,IAAK;IACX,SAAS,oBAAyB;IAClC,KAAK,EAAEM,KAAM;IACb,QAAQ,EAAEF,QAAS;IACnB,GAAG,EAAEM;EAAW,GAChB,CACQ;AAEhB,CAAC"}

package/dist/components/Tooltip/Tooltip.js

@@ -7,15 +7,15 @@ var _excluded = ["children", "isShown", "offsetX", "offsetY", "alignX", "alignY"
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { Subhead } from '../Typography/Subhead/Subhead';
-import { useNavTransition } from '../NavTransitionContext/NavTransitionContext';
-import { PopperArrow } from '../PopperArrow/PopperArrow';
-import { useFloating, checkIsNotAutoPlacement, convertFloatingDataToReactCSSProperties, offsetMiddleware, shiftMiddleware, flipMiddleware, arrowMiddleware, autoUpdateFloatingElement, getAutoPlacementAlign, autoPlacementMiddleware } from '../../lib/floating';
-import { tooltipContainerAttr } from './TooltipContainer';
 import { useExternRef } from '../../hooks/useExternRef';
+import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { useDOM } from '../../lib/dom';
+import { arrowMiddleware, autoPlacementMiddleware, autoUpdateFloatingElement, checkIsNotAutoPlacement, convertFloatingDataToReactCSSProperties, flipMiddleware, getAutoPlacementAlign, offsetMiddleware, shiftMiddleware, useFloating } from '../../lib/floating';
 import { warnOnce } from '../../lib/warnOnce';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { useNavTransition } from '../NavTransitionContext/NavTransitionContext';
+import { PopperArrow } from '../PopperArrow/PopperArrow';
+import { Subhead } from '../Typography/Subhead/Subhead';
+import { tooltipContainerAttr } from './TooltipContainer';
 var isDOMTypeElement = function isDOMTypeElement(element) {
   return /*#__PURE__*/React.isValidElement(element) && typeof element.type === 'string';
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["React","ReactDOM","classNames","hasReactNode","Subhead","useNavTransition","PopperArrow","useFloating","checkIsNotAutoPlacement","convertFloatingDataToReactCSSProperties","offsetMiddleware","shiftMiddleware","flipMiddleware","arrowMiddleware","autoUpdateFloatingElement","getAutoPlacementAlign","autoPlacementMiddleware","tooltipContainerAttr","useExternRef","useDOM","warnOnce","useGlobalEventListener","isDOMTypeElement","element","isValidElement","type","warn","stylesAppearance","accent","neutral","white","black","inversion","mapAlignX","x","getDefaultPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","Tooltip","children","isShown","isShownProp","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","appearance","arrow","placementProp","text","header","className","restProps","arrowRef","useRef","useState","target","setTarget","tooltipContainer","useMemo","closest","entering","isNotAutoPlacement","process","env","NODE_ENV","multiChildren","Children","count","primitiveChild","JSON","stringify","Boolean","floatingPositionStrategy","style","position","Error","memoizedMiddlewares","middlewares","crossAxis","mainAxis","push","alignment","padding","name","fn","middlewareData","Promise","resolve","undefined","y","strategy","middleware","whileElementsMounted","floatingDataX","floatingDataY","resolvedPlacement","refs","arrowCoords","document","capture","passive","childRef","ref","props","getRootRef","patchedRef","setReference","child","cloneElement","createPortal","setFloating"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { useNavTransition } from '../NavTransitionContext/NavTransitionContext';\nimport { PopperArrow } from '../PopperArrow/PopperArrow';\nimport {\n  type Placement,\n  type PlacementWithAuto,\n  type UseFloatingMiddleware,\n  useFloating,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  offsetMiddleware,\n  shiftMiddleware,\n  flipMiddleware,\n  arrowMiddleware,\n  autoUpdateFloatingElement,\n  getAutoPlacementAlign,\n  autoPlacementMiddleware,\n} from '../../lib/floating';\nimport { tooltipContainerAttr } from './TooltipContainer';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { HasRootRef } from '../../types';\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\nconst stylesAppearance = {\n  accent: styles['Tooltip--appearance-accent'],\n  neutral: styles['Tooltip--appearance-neutral'],\n  white: styles['Tooltip--appearance-white'],\n  black: styles['Tooltip--appearance-black'],\n  inversion: styles['Tooltip--appearance-inversion'],\n};\n\nexport interface TooltipProps {\n  /**\n   * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает\n   * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,\n   * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.\n   */\n  children: React.ReactElement<HasRootRef<any>> | React.ReactElement;\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n  /**\n   * Если передан `false`, то рисуется просто `children`.\n   */\n  isShown?: boolean;\n  /**\n   * Текст тултипа.\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа.\n   */\n  header?: React.ReactNode;\n  /**\n   * Положение по горизонтали (прижатие к левому или правому краю `children`).\n   * Если не задано, позиция по горизонтали определятся автоматически\n   */\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  cornerOffset?: number;\n  /**\n   * Сдвиг стрелочки относительно ширины тултипа\n   */\n  cornerAbsoluteOffset?: number;\n  /**\n   * Callback, который вызывается при клике по любому месту в пределах экрана.\n   */\n  onClose?: () => void;\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Пользовательские css-классы, будут добавлены на root-элемент\n   */\n  className?: string;\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  appearance = 'accent',\n  arrow = true,\n  placement: placementProp,\n  text,\n  header,\n  className,\n  ...restProps\n}: TooltipProps) => {\n  const arrowRef = React.useRef<HTMLDivElement>(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: 14,\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  }, [arrow, cornerAbsoluteOffset, cornerOffset, offsetX, offsetY, placement, isNotAutoPlacement]);\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 { document } = useDOM();\n  useGlobalEventListener(document, 'click', isShown && onClose, {\n    capture: true,\n    passive: true,\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          <div\n            {...restProps}\n            className={classNames(styles['Tooltip'], stylesAppearance[appearance], className)}\n          >\n            <div\n              ref={refs.setFloating}\n              style={convertFloatingDataToReactCSSProperties(\n                floatingPositionStrategy,\n                floatingDataX,\n                floatingDataY,\n              )}\n            >\n              {arrow && (\n                <PopperArrow\n                  coords={arrowCoords}\n                  placement={resolvedPlacement}\n                  arrowClassName={styles['Tooltip__arrow']}\n                  getRootRef={arrowRef}\n                />\n              )}\n              <div className={styles['Tooltip__content']}>\n                {header && (\n                  <Subhead weight=\"2\" className={styles['Tooltip__title']}>\n                    {header}\n                  </Subhead>\n                )}\n                {text && <Subhead className={styles['Tooltip__text']}>{text}</Subhead>}\n              </div>\n            </div>\n          </div>,\n          tooltipContainer,\n        )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,QAAQ,MAAM,WAAW;AAChC,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,gBAAgB,QAAQ,8CAA8C;AAC/E,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAIEC,WAAW,EACXC,uBAAuB,EACvBC,uCAAuC,EACvCC,gBAAgB,EAChBC,eAAe,EACfC,cAAc,EACdC,eAAe,EACfC,yBAAyB,EACzBC,qBAAqB,EACrBC,uBAAuB,QAClB,oBAAoB;AAC3B,SAASC,oBAAoB,QAAQ,oBAAoB;AACzD,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,sBAAsB,QAAQ,oCAAoC;AAe3E,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAIpBC,OAA2B,EACK;EAChC,OAAO,aAAAvB,KAAK,CAACwB,cAAc,CAACD,OAAO,CAAC,IAAI,OAAOA,OAAO,CAACE,IAAI,KAAK,QAAQ;AAC1E,CAAC;AAED,IAAMC,IAAI,GAAGN,QAAQ,CAAC,SAAS,CAAC;AAEhC,IAAMO,gBAAgB,GAAG;EACvBC,MAAM,kCAAsC;EAC5CC,OAAO,mCAAuC;EAC9CC,KAAK,iCAAqC;EAC1CC,KAAK,iCAAqC;EAC1CC,SAAS;AACX,CAAC;AAqED,SAASC,SAAS,CAACC,CAAyB,EAAE;EAC5C,QAAQA,CAAC;IACP,KAAK,MAAM;MACT,OAAO,OAAO;IAChB,KAAK,OAAO;MACV,OAAO,KAAK;IACd;MACE,OAAO,EAAE;EAAC;AAEhB;AACA,SAASC,mBAAmB,CAC1BC,MAA8B,EAC9BC,MAA8B,EACnB;EACX,OAAO,CAACA,MAAM,IAAI,QAAQ,EAAEJ,SAAS,CAACG,MAAM,IAAI,MAAM,CAAC,CAAC,CACrDE,MAAM,CAAC,UAACC,CAAC;IAAA,OAAK,CAAC,CAACA,CAAC;EAAA,EAAC,CAClBC,IAAI,CAAC,GAAG,CAAC;AACd;AACA,SAASC,mBAAmB,CAACC,SAA4B,EAAE;EACzD,OAAOA,SAAS,CAACC,UAAU,CAAC,KAAK,CAAC,IAAID,SAAS,CAACC,UAAU,CAAC,QAAQ,CAAC;AACtE;;AAEA;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAO,OAiBA;EAAA,IAhBlBC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAEC,WAAW,6BAAG,IAAI;IAAA,oBAC3BC,OAAO;IAAPA,OAAO,6BAAG,CAAC;IAAA,oBACXC,OAAO;IAAPA,OAAO,6BAAG,EAAE;IACZb,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNa,OAAO,QAAPA,OAAO;IAAA,yBACPC,YAAY;IAAZA,YAAY,kCAAG,CAAC;IAChBC,oBAAoB,QAApBA,oBAAoB;IAAA,uBACpBC,UAAU;IAAVA,UAAU,gCAAG,QAAQ;IAAA,kBACrBC,KAAK;IAALA,KAAK,2BAAG,IAAI;IACDC,aAAa,QAAxBb,SAAS;IACTc,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG5D,KAAK,CAAC6D,MAAM,CAAiB,IAAI,CAAC;EACnD,sBAA4B7D,KAAK,CAAC8D,QAAQ,CAAqB,IAAI,CAAC;IAAA;IAA7DC,MAAM;IAAEC,SAAS;EACxB;EACA,IAAMC,gBAAgB,GAAGjE,KAAK,CAACkE,OAAO,CACpC;IAAA,OAAMH,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEI,OAAO,YAAqBlD,oBAAoB,OAAI;EAAA,GAClE,CAAC8C,MAAM,CAAC,CACT;EACD,wBAAqB1D,gBAAgB,EAAE;IAA/B+D,QAAQ,qBAARA,QAAQ;EAChB,IAAMtB,OAAO,GAAGC,WAAW,IAAIkB,gBAAgB,IAAI,CAACG,QAAQ;EAE5D,IAAM1B,SAAS,GAAGa,aAAa,IAAIpB,mBAAmB,CAACC,MAAM,EAAEC,MAAM,CAAC;EACtE,IAAMgC,kBAAkB,GAAG7D,uBAAuB,CAACkC,SAAS,CAAC;EAE7D,IAAI4B,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAMC,aAAa,GAAGzE,KAAK,CAAC0E,QAAQ,CAACC,KAAK,CAAC9B,QAAQ,CAAC,GAAG,CAAC;IACxD;IACA,IAAM+B,cAAc,GAAGzE,YAAY,CAAC0C,QAAQ,CAAC,IAAI,QAAOA,QAAQ,MAAK,QAAQ;IAC7E,CAAC4B,aAAa,IAAIG,cAAc,KAC9BlD,IAAI,CACF,CACE,sDAAsD,EACtD+C,aAAa,IAAI,WAAW,EAC5BG,cAAc,IAAIC,IAAI,CAACC,SAAS,CAACjC,QAAQ,CAAC,CAC3C,CACEP,MAAM,CAACyC,OAAO,CAAC,CACfvC,IAAI,CAAC,GAAG,CAAC,EACZ,OAAO,CACR;EACL;EAEA,IAAMwC,wBAAwB,GAAGhF,KAAK,CAACkE,OAAO,CAC5C;IAAA,OAAO,CAAAH,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEkB,KAAK,CAACC,QAAQ,MAAK,OAAO,GAAG,OAAO,GAAG,UAAU;EAAA,CAAC,EACjE,CAACnB,MAAM,CAAC,CACT;EAED,IAAIO,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,IAAIT,MAAM,IAAI,CAACE,gBAAgB,EAAE;IACzE,MAAM,IAAIkB,KAAK,CAAC,2DAA2D,CAAC;EAC9E;EAEA,IAAMC,mBAAmB,GAAGpF,KAAK,CAACkE,OAAO,CAAC,YAAM;IAC9C,IAAMmB,WAAoC,GAAG,CAC3C3E,gBAAgB,CAAC;MACf4E,SAAS,EAAEtC,OAAO;MAClBuC,QAAQ,EAAEtC;IACZ,CAAC,CAAC,CACH;;IAED;IACA,IAAIoB,kBAAkB,EAAE;MACtBgB,WAAW,CAACG,IAAI,CAAC5E,cAAc,EAAE,CAAC;IACpC,CAAC,MAAM;MACLyE,WAAW,CAACG,IAAI,CACdxE,uBAAuB,CAAC;QACtByE,SAAS,EAAE/C,SAAS,GAAG3B,qBAAqB,CAAC2B,SAAS,CAAC,GAAG;MAC5D,CAAC,CAAC,CACH;IACH;IAEA2C,WAAW,CAACG,IAAI,CAAC7E,eAAe,EAAE,CAAC;;IAEnC;IACA,IAAI2C,KAAK,EAAE;MACT+B,WAAW,CAACG,IAAI,CACd3E,eAAe,CAAC;QACdU,OAAO,EAAEqC,QAAQ;QACjB8B,OAAO,EAAE;MACX,CAAC,CAAC,CACH;MACDL,WAAW,CAACG,IAAI,CAAC;QACfG,IAAI,EAAE,aAAa;QACnBC,EAAE,qBAAgC;UAAA,IAA7BlD,SAAS,SAATA,SAAS;YAAEmD,cAAc,SAAdA,cAAc;UAC5B,IAAI,CAACA,cAAc,CAACvC,KAAK,EAAE;YACzB,OAAOwC,OAAO,CAACC,OAAO,CAAC,CAAC,CAAC,CAAC;UAC5B;UACA,IAAItD,mBAAmB,CAACC,SAAS,CAAC,EAAE;YAClC,IAAIU,oBAAoB,KAAK4C,SAAS,EAAE;cACtCH,cAAc,CAACvC,KAAK,CAACpB,CAAC,GAAGkB,oBAAoB;YAC/C,CAAC,MAAM,IAAIyC,cAAc,CAACvC,KAAK,CAACpB,CAAC,KAAK8D,SAAS,EAAE;cAC/CH,cAAc,CAACvC,KAAK,CAACpB,CAAC,IAAIiB,YAAY;YACxC;UACF,CAAC,MAAM;YACL,IAAIC,oBAAoB,KAAK4C,SAAS,EAAE;cACtCH,cAAc,CAACvC,KAAK,CAAC2C,CAAC,GAAG7C,oBAAoB;YAC/C,CAAC,MAAM,IAAIyC,cAAc,CAACvC,KAAK,CAAC2C,CAAC,KAAKD,SAAS,EAAE;cAC/CH,cAAc,CAACvC,KAAK,CAAC2C,CAAC,IAAI9C,YAAY;YACxC;UACF;UACA,OAAO2C,OAAO,CAACC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC5B;MACF,CAAC,CAAC;IACJ;IAEA,OAAOV,WAAW;EACpB,CAAC,EAAE,CAAC/B,KAAK,EAAEF,oBAAoB,EAAED,YAAY,EAAEH,OAAO,EAAEC,OAAO,EAAEP,SAAS,EAAE2B,kBAAkB,CAAC,CAAC;EAEhG,mBAMI9D,WAAW,CAAC;MACd2F,QAAQ,EAAElB,wBAAwB;MAClCtC,SAAS,EAAE2B,kBAAkB,GAAG3B,SAAS,GAAGsD,SAAS;MACrDG,UAAU,EAAEf,mBAAmB;MAC/BgB,oBAAoB,EAAEtF;IACxB,CAAC,CAAC;IAVGuF,aAAa,gBAAhBnE,CAAC;IACEoE,aAAa,gBAAhBL,CAAC;IACUM,iBAAiB,gBAA5B7D,SAAS;IACT8D,IAAI,gBAAJA,IAAI;IACqBC,WAAW,gBAApCZ,cAAc,CAAIvC,KAAK;EAQzB,cAAqBnC,MAAM,EAAE;IAArBuF,QAAQ,WAARA,QAAQ;EAChBrF,sBAAsB,CAACqF,QAAQ,EAAE,OAAO,EAAE5D,OAAO,IAAII,OAAO,EAAE;IAC5DyD,OAAO,EAAE,IAAI;IACbC,OAAO,EAAE;EACX,CAAC,CAAC;EAEF,IAAMC,QAAQ,GAAGvF,gBAAgB,CAAiDuB,QAAQ,CAAC,GACvFA,QAAQ,CAACiE,GAAG,GACZ,aAAA9G,KAAK,CAACwB,cAAc,CAA0BqB,QAAQ,CAAC,GACvDA,QAAQ,CAACkE,KAAK,CAACC,UAAU,GACzB,IAAI;EACR,IAAMC,UAAU,GAAG/F,YAAY,CAAc8C,SAAS,EAAEwC,IAAI,CAACU,YAAY,EAAEL,QAAQ,CAAC;EACpF,IAAMM,KAAK,GAAG,aAAAnH,KAAK,CAACwB,cAAc,CAACqB,QAAQ,CAAC,gBACxC7C,KAAK,CAACoH,YAAY,CAACvE,QAAQ,sBACxBvB,gBAAgB,CAACuB,QAAQ,CAAC,GAAG,KAAK,GAAG,YAAY,EAAGoE,UAAU,EAC/D,GACFpE,QAAQ;EAEZ,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZsE,KAAK,EACLrE,OAAO,IACNiB,MAAM,IAAI,IAAI,iBACd9D,QAAQ,CAACoH,YAAY,eACnB,wCACM1D,SAAS;IACb,SAAS,EAAEzD,UAAU,gBAAoByB,gBAAgB,CAAC0B,UAAU,CAAC,EAAEK,SAAS;EAAE,iBAElF;IACE,GAAG,EAAE8C,IAAI,CAACc,WAAY;IACtB,KAAK,EAAE7G,uCAAuC,CAC5CuE,wBAAwB,EACxBqB,aAAa,EACbC,aAAa;EACb,GAEDhD,KAAK,iBACJ,oBAAC,WAAW;IACV,MAAM,EAAEmD,WAAY;IACpB,SAAS,EAAEF,iBAAkB;IAC7B,cAAc,sBAA2B;IACzC,UAAU,EAAE3C;EAAS,EAExB,eACD;IAAK,SAAS;EAA6B,GACxCH,MAAM,iBACL,oBAAC,OAAO;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAA2B,GACrDA,MAAM,CAEV,EACAD,IAAI,iBAAI,oBAAC,OAAO;IAAC,SAAS;EAA0B,GAAEA,IAAI,CAAW,CAClE,CACF,CACF,EACNS,gBAAgB,CACjB,CACY;AAErB,CAAC"}
+{"version":3,"file":"Tooltip.js","names":["React","ReactDOM","classNames","hasReactNode","useExternRef","useGlobalEventListener","useDOM","arrowMiddleware","autoPlacementMiddleware","autoUpdateFloatingElement","checkIsNotAutoPlacement","convertFloatingDataToReactCSSProperties","flipMiddleware","getAutoPlacementAlign","offsetMiddleware","shiftMiddleware","useFloating","warnOnce","useNavTransition","PopperArrow","Subhead","tooltipContainerAttr","isDOMTypeElement","element","isValidElement","type","warn","stylesAppearance","accent","neutral","white","black","inversion","mapAlignX","x","getDefaultPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","Tooltip","children","isShown","isShownProp","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","appearance","arrow","placementProp","text","header","className","restProps","arrowRef","useRef","useState","target","setTarget","tooltipContainer","useMemo","closest","entering","isNotAutoPlacement","process","env","NODE_ENV","multiChildren","Children","count","primitiveChild","JSON","stringify","Boolean","floatingPositionStrategy","style","position","Error","memoizedMiddlewares","middlewares","crossAxis","mainAxis","push","alignment","padding","name","fn","middlewareData","Promise","resolve","undefined","y","strategy","middleware","whileElementsMounted","floatingDataX","floatingDataY","resolvedPlacement","refs","arrowCoords","document","capture","passive","childRef","ref","props","getRootRef","patchedRef","setReference","child","cloneElement","createPortal","setFloating"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\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 { PopperArrow } from '../PopperArrow/PopperArrow';\nimport { Subhead } from '../Typography/Subhead/Subhead';\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\nconst stylesAppearance = {\n  accent: styles['Tooltip--appearance-accent'],\n  neutral: styles['Tooltip--appearance-neutral'],\n  white: styles['Tooltip--appearance-white'],\n  black: styles['Tooltip--appearance-black'],\n  inversion: styles['Tooltip--appearance-inversion'],\n};\n\nexport interface TooltipProps {\n  /**\n   * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает\n   * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,\n   * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.\n   */\n  children: React.ReactElement<HasRootRef<any>> | React.ReactElement;\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n  /**\n   * Если передан `false`, то рисуется просто `children`.\n   */\n  isShown?: boolean;\n  /**\n   * Текст тултипа.\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа.\n   */\n  header?: React.ReactNode;\n  /**\n   * Положение по горизонтали (прижатие к левому или правому краю `children`).\n   * Если не задано, позиция по горизонтали определятся автоматически\n   */\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  cornerOffset?: number;\n  /**\n   * Сдвиг стрелочки относительно ширины тултипа\n   */\n  cornerAbsoluteOffset?: number;\n  /**\n   * Callback, который вызывается при клике по любому месту в пределах экрана.\n   */\n  onClose?: () => void;\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Пользовательские css-классы, будут добавлены на root-элемент\n   */\n  className?: string;\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  appearance = 'accent',\n  arrow = true,\n  placement: placementProp,\n  text,\n  header,\n  className,\n  ...restProps\n}: TooltipProps) => {\n  const arrowRef = React.useRef<HTMLDivElement>(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: 14,\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  }, [arrow, cornerAbsoluteOffset, cornerOffset, offsetX, offsetY, placement, isNotAutoPlacement]);\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 { document } = useDOM();\n  useGlobalEventListener(document, 'click', isShown && onClose, {\n    capture: true,\n    passive: true,\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          <div\n            {...restProps}\n            className={classNames(styles['Tooltip'], stylesAppearance[appearance], className)}\n          >\n            <div\n              ref={refs.setFloating}\n              style={convertFloatingDataToReactCSSProperties(\n                floatingPositionStrategy,\n                floatingDataX,\n                floatingDataY,\n              )}\n            >\n              {arrow && (\n                <PopperArrow\n                  coords={arrowCoords}\n                  placement={resolvedPlacement}\n                  arrowClassName={styles['Tooltip__arrow']}\n                  getRootRef={arrowRef}\n                />\n              )}\n              <div className={styles['Tooltip__content']}>\n                {header && (\n                  <Subhead weight=\"2\" className={styles['Tooltip__title']}>\n                    {header}\n                  </Subhead>\n                )}\n                {text && <Subhead className={styles['Tooltip__text']}>{text}</Subhead>}\n              </div>\n            </div>\n          </div>,\n          tooltipContainer,\n        )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,QAAQ,MAAM,WAAW;AAChC,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,sBAAsB,QAAQ,oCAAoC;AAC3E,SAASC,MAAM,QAAQ,eAAe;AACtC,SACEC,eAAe,EACfC,uBAAuB,EACvBC,yBAAyB,EACzBC,uBAAuB,EACvBC,uCAAuC,EACvCC,cAAc,EACdC,qBAAqB,EACrBC,gBAAgB,EAGhBC,eAAe,EACfC,WAAW,QAEN,oBAAoB;AAC3B,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,gBAAgB,QAAQ,8CAA8C;AAC/E,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,oBAAoB,QAAQ,oBAAoB;AAczD,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAIpBC,OAA2B,EACK;EAChC,OAAO,aAAAvB,KAAK,CAACwB,cAAc,CAACD,OAAO,CAAC,IAAI,OAAOA,OAAO,CAACE,IAAI,KAAK,QAAQ;AAC1E,CAAC;AAED,IAAMC,IAAI,GAAGT,QAAQ,CAAC,SAAS,CAAC;AAEhC,IAAMU,gBAAgB,GAAG;EACvBC,MAAM,kCAAsC;EAC5CC,OAAO,mCAAuC;EAC9CC,KAAK,iCAAqC;EAC1CC,KAAK,iCAAqC;EAC1CC,SAAS;AACX,CAAC;AAqED,SAASC,SAAS,CAACC,CAAyB,EAAE;EAC5C,QAAQA,CAAC;IACP,KAAK,MAAM;MACT,OAAO,OAAO;IAChB,KAAK,OAAO;MACV,OAAO,KAAK;IACd;MACE,OAAO,EAAE;EAAC;AAEhB;AACA,SAASC,mBAAmB,CAC1BC,MAA8B,EAC9BC,MAA8B,EACnB;EACX,OAAO,CAACA,MAAM,IAAI,QAAQ,EAAEJ,SAAS,CAACG,MAAM,IAAI,MAAM,CAAC,CAAC,CACrDE,MAAM,CAAC,UAACC,CAAC;IAAA,OAAK,CAAC,CAACA,CAAC;EAAA,EAAC,CAClBC,IAAI,CAAC,GAAG,CAAC;AACd;AACA,SAASC,mBAAmB,CAACC,SAA4B,EAAE;EACzD,OAAOA,SAAS,CAACC,UAAU,CAAC,KAAK,CAAC,IAAID,SAAS,CAACC,UAAU,CAAC,QAAQ,CAAC;AACtE;;AAEA;AACA;AACA;AACA,OAAO,IAAMC,OAAO,GAAG,SAAVA,OAAO,OAiBA;EAAA,IAhBlBC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAEC,WAAW,6BAAG,IAAI;IAAA,oBAC3BC,OAAO;IAAPA,OAAO,6BAAG,CAAC;IAAA,oBACXC,OAAO;IAAPA,OAAO,6BAAG,EAAE;IACZb,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNa,OAAO,QAAPA,OAAO;IAAA,yBACPC,YAAY;IAAZA,YAAY,kCAAG,CAAC;IAChBC,oBAAoB,QAApBA,oBAAoB;IAAA,uBACpBC,UAAU;IAAVA,UAAU,gCAAG,QAAQ;IAAA,kBACrBC,KAAK;IAALA,KAAK,2BAAG,IAAI;IACDC,aAAa,QAAxBb,SAAS;IACTc,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG5D,KAAK,CAAC6D,MAAM,CAAiB,IAAI,CAAC;EACnD,sBAA4B7D,KAAK,CAAC8D,QAAQ,CAAqB,IAAI,CAAC;IAAA;IAA7DC,MAAM;IAAEC,SAAS;EACxB;EACA,IAAMC,gBAAgB,GAAGjE,KAAK,CAACkE,OAAO,CACpC;IAAA,OAAMH,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEI,OAAO,YAAqB9C,oBAAoB,OAAI;EAAA,GAClE,CAAC0C,MAAM,CAAC,CACT;EACD,wBAAqB7C,gBAAgB,EAAE;IAA/BkD,QAAQ,qBAARA,QAAQ;EAChB,IAAMtB,OAAO,GAAGC,WAAW,IAAIkB,gBAAgB,IAAI,CAACG,QAAQ;EAE5D,IAAM1B,SAAS,GAAGa,aAAa,IAAIpB,mBAAmB,CAACC,MAAM,EAAEC,MAAM,CAAC;EACtE,IAAMgC,kBAAkB,GAAG3D,uBAAuB,CAACgC,SAAS,CAAC;EAE7D,IAAI4B,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAMC,aAAa,GAAGzE,KAAK,CAAC0E,QAAQ,CAACC,KAAK,CAAC9B,QAAQ,CAAC,GAAG,CAAC;IACxD;IACA,IAAM+B,cAAc,GAAGzE,YAAY,CAAC0C,QAAQ,CAAC,IAAI,QAAOA,QAAQ,MAAK,QAAQ;IAC7E,CAAC4B,aAAa,IAAIG,cAAc,KAC9BlD,IAAI,CACF,CACE,sDAAsD,EACtD+C,aAAa,IAAI,WAAW,EAC5BG,cAAc,IAAIC,IAAI,CAACC,SAAS,CAACjC,QAAQ,CAAC,CAC3C,CACEP,MAAM,CAACyC,OAAO,CAAC,CACfvC,IAAI,CAAC,GAAG,CAAC,EACZ,OAAO,CACR;EACL;EAEA,IAAMwC,wBAAwB,GAAGhF,KAAK,CAACkE,OAAO,CAC5C;IAAA,OAAO,CAAAH,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEkB,KAAK,CAACC,QAAQ,MAAK,OAAO,GAAG,OAAO,GAAG,UAAU;EAAA,CAAC,EACjE,CAACnB,MAAM,CAAC,CACT;EAED,IAAIO,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,IAAIT,MAAM,IAAI,CAACE,gBAAgB,EAAE;IACzE,MAAM,IAAIkB,KAAK,CAAC,2DAA2D,CAAC;EAC9E;EAEA,IAAMC,mBAAmB,GAAGpF,KAAK,CAACkE,OAAO,CAAC,YAAM;IAC9C,IAAMmB,WAAoC,GAAG,CAC3CvE,gBAAgB,CAAC;MACfwE,SAAS,EAAEtC,OAAO;MAClBuC,QAAQ,EAAEtC;IACZ,CAAC,CAAC,CACH;;IAED;IACA,IAAIoB,kBAAkB,EAAE;MACtBgB,WAAW,CAACG,IAAI,CAAC5E,cAAc,EAAE,CAAC;IACpC,CAAC,MAAM;MACLyE,WAAW,CAACG,IAAI,CACdhF,uBAAuB,CAAC;QACtBiF,SAAS,EAAE/C,SAAS,GAAG7B,qBAAqB,CAAC6B,SAAS,CAAC,GAAG;MAC5D,CAAC,CAAC,CACH;IACH;IAEA2C,WAAW,CAACG,IAAI,CAACzE,eAAe,EAAE,CAAC;;IAEnC;IACA,IAAIuC,KAAK,EAAE;MACT+B,WAAW,CAACG,IAAI,CACdjF,eAAe,CAAC;QACdgB,OAAO,EAAEqC,QAAQ;QACjB8B,OAAO,EAAE;MACX,CAAC,CAAC,CACH;MACDL,WAAW,CAACG,IAAI,CAAC;QACfG,IAAI,EAAE,aAAa;QACnBC,EAAE,qBAAgC;UAAA,IAA7BlD,SAAS,SAATA,SAAS;YAAEmD,cAAc,SAAdA,cAAc;UAC5B,IAAI,CAACA,cAAc,CAACvC,KAAK,EAAE;YACzB,OAAOwC,OAAO,CAACC,OAAO,CAAC,CAAC,CAAC,CAAC;UAC5B;UACA,IAAItD,mBAAmB,CAACC,SAAS,CAAC,EAAE;YAClC,IAAIU,oBAAoB,KAAK4C,SAAS,EAAE;cACtCH,cAAc,CAACvC,KAAK,CAACpB,CAAC,GAAGkB,oBAAoB;YAC/C,CAAC,MAAM,IAAIyC,cAAc,CAACvC,KAAK,CAACpB,CAAC,KAAK8D,SAAS,EAAE;cAC/CH,cAAc,CAACvC,KAAK,CAACpB,CAAC,IAAIiB,YAAY;YACxC;UACF,CAAC,MAAM;YACL,IAAIC,oBAAoB,KAAK4C,SAAS,EAAE;cACtCH,cAAc,CAACvC,KAAK,CAAC2C,CAAC,GAAG7C,oBAAoB;YAC/C,CAAC,MAAM,IAAIyC,cAAc,CAACvC,KAAK,CAAC2C,CAAC,KAAKD,SAAS,EAAE;cAC/CH,cAAc,CAACvC,KAAK,CAAC2C,CAAC,IAAI9C,YAAY;YACxC;UACF;UACA,OAAO2C,OAAO,CAACC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC5B;MACF,CAAC,CAAC;IACJ;IAEA,OAAOV,WAAW;EACpB,CAAC,EAAE,CAAC/B,KAAK,EAAEF,oBAAoB,EAAED,YAAY,EAAEH,OAAO,EAAEC,OAAO,EAAEP,SAAS,EAAE2B,kBAAkB,CAAC,CAAC;EAEhG,mBAMIrD,WAAW,CAAC;MACdkF,QAAQ,EAAElB,wBAAwB;MAClCtC,SAAS,EAAE2B,kBAAkB,GAAG3B,SAAS,GAAGsD,SAAS;MACrDG,UAAU,EAAEf,mBAAmB;MAC/BgB,oBAAoB,EAAE3F;IACxB,CAAC,CAAC;IAVG4F,aAAa,gBAAhBnE,CAAC;IACEoE,aAAa,gBAAhBL,CAAC;IACUM,iBAAiB,gBAA5B7D,SAAS;IACT8D,IAAI,gBAAJA,IAAI;IACqBC,WAAW,gBAApCZ,cAAc,CAAIvC,KAAK;EAQzB,cAAqBhD,MAAM,EAAE;IAArBoG,QAAQ,WAARA,QAAQ;EAChBrG,sBAAsB,CAACqG,QAAQ,EAAE,OAAO,EAAE5D,OAAO,IAAII,OAAO,EAAE;IAC5DyD,OAAO,EAAE,IAAI;IACbC,OAAO,EAAE;EACX,CAAC,CAAC;EAEF,IAAMC,QAAQ,GAAGvF,gBAAgB,CAAiDuB,QAAQ,CAAC,GACvFA,QAAQ,CAACiE,GAAG,GACZ,aAAA9G,KAAK,CAACwB,cAAc,CAA0BqB,QAAQ,CAAC,GACvDA,QAAQ,CAACkE,KAAK,CAACC,UAAU,GACzB,IAAI;EACR,IAAMC,UAAU,GAAG7G,YAAY,CAAc4D,SAAS,EAAEwC,IAAI,CAACU,YAAY,EAAEL,QAAQ,CAAC;EACpF,IAAMM,KAAK,GAAG,aAAAnH,KAAK,CAACwB,cAAc,CAACqB,QAAQ,CAAC,gBACxC7C,KAAK,CAACoH,YAAY,CAACvE,QAAQ,sBACxBvB,gBAAgB,CAACuB,QAAQ,CAAC,GAAG,KAAK,GAAG,YAAY,EAAGoE,UAAU,EAC/D,GACFpE,QAAQ;EAEZ,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZsE,KAAK,EACLrE,OAAO,IACNiB,MAAM,IAAI,IAAI,iBACd9D,QAAQ,CAACoH,YAAY,eACnB,wCACM1D,SAAS;IACb,SAAS,EAAEzD,UAAU,gBAAoByB,gBAAgB,CAAC0B,UAAU,CAAC,EAAEK,SAAS;EAAE,iBAElF;IACE,GAAG,EAAE8C,IAAI,CAACc,WAAY;IACtB,KAAK,EAAE3G,uCAAuC,CAC5CqE,wBAAwB,EACxBqB,aAAa,EACbC,aAAa;EACb,GAEDhD,KAAK,iBACJ,oBAAC,WAAW;IACV,MAAM,EAAEmD,WAAY;IACpB,SAAS,EAAEF,iBAAkB;IAC7B,cAAc,sBAA2B;IACzC,UAAU,EAAE3C;EAAS,EAExB,eACD;IAAK,SAAS;EAA6B,GACxCH,MAAM,iBACL,oBAAC,OAAO;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAA2B,GACrDA,MAAM,CAEV,EACAD,IAAI,iBAAI,oBAAC,OAAO;IAAC,SAAS;EAA0B,GAAEA,IAAI,CAAW,CAClE,CACF,CACF,EACNS,gBAAgB,CACjB,CACY;AAErB,CAAC"}

package/dist/components/Touch/Touch.js

@@ -3,10 +3,10 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["onStart", "onStartX", "onStartY", "onMove", "onMoveX", "onMoveY", "onLeave", "onEnter", "onEnd", "onEndX", "onEndY", "onClickCapture", "usePointerHover", "slideThreshold", "useCapture", "Component", "getRootRef", "noSlideClick", "stopPropagation"];
 import * as React from 'react';
-import { getSupportedEvents, coordX, coordY, touchEnabled } from '../../lib/touch';
-import { useDOM } from '../../lib/dom';
-import { useExternRef } from '../../hooks/useExternRef';
 import { useEventListener } from '../../hooks/useEventListener';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useDOM } from '../../lib/dom';
+import { coordX, coordY, getSupportedEvents, touchEnabled } from '../../lib/touch';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 /**
  * @see https://vkcom.github.io/VKUI/#/Touch