@vkontakte/vkui 7.1.3 → 7.2.0

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/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;

package/src/components/OnboardingTooltip/OnboardingTooltip.tsx

@@ -15,7 +15,6 @@ import {
   useFloatingMiddlewaresBootstrap,
   usePlacementChangeCallback,
 } from '../../lib/floating';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
 import { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from '../FloatingArrow/DefaultIcon';
 import type { FloatingArrowProps } from '../FloatingArrow/FloatingArrow';
@@ -23,6 +22,7 @@ import { FocusTrap } from '../FocusTrap/FocusTrap';
 import { useNavTransition } from '../NavTransitionContext/NavTransitionContext';
 import { TOOLTIP_MAX_WIDTH, TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';
 import { onboardingTooltipContainerAttr } from './OnboardingTooltipContainer';
+import { useOnboardingTooltipContext } from './OnboardingTooltipContext';
 import styles from './OnboardingTooltip.module.css';
 
 const warn = warnOnce('OnboardingTooltip');
@@ -39,6 +39,7 @@ type AllowedFloatingComponentProps = Pick<
   | 'children'
   | 'onPlacementChange'
   | 'disableFlipMiddleware'
+  | 'disableFocusTrap'
 >;
 
 type AllowedTooltipBaseProps = Omit<
@@ -102,11 +103,13 @@ export const OnboardingTooltip = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
   restoreFocus,
+  disableFocusTrap,
   ...restProps
 }: OnboardingTooltipProps): React.ReactNode => {
   const generatedId = React.useId();
   const tooltipId = idProp || generatedId;
   const { entering } = useNavTransition();
+  const { containerRef: tooltipContainerRef } = useOnboardingTooltipContext();
 
   const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);
   const [tooltipContainer, setTooltipContainer] = React.useState<HTMLElement | null>(null);
@@ -151,11 +154,11 @@ export const OnboardingTooltip = ({
 
   let tooltip: React.ReactPortal | null = null;
   if (shown) {
-    const floatingStyle = convertFloatingDataToReactCSSProperties(
-      positionStrategy,
-      floatingDataX,
-      floatingDataY,
-    );
+    const floatingStyle = convertFloatingDataToReactCSSProperties({
+      strategy: positionStrategy,
+      x: floatingDataX,
+      y: floatingDataY,
+    });
 
     tooltip = createPortal(
       <FocusTrap
@@ -164,6 +167,7 @@ export const OnboardingTooltip = ({
         aria-label={ariaLabel}
         aria-labelledby={title ? titleId : ariaLabel ? undefined : ariaLabelledBy}
         onClose={onClose}
+        disabled={disableFocusTrap}
         restoreFocus={restoreFocus}
       >
         <button aria-label={overlayLabel} className={styles.overlay} onClickCapture={onClose} />
@@ -192,18 +196,23 @@ export const OnboardingTooltip = ({
     );
   }
 
-  useIsomorphicLayoutEffect(
+  React.useEffect(
     function initialize() {
       const referenceEl = childRef.current;
-      if (referenceEl) {
-        setTooltipContainer(
-          referenceEl.closest<HTMLDivElement>(`[${onboardingTooltipContainerAttr}]`), // eslint-disable-line no-restricted-properties
-        );
+      if (!referenceEl) {
+        return;
+      }
+      const tooltipContainer =
+        tooltipContainerRef.current ||
+        // eslint-disable-next-line no-restricted-properties
+        referenceEl.closest<HTMLDivElement>(`[${onboardingTooltipContainerAttr}]`);
+      if (tooltipContainer) {
+        setTooltipContainer(tooltipContainer);
         setPositionStrategy(referenceEl.style.position === 'fixed' ? 'fixed' : 'absolute');
         refs.setReference(referenceEl);
       }
     },
-    [childRef],
+    [childRef, refs, tooltipContainerRef],
   );
 
   if (process.env.NODE_ENV === 'development') {

package/src/components/OnboardingTooltip/OnboardingTooltipContainer.tsx

@@ -1,5 +1,9 @@
+'use client';
+
 import * as React from 'react';
+import { useExternRef } from '../../hooks/useExternRef';
 import type { HasComponent, HasDataAttribute } from '../../types';
+import { OnboardingTooltipContext } from './OnboardingTooltipContext';
 
 export const onboardingTooltipContainerAttr = 'data-onboarding-tooltip-container';
 
@@ -13,11 +17,16 @@ export const OnboardingTooltipContainer: React.ForwardRefExoticComponent<
   React.PropsWithoutRef<OnboardingTooltipContainerProps> & React.RefAttributes<HTMLDivElement>
 > = React.forwardRef<HTMLDivElement, OnboardingTooltipContainerProps>(
   ({ fixed = false, Component = 'div', ...props }, ref) => {
+    const containerRef = useExternRef(ref);
     const dataProps = {
       [onboardingTooltipContainerAttr]: fixed ? 'fixed' : 'true',
     };
 
-    return <Component {...dataProps} {...props} ref={ref} />;
+    return (
+      <OnboardingTooltipContext.Provider value={{ containerRef }}>
+        <Component {...dataProps} {...props} ref={containerRef} />
+      </OnboardingTooltipContext.Provider>
+    );
   },
 );
 

package/src/components/OnboardingTooltip/OnboardingTooltipContext.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export interface OnboardingTooltipContextValue {
+  containerRef: React.RefObject<HTMLElement | null>;
+}
+
+export const OnboardingTooltipContext = React.createContext<OnboardingTooltipContextValue>({
+  containerRef: { current: null },
+});
+
+export const useOnboardingTooltipContext = () => React.useContext(OnboardingTooltipContext);

package/src/components/Pagination/Pagination.module.css

@@ -1,7 +1,7 @@
 .list {
   display: flex;
-  margin: 0;
   padding: 0;
+  margin: 0;
   list-style-type: none;
 }
 

package/src/components/Pagination/Pagination.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { type PaginationPageType, usePagination } from '../../hooks/usePagination';
 import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
@@ -135,6 +136,8 @@ export const Pagination = ({
   renderNavigationButton,
   ...resetProps
 }: PaginationProps): React.ReactNode => {
+  const direction = useConfigDirection();
+  const isRtl = direction === 'rtl';
   const pages = usePagination({
     currentPage,
     totalPages,
@@ -227,7 +230,7 @@ export const Pagination = ({
             type="prev"
             style={navigationButtonsStyle}
             caption={prevButtonCaption}
-            Icon={Icon24ChevronCompactLeft}
+            Icon={isRtl ? Icon24ChevronCompactRight : Icon24ChevronCompactLeft}
             a11yLabel={prevButtonLabel}
             disabled={isFirstPage || disabled}
             onClick={handlePrevClick}
@@ -242,7 +245,7 @@ export const Pagination = ({
             type="next"
             style={navigationButtonsStyle}
             caption={nextButtonCaption}
-            Icon={Icon24ChevronCompactRight}
+            Icon={isRtl ? Icon24ChevronCompactLeft : Icon24ChevronCompactRight}
             a11yLabel={nextButtonLabel}
             disabled={isLastPage || disabled}
             onClick={handleNextClick}

package/src/components/Pagination/PaginationPage/PaginationPage.module.css

@@ -1,17 +1,17 @@
 /* Page styles */
 .host {
   box-sizing: border-box;
-  padding-inline: 8px;
+  display: block;
   inline-size: 100%;
   min-inline-size: 40px;
-  border-radius: var(--vkui--size_border_radius--regular);
-  text-align: center;
-  color: var(--vkui--color_text_secondary);
-  user-select: none;
   block-size: var(--vkui--size_button_large_height--regular);
+  padding-inline: 8px;
   line-height: var(--vkui--size_button_large_height--regular);
-  display: block;
+  color: var(--vkui--color_text_secondary);
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  border-radius: var(--vkui--size_border_radius--regular);
 }
 
 .stateHover {
@@ -29,14 +29,14 @@
 }
 
 .sizeYCompact {
-  line-height: var(--vkui--size_button_large_height--compact);
   block-size: var(--vkui--size_button_large_height--compact);
+  line-height: var(--vkui--size_button_large_height--compact);
 }
 
 @media (--sizeY-compact) {
   .sizeYNone {
-    line-height: var(--vkui--size_button_large_height--compact);
     block-size: var(--vkui--size_button_large_height--compact);
+    line-height: var(--vkui--size_button_large_height--compact);
   }
 }
 

package/src/components/Panel/Panel.module.css

@@ -7,19 +7,19 @@
 .in {
   position: relative;
   box-sizing: border-box;
-  inline-size: 100%;
-  min-block-size: 100%;
   display: flex;
   flex-direction: column;
+  inline-size: 100%;
+  min-block-size: 100%;
 }
 
 .centered {
+  box-sizing: border-box;
   display: flex;
   flex: 1 0;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
 }
 
 /* stylelint-disable selector-max-universal */

package/src/components/PanelHeader/PanelHeader.module.css

@@ -8,9 +8,9 @@
 }
 
 .host:not(.static):not(.hasFixed) {
-  block-size: 0;
   /* см. https://github.com/VKCOM/VKUI/issues/5571 */
   z-index: var(--vkui_internal--z_index_panel_header);
+  block-size: 0;
 }
 
 .fixed {
@@ -18,11 +18,11 @@
 }
 
 .in {
+  position: relative;
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   white-space: nowrap;
-  position: relative;
   background: var(--vkui--color_background_content);
 }
 
@@ -42,9 +42,9 @@
 
 .before {
   box-sizing: border-box;
-  color: var(--vkui--color_icon_accent_themed);
   display: flex;
   flex-shrink: 0;
+  color: var(--vkui--color_icon_accent_themed);
 }
 
 .content {
@@ -59,9 +59,9 @@
 }
 
 .contentIn {
-  color: var(--vkui--color_text_primary);
-  font-weight: 500;
   font-family: var(--vkui--font_family_accent);
+  font-weight: 500;
+  color: var(--vkui--color_text_primary);
 }
 
 .host::before,
@@ -71,10 +71,10 @@
 }
 
 .after {
+  box-sizing: border-box;
   display: flex;
-  justify-content: flex-end;
   align-items: center;
-  box-sizing: border-box;
+  justify-content: flex-end;
   color: var(--vkui--color_icon_accent_themed);
 }
 
@@ -87,18 +87,18 @@
  * iOS
  */
 .ios .before {
-  flex-basis: 0;
-  flex-shrink: 0;
   flex-grow: 1;
-  opacity: 1;
-  transition: opacity 0.3s var(--vkui--animation_easing_platform);
+  flex-shrink: 0;
+  flex-basis: 0;
   padding-block: 4px;
   padding-inline: 4px 0;
+  opacity: 1;
+  transition: opacity 0.3s var(--vkui--animation_easing_platform);
 }
 
 .ios .before .host + .primitive {
-  margin-inline-start: -6px;
   padding-inline-start: 0;
+  margin-inline-start: -6px;
 }
 
 .ios .content {
@@ -131,13 +131,13 @@
 }
 
 .ios .after {
-  flex-basis: 0;
-  flex-shrink: 0;
   flex-grow: 1;
-  opacity: 1;
-  transition: opacity 0.3s var(--vkui--animation_easing_platform);
+  flex-shrink: 0;
+  flex-basis: 0;
   padding-block: 4px;
   padding-inline: 0 4px;
+  opacity: 1;
+  transition: opacity 0.3s var(--vkui--animation_easing_platform);
 }
 
 /**
@@ -150,8 +150,8 @@
 }
 
 .android .content {
-  align-items: center;
   flex-grow: 1;
+  align-items: center;
   max-inline-size: 100%;
 }
 
@@ -251,40 +251,40 @@
 .vkcom.sizeXRegular:not(:global(.vkuiInternalModalPageHeader__in)):not(.sep):not(.trnsp)
   .in::after {
   position: absolute;
-  inset-inline: var(--vkui--size_border--regular);
   inset-block-end: 0;
+  inset-inline: var(--vkui--size_border--regular);
   block-size: var(--vkui--size_border--regular);
-  background-color: var(--vkui--color_background_content);
   content: '';
+  background-color: var(--vkui--color_background_content);
 }
 
 @media (--sizeX-regular) {
   /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
   .vkcom.sizeXNone:not(:global(.vkuiInternalModalPageHeader__in)):not(.sep):not(.trnsp) .in::after {
     position: absolute;
-    inset-inline: var(--vkui--size_border--regular);
     inset-block-end: 0;
+    inset-inline: var(--vkui--size_border--regular);
     block-size: var(--vkui--size_border--regular);
-    background-color: var(--vkui--color_background_content);
     content: '';
+    background-color: var(--vkui--color_background_content);
   }
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .vkcom.sizeXRegular:not(:global(.vkuiInternalModalPageHeader__in)):not(.trnsp) .in {
+  border-block-end: 0;
   border-start-start-radius: var(--vkui--size_border_radius_paper--regular);
   border-start-end-radius: var(--vkui--size_border_radius_paper--regular);
   box-shadow: 0 0 0 var(--vkui--size_border--regular) var(--vkui--color_field_border_alpha) inset;
-  border-block-end: 0;
 }
 
 @media (--sizeX-regular) {
   /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
   .vkcom.sizeXNone:not(:global(.vkuiInternalModalPageHeader__in)):not(.trnsp) .in {
+    border-block-end: 0;
     border-start-start-radius: var(--vkui--size_border_radius_paper--regular);
     border-start-end-radius: var(--vkui--size_border_radius_paper--regular);
     box-shadow: 0 0 0 var(--vkui--size_border--regular) var(--vkui--color_field_border_alpha) inset;
-    border-block-end: 0;
   }
 }
 
@@ -299,9 +299,9 @@
 
 .vkcom .before,
 .vkcom .after {
-  flex-basis: 0;
-  flex-shrink: 0;
   flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
 }
 
 .separator {
@@ -320,7 +320,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalPanel--centered) .host {
   position: absolute;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   inline-size: 100%;
 }

package/src/components/PanelHeaderBack/PanelHeaderBack.tsx

@@ -10,6 +10,7 @@ import {
 } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { usePlatform } from '../../hooks/usePlatform';
 import type { PlatformType } from '../../lib/platform';
 import { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';
@@ -62,6 +63,7 @@ export const PanelHeaderBack = ({
   ...restProps
 }: PanelHeaderBackProps): React.ReactNode => {
   const platform = usePlatform();
+  const direction = useConfigDirection();
   const { sizeX = 'none' } = useAdaptivity();
   // также label нужно скрывать при platform === 'ios' && sizeX === regular
   // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104
@@ -76,6 +78,7 @@ export const PanelHeaderBack = ({
         platform === 'ios' && styles.backIos,
         platform === 'vkcom' && styles.backVkcom,
         showLabel && !!label && styles.backHasLabel,
+        direction === 'rtl' && styles.rtl,
         className,
       )}
       label={showLabel ? label : label && <VisuallyHidden>{label}</VisuallyHidden>}

package/src/components/PanelHeaderButton/PanelHeaderButton.module.css

@@ -1,13 +1,13 @@
 .host {
+  position: relative;
+  display: block;
+  padding: 0;
+  margin: 0;
+  color: currentColor;
   appearance: none;
   background: none;
   border: 0;
   box-shadow: none;
-  display: block;
-  color: currentColor;
-  padding: 0;
-  margin: 0;
-  position: relative;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -21,10 +21,16 @@
 
 .primitive {
   block-size: 48px;
-  line-height: 48px;
   padding-block: 0;
   padding-inline: 10px;
+  line-height: 48px;
+}
+
+/* stylelint-disable selector-max-type */
+.rtl svg {
+  transform: scaleX(-1);
 }
+/* stylelint-enable selector-max-type */
 
 /*
  * iOS
@@ -86,8 +92,8 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .vkcom > :not(:global(.vkuiInternalBadge)):not(:global(.vkuiInternalCounter)) {
-  transition: opacity 0.3s;
   opacity: 0.7;
+  transition: opacity 0.3s;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -135,9 +141,9 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .host :global(.vkuiInternalCounter) {
   position: absolute;
-  padding: 0;
   inset-block-start: 4px;
   inset-inline-end: 4px;
+  padding: 0;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

package/src/components/PanelHeaderContent/PanelHeaderContent.module.css

@@ -1,12 +1,12 @@
 .host {
-  line-height: initial;
-  block-size: 100%;
-  max-inline-size: 100%;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  max-inline-size: 100%;
+  block-size: 100%;
   font-family: var(--vkui--font_family_base);
+  line-height: initial;
 }
 
 .before {
@@ -15,12 +15,12 @@
 }
 
 .in {
-  flex-grow: 1;
-  min-inline-size: 0;
   display: flex;
+  flex-grow: 1;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
+  min-inline-size: 0;
   block-size: 100%;
 }
 
@@ -28,21 +28,21 @@
 .childrenIn,
 .childrenText {
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .subtitle {
   order: 1;
-  margin-block-start: 1px;
   max-inline-size: 100%;
+  margin-block-start: 1px;
   color: var(--vkui--color_text_secondary);
 }
 
 .children {
-  max-inline-size: 100%;
   display: flex;
   align-items: center;
+  max-inline-size: 100%;
 }
 
 .childrenIn {
@@ -71,8 +71,8 @@
  */
 
 .ios .childrenIn {
-  font-size: 21px;
   font-family: var(--vkui--font_family_accent);
+  font-size: 21px;
   font-weight: 500;
   line-height: var(--vkui_internal--panel_header_height);
 }
@@ -82,8 +82,8 @@
  */
 
 .android .childrenIn {
-  font-size: 23px;
   font-family: var(--vkui--font_family_accent);
+  font-size: 23px;
   font-weight: 500;
   line-height: var(--vkui_internal--panel_header_height);
 }