@vkontakte/vkui 4.24.0 → 4.26.0

package/src/components/ChipsSelect/Readme.md

@@ -8,7 +8,7 @@
 >
 > Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
 
-```jsx
+```jsx { "props": { "layout": false, "iframe": false } }
 const colors = [
   { value: "red", label: "Красный" },
   { value: "blue", label: "Синий" },
@@ -64,63 +64,50 @@ const Example = () => {
   };
 
   return (
-    <View activePanel="profile" id="profile">
-      <Panel id="profile">
-        <PanelHeader>Предпочтения</PanelHeader>
-        <Group>
-          <FormItem top="Выберите группы">
-            <ChipsSelect
-              {...groupsChipsProps}
-              showSelected={false}
-              closeAfterSelect={false}
-              onChangeStart={(e, option) => {
-                if (option.value === "download") {
-                  e.preventDefault();
-                  alert("download!");
+    <Group separator="hide">
+      <FormItem top="Выберите группы">
+        <ChipsSelect
+          {...groupsChipsProps}
+          showSelected={false}
+          closeAfterSelect={false}
+          onChangeStart={(e, option) => {
+            if (option.value === "download") {
+              e.preventDefault();
+              alert("download!");
+            }
+          }}
+          renderChip={({ value, label, option: { src, icon }, ...rest }) => (
+            <Chip
+              value={value}
+              before={<Avatar size={20} src={src} />}
+              {...rest}
+            >
+              {label}
+            </Chip>
+          )}
+          renderOption={({ option: { src, value, icon }, ...otherProps }) => {
+            return (
+              <CustomSelectOption
+                before={
+                  icon ? (
+                    <Avatar size={20}>{icon}</Avatar>
+                  ) : (
+                    <Avatar size={20} src={src} />
+                  )
                 }
-              }}
-              renderChip={({
-                value,
-                label,
-                option: { src, icon },
-                ...rest
-              }) => (
-                <Chip
-                  value={value}
-                  before={<Avatar size={20} src={src} />}
-                  {...rest}
-                >
-                  {label}
-                </Chip>
-              )}
-              renderOption={({
-                option: { src, value, icon },
-                ...otherProps
-              }) => {
-                return (
-                  <CustomSelectOption
-                    before={
-                      icon ? (
-                        <Avatar size={20}>{icon}</Avatar>
-                      ) : (
-                        <Avatar size={20} src={src} />
-                      )
-                    }
-                    {...otherProps}
-                  />
-                );
-              }}
-            />
-          </FormItem>
-          <FormItem top="Выберите или добавьте цвета">
-            <ChipsSelect {...colorsChipsProps} />
-          </FormItem>
-          <FormItem top="Выберите или добавьте цвета (creatable без кнопки создания)">
-            <ChipsSelect {...colorsCopyChipsProps} />
-          </FormItem>
-        </Group>
-      </Panel>
-    </View>
+                {...otherProps}
+              />
+            );
+          }}
+        />
+      </FormItem>
+      <FormItem top="Выберите или добавьте цвета">
+        <ChipsSelect {...colorsChipsProps} />
+      </FormItem>
+      <FormItem top="Выберите или добавьте цвета (creatable без кнопки создания)">
+        <ChipsSelect {...colorsCopyChipsProps} />
+      </FormItem>
+    </Group>
   );
 };
 

package/src/components/ChipsSelect/useChipsSelect.ts

@@ -6,17 +6,23 @@ import { ChipsSelectProps } from "./ChipsSelect";
 export const useChipsSelect = <Option extends ChipsInputOption>(
   props: Partial<ChipsSelectProps<Option>>
 ) => {
-  const { options, filterFn, getOptionLabel, getOptionValue, showSelected } =
-    props;
+  const { options, filterFn, getOptionLabel, getOptionValue } = props;
 
   const [opened, setOpened] = React.useState(false);
-  const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number>(0);
-  const [focusedOption, setFocusedOption] = React.useState<Option>(null);
+  const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<
+    number | null
+  >(0);
+  const [focusedOption, setFocusedOption] = React.useState<Option | null>(null);
 
   const { fieldValue, selectedOptions, ...chipsInputState } =
     useChipsInput(props);
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement> | undefined
+  ) => {
+    if (!e) {
+      return;
+    }
     chipsInputState.handleInputChange(e);
 
     if (!opened) {
@@ -27,10 +33,10 @@ export const useChipsSelect = <Option extends ChipsInputOption>(
 
   let filteredOptions = React.useMemo(() => {
     return filterFn
-      ? options.filter((option: Option) =>
+      ? options!.filter((option) =>
           filterFn(fieldValue, option, getOptionLabel)
         )
-      : options;
+      : (options as Option[]);
   }, [options, filterFn, fieldValue, getOptionLabel]);
 
   filteredOptions = React.useMemo(() => {
@@ -39,16 +45,16 @@ export const useChipsSelect = <Option extends ChipsInputOption>(
     }
 
     const filteredSet = new Set(filteredOptions);
-    const selected = selectedOptions.map((item) => getOptionValue(item));
+    const selected = selectedOptions.map((item) => getOptionValue!(item));
 
     for (const item of filteredSet) {
-      if (selected.includes(getOptionValue(item))) {
+      if (selected.includes(getOptionValue!(item))) {
         filteredSet.delete(item);
       }
     }
 
     return [...filteredSet];
-  }, [showSelected, filteredOptions, selectedOptions]);
+  }, [filteredOptions, selectedOptions, getOptionValue]);
 
   return {
     ...chipsInputState,

package/src/components/ClickPopper/ClickPopper.tsx

@@ -12,7 +12,7 @@ export interface ClickPopperProps extends PopperCommonProps {
    */
   content?: React.ReactNode;
   /**
-   * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства
+   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства
    */
   shown?: boolean;
   /**
@@ -34,13 +34,15 @@ export const ClickPopper: React.FC<ClickPopperProps> = ({
   ...restProps
 }: ClickPopperProps) => {
   const [computedShown, setComputedShown] = React.useState(_shown || false);
-  const [dropdownNode, setPopperNode] = React.useState(null);
+  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(
+    null
+  );
 
   const shown = typeof _shown === "boolean" ? _shown : computedShown;
 
   const { document } = useDOM();
 
-  const patchedPopperRef = useExternRef(setPopperNode, getRef);
+  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);
 
   const [childRef, child] = usePatchChildrenRef(children);
 
@@ -54,8 +56,8 @@ export const ClickPopper: React.FC<ClickPopperProps> = ({
   useGlobalEventListener(document, "click", (e: MouseEvent) => {
     if (
       dropdownNode &&
-      !childRef.current.contains(e.target as Node) &&
-      !dropdownNode.contains(e.target)
+      !childRef.current?.contains(e.target as Node) &&
+      !dropdownNode.contains(e.target as Node)
     ) {
       setShown(false);
     }
@@ -66,8 +68,10 @@ export const ClickPopper: React.FC<ClickPopperProps> = ({
   });
 
   React.useEffect(() => {
-    targetClickEvent.add(childRef.current);
-  }, []);
+    if (childRef.current !== null) {
+      targetClickEvent.add(childRef.current);
+    }
+  }, [childRef, targetClickEvent]);
 
   return (
     <React.Fragment>

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -2,20 +2,25 @@ import * as React from "react";
 import { AppearanceType } from "@vkontakte/vk-bridge";
 import { canUseDOM, useDOM } from "../../lib/dom";
 import {
-  AppearanceScheme,
   ConfigProviderContext,
   ConfigProviderContextInterface,
   defaultConfigProviderProps,
-  Scheme,
 } from "./ConfigProviderContext";
-import { PlatformType, VKCOM } from "../../lib/platform";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { useObjectMemo } from "../../hooks/useObjectMemo";
 import { noop } from "../../lib/utils";
 import { warnOnce } from "../../lib/warnOnce";
+import {
+  normalizeScheme,
+  AppearanceScheme,
+  Scheme,
+} from "../../helpers/scheme";
+import { AppearanceProvider } from "../AppearanceProvider/AppearanceProvider";
+import { Platform } from "../../lib/platform";
 
 export interface ConfigProviderProps extends ConfigProviderContextInterface {
   /**
+   * @deprecated будет удалено в 5.0.0, устанавливать тему следует через appearance
    * Цветовая схема приложения
    */
   scheme?: AppearanceScheme;
@@ -23,79 +28,72 @@ export interface ConfigProviderProps extends ConfigProviderContextInterface {
 
 const warn = warnOnce("ConfigProvider");
 
-function useSchemeDetector(node: HTMLElement, _scheme: Scheme | "inherit") {
+function useSchemeDetector(
+  node: HTMLElement | undefined | null,
+  _scheme: Scheme | "inherit"
+) {
   const inherit = _scheme === "inherit";
-  const getScheme = () => {
-    if (!inherit || !canUseDOM) {
+  const getScheme = React.useCallback(() => {
+    if (!inherit || !canUseDOM || !node) {
       return undefined;
     }
     return node.getAttribute("scheme") as Scheme;
-  };
+  }, [inherit, node]);
   const [resolvedScheme, setScheme] = React.useState(getScheme());
 
   React.useEffect(() => {
-    if (!inherit) {
+    if (!inherit || !node) {
       return noop;
     }
     setScheme(getScheme());
     const observer = new MutationObserver(() => setScheme(getScheme()));
     observer.observe(node, { attributes: true, attributeFilter: ["scheme"] });
     return () => observer.disconnect();
-  }, [inherit]);
+  }, [getScheme, inherit, node]);
 
   return _scheme === "inherit" ? resolvedScheme : _scheme;
 }
 
-const deriveAppearance = (scheme: Scheme): AppearanceType =>
+const deriveAppearance = (scheme: Scheme | undefined): AppearanceType =>
   scheme === Scheme.SPACE_GRAY || scheme === Scheme.VKCOM_DARK
     ? "dark"
     : "light";
 
-function normalizeScheme(
-  scheme: AppearanceScheme,
-  platform: PlatformType
-): Scheme | "inherit" {
-  if (scheme === "inherit") {
-    return scheme;
-  }
-  if (scheme === Scheme.VKCOM) {
-    process.env.NODE_ENV === "development" &&
-      warn(
-        `Схема "${Scheme.VKCOM}" устарела и будет удалена 5.0.0. Вместо неё используйте "${Scheme.VKCOM_LIGHT}"`
-      );
-    return Scheme.VKCOM_LIGHT;
-  }
-  if (
-    platform === VKCOM &&
-    (scheme === Scheme.BRIGHT_LIGHT || scheme === Scheme.SPACE_GRAY)
-  ) {
-    process.env.NODE_ENV === "development" &&
-      warn(
-        `Платформа "vkcom" и схема "${scheme}" несовместимы. С этой платформой можно использовать схемы "${Scheme.VKCOM_LIGHT}" или "${Scheme.VKCOM_DARK}"`
-      );
-    return Scheme.VKCOM_LIGHT;
-  }
-  switch (scheme) {
-    case Scheme.DEPRECATED_CLIENT_LIGHT:
-      return Scheme.BRIGHT_LIGHT;
-    case Scheme.DEPRECATED_CLIENT_DARK:
-      return Scheme.SPACE_GRAY;
+const generateVKUITokensClassName = (
+  platform: string,
+  appearance: string
+): string => {
+  let tokensPlatform;
+  switch (platform) {
+    case Platform.ANDROID:
+      tokensPlatform = "vkBase";
+      break;
+    case Platform.IOS:
+      tokensPlatform = "vkIOS";
+      break;
+    case Platform.VKCOM:
+      tokensPlatform = "vkCom";
+      break;
     default:
-      return scheme as Scheme;
+      tokensPlatform = platform;
   }
-}
+
+  return `vkui--${tokensPlatform}--${appearance}`;
+};
 
 const ConfigProvider: React.FC<ConfigProviderProps> = ({
   children,
-  schemeTarget,
-  ...config
-}: ConfigProviderProps & {
-  children?: React.ReactNode;
-  schemeTarget?: HTMLElement;
+  ...props
 }) => {
-  const scheme = normalizeScheme(config.scheme, config.platform);
+  const config = { ...defaultConfigProviderProps, ...props };
+  const { platform, appearance } = config;
+  const scheme = normalizeScheme({
+    scheme: config.scheme,
+    platform: platform,
+    appearance: appearance,
+  });
   const { document } = useDOM();
-  const target = schemeTarget || document?.body;
+  const target = document?.body;
 
   useIsomorphicLayoutEffect(() => {
     if (scheme === "inherit") {
@@ -103,31 +101,45 @@ const ConfigProvider: React.FC<ConfigProviderProps> = ({
     }
     if (
       process.env.NODE_ENV === "development" &&
-      target.hasAttribute("scheme")
+      target?.hasAttribute("scheme")
     ) {
       warn(
         '<body scheme> was set before VKUI mount - did you forget scheme="inherit"?'
       );
     }
-    target.setAttribute("scheme", scheme);
-    return () => target.removeAttribute("scheme");
+    target?.setAttribute("scheme", scheme);
+    return () => target?.removeAttribute("scheme");
   }, [scheme]);
 
   const realScheme = useSchemeDetector(target, scheme);
+  const derivedAppearance = deriveAppearance(realScheme);
+
+  useIsomorphicLayoutEffect(() => {
+    const VKUITokensClassName = generateVKUITokensClassName(
+      platform,
+      derivedAppearance
+    );
+
+    target?.classList.add(VKUITokensClassName);
+
+    return () => {
+      target?.classList.remove(VKUITokensClassName);
+    };
+  }, [platform, derivedAppearance]);
+
   const configContext = useObjectMemo({
-    appearance: deriveAppearance(realScheme),
+    appearance: derivedAppearance,
     ...config,
   });
 
   return (
     <ConfigProviderContext.Provider value={configContext}>
-      {children}
+      <AppearanceProvider appearance={configContext.appearance}>
+        {children}
+      </AppearanceProvider>
     </ConfigProviderContext.Provider>
   );
 };
 
-// Деструктуризация нужна из бага в react-docgen-typescript
-// https://github.com/styleguidist/react-docgen-typescript/issues/195
-ConfigProvider.defaultProps = { ...defaultConfigProviderProps };
-
+// eslint-disable-next-line import/no-default-export
 export default ConfigProvider;

package/src/components/ConfigProvider/ConfigProviderContext.tsx

@@ -1,45 +1,7 @@
 import * as React from "react";
-import vkBridge, {
-  AppearanceSchemeType,
-  AppearanceType,
-} from "@vkontakte/vk-bridge";
+import vkBridge, { AppearanceType } from "@vkontakte/vk-bridge";
 import { PlatformType, platform } from "../../lib/platform";
 
-export enum Appearance {
-  DARK = "dark",
-  LIGHT = "light",
-}
-
-export enum Scheme {
-  /**
-   * @deprecated будет удалено в 5.0.0
-   * версия оставлена для совместимости со старыми версиями клиентов
-   */
-  DEPRECATED_CLIENT_LIGHT = "client_light",
-  /**
-   * @deprecated будет удалено в 5.0.0
-   * версия оставлена для совместимости со старыми версиями клиентов
-   */
-  DEPRECATED_CLIENT_DARK = "client_dark",
-  /**
-   * @deprecated будет удалено в 5.0.0
-   * версия оставлена для совместимости с vkcom, когда там была только одна схема
-   */
-  VKCOM = "vkcom",
-
-  BRIGHT_LIGHT = "bright_light",
-  SPACE_GRAY = "space_gray",
-  VKCOM_LIGHT = "vkcom_light",
-  VKCOM_DARK = "vkcom_dark",
-}
-
-export type AppearanceScheme =
-  | AppearanceSchemeType
-  | Scheme.VKCOM
-  | Scheme.VKCOM_DARK
-  | Scheme.VKCOM_LIGHT
-  | "inherit";
-
 export enum WebviewType {
   VKAPPS = "vkapps",
   INTERNAL = "internal",
@@ -77,7 +39,6 @@ export interface ConfigProviderContextInterface {
 export const defaultConfigProviderProps = {
   webviewType: WebviewType.VKAPPS,
   isWebView: vkBridge.isWebView(),
-  scheme: Scheme.BRIGHT_LIGHT,
   transitionMotionEnabled: true,
   platform: platform(),
   hasNewTokens: false,

package/src/components/ContentCard/ContentCard.tsx

@@ -7,6 +7,7 @@ import Tappable, { TappableProps } from "../Tappable/Tappable";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
+import { warnOnce } from "../../lib/warnOnce";
 import { HasRef, HasRootRef } from "../../types";
 import { classNames } from "../../lib/classNames";
 import "./ContentCard.css";
@@ -46,6 +47,7 @@ export interface ContentCardProps
   mode?: CardProps["mode"];
 }
 
+const warn = warnOnce("ContentCard");
 const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
   const {
     subtitle,
@@ -78,6 +80,10 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
 
   const source = image || src;
 
+  if (image && process.env.NODE_ENV === "development") {
+    warn("Свойство image устарело и будет удалено в 5.0.0. Используйте src");
+  }
+
   return (
     <Card
       mode={mode}
@@ -149,4 +155,5 @@ ContentCard.defaultProps = {
   mode: "shadow",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default ContentCard;

package/src/components/Counter/Counter.tsx

@@ -72,4 +72,5 @@ Counter.defaultProps = {
   size: "m",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default React.memo(Counter);

package/src/components/CustomScrollView/CustomScrollView.tsx

@@ -32,7 +32,7 @@ class CustomScrollView extends React.Component<Props> {
     this.resize();
 
     if (this.props.windowResize) {
-      this.props.window.addEventListener("resize", this.resize);
+      this.props.window!.addEventListener("resize", this.resize);
     }
   }
 
@@ -41,23 +41,26 @@ class CustomScrollView extends React.Component<Props> {
   }
 
   componentWillUnmount() {
-    this.props.window.removeEventListener("resize", this.resize);
+    this.props.window!.removeEventListener("resize", this.resize);
   }
 
   chooseTransformProp() {
-    let style = this.trackerY.current.style;
+    let style = this.trackerY.current?.style;
     let prop = "";
-
-    if ("transform" in style) {
-      prop = "transform";
-    } else if ("webkitTransform" in style) {
-      prop = "webkitTransform";
+    if (style !== undefined) {
+      if ("transform" in style) {
+        prop = "transform";
+      } else if ("webkitTransform" in style) {
+        prop = "webkitTransform";
+      }
     }
-
     this.transformProp = prop;
   }
 
   resize = () => {
+    if (!this.box.current || !this.barY.current || !this.trackerY.current) {
+      return;
+    }
     const clientHeight = this.box.current.clientHeight;
     const scrollHeight = this.box.current.scrollHeight;
     let ratio = clientHeight / scrollHeight;
@@ -73,13 +76,12 @@ class CustomScrollView extends React.Component<Props> {
     } else {
       this.barY.current.style.display = "";
       this.trackerY.current.style.height = `${trackerHeight}px`;
-
       this.setTrackerPositionFromScroll(this.box.current.scrollTop);
     }
   };
 
   scroll = () => {
-    if (this.ratio >= 1) {
+    if (this.ratio >= 1 || !this.box.current) {
       return;
     }
 
@@ -88,9 +90,11 @@ class CustomScrollView extends React.Component<Props> {
 
   setTrackerPosition(scrollTop: number) {
     this.lastTrackerTop = scrollTop;
-    (this.trackerY.current.style as any)[
-      this.transformProp
-    ] = `translate(0, ${scrollTop}px)`;
+    if (this.trackerY.current !== null) {
+      (this.trackerY.current.style as any)[
+        this.transformProp
+      ] = `translate(0, ${scrollTop}px)`;
+    }
   }
 
   setTrackerPositionFromScroll(scrollTop: number) {
@@ -102,8 +106,10 @@ class CustomScrollView extends React.Component<Props> {
 
   setScrollPositionFromTracker(trackerTop: number) {
     const progress = trackerTop / (this.clientHeight - this.trackerHeight);
-    this.box.current.scrollTop =
-      (this.scrollHeight - this.clientHeight) * progress;
+    if (this.box.current !== null) {
+      this.box.current.scrollTop =
+        (this.scrollHeight - this.clientHeight) * progress;
+    }
   }
 
   onDragStart = (e: React.MouseEvent) => {
@@ -111,8 +117,8 @@ class CustomScrollView extends React.Component<Props> {
     this.startY = e.clientY;
     this.trackerTop = this.lastTrackerTop;
 
-    this.props.document.addEventListener("mousemove", this.onMove);
-    this.props.document.addEventListener("mouseup", this.onUp);
+    this.props.document!.addEventListener("mousemove", this.onMove);
+    this.props.document!.addEventListener("mouseup", this.onUp);
   };
 
   onMove = (e: MouseEvent) => {
@@ -128,8 +134,8 @@ class CustomScrollView extends React.Component<Props> {
 
   onUp = (e: MouseEvent) => {
     e.preventDefault();
-    this.props.document.removeEventListener("mousemove", this.onMove);
-    this.props.document.removeEventListener("mouseup", this.onUp);
+    this.props.document!.removeEventListener("mousemove", this.onMove);
+    this.props.document!.removeEventListener("mouseup", this.onUp);
   };
 
   render() {
@@ -158,4 +164,5 @@ class CustomScrollView extends React.Component<Props> {
   }
 }
 
+// eslint-disable-next-line import/no-default-export
 export default withDOM(CustomScrollView);