@vkontakte/vkui 6.5.3 → 6.7.0

package/dist/cssm/components/TooltipBase/TooltipBase.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
+import { Icon16Cancel } from '@vkontakte/icons';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { DefaultIcon } from '../FloatingArrow/DefaultIcon';
 import { FloatingArrow } from '../FloatingArrow/FloatingArrow';
 import { RootComponent } from '../RootComponent/RootComponent';
+import { Tappable } from '../Tappable/Tappable';
 import { Subhead } from '../Typography/Subhead/Subhead';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './TooltipBase.module.css';
 export const TOOLTIP_MAX_WIDTH = 220;
 const stylesAppearance = {
@@ -18,7 +21,7 @@ const stylesAppearance = {
  * Примеры использования и Readme можно найти в документации Tooltip
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  * @private
- */ export const TooltipBase = ({ appearance = 'accent', arrowProps, ArrowIcon = DefaultIcon, text, header, maxWidth = TOOLTIP_MAX_WIDTH, className, ...restProps })=>{
+ */ export const TooltipBase = ({ appearance = 'accent', arrowProps, ArrowIcon = DefaultIcon, text, header, maxWidth = TOOLTIP_MAX_WIDTH, closeIconLabel = 'Закрыть', onCloseIconClick, className, ...restProps })=>{
     return /*#__PURE__*/ _jsxs(RootComponent, {
         ...restProps,
         baseClassName: classNames(styles['TooltipBase'], appearance !== 'neutral' && stylesAppearance[appearance], className),
@@ -35,12 +38,31 @@ const stylesAppearance = {
                     maxWidth
                 } : undefined,
                 children: [
-                    header && /*#__PURE__*/ _jsx(Subhead, {
-                        weight: "2",
-                        children: header
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            hasReactNode(header) && /*#__PURE__*/ _jsx(Subhead, {
+                                weight: "2",
+                                children: header
+                            }),
+                            hasReactNode(text) && /*#__PURE__*/ _jsx(Subhead, {
+                                children: text
+                            })
+                        ]
                     }),
-                    text && /*#__PURE__*/ _jsx(Subhead, {
-                        children: text
+                    typeof onCloseIconClick === 'function' && /*#__PURE__*/ _jsxs(Tappable, {
+                        Component: "button",
+                        className: styles['TooltipBase__closeButton'],
+                        hoverMode: "opacity",
+                        activeMode: "opacity",
+                        onClick: onCloseIconClick,
+                        children: [
+                            /*#__PURE__*/ _jsx(VisuallyHidden, {
+                                children: closeIconLabel
+                            }),
+                            /*#__PURE__*/ _jsx(Icon16Cancel, {
+                                display: "block"
+                            })
+                        ]
                     })
                 ]
             })

package/dist/cssm/components/TooltipBase/TooltipBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TooltipBase/TooltipBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { DefaultIcon } from '../FloatingArrow/DefaultIcon';\nimport { FloatingArrow, type FloatingArrowProps } from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './TooltipBase.module.css';\n\nexport const TOOLTIP_MAX_WIDTH = 220;\n\nconst stylesAppearance = {\n  accent: styles['TooltipBase--appearance-accent'],\n  white: styles['TooltipBase--appearance-white'],\n  black: styles['TooltipBase--appearance-black'],\n  inversion: styles['TooltipBase--appearance-inversion'],\n};\n\nexport interface TooltipBaseProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'> {\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n  /**\n   * Текст тултипа.\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа.\n   */\n  header?: React.ReactNode;\n  /**\n   * Для показа указателя, требуется передать хотя бы `coords` и `placement`.\n   */\n  arrowProps?: Omit<FloatingArrowProps, 'Icon'>;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 4. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   * 5. Если стрелка наезжает на якорный элемент, то увеличьте смещение между целевым и всплывающим элементами.\n   */\n  ArrowIcon?: FloatingArrowProps['Icon'];\n  /**\n   * Пользовательские css-классы, будут добавлены на root-элемент\n   */\n  className?: string;\n  /**\n   * Перебивает максимальную ширину заданную по умолчанию.\n   *\n   * Передача `null` полностью сбрасывает установку `max-width` на элемент.\n   */\n  maxWidth?: number | string | null;\n}\n\n/**\n * Низкоуровневый компонент для отрисовки тултипа.\n * Примеры использования и Readme можно найти в документации Tooltip\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n * @private\n */\nexport const TooltipBase = ({\n  appearance = 'accent',\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n  text,\n  header,\n  maxWidth = TOOLTIP_MAX_WIDTH,\n  className,\n  ...restProps\n}: TooltipBaseProps): React.ReactNode => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['TooltipBase'],\n        appearance !== 'neutral' && stylesAppearance[appearance],\n        className,\n      )}\n      role=\"tooltip\"\n    >\n      {arrowProps && (\n        <FloatingArrow\n          {...arrowProps}\n          iconClassName={classNames(styles['TooltipBase__arrow'], arrowProps.iconClassName)}\n          Icon={ArrowIcon}\n        />\n      )}\n      <div\n        className={styles['TooltipBase__content']}\n        style={maxWidth !== null ? { maxWidth } : undefined}\n      >\n        {header && <Subhead weight=\"2\">{header}</Subhead>}\n        {text && <Subhead>{text}</Subhead>}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","DefaultIcon","FloatingArrow","RootComponent","Subhead","styles","TOOLTIP_MAX_WIDTH","stylesAppearance","accent","white","black","inversion","TooltipBase","appearance","arrowProps","ArrowIcon","text","header","maxWidth","className","restProps","baseClassName","role","iconClassName","Icon","div","style","undefined","weight"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,WAAW,QAAQ,+BAA+B;AAC3D,SAASC,aAAa,QAAiC,iCAAiC;AACxF,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,2BAA2B;AAE9C,OAAO,MAAMC,oBAAoB,IAAI;AAErC,MAAMC,mBAAmB;IACvBC,QAAQH,MAAM,CAAC,iCAAiC;IAChDI,OAAOJ,MAAM,CAAC,gCAAgC;IAC9CK,OAAOL,MAAM,CAAC,gCAAgC;IAC9CM,WAAWN,MAAM,CAAC,oCAAoC;AACxD;AA8CA;;;;;CAKC,GACD,OAAO,MAAMO,cAAc,CAAC,EAC1BC,aAAa,QAAQ,EACrBC,UAAU,EACVC,YAAYd,WAAW,EACvBe,IAAI,EACJC,MAAM,EACNC,WAAWZ,iBAAiB,EAC5Ba,SAAS,EACT,GAAGC,WACc;IACjB,qBACE,MAACjB;QACE,GAAGiB,SAAS;QACbC,eAAerB,WACbK,MAAM,CAAC,cAAc,EACrBQ,eAAe,aAAaN,gBAAgB,CAACM,WAAW,EACxDM;QAEFG,MAAK;;YAEJR,4BACC,KAACZ;gBACE,GAAGY,UAAU;gBACdS,eAAevB,WAAWK,MAAM,CAAC,qBAAqB,EAAES,WAAWS,aAAa;gBAChFC,MAAMT;;0BAGV,MAACU;gBACCN,WAAWd,MAAM,CAAC,uBAAuB;gBACzCqB,OAAOR,aAAa,OAAO;oBAAEA;gBAAS,IAAIS;;oBAEzCV,wBAAU,KAACb;wBAAQwB,QAAO;kCAAKX;;oBAC/BD,sBAAQ,KAACZ;kCAASY;;;;;;AAI3B,EAAE"}
+{"version":3,"sources":["../../../../src/components/TooltipBase/TooltipBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { DefaultIcon } from '../FloatingArrow/DefaultIcon';\nimport { FloatingArrow, type FloatingArrowProps } from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TooltipBase.module.css';\n\nexport const TOOLTIP_MAX_WIDTH = 220;\n\nconst stylesAppearance = {\n  accent: styles['TooltipBase--appearance-accent'],\n  white: styles['TooltipBase--appearance-white'],\n  black: styles['TooltipBase--appearance-black'],\n  inversion: styles['TooltipBase--appearance-inversion'],\n};\n\nexport interface TooltipBaseProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'> {\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n  /**\n   * Текст тултипа.\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа.\n   */\n  header?: React.ReactNode;\n  /**\n   * Для показа указателя, требуется передать хотя бы `coords` и `placement`.\n   */\n  arrowProps?: Omit<FloatingArrowProps, 'Icon'>;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 4. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   * 5. Если стрелка наезжает на якорный элемент, то увеличьте смещение между целевым и всплывающим элементами.\n   */\n  ArrowIcon?: FloatingArrowProps['Icon'];\n  /**\n   * Пользовательские css-классы, будут добавлены на root-элемент\n   */\n  className?: string;\n  /**\n   * Перебивает максимальную ширину заданную по умолчанию.\n   *\n   * Передача `null` полностью сбрасывает установку `max-width` на элемент.\n   */\n  maxWidth?: number | string | null;\n  /**\n   * Скрытый текст для кнопки закрытия.\n   */\n  closeIconLabel?: string;\n  /**\n   * Обработчик нажатия на кнопку закрытия. При передаче, показывается иконка.\n   */\n  onCloseIconClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\n/**\n * Низкоуровневый компонент для отрисовки тултипа.\n * Примеры использования и Readme можно найти в документации Tooltip\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n * @private\n */\nexport const TooltipBase = ({\n  appearance = 'accent',\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n  text,\n  header,\n  maxWidth = TOOLTIP_MAX_WIDTH,\n  closeIconLabel = 'Закрыть',\n  onCloseIconClick,\n  className,\n  ...restProps\n}: TooltipBaseProps): React.ReactNode => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['TooltipBase'],\n        appearance !== 'neutral' && stylesAppearance[appearance],\n        className,\n      )}\n      role=\"tooltip\"\n    >\n      {arrowProps && (\n        <FloatingArrow\n          {...arrowProps}\n          iconClassName={classNames(styles['TooltipBase__arrow'], arrowProps.iconClassName)}\n          Icon={ArrowIcon}\n        />\n      )}\n      <div\n        className={styles['TooltipBase__content']}\n        style={maxWidth !== null ? { maxWidth } : undefined}\n      >\n        <div>\n          {hasReactNode(header) && <Subhead weight=\"2\">{header}</Subhead>}\n          {hasReactNode(text) && <Subhead>{text}</Subhead>}\n        </div>\n        {typeof onCloseIconClick === 'function' && (\n          <Tappable\n            Component=\"button\"\n            className={styles['TooltipBase__closeButton']}\n            hoverMode=\"opacity\"\n            activeMode=\"opacity\"\n            onClick={onCloseIconClick}\n          >\n            <VisuallyHidden>{closeIconLabel}</VisuallyHidden>\n            <Icon16Cancel display=\"block\" />\n          </Tappable>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","DefaultIcon","FloatingArrow","RootComponent","Tappable","Subhead","VisuallyHidden","styles","TOOLTIP_MAX_WIDTH","stylesAppearance","accent","white","black","inversion","TooltipBase","appearance","arrowProps","ArrowIcon","text","header","maxWidth","closeIconLabel","onCloseIconClick","className","restProps","baseClassName","role","iconClassName","Icon","div","style","undefined","weight","Component","hoverMode","activeMode","onClick","display"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,WAAW,QAAQ,+BAA+B;AAC3D,SAASC,aAAa,QAAiC,iCAAiC;AACxF,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,2BAA2B;AAE9C,OAAO,MAAMC,oBAAoB,IAAI;AAErC,MAAMC,mBAAmB;IACvBC,QAAQH,MAAM,CAAC,iCAAiC;IAChDI,OAAOJ,MAAM,CAAC,gCAAgC;IAC9CK,OAAOL,MAAM,CAAC,gCAAgC;IAC9CM,WAAWN,MAAM,CAAC,oCAAoC;AACxD;AAsDA;;;;;CAKC,GACD,OAAO,MAAMO,cAAc,CAAC,EAC1BC,aAAa,QAAQ,EACrBC,UAAU,EACVC,YAAYhB,WAAW,EACvBiB,IAAI,EACJC,MAAM,EACNC,WAAWZ,iBAAiB,EAC5Ba,iBAAiB,SAAS,EAC1BC,gBAAgB,EAChBC,SAAS,EACT,GAAGC,WACc;IACjB,qBACE,MAACrB;QACE,GAAGqB,SAAS;QACbC,eAAe1B,WACbQ,MAAM,CAAC,cAAc,EACrBQ,eAAe,aAAaN,gBAAgB,CAACM,WAAW,EACxDQ;QAEFG,MAAK;;YAEJV,4BACC,KAACd;gBACE,GAAGc,UAAU;gBACdW,eAAe5B,WAAWQ,MAAM,CAAC,qBAAqB,EAAES,WAAWW,aAAa;gBAChFC,MAAMX;;0BAGV,MAACY;gBACCN,WAAWhB,MAAM,CAAC,uBAAuB;gBACzCuB,OAAOV,aAAa,OAAO;oBAAEA;gBAAS,IAAIW;;kCAE1C,MAACF;;4BACE7B,aAAamB,yBAAW,KAACd;gCAAQ2B,QAAO;0CAAKb;;4BAC7CnB,aAAakB,uBAAS,KAACb;0CAASa;;;;oBAElC,OAAOI,qBAAqB,4BAC3B,MAAClB;wBACC6B,WAAU;wBACVV,WAAWhB,MAAM,CAAC,2BAA2B;wBAC7C2B,WAAU;wBACVC,YAAW;wBACXC,SAASd;;0CAET,KAAChB;0CAAgBe;;0CACjB,KAACvB;gCAAauC,SAAQ;;;;;;;;AAMlC,EAAE"}

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

@@ -3,6 +3,9 @@
 }
 
 .TooltipBase__content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   background-color: var(--vkui--color_background_contrast_themed);
   box-shadow: var(--vkui--elevation3);
   padding-block: 9px 10px;
@@ -11,6 +14,18 @@
   color: var(--vkui--color_text_primary);
 }
 
+.TooltipBase__closeButton {
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-self: flex-start;
+  -webkit-margin-start: 10px;
+          margin-inline-start: 10px;
+  color: inherit;
+  padding: 0;
+  border: 0;
+  background: none;
+}
+
 .TooltipBase__arrow {
   color: var(--vkui--color_background_contrast_themed);
 }

package/dist/cssm/components/Touch/Touch.d.ts

@@ -1,6 +1,11 @@
 import * as React from 'react';
-import { VKUITouchEvent } from '../../lib/touch';
-import { HasComponent, HasRootRef } from '../../types';
+import { type VKUITouchEvent } from '../../lib/touch';
+import type { HasComponent, HasRootRef } from '../../types';
+export interface CustomTouchEvent extends Gesture {
+    originalEvent: VKUITouchEvent;
+}
+export type HoverHandler = (outputEvent: MouseEvent) => void;
+export type CustomTouchEventHandler = (event: CustomTouchEvent) => void;
 export interface TouchProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
     /**
      * Привязать onEnter и onLeave через pointer-events - работает на disabled-инпутах
@@ -11,15 +16,15 @@ export interface TouchProps extends React.AllHTMLAttributes<HTMLElement>, HasRoo
     noSlideClick?: boolean;
     onEnter?: HoverHandler;
     onLeave?: HoverHandler;
-    onStart?: TouchEventHandler;
-    onStartX?: TouchEventHandler;
-    onStartY?: TouchEventHandler;
-    onMove?: TouchEventHandler;
-    onMoveX?: TouchEventHandler;
-    onMoveY?: TouchEventHandler;
-    onEnd?: TouchEventHandler;
-    onEndX?: TouchEventHandler;
-    onEndY?: TouchEventHandler;
+    onStart?: CustomTouchEventHandler;
+    onStartX?: CustomTouchEventHandler;
+    onStartY?: CustomTouchEventHandler;
+    onMove?: CustomTouchEventHandler;
+    onMoveX?: CustomTouchEventHandler;
+    onMoveY?: CustomTouchEventHandler;
+    onEnd?: CustomTouchEventHandler;
+    onEndX?: CustomTouchEventHandler;
+    onEndY?: CustomTouchEventHandler;
     stopPropagation?: boolean;
 }
 export interface Gesture {
@@ -40,16 +45,8 @@ export interface Gesture {
     shiftXAbs: number;
     shiftYAbs: number;
 }
-export interface TouchEvent extends Gesture {
-    originalEvent: VKUITouchEvent;
-}
-type HoverHandler = (outputEvent: MouseEvent) => void;
-export type TouchEventHandler = (e: TouchEvent) => void;
-export type ClickHandler = (e: React.MouseEvent<HTMLElement>) => void;
-export type DragHandler = (e: React.DragEvent<HTMLElement>) => void;
 /**
  * @see https://vkcom.github.io/VKUI/#/Touch
  */
-export declare const Touch: ({ onStart, onStartX, onStartY, onMove: _onMove, onMoveX, onMoveY, onLeave, onEnter, onEnd: _onEnd, onEndX, onEndY, onClickCapture, usePointerHover, slideThreshold, useCapture, Component, getRootRef, noSlideClick, stopPropagation, ...restProps }: TouchProps) => React.ReactNode;
-export {};
+export declare const Touch: ({ onStart, onStartX, onStartY, onMove, onMoveX, onMoveY, onEnter, onLeave, onEnd, onEndX, onEndY, onClickCapture, usePointerHover, slideThreshold, useCapture, Component, getRootRef, noSlideClick, stopPropagation, ...restProps }: TouchProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Touch.d.ts.map

package/dist/cssm/components/Touch/Touch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Touch.d.ts","sourceRoot":"","sources":["../../../../src/components/Touch/Touch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAoD,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEnG,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEvD,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,UAAU,CAAC,WAAW,CAAC,EACvB,YAAY;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,OAAO;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,IAAI,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,OAAO,CAAC;IACb,GAAG,EAAE,OAAO,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,UAAW,SAAQ,OAAO;IACzC,aAAa,EAAE,cAAc,CAAC;CAC/B;AAED,KAAK,YAAY,GAAG,CAAC,WAAW,EAAE,UAAU,KAAK,IAAI,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;AACtE,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;AAEpE;;GAEG;AACH,eAAO,MAAM,KAAK,yPAqBf,UAAU,KAAG,KAAK,CAAC,SAyLrB,CAAC"}
+{"version":3,"file":"Touch.d.ts","sourceRoot":"","sources":["../../../../src/components/Touch/Touch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAgC,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACpF,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE5D,MAAM,WAAW,gBAAiB,SAAQ,OAAO;IAC/C,aAAa,EAAE,cAAc,CAAC;CAC/B;AAED,MAAM,MAAM,YAAY,GAAG,CAAC,WAAW,EAAE,UAAU,KAAK,IAAI,CAAC;AAE7D,MAAM,MAAM,uBAAuB,GAAG,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;AAExE,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,UAAU,CAAC,WAAW,CAAC,EACvB,YAAY;IACd;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,KAAK,CAAC,EAAE,uBAAuB,CAAC;IAChC,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,OAAO;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,IAAI,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,OAAO,CAAC;IACb,GAAG,EAAE,OAAO,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,wOAqBf,UAAU,4CAqNZ,CAAC"}

package/dist/cssm/components/Touch/Touch.js

@@ -1,178 +1,183 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-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';
+import { useStableCallback } from '../../hooks/useStableCallback';
+import { getWindow, isHTMLElement } from '../../lib/dom';
+import { coordX, coordY, touchEnabled } from '../../lib/touch';
 /**
  * @see https://vkcom.github.io/VKUI/#/Touch
- */ export const Touch = ({ onStart, onStartX, onStartY, onMove: _onMove, onMoveX, onMoveY, onLeave, onEnter, onEnd: _onEnd, onEndX, onEndY, onClickCapture, usePointerHover, slideThreshold = 5, useCapture = false, Component = 'div', getRootRef, noSlideClick = false, stopPropagation = false, ...restProps })=>{
-    const { document } = useDOM();
-    const events = React.useMemo(getSupportedEvents, []);
+ */ export const Touch = ({ onStart, onStartX, onStartY, onMove, onMoveX, onMoveY, onEnter, onLeave, onEnd, onEndX, onEndY, onClickCapture, usePointerHover, slideThreshold = 5, useCapture = false, Component = 'div', getRootRef, noSlideClick = false, stopPropagation = false, ...restProps })=>{
+    const [isTouchEnabled] = React.useState(touchEnabled);
+    const gestureRef = React.useRef(null);
     const didSlide = React.useRef(false);
-    const gesture = React.useRef(null);
-    const handle = (e, handlers)=>{
-        stopPropagation && e.stopPropagation();
-        handlers.forEach((cb)=>{
-            const duration = Date.now() - (gesture.current?.startT?.getTime() ?? 0);
-            cb && cb({
-                ...gesture.current,
-                duration,
-                originalEvent: e
-            });
-        });
-    };
-    const enterHandler = useEventListener(usePointerHover ? 'pointerenter' : 'mouseenter', onEnter);
-    const leaveHandler = useEventListener(usePointerHover ? 'pointerleave' : 'mouseleave', onLeave);
-    const startHandler = useEventListener(events[0], (e)=>{
-        gesture.current = initGesture(coordX(e), coordY(e));
-        handle(e, [
-            onStart,
-            onStartX,
-            onStartY
-        ]);
-        // 1 line, 2 bad specs, 2 workarounds:
-        subscribe(touchEnabled() ? // see: #235, #1968, https://stackoverflow.com/a/45760014
-        e.target : // if pointer goes outside container.
-        // Can be fixed by PointerEvents' setPointerCapture later
-        document);
-    }, {
-        capture: useCapture,
-        passive: false
-    });
-    const containerRef = useExternRef(getRootRef);
-    useIsomorphicLayoutEffect(()=>{
-        const el = containerRef.current;
-        if (el) {
-            enterHandler.add(el);
-            leaveHandler.add(el);
-            startHandler.add(el);
+    const disposeTargetNativeGestureEvents = React.useRef(null);
+    const cleanupTargetNativeGestureEvents = ()=>{
+        gestureRef.current = null;
+        if (disposeTargetNativeGestureEvents.current) {
+            disposeTargetNativeGestureEvents.current();
+            disposeTargetNativeGestureEvents.current = null;
         }
-    }, [
-        Component
-    ]);
-    function onMove(e) {
-        const { isPressed, isX, isY, startX = 0, startY = 0 } = gesture.current ?? {};
-        if (isPressed) {
-            const clientX = coordX(e);
-            const clientY = coordY(e);
-            // смещения
-            const shiftX = clientX - startX;
-            const shiftY = clientY - startY;
-            // абсолютные значения смещений
-            const shiftXAbs = Math.abs(shiftX);
-            const shiftYAbs = Math.abs(shiftY);
-            // Если определяем мультитач, то прерываем жест
-            if (!!e.touches && e.touches.length > 1) {
-                return onEnd(e);
-            }
-            // если мы ещё не определились
-            if (!isX && !isY) {
-                const willBeX = shiftXAbs >= slideThreshold && shiftXAbs > shiftYAbs;
-                const willBeY = shiftYAbs >= slideThreshold && shiftYAbs > shiftXAbs;
-                const willBeSlidedX = willBeX && (!!onMoveX || !!_onMove);
-                const willBeSlidedY = willBeY && (!!onMoveY || !!_onMove);
-                if (gesture.current) {
-                    Object.assign(gesture.current, {
-                        isY: willBeY,
-                        isX: willBeX,
-                        isSlideX: willBeSlidedX,
-                        isSlideY: willBeSlidedY,
-                        isSlide: willBeSlidedX || willBeSlidedY
-                    });
-                }
-            }
-            if (gesture.current?.isSlide) {
-                Object.assign(gesture.current, {
-                    clientX,
-                    clientY,
-                    shiftX,
-                    shiftY,
-                    shiftXAbs,
-                    shiftYAbs
-                });
-                handle(e, [
-                    _onMove,
-                    gesture.current.isSlideX && onMoveX,
-                    gesture.current.isSlideY && onMoveY
-                ]);
-            }
+    };
+    React.useEffect(()=>cleanupTargetNativeGestureEvents, []);
+    /**
+   * Note: используем `useStableCallback()`, чтобы не терялась область видимости `onEnd`/`onEndX`/`onEndY`.
+   */ const handleNativePointerUp = useStableCallback((event)=>{
+        const gesture = gestureRef.current;
+        /* istanbul ignore if: нужно для Typescript */ if (!gesture) {
+            return;
         }
-    }
-    function onEnd(e) {
-        const { isPressed, isSlide, isSlideX, isSlideY } = gesture.current ?? {};
-        if (isPressed) {
-            handle(e, [
-                _onEnd,
-                isSlideY && onEndY,
-                isSlideX && onEndX
-            ]);
+        if (gesture.isPressed) {
+            dispatchUserHandlers(event, gesture, [
+                onEnd,
+                onEndX,
+                onEndY
+            ], stopPropagation);
         }
-        const isTouchEnabled = touchEnabled();
-        if (isTouchEnabled && isSlide) {
+        if (isTouchEnabled) {
             // https://github.com/VKCOM/VKUI/issues/4414
             // если тач-устройство и был зафиксирован touchmove,
             // то событие клика не вызывается
-            didSlide.current = false;
+            if (gesture.isSlide) {
+                didSlide.current = false;
+            }
+            // Если это был тач-евент, симулируем отмену hover
+            if (onLeave) {
+                onLeave(event);
+            }
         } else {
-            didSlide.current = Boolean(isSlide);
+            didSlide.current = Boolean(gesture.isSlide);
+        }
+        cleanupTargetNativeGestureEvents();
+    });
+    /**
+   * Note: используем `useStableCallback()`, чтобы не терялась область видимости `onMove`/`onMoveX`/`onMoveY`.
+   */ const handleNativePointerMove = useStableCallback((event)=>{
+        const gesture = gestureRef.current;
+        /* istanbul ignore if: нужно для Typescript */ if (!gesture) {
+            return;
+        }
+        const clientX = coordX(event);
+        const clientY = coordY(event);
+        // смещения
+        const shiftX = clientX - gesture.startX;
+        const shiftY = clientY - gesture.startY;
+        // абсолютные значения смещений
+        const shiftXAbs = Math.abs(shiftX);
+        const shiftYAbs = Math.abs(shiftY);
+        // Если определяем мультитач, то прерываем жест
+        if ('touches' in event && event.touches.length > 1) {
+            return handleNativePointerUp(event);
+        }
+        // если мы ещё не определились
+        if (!gesture.isX && !gesture.isY) {
+            const willBeX = shiftXAbs >= slideThreshold && shiftXAbs > shiftYAbs;
+            const willBeY = shiftYAbs >= slideThreshold && shiftYAbs > shiftXAbs;
+            const willBeSlidedX = willBeX && (!!onMoveX || !!onMove);
+            const willBeSlidedY = willBeY && (!!onMoveY || !!onMove);
+            gesture.isY = willBeY;
+            gesture.isX = willBeX;
+            gesture.isSlideX = willBeSlidedX;
+            gesture.isSlideY = willBeSlidedY;
+            gesture.isSlide = willBeSlidedX || willBeSlidedY;
         }
-        gesture.current = {};
-        // Если это был тач-евент, симулируем отмену hover
+        if (gesture.isSlide) {
+            gesture.clientX = clientX;
+            gesture.clientY = clientY;
+            gesture.shiftX = shiftX;
+            gesture.shiftY = shiftY;
+            gesture.shiftXAbs = shiftXAbs;
+            gesture.shiftYAbs = shiftYAbs;
+            dispatchUserHandlers(event, gesture, [
+                onMove,
+                onMoveX,
+                onMoveY
+            ], stopPropagation);
+        }
+    });
+    const handlePointerDown = (event)=>{
+        const nativeEvent = event.nativeEvent;
+        gestureRef.current = initGesture(coordX(nativeEvent), coordY(nativeEvent));
+        const shouldCallDirectionHandlerOnlyIsSlide = false;
+        dispatchUserHandlers(event, gestureRef.current, [
+            onStart,
+            onStartX,
+            onStartY
+        ], stopPropagation, shouldCallDirectionHandlerOnlyIsSlide);
+        const eventOptions = {
+            capture: useCapture,
+            passive: false
+        };
+        // FIXME: заменить touch/mouse-события ниже на pointer-события после того, как бразуеры из
+        // .browserslistrc начнут поддерживать его (см. https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#browser_compatibility).
         if (isTouchEnabled) {
-            onLeave && onLeave(e);
+            if (isHTMLElement(event.target)) {
+                // Тач-события не всплывают, поэтому навешиваем события на целевой элемент
+                // см. #235, #1968, https://stackoverflow.com/a/45760014
+                const target = event.target;
+                target.addEventListener('touchmove', handleNativePointerMove, eventOptions);
+                target.addEventListener('touchend', handleNativePointerUp, eventOptions);
+                target.addEventListener('touchcancel', handleNativePointerUp, eventOptions);
+                disposeTargetNativeGestureEvents.current = ()=>{
+                    target.removeEventListener('touchmove', handleNativePointerMove, eventOptions);
+                    target.removeEventListener('touchend', handleNativePointerUp, eventOptions);
+                    target.removeEventListener('touchcancel', handleNativePointerUp, eventOptions);
+                };
+            }
+        } else {
+            // Используем события на Document, т.к. mouse-события на целевом элементе могут теряться при
+            // выходе за границы этого элемента.
+            const doc = getWindow(event.currentTarget).document;
+            doc.addEventListener('mousemove', handleNativePointerMove, eventOptions);
+            doc.addEventListener('mouseup', handleNativePointerUp, eventOptions);
+            doc.addEventListener('mouseleave', handleNativePointerUp, eventOptions);
+            disposeTargetNativeGestureEvents.current = ()=>{
+                doc.removeEventListener('mousemove', handleNativePointerMove, eventOptions);
+                doc.removeEventListener('mouseup', handleNativePointerUp, eventOptions);
+                doc.removeEventListener('mouseleave', handleNativePointerUp, eventOptions);
+            };
         }
-        unsubscribe();
-    }
-    const listenerParams = {
-        capture: useCapture,
-        passive: false
     };
-    const listeners = [
-        useEventListener(events[1], onMove, listenerParams),
-        useEventListener(events[2], onEnd, listenerParams),
-        useEventListener(events[3], onEnd, listenerParams)
-    ];
-    function subscribe(el) {
-        if (el) {
-            listeners.forEach((l)=>l.add(el));
-        }
-    }
-    function unsubscribe() {
-        listeners.forEach((l)=>l.remove());
-    }
+    const handlePointerEnter = onEnter ? (event)=>onEnter(event.nativeEvent) : undefined;
+    const handlePointerLeave = onLeave ? (event)=>onLeave(event.nativeEvent) : undefined;
     /**
-   * Обработчик событий dragstart
    * Отменяет нативное браузерное поведение для вложенных ссылок и изображений
-   */ const onDragStart = (e)=>{
-        const target = e.target;
+   */ const handleDragStart = (event)=>{
+        const target = event.target;
         if (target.tagName === 'A' || target.tagName === 'IMG') {
-            e.preventDefault();
+            event.preventDefault();
         }
     };
     /**
-   * Обработчик клика по компоненту
    * Отменяет переход по вложенной ссылке, если был зафиксирован свайп
-   */ const postGestureClick = (e)=>{
+   */ const handleClickCapture = (event)=>{
         if (!didSlide.current) {
-            return onClickCapture && onClickCapture(e);
+            return onClickCapture && onClickCapture(event);
         }
         if (noSlideClick) {
-            e.stopPropagation();
+            event.stopPropagation();
             // https://github.com/VKCOM/VKUI/issues/1977
             // https://github.com/VKCOM/VKUI/issues/3892
-            e.preventDefault();
+            event.preventDefault();
         } else {
-            onClickCapture && onClickCapture(e);
+            onClickCapture && onClickCapture(event);
         }
         didSlide.current = false;
     };
     return /*#__PURE__*/ _jsx(Component, {
         ...restProps,
-        onDragStart: onDragStart,
-        onClickCapture: postGestureClick,
-        ref: containerRef
+        ref: getRootRef,
+        onDragStart: handleDragStart,
+        onClickCapture: handleClickCapture,
+        // onEnter
+        onPointerEnter: usePointerHover ? handlePointerEnter : undefined,
+        onMouseEnter: !usePointerHover ? handlePointerEnter : undefined,
+        // onLeave
+        onPointerLeave: usePointerHover ? handlePointerLeave : undefined,
+        onMouseLeave: !usePointerHover ? handlePointerLeave : undefined,
+        // handlePointerDown
+        onTouchStartCapture: isTouchEnabled && useCapture ? handlePointerDown : undefined,
+        onTouchStart: isTouchEnabled && !useCapture ? handlePointerDown : undefined,
+        onMouseDownCapture: !isTouchEnabled && useCapture ? handlePointerDown : undefined,
+        onMouseDown: !isTouchEnabled && !useCapture ? handlePointerDown : undefined
     });
 };
 function initGesture(startX, startY) {
@@ -195,5 +200,36 @@ function initGesture(startX, startY) {
         shiftYAbs: 0
     };
 }
+function dispatchUserHandlers(event, gesture, [handler, handlerX, handlerY], stopPropagation, shouldCallDirectionHandlerOnlyIsSlide = true) {
+    if (stopPropagation) {
+        event.stopPropagation();
+    }
+    const data = {
+        ...gesture,
+        originalEvent: event,
+        duration: Date.now() - gesture.startT.getTime()
+    };
+    if (handler) {
+        handler(data);
+    }
+    if (handlerX) {
+        if (shouldCallDirectionHandlerOnlyIsSlide) {
+            if (gesture.isSlideX) {
+                handlerX(data);
+            }
+        } else {
+            handlerX(data);
+        }
+    }
+    if (handlerY) {
+        if (shouldCallDirectionHandlerOnlyIsSlide) {
+            if (gesture.isSlideY) {
+                handlerY(data);
+            }
+        } else {
+            handlerY(data);
+        }
+    }
+}
 
 //# sourceMappingURL=Touch.js.map