@vkontakte/vkui 4.22.2 → 4.25.1

package/src/components/AppRoot/AppRoot.tsx

@@ -1,161 +1,214 @@
-import * as React from 'react';
-import { useDOM } from '../../lib/dom';
-import { classNames } from '../../lib/classNames';
-import { AppRootContext } from './AppRootContext';
-import { withAdaptivity, SizeType, AdaptivityProps } from '../../hoc/withAdaptivity';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { classScopingMode } from '../../lib/classScopingMode';
-import { IconSettingsProvider } from '@vkontakte/icons';
-import { elementScrollController, globalScrollController, ScrollContext, ScrollContextInterface } from './ScrollContext';
-import { noop } from '../../lib/utils';
-import { warnOnce } from '../../lib/warnOnce';
-import { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';
-import { useInsets } from '../../hooks/useInsets';
-import { Insets } from '@vkontakte/vk-bridge';
-import './AppRoot.css';
+import * as React from "react";
+import { useDOM } from "../../lib/dom";
+import { classNames } from "../../lib/classNames";
+import { AppRootContext } from "./AppRootContext";
+import {
+  withAdaptivity,
+  SizeType,
+  AdaptivityProps,
+} from "../../hoc/withAdaptivity";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { classScopingMode } from "../../lib/classScopingMode";
+import { IconSettingsProvider } from "@vkontakte/icons";
+import {
+  elementScrollController,
+  globalScrollController,
+  ScrollContext,
+  ScrollContextInterface,
+} from "./ScrollContext";
+import { noop } from "../../lib/utils";
+import { warnOnce } from "../../lib/warnOnce";
+import { useKeyboardInputTracker } from "../../hooks/useKeyboardInputTracker";
+import { useInsets } from "../../hooks/useInsets";
+import { AppearanceProviderContext } from "../AppearanceProvider/AppearanceProviderContext";
+import { Insets } from "@vkontakte/vk-bridge";
+import "./AppRoot.css";
 
 // Используйте classList, но будьте осторожны
 /* eslint-disable no-restricted-properties */
 
-export interface AppRootProps extends React.HTMLAttributes<HTMLDivElement>, Pick<AdaptivityProps, 'sizeX' | 'hasMouse'> {
+export interface AppRootProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    Pick<AdaptivityProps, "sizeX" | "hasMouse"> {
   /** @deprecated Use mode="embedded" */
   embedded?: boolean;
   /** Режим встраивания */
-  mode?: 'partial' | 'embedded' | 'full';
+  mode?: "partial" | "embedded" | "full";
   window?: Window;
   /** Убирает классы без префикса (.Button) */
   noLegacyClasses?: boolean;
-  scroll?: 'global' | 'contain';
+  scroll?: "global" | "contain";
 }
 
-const warn = warnOnce('AppRoot');
-export const AppRoot: React.FC<AppRootProps> = withAdaptivity(({
-  children, mode: _mode, embedded: _embedded, sizeX, hasMouse, noLegacyClasses = false, scroll = 'global',
-  ...props
-}: AppRootProps) => {
-  // normalize mode
-  const mode = _mode || (_embedded ? 'embedded' : 'full');
-  const isKeyboardInputActive = useKeyboardInputTracker();
-  const rootRef = React.useRef<HTMLDivElement>();
-  const [portalRoot, setPortalRoot] = React.useState<HTMLDivElement>(null);
-  const { window, document } = useDOM();
-  const insets = useInsets();
-
-  const initialized = React.useRef(false);
-  if (!initialized.current) {
-    if (window && mode === 'full') {
-      document.documentElement.classList.add('vkui');
-    }
-    classScopingMode.noConflict = noLegacyClasses;
-    initialized.current = true;
-  }
-
-  if (process.env.NODE_ENV === 'development') {
-    if (scroll !== 'global' && mode !== 'embedded') {
-      warn('Scroll modes only supported in embedded mode');
-    }
-    if (_mode && _embedded) {
-      warn(`mode="${mode}" overrides embedded`);
-    }
-  }
-
-  // setup portal
-  useIsomorphicLayoutEffect(() => {
-    if (mode === 'full') {
-      return noop;
+const warn = warnOnce("AppRoot");
+export const AppRoot = withAdaptivity<AppRootProps>(
+  ({
+    children,
+    mode: _mode,
+    embedded: _embedded,
+    sizeX,
+    hasMouse,
+    noLegacyClasses = false,
+    scroll = "global",
+    ...props
+  }) => {
+    // normalize mode
+    const mode = _mode || (_embedded ? "embedded" : "full");
+    const isKeyboardInputActive = useKeyboardInputTracker();
+    const rootRef = React.useRef<HTMLDivElement | null>(null);
+    const [portalRoot, setPortalRoot] = React.useState<HTMLDivElement | null>(
+      null
+    );
+    const { window, document } = useDOM();
+    const insets = useInsets();
+    const appearanceContext = React.useContext(AppearanceProviderContext);
+
+    const initialized = React.useRef(false);
+    if (!initialized.current) {
+      if (document && mode === "full") {
+        document.documentElement.classList.add("vkui");
+      }
+      classScopingMode.noConflict = noLegacyClasses;
+      initialized.current = true;
     }
 
-    const portal = document.createElement('div');
-    portal.classList.add('vkui__portal-root');
-    document.body.appendChild(portal);
-    setPortalRoot(portal);
-    return () => portal.parentElement.removeChild(portal);
-  }, []);
-
-  // setup root classes
-  useIsomorphicLayoutEffect(() => {
-    if (mode === 'partial') {
-      return noop;
+    if (process.env.NODE_ENV === "development") {
+      if (scroll !== "global" && mode !== "embedded") {
+        warn("Scroll modes only supported in embedded mode");
+      }
+      if (_mode && _embedded) {
+        warn(`mode="${mode}" overrides embedded`);
+      }
     }
 
-    const parent = rootRef.current.parentElement;
-    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);
-    parent.classList.add(...classes);
-
-    return () => {
-      parent.classList.remove(...classes);
-      if (mode === 'full') {
-        document.documentElement.classList.remove('vkui');
+    // setup portal
+    useIsomorphicLayoutEffect(() => {
+      const portal = document!.createElement("div");
+      portal.classList.add("vkui__portal-root");
+      document!.body.appendChild(portal);
+      setPortalRoot(portal);
+      return () => {
+        portal.parentElement?.removeChild(portal);
+      };
+    }, []);
+
+    // setup root classes
+    useIsomorphicLayoutEffect(() => {
+      if (mode === "partial") {
+        return noop;
       }
-    };
-  }, []);
 
-  // setup insets
-  useIsomorphicLayoutEffect(() => {
-    if (mode === 'partial') {
-      return noop;
-    }
+      const parent = rootRef.current?.parentElement;
+      const classes = ["vkui__root"].concat(
+        mode === "embedded" ? "vkui__root--embedded" : []
+      );
+      parent?.classList.add(...classes);
 
-    const parent = rootRef.current.parentElement;
+      return () => {
+        parent?.classList.remove(...classes);
+        if (mode === "full") {
+          document?.documentElement.classList.remove("vkui");
+        }
+      };
+    }, []);
 
-    for (const key in insets) {
-      if (insets.hasOwnProperty(key) && typeof insets[key as keyof Insets] === 'number') {
-        const inset = insets[key as keyof Insets];
-        parent.style.setProperty(`--safe-area-inset-${key}`, `${inset}px`);
-        portalRoot && portalRoot.style.setProperty(`--safe-area-inset-${key}`, `${inset}px`);
+    // setup insets
+    useIsomorphicLayoutEffect(() => {
+      if (mode === "partial" || !rootRef.current?.parentElement) {
+        return noop;
       }
-    }
 
-    return () => {
+      const parent = rootRef.current.parentElement;
+
       for (const key in insets) {
-        if (insets.hasOwnProperty(key)) {
-          parent.style.removeProperty(`--safe-area-inset-${key}`);
-          portalRoot && portalRoot.style.removeProperty(`--safe-area-inset-${key}`);
+        if (
+          insets.hasOwnProperty(key) &&
+          typeof insets[key as keyof Insets] === "number"
+        ) {
+          const inset = insets[key as keyof Insets];
+          parent.style.setProperty(`--safe-area-inset-${key}`, `${inset}px`);
+          portalRoot &&
+            portalRoot.style.setProperty(
+              `--safe-area-inset-${key}`,
+              `${inset}px`
+            );
         }
       }
-    };
-  }, [insets, portalRoot]);
 
-  // adaptivity handler
-  useIsomorphicLayoutEffect(() => {
-    if (mode === 'partial' || sizeX !== SizeType.REGULAR) {
-      return noop;
-    }
-    const container = mode === 'embedded' ? rootRef.current.parentElement : document.body;
-    container.classList.add('vkui--sizeX-regular');
-    return () => container.classList.remove('vkui--sizeX-regular');
-  }, [sizeX]);
-
-  const scrollController = React.useMemo<ScrollContextInterface>(
-    () => scroll === 'contain' ? elementScrollController(rootRef) : globalScrollController(window, document),
-    [scroll]);
-
-  const content = (
-    <AppRootContext.Provider value={{
-      appRoot: rootRef,
-      portalRoot: portalRoot,
-      embedded: mode === 'embedded',
-      keyboardInput: isKeyboardInputActive,
-    }}>
-      <ScrollContext.Provider value={scrollController}>
-        <IconSettingsProvider classPrefix="vkui" globalClasses={!noLegacyClasses}>
-          {children}
-        </IconSettingsProvider>
-      </ScrollContext.Provider>
-    </AppRootContext.Provider>
-  );
-
-  return mode === 'partial' ? content : (
-    <div ref={rootRef} vkuiClass={classNames('AppRoot', {
-      'AppRoot--no-mouse': !hasMouse,
-      'AppRoot--keyboard-input': isKeyboardInputActive,
-    })} {...props}>
-      {content}
-    </div>
-  );
-}, {
-  sizeX: true,
-  hasMouse: true,
-});
+      return () => {
+        for (const key in insets) {
+          if (insets.hasOwnProperty(key)) {
+            parent.style.removeProperty(`--safe-area-inset-${key}`);
+            portalRoot &&
+              portalRoot.style.removeProperty(`--safe-area-inset-${key}`);
+          }
+        }
+      };
+    }, [insets, portalRoot]);
+
+    // adaptivity handler
+    useIsomorphicLayoutEffect(() => {
+      if (mode === "partial" || sizeX !== SizeType.REGULAR) {
+        return noop;
+      }
+      const container =
+        mode === "embedded" ? rootRef.current?.parentElement : document!.body;
+      container?.classList.add("vkui--sizeX-regular");
+      return () => container?.classList.remove("vkui--sizeX-regular");
+    }, [sizeX]);
+
+    const scrollController = React.useMemo<ScrollContextInterface>(
+      () =>
+        scroll === "contain"
+          ? elementScrollController(rootRef)
+          : globalScrollController(window, document),
+      [document, scroll, window]
+    );
+
+    useIsomorphicLayoutEffect(() => {
+      portalRoot?.setAttribute("scheme", appearanceContext?.scheme ?? "");
+    }, [portalRoot, appearanceContext?.scheme]);
+
+    const content = (
+      <AppRootContext.Provider
+        value={{
+          appRoot: rootRef,
+          portalRoot: portalRoot,
+          embedded: mode === "embedded",
+          keyboardInput: isKeyboardInputActive,
+          mode,
+        }}
+      >
+        <ScrollContext.Provider value={scrollController}>
+          <IconSettingsProvider
+            classPrefix="vkui"
+            globalClasses={!noLegacyClasses}
+          >
+            {children}
+          </IconSettingsProvider>
+        </ScrollContext.Provider>
+      </AppRootContext.Provider>
+    );
+
+    return mode === "partial" ? (
+      content
+    ) : (
+      <div
+        ref={rootRef}
+        vkuiClass={classNames("AppRoot", {
+          "AppRoot--no-mouse": !hasMouse,
+        })}
+        {...props}
+      >
+        {content}
+      </div>
+    );
+  },
+  {
+    sizeX: true,
+    hasMouse: true,
+  }
+);
 
+// eslint-disable-next-line import/no-default-export
 export default AppRoot;

package/src/components/AppRoot/AppRootContext.ts

@@ -1,9 +1,10 @@
-import * as React from 'react';
+import * as React from "react";
 
 export interface AppRootContextInterface {
   appRoot?: React.RefObject<HTMLDivElement>;
-  portalRoot?: HTMLDivElement;
+  portalRoot?: HTMLDivElement | null;
   embedded?: boolean;
+  mode?: "partial" | "embedded" | "full";
   keyboardInput?: boolean;
 }
 

package/src/components/AppRoot/AppRootPortal.tsx

@@ -1,10 +1,16 @@
-import * as React from 'react';
-import { createPortal } from 'react-dom';
-import { AppRootContext } from './AppRootContext';
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { AppRootContext } from "./AppRootContext";
 
-export const AppRootPortal: React.FC<React.PropsWithChildren<{ className?: string }>> = ({ children, className }) => {
-  const { portalRoot, embedded } = React.useContext(AppRootContext);
-  return embedded && portalRoot
-    ? createPortal((<div className={className}>{children}</div>), portalRoot)
-    : <React.Fragment>{children}</React.Fragment>;
+export const AppRootPortal: React.FC<
+  React.PropsWithChildren<{ className?: string; forcePortal?: boolean }>
+> = ({ children, className, forcePortal }) => {
+  const { portalRoot, mode } = React.useContext(AppRootContext);
+
+  forcePortal = forcePortal ?? mode !== "full";
+  return portalRoot && forcePortal ? (
+    createPortal(<div className={className}>{children}</div>, portalRoot)
+  ) : (
+    <React.Fragment>{children}</React.Fragment>
+  );
 };

package/src/components/AppRoot/Readme.md

@@ -3,6 +3,7 @@
 ## Режимы скролла
 
 Навигационные компоненты VKUI — `Root, View, Panel, Epic` — запоминают скролл экрана и восстанавливают его при возвращении. embedded-приложения поддерживают два режима скролла:
+
 - `global` (по умолчанию) — VKUI-приложение скроллится вместе со страницей.
 - `contain` — VKUI-приложние живет в отдельной зоне и скроллится независимо внутри `AppRoot` (например, в модалке).
-Режимы переключают через `<AppRoot scroll="...">`.
+  Режимы переключают через `<AppRoot scroll="...">`.

package/src/components/AppRoot/ScrollContext.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { noop } from '../../lib/utils';
-import { clamp } from '../../helpers/math';
+import * as React from "react";
+import { noop } from "../../lib/utils";
+import { clamp } from "../../helpers/math";
 
 export interface ScrollContextInterface {
   getScroll(): { x: number; y: number };
@@ -12,23 +12,33 @@ export const ScrollContext = React.createContext<ScrollContextInterface>({
   scrollTo: noop,
 });
 
-export const globalScrollController = (window: Window, document: HTMLDocument) => ({
-  getScroll: () => ({ x: window.pageXOffset, y: window.pageYOffset }),
+export const globalScrollController = (
+  window: Window | undefined,
+  document: HTMLDocument | undefined
+) => ({
+  getScroll: () => ({ x: window!.pageXOffset, y: window!.pageYOffset }),
   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);
+    window!.scrollTo(
+      x ? clamp(x, 0, document!.body.scrollWidth - window!.innerWidth) : 0,
+      y ? clamp(y, 0, document!.body.scrollHeight - window!.innerHeight) : 0
+    );
   },
 });
 
-export const elementScrollController = (elRef: React.RefObject<HTMLElement>) => ({
-  getScroll: () => ({ x: elRef.current.scrollLeft, y: elRef.current.scrollTop }),
+export const elementScrollController = (
+  elRef: React.RefObject<HTMLElement>
+) => ({
+  getScroll: () => ({
+    x: elRef.current?.scrollLeft ?? 0,
+    y: elRef.current?.scrollTop ?? 0,
+  }),
   scrollTo: (x = 0, y = 0) => {
     const el = elRef.current;
     // Some iOS versions do not normalize scroll — do it manually.
-    el.scrollTo(
+    el?.scrollTo(
       x ? clamp(x, 0, el.scrollWidth - el.clientWidth) : 0,
-      y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0);
+      y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0
+    );
   },
 });

package/src/components/AppearanceProvider/AppearanceProvider.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { AppearanceType } from "@vkontakte/vk-bridge";
+import { AppearanceProviderContext } from "./AppearanceProviderContext";
+import { getScheme } from "../../helpers/getScheme";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+
+export interface AppearanceProviderProps {
+  appearance?: AppearanceType;
+}
+
+export const AppearanceProvider: React.FC<AppearanceProviderProps> = ({
+  children,
+  appearance = "light",
+}) => {
+  const platform = usePlatform();
+
+  const appearanceContext = React.useMemo(
+    () => ({
+      scheme: getScheme({
+        platform,
+        appearance,
+      }),
+      appearance,
+    }),
+    [appearance, platform]
+  );
+
+  return (
+    <AppearanceProviderContext.Provider value={appearanceContext}>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, {
+            className: classNames(
+              child.props.className,
+              `vkui${appearanceContext.scheme}`
+            ),
+          });
+        }
+        return child;
+      })}
+    </AppearanceProviderContext.Provider>
+  );
+};

package/src/components/AppearanceProvider/AppearanceProviderContext.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { AppearanceType } from "@vkontakte/vk-bridge";
+import { Scheme } from "../../helpers/scheme";
+
+export interface AppearanceProviderContextProps {
+  scheme: Scheme | "inherit" | undefined;
+  appearance: AppearanceType;
+}
+
+export const AppearanceProviderContext = React.createContext<
+  AppearanceProviderContextProps | undefined
+>(undefined);

package/src/components/Avatar/Avatar.css

@@ -31,10 +31,43 @@
 }
 
 .Avatar--shadow::after {
-  content: '';
+  content: "";
   box-shadow: inset 0 0 0 var(--thin-border) var(--image_border);
 }
 
+.Avatar__overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.3s;
+  border: none;
+}
+
+.Avatar__overlay--light {
+  background-color: rgba(255, 255, 255, 0.85);
+}
+
+.Avatar__overlay--dark {
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.Avatar__overlay--visible {
+  opacity: 1;
+}
+
+.Avatar__overlay--focus-visible {
+  opacity: 1;
+  box-shadow: 0 0 0 2px var(--accent);
+}
+
 .Avatar__children {
   display: flex;
   align-items: center;
@@ -42,6 +75,37 @@
   color: var(--icon_secondary);
 }
 
+.Avatar__badge {
+  position: absolute;
+  z-index: 1;
+  bottom: calc(14% - 1px);
+  right: calc(14% - 1px);
+  transform: translate(50%, 50%);
+}
+
+.Avatar__badge--large {
+  bottom: 14%;
+  right: 14%;
+}
+
+.Avatar__badge--shadow {
+  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.04))
+    drop-shadow(0 4px 4px rgba(0, 0, 0, 0.08));
+}
+
+.Avatar__badge-online {
+  color: #4bb34b;
+  background-color: var(--background_content);
+  border-radius: 50%;
+}
+
+.Avatar__badge-online-mobile {
+  color: #4bb34b;
+  background-color: var(--background_content);
+  border-radius: 3px;
+  padding: 2px;
+}
+
 /**
  * .CellButton
  */