@vkontakte/vkui 7.0.0-dev-efd91c.0 → 7.0.0-dev-efd91c.2

package/src/components/AppRoot/AppRootPortal.tsx

@@ -2,62 +2,103 @@
 
 import * as React from 'react';
 import { useColorScheme } from '../../hooks/useColorScheme';
-import { useIsClient } from '../../hooks/useIsClient';
 import { createPortal } from '../../lib/createPortal';
+import { getDocumentBody } from '../../lib/dom';
 import { isRefObject } from '../../lib/isRefObject';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { HasChildren } from '../../types';
 import { ColorSchemeProvider } from '../ColorSchemeProvider/ColorSchemeProvider';
 import { AppRootContext, type AppRootContextInterface } from './AppRootContext';
+import { AppRootStyleContainer } from './AppRootStyleContainer';
 
 export interface AppRootPortalProps extends HasChildren {
   /**
    * - При передаче `true` будет использовать `portalRoot` из контекста `AppRoot`.
    * - При передаче элемента будут игнорироваться `portalRoot` и `disablePortal` из контекста `AppRoot`.
+   * - При передаче `SplitLayout` будет использоваться контейнер внутри `SplitLayout`, сразу после контента приложения.
+   *   Если контейнера `SplitLayout` в приложении нет, то будет использован глобальный `portalRoot`, чаще всего
+   *   это последний дочерний элемент `body`.
    */
-  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | null;
+  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | null | 'SplitLayout';
+  className?: string;
 }
 
-export const AppRootPortal = ({ children, usePortal }: AppRootPortalProps): React.ReactNode => {
-  const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);
+export const AppRootPortal = ({
+  children,
+  usePortal,
+  className,
+}: AppRootPortalProps): React.ReactNode => {
+  const {
+    setPortalRoot,
+    appRoot,
+    mode,
+    disablePortal: disableCreatePortalInGlobalPortalRoot,
+  } = React.useContext(AppRootContext);
   const colorScheme = useColorScheme();
 
-  const isClient = useIsClient();
-  if (!isClient) {
-    return null;
-  }
+  const canUsePortal = shouldUsePortal(
+    usePortal,
+    mode,
+    Boolean(disableCreatePortalInGlobalPortalRoot),
+  );
+  const portalContainer = usePortalContainer(usePortal);
 
-  const portalContainer = resolvePortalContainer(usePortal, portalRoot.current);
-  if (!portalContainer || shouldDisablePortal(usePortal, mode, Boolean(disablePortal))) {
-    return <React.Fragment>{children}</React.Fragment>;
-  }
+  useIsomorphicLayoutEffect(
+    // Создаём контейнер для портала по запросу один раз
+    // и пока приложение не размонтируется.
+    // Удаление созданной ноды происходит в AppRoot
+    function initializePortalRootIfNeeded() {
+      const shouldCreatePortalRoot = canUsePortal && portalContainer === null;
+      if (shouldCreatePortalRoot) {
+        const documentBody = getDocumentBody(appRoot.current);
+        const portal = documentBody.ownerDocument.createElement('div');
+        documentBody.appendChild(portal);
+
+        setPortalRoot(portal);
+      }
 
-  return createPortal(
-    <ColorSchemeProvider value={colorScheme}>{children}</ColorSchemeProvider>,
-    portalContainer,
+      // Note:
+      // Очистка и удаление `portalRoot` делегируется `AppRoot`, т.к. экземпляров `AppRootPortal` может быть несколько и размонтирование одного из них удалит `portalRoot`, что сломает работу других экземпляров.
+    },
+    [canUsePortal, appRoot, portalContainer, setPortalRoot],
   );
+
+  if (canUsePortal && portalContainer) {
+    return createPortal(
+      <ColorSchemeProvider value={colorScheme}>
+        <AppRootStyleContainer className={className}>{children}</AppRootStyleContainer>
+      </ColorSchemeProvider>,
+      portalContainer,
+    );
+  }
+
+  return children;
 };
 
-function shouldDisablePortal(
+function shouldUsePortal(
   usePortal: AppRootPortalProps['usePortal'],
   mode: AppRootContextInterface['mode'],
-  disablePortal: boolean,
+  disableCreatePortalInGlobalPortalRoot: boolean,
 ) {
-  if (usePortal !== undefined) {
-    if (typeof usePortal !== 'boolean') {
-      return false;
-    }
-    return disablePortal || usePortal !== true;
+  if (usePortal === undefined) {
+    return disableCreatePortalInGlobalPortalRoot === false && mode !== 'full';
   }
-  // fallback
-  return disablePortal || mode === 'full';
+
+  if (typeof usePortal !== 'boolean') {
+    return true;
+  }
+
+  return disableCreatePortalInGlobalPortalRoot === false && usePortal === true;
 }
 
-function resolvePortalContainer<PortalRootFromContext extends HTMLElement | null | undefined>(
-  usePortal: AppRootPortalProps['usePortal'],
-  portalRootFromContext: PortalRootFromContext,
-) {
-  if (usePortal === true || !usePortal) {
-    return portalRootFromContext ? portalRootFromContext : null;
+function usePortalContainer(usePortal: AppRootPortalProps['usePortal']): HTMLElement | null {
+  const { portalRoot, popoutModalRoot } = React.useContext(AppRootContext);
+  if (typeof usePortal === 'boolean' || usePortal === undefined) {
+    return portalRoot;
+  }
+
+  if (usePortal === 'SplitLayout') {
+    return popoutModalRoot.current || portalRoot;
   }
 
   return isRefObject(usePortal) ? usePortal.current : usePortal;

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

@@ -0,0 +1,77 @@
+.host {
+  /* чтобы можно было ограничить размеры приложения
+   * извне с помощью max-height, max-width */
+  max-inline-size: inherit;
+  max-block-size: inherit;
+  inline-size: 100%;
+  block-size: 100%;
+  -webkit-tap-highlight-color: transparent;
+  text-size-adjust: 100%;
+  font-family: var(--vkui--font_family_base);
+  color: var(--vkui--color_text_primary);
+  color-scheme: var(--vkui--colors_scheme);
+}
+
+.sizeXRegular {
+  background: var(--vkui--color_background);
+}
+
+@media (--sizeX-regular) {
+  .sizeXNone {
+    background: var(--vkui--color_background);
+  }
+}
+
+.layoutCard {
+  background: var(--vkui--color_background);
+}
+
+.layoutPlain {
+  background: var(--vkui--color_background_content);
+}
+
+.sizeYCompact {
+  --vkui_internal--panel_header_height: var(--vkui--size_panel_header_height--compact);
+}
+
+@media (--sizeY-compact) {
+  .sizeYNone {
+    --vkui_internal--panel_header_height: var(--vkui--size_panel_header_height--compact);
+  }
+}
+
+.userSelectNone {
+  user-select: none;
+}
+
+/**
+ * Хак для webkit-based браузеров, потому что на версиях iOS <= 14.* исчезает возможность
+ * редактировать contenteditable элементы, если выше по дереву задан user-select: none;
+ */
+.userSelectNone [contenteditable] {
+  user-select: text;
+}
+
+@media (--pointer-has-not) {
+  .pointerNone {
+    user-select: none;
+  }
+
+  .pointerNone [contenteditable] {
+    user-select: text;
+  }
+}
+
+.embedded {
+  /* Раньше в этом режиме на родителе (app__root--embeded)
+   * лежал стиль overflow-x: hidden
+   * см: https://github.com/VKCOM/VKUI/commit/67366838397305b79d4c1de6e0b5ca03e7fd7450
+   * см: https://github.com/VKCOM/VKUI/pull/1248/files
+   * Но сейчас, так как главные стили, в том числе и
+   * transform: translate3d(0, 0, 0) лежат на AppRoot,
+   * то в этом смысла не видно.
+   * По крайней мере примеров,
+   * где бы overflow ломался в embedded режиме,
+   * пока не было найдено */
+  overflow: auto;
+}

package/src/components/AppRoot/AppRootStyleContainer.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useTokensClassName } from '../../lib/tokens';
+import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
+import { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';
+import { AppRootContext } from './AppRootContext';
+import { getSafeAreaInsetsAsCssVariables, getUserSelectModeClassName } from './helpers';
+import styles from './AppRootStyleContainer.module.css';
+
+const sizeXClassNames = {
+  none: styles.sizeXNone,
+  regular: styles.sizeXRegular,
+};
+
+const sizeYClassNames = {
+  none: styles.sizeYNone,
+  compact: styles.sizeYCompact,
+};
+
+const layoutClassNames = {
+  card: styles.layoutCard,
+  plain: styles.layoutPlain,
+};
+
+export function useAppRootStyles() {
+  const { layout, safeAreaInsets, mode, userSelectMode } = React.useContext(AppRootContext);
+  const { hasPointer, sizeX = 'none', sizeY = 'none' } = useAdaptivity();
+  const { isWebView } = useConfigProvider();
+  const userSelectModeClassName = getUserSelectModeClassName({
+    userSelectMode,
+    isWebView,
+    hasPointer,
+  });
+  const tokensClassName = useTokensClassName();
+
+  return {
+    style: safeAreaInsets ? getSafeAreaInsetsAsCssVariables(safeAreaInsets) : undefined,
+    className: classNames(
+      styles.host,
+      mode === 'embedded' && styles.embedded,
+      sizeX !== 'compact' && sizeXClassNames[sizeX],
+      sizeY !== 'regular' && sizeYClassNames[sizeY],
+      layout && layoutClassNames[layout],
+      userSelectModeClassName,
+      tokensClassName,
+    ),
+  };
+}
+
+type AppRootStyleContainerProps = RootComponentProps<HTMLDivElement>;
+
+/**
+ * Специальный контейнер для переиспользования стилей, токенов и safe-area-inset в:
+ * - точке монтирования приложения – `AppRoot`;
+ * - точке монтирования порталов для модальных окон – `PortalRoot`.
+ *
+ * @private
+ */
+export function AppRootStyleContainer({ style, ...props }: AppRootStyleContainerProps) {
+  const { style: appRootStyle, className: appRootClassName } = useAppRootStyles();
+
+  return (
+    <RootComponent
+      baseClassName={appRootClassName}
+      style={appRootStyle ? { ...appRootStyle, ...style } : style}
+      {...props}
+    />
+  );
+}

package/src/components/AppRoot/ModalPopoutPortal.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import * as React from 'react';
+import { AppRootContext } from './AppRootContext';
+import { AppRootPortal, type AppRootPortalProps } from './AppRootPortal';
+
+/**
+ * Специальный компонент для рендеринга ModalRoot и
+ * popout компонентов внутри SplitLayout после контента
+ * Как было раньше в v6 при передаче модалок и popout компонентов
+ * в свойства SplitLayout modal/popout в режиме full
+ *
+ * @private
+ */
+export function ModalPopoutPortal(props: AppRootPortalProps) {
+  const { mode } = React.useContext(AppRootContext);
+  const usePortalProp = props.usePortal;
+
+  let usePortal: AppRootPortalProps['usePortal'] = usePortalProp;
+
+  const shouldRenderInAppAfterContent = usePortalProp === undefined && mode === 'full';
+  if (shouldRenderInAppAfterContent) {
+    usePortal = 'SplitLayout';
+  }
+
+  return <AppRootPortal {...props} usePortal={usePortal} />;
+}

package/src/components/AppRoot/helpers.ts

@@ -1,50 +1,7 @@
-import type { SizeTypeValues } from '../../lib/adaptivity';
 import { isRefObject } from '../../lib/isRefObject';
-import type { AppRootLayout, AppRootMode, AppRootUserSelectMode, SafeAreaInsets } from './types';
+import type { AppRootUserSelectMode, SafeAreaInsets } from './types';
 import styles from './AppRoot.module.css';
 
-type ContainerClassNamesProps = {
-  mode: AppRootMode;
-  layout?: AppRootLayout;
-  tokensClassName: string;
-  sizeX: SizeTypeValues | 'none';
-  sizeY: SizeTypeValues | 'none';
-};
-
-export function getClassNamesByMode({
-  mode,
-  layout,
-  tokensClassName,
-  sizeX,
-  sizeY,
-}: ContainerClassNamesProps): [string[], string[]] {
-  const baseClassNames: string[] = ['vkui__root'];
-  const stylesClassNames: string[] = [tokensClassName];
-
-  if (mode === 'full' || mode === 'embedded') {
-    if (layout) {
-      const vkuiLayoutClassNames = { card: 'vkui--layout-card', plain: 'vkui--layout-plain' };
-      stylesClassNames.push(vkuiLayoutClassNames[layout]);
-    }
-
-    if (sizeX !== 'compact') {
-      const vkuiSizeXClassNames = { none: 'vkui--sizeX-none', regular: 'vkui--sizeX-regular' };
-      stylesClassNames.push(vkuiSizeXClassNames[sizeX]);
-    }
-
-    if (sizeY !== 'regular') {
-      const vkuiSizeYClassNames = { none: 'vkui--sizeY-none', compact: 'vkui--sizeY-compact' };
-      stylesClassNames.push(vkuiSizeYClassNames[sizeY]);
-    }
-
-    if (mode === 'embedded') {
-      baseClassNames.push('vkui__root--embedded');
-    }
-  }
-
-  return [baseClassNames, stylesClassNames];
-}
-
 export const getParentElement = (el: HTMLElement | null): HTMLElement | null =>
   el ? el.parentElement : null;
 
@@ -54,38 +11,26 @@ export const extractPortalRootByProp = (
 
 export const CUSTOM_PROPERTY_INSET_PREFIX = `--vkui_internal--safe_area_inset_`;
 
-export const setSafeAreaInsets = (
+export function getSafeAreaInsetsAsCssVariables(
   safeAreaInsets: SafeAreaInsets | undefined,
-  rootContainer: HTMLElement,
-  portalContainer?: HTMLElement,
-): (() => void) => {
+): Record<string, string> {
   if (!safeAreaInsets) {
-    return () => void 0;
+    return {};
   }
 
+  const cssVariables: Record<string, string> = {};
+
   for (const key in safeAreaInsets) {
     if (safeAreaInsets.hasOwnProperty(key) && typeof safeAreaInsets[key] === 'number') {
       const propertyKey = `${CUSTOM_PROPERTY_INSET_PREFIX}${key}`;
       const propertyValue = safeAreaInsets[key];
-      rootContainer.style.setProperty(propertyKey, `${propertyValue}px`);
-      if (portalContainer) {
-        portalContainer.style.setProperty(propertyKey, `${propertyValue}px`);
-      }
+
+      cssVariables[propertyKey] = `${propertyValue}px`;
     }
   }
 
-  return function unset() {
-    for (const key in safeAreaInsets) {
-      if (safeAreaInsets.hasOwnProperty(key)) {
-        const propertyKey = `${CUSTOM_PROPERTY_INSET_PREFIX}${key}`;
-        rootContainer.style.removeProperty(propertyKey);
-        if (portalContainer) {
-          portalContainer.style.removeProperty(propertyKey);
-        }
-      }
-    }
-  };
-};
+  return cssVariables;
+}
 
 export function getUserSelectModeClassName({
   userSelectMode,

package/src/components/BaseGallery/BaseGallery.tsx

@@ -272,7 +272,7 @@ export const BaseGallery = ({
 
   const onEnd = (e: CustomTouchEvent) => {
     if (isDraggable) {
-      const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;
+      const targetIndex = e.isSlide ? getTarget(e) : (slideIndex ?? 0);
       onDragEnd?.(e, targetIndex);
 
       const nextShiftState: Partial<ShiftingState> = {

package/src/components/BaseGallery/CarouselBase/CarouselBase.tsx

@@ -70,6 +70,7 @@ export const CarouselBase = ({
   const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';
 
   const transformCssStyles = (shiftX: number, animation = false) => {
+    shiftX = Math.round(shiftX);
     slidesManager.current.loopPoints.forEach((loopPoint) => {
       const { target, index } = loopPoint;
       const slide = slidesStore.current[index];

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { type ChangeEvent } from 'react';
 import * as React from 'react';
 import {
   Icon12Dropdown,
@@ -92,11 +93,13 @@ export const CalendarHeader = ({
 }: CalendarHeaderProps): React.ReactNode => {
   const { locale } = useConfigProvider();
   const onMonthsChange = React.useCallback(
-    (newValue: SelectProps['value']) => onChange(setMonth(viewDate, Number(newValue))),
+    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>
+      onChange(setMonth(viewDate, Number(newValue))),
     [onChange, viewDate],
   );
   const onYearChange = React.useCallback(
-    (newValue: SelectProps['value']) => onChange(setYear(viewDate, Number(newValue))),
+    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>
+      onChange(setYear(viewDate, Number(newValue))),
     [onChange, viewDate],
   );
 

package/src/components/CalendarTime/CalendarTime.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { type ChangeEvent } from 'react';
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { setHours, setMinutes } from 'date-fns';
@@ -69,11 +70,13 @@ export const CalendarTime = ({
     : minutes;
 
   const onHoursChange = React.useCallback(
-    (newValue: SelectProps['value']) => onChange?.(setHours(value, Number(newValue))),
+    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>
+      onChange?.(setHours(value, Number(newValue))),
     [onChange, value],
   );
   const onMinutesChange = React.useCallback(
-    (newValue: SelectProps['value']) => onChange?.(setMinutes(value, Number(newValue))),
+    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>
+      onChange?.(setMinutes(value, Number(newValue))),
     [onChange, value],
   );
 

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { IconAppearanceProvider } from '@vkontakte/icons';
 import { useAutoDetectColorScheme } from '../../hooks/useAutoDetectColorScheme';
-import { useObjectMemo } from '../../hooks/useObjectMemo';
 import { TokensClassProvider } from '../../lib/tokens';
 import { excludeKeysWithUndefined } from '../../lib/utils';
 import {
@@ -40,16 +39,28 @@ export const ConfigProvider = (propsRaw: ConfigProviderProps): React.ReactNode =
 
   const colorScheme = useAutoDetectColorScheme(colorSchemeProp);
 
-  const configContext = useObjectMemo({
-    hasCustomPanelHeaderAfter,
-    customPanelHeaderAfterMinWidth,
-    isWebView,
-    transitionMotionEnabled,
-    platform,
-    locale,
-    tokensClassNames,
-    colorScheme,
-  });
+  const configContext = React.useMemo(
+    () => ({
+      hasCustomPanelHeaderAfter,
+      customPanelHeaderAfterMinWidth,
+      isWebView,
+      transitionMotionEnabled,
+      platform,
+      locale,
+      tokensClassNames,
+      colorScheme,
+    }),
+    [
+      colorScheme,
+      customPanelHeaderAfterMinWidth,
+      hasCustomPanelHeaderAfter,
+      isWebView,
+      locale,
+      platform,
+      tokensClassNames,
+      transitionMotionEnabled,
+    ],
+  );
 
   return (
     <ConfigProviderContext.Provider value={configContext}>

package/src/components/Counter/Counter.module.css

@@ -5,28 +5,93 @@
   padding-inline: 5px;
   text-align: center;
   box-sizing: border-box;
+  background: var(--vkui_internal--counter_background);
+  color: var(--vkui_internal--counter_foreground);
+
+  --vkui_internal--counter_background: transparent;
+  --vkui_internal--counter_foreground: var(--vkui--color_text_contrast);
 }
 
+/* -------- Mode Primary --------- */
 .modePrimary {
-  background: var(--vkui--color_background_accent);
-  color: var(--vkui--color_text_contrast);
+  --vkui_internal--counter_foreground: var(--vkui--color_text_contrast);
+}
+
+.modePrimary.appearanceAccent {
+  --vkui_internal--counter_background: var(--vkui--color_background_accent_themed);
+  --vkui_internal--counter_foreground: var(--vkui--color_text_contrast_themed);
+}
+
+.modePrimary.appearanceNeutral {
+  --vkui_internal--counter_background: var(--vkui--color_icon_secondary);
 }
 
-.modeSecondary {
-  background: var(--vkui--color_icon_secondary);
-  color: var(--vkui--color_text_contrast_themed);
+.modePrimary.appearanceAccentGreen {
+  --vkui_internal--counter_background: var(--vkui--color_accent_green);
 }
 
-.modeProminent {
-  background: var(--vkui--color_accent_red);
-  color: var(--vkui--color_text_contrast);
+.modePrimary.appearanceAccentRed {
+  --vkui_internal--counter_background: var(--vkui--color_accent_red);
 }
 
+.modePrimary.appearanceCustom {
+  --vkui_internal--counter_background: transparent;
+}
+
+/* -------- Mode Contrast --------- */
+
 .modeContrast {
-  background: var(--vkui--color_background_content);
-  color: var(--vkui--color_text_accent_themed);
+  --vkui_internal--counter_background: var(--vkui--color_background_contrast);
 }
 
+.modeContrast.appearanceAccent {
+  --vkui_internal--counter_foreground: var(--vkui--color_text_accent);
+}
+
+.modeContrast.appearanceNeutral {
+  --vkui_internal--counter_foreground: var(--vkui--color_text_tertiary);
+}
+
+.modeContrast.appearanceAccentGreen {
+  --vkui_internal--counter_foreground: var(--vkui--color_accent_green);
+}
+
+.modeContrast.appearanceAccentRed {
+  --vkui_internal--counter_foreground: var(--vkui--color_accent_red);
+}
+
+.modeContrast.appearanceCustom {
+  --vkui_internal--counter_foreground: var(--vkui--color_text_primary_invariably);
+}
+
+/* -------- Mode Tertiary --------- */
+
+.modeTertiary {
+  --vkui_internal--counter_background: transparent;
+}
+
+.modeTertiary.appearanceAccent {
+  --vkui_internal--counter_foreground: var(--vkui--color_text_accent);
+}
+
+.modeTertiary.appearanceNeutral {
+  --vkui_internal--counter_foreground: var(--vkui--color_text_subhead);
+}
+
+.modeTertiary.appearanceAccentGreen {
+  --vkui_internal--counter_foreground: var(--vkui--color_accent_green);
+}
+
+.modeTertiary.appearanceAccentRed {
+  --vkui_internal--counter_foreground: var(--vkui--color_accent_red);
+}
+
+.modeTertiary.appearanceCustom {
+  --vkui_internal--counter_foreground: var(--vkui--color_text_contrast);
+}
+
+/*----------------------------------*/
+
 .sizeM {
   block-size: 24px;
   min-inline-size: 24px;
@@ -40,11 +105,14 @@
 }
 
 .modeInherit {
-  background-color: var(
+  --vkui_internal--counter_background: var(
     --vkui_internal--counter_inherit_background,
     var(--vkui--color_icon_secondary)
   );
-  color: var(--vkui_internal--counter_inherit_color, var(--vkui--color_text_contrast_themed));
+  --vkui_internal--counter_foreground: var(
+    --vkui_internal--counter_inherit_color,
+    var(--vkui--color_text_contrast_themed)
+  );
 }
 
 /**