@vkontakte/vkui 4.33.4 → 4.34.0

package/src/components/Placeholder/Readme.md

@@ -6,99 +6,86 @@
 Если плейсхолдер используется со свойством `stretched` (показывается во всю высоту панели), то на экране не должно быть ничего другого.
 
 ```jsx
-class PlaceholderExample extends React.Component {
-  constructor(props) {
-    super(props);
+const [activePanel, setActivePanel] = React.useState("example-1");
 
-    this.state = {
-      activePanel: "example-1",
-    };
+const onNavClick = (e) => {
+  const activePanel = e.currentTarget.dataset.to;
+  setActivePanel(activePanel);
+};
 
-    this.onNavClick = this.onNavClick.bind(this);
-  }
+<View activePanel={activePanel}>
+  <Panel id="example-1">
+    <PanelHeader>Плейсхолдеры</PanelHeader>
+    <Group>
+      <Placeholder
+        icon={<Icon56UsersOutline />}
+        header="Уведомления от сообществ"
+        action={<Button size="m">Подключить сообщества</Button>}
+      >
+        Подключите сообщества, от которых Вы хотите получать уведомления
+      </Placeholder>
+      <Separator />
+      <Placeholder icon={<Icon56MentionOutline />}>
+        Введите адрес страницы в поле поиска
+      </Placeholder>
+    </Group>
+    <Group>
+      <CellButton onClick={onNavClick} data-to="example-2">
+        Ещё примеры
+      </CellButton>
+    </Group>
+  </Panel>
 
-  onNavClick(e) {
-    const activePanel = e.currentTarget.dataset.to;
-    this.setState({ activePanel });
-  }
+  <Panel id="example-2">
+    <PanelHeader
+      before={<PanelHeaderBack onClick={onNavClick} data-to="example-1" />}
+    >
+      Плейсхолдеры
+    </PanelHeader>
+    <Group>
+      <Placeholder>Доступ запрещён</Placeholder>
+      <Separator />
+      <Placeholder
+        header="Находите друзей"
+        action={
+          <ButtonGroup mode="vertical" align="center">
+            <Button size="m">Найти друзей</Button>
+            <Button size="m" mode="tertiary">
+              Подробнее
+            </Button>
+          </ButtonGroup>
+        }
+      >
+        Здесь будут отображаться люди, которых вы добавите в друзья
+      </Placeholder>
+    </Group>
+    <Group>
+      <CellButton onClick={onNavClick} data-to="example-3">
+        Полноэкранный плейсхолдер
+      </CellButton>
+    </Group>
+  </Panel>
 
-  render() {
-    return (
-      <View activePanel={this.state.activePanel}>
-        <Panel id="example-1">
-          <PanelHeader>Плейсхолдеры</PanelHeader>
-          <Group>
-            <Placeholder
-              icon={<Icon56UsersOutline />}
-              header="Уведомления от сообществ"
-              action={<Button size="m">Подключить сообщества</Button>}
-            >
-              Подключите сообщества, от которых Вы хотите получать уведомления
-            </Placeholder>
-            <Separator />
-            <Placeholder icon={<Icon56MentionOutline />}>
-              Введите адрес страницы в поле поиска
-            </Placeholder>
-          </Group>
-          <Group>
-            <CellButton onClick={this.onNavClick} data-to="example-2">
-              Ещё примеры
-            </CellButton>
-          </Group>
-        </Panel>
+  <Panel id="example-3">
+    <PanelHeader
+      before={<PanelHeaderBack onClick={onNavClick} data-to="example-1" />}
+    >
+      Плейсхолдеры
+    </PanelHeader>
 
-        <Panel id="example-2">
-          <PanelHeader
-            before={
-              <PanelHeaderBack onClick={this.onNavClick} data-to="example-1" />
-            }
-          >
-            Плейсхолдеры
-          </PanelHeader>
-          <Group>
-            <Placeholder>Доступ запрещён</Placeholder>
-            <Separator />
-            <Placeholder
-              header="Находите друзей"
-              action={<Button size="m">Найти друзей</Button>}
-            >
-              Здесь будут отображаться люди, которых вы добавите в друзья
-            </Placeholder>
-          </Group>
-          <Group>
-            <CellButton onClick={this.onNavClick} data-to="example-3">
-              Полноэкранный плейсхолдер
-            </CellButton>
-          </Group>
-        </Panel>
-
-        <Panel id="example-3">
-          <PanelHeader
-            before={
-              <PanelHeaderBack onClick={this.onNavClick} data-to="example-1" />
-            }
-          >
-            Плейсхолдеры
-          </PanelHeader>
-
-          <Placeholder
-            icon={<Icon56MessageReadOutline />}
-            action={
-              <Button size="m" mode="tertiary">
-                Показать все сообщения
-              </Button>
-            }
-            stretched
-          >
-            Нет непрочитанных
-            <br />
-            сообщений
-          </Placeholder>
-        </Panel>
-      </View>
-    );
-  }
-}
-
-<PlaceholderExample />;
+    <Placeholder
+      icon={<Icon56MessageReadOutline />}
+      action={
+        <Button size="m" mode="tertiary">
+          Показать все сообщения
+        </Button>
+      }
+      stretched
+    >
+      Нет непрочитанных
+      <br />
+      сообщений
+    </Placeholder>
+  </Panel>
+</View>;
 ```

package/src/components/PopoutRoot/PopoutRoot.tsx

@@ -18,19 +18,16 @@ export interface PopoutRootProps
   modal?: React.ReactNode;
 }
 
-export const PopoutRootComponent: React.FC<
-  PopoutRootProps & AdaptivityContextInterface
-> = (props) => {
-  const {
-    popout,
-    modal,
-    viewWidth,
-    viewHeight,
-    hasMouse,
-    children,
-    getRootRef,
-    ...restProps
-  } = props;
+export const PopoutRootComponent = ({
+  popout,
+  modal,
+  viewWidth,
+  viewHeight,
+  hasMouse,
+  children,
+  getRootRef,
+  ...restProps
+}: PopoutRootProps & AdaptivityContextInterface) => {
   const { document } = useDOM();
 
   const isDesktop = useAdaptivityIsDesktop();

package/src/components/PopoutWrapper/PopoutWrapper.tsx

@@ -19,7 +19,7 @@ export interface PopoutWrapperProps
 /**
  * @see https://vkcom.github.io/VKUI/#/PopoutWrapper
  */
-export const PopoutWrapper: React.FC<PopoutWrapperProps> = ({
+export const PopoutWrapper = ({
   alignY = "center",
   alignX = "center",
   closing = false,

package/src/components/PopoutWrapper/Readme.md

@@ -9,4 +9,4 @@ import { PopoutWrapper } from "@vkontakte/vkui";
 </PopoutWrapper>;
 ```
 
-Все всплывающие окна передаются в свойство `popout` компонента [`SplitLayout`](#/SplitLayout).
+Все всплывающие окна передаются в свойство `popout` компонента [`SplitLayout`](https://vkcom.github.io/VKUI/#/SplitLayout).

package/src/components/Popper/Popper.tsx

@@ -65,7 +65,7 @@ const ARROW_HEIGHT = 8;
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
-export const Popper: React.FC<PopperProps> = ({
+export const Popper = ({
   targetRef,
   children,
   getRef,

package/src/components/Popper/Readme.md

@@ -1,9 +1,9 @@
 > **Важно**
 >
-> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
+> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](https://vkcom.github.io/VKUI/#/Unstable).
 
 Низкоуровневый компонент для отрисовки выпадающего блока. Единственная его задача — корректно позиционироваться
-рядом с целевым элементом. На основе этого компонента сделаны [ClickPopper](#/ClickPopper) и [HoverPopper](#/HoverPopper),
+рядом с целевым элементом. На основе этого компонента сделаны [ClickPopper](https://vkcom.github.io/VKUI/#/ClickPopper) и [HoverPopper](https://vkcom.github.io/VKUI/#/HoverPopper),
 реализующие логику скрытия и показа по клику и по ховеру соответственно.
 
 ```jsx { "props": { "layout": false, "iframe": false } }

package/src/components/Progress/Progress.tsx

@@ -14,7 +14,7 @@ const PROGRESS_MAX_VALUE = 100;
 /**
  * @see https://vkcom.github.io/VKUI/#/Progress
  */
-export const Progress: React.FC<ProgressProps> = ({
+export const Progress = ({
   value = 0,
   getRootRef,
   ...restProps

package/src/components/PromoBanner/PromoBanner.tsx

@@ -52,9 +52,13 @@ const warn = warnOnce("PromoBanner");
 /**
  * @see https://vkcom.github.io/VKUI/#/PromoBanner
  */
-export const PromoBanner = (props: PromoBannerProps) => {
+export const PromoBanner = ({
+  bannerData = {},
+  onClose,
+  isCloseButtonHidden,
+  ...restProps
+}: PromoBannerProps) => {
   const platform = usePlatform();
-  const { bannerData = {}, onClose, ...restProps } = props;
 
   const ageRestrictions =
     bannerData.ageRestrictions != null
@@ -101,8 +105,8 @@ export const PromoBanner = (props: PromoBannerProps) => {
           <Caption vkuiClass="PromoBanner__age">{ageRestrictions}+</Caption>
         )}
 
-        {!props.isCloseButtonHidden && (
-          <div vkuiClass="PromoBanner__close" onClick={props.onClose}>
+        {!isCloseButtonHidden && (
+          <div vkuiClass="PromoBanner__close" onClick={onClose}>
             <Icon24Dismiss />
           </div>
         )}

package/src/components/Radio/Radio.tsx

@@ -51,16 +51,15 @@ export interface RadioProps
   description?: React.ReactNode;
 }
 
-const RadioComponent: React.FC<RadioProps> = (props: RadioProps) => {
-  const {
-    children,
-    description,
-    style,
-    className,
-    getRootRef,
-    sizeY,
-    ...restProps
-  } = props;
+const RadioComponent = ({
+  children,
+  description,
+  style,
+  className,
+  getRootRef,
+  sizeY,
+  ...restProps
+}: RadioProps) => {
   const platform = usePlatform();
 
   const RadioTypography =

package/src/components/RadioGroup/RadioGroup.tsx

@@ -9,11 +9,11 @@ export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/RadioGroup
  */
-export const RadioGroup: React.FC<RadioGroupProps> = ({
+export const RadioGroup = ({
   mode = "vertical",
   children,
   ...restProps
-}) => (
+}: RadioGroupProps) => (
   <div
     vkuiClass={classNames("RadioGroup", `RadioGroup--${mode}`)}
     {...restProps}

package/src/components/RangeSlider/RangeSlider.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { clamp } from "../../helpers/math";
 import { UniversalSlider, UniversalSliderProps } from "./UniversalSlider";
+import { TouchEvent } from "../Touch/Touch";
 
 export type Value = [number, number];
 export type RangeSliderProps = UniversalSliderProps<Value>;
@@ -8,7 +9,7 @@ export type RangeSliderProps = UniversalSliderProps<Value>;
 /**
  * @see https://vkcom.github.io/VKUI/#/RangeSlider
  */
-export const RangeSlider: React.FC<RangeSliderProps> = ({
+export const RangeSlider = ({
   onChange,
   defaultValue,
   min = 0,
@@ -28,7 +29,7 @@ export const RangeSlider: React.FC<RangeSliderProps> = ({
   );
 
   const handleChange: RangeSliderProps["onChange"] = React.useCallback(
-    (nextValue, event) => {
+    (nextValue: Value, event: TouchEvent) => {
       if (
         props.disabled ||
         (value[0] === nextValue[0] && value[1] === nextValue[1])

package/src/components/RangeSlider/UniversalSlider.tsx

@@ -25,7 +25,7 @@ export interface UniversalSliderProps<Value>
   onChange?(value: Value, e: TouchEvent): void;
 }
 
-const UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({
+const UniversalSliderDumb = ({
   min = 0,
   max = 100,
   step,
@@ -36,7 +36,7 @@ const UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({
   sizeY,
   disabled,
   ...restProps
-}) => {
+}: UniversalSliderProps<UniversalValue>) => {
   const [start, end] = value;
   const isRange = start != null;
   const gesture = React.useRef({

package/src/components/Removable/Removable.css

@@ -37,7 +37,7 @@
   font-size: 15px;
   line-height: 45px;
   color: var(--white);
-  background-color: var(--destructive);
+  background-color: var(--destructive, var(--vkui--color_background_negative));
   border: none;
   border-radius: 0;
 }
@@ -79,7 +79,7 @@
   content: "";
   width: 22px;
   height: 22px;
-  background-color: var(--destructive);
+  background-color: var(--destructive, var(--vkui--color_background_negative));
   border-radius: 50%;
 }
 

package/src/components/Removable/Removable.tsx

@@ -4,10 +4,9 @@ import { classNames } from "../../lib/classNames";
 import { getTitleFromChildren, noop } from "../../lib/utils";
 import { useExternRef } from "../../hooks/useExternRef";
 import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { useDOM } from "../../lib/dom";
-import { ANDROID, IOS, VKCOM } from "../../lib/platform";
+import { IOS } from "../../lib/platform";
 import { Icon24Cancel } from "@vkontakte/icons";
 import { IconButton } from "../IconButton/IconButton";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
@@ -27,17 +26,18 @@ export interface RemovableProps {
 
 interface RemovableIosOwnProps extends RemovableProps {
   removePlaceholderString?: string;
+  children?: React.ReactNode;
 }
 
 /**
  * @see https://vkcom.github.io/VKUI/#/RemovableIos
  */
-const RemovableIos: React.FC<RemovableIosOwnProps> = ({
+const RemovableIos = ({
   onRemove,
   removePlaceholder,
   removePlaceholderString,
   children,
-}) => {
+}: RemovableIosOwnProps) => {
   const { window } = useDOM();
 
   const removeButtonRef = React.useRef<HTMLElement>(null);
@@ -121,7 +121,7 @@ interface RemovableOwnProps
 /**
  * @see https://vkcom.github.io/VKUI/#/Removable
  */
-export const Removable: React.FC<RemovableOwnProps> = ({
+export const Removable = ({
   getRootRef,
   children,
   onRemove = noop,
@@ -147,12 +147,13 @@ export const Removable: React.FC<RemovableOwnProps> = ({
       {...restProps}
       ref={ref}
       vkuiClass={classNames(
-        getClassName("Removable", platform),
+        "Removable",
+        platform === IOS && "Removable--ios",
         `Removable--${align}`,
         `Removable--sizeY-${sizeY}`
       )}
     >
-      {(platform === ANDROID || platform === VKCOM) && (
+      {platform !== IOS && (
         <div vkuiClass="Removable__content">
           {children}
 

package/src/components/RichCell/Readme.md

@@ -4,28 +4,36 @@
     <PanelHeader>RichCell</PanelHeader>
     <Group>
       <RichCell
-        disabled
-        multiline
-        before={<Avatar size={72} src={getAvatarUrl("user_ti")} />}
-        text="Держи за обед в EZO"
-        caption="Вчера в 20:30"
-        after="+ 1 500 ₽"
+        before={<Avatar size={72} src={getAvatarUrl("")} />}
+        subhead="Subhead"
+        text="Text"
+        caption="Caption"
+        after="After"
+        afterCaption="After Caption"
+        bottom={
+          <UsersStack
+            photos={[getAvatarUrl(""), getAvatarUrl(""), getAvatarUrl("")]}
+          >
+            N общих друга
+          </UsersStack>
+        }
         actions={
           <ButtonGroup mode="horizontal" gap="s" stretched>
             <Button mode="primary" size="s">
-              Принять
+              Primary
             </Button>
             <Button mode="secondary" size="s">
-              Отклонить
+              Secondary
             </Button>
           </ButtonGroup>
         }
+        disabled
       >
-        Тарас Иванов
+        Children
       </RichCell>
+    </Group>
+    <Group header={<Header>Рекомендации друзей</Header>}>
       <RichCell
-        disabled
-        after={<Icon28UserAddOutline />}
         before={<Avatar size={72} src={getAvatarUrl("user_ilyagrshn")} />}
         caption="Команда ВКонтакте, Санкт-Петербург"
         bottom={
@@ -49,23 +57,74 @@
             </Button>
           </ButtonGroup>
         }
+        disabled
       >
         Илья Гришин
       </RichCell>
       <RichCell
-        before={<Avatar size={48} src={getAvatarUrl("user_lihachyov")} />}
-        text="Поездка в Лиссабон"
-        caption="Вчера в 20:30"
-        after="+ 1 500 ₽"
+        before={<Avatar size={72} src={getAvatarUrl("user_rom")} />}
+        after={<Icon24UserAddOutline />}
+        bottom={
+          <UsersStack
+            photos={[
+              getAvatarUrl("user_casper6479"),
+              getAvatarUrl("user_me"),
+              getAvatarUrl("user_evg"),
+            ]}
+          >
+            12 общих друзей
+          </UsersStack>
+        }
+        actions={
+          <ButtonGroup mode="horizontal" gap="s" stretched>
+            <Button mode="primary" size="s">
+              Добавить
+            </Button>
+            <Button mode="secondary" size="s">
+              Скрыть
+            </Button>
+          </ButtonGroup>
+        }
+        disabled
       >
-        Михаил Лихачев
+        Ром Захаров
       </RichCell>
+    </Group>
+    <Group header={<Header>История переводов</Header>}>
       <RichCell
-        before={<Avatar size={48} src={getAvatarUrl("user_tc")} />}
+        before={<Avatar size={48} src={getAvatarUrl("user_ti")} />}
+        text="Держи за обед в EZO"
+        caption="сегодня в 18:00"
+        after="+ 1 232 ₽"
+        afterCaption="Комиссия 1%"
+        actions={
+          <ButtonGroup mode="horizontal" gap="s" stretched>
+            <Button mode="primary" size="s">
+              Принять
+            </Button>
+            <Button mode="secondary" size="s">
+              Отклонить
+            </Button>
+          </ButtonGroup>
+        }
+        multiline
+        disabled
+      >
+        Тарас Иванов{" "}
+        <Icon16Verified
+          style={{
+            display: "inline-block",
+            color: "var(--vkui--color_icon_accent)",
+            verticalAlign: "text-top",
+          }}
+        />
+      </RichCell>
+      <RichCell
+        before={<Avatar size={48} src={getAvatarUrl("user_lihachyov")} />}
         caption="Вчера в 20:30"
-        after="- 700 ₽"
+        after="- 1 800 ₽"
       >
-        Тимофей Чаптыков
+        Михаил Лихачев
       </RichCell>
     </Group>
   </Panel>