@vkontakte/vkui 4.22.2 → 4.25.1

package/src/components/ChipsSelect/Readme.md

@@ -4,93 +4,112 @@
 
 Поле ввода принимает все валидные для `<input>` значения.
 
->**Важно**
+> **Важно**
 >
->Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильный компоненты](#/Unstable).
+> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
 
-```jsx
-const colors = [{value: 'red', label: 'Красный'}, {value: 'blue', label: 'Синий'}, {value: 'navarin', label: 'Наваринского пламени с дымом',}];
-const groups = [{ value: 'download', label: 'Скачать все и вся!', icon: <Icon12Download /> }, { value: '1', label: 'Arctic Monkeys', src: getAvatarUrl('audio_arctic_monkeys')}, {value: '2', label: 'Звери', src: getAvatarUrl('audio_leto_zveri')}, {value: '4', label: 'FACE', src: getAvatarUrl('audio_face')}, {value: '3', label: 'Depeche Mode', src: getAvatarUrl('audio_depeche_mode')}, {value: '5', label: 'Linkin Park', src: getAvatarUrl('audio_linkin_park')}]
+```jsx { "props": { "layout": false, "iframe": false } }
+const colors = [
+  { value: "red", label: "Красный" },
+  { value: "blue", label: "Синий" },
+  { value: "navarin", label: "Наваринского пламени с дымом" },
+];
+const groups = [
+  { value: "download", label: "Скачать все и вся!", icon: <Icon12Download /> },
+  {
+    value: "1",
+    label: "Arctic Monkeys",
+    src: getAvatarUrl("audio_arctic_monkeys"),
+  },
+  { value: "2", label: "Звери", src: getAvatarUrl("audio_leto_zveri") },
+  { value: "4", label: "FACE", src: getAvatarUrl("audio_face") },
+  {
+    value: "3",
+    label: "Depeche Mode",
+    src: getAvatarUrl("audio_depeche_mode"),
+  },
+  { value: "5", label: "Linkin Park", src: getAvatarUrl("audio_linkin_park") },
+];
 
 const Example = () => {
   const [selectedGroups, setSelectedGroups] = React.useState([]);
-  const [selectedColors, setSelectedColors] = React.useState(colors.slice(0, 2));
+  const [selectedColors, setSelectedColors] = React.useState(
+    colors.slice(0, 2)
+  );
   const [selectedColorsCopy, setSelectedColorsCopy] = React.useState([]);
-  
+
   const groupsChipsProps = {
     value: selectedGroups,
     onChange: setSelectedGroups,
     options: groups,
-    placeholder:"Не выбраны",
-    emptyText: 'Совсем ничего не найдено',
+    placeholder: "Не выбраны",
+    emptyText: "Совсем ничего не найдено",
   };
 
   const colorsChipsProps = {
     value: selectedColors,
     onChange: setSelectedColors,
     options: colors,
-    placeholder:"Не выбраны",
+    placeholder: "Не выбраны",
     creatable: true,
   };
 
   const colorsCopyChipsProps = {
-      value: selectedColorsCopy,
-      onChange: setSelectedColorsCopy,
-      options: colors,
-      placeholder:"Не выбраны",
-      creatable: true,
-      creatableText: '',
+    value: selectedColorsCopy,
+    onChange: setSelectedColorsCopy,
+    options: colors,
+    placeholder: "Не выбраны",
+    creatable: true,
+    creatableText: "",
   };
 
   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!');
-                }   
-              }}
-              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>
+    <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} />
+                  )
+                }
+                {...otherProps}
+              />
+            );
+          }}
+        />
+      </FormItem>
+      <FormItem top="Выберите или добавьте цвета">
+        <ChipsSelect {...colorsChipsProps} />
+      </FormItem>
+      <FormItem top="Выберите или добавьте цвета (creatable без кнопки создания)">
+        <ChipsSelect {...colorsCopyChipsProps} />
+      </FormItem>
+    </Group>
   );
-}
+};
 
-<Example />
+<Example />;
 ```
-

package/src/components/ChipsSelect/useChipsSelect.ts

@@ -1,18 +1,28 @@
-import * as React from 'react';
-import { ChipsInputOption } from '../ChipsInput/ChipsInput';
-import { useChipsInput } from '../ChipsInput/useChipsInput';
-import { ChipsSelectProps } from './ChipsSelect';
+import * as React from "react";
+import { ChipsInputOption } from "../ChipsInput/ChipsInput";
+import { useChipsInput } from "../ChipsInput/useChipsInput";
+import { ChipsSelectProps } from "./ChipsSelect";
 
-export const useChipsSelect = <Option extends ChipsInputOption>(props: Partial<ChipsSelectProps<Option>>) => {
-  const { options, filterFn, getOptionLabel, getOptionValue, showSelected } = props;
+export const useChipsSelect = <Option extends ChipsInputOption>(
+  props: Partial<ChipsSelectProps<Option>>
+) => {
+  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 { 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) {
@@ -22,7 +32,11 @@ export const useChipsSelect = <Option extends ChipsInputOption>(props: Partial<C
   };
 
   let filteredOptions = React.useMemo(() => {
-    return filterFn ? options.filter((option: Option) => filterFn(fieldValue, option, getOptionLabel)) : options;
+    return filterFn
+      ? options!.filter((option) =>
+          filterFn(fieldValue, option, getOptionLabel)
+        )
+      : (options as Option[]);
   }, [options, filterFn, fieldValue, getOptionLabel]);
 
   filteredOptions = React.useMemo(() => {
@@ -31,19 +45,28 @@ export const useChipsSelect = <Option extends ChipsInputOption>(props: Partial<C
     }
 
     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, fieldValue, handleInputChange, opened, setOpened, filteredOptions,
-    focusedOptionIndex, setFocusedOptionIndex, focusedOption, setFocusedOption, selectedOptions,
+    ...chipsInputState,
+    fieldValue,
+    handleInputChange,
+    opened,
+    setOpened,
+    filteredOptions,
+    focusedOptionIndex,
+    setFocusedOptionIndex,
+    focusedOption,
+    setFocusedOption,
+    selectedOptions,
   };
 };

package/src/components/ClickPopper/ClickPopper.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { useDOM } from "../../lib/dom";
+import { Popper, PopperCommonProps } from "../Popper/Popper";
+import { useExternRef } from "../../hooks/useExternRef";
+import { useEventListener } from "../../hooks/useEventListener";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import { usePatchChildrenRef } from "../../hooks/usePatchChildrenRef";
+
+export interface ClickPopperProps extends PopperCommonProps {
+  /**
+   * Содержимое `ClickPopper`
+   */
+  content?: React.ReactNode;
+  /**
+   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства
+   */
+  shown?: boolean;
+  /**
+   * Вызывается при каждом изменении видимости тултипа
+   */
+  onShownChange?: (shown: boolean) => void;
+  /**
+   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элемнету компонента
+   */
+  children?: React.ReactElement;
+}
+
+export const ClickPopper: React.FC<ClickPopperProps> = ({
+  getRef,
+  content,
+  children,
+  onShownChange,
+  shown: _shown,
+  ...restProps
+}: ClickPopperProps) => {
+  const [computedShown, setComputedShown] = React.useState(_shown || false);
+  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(
+    null
+  );
+
+  const shown = typeof _shown === "boolean" ? _shown : computedShown;
+
+  const { document } = useDOM();
+
+  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);
+
+  const [childRef, child] = usePatchChildrenRef(children);
+
+  const setShown = (value: boolean) => {
+    if (typeof _shown !== "boolean") {
+      setComputedShown(value);
+    }
+    typeof onShownChange === "function" && onShownChange(value);
+  };
+
+  useGlobalEventListener(document, "click", (e: MouseEvent) => {
+    if (
+      dropdownNode &&
+      !childRef.current?.contains(e.target as Node) &&
+      !dropdownNode.contains(e.target as Node)
+    ) {
+      setShown(false);
+    }
+  });
+
+  const targetClickEvent = useEventListener("click", () => {
+    setShown(!shown);
+  });
+
+  React.useEffect(() => {
+    if (childRef.current !== null) {
+      targetClickEvent.add(childRef.current);
+    }
+  }, [childRef, targetClickEvent]);
+
+  return (
+    <React.Fragment>
+      {child}
+      {shown && (
+        <Popper {...restProps} targetRef={childRef} getRef={patchedPopperRef}>
+          {content}
+        </Popper>
+      )}
+    </React.Fragment>
+  );
+};

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -1,108 +1,109 @@
-import * as React from 'react';
-import { AppearanceType } from '@vkontakte/vk-bridge';
-import { canUseDOM, useDOM } from '../../lib/dom';
+import * as React from "react";
+import { AppearanceType } from "@vkontakte/vk-bridge";
+import { canUseDOM, useDOM } from "../../lib/dom";
 import {
-  AppearanceScheme,
   ConfigProviderContext,
   ConfigProviderContextInterface,
   defaultConfigProviderProps,
+} from "./ConfigProviderContext";
+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 './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';
+} from "../../helpers/scheme";
+import { AppearanceProvider } from "../AppearanceProvider/AppearanceProvider";
 
 export interface ConfigProviderProps extends ConfigProviderContextInterface {
   /**
+   * @deprecated будет удалено в 5.0.0, устанавливать тему следует через appearance
    * Цветовая схема приложения
    */
   scheme?: AppearanceScheme;
 }
 
-const warn = warnOnce('ConfigProvider');
+const warn = warnOnce("ConfigProvider");
 
-function useSchemeDetector(node: HTMLElement, _scheme: Scheme | 'inherit') {
-  const inherit = _scheme === 'inherit';
-  const getScheme = () => {
-    if (!inherit || !canUseDOM) {
+function useSchemeDetector(
+  node: HTMLElement | undefined | null,
+  _scheme: Scheme | "inherit"
+) {
+  const inherit = _scheme === "inherit";
+  const getScheme = React.useCallback(() => {
+    if (!inherit || !canUseDOM || !node) {
       return undefined;
     }
-    return node.getAttribute('scheme') as Scheme;
-  };
+    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'] });
+    observer.observe(node, { attributes: true, attributeFilter: ["scheme"] });
     return () => observer.disconnect();
-  }, [inherit]);
+  }, [getScheme, inherit, node]);
 
-  return _scheme === 'inherit' ? resolvedScheme : _scheme;
+  return _scheme === "inherit" ? resolvedScheme : _scheme;
 }
 
-const deriveAppearance = (scheme: Scheme): 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;
-    default:
-      return scheme as Scheme;
-  }
-}
+const deriveAppearance = (scheme: Scheme | undefined): AppearanceType =>
+  scheme === Scheme.SPACE_GRAY || scheme === Scheme.VKCOM_DARK
+    ? "dark"
+    : "light";
 
 const ConfigProvider: React.FC<ConfigProviderProps> = ({
   children,
   schemeTarget,
-  ...config
-}: ConfigProviderProps & { children?: React.ReactNode; schemeTarget?: HTMLElement }) => {
-  const scheme = normalizeScheme(config.scheme, config.platform);
+  ...props
+}: React.PropsWithChildren<ConfigProviderProps> & {
+  schemeTarget?: HTMLElement;
+}) => {
+  const config = { ...defaultConfigProviderProps, ...props };
+  const scheme = normalizeScheme({
+    scheme: config.scheme,
+    platform: config.platform,
+    appearance: config.appearance,
+  });
   const { document } = useDOM();
   const target = schemeTarget || document?.body;
 
   useIsomorphicLayoutEffect(() => {
-    if (scheme === 'inherit') {
+    if (scheme === "inherit") {
       return noop;
     }
-    if (process.env.NODE_ENV === 'development' && target.hasAttribute('scheme')) {
-      warn('<body scheme> was set before VKUI mount - did you forget scheme="inherit"?');
+    if (
+      process.env.NODE_ENV === "development" &&
+      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 configContext = useObjectMemo({ appearance: deriveAppearance(realScheme), ...config });
+  const configContext = useObjectMemo({
+    appearance: deriveAppearance(realScheme),
+    ...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,32 +1,10 @@
-import * as React from 'react';
-import vkBridge, { AppearanceSchemeType, AppearanceType } from '@vkontakte/vk-bridge';
-import { PlatformType, platform } from '../../lib/platform';
-
-export enum Appearance {
-  DARK = 'dark',
-  LIGHT = 'light',
-}
-
-export enum Scheme {
-  DEPRECATED_CLIENT_LIGHT = 'client_light',
-  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';
+import * as React from "react";
+import vkBridge, { AppearanceType } from "@vkontakte/vk-bridge";
+import { PlatformType, platform } from "../../lib/platform";
 
 export enum WebviewType {
-  VKAPPS = 'vkapps',
-  INTERNAL = 'internal',
+  VKAPPS = "vkapps",
+  INTERNAL = "internal",
 }
 
 export interface ConfigProviderContextInterface {
@@ -55,16 +33,20 @@ export interface ConfigProviderContextInterface {
    * Платформа
    */
   platform?: PlatformType;
+  hasNewTokens?: boolean;
 }
 
 export const defaultConfigProviderProps = {
   webviewType: WebviewType.VKAPPS,
   isWebView: vkBridge.isWebView(),
-  scheme: Scheme.BRIGHT_LIGHT,
   transitionMotionEnabled: true,
   platform: platform(),
+  hasNewTokens: false,
   // appearance is auto-detected by default
   // appearance: Appearance.LIGHT,
 };
 
-export const ConfigProviderContext = React.createContext<ConfigProviderContextInterface>(defaultConfigProviderProps);
+export const ConfigProviderContext =
+  React.createContext<ConfigProviderContextInterface>(
+    defaultConfigProviderProps
+  );

package/src/components/ContentCard/ContentCard.css

@@ -1,9 +1,16 @@
+.ContentCard--disabled {
+  opacity: 0.6;
+}
+
 .ContentCard__body {
   padding: 12px 16px;
 }
 
 .ContentCard__tappable {
   border-radius: 8px;
+  text-decoration: none;
+  color: var(--text_primary);
+  display: block;
 }
 
 .ContentCard__img {