@vkontakte/vkui 4.24.0 → 4.26.0

package/src/components/AppRoot/AppRoot.tsx

@@ -20,6 +20,7 @@ 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";
 
@@ -40,7 +41,7 @@ export interface AppRootProps
 }
 
 const warn = warnOnce("AppRoot");
-export const AppRoot: React.FC<AppRootProps> = withAdaptivity(
+export const AppRoot = withAdaptivity<AppRootProps>(
   ({
     children,
     mode: _mode,
@@ -50,18 +51,21 @@ export const AppRoot: React.FC<AppRootProps> = withAdaptivity(
     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 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 (window && mode === "full") {
+      if (document && mode === "full") {
         document.documentElement.classList.add("vkui");
       }
       classScopingMode.noConflict = noLegacyClasses;
@@ -79,12 +83,12 @@ export const AppRoot: React.FC<AppRootProps> = withAdaptivity(
 
     // setup portal
     useIsomorphicLayoutEffect(() => {
-      const portal = document.createElement("div");
+      const portal = document!.createElement("div");
       portal.classList.add("vkui__portal-root");
-      document.body.appendChild(portal);
+      document!.body.appendChild(portal);
       setPortalRoot(portal);
       return () => {
-        portal.parentElement.removeChild(portal);
+        portal.parentElement?.removeChild(portal);
       };
     }, []);
 
@@ -94,23 +98,23 @@ export const AppRoot: React.FC<AppRootProps> = withAdaptivity(
         return noop;
       }
 
-      const parent = rootRef.current.parentElement;
+      const parent = rootRef.current?.parentElement;
       const classes = ["vkui__root"].concat(
         mode === "embedded" ? "vkui__root--embedded" : []
       );
-      parent.classList.add(...classes);
+      parent?.classList.add(...classes);
 
       return () => {
-        parent.classList.remove(...classes);
+        parent?.classList.remove(...classes);
         if (mode === "full") {
-          document.documentElement.classList.remove("vkui");
+          document?.documentElement.classList.remove("vkui");
         }
       };
     }, []);
 
     // setup insets
     useIsomorphicLayoutEffect(() => {
-      if (mode === "partial") {
+      if (mode === "partial" || !rootRef.current?.parentElement) {
         return noop;
       }
 
@@ -148,9 +152,9 @@ export const AppRoot: React.FC<AppRootProps> = withAdaptivity(
         return noop;
       }
       const container =
-        mode === "embedded" ? rootRef.current.parentElement : document.body;
-      container.classList.add("vkui--sizeX-regular");
-      return () => container.classList.remove("vkui--sizeX-regular");
+        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>(
@@ -158,9 +162,13 @@ export const AppRoot: React.FC<AppRootProps> = withAdaptivity(
         scroll === "contain"
           ? elementScrollController(rootRef)
           : globalScrollController(window, document),
-      [scroll]
+      [document, scroll, window]
     );
 
+    useIsomorphicLayoutEffect(() => {
+      portalRoot?.setAttribute("scheme", appearanceContext?.scheme ?? "");
+    }, [portalRoot, appearanceContext?.scheme]);
+
     const content = (
       <AppRootContext.Provider
         value={{
@@ -201,5 +209,3 @@ export const AppRoot: React.FC<AppRootProps> = withAdaptivity(
     hasMouse: true,
   }
 );
-
-export default AppRoot;

package/src/components/AppRoot/AppRootContext.ts

@@ -2,7 +2,7 @@ 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/ScrollContext.ts

@@ -13,15 +13,15 @@ export const ScrollContext = React.createContext<ScrollContextInterface>({
 });
 
 export const globalScrollController = (
-  window: Window,
-  document: HTMLDocument
+  window: Window | undefined,
+  document: HTMLDocument | undefined
 ) => ({
-  getScroll: () => ({ x: window.pageXOffset, y: window.pageYOffset }),
+  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
     );
   },
 });
@@ -30,13 +30,13 @@ export const elementScrollController = (
   elRef: React.RefObject<HTMLElement>
 ) => ({
   getScroll: () => ({
-    x: elRef.current.scrollLeft,
-    y: elRef.current.scrollTop,
+    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
     );

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 { classNamesString } 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: classNamesString(
+              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.tsx

@@ -27,6 +27,9 @@ export interface AvatarProps
   overlayAction?: "hover" | "always";
 }
 
+export const AVATAR_DEFAULT_SIZE = 48;
+export const AVATAR_DEFAULT_SHADOW = true;
+
 const Avatar: React.FC<AvatarProps> = ({
   alt,
   crossOrigin,
@@ -40,9 +43,9 @@ const Avatar: React.FC<AvatarProps> = ({
   useMap,
   width,
   getRef,
-  size,
-  shadow,
-  mode,
+  size = AVATAR_DEFAULT_SIZE,
+  shadow = AVATAR_DEFAULT_SHADOW,
+  mode = "default",
   className,
   children,
   getRootRef,
@@ -50,7 +53,7 @@ const Avatar: React.FC<AvatarProps> = ({
   "aria-label": ariaLabel,
   badge,
   overlayIcon,
-  overlayMode,
+  overlayMode = "light",
   overlayAction: passedOverlayAction,
   onClick,
   ...restProps
@@ -176,14 +179,5 @@ const Avatar: React.FC<AvatarProps> = ({
   );
 };
 
-export const AVATAR_DEFAULT_SIZE = 48;
-export const AVATAR_DEFAULT_SHADOW = true;
-
-Avatar.defaultProps = {
-  size: AVATAR_DEFAULT_SIZE,
-  mode: "default",
-  shadow: AVATAR_DEFAULT_SHADOW,
-  overlayMode: "light",
-};
-
+// eslint-disable-next-line import/no-default-export
 export default Avatar;

package/src/components/Banner/Banner.tsx

@@ -140,7 +140,7 @@ const Banner: React.FC<BannerProps> = (props: BannerProps) => {
         vkuiClass="Banner__in"
         activeMode={platform === IOS ? "opacity" : "background"}
         disabled={asideMode !== "expand"}
-        role={asideMode === "expand" ? "button" : null}
+        role={asideMode === "expand" ? "button" : undefined}
       >
         {mode === "image" && background && (
           <div aria-hidden="true" vkuiClass="Banner__bg">
@@ -216,4 +216,5 @@ Banner.defaultProps = {
   imageTheme: "dark",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Banner;

package/src/components/Button/Button.css

@@ -4,11 +4,11 @@
   box-sizing: border-box;
   text-decoration: none;
   border: none;
-  min-height: var(--vkui--size_button_small_height--regular, 28px);
+  min-height: var(--vkui--size_button_small_height--compact);
   margin: 0;
   padding: 0;
   user-select: none;
-  border-radius: var(--vkui--size_border_radius--regular, 8px);
+  border-radius: var(--vkui--size_border_radius--regular);
   max-width: 100%;
 }
 
@@ -41,7 +41,7 @@
 }
 
 .Button[disabled] {
-  opacity: var(--vkui--opacity_disable, 0.4);
+  opacity: var(--vkui--opacity_disable);
 }
 
 .Button--lvl-primary[disabled]:not(.Button--clr-overlay):not(.Button--clr-negative):not(.Button--clr-positive),
@@ -163,15 +163,7 @@
 /* Mode = Secondary */
 .Button--lvl-secondary {
   background-color: var(
-    --content_tint_background,
-    var(--vkui--color_background_secondary)
-  );
-}
-
-/* Only for VKCOM */
-.Button--vkcom.Button--lvl-secondary {
-  background-color: var(
-    --control_background,
+    --button_secondary_background,
     var(--vkui--color_background_secondary)
   );
 }
@@ -490,52 +482,30 @@
   transform: translateY(-1px);
 }
 
-/**
- * iOS
- */
-.Button--ios {
-  min-height: 26px;
-  border-radius: 10px;
-}
-
-/**
- * VKCOM
- */
-.Button--vkcom {
-  min-height: 26px;
-  border-radius: 4px;
-}
-
-.Button--vkcom.Button--lvl-secondary .Icon,
-.Button--vkcom.Button--lvl-tertiary .Icon,
-.Button--vkcom.Button--lvl-outline .Icon {
-  opacity: 0.72;
-}
-
 /**
  * sizeY COMPACT
  */
 .Button--sz-m {
-  min-height: var(--vkui--size_button_medium_height--compact, 32px);
+  min-height: var(--vkui--size_button_medium_height--compact);
 }
 
 .Button--sz-l {
-  min-height: var(--vkui--size_button_large_height--compact, 36px);
+  min-height: var(--vkui--size_button_large_height--compact);
 }
 
 /**
  * sizeY REGULAR
  */
 .Button--sizeY-regular {
-  min-height: var(--vkui--size_button_small_height--regular, 30px);
+  min-height: var(--vkui--size_button_small_height--regular);
 }
 
 .Button--sizeY-regular.Button--sz-m {
-  min-height: var(--vkui--size_button_medium_height--regular, 36px);
+  min-height: var(--vkui--size_button_medium_height--regular);
 }
 
 .Button--sizeY-regular.Button--sz-l {
-  min-height: var(--vkui--size_button_large_height--regular, 44px);
+  min-height: var(--vkui--size_button_large_height--regular);
 }
 
 /**

package/src/components/Button/Button.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { ConfigProviderContext } from "../ConfigProvider/ConfigProviderContext";
 import Tappable, { TappableProps } from "../Tappable/Tappable";
@@ -14,7 +13,7 @@ import {
   SizeType,
   withAdaptivity,
 } from "../../hoc/withAdaptivity";
-import { Platform, IOS, VKCOM } from "../../lib/platform";
+import { IOS, VKCOM, PlatformType } from "../../lib/platform";
 import Spinner from "../Spinner/Spinner";
 import "./Button.css";
 
@@ -46,7 +45,7 @@ export interface ButtonProps
 
 interface ButtonTypographyProps extends HasComponent {
   size: ButtonProps["size"];
-  platform: Platform;
+  platform: PlatformType | undefined;
   sizeY: AdaptivityProps["sizeY"];
   children?: ButtonProps["children"];
 }
@@ -171,10 +170,10 @@ const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
     <Tappable
       {...restProps}
       Component={restProps.href ? "a" : Component}
-      onClick={loading ? null : onClick}
+      onClick={loading ? undefined : onClick}
       focusVisibleMode="outside"
       vkuiClass={classNames(
-        getClassName("Button", platform),
+        "Button",
         `Button--sz-${size}`,
         `Button--lvl-${resolvedMode}`,
         `Button--clr-${resolvedAppearance}`,
@@ -220,6 +219,7 @@ Button.defaultProps = {
   stopPropagation: true,
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(Button, {
   sizeY: true,
 });

package/src/components/Card/Card.css

@@ -1,6 +1,10 @@
 .Card {
   position: relative;
-  background: var(--content_tint_background);
+  background: var(
+    --content_tint_background,
+    var(--vkui--color_background_secondary)
+  );
+  border-radius: var(--vkui--size_card_border_radius--regular);
 }
 
 .Card__in {
@@ -10,12 +14,16 @@
 }
 
 .Card--md-shadow {
-  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.08), 0 0 2px 0 rgba(0, 0, 0, 0.08);
-  background: var(--modal_card_background);
+  box-shadow: var(
+    --vkui--elevation3,
+    0 2px 24px 0 rgba(0, 0, 0, 0.08),
+    0 0 2px 0 rgba(0, 0, 0, 0.08)
+  );
+  background: var(--modal_card_background, var(--vkui--color_background_modal));
 }
 
 .Card--md-outline {
-  background: var(--modal_card_background);
+  background: var(--modal_card_background, var(--vkui--color_background_modal));
 }
 
 .Card--md-outline::before {
@@ -26,25 +34,9 @@
   height: 100%;
   content: "";
   display: block;
-  border: var(--thin-border) solid var(--input_border);
+  border: var(--thin-border) solid
+    var(--input_border, var(--vkui--color_image_border_alpha));
   z-index: 1;
   box-sizing: border-box;
   border-radius: inherit;
 }
-
-/**
-  * iOS
- */
-
-.Card--ios {
-  border-radius: 10px;
-}
-
-/**
- * Android, VKCOM
- */
-
-.Card--android,
-.Card--vkcom {
-  border-radius: 8px;
-}

package/src/components/Card/Card.tsx

@@ -34,4 +34,5 @@ Card.defaultProps = {
   mode: "tint",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Card;

package/src/components/CardGrid/CardGrid.tsx

@@ -37,4 +37,5 @@ CardGrid.defaultProps = {
   size: "s",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(CardGrid, { sizeX: true });

package/src/components/CardScroll/CardScroll.css

@@ -4,7 +4,7 @@
 }
 
 .CardScroll .Card {
-  margin-right: 8px;
+  margin-right: var(--vkui--size_cardgrid_padding--regular);
   flex-shrink: 0;
 }
 
@@ -33,33 +33,20 @@
   width: 100%;
 }
 
-/**
- * iOS
- */
-
-.CardScroll--ios .CardScroll__gap {
-  width: 12px;
-}
-
-/**
- * Android & VKCOM
- */
-
-.CardScroll--android .CardScroll__gap,
-.CardScroll--vkcom .CardScroll__gap {
-  width: 16px;
+.CardScroll--withSpaces .CardScroll__gap {
+  width: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 /**
  * SplitCol
  */
 
-.SplitCol--spaced .CardScroll {
+.SplitCol--spaced .CardScroll--withSpaces .CardScroll {
   margin-left: -16px;
   margin-right: -16px;
 }
 
-.SplitCol--spaced .CardScroll__gap {
+.SplitCol--spaced .CardScroll--withSpaces .CardScroll__gap {
   width: 16px;
 }
 
@@ -75,7 +62,7 @@
  * Group
  */
 
-.Group--card .CardScroll {
+.Group--card .CardScroll--withSpaces {
   margin-left: -8px;
   margin-right: -8px;
 }
@@ -88,10 +75,10 @@
   margin-right: 16px;
 }
 
-.Group--card .CardScroll:first-child {
-  padding-top: 8px;
+.Group--card .CardScroll--withSpaces:first-child {
+  padding-top: var(--vkui--size_cardgrid_padding_vertical--regular);
 }
 
-.Group--card .CardScroll:last-child {
-  padding-bottom: 8px;
+.Group--card .CardScroll--withSpaces:last-child {
+  padding-bottom: var(--vkui--size_cardgrid_padding_vertical--regular);
 }

package/src/components/CardScroll/CardScroll.tsx

@@ -2,7 +2,9 @@ import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
-import HorizontalScroll from "../HorizontalScroll/HorizontalScroll";
+import HorizontalScroll, {
+  HorizontalScrollProps,
+} from "../HorizontalScroll/HorizontalScroll";
 import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
 import { useDOM } from "../../lib/dom";
 import "./CardScroll.css";
@@ -10,13 +12,21 @@ import "./CardScroll.css";
 export interface CardScrollProps
   extends React.HTMLAttributes<HTMLDivElement>,
     AdaptivityProps {
-  size?: "s" | "m" | "l";
+  /**
+   * При size = "s", "m", "l" у Card будет явно задана ширина в %
+   * При size = false ширина Card будет регулироваться контентом внутри
+   */
+  size?: "s" | "m" | "l" | false;
+  showArrows?: HorizontalScrollProps["showArrows"];
+  withSpaces: boolean;
 }
 
 const CardScroll: React.FC<CardScrollProps> = ({
   children,
   size,
+  showArrows = true,
   sizeX,
+  withSpaces = true,
   ...restProps
 }: CardScrollProps) => {
   const platform = usePlatform();
@@ -27,12 +37,17 @@ const CardScroll: React.FC<CardScrollProps> = ({
   const { window } = useDOM();
 
   function getScrollToLeft(offset: number): number {
+    if (!refContainer.current || !gapRef.current) {
+      return offset;
+    }
     const containerWidth = refContainer.current.offsetWidth;
-    const slideIndex = Array.from(refContainer.current.children).findIndex(
+    const slideIndex = (
+      Array.from(refContainer.current.children) as HTMLElement[]
+    ).findIndex(
       (el: HTMLElement) =>
         el.offsetLeft +
           el.offsetWidth +
-          parseInt(window.getComputedStyle(el).marginRight) -
+          parseInt(window!.getComputedStyle(el).marginRight) -
           offset >=
         0
     );
@@ -60,6 +75,10 @@ const CardScroll: React.FC<CardScrollProps> = ({
   }
 
   function getScrollToRight(offset: number): number {
+    if (!refContainer.current || !gapRef.current) {
+      return offset;
+    }
+
     const containerWidth = refContainer.current.offsetWidth;
     const slide = Array.prototype.find.call(
       refContainer.current.children,
@@ -79,14 +98,15 @@ const CardScroll: React.FC<CardScrollProps> = ({
       {...restProps}
       vkuiClass={classNames(
         getClassName("CardScroll", platform),
+        `CardScroll--sizeX-${sizeX}`,
         `CardScroll--${size}`,
-        `CardScroll--sizeX-${sizeX}`
+        { ["CardScroll--withSpaces"]: withSpaces }
       )}
     >
       <HorizontalScroll
         getScrollToLeft={getScrollToLeft}
         getScrollToRight={getScrollToRight}
-        showArrows={true}
+        showArrows={showArrows}
       >
         <div vkuiClass="CardScroll__in" ref={refContainer}>
           <span vkuiClass="CardScroll__gap" ref={gapRef} />
@@ -102,4 +122,5 @@ CardScroll.defaultProps = {
   size: "s",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(CardScroll, { sizeX: true });

package/src/components/Cell/Cell.tsx

@@ -115,7 +115,7 @@ export const Cell: React.FC<CellProps> = ({
       return () => toggleDrag(false);
     }
     return undefined;
-  }, [dragging]);
+  }, [dragging, toggleDrag]);
 
   let dragger;
   if (draggable) {