@vkontakte/vkui 7.1.3 → 7.2.1

package/src/components/ModalOutsideButton/ModalOutsideButton.module.css

@@ -0,0 +1,30 @@
+.host {
+  box-sizing: border-box;
+  inline-size: 56px;
+  block-size: 56px;
+  padding: 18px;
+  color: var(--vkui--color_icon_contrast);
+}
+
+.host::before {
+  position: absolute;
+  inset: 14px;
+  display: block;
+  content: '';
+  background: var(--vkui--color_overlay_secondary);
+  border-radius: 50%;
+  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/ModalOutsideButton/ModalOutsideButton.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import * as React from 'react';
+import { Tappable, type TappableProps } from '../Tappable/Tappable';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
+import styles from './ModalOutsideButton.module.css';
+
+export interface ModalOutsideButtonProps extends TappableProps {
+  /**
+   * Текст для скринридера
+   */
+  'aria-label'?: string;
+  /**
+   * Рекомендуется использовать иконки размером `20px`
+   */
+  'children': React.ReactNode;
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalOutsideButton
+ */
+export const ModalOutsideButton = ({
+  children,
+  'aria-label': ariaLabel,
+  ...restProps
+}: ModalOutsideButtonProps) => {
+  return (
+    <Tappable
+      baseClassName={styles.host}
+      activeMode={styles.active}
+      hoverMode={styles.hover}
+      {...restProps}
+    >
+      {ariaLabel && <VisuallyHidden>{ariaLabel}</VisuallyHidden>}
+      {children}
+    </Tappable>
+  );
+};

package/src/components/ModalOutsideButtons/ModalOutsideButtons.module.css

@@ -0,0 +1,6 @@
+.host {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 100%;
+  box-sizing: border-box;
+}

package/src/components/ModalOutsideButtons/ModalOutsideButtons.tsx

@@ -0,0 +1,14 @@
+import { classNames } from '@vkontakte/vkjs';
+import { Flex, type FlexProps } from '../Flex/Flex';
+import styles from './ModalOutsideButtons.module.css';
+
+/**
+ * @private
+ */
+export const ModalOutsideButtons = ({ className, children, ...restProps }: FlexProps) => {
+  return (
+    <Flex direction="column" className={classNames(styles.host, className)} {...restProps}>
+      {children}
+    </Flex>
+  );
+};

package/src/components/ModalOverlay/ModalOverlay.module.css

@@ -1,10 +1,10 @@
 .host {
   inset: 0;
-  background-color: rgba(0, 0, 0, 0.4);
   user-select: none;
-  -webkit-tap-highlight-color: transparent;
+  background-color: rgba(0, 0, 0, 0.4);
   transition: opacity 0.3s linear;
   will-change: opacity;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .nonInteractive {

package/src/components/ModalPage/ModalPage.module.css

@@ -11,11 +11,11 @@
   --vkui_internal_ModalPage--userHeight: 100%;
 
   position: absolute;
-  inset-inline: 0;
   inset-block-end: 0;
+  inset-inline: 0;
+  box-sizing: border-box;
   max-inline-size: var(--vkui--size_popup_small--regular);
   pointer-events: none;
-  box-sizing: border-box;
 }
 
 .hostMobileSafeAreaInsetTop {
@@ -36,12 +36,12 @@
   --vkui_internal_ModalPage--userHeight: auto;
 
   position: relative;
-  margin-block: auto;
-  padding-inline: var(--vkui--spacing_size_xl);
-  padding-block: var(--vkui_internal_ModalPage--desktopSafeInsetBlock);
+  box-sizing: content-box;
   max-inline-size: var(--vkui_internal_ModalPage--desktopMaxWidth);
   max-block-size: var(--vkui_internal_ModalPage--desktopMaxHeight);
-  box-sizing: content-box;
+  padding-block: var(--vkui_internal_ModalPage--desktopSafeInsetBlock);
+  padding-inline: var(--vkui--spacing_size_xl);
+  margin-block: auto;
 }
 
 /* Неизвестный брейкпоинт */
@@ -66,7 +66,6 @@
 }
 
 .document {
-  inline-size: 100%;
   box-sizing: border-box;
 
   /*
@@ -75,6 +74,7 @@
   display: flex;
   flex-shrink: 1;
   flex-direction: column;
+  inline-size: 100%;
 }
 
 /* Mobile */
@@ -85,8 +85,8 @@
   );
 
   position: absolute;
-  inset-inline-start: 0;
   inset-block-end: 0;
+  inset-inline-start: 0;
   block-size: var(--vkui_internal_ModalPageDocument--snapPoint);
   max-block-size: 100%;
   padding-block-end: var(--vkui_internal_ModalPageDocument--safeAreaInsetBottom);
@@ -139,13 +139,6 @@
 }
 
 .children {
-  inline-size: 100%;
-  block-size: 100%;
-  border-start-start-radius: var(--vkui--size_border_radius_paper--regular);
-  border-start-end-radius: var(--vkui--size_border_radius_paper--regular);
-  background-color: var(--vkui--color_background_modal);
-  overflow: hidden;
-
   /*
    * Удерживает высоту в пределах 100% родителя при переполнении контента.
    *
@@ -156,11 +149,17 @@
   display: flex;
   flex-shrink: 1;
   flex-direction: column;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: hidden;
+  background-color: var(--vkui--color_background_modal);
+  border-start-start-radius: var(--vkui--size_border_radius_paper--regular);
+  border-start-end-radius: var(--vkui--size_border_radius_paper--regular);
 }
 
 /* Desktop */
 .childrenDesktop {
-  border-end-end-radius: var(--vkui--size_border_radius_paper--regular);
   border-end-start-radius: var(--vkui--size_border_radius_paper--regular);
+  border-end-end-radius: var(--vkui--size_border_radius_paper--regular);
   box-shadow: var(--vkui--elevation3);
 }

package/src/components/ModalPage/ModalPage.tsx

@@ -1,17 +1,13 @@
 'use client';
 
-import { useId, useMemo } from 'react';
+import { useMemo } from 'react';
 import { ModalContext } from '../../context/ModalContext';
 import { inRange } from '../../helpers/range';
-import { getNavId } from '../../lib/getNavId';
 import { SNAP_POINT_DETENTS, SNAP_POINT_SAFE_RANGE, type SnapPoint } from '../../lib/sheet';
-import { warnOnce } from '../../lib/warnOnce';
 import { useModalManager } from '../ModalRoot/useModalManager';
 import { ModalPageInternal } from './ModalPageInternal';
 import type { ModalPageProps } from './types';
 
-const warn = warnOnce('ModalPage');
-
 const snapPointCache = new Map<string, Exclude<SnapPoint, 'auto'>>();
 
 /**
@@ -33,11 +29,8 @@ export const ModalPage = ({
   keepMounted = false,
   ...restProps
 }: ModalPageProps) => {
-  const generatingId = useId();
-  const id = getNavId({ nav, id: idProp }, warn) || generatingId;
-
-  const { mounted, shouldPreserveSnapPoint, ...resolvedProps } = useModalManager({
-    id,
+  const { mounted, shouldPreserveSnapPoint, id, ...resolvedProps } = useModalManager({
+    id: nav || idProp,
     open,
     keepMounted,
     modalOverlayTestId,

package/src/components/ModalPage/ModalPageBase.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { Icon20Cancel } from '@vkontakte/icons';
+import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
+import { BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE } from '../../lib/sheet';
+import { type HasRef, type HTMLAttributesWithRootRef } from '../../types';
+import { ModalOutsideButton } from '../ModalOutsideButton/ModalOutsideButton';
+import { ModalOutsideButtons } from '../ModalOutsideButtons/ModalOutsideButtons';
+import { ModalPageContent } from '../ModalPageContent/ModalPageContent';
+import { RootComponent } from '../RootComponent/RootComponent';
+import { type ModalPageInternalProps } from './ModalPageInternal';
+import styles from './ModalPage.module.css';
+
+export interface ModalPageBaseProps
+  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'title'>,
+    HasRef<HTMLDivElement>,
+    Pick<
+      ModalPageInternalProps,
+      | 'disableContentPanningGesture'
+      | 'header'
+      | 'children'
+      | 'footer'
+      | 'outsideButtons'
+      | 'modalContentTestId'
+      | 'modalDismissButtonTestId'
+      | 'modalDismissButtonLabel'
+      | 'hideCloseButton'
+      | 'onClose'
+    > {
+  isDesktop?: boolean;
+  closable?: boolean;
+}
+
+export const ModalPageBase: React.FC<ModalPageBaseProps> = ({
+  isDesktop,
+  getRef,
+  disableContentPanningGesture,
+  header,
+  children,
+  footer,
+  outsideButtons,
+  modalContentTestId,
+  modalDismissButtonTestId,
+  modalDismissButtonLabel,
+  hideCloseButton,
+  closable,
+  onClose = noop,
+  ...restProps
+}) => {
+  const disableContentPanningGestureProp = disableContentPanningGesture
+    ? BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE
+    : undefined;
+
+  const closeButton =
+    hideCloseButton || !isDesktop ? null : (
+      <ModalOutsideButton
+        data-testid={modalDismissButtonTestId}
+        onClick={
+          closable
+            ? function handleDismissButtonClick(event) {
+                onClose('click-close-button', event);
+              }
+            : undefined
+        }
+        aria-label={modalDismissButtonLabel}
+      >
+        <Icon20Cancel />
+      </ModalOutsideButton>
+    );
+
+  return (
+    <RootComponent role="document" baseClassName={styles.document} {...restProps}>
+      <div className={classNames(styles.children, isDesktop && styles.childrenDesktop)}>
+        {hasReactNode(header) && header}
+        <ModalPageContent
+          getRootRef={getRef}
+          data-testid={modalContentTestId}
+          {...disableContentPanningGestureProp}
+        >
+          {children}
+        </ModalPageContent>
+        {hasReactNode(footer) && footer}
+      </div>
+      {isDesktop && (closeButton || outsideButtons) && (
+        <ModalOutsideButtons>
+          {closeButton}
+          {outsideButtons}
+        </ModalOutsideButtons>
+      )}
+    </RootComponent>
+  );
+};

package/src/components/ModalPage/ModalPageInternal.tsx

@@ -1,30 +1,24 @@
 'use client';
 
 import { type ComponentType, type KeyboardEvent, useCallback } from 'react';
-import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
+import { classNames, noop } from '@vkontakte/vkjs';
 import { mergeStyle } from '../../helpers/mergeStyle';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';
 import { Keys, pressedKey } from '../../lib/accessibility';
 import { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';
-import {
-  BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE,
-  type SnapPoint,
-  type SnapPointChange,
-  useBottomSheet,
-} from '../../lib/sheet';
+import { type SnapPoint, type SnapPointChange, useBottomSheet } from '../../lib/sheet';
 import type { CSSCustomProperties } from '../../types';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
-import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
 import { ModalOutlet } from '../ModalOutlet/ModalOutlet';
 import {
   ModalOverlay as ModalOverlayDefault,
   type ModalOverlayProps,
 } from '../ModalOverlay/ModalOverlay';
-import { ModalPageContent } from '../ModalPageContent/ModalPageContent';
+import { ModalPageBase } from './ModalPageBase';
 import type { ModalPageProps } from './types';
 import styles from './ModalPage.module.css';
 
@@ -67,10 +61,13 @@ export const ModalPageInternal = ({
   modalOverlayTestId,
   modalContentTestId,
   modalDismissButtonTestId,
+  modalDismissButtonLabel = 'Закрыть',
+  outsideButtons,
   noFocusToDialog,
   hideCloseButton,
   preventClose,
   disableContentPanningGesture,
+  restoreFocus,
   onOpen,
   onOpened,
   onClose = noop,
@@ -119,9 +116,6 @@ export const ModalPageInternal = ({
   const handleSheetRef = useExternRef<HTMLDivElement>(setSheetEl, ref);
   const handleSheetScrollRef = useExternRef<HTMLDivElement>(setSheetScrollEl, getModalContentRef);
 
-  const disableContentPanningGestureProp = disableContentPanningGesture
-    ? BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE
-    : undefined;
   const [desktopMaxWidthClassName, desktopMaxWidthStyle] = resolveDesktopMaxWidth(
     isDesktop ? desktopMaxWidth : 's',
   );
@@ -140,19 +134,6 @@ export const ModalPageInternal = ({
       }
     />
   );
-  const closeButton =
-    hideCloseButton || !isDesktop ? null : (
-      <ModalDismissButton
-        data-testid={modalDismissButtonTestId}
-        onClick={
-          closable
-            ? function handleDismissButtonClick(event) {
-                onClose('click-close-button', event);
-              }
-            : undefined
-        }
-      />
-    );
   const handleEscKeyDown = useCallback(
     (event: KeyboardEvent<HTMLElement>) => {
       if (closable && pressedKey(event) === Keys.ESCAPE) {
@@ -170,6 +151,7 @@ export const ModalPageInternal = ({
       <FocusTrap
         {...restProps}
         autoFocus={!noFocusToDialog}
+        restoreFocus={restoreFocus}
         role="dialog"
         aria-modal="true"
         disabled={!opened || hidden || disableFocusTrap}
@@ -186,31 +168,30 @@ export const ModalPageInternal = ({
         )}
         style={mergeStyle(mergeStyle(desktopMaxWidthStyle, getHeightCSSVariable(height)), style)}
       >
-        <div
+        <ModalPageBase
           {...bottomSheetEventHandlers}
-          ref={handleSheetRef}
-          role="document"
+          getRootRef={handleSheetRef}
+          getRef={handleSheetScrollRef}
           style={documentStyle}
           className={classNames(
-            styles.document,
             isDesktop ? styles.documentDesktop : styles.documentMobile,
             transitionStateClassNames[transitionState],
           )}
           onTransitionEnd={onTransitionEnd}
+          isDesktop={isDesktop}
+          disableContentPanningGesture={disableContentPanningGesture}
+          header={header}
+          footer={footer}
+          outsideButtons={outsideButtons}
+          modalContentTestId={modalContentTestId}
+          modalDismissButtonTestId={modalDismissButtonTestId}
+          modalDismissButtonLabel={modalDismissButtonLabel}
+          hideCloseButton={hideCloseButton}
+          closable={closable}
+          onClose={onClose}
         >
-          <div className={classNames(styles.children, isDesktop && styles.childrenDesktop)}>
-            {hasReactNode(header) && header}
-            <ModalPageContent
-              getRootRef={handleSheetScrollRef}
-              data-testid={modalContentTestId}
-              {...disableContentPanningGestureProp}
-            >
-              {children}
-            </ModalPageContent>
-            {hasReactNode(footer) && footer}
-          </div>
-          {closeButton}
-        </div>
+          {children}
+        </ModalPageBase>
       </FocusTrap>
     </ModalOutlet>
   );

package/src/components/ModalPage/types.ts

@@ -16,6 +16,7 @@ type OmittedStyleAttribute = {
 export interface ModalPageProps
   extends NavIdProps,
     Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'id' | 'style'>,
+    Pick<UseFocusTrapProps, 'restoreFocus'>,
     OmittedStyleAttribute {
   /**
    * Состояние видимости.
@@ -84,6 +85,10 @@ export interface ModalPageProps
    * `data-testid` для кнопки закрытия.
    */
   modalDismissButtonTestId?: string;
+  /**
+   * Текст для скринридера
+   */
+  modalDismissButtonLabel?: string;
   /**
    * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)
    *
@@ -110,6 +115,13 @@ export interface ModalPageProps
    * Будет вызвано при окончательном закрытии модалки.
    */
   onClosed?: VoidFunction;
+  /**
+   * Управляющие элементы под кнопкой закрытия.
+   *
+   * Доступно только в `compact`-режиме. Рекомендуется размещать иконки размера 20, обернутые в ModalOutsideButton
+   *
+   */
+  outsideButtons?: React.ReactNode;
   /**
    * Позволяет отключить захват фокуса.
    *

package/src/components/ModalPageFooter/ModalPageFooter.module.css

@@ -1,13 +1,13 @@
 .host {
   position: relative;
-  inline-size: 100%;
-  border-end-start-radius: inherit;
-  border-end-end-radius: inherit;
-  background-color: var(--vkui--color_background_modal);
   box-sizing: border-box;
 
   /* см. `.children {}` в `ModalPage` */
   flex: 0 0 auto;
+  inline-size: 100%;
+  background-color: var(--vkui--color_background_modal);
+  border-end-start-radius: inherit;
+  border-end-end-radius: inherit;
 }
 
 .Separator {

package/src/components/ModalPageHeader/ModalPageHeader.module.css

@@ -1,11 +1,10 @@
 .host {
   --vkui_internal--safe_area_inset_top: 0;
 
-  border-start-start-radius: inherit;
-  border-start-end-radius: inherit;
-
   /* см. `.children {}` в `ModalPage` */
   flex: 0 0 auto;
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
 }
 
 .hostWithGaps {

package/src/components/ModalRoot/types.ts

@@ -151,5 +151,6 @@ export interface ModalRootContextInterface
     ModalRootBaseProps {}
 
 export interface UseModalRootContext extends ModalRootContextBaseInterface {
+  activeModal?: string | null;
   onClose?: VoidFunction;
 }

package/src/components/ModalRoot/useModalManager.tsx

@@ -1,13 +1,16 @@
-import { useContext, useState } from 'react';
+import { useContext, useId, useState } from 'react';
+import { getNavId } from '../../lib/getNavId';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { warnOnce } from '../../lib/warnOnce';
 import type { AnyFunction } from '../../types';
 import { ModalOverlay, type ModalOverlayProps } from '../ModalOverlay/ModalOverlay';
 import { ModalRootContext } from './ModalRootContext';
 import { VisuallyHiddenModalOverlay } from './VisuallyHiddenModalOverlay/VisuallyHiddenModalOverlay';
 import type { ModalRootCallbackFunction } from './types';
 
+const warn = warnOnce('useModalManager');
 export interface UseModalManager {
-  id: string;
+  id?: string;
   open: boolean;
   keepMounted: boolean;
   modalOverlayTestId?: string;
@@ -19,6 +22,7 @@ export interface UseModalManager {
 }
 
 export interface UseModalManagerResolvedProps {
+  id: string;
   open: boolean;
   noFocusToDialog?: boolean;
   modalOverlayTestId?: string;
@@ -30,11 +34,11 @@ export interface UseModalManagerResolvedProps {
 }
 
 export type UseModalManagerResult =
-  | { mounted: false; shouldPreserveSnapPoint: boolean }
+  | { mounted: false; shouldPreserveSnapPoint: boolean; id: UseModalManagerResolvedProps['id'] }
   | ({ mounted: true; shouldPreserveSnapPoint: boolean } & UseModalManagerResolvedProps);
 
 export const useModalManager = ({
-  id,
+  id: idProp,
   open,
   keepMounted,
   modalOverlayTestId,
@@ -45,6 +49,8 @@ export const useModalManager = ({
   onClosed,
 }: UseModalManager): UseModalManagerResult => {
   const context = useContext(ModalRootContext);
+  const generatingId = useId();
+  const id = getNavId({ nav: idProp }, context.isInsideModal ? warn : undefined) || generatingId;
   const opened = context.isInsideModal ? context.activeModal === id : open;
   const shouldPreserveSnapPoint = context.isInsideModal ? context.activeModal !== null : false;
 
@@ -60,10 +66,11 @@ export const useModalManager = ({
   );
 
   if (unmounted) {
-    return { mounted: false, shouldPreserveSnapPoint };
+    return { mounted: false, shouldPreserveSnapPoint, id };
   }
 
   return {
+    id,
     mounted: true,
     open: opened,
     shouldPreserveSnapPoint,

package/src/components/ModalRoot/useModalRootContext.ts

@@ -17,5 +17,5 @@ export const useModalRootContext = (): UseModalRootContext => {
     }
   }, [activeModal, onCloseContext]);
 
-  return { isInsideModal, onClose, updateModalHeight, registerModal };
+  return { activeModal, isInsideModal, onClose, updateModalHeight, registerModal };
 };

package/src/components/OnboardingTooltip/OnboardingTooltip.module.css

@@ -1,7 +1,7 @@
 .overlay {
   position: fixed;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   inline-size: 100%;
   block-size: 100%;
   padding: 0;