@vkontakte/vkui 7.1.3 → 7.2.0

package/src/components/Alert/Alert.tsx

@@ -1,13 +1,8 @@
 'use client';
 
 import * as React from 'react';
-import { Icon20Cancel } from '@vkontakte/icons';
-import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
-import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { type UseFocusTrapProps } from '../../hooks/useFocusTrap';
-import { usePlatform } from '../../hooks/usePlatform';
-import { useCSSKeyframesAnimationController } from '../../lib/animation';
-import { stopPropagation } from '../../lib/utils';
+import { warnOnce } from '../../lib/warnOnce';
 import type {
   AlignType,
   AnchorHTMLAttributesOnly,
@@ -18,17 +13,14 @@ import type { AppRootPortalProps } from '../AppRoot/AppRootPortal';
 import { AppRootPortal } from '../AppRoot/AppRootPortal';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import type { ButtonProps } from '../Button/Button';
-import { FocusTrap } from '../FocusTrap/FocusTrap';
-import { IconButton } from '../IconButton/IconButton';
-import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
 import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
 import type { AlertActionProps } from './AlertAction';
-import { AlertActions } from './AlertActions';
-import { AlertDescription, AlertTitle } from './AlertTypography';
-import styles from './Alert.module.css';
+import { AlertBase } from './AlertBase';
 
 type AlertActionMode = 'cancel' | 'destructive' | 'default';
 
+export type { AlertActionProps };
+
 export interface AlertActionInterface
   extends Pick<ButtonProps, 'Component'>,
     AnchorHTMLAttributesOnly,
@@ -72,75 +64,52 @@ export interface AlertProps
    * Передает атрибут `data-testid` для кнопки закрытия
    */
   dismissButtonTestId?: string;
+  /**
+   * Передает атрибут `data-testid` для заголовка
+   */
+  titleTestId?: string;
+  /**
+   * Передает атрибут `data-testid` для описания
+   */
+  descriptionTestId?: string;
   usePortal?: AppRootPortalProps['usePortal'];
+  /**
+   * По умолчанию событие onClick не всплывает
+   */
+  allowClickPropagation?: boolean;
 }
 
+const warn = warnOnce('Alert');
+
 /**
  * @see https://vkcom.github.io/VKUI/#/Alert
  */
 export const Alert = ({
-  actions,
-  actionsLayout = 'horizontal',
-  children,
-  className,
+  usePortal,
   style,
-  title,
-  description,
-  onClose,
-  dismissLabel = 'Закрыть предупреждение',
-  renderAction,
-  actionsAlign,
-  dismissButtonMode = 'outside',
-  dismissButtonTestId,
+  className,
   getRootRef,
-  usePortal,
   ...restProps
 }: AlertProps): React.ReactNode => {
-  const generatedId = React.useId();
-
-  const titleId = `vkui-alert-${generatedId}-title`;
-  const descriptionId = `vkui-alert-${generatedId}-description`;
-
-  const platform = usePlatform();
-  const { isDesktop } = useAdaptivityWithJSMediaQueries();
-
   const [closing, setClosing] = React.useState(false);
-  const itemActionCallbackRef = React.useRef(noop);
-  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(
-    closing ? 'exit' : 'enter',
-    {
-      onExited() {
-        itemActionCallbackRef.current();
-        itemActionCallbackRef.current = noop;
-        onClose();
-      },
-    },
-  );
-  const isDismissButtonVisible = isDesktop && platform !== 'ios';
-  const elementRef = React.useRef<HTMLDivElement>(null);
 
   const close = React.useCallback(() => {
     setClosing(true);
   }, []);
 
-  const onItemClick = React.useCallback(
-    (item: AlertActionInterface) => {
-      const { action: itemAction, autoCloseDisabled = false } = item;
-
-      if (autoCloseDisabled) {
-        itemAction && itemAction({ close });
-      } else {
-        if (itemAction) {
-          itemActionCallbackRef.current = itemAction;
-        }
-        setClosing(true);
-      }
-    },
-    [close],
-  );
-
   useScrollLock();
 
+  if (
+    process.env.NODE_ENV === 'development' &&
+    !restProps.title &&
+    !restProps['aria-label'] &&
+    !restProps['aria-labelledby']
+  ) {
+    warn(
+      'Если "title" не используется, то необходимо задать либо "aria-label", либо "aria-labelledby" (см. правило axe aria-dialog-name)',
+    );
+  }
+
   return (
     <AppRootPortal usePortal={usePortal}>
       <PopoutWrapper
@@ -149,63 +118,9 @@ export const Alert = ({
         style={style}
         onClick={close}
         getRootRef={getRootRef}
+        strategy="fixed"
       >
-        <FocusTrap
-          {...restProps}
-          {...animationHandlers}
-          getRootRef={elementRef}
-          onClick={stopPropagation}
-          onClose={close}
-          autoFocus={animationState === 'entered'}
-          className={classNames(
-            styles.host,
-            platform === 'ios' && styles.ios,
-            platform === 'vkcom' && styles.vkcom,
-            closing ? styles.closing : styles.opening,
-            isDesktop && styles.desktop,
-          )}
-          role="alertdialog"
-          aria-modal
-          aria-labelledby={titleId}
-          aria-describedby={descriptionId}
-        >
-          <div
-            className={classNames(
-              styles.content,
-              dismissButtonMode === 'inside' && styles.contentWithButton,
-            )}
-          >
-            {hasReactNode(title) && <AlertTitle id={titleId}>{title}</AlertTitle>}
-            {hasReactNode(description) && (
-              <AlertDescription id={descriptionId}>{description}</AlertDescription>
-            )}
-            {children}
-            {isDismissButtonVisible && dismissButtonMode === 'inside' && (
-              <IconButton
-                label={dismissLabel}
-                className={classNames(styles.dismiss, 'vkuiInternalAlert__dismiss')}
-                onClick={close}
-                hoverMode="opacity"
-                activeMode="opacity"
-                data-testid={dismissButtonTestId}
-              >
-                <Icon20Cancel />
-              </IconButton>
-            )}
-          </div>
-          {isDismissButtonVisible && dismissButtonMode === 'outside' && (
-            <ModalDismissButton onClick={close} data-testid={dismissButtonTestId}>
-              {dismissLabel}
-            </ModalDismissButton>
-          )}
-          <AlertActions
-            actions={actions}
-            actionsAlign={actionsAlign}
-            actionsLayout={actionsLayout}
-            renderAction={renderAction}
-            onItemClick={onItemClick}
-          />
-        </FocusTrap>
+        <AlertBase {...restProps} closing={closing} setClosing={setClosing} />
       </PopoutWrapper>
     </AppRootPortal>
   );

package/src/components/Alert/AlertBase.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import * as React from 'react';
+import { Icon20Cancel } from '@vkontakte/icons';
+import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
+import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useCSSKeyframesAnimationController } from '../../lib/animation';
+import { stopPropagation } from '../../lib/utils';
+import { FocusTrap } from '../FocusTrap/FocusTrap';
+import { IconButton } from '../IconButton/IconButton';
+import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
+import { type AlertActionInterface, type AlertProps } from './Alert';
+import { AlertActions } from './AlertActions';
+import { AlertDescription, AlertTitle } from './AlertTypography';
+import styles from './Alert.module.css';
+
+export interface AlertBaseProps
+  extends Omit<AlertProps, 'usePortal' | 'className' | 'style' | 'getRootRef'> {
+  closing?: boolean;
+  setClosing?: (closing: boolean) => void;
+}
+
+export const AlertBase = ({
+  actions,
+  actionsLayout = 'horizontal',
+  children,
+  title,
+  description,
+  onClose,
+  dismissLabel = 'Закрыть предупреждение',
+  renderAction,
+  actionsAlign,
+  dismissButtonMode = 'outside',
+  dismissButtonTestId,
+  onClick,
+  allowClickPropagation = false,
+  titleTestId,
+  descriptionTestId,
+  closing,
+  setClosing,
+  ...restProps
+}: AlertBaseProps) => {
+  const generatedId = React.useId();
+
+  const titleId = `vkui-alert-${generatedId}-title`;
+  const descriptionId = `vkui-alert-${generatedId}-description`;
+
+  const platform = usePlatform();
+  const { isDesktop } = useAdaptivityWithJSMediaQueries();
+  const itemActionCallbackRef = React.useRef(noop);
+  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(
+    closing ? 'exit' : 'enter',
+    {
+      onExited() {
+        itemActionCallbackRef.current();
+        itemActionCallbackRef.current = noop;
+        onClose();
+      },
+    },
+  );
+  const isDismissButtonVisible = isDesktop && platform !== 'ios';
+  const elementRef = React.useRef<HTMLDivElement>(null);
+
+  const close = React.useCallback(() => {
+    setClosing?.(true);
+  }, [setClosing]);
+
+  const onItemClick = React.useCallback(
+    (item: AlertActionInterface) => {
+      const { action: itemAction, autoCloseDisabled = false } = item;
+
+      if (autoCloseDisabled) {
+        itemAction && itemAction({ close });
+      } else {
+        if (itemAction) {
+          itemActionCallbackRef.current = itemAction;
+        }
+        setClosing?.(true);
+      }
+    },
+    [close, setClosing],
+  );
+
+  const handleClick = allowClickPropagation
+    ? onClick
+    : (event: React.MouseEvent<HTMLElement>) => {
+        stopPropagation(event);
+        onClick?.(event);
+      };
+
+  return (
+    <FocusTrap
+      {...animationHandlers}
+      onClick={handleClick}
+      getRootRef={elementRef}
+      onClose={close}
+      autoFocus={animationState === 'entered'}
+      className={classNames(
+        styles.host,
+        platform === 'ios' && styles.ios,
+        platform === 'vkcom' && styles.vkcom,
+        closing ? styles.closing : styles.opening,
+        isDesktop && styles.desktop,
+      )}
+      role="alertdialog"
+      aria-modal
+      aria-labelledby={titleId}
+      aria-describedby={descriptionId}
+      {...restProps}
+    >
+      <div
+        className={classNames(
+          styles.content,
+          dismissButtonMode === 'inside' && styles.contentWithButton,
+        )}
+      >
+        {hasReactNode(title) && (
+          <AlertTitle data-testid={titleTestId} id={titleId}>
+            {title}
+          </AlertTitle>
+        )}
+        {hasReactNode(description) && (
+          <AlertDescription data-testid={descriptionTestId} id={descriptionId}>
+            {description}
+          </AlertDescription>
+        )}
+        {children}
+        {isDismissButtonVisible && dismissButtonMode === 'inside' && (
+          <IconButton
+            label={dismissLabel}
+            className={classNames(styles.dismiss, 'vkuiInternalAlert__dismiss')}
+            onClick={close}
+            hoverMode="opacity"
+            activeMode="opacity"
+            data-testid={dismissButtonTestId}
+          >
+            <Icon20Cancel />
+          </IconButton>
+        )}
+      </div>
+      {isDismissButtonVisible && dismissButtonMode === 'outside' && (
+        <ModalDismissButton onClick={close} data-testid={dismissButtonTestId}>
+          {dismissLabel}
+        </ModalDismissButton>
+      )}
+      <AlertActions
+        actions={actions}
+        actionsAlign={actionsAlign}
+        actionsLayout={actionsLayout}
+        renderAction={renderAction}
+        onItemClick={onItemClick}
+      />
+    </FocusTrap>
+  );
+};

package/src/components/Alert/AlertTypography.tsx

@@ -10,7 +10,8 @@ import { Title } from '../Typography/Title/Title';
 import styles from './Alert.module.css';
 
 interface AlertTypography extends HasChildren {
-  id: string;
+  'id': string;
+  'data-testid'?: string;
 }
 export const AlertTitle = (props: AlertTypography): React.ReactNode => {
   const platform = usePlatform();

package/src/components/AppRoot/AppRoot.module.css

@@ -1,10 +1,10 @@
 .host {
+  inline-size: 100%;
   /* чтобы можно было ограничить размеры приложения
    * извне с помощью max-height, max-width */
   max-inline-size: inherit;
-  max-block-size: inherit;
-  inline-size: 100%;
   block-size: 100%;
+  max-block-size: inherit;
 }
 
 .layoutCard {

package/src/components/AppRoot/AppRootStyleContainer/AppRootStyleContainer.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../../hooks/useAdaptivity';
-import { useTokensClassName } from '../../../lib/tokens';
+import { useTokensClassName } from '../../../lib/tokens/useTokenClassName';
 import { useConfigProvider } from '../../ConfigProvider/ConfigProviderContext';
 import { RootComponent, type RootComponentProps } from '../../RootComponent/RootComponent';
 import { AppRootContext } from '../AppRootContext';

package/src/components/AppRoot/ScrollContext.tsx

@@ -18,13 +18,13 @@ const clearDisableScrollStyle = (node: HTMLElement) => {
   });
 };
 
-const getPageYOffsetWithoutKeyboardHeight = (window: Window) => {
+const getPageYOffsetWithoutKeyboardHeight = (window: Window, scrollTop: number) => {
   // Note: здесь расчёт на то, что `clientHeight` равен `window.innerHeight`.
   //  Это достигается тем, что тегу `html` задали`height: 100%` и у него нет отступов сверху и снизу. Если есть отступы,
   //  то надо задать `box-sizing: border-box`, чтобы они не учитывались.
   const diffOfClientHeightAndViewportHeight =
     window.document.documentElement.clientHeight - window.innerHeight;
-  return window.pageYOffset - diffOfClientHeightAndViewportHeight;
+  return scrollTop - diffOfClientHeightAndViewportHeight;
 };
 
 export type GetScrollOptions = {
@@ -83,30 +83,124 @@ function useScrollLockController(enableScrollLock: () => void, disableScrollLock
   return [incrementScrollLockCounter, decrementScrollLockCounter];
 }
 
+export function useManualScroll(): Pick<ScrollContextInterface, 'scrollTo' | 'getScroll'> {
+  const { scrollTo, getScroll } = React.useContext(ScrollContext);
+  return React.useMemo(
+    () => ({
+      scrollTo,
+      getScroll,
+    }),
+    [getScroll, scrollTo],
+  );
+}
+
 export interface ScrollControllerProps extends HasChildren {
   elRef: React.RefObject<HTMLElement | null>;
 }
 
+const _scrollTo = ({
+  x,
+  y,
+  scrollWidth,
+  clientWidth,
+  scrollHeight,
+  clientHeight,
+  scrollLockEnabled,
+  lockedElement,
+  elementToScroll,
+}: {
+  x: number;
+  y: number;
+  scrollWidth: number;
+  clientWidth: number;
+  scrollHeight: number;
+  clientHeight: number;
+  scrollLockEnabled: boolean;
+  lockedElement: HTMLElement;
+  elementToScroll: Window | HTMLElement;
+}) => {
+  // Some iOS versions do not normalize scroll — do it manually.
+  const left = x ? clamp(x, 0, scrollWidth - clientWidth) : 0;
+  const top = y ? clamp(y, 0, scrollHeight - clientHeight) : 0;
+
+  if (scrollLockEnabled) {
+    Object.assign(lockedElement.style, {
+      left: `-${left}px`,
+      top: `-${top}px`,
+    });
+  } else {
+    elementToScroll.scrollTo({
+      left,
+      top,
+    });
+  }
+};
+
+const _getScroll = ({
+  xOffset,
+  yOffset,
+  element,
+  scrollLockEnabled,
+  customCalcY = (v) => v,
+}: {
+  xOffset: number;
+  yOffset: number;
+  element: HTMLElement;
+  scrollLockEnabled: boolean;
+  customCalcY?: (scrollTop: number) => number;
+}) => {
+  const elementStyles = element.style;
+  const [scrollLeft, scrollTop] = scrollLockEnabled
+    ? [-parseFloat(elementStyles.left || '0'), -parseFloat(elementStyles.top || '0')]
+    : [xOffset, yOffset];
+  return {
+    x: scrollLeft,
+    y: customCalcY(scrollTop),
+  };
+};
+
 export const GlobalScrollController = ({ children }: ScrollControllerProps): React.ReactNode => {
   const { window, document } = useDOM();
   const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());
+  const scrollLockEnabledRef = React.useRef(false);
 
   const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(
-    (options = { compensateKeyboardHeight: true }) => ({
-      x: window!.pageXOffset,
-      y: options.compensateKeyboardHeight
-        ? getPageYOffsetWithoutKeyboardHeight(window!)
-        : window!.pageYOffset,
-    }),
-    [window],
+    (options = { compensateKeyboardHeight: true }) => {
+      if (!window || !document) {
+        return { x: 0, y: 0 };
+      }
+      return _getScroll({
+        xOffset: window.pageXOffset,
+        yOffset: window.pageYOffset,
+        element: document.documentElement,
+        scrollLockEnabled: scrollLockEnabledRef.current,
+        customCalcY: (scrollTop) =>
+          options.compensateKeyboardHeight
+            ? getPageYOffsetWithoutKeyboardHeight(window, scrollTop)
+            : scrollTop,
+      });
+    },
+    [document, window],
   );
   const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(
     (x = 0, y = 0) => {
-      // Some iOS versions do not normalize scroll — do it manually.
-      window!.scrollTo(
-        x ? clamp(x, 0, document!.body.scrollWidth - window!.innerWidth) : 0,
-        y ? clamp(y, 0, document!.body.scrollHeight - window!.innerHeight) : 0,
-      );
+      if (!window || !document) {
+        return;
+      }
+      _scrollTo({
+        x,
+        y,
+
+        scrollWidth: document.body.scrollWidth,
+        clientWidth: window.innerWidth,
+
+        scrollHeight: document.body.scrollHeight,
+        clientHeight: window.innerHeight,
+
+        scrollLockEnabled: scrollLockEnabledRef.current,
+        lockedElement: document.documentElement,
+        elementToScroll: window,
+      });
     },
     [document, window],
   );
@@ -115,32 +209,30 @@ export const GlobalScrollController = ({ children }: ScrollControllerProps): Rea
     beforeScrollLockFnSetRef.current.forEach((fn) => {
       fn();
     });
-
-    const scrollY = window!.pageYOffset;
-    const scrollX = window!.pageXOffset;
+    const { x: scrollX, y: scrollY } = getScroll({ compensateKeyboardHeight: false });
     const overflowY = window!.innerWidth > document!.documentElement.clientWidth ? 'scroll' : '';
     const overflowX = window!.innerHeight > document!.documentElement.clientHeight ? 'scroll' : '';
 
-    Object.assign(document!.documentElement.style, { overscrollBehavior: 'none' });
-    Object.assign(document!.body.style, {
+    Object.assign(document!.documentElement.style, {
       position: 'fixed',
-      top: `-${scrollY}px`,
-      left: `-${scrollX}px`,
       right: '0',
       overscrollBehavior: 'none',
       overflowY,
       overflowX,
     });
-  }, [document, window]);
+
+    scrollLockEnabledRef.current = true;
+
+    scrollTo(scrollX, scrollY);
+  }, [document, getScroll, scrollTo, window]);
 
   const disableScrollLock = React.useCallback(() => {
-    const scrollY = document!.body.style.top;
-    const scrollX = document!.body.style.left;
+    const scrollData = getScroll({ compensateKeyboardHeight: false });
+    clearDisableScrollStyle(document!.documentElement);
+    scrollLockEnabledRef.current = false;
 
-    Object.assign(document!.documentElement.style, { overscrollBehavior: '' });
-    clearDisableScrollStyle(document!.body);
-    window!.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));
-  }, [document, window]);
+    scrollTo(scrollData.x, scrollData.y);
+  }, [document, getScroll, scrollTo]);
 
   const [incrementScrollLockCounter, decrementScrollLockCounter] = useScrollLockController(
     enableScrollLock,
@@ -166,22 +258,41 @@ export const ElementScrollController = ({
   children,
 }: ScrollControllerProps): React.ReactNode => {
   const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());
+  const scrollLockEnabledRef = React.useRef(false);
+
+  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(() => {
+    const element = elRef.current;
+    if (!element) {
+      return { x: 0, y: 0 };
+    }
+    return _getScroll({
+      xOffset: element.scrollLeft,
+      yOffset: element.scrollTop,
+      element: element,
+      scrollLockEnabled: scrollLockEnabledRef.current,
+    });
+  }, [elRef]);
 
-  const getScroll = React.useCallback<ScrollContextInterface['getScroll']>(
-    () => ({
-      x: elRef.current?.scrollLeft ?? 0,
-      y: elRef.current?.scrollTop ?? 0,
-    }),
-    [elRef],
-  );
   const scrollTo = React.useCallback<ScrollContextInterface['scrollTo']>(
     (x = 0, y = 0) => {
       const el = elRef.current;
-      // Some iOS versions do not normalize scroll — do it manually.
-      el?.scrollTo(
-        x ? clamp(x, 0, el.scrollWidth - el.clientWidth) : 0,
-        y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0,
-      );
+      if (!el) {
+        return;
+      }
+      _scrollTo({
+        x,
+        y,
+
+        scrollWidth: el.scrollWidth,
+        clientWidth: el.clientWidth,
+
+        scrollHeight: el.scrollHeight,
+        clientHeight: el.clientHeight,
+
+        scrollLockEnabled: scrollLockEnabledRef.current,
+        lockedElement: el,
+        elementToScroll: el,
+      });
     },
     [elRef],
   );
@@ -195,20 +306,21 @@ export const ElementScrollController = ({
       fn();
     });
 
-    const scrollY = el.scrollTop;
-    const scrollX = el.scrollLeft;
+    const { x: scrollX, y: scrollY } = getScroll();
+
     const overflowY = el.scrollWidth > el.clientWidth ? 'scroll' : '';
     const overflowX = el.scrollHeight > el.clientHeight ? 'scroll' : '';
 
     Object.assign(el.style, {
       position: 'absolute',
-      top: `-${scrollY}px`,
-      left: `-${scrollX}px`,
       right: '0',
       overflowY,
       overflowX,
     });
-  }, [elRef]);
+    scrollLockEnabledRef.current = true;
+
+    scrollTo(scrollX, scrollY);
+  }, [elRef, getScroll, scrollTo]);
 
   const disableScrollLock = React.useCallback(() => {
     const el = elRef.current;
@@ -216,12 +328,12 @@ export const ElementScrollController = ({
       return;
     }
 
-    const scrollY = el.style.top;
-    const scrollX = el.style.left;
-
+    const scrollData = getScroll();
     clearDisableScrollStyle(el);
-    el.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));
-  }, [elRef]);
+    scrollLockEnabledRef.current = false;
+
+    scrollTo(scrollData.x, scrollData.y);
+  }, [elRef, getScroll, scrollTo]);
 
   const [incrementScrollLockCounter, decrementScrollLockCounter] = useScrollLockController(
     enableScrollLock,