@vkontakte/vkui 7.1.3 → 7.2.1

package/src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.module.css

@@ -1,13 +1,13 @@
 .host {
   position: absolute;
-  z-index: var(--vkui_internal--z_index_image_base_badge);
-  inset-inline-end: 0;
   inset-block-end: 0;
+  inset-inline-end: 0;
+  z-index: var(--vkui_internal--z_index_image_base_badge);
+  padding: 2px;
   border-radius: 50%;
 
   /* Смещаем на `padding-top` и `padding-left`, чтобы не учитывать `padding` при позиционировании. */
   transform: translate(2px, 2px);
-  padding: 2px;
 }
 
 .backgroundStroke {
@@ -16,11 +16,11 @@
 }
 
 .backgroundShadow::before {
-  content: '';
   position: absolute;
   inset: 2px;
   margin: auto;
+  pointer-events: none;
+  content: '';
   border-radius: inherit;
   box-shadow: var(--vkui--elevation1);
-  pointer-events: none;
 }

package/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.module.css

@@ -84,29 +84,29 @@
 }
 
 .placementTopStart {
-  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
   inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
 }
 
 .placementTop {
-  inset-inline-start: 50%;
   inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+  inset-inline-start: 50%;
   transform: translateX(-50%);
 }
 
 .placementTopEnd {
-  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
   inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
 }
 
 .placementBottomStart {
-  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
   inset-block-end: var(--vkui_internal--FloatElement_vertical_indent);
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
 }
 
 .placementBottom {
-  inset-inline-start: 50%;
   inset-block-end: var(--vkui_internal--FloatElement_vertical_indent);
+  inset-inline-start: 50%;
   transform: translateX(-50%);
 }
 
@@ -116,19 +116,19 @@
 }
 
 .placementMiddleStart {
-  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
   inset-block-start: 50%;
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
   transform: translateY(-50%);
 }
 
 .placementMiddle {
-  inset-inline-start: 50%;
   inset-block-start: 50%;
+  inset-inline-start: 50%;
   transform: translate(-50%, -50%);
 }
 
 .placementMiddleEnd {
-  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
   inset-block-start: 50%;
+  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
   transform: translateY(-50%);
 }

package/src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.module.css

@@ -1,12 +1,12 @@
 .host {
   position: absolute;
-  z-index: var(--vkui_internal--z_index_image_base_overlay);
   inset-block-start: 0;
   inset-inline-start: 0;
+  z-index: var(--vkui_internal--z_index_image_base_overlay);
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
   inline-size: 100%;
   block-size: 100%;
   border: 0;

package/src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';
 import { useColorScheme } from '../../../hooks/useColorScheme';
 import { useExternRef } from '../../../hooks/useExternRef';
 import { useFocusVisible } from '../../../hooks/useFocusVisible';
@@ -10,7 +9,7 @@ import { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassNam
 import { clickByKeyboardHandler } from '../../../lib/utils';
 import { ImageBaseContext } from '../context';
 import { validateOverlayIcon } from '../validators';
-import { useNonInteractiveOverlayProps } from './hooks';
+import { useCalculatedDefaultVisibility, useNonInteractiveOverlayProps } from './hooks';
 import type {
   ImageBaseOverlayInteractiveProps,
   ImageBaseOverlayNonInteractiveProps,
@@ -95,9 +94,8 @@ export const ImageBaseOverlay: React.FC<ImageBaseOverlayProps> = ({
   ...restProps
 }: ImageBaseOverlayProps) => {
   const colorScheme = useColorScheme();
-  const hasPointer = useAdaptivityHasPointer();
+
   const theme = themeProp ?? colorScheme;
-  const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');
 
   const commonClassNames = classNames(
     styles.host,
@@ -106,6 +104,9 @@ export const ImageBaseOverlay: React.FC<ImageBaseOverlayProps> = ({
     className,
   );
 
+  const defaultVisibility = useCalculatedDefaultVisibility();
+  const visibility = visibilityProp ?? defaultVisibility;
+
   const commonProps = {
     className: commonClassNames,
     overlayShown: visibility === 'always',

package/src/components/ImageBase/ImageBaseOverlay/hooks.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
+import { hasMouse as hasPointerLib } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../../hooks/useAdaptivity';
 import { useFocusWithin } from '../../../hooks/useFocusWithin';
+import { useIsClient } from '../../../hooks/useIsClient';
 import { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';
 
 export function useNonInteractiveOverlayProps(rootRef: React.RefObject<HTMLElement | null>) {
@@ -24,3 +27,31 @@ export function useNonInteractiveOverlayProps(rootRef: React.RefObject<HTMLEleme
     onClick,
   };
 }
+
+/*
+ * Определям значение по умолчанию для свойства visibility.
+ *
+ * Задача состоит в том, чтобы правильно рендерить Overlay.
+ * Для устройств с мышкой, мы можем показывать его по наведению,
+ * а для остальных устройств он должен быть виден всегда.
+ *
+ * Задача в том, чтобы избежать проблем при гидратации,
+ * и отложить использование значения `always`, пока мы точно не уверены, что у пользоватея действительно нет мышки.
+ * Иначе Overlay при первом рендере может показаться, а потом исчезнуть.
+ *
+ * Основано на хуке `useAdaptivityHasPointer`, но если при первом рендере мы точно не знаем значения hasPointer, то возвращаем `on-hover`.
+ * */
+export function useCalculatedDefaultVisibility() {
+  const { hasPointer: hasPointerContext } = useAdaptivity();
+
+  const needTwoPassRendering = hasPointerContext === undefined;
+  const isClient = useIsClient(!needTwoPassRendering);
+
+  if (!isClient && hasPointerContext === undefined) {
+    return 'on-hover';
+  }
+
+  const hasPointer = hasPointerContext ?? hasPointerLib;
+
+  return hasPointer ? 'on-hover' : 'always';
+}

package/src/components/ImageBase/ImageBaseOverlay/types.ts

@@ -18,6 +18,10 @@ export interface ImageBaseOverlayCommonProps
    * - `"always"` – всегда показывать.
    *
    * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.
+   * > Определение просиходит с помощью двойного рендера, так что на устройствах без мыши
+   * > оверлей покажется не раньше второго рендера.
+   * > Если это критично (например при SSR), то старайтесь явно указывать значение `visibility`, либо используйте
+   * > [AdaptivityProvider](#/AdaptivityProvider) для того, чтобы явно определить `hasPointer`.
    */
   visibility?: 'on-hover' | 'always';
   className?: string;

package/src/components/InfoRow/InfoRow.module.css

@@ -1,14 +1,14 @@
 .host {
-  user-select: text;
-  text-overflow: ellipsis;
   overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: text;
 }
 
 .header {
   display: block;
   margin-block-end: 2px;
-  color: var(--vkui--color_text_subhead);
   overflow: hidden;
   text-overflow: ellipsis;
+  color: var(--vkui--color_text_subhead);
   white-space: nowrap;
 }

package/src/components/Input/Input.module.css

@@ -1,7 +1,7 @@
 .host {
   position: relative;
-  line-height: 20px;
   font-size: 16px;
+  line-height: 20px;
 }
 
 .alignCenter .el {
@@ -15,13 +15,13 @@
 .el {
   position: relative;
   z-index: var(--vkui_internal--z_index_form_field_element);
-  padding-block: 0;
-  padding-inline: 12px;
+  box-sizing: border-box;
   inline-size: 100%;
   block-size: var(--vkui--size_field_height--regular);
-  box-sizing: border-box;
-  border-radius: inherit;
+  padding-block: 0;
+  padding-inline: 12px;
   color: var(--vkui--color_text_primary);
+  border-radius: inherit;
 }
 
 .sizeYCompact .el {

package/src/components/InputLike/InputLike.module.css

@@ -4,12 +4,12 @@
 }
 
 .mask::after {
-  content: '';
   position: absolute;
-  inline-size: calc(100% - 0.1em);
-  block-size: 1px;
   inset-block-end: 0;
   inset-inline-start: 0;
+  inline-size: calc(100% - 0.1em);
+  block-size: 1px;
+  content: '';
   border-block-end: solid 1px var(--vkui--color_text_secondary);
 }
 

package/src/components/Link/Link.module.css

@@ -1,15 +1,15 @@
 .host {
-  color: var(--vkui_internal--link-color, var(--vkui--color_text_link));
-  border: 0;
-  background: none;
-  margin: 0;
+  display: inline;
   padding: 0;
+  margin: 0;
+  font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
-  font-family: inherit;
   line-height: inherit;
+  color: var(--vkui_internal--link-color, var(--vkui--color_text_link));
   text-align: inherit;
-  display: inline;
+  background: none;
+  border: 0;
   border-radius: 0;
 }
 

package/src/components/Mark/Mark.module.css

@@ -1,8 +1,8 @@
 .host {
-  border-radius: 4px;
   padding: 2px;
   margin: -2px;
+  color: inherit;
   /* Перебиваем значения браузера */
   background-color: var(--vkui--color_background_accent_themed_alpha);
-  color: inherit;
+  border-radius: 4px;
 }

package/src/components/MiniInfoCell/MiniInfoCell.module.css

@@ -15,11 +15,11 @@
 }
 
 .middle {
+  display: flex;
   flex: 1;
+  align-items: center;
   min-inline-size: 0;
   overflow: hidden;
-  display: flex;
-  align-items: center;
 }
 
 .content {
@@ -27,15 +27,15 @@
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   word-break: break-word;
+  white-space: nowrap;
 }
 
 .textWrapShort .content {
-  white-space: initial;
   display: -webkit-box;
   max-block-size: 60px;
   -webkit-line-clamp: 3;
+  white-space: initial;
   -webkit-box-orient: vertical;
 }
 
@@ -49,8 +49,8 @@
 }
 
 .after {
-  margin-inline-start: var(--vkui--spacing_size_xl);
   margin-block: calc(-1 * var(--vkui--spacing_size_2xs));
+  margin-inline-start: var(--vkui--spacing_size_xl);
 }
 
 .modeAdd,

package/src/components/ModalCard/ModalCard.module.css

@@ -1,7 +1,7 @@
 .host {
+  inline-size: 100%;
   padding: var(--vkui--spacing_size_m);
   margin-inline: auto;
-  inline-size: 100%;
 }
 
 .host:focus {
@@ -26,12 +26,12 @@
   --vkui_internal_ModalCard--safeAreaInsetBottom: var(--vkui_internal--safe_area_inset_bottom);
 
   position: absolute;
-  inset-inline: 0;
   inset-block-end: 0;
+  inset-inline: 0;
+  box-sizing: border-box;
   margin-block-end: var(--vkui_internal_ModalCard--safeAreaInsetBottom);
   transform: translate3d(0, calc(100% - var(--vkui_internal_ModalCard--translateY)), 0);
   transition: transform 0.4s var(--vkui_internal--spring-easing);
-  box-sizing: border-box;
 }
 
 .hostMobile.hostStateEnter {
@@ -55,10 +55,10 @@
 
 /* Desktop */
 .hostDesktop {
+  box-sizing: content-box;
   margin-block: auto;
   opacity: 1;
   transition: opacity 340ms var(--vkui--animation_easing_platform);
-  box-sizing: content-box;
 }
 
 .hostDesktop.hostStateEnter {

package/src/components/ModalCard/ModalCard.tsx

@@ -1,15 +1,10 @@
 'use client';
 
-import { useId } from 'react';
 import { ModalContext } from '../../context/ModalContext';
-import { getNavId } from '../../lib/getNavId';
-import { warnOnce } from '../../lib/warnOnce';
 import { useModalManager } from '../ModalRoot/useModalManager';
 import { ModalCardInternal } from './ModalCardInternal';
 import type { ModalCardProps } from './types';
 
-const warn = warnOnce('ModalCard');
-
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCard
  */
@@ -26,15 +21,13 @@ export const ModalCard = ({
   keepMounted = false,
   ...restProps
 }: ModalCardProps): React.ReactNode => {
-  const generatingId = useId();
-  const id = getNavId({ nav, id: idProp }, warn) || generatingId;
-
   const {
     mounted,
     shouldPreserveSnapPoint: excludedProp,
+    id,
     ...resolvedProps
   } = useModalManager({
-    id,
+    id: nav || idProp,
     open,
     keepMounted,
     modalOverlayTestId,
@@ -54,6 +47,7 @@ export const ModalCard = ({
       <ModalCardInternal
         id={id}
         aria-labelledby={`${id}-label`}
+        titleId={`${id}-label`}
         {...resolvedProps}
         {...restProps}
       />

package/src/components/ModalCard/ModalCardInternal.tsx

@@ -66,6 +66,7 @@ export const ModalCardInternal = ({
   dismissButtonMode,
   dismissLabel,
   noFocusToDialog,
+  restoreFocus,
   onOpen,
   onOpened,
   onClose = noop,
@@ -140,6 +141,7 @@ export const ModalCardInternal = ({
   useFocusTrap(ref, {
     autoFocus: !noFocusToDialog,
     disabled: !opened || hidden || disableFocusTrap,
+    restoreFocus,
   });
 
   return (

package/src/components/ModalCard/types.ts

@@ -12,7 +12,8 @@ export type ModalCardCloseReason =
 
 export interface ModalCardProps
   extends NavIdProps,
-    Omit<ModalCardBaseProps, 'id' | 'onClose' | 'onTransitionEnd' | keyof UseBottomSheetHandlers> {
+    Omit<ModalCardBaseProps, 'id' | 'onClose' | 'onTransitionEnd' | keyof UseBottomSheetHandlers>,
+    Pick<UseFocusTrapProps, 'restoreFocus'> {
   /**
    * Состояние видимости.
    *

package/src/components/ModalCardBase/ModalCardBase.module.css

@@ -1,13 +1,13 @@
 .container {
-  box-sizing: border-box;
   position: relative;
-  background: var(--vkui--color_background_modal);
-  border-radius: 12px;
-  padding: 16px;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  padding: 16px;
   pointer-events: initial;
+  background: var(--vkui--color_background_modal);
+  border-radius: 12px;
   box-shadow: var(--vkui--elevation3);
 
   --vkui_internal--background: var(--vkui--color_background_modal);
@@ -30,10 +30,10 @@
 
 .title,
 .description {
-  text-align: center;
-  margin: 0;
   padding-block: 0;
   padding-inline: 8px;
+  margin: 0;
+  text-align: center;
   word-break: break-word;
 }
 
@@ -59,8 +59,8 @@
   position: absolute;
   inset-block-start: 0;
   inset-inline-end: 0;
-  color: var(--vkui--color_icon_secondary);
   padding: var(--vkui_internal--dismiss_icon_padding);
+  color: var(--vkui--color_icon_secondary);
 }
 
 /**

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -1,16 +1,20 @@
 'use client';
 
 import * as React from 'react';
+import { Icon20Cancel, Icon24Dismiss } from '@vkontakte/icons';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { usePlatform } from '../../hooks/usePlatform';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';
+import { ModalOutsideButton } from '../ModalOutsideButton/ModalOutsideButton';
+import { ModalOutsideButtons } from '../ModalOutsideButtons/ModalOutsideButtons';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Spacing } from '../Spacing/Spacing';
+import { Tappable } from '../Tappable/Tappable';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import { Title } from '../Typography/Title/Title';
-import { ModalCardBaseCloseButton } from './ModalCardBaseCloseButton';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './ModalCardBase.module.css';
 
 export interface ModalCardBaseProps
@@ -28,6 +32,8 @@ export interface ModalCardBaseProps
   title?: React.ReactNode;
   /* Позволяет поменять тег используемый для заголовка */
   titleComponent?: React.ElementType;
+  /* Позволяет задать id для заголовка. Используется, чтобы связать модальное окно и title через aria-labelledby, тем самым задав модальному окну имя через title */
+  titleId?: string;
 
   /**
    * Описание
@@ -81,6 +87,13 @@ export interface ModalCardBaseProps
    * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте
    */
   preventClose?: boolean;
+  /**
+   * Управляющие элементы под кнопкой закрытия.
+   *
+   * Доступно только в `compact`-режиме. Рекомендуется размещать иконки размера 20, обернутые в ModalOutsideButton
+   *
+   */
+  outsideButtons?: React.ReactNode;
 }
 
 /**
@@ -95,11 +108,13 @@ export const ModalCardBase = ({
   children,
   actions,
   onClose,
-  dismissLabel = 'Скрыть',
+  dismissLabel = 'Закрыть',
   size: sizeProp,
   modalDismissButtonTestId,
   dismissButtonMode = 'outside',
   preventClose,
+  outsideButtons,
+  titleId,
   ...restProps
 }: ModalCardBaseProps): React.ReactNode => {
   const platform = usePlatform();
@@ -129,7 +144,13 @@ export const ModalCardBase = ({
       <div className={styles.container}>
         {hasReactNode(icon) && <div className={styles.icon}>{icon}</div>}
         {hasReactNode(title) && (
-          <Title level="2" weight="2" className={styles.title} Component={titleComponent}>
+          <Title
+            id={titleId}
+            level="2"
+            weight="2"
+            className={styles.title}
+            Component={titleComponent}
+          >
             {title}
           </Title>
         )}
@@ -146,14 +167,33 @@ export const ModalCardBase = ({
 
         {hasReactNode(actions) && <div className={styles.actions}>{actions}</div>}
 
-        {dismissButtonMode !== 'none' && (
-          <ModalCardBaseCloseButton
-            testId={modalDismissButtonTestId}
-            onClose={onClose}
-            mode={dismissButtonMode}
+        {isDesktop && (dismissButtonMode === 'outside' || outsideButtons) && (
+          <ModalOutsideButtons>
+            {dismissButtonMode === 'outside' && (
+              <ModalOutsideButton
+                aria-label={dismissLabel}
+                data-testid={modalDismissButtonTestId}
+                onClick={onClose}
+              >
+                <Icon20Cancel />
+              </ModalOutsideButton>
+            )}
+            {outsideButtons}
+          </ModalOutsideButtons>
+        )}
+
+        {(dismissButtonMode === 'inside' ||
+          (platform === 'ios' && !isDesktop && dismissButtonMode !== 'none')) && (
+          <Tappable
+            className={styles.dismiss}
+            onClick={onClose}
+            hoverMode="opacity"
+            activeMode="opacity"
+            data-testid={modalDismissButtonTestId}
           >
-            {dismissLabel}
-          </ModalCardBaseCloseButton>
+            <VisuallyHidden>{dismissLabel}</VisuallyHidden>
+            {platform === 'ios' ? <Icon24Dismiss /> : <Icon20Cancel />}
+          </Tappable>
         )}
       </div>
     </RootComponent>

package/src/components/ModalDismissButton/ModalDismissButton.module.css

@@ -2,32 +2,4 @@
   position: absolute;
   inset-block-start: 0;
   inset-inline-end: -56px;
-  inline-size: 56px;
-  block-size: 56px;
-  padding: 18px;
-  box-sizing: border-box;
-  color: var(--vkui--color_icon_contrast);
-}
-
-.host::before {
-  display: block;
-  content: '';
-  inset: 14px;
-  background: var(--vkui--color_overlay_secondary);
-  border-radius: 50%;
-  position: absolute;
-  transition: background-color 0.15s ease-out;
-}
-
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- fixes icon misplacement on Safari in some cases */
-.host :global(.vkuiIcon) {
-  transform: translateX(0);
-}
-
-.hover::before {
-  background: var(--vkui--color_overlay_secondary--hover);
-}
-
-.active::before {
-  background: var(--vkui--color_overlay_secondary--active);
 }

package/src/components/ModalDismissButton/ModalDismissButton.tsx

@@ -1,27 +1,29 @@
 import * as React from 'react';
 import { Icon20Cancel } from '@vkontakte/icons';
-import { Tappable, type TappableProps } from '../Tappable/Tappable';
+import { classNames } from '@vkontakte/vkjs';
+import {
+  ModalOutsideButton,
+  type ModalOutsideButtonProps,
+} from '../ModalOutsideButton/ModalOutsideButton';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './ModalDismissButton.module.css';
 
-export type ModalDismissButtonProps = Omit<TappableProps, 'mode' | 'onClose'>;
+export interface ModalDismissButtonProps extends Omit<ModalOutsideButtonProps, 'children'> {
+  children?: React.ReactNode;
+}
 
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalDismissButton
  */
 export const ModalDismissButton = ({
   children = 'Закрыть',
+  className,
   ...restProps
 }: ModalDismissButtonProps): React.ReactNode => {
   return (
-    <Tappable
-      baseClassName={styles.host}
-      {...restProps}
-      activeMode={styles.active}
-      hoverMode={styles.hover}
-    >
+    <ModalOutsideButton className={classNames(styles.host, className)} {...restProps}>
       {children && <VisuallyHidden>{children}</VisuallyHidden>}
       <Icon20Cancel />
-    </Tappable>
+    </ModalOutsideButton>
   );
 };

package/src/components/ModalOutlet/ModalOutlet.module.css

@@ -1,9 +1,9 @@
 .host:not([hidden]) {
-  isolation: isolate;
   position: fixed;
   inset: 0;
   z-index: var(--vkui--z_index_modal);
   overflow: hidden;
+  isolation: isolate;
 }
 
 /* Desktop */