@vkontakte/vkui 4.31.0 → 4.32.0

package/src/components/AppRoot/AppRoot.tsx

@@ -11,10 +11,8 @@ import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { classScopingMode } from "../../lib/classScopingMode";
 import { IconSettingsProvider } from "@vkontakte/icons";
 import {
-  elementScrollController,
-  globalScrollController,
-  ScrollContext,
-  ScrollContextInterface,
+  ElementScrollController,
+  GlobalScrollController,
 } from "./ScrollContext";
 import { noop } from "../../lib/utils";
 import { warnOnce } from "../../lib/warnOnce";
@@ -41,6 +39,10 @@ export interface AppRootProps
 }
 
 const warn = warnOnce("AppRoot");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/AppRoot
+ */
 export const AppRoot = withAdaptivity<AppRootProps>(
   ({
     children,
@@ -59,7 +61,7 @@ export const AppRoot = withAdaptivity<AppRootProps>(
     const [portalRoot, setPortalRoot] = React.useState<HTMLDivElement | null>(
       null
     );
-    const { window, document } = useDOM();
+    const { document } = useDOM();
     const insets = useInsets();
     const { appearance } = React.useContext(ConfigProviderContext);
 
@@ -170,12 +172,10 @@ export const AppRoot = withAdaptivity<AppRootProps>(
         document!.documentElement.style.removeProperty("color-scheme");
     }, [appearance]);
 
-    const scrollController = React.useMemo<ScrollContextInterface>(
+    const ScrollController = React.useMemo(
       () =>
-        scroll === "contain"
-          ? elementScrollController(rootRef)
-          : globalScrollController(window, document),
-      [document, scroll, window]
+        scroll === "contain" ? ElementScrollController : GlobalScrollController,
+      [scroll]
     );
 
     const content = (
@@ -188,14 +188,14 @@ export const AppRoot = withAdaptivity<AppRootProps>(
           mode,
         }}
       >
-        <ScrollContext.Provider value={scrollController}>
+        <ScrollController elRef={rootRef}>
           <IconSettingsProvider
             classPrefix="vkui"
             globalClasses={!noLegacyClasses}
           >
             {children}
           </IconSettingsProvider>
-        </ScrollContext.Provider>
+        </ScrollController>
       </AppRootContext.Provider>
     );
 

package/src/components/AppRoot/ScrollContext.tsx

@@ -0,0 +1,261 @@
+import * as React from "react";
+import { noop } from "../../lib/utils";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { clamp } from "../../helpers/math";
+import { useDOM } from "../../lib/dom";
+
+const clearDisableScrollStyle = (node: HTMLElement) => {
+  Object.assign(node.style, {
+    position: "",
+    top: "",
+    left: "",
+    right: "",
+    overflowY: "",
+    overflowX: "",
+  });
+};
+
+export interface ScrollContextInterface {
+  getScroll(): { x: number; y: number };
+  scrollTo(x?: number, y?: number): void;
+  isScrollLock: boolean;
+  enableScrollLock(): void;
+  disableScrollLock(): void;
+  beforeScrollLockFnSetRef?: React.RefObject<Set<() => void>>;
+}
+
+export const ScrollContext = React.createContext<ScrollContextInterface>({
+  getScroll: () => ({ x: 0, y: 0 }),
+  scrollTo: noop,
+  isScrollLock: false,
+  enableScrollLock: noop,
+  disableScrollLock: noop,
+});
+
+export const useScroll = () => React.useContext(ScrollContext);
+
+export interface ScrollControllerProps {
+  elRef: React.RefObject<HTMLElement>;
+}
+
+export const GlobalScrollController: React.FC<ScrollControllerProps> = ({
+  children,
+}) => {
+  const { window, document } = useDOM();
+  const [isScrollLock, setScrollLock] = React.useState(false);
+  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());
+
+  const getScroll = React.useCallback<ScrollContextInterface["getScroll"]>(
+    () => ({ x: window!.pageXOffset, y: window!.pageYOffset }),
+    [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
+      );
+    },
+    [document, window]
+  );
+
+  const enableScrollLock = React.useCallback<
+    ScrollContextInterface["enableScrollLock"]
+  >(() => {
+    beforeScrollLockFnSetRef.current.forEach((fn) => {
+      fn();
+    });
+
+    const scrollY = window!.pageYOffset;
+    const scrollX = window!.pageXOffset;
+    const overflowY =
+      window!.innerWidth > document!.documentElement.clientWidth
+        ? "scroll"
+        : "";
+    const overflowX =
+      window!.innerHeight > document!.documentElement.clientHeight
+        ? "scroll"
+        : "";
+
+    Object.assign(document!.body.style, {
+      position: "fixed",
+      top: `-${scrollY}px`,
+      left: `-${scrollX}px`,
+      right: "0",
+      overflowY,
+      overflowX,
+    });
+    setScrollLock(true);
+  }, [document, window]);
+
+  const disableScrollLock = React.useCallback<
+    ScrollContextInterface["disableScrollLock"]
+  >(() => {
+    const scrollY = document!.body.style.top;
+    const scrollX = document!.body.style.left;
+
+    clearDisableScrollStyle(document!.body);
+    window!.scrollTo(-parseInt(scrollX || "0"), -parseInt(scrollY || "0"));
+    setScrollLock(false);
+  }, [document, window]);
+
+  const scrollController = React.useMemo<ScrollContextInterface>(
+    () => ({
+      getScroll,
+      scrollTo,
+      isScrollLock,
+      disableScrollLock,
+      enableScrollLock,
+
+      beforeScrollLockFnSetRef: beforeScrollLockFnSetRef,
+    }),
+    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock]
+  );
+
+  return (
+    <ScrollContext.Provider value={scrollController}>
+      {children}
+    </ScrollContext.Provider>
+  );
+};
+
+export const ElementScrollController: React.FC<ScrollControllerProps> = ({
+  elRef,
+  children,
+}) => {
+  const [isScrollLock, setScrollLock] = React.useState(false);
+  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());
+
+  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
+      );
+    },
+    [elRef]
+  );
+
+  const enableScrollLock = React.useCallback<
+    ScrollContextInterface["enableScrollLock"]
+  >(() => {
+    const el = elRef.current;
+    if (!el) {
+      return;
+    }
+    beforeScrollLockFnSetRef.current.forEach((fn) => {
+      fn();
+    });
+
+    const scrollY = el.scrollTop;
+    const scrollX = el.scrollLeft;
+    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,
+    });
+    setScrollLock(true);
+  }, [elRef]);
+
+  const disableScrollLock = React.useCallback<
+    ScrollContextInterface["disableScrollLock"]
+  >(() => {
+    const el = elRef.current;
+    if (!el) {
+      return;
+    }
+
+    const scrollY = el.style.top;
+    const scrollX = el.style.left;
+
+    clearDisableScrollStyle(el);
+    el.scrollTo(-parseInt(scrollX || "0"), -parseInt(scrollY || "0"));
+    setScrollLock(false);
+  }, [elRef]);
+
+  const scrollController = React.useMemo<ScrollContextInterface>(
+    () => ({
+      getScroll,
+      scrollTo,
+      isScrollLock,
+      disableScrollLock,
+      enableScrollLock,
+      beforeScrollLockFnSetRef,
+    }),
+    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock]
+  );
+
+  return (
+    <ScrollContext.Provider value={scrollController}>
+      {children}
+    </ScrollContext.Provider>
+  );
+};
+
+/**
+ * Вызывает функцию effect, до блокировки прокрутки
+ * @param effect функция, которая может возвращать функцию очистки
+ * @param deps effect обновится только при изменении значений в списке.
+ */
+export const useScrollLockEffect = (
+  effect: React.EffectCallback,
+  deps: React.DependencyList
+) => {
+  const destructorRef = React.useRef<ReturnType<React.EffectCallback>>(noop);
+  const { isScrollLock, beforeScrollLockFnSetRef } = useScroll();
+
+  // Изменяем effectCallback только при изменении deps
+  const effectCallback = React.useCallback(() => {
+    destructorRef.current = effect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  // Добавляем effectCallback в список функций, которые необходимо вызвать
+  // до блокировки
+  React.useEffect(() => {
+    const beforeSet = beforeScrollLockFnSetRef?.current;
+    if (!beforeSet) {
+      return noop;
+    }
+
+    beforeSet.add(effectCallback);
+
+    return () => {
+      beforeSet.delete(effectCallback);
+    };
+  }, [beforeScrollLockFnSetRef, effectCallback]);
+
+  // Вызываем сбрасывающую функцию, после отключения блокировки
+  React.useEffect(() => {
+    if (!isScrollLock && destructorRef.current) {
+      destructorRef.current();
+    }
+  }, [isScrollLock]);
+};
+
+export const useScrollLock = (enabled = true) => {
+  const { enableScrollLock, disableScrollLock } = useScroll();
+  useIsomorphicLayoutEffect(() => {
+    if (enabled) {
+      enableScrollLock();
+      return disableScrollLock;
+    }
+    return noop;
+  }, [enableScrollLock, disableScrollLock, enabled]);
+};

package/src/components/AppearanceProvider/AppearanceProvider.tsx

@@ -32,6 +32,9 @@ export const generateVKUITokensClassName = (
   return `vkui--${tokensPlatform}--${appearance}`;
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/AppearanceProvider
+ */
 export const AppearanceProvider: React.FC<AppearanceProviderProps> = ({
   children,
   appearance = "light",

package/src/components/Avatar/Avatar.css

@@ -124,11 +124,11 @@
 /**
  * .PanelHeader
  */
-.PanelHeader__left .Avatar {
+.PanelHeader__before .Avatar {
   margin-left: 8px;
 }
 
-.PanelHeader__right .Avatar {
+.PanelHeader__after .Avatar {
   margin-right: 8px;
 }
 

package/src/components/Avatar/Avatar.tsx

@@ -30,6 +30,9 @@ export interface AvatarProps
 export const AVATAR_DEFAULT_SIZE = 48;
 export const AVATAR_DEFAULT_SHADOW = true;
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Avatar
+ */
 const Avatar: React.FC<AvatarProps> = ({
   alt,
   crossOrigin,

package/src/components/Badge/Badge.css

@@ -8,11 +8,14 @@
 }
 
 .Badge--new {
-  background-color: var(--blue_200);
+  background-color: var(--blue_200, var(--vkui--color_icon_accent));
 }
 
 .Badge--prominent {
-  background-color: var(--counter_prominent_background);
+  background-color: var(
+    --counter_prominent_background,
+    var(--vkui--color_icon_negative)
+  );
 }
 
 .TabsItem__after .Badge {

package/src/components/Badge/Badge.tsx

@@ -1,27 +1,14 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
 import "./Badge.css";
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLElement> {
   mode: "new" | "prominent";
 }
 
-export const Badge: React.FunctionComponent<BadgeProps> = ({
-  mode,
-  ...restProps
-}: BadgeProps) => {
-  const platform = usePlatform();
-
-  return (
-    <span
-      vkuiClass={classNames(getClassName("Badge", platform), `Badge--${mode}`)}
-      {...restProps}
-    ></span>
-  );
-};
-
-Badge.defaultProps = {
-  mode: "new",
-};
+/**
+ * @see https://vkcom.github.io/VKUI/#/Badge
+ */
+export const Badge: React.FC<BadgeProps> = ({ mode = "new", ...restProps }) => (
+  <span vkuiClass={classNames("Badge", `Badge--${mode}`)} {...restProps} />
+);

package/src/components/Banner/Banner.tsx

@@ -13,9 +13,9 @@ import {
 } from "@vkontakte/icons";
 import Tappable from "../Tappable/Tappable";
 import IconButton from "../IconButton/IconButton";
-import Headline from "../Typography/Headline/Headline";
+import { Headline } from "../Typography/Headline/Headline";
 import { Subhead } from "../Typography/Subhead/Subhead";
-import Text from "../Typography/Text/Text";
+import { Text } from "../Typography/Text/Text";
 import { Title } from "../Typography/Title/Title";
 import "./Banner.css";
 
@@ -90,21 +90,13 @@ const BannerHeader: React.FC<BannerTypographyProps> = ({
   return size === "m" ? (
     <Title level="2" weight="2" {...restProps} />
   ) : (
-    <Headline weight="medium" {...restProps} />
-  );
-};
-
-const BannerSubheader: React.FC<BannerTypographyProps> = ({
-  size,
-  ...restProps
-}) => {
-  return size === "m" ? (
-    <Text weight="regular" {...restProps} />
-  ) : (
-    <Subhead {...restProps} />
+    <Headline weight="2" {...restProps} />
   );
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Banner
+ */
 const Banner: React.FC<BannerProps> = (props: BannerProps) => {
   const platform = usePlatform();
   const {
@@ -124,6 +116,8 @@ const Banner: React.FC<BannerProps> = (props: BannerProps) => {
     ...restProps
   } = props;
 
+  const SubheaderTypography = size === "m" ? Text : Subhead;
+
   return (
     <section
       {...restProps}
@@ -162,19 +156,11 @@ const Banner: React.FC<BannerProps> = (props: BannerProps) => {
             </BannerHeader>
           )}
           {hasReactNode(subheader) && (
-            <BannerSubheader
-              Component="span"
-              size={size}
-              vkuiClass="Banner__subheader"
-            >
+            <SubheaderTypography Component="span" vkuiClass="Banner__subheader">
               {subheader}
-            </BannerSubheader>
-          )}
-          {hasReactNode(text) && (
-            <Text weight="regular" vkuiClass="Banner__text">
-              {text}
-            </Text>
+            </SubheaderTypography>
           )}
+          {hasReactNode(text) && <Text vkuiClass="Banner__text">{text}</Text>}
           {hasReactNode(actions) && React.Children.count(actions) > 0 && (
             <div vkuiClass="Banner__actions">{actions}</div>
           )}