@vkontakte/vkui 4.23.0 → 4.24.0

package/src/components/ChipsSelect/useChipsSelect.ts

@@ -1,16 +1,20 @@
-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, showSelected } =
+    props;
 
   const [opened, setOpened] = React.useState(false);
   const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number>(0);
   const [focusedOption, setFocusedOption] = React.useState<Option>(null);
 
-  const { fieldValue, selectedOptions, ...chipsInputState } = useChipsInput(props);
+  const { fieldValue, selectedOptions, ...chipsInputState } =
+    useChipsInput(props);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     chipsInputState.handleInputChange(e);
@@ -22,7 +26,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: Option) =>
+          filterFn(fieldValue, option, getOptionLabel)
+        )
+      : options;
   }, [options, filterFn, fieldValue, getOptionLabel]);
 
   filteredOptions = React.useMemo(() => {
@@ -43,7 +51,16 @@ export const useChipsSelect = <Option extends ChipsInputOption>(props: Partial<C
   }, [showSelected, filteredOptions, selectedOptions]);
 
   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

@@ -1,10 +1,10 @@
-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';
+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 {
   /**
@@ -36,7 +36,7 @@ export const ClickPopper: React.FC<ClickPopperProps> = ({
   const [computedShown, setComputedShown] = React.useState(_shown || false);
   const [dropdownNode, setPopperNode] = React.useState(null);
 
-  const shown = typeof _shown === 'boolean' ? _shown : computedShown;
+  const shown = typeof _shown === "boolean" ? _shown : computedShown;
 
   const { document } = useDOM();
 
@@ -45,19 +45,23 @@ export const ClickPopper: React.FC<ClickPopperProps> = ({
   const [childRef, child] = usePatchChildrenRef(children);
 
   const setShown = (value: boolean) => {
-    if (typeof _shown !== 'boolean') {
+    if (typeof _shown !== "boolean") {
       setComputedShown(value);
     }
-    typeof onShownChange === 'function' && onShownChange(value);
+    typeof onShownChange === "function" && onShownChange(value);
   };
 
-  useGlobalEventListener(document, 'click', (e: MouseEvent) => {
-    if (dropdownNode && !childRef.current.contains(e.target as Node) && !dropdownNode.contains(e.target)) {
+  useGlobalEventListener(document, "click", (e: MouseEvent) => {
+    if (
+      dropdownNode &&
+      !childRef.current.contains(e.target as Node) &&
+      !dropdownNode.contains(e.target)
+    ) {
       setShown(false);
     }
   });
 
-  const targetClickEvent = useEventListener('click', () => {
+  const targetClickEvent = useEventListener("click", () => {
     setShown(!shown);
   });
 
@@ -68,15 +72,11 @@ export const ClickPopper: React.FC<ClickPopperProps> = ({
   return (
     <React.Fragment>
       {child}
-      {shown &&
-        <Popper
-          {...restProps}
-          targetRef={childRef}
-          getRef={patchedPopperRef}
-        >
+      {shown && (
+        <Popper {...restProps} targetRef={childRef} getRef={patchedPopperRef}>
           {content}
         </Popper>
-      }
+      )}
     </React.Fragment>
   );
 };

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -1,18 +1,18 @@
-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,
   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 "./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";
 
 export interface ConfigProviderProps extends ConfigProviderContextInterface {
   /**
@@ -21,15 +21,15 @@ export interface ConfigProviderProps extends ConfigProviderContextInterface {
   scheme?: AppearanceScheme;
 }
 
-const warn = warnOnce('ConfigProvider');
+const warn = warnOnce("ConfigProvider");
 
-function useSchemeDetector(node: HTMLElement, _scheme: Scheme | 'inherit') {
-  const inherit = _scheme === 'inherit';
+function useSchemeDetector(node: HTMLElement, _scheme: Scheme | "inherit") {
+  const inherit = _scheme === "inherit";
   const getScheme = () => {
     if (!inherit || !canUseDOM) {
       return undefined;
     }
-    return node.getAttribute('scheme') as Scheme;
+    return node.getAttribute("scheme") as Scheme;
   };
   const [resolvedScheme, setScheme] = React.useState(getScheme());
 
@@ -39,26 +39,40 @@ function useSchemeDetector(node: HTMLElement, _scheme: Scheme | 'inherit') {
     }
     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]);
 
-  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';
+  scheme === Scheme.SPACE_GRAY || scheme === Scheme.VKCOM_DARK
+    ? "dark"
+    : "light";
 
-function normalizeScheme(scheme: AppearanceScheme, platform: PlatformType): Scheme | 'inherit' {
-  if (scheme === 'inherit') {
+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}"`);
+    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}"`);
+  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) {
@@ -75,24 +89,35 @@ const ConfigProvider: React.FC<ConfigProviderProps> = ({
   children,
   schemeTarget,
   ...config
-}: ConfigProviderProps & { children?: React.ReactNode; schemeTarget?: HTMLElement }) => {
+}: ConfigProviderProps & {
+  children?: React.ReactNode;
+  schemeTarget?: HTMLElement;
+}) => {
   const scheme = normalizeScheme(config.scheme, config.platform);
   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}>

package/src/components/ConfigProvider/ConfigProviderContext.tsx

@@ -1,10 +1,13 @@
-import * as React from 'react';
-import vkBridge, { AppearanceSchemeType, AppearanceType } from '@vkontakte/vk-bridge';
-import { PlatformType, platform } from '../../lib/platform';
+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',
+  DARK = "dark",
+  LIGHT = "light",
 }
 
 export enum Scheme {
@@ -12,29 +15,34 @@ export enum Scheme {
    * @deprecated будет удалено в 5.0.0
    * версия оставлена для совместимости со старыми версиями клиентов
    */
-  DEPRECATED_CLIENT_LIGHT = 'client_light',
+  DEPRECATED_CLIENT_LIGHT = "client_light",
   /**
    * @deprecated будет удалено в 5.0.0
    * версия оставлена для совместимости со старыми версиями клиентов
    */
-  DEPRECATED_CLIENT_DARK = 'client_dark',
+  DEPRECATED_CLIENT_DARK = "client_dark",
   /**
    * @deprecated будет удалено в 5.0.0
    * версия оставлена для совместимости с vkcom, когда там была только одна схема
    */
-  VKCOM = 'vkcom',
+  VKCOM = "vkcom",
 
-  BRIGHT_LIGHT = 'bright_light',
-  SPACE_GRAY = 'space_gray',
-  VKCOM_LIGHT = 'vkcom_light',
-  VKCOM_DARK = 'vkcom_dark'
+  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 type AppearanceScheme =
+  | AppearanceSchemeType
+  | Scheme.VKCOM
+  | Scheme.VKCOM_DARK
+  | Scheme.VKCOM_LIGHT
+  | "inherit";
 
 export enum WebviewType {
-  VKAPPS = 'vkapps',
-  INTERNAL = 'internal',
+  VKAPPS = "vkapps",
+  INTERNAL = "internal",
 }
 
 export interface ConfigProviderContextInterface {
@@ -63,6 +71,7 @@ export interface ConfigProviderContextInterface {
    * Платформа
    */
   platform?: PlatformType;
+  hasNewTokens?: boolean;
 }
 
 export const defaultConfigProviderProps = {
@@ -71,8 +80,12 @@ export const defaultConfigProviderProps = {
   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 {

package/src/components/ContentCard/ContentCard.tsx

@@ -1,16 +1,24 @@
-import * as React from 'react';
-import Card, { CardProps } from '../Card/Card';
-import Caption from '../Typography/Caption/Caption';
-import Title from '../Typography/Title/Title';
-import Text from '../Typography/Text/Text';
-import Tappable from '../Tappable/Tappable';
-import { getClassName } from '../../helpers/getClassName';
-import { usePlatform } from '../../hooks/usePlatform';
-import { hasReactNode } from '../../lib/utils';
-import { HasRef, HasRootRef } from '../../types';
-import './ContentCard.css';
+import * as React from "react";
+import Card, { CardProps } from "../Card/Card";
+import Caption from "../Typography/Caption/Caption";
+import Title from "../Typography/Title/Title";
+import Text from "../Typography/Text/Text";
+import Tappable, { TappableProps } from "../Tappable/Tappable";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { hasReactNode } from "../../lib/utils";
+import { HasRef, HasRootRef } from "../../types";
+import { classNames } from "../../lib/classNames";
+import "./ContentCard.css";
 
-export interface ContentCardProps extends HasRootRef<HTMLDivElement>, React.ImgHTMLAttributes<HTMLImageElement>, HasRef<HTMLImageElement> {
+export interface ContentCardProps
+  extends HasRootRef<HTMLDivElement>,
+    Omit<TappableProps, "getRootRef" | "crossOrigin">,
+    Omit<
+      React.ImgHTMLAttributes<HTMLImageElement>,
+      keyof React.HTMLAttributes<HTMLImageElement>
+    >,
+    HasRef<HTMLImageElement> {
   /**
    Текст над заголовком
    */
@@ -27,10 +35,6 @@ export interface ContentCardProps extends HasRootRef<HTMLDivElement>, React.ImgH
    Нижний текст
    */
   caption?: React.ReactNode;
-  /**
-    URL или путь к изображению
-   */
-  src?: string;
   /**
     @deprecated будет удалено в 5.0.0. Используйте src
    */
@@ -39,18 +43,7 @@ export interface ContentCardProps extends HasRootRef<HTMLDivElement>, React.ImgH
     Максимальная высота изображения
    */
   maxHeight?: number;
-  /**
-    Аналогично alt для img
-   */
-  alt?: string;
-  /**
-    Отключает Tappable у карточки
-   */
-  disabled?: boolean;
-  /**
-   В точности как у `<Card/>`
-   */
-  mode?: CardProps['mode'];
+  mode?: CardProps["mode"];
 }
 
 const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
@@ -83,13 +76,25 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
   } = props;
   const platform = usePlatform();
 
-  const disabled = restProps.disabled || typeof restProps.onClick !== 'function';
-
   const source = image || src;
 
   return (
-    <Card mode={mode} getRootRef={getRootRef} vkuiClass={getClassName('ContentCard', platform)} style={style} className={className}>
-      <Tappable {...restProps} disabled={disabled} vkuiClass="ContentCard__tappable">
+    <Card
+      mode={mode}
+      getRootRef={getRootRef}
+      vkuiClass={classNames(getClassName("ContentCard", platform), {
+        "ContentCard--disabled": restProps.disabled,
+      })}
+      style={style}
+      className={className}
+    >
+      <Tappable
+        {...restProps}
+        disabled={restProps.disabled || (!restProps.onClick && !restProps.href)}
+        hasHover={false}
+        hasActive={false}
+        vkuiClass="ContentCard__tappable"
+      >
         {(source || srcSet) && (
           <img
             ref={getRef}
@@ -109,10 +114,31 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
           />
         )}
         <div vkuiClass="ContentCard__body">
-          {hasReactNode(subtitle) && <Caption caps vkuiClass="ContentCard__text" weight="semibold" level="3">{subtitle}</Caption>}
-          {hasReactNode(header) && <Title vkuiClass="ContentCard__text" weight="semibold" level="3">{header}</Title>}
-          {hasReactNode(text) && <Text vkuiClass="ContentCard__text" weight="regular">{text}</Text>}
-          {hasReactNode(caption) && <Caption vkuiClass="ContentCard__text" weight="regular" level="1">{caption}</Caption>}
+          {hasReactNode(subtitle) && (
+            <Caption
+              caps
+              vkuiClass="ContentCard__text"
+              weight="semibold"
+              level="3"
+            >
+              {subtitle}
+            </Caption>
+          )}
+          {hasReactNode(header) && (
+            <Title vkuiClass="ContentCard__text" weight="semibold" level="3">
+              {header}
+            </Title>
+          )}
+          {hasReactNode(text) && (
+            <Text vkuiClass="ContentCard__text" weight="regular">
+              {text}
+            </Text>
+          )}
+          {hasReactNode(caption) && (
+            <Caption vkuiClass="ContentCard__text" weight="regular" level="1">
+              {caption}
+            </Caption>
+          )}
         </div>
       </Tappable>
     </Card>
@@ -120,7 +146,7 @@ const ContentCard: React.FC<ContentCardProps> = (props: ContentCardProps) => {
 };
 
 ContentCard.defaultProps = {
-  mode: 'shadow',
+  mode: "shadow",
 };
 
 export default ContentCard;

package/src/components/ContentCard/Readme.md

@@ -1,26 +1,26 @@
-Компонент на базе [Card](/#/Card). Принимает все валидные свойства для `img` и `Tappable`. 
+Компонент на базе [Card](/#/Card). Принимает все валидные свойства для `img` и `Tappable`.
 
 Внутри распределяет переданные свойства между своими компонентами следующим образом:
 
 - корневой компонент `Card`
-  * `mode`,
-  * `getRootRef`,
-  * `style`,
-  * `className`;
+  - `mode`,
+  - `getRootRef`,
+  - `style`,
+  - `className`;
 - `img`
-  * `getRef`,
-  * `src`,
-  * `srcSet`,
-  * `alt`,
-  * `width`,
-  * `height`,
-  * `maxHeight`,
-  * `crossOrigin`,
-  * `decoding`,
-  * `loading`,
-  * `referrerPolicy`,
-  * `sizes`,
-  * `useMap`,
+  - `getRef`,
+  - `src`,
+  - `srcSet`,
+  - `alt`,
+  - `width`,
+  - `height`,
+  - `maxHeight`,
+  - `crossOrigin`,
+  - `decoding`,
+  - `loading`,
+  - `referrerPolicy`,
+  - `sizes`,
+  - `useMap`,
 - внутренний `Tappable` получает все остальные свойства (кроме `subtitle`, `header`, `text` и `caption`).
 
 ```jsx
@@ -28,9 +28,7 @@ const Example = () => {
   return (
     <View activePanel="profile" id="profile">
       <Panel id="profile">
-        <PanelHeader>
-          ContentCardExample
-        </PanelHeader>
+        <PanelHeader>ContentCardExample</PanelHeader>
         <Group>
           <CardGrid size="l">
             <ContentCard
@@ -39,6 +37,7 @@ const Example = () => {
               caption="VKUI Styleguide > Blocks > ContentCard"
             />
             <ContentCard
+              onClick={() => {}}
               src="https://images.unsplash.com/photo-1603988492906-4fb0fb251cf8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80"
               subtitle="unsplash"
               header="brown and gray mountains under blue sky during daytime photo"
@@ -47,6 +46,7 @@ const Example = () => {
               maxHeight={150}
             />
             <ContentCard
+              disabled
               src="https://images.unsplash.com/photo-1603928726698-a015a1015d0e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80"
               subtitle="unsplash"
               header="persons left hand with pink paint"
@@ -59,8 +59,7 @@ const Example = () => {
       </Panel>
     </View>
   );
-}
+};
 
-<Example/>
+<Example />;
 ```
-