@vkontakte/vkui 6.5.2 → 6.6.0

package/src/components/Tappable/Tappable.tsx

@@ -2,9 +2,9 @@ import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { SizeType } from '../../lib/adaptivity';
 import { mergeCalls } from '../../lib/mergeCalls';
-import { checkClickable, Clickable, ClickableProps } from '../Clickable/Clickable';
+import { checkClickable, Clickable, type ClickableProps } from '../Clickable/Clickable';
 import { Ripple, useMaybeNeedRipple, useRipple } from './Ripple';
-import { activeClass, DEFAULT_STATE_MODE, hoverClass, StateProps } from './state';
+import { activeClass, DEFAULT_STATE_MODE, hoverClass, type StateProps } from './state';
 import styles from './Tappable.module.css';
 
 const sizeXClassNames = {

package/src/components/Tappable/state.tsx

@@ -1,4 +1,4 @@
-import { LiteralUnion } from '../../types';
+import type { LiteralUnion } from '../../types';
 import styles from './Tappable.module.css';
 
 type StateMode = 'opacity' | 'background' | 'none';

package/src/components/Textarea/Textarea.tsx

@@ -6,8 +6,8 @@ import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { usePlatform } from '../../hooks/usePlatform';
 import { callMultiple } from '../../lib/callMultiple';
 import { useDOM } from '../../lib/dom';
-import { HasAlign, HasRef, HasRootRef } from '../../types';
-import { FormField, FormFieldProps } from '../FormField/FormField';
+import type { HasAlign, HasRef, HasRootRef } from '../../types';
+import { FormField, type FormFieldProps } from '../FormField/FormField';
 import { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';
 import { useResizeTextarea } from './useResizeTextarea';
 import styles from './Textarea.module.css';

package/src/components/ToolButton/ToolButton.tsx

@@ -2,9 +2,9 @@ import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import {
   AdaptiveIconRenderer,
-  AdaptiveIconRendererProps,
+  type AdaptiveIconRendererProps,
 } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';
-import { Tappable, TappableProps } from '../Tappable/Tappable';
+import { Tappable, type TappableProps } from '../Tappable/Tappable';
 import styles from './ToolButton.module.css';
 
 const stylesMode = {

package/src/components/Tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { classNames } from '@vkontakte/vkjs';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown';
 import { usePatchChildren } from '../../hooks/usePatchChildren';
@@ -7,13 +7,14 @@ import { animationFadeClassNames } from '../../lib/animation';
 import {
   type FloatingComponentProps,
   getArrowCoordsByMiddlewareData,
+  type OnShownChange,
   useFloatingMiddlewaresBootstrap,
   useFloatingWithInteractions,
   usePlacementChangeCallback,
 } from '../../lib/floating';
 import { AppRootPortal } from '../AppRoot/AppRootPortal';
+import { type FloatingArrowProps as FloatingArrowPropsPrivate } from '../FloatingArrow/FloatingArrow';
 import { TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';
-import { Subhead } from '../Typography/Subhead/Subhead';
 
 type AllowedFloatingComponentProps = Pick<
   FloatingComponentProps,
@@ -33,7 +34,22 @@ type AllowedFloatingComponentProps = Pick<
   | 'disableFlipMiddleware'
 >;
 
-type AllowedTooltipBaseProps = Omit<TooltipBaseProps, 'arrowProps'>;
+type AllowedTooltipBaseProps = Omit<TooltipBaseProps, 'arrowProps' | 'onCloseIconClick'>;
+
+/**
+ * @alias
+ * @public
+ */
+export type TooltipArrowProps = Omit<
+  FloatingArrowPropsPrivate,
+  'getRootRef' | 'coords' | 'placement' | 'Icon'
+>;
+
+/**
+ * @alias
+ * @public
+ */
+export type TooltipOnShownChange = OnShownChange;
 
 export interface TooltipProps extends AllowedFloatingComponentProps, AllowedTooltipBaseProps {
   /**
@@ -47,6 +63,12 @@ export interface TooltipProps extends AllowedFloatingComponentProps, AllowedTool
    * Добавляет возможность наводить на тултип.
    */
   enableInteractive?: boolean;
+  /**
+   * Добавляет возможность закрыть тултип через иконку-крестик.
+   *
+   * > Работает в сочетании с `enableInteractive` или при использовании `shown` и `onShownChange`.
+   */
+  closable?: boolean;
   /**
    * Скрывает стрелку, указывающую на якорный элемент.
    */
@@ -95,12 +117,11 @@ export const Tooltip = ({
   // TooltipBaseProps
   id: idProp,
   getRootRef,
-  text,
-  header,
   appearance = 'neutral',
   style: styleProp,
   className,
   zIndex = 'var(--vkui--z_index_popout)',
+  closable,
   onPlacementChange,
   ...popperProps
 }: TooltipProps): React.ReactNode => {
@@ -130,6 +151,7 @@ export const Tooltip = ({
     referenceProps,
     floatingProps,
     middlewareData,
+    onClose,
     onEscapeKeyDown,
   } = useFloatingWithInteractions({
     defaultShown,
@@ -148,16 +170,16 @@ export const Tooltip = ({
 
   let tooltip: React.ReactNode = null;
   if (shown) {
-    referenceProps['aria-describedby'] = tooltipId;
-    floatingProps.style.zIndex = zIndex;
-    if (styleProp) {
-      Object.assign(floatingProps.style, styleProp);
-    }
     tooltip = (
       <AppRootPortal usePortal={usePortal}>
         <TooltipBase
           {...popperProps}
           {...floatingProps}
+          style={{
+            ...floatingProps.style,
+            zIndex,
+            ...styleProp,
+          }}
           id={tooltipId}
           getRootRef={tooltipRef}
           appearance={appearance}
@@ -170,21 +192,23 @@ export const Tooltip = ({
                   getRootRef: setArrowRef,
                 }
           }
-          text={
-            <React.Fragment>
-              {hasReactNode(header) && <Subhead weight="2">{header}</Subhead>}
-              {hasReactNode(text) && <Subhead>{text}</Subhead>}
-            </React.Fragment>
-          }
           className={classNames(
             willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,
             className,
           )}
+          onCloseIconClick={closable ? onClose : undefined}
         />
       </AppRootPortal>
     );
   }
-  const [, child] = usePatchChildren(children, referenceProps, refs.setReference);
+  const [, child] = usePatchChildren(
+    children,
+    {
+      ...referenceProps,
+      ...(shown && { 'aria-describedby': tooltipId }),
+    },
+    refs.setReference,
+  );
 
   useGlobalEscKeyDown(shown, onEscapeKeyDown);
 

package/src/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,17 @@
   color: var(--vkui--color_text_primary);
 }
 
+.TooltipBase__closeButton {
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-self: flex-start;
+  margin-inline-start: 10px;
+  color: inherit;
+  padding: 0;
+  border: 0;
+  background: none;
+}
+
 .TooltipBase__arrow {
   color: var(--vkui--color_background_contrast_themed);
 }

package/src/components/TooltipBase/TooltipBase.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
+import { Icon16Cancel } from '@vkontakte/icons';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { DefaultIcon } from '../FloatingArrow/DefaultIcon';
 import { FloatingArrow, type FloatingArrowProps } 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;
@@ -58,6 +61,14 @@ export interface TooltipBaseProps
    * Передача `null` полностью сбрасывает установку `max-width` на элемент.
    */
   maxWidth?: number | string | null;
+  /**
+   * Скрытый текст для кнопки закрытия.
+   */
+  closeIconLabel?: string;
+  /**
+   * Обработчик нажатия на кнопку закрытия. При передаче, показывается иконка.
+   */
+  onCloseIconClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 /**
@@ -73,6 +84,8 @@ export const TooltipBase = ({
   text,
   header,
   maxWidth = TOOLTIP_MAX_WIDTH,
+  closeIconLabel = 'Закрыть',
+  onCloseIconClick,
   className,
   ...restProps
 }: TooltipBaseProps): React.ReactNode => {
@@ -97,8 +110,22 @@ export const TooltipBase = ({
         className={styles['TooltipBase__content']}
         style={maxWidth !== null ? { maxWidth } : undefined}
       >
-        {header && <Subhead weight="2">{header}</Subhead>}
-        {text && <Subhead>{text}</Subhead>}
+        <div>
+          {hasReactNode(header) && <Subhead weight="2">{header}</Subhead>}
+          {hasReactNode(text) && <Subhead>{text}</Subhead>}
+        </div>
+        {typeof onCloseIconClick === 'function' && (
+          <Tappable
+            Component="button"
+            className={styles['TooltipBase__closeButton']}
+            hoverMode="opacity"
+            activeMode="opacity"
+            onClick={onCloseIconClick}
+          >
+            <VisuallyHidden>{closeIconLabel}</VisuallyHidden>
+            <Icon16Cancel display="block" />
+          </Tappable>
+        )}
       </div>
     </RootComponent>
   );