@vkontakte/vkui 7.1.3 → 7.2.1

package/src/components/Tooltip/Tooltip.tsx

@@ -1,22 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
-import { useExternRef } from '../../hooks/useExternRef';
-import { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';
-import { usePatchChildren } from '../../hooks/usePatchChildren';
-import { animationFadeClassNames } from '../../lib/animation';
-import {
-  type FloatingComponentProps,
-  getArrowCoordsByMiddlewareData,
-  type OnShownChange,
-  useFloatingMiddlewaresBootstrap,
-  useFloatingWithInteractions,
-  usePlacementChangeCallback,
-} from '../../lib/floating';
-import { AppRootPortal } from '../AppRoot/AppRootPortal';
+import { useReferenceElement } from '../../hooks/useReferenceElement';
+import { type FloatingComponentProps, type OnShownChange } from '../../lib/floating';
 import { type FloatingArrowProps as FloatingArrowPropsPrivate } from '../FloatingArrow/FloatingArrow';
-import { TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';
+import { type TooltipBaseProps } from '../TooltipBase/TooltipBase';
+import { useTooltip } from './useTooltip';
 
 type AllowedFloatingComponentProps = Pick<
   FloatingComponentProps,
@@ -29,6 +18,7 @@ type AllowedFloatingComponentProps = Pick<
   | 'defaultShown'
   | 'onShownChange'
   | 'hideWhenReferenceHidden'
+  | 'onReferenceHiddenChange'
   | 'children'
   | 'zIndex'
   | 'usePortal'
@@ -89,137 +79,14 @@ export interface TooltipProps extends AllowedFloatingComponentProps, AllowedTool
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
-export const Tooltip = ({
-  // UseFloatingMiddlewaresBootstrapOptions
-  placement: placementProp = 'bottom',
-  arrowPadding = 10,
-  arrowHeight = 8,
-  offsetByMainAxis = 8,
-  offsetByCrossAxis = 0,
-  hideWhenReferenceHidden,
-  disableFlipMiddleware = false,
-  disableTriggerOnFocus = false,
+export const Tooltip = ({ children, ...restProps }: TooltipProps): React.ReactNode => {
+  const { anchorRef, anchorProps, tooltip } = useTooltip(restProps);
 
-  // useFloatingWithInteractions
-  defaultShown,
-  shown: shownProp,
-  onShownChange,
-  hoverDelay = 150,
-  strategy,
-
-  // инверсированные св-ва для useFloatingWithInteractions
-  enableInteractive = false,
-  disableArrow = false,
-  disableCloseAfterClick = false,
-
-  // Reference
-  children,
-
-  // AppRootProps
-  usePortal,
-
-  // TooltipBaseProps
-  id: idProp,
-  getRootRef,
-  appearance = 'neutral',
-  style: styleProp,
-  className,
-  zIndex = 'var(--vkui--z_index_popout)',
-  closable,
-  onPlacementChange,
-  ...popperProps
-}: TooltipProps): React.ReactNode => {
-  const generatedId = React.useId();
-  const tooltipId = idProp || generatedId;
-
-  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);
-  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({
-    placement: placementProp,
-
-    offsetByMainAxis,
-    offsetByCrossAxis,
-
-    hideWhenReferenceHidden,
-
-    arrow: !disableArrow,
-    arrowRef,
-    arrowPadding,
-    arrowHeight,
-    disableFlipMiddleware,
-  });
-  const {
-    shown,
-    willBeHide,
-    placement,
-    refs,
-    referenceProps,
-    floatingProps,
-    middlewareData,
-    onClose,
-    onEscapeKeyDown,
-  } = useFloatingWithInteractions({
-    defaultShown,
-    shown: shownProp,
-    onShownChange,
-    placement: strictPlacement,
-    trigger: disableTriggerOnFocus ? 'hover' : ['hover', 'focus'],
-    hoverDelay,
-    closeAfterClick: !disableCloseAfterClick,
-    disableInteractive: !enableInteractive,
-    middlewares,
-    strategy,
-  });
-  const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);
-
-  usePlacementChangeCallback(placementProp, placement, onPlacementChange);
-
-  let tooltip: React.ReactNode = null;
-  if (shown) {
-    tooltip = (
-      <AppRootPortal usePortal={usePortal}>
-        <TooltipBase
-          {...popperProps}
-          {...floatingProps}
-          style={{
-            ...floatingProps.style,
-            zIndex,
-            ...styleProp,
-          }}
-          id={tooltipId}
-          getRootRef={tooltipRef}
-          appearance={appearance}
-          arrowProps={
-            disableArrow
-              ? undefined
-              : {
-                  placement,
-                  coords: getArrowCoordsByMiddlewareData(middlewareData),
-                  getRootRef: setArrowRef,
-                }
-          }
-          className={classNames(
-            willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,
-            className,
-          )}
-          onCloseIconClick={closable ? onClose : undefined}
-        />
-      </AppRootPortal>
-    );
-  }
-  const [, child] = usePatchChildren(
-    children,
-    {
-      ...referenceProps,
-      ...(shown && { 'aria-describedby': tooltipId }),
-    },
-    refs.setReference,
-  );
-
-  useGlobalEscKeyDown(shown, onEscapeKeyDown);
+  const anchor = useReferenceElement(children, anchorProps, anchorRef);
 
   return (
     <React.Fragment>
-      {child}
+      {anchor}
       {tooltip}
     </React.Fragment>
   );

package/src/components/Tooltip/useTooltip.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import * as React from 'react';
+import { type Ref, useCallback } from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import {
+  type FloatingComponentProps,
+  useFloatingElement,
+  type UseFloatingElementProps,
+} from '../../hooks/useFloatingElement';
+import { animationFadeClassNames } from '../../lib/animation';
+import { getArrowCoordsByMiddlewareData } from '../../lib/floating';
+import { type ReferenceProps } from '../../lib/floating/useFloatingWithInteractions/types';
+import { AppRootPortal } from '../AppRoot/AppRootPortal';
+import { TooltipBase } from '../TooltipBase/TooltipBase';
+import { type TooltipProps } from './Tooltip';
+
+export type UseTooltipProps = Omit<TooltipProps, 'children'> & {
+  [key: `data-${string}`]: string | number | boolean;
+};
+
+export type UseTooltipResult<ElementType extends HTMLElement = HTMLElement> = {
+  anchorRef: Ref<ElementType>;
+  anchorProps: ReferenceProps<ElementType>;
+  tooltip: React.ReactNode | null;
+};
+
+export const useTooltip = ({
+  // UseFloatingMiddlewaresBootstrapOptions
+  placement: placementProp = 'bottom',
+  arrowPadding = 10,
+  arrowHeight = 8,
+  offsetByMainAxis = 8,
+  offsetByCrossAxis = 0,
+  hideWhenReferenceHidden,
+  disableFlipMiddleware = false,
+  disableTriggerOnFocus = false,
+  onReferenceHiddenChange,
+
+  // useFloatingWithInteractions
+  defaultShown,
+  shown: shownProp,
+  onShownChange,
+  hoverDelay = 150,
+  strategy,
+
+  // инверсированные св-ва для useFloatingWithInteractions
+  enableInteractive = false,
+  disableArrow = false,
+  disableCloseAfterClick = false,
+
+  // AppRootProps
+  usePortal,
+
+  // TooltipBaseProps
+  id: idProp,
+  getRootRef,
+  appearance = 'neutral',
+  style: styleProp,
+  className,
+  zIndex = 'var(--vkui--z_index_popout)',
+  closable,
+  onPlacementChange,
+  ...popperProps
+}: UseTooltipProps): UseTooltipResult => {
+  const generatedId = React.useId();
+  const tooltipId = idProp || generatedId;
+
+  const renderFloatingComponent = useCallback(
+    ({
+      shown,
+      floatingProps,
+      floatingRef,
+      placement: resultPlacement,
+      middlewareData,
+      setArrowRef,
+      willBeHide,
+      onClose,
+    }: FloatingComponentProps<HTMLDivElement>) => {
+      if (!shown) {
+        return null;
+      }
+      return (
+        <AppRootPortal usePortal={usePortal}>
+          <TooltipBase
+            {...popperProps}
+            {...floatingProps}
+            style={{
+              ...floatingProps.style,
+              zIndex,
+              ...styleProp,
+            }}
+            id={tooltipId}
+            getRootRef={floatingRef}
+            appearance={appearance}
+            arrowProps={
+              disableArrow
+                ? undefined
+                : {
+                    placement: resultPlacement,
+                    coords: getArrowCoordsByMiddlewareData(middlewareData),
+                    getRootRef: setArrowRef,
+                  }
+            }
+            className={classNames(
+              willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,
+              className,
+            )}
+            onCloseIconClick={closable ? onClose : undefined}
+          />
+        </AppRootPortal>
+      );
+    },
+    [
+      appearance,
+      className,
+      closable,
+      disableArrow,
+      popperProps,
+      styleProp,
+      tooltipId,
+      usePortal,
+      zIndex,
+    ],
+  );
+
+  const remapReferenceProps: Exclude<UseFloatingElementProps['remapReferenceProps'], undefined> =
+    useCallback(
+      ({ shown, ...referenceProps }) => ({
+        ...referenceProps,
+        ...(shown && { 'aria-describedby': tooltipId }),
+      }),
+      [tooltipId],
+    );
+
+  const { component, anchorRef, anchorProps } = useFloatingElement({
+    placement: placementProp,
+    arrow: !disableArrow,
+    arrowHeight,
+    arrowPadding,
+    offsetByMainAxis,
+    offsetByCrossAxis,
+    hideWhenReferenceHidden,
+    disableFlipMiddleware,
+
+    defaultShown,
+    shown: shownProp,
+    onShownChange,
+    trigger: disableTriggerOnFocus ? 'hover' : ['hover', 'focus'],
+    onReferenceHiddenChange,
+    hoverDelay,
+    closeAfterClick: !disableCloseAfterClick,
+    disableInteractive: !enableInteractive,
+    strategy,
+
+    onPlacementChange,
+
+    renderFloatingComponent,
+    externalFloatingElementRef: getRootRef,
+    remapReferenceProps,
+  });
+
+  return {
+    anchorRef,
+    anchorProps,
+    tooltip: component,
+  };
+};

package/src/components/TooltipBase/TooltipBase.module.css

@@ -7,23 +7,23 @@
   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;
   padding-inline: 12px;
-  border-radius: var(--vkui--size_border_radius--regular);
   color: var(--vkui--color_text_primary);
+  background-color: var(--vkui--color_background_contrast_themed);
+  border-radius: var(--vkui--size_border_radius--regular);
+  box-shadow: var(--vkui--elevation3);
 }
 
 .closeButton {
   flex-grow: 0;
   flex-shrink: 0;
   align-self: flex-start;
+  padding: 0;
   margin-inline-start: 10px;
   color: inherit;
-  padding: 0;
-  border: 0;
   background: none;
+  border: 0;
 }
 
 .title,
@@ -36,8 +36,8 @@
 }
 
 .appearanceAccent .content {
-  background-color: var(--vkui--color_background_accent_tint);
   color: var(--vkui--color_text_contrast);
+  background-color: var(--vkui--color_background_accent_tint);
 }
 
 .appearanceAccent .arrow {
@@ -45,8 +45,8 @@
 }
 
 .appearanceWhite .content {
-  background-color: var(--vkui--color_background_contrast);
   color: var(--vkui--color_text_primary_invariably);
+  background-color: var(--vkui--color_background_contrast);
 }
 
 .appearanceWhite .arrow {
@@ -54,8 +54,8 @@
 }
 
 .appearanceBlack .content {
-  background-color: var(--vkui--color_background_contrast_inverse);
   color: var(--vkui--color_text_contrast);
+  background-color: var(--vkui--color_background_contrast_inverse);
 }
 
 .appearanceBlack .arrow {
@@ -63,8 +63,8 @@
 }
 
 .appearanceInversion .content {
-  background-color: var(--vkui--color_background_modal_inverse);
   color: var(--vkui--color_text_contrast_themed);
+  background-color: var(--vkui--color_background_modal_inverse);
 }
 
 .appearanceInversion .arrow {

package/src/components/Touch/Touch.tsx

@@ -2,10 +2,42 @@
 
 import * as React from 'react';
 import { useStableCallback } from '../../hooks/useStableCallback';
-import { getWindow, isHTMLElement } from '../../lib/dom';
+import { getWindow, isHTMLElement, isSVGElement } from '../../lib/dom';
 import { coordX, coordY, touchEnabled, type VKUITouchEvent } from '../../lib/touch';
 import type { HasComponent, HasRootRef } from '../../types';
 
+/**
+ * Костыль для правильной работы тайпскрипта.
+ */
+type HTMLorSVGElementWithEvents = {
+  /**
+   * AddEventListener.
+   */
+  addEventListener: (<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions,
+  ) => void) &
+    (<K extends keyof SVGElementEventMap>(
+      type: K,
+      listener: (this: SVGElement, ev: SVGElementEventMap[K]) => any,
+      options?: boolean | AddEventListenerOptions,
+    ) => void);
+  /**
+   * RemoveEventListener.
+   */
+  removeEventListener: (<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+    options?: boolean | EventListenerOptions,
+  ) => void) &
+    (<K extends keyof SVGElementEventMap>(
+      type: K,
+      listener: (this: SVGElement, ev: SVGElementEventMap[K]) => any,
+      options?: boolean | EventListenerOptions,
+    ) => void);
+};
+
 export interface CustomTouchEvent extends Gesture {
   originalEvent: VKUITouchEvent;
 }
@@ -205,10 +237,10 @@ export const Touch = ({
     // FIXME: заменить touch/mouse-события ниже на pointer-события после того, как бразуеры из
     // .browserslistrc начнут поддерживать его (см. https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#browser_compatibility).
     if (isTouchEnabled) {
-      if (isHTMLElement(event.target)) {
+      if (isHTMLElement(event.target) || isSVGElement(event.target)) {
         // Тач-события не всплывают, поэтому навешиваем события на целевой элемент
         // см. #235, #1968, https://stackoverflow.com/a/45760014
-        const target = event.target;
+        const target: HTMLorSVGElementWithEvents = event.target;
 
         target.addEventListener('touchmove', handleNativePointerMove, eventOptions);
         target.addEventListener('touchend', handleNativePointerUp, eventOptions);