@vkontakte/vkui 4.33.4 → 4.34.2

package/src/components/Placeholder/Placeholder.tsx

@@ -30,44 +30,35 @@ export interface PlaceholderProps
 /**
  * @see https://vkcom.github.io/VKUI/#/Placeholder
  */
-export const Placeholder: React.FC<PlaceholderProps> = (
-  props: PlaceholderProps
-) => {
-  const {
-    icon,
-    header,
-    action,
-    children,
-    stretched,
-    getRootRef,
-    ...restProps
-  } = props;
-
-  return (
-    <div
-      {...restProps}
-      ref={getRootRef}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames("Placeholder", {
-        "Placeholder--stretched": stretched,
-      })}
-    >
-      <div vkuiClass="Placeholder__in">
-        {hasReactNode(icon) && <div vkuiClass="Placeholder__icon">{icon}</div>}
-        {hasReactNode(header) && (
-          <Title level="2" weight="2" vkuiClass="Placeholder__header">
-            {header}
-          </Title>
-        )}
-        {hasReactNode(children) && (
-          <Headline weight="3" vkuiClass="Placeholder__text">
-            {children}
-          </Headline>
-        )}
-        {hasReactNode(action) && (
-          <div vkuiClass="Placeholder__action">{action}</div>
-        )}
-      </div>
+export const Placeholder = ({
+  icon,
+  header,
+  action,
+  children,
+  stretched,
+  getRootRef,
+  ...restProps
+}: PlaceholderProps) => (
+  <div
+    {...restProps}
+    ref={getRootRef}
+    vkuiClass={classNames("Placeholder", stretched && "Placeholder--stretched")}
+  >
+    <div vkuiClass="Placeholder__in">
+      {hasReactNode(icon) && <div vkuiClass="Placeholder__icon">{icon}</div>}
+      {hasReactNode(header) && (
+        <Title level="2" weight="2" vkuiClass="Placeholder__header">
+          {header}
+        </Title>
+      )}
+      {hasReactNode(children) && (
+        <Headline weight="3" vkuiClass="Placeholder__text">
+          {children}
+        </Headline>
+      )}
+      {hasReactNode(action) && (
+        <div vkuiClass="Placeholder__action">{action}</div>
+      )}
     </div>
-  );
-};
+  </div>
+);

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,
@@ -78,7 +78,7 @@ export const Popper: React.FC<PopperProps> = ({
   offsetSkidding = 0,
   forcePortal = true,
   style: compStyles,
-  customModifiers = [],
+  customModifiers,
   ...restProps
 }: PopperProps) => {
   const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(
@@ -140,7 +140,9 @@ export const Popper: React.FC<PopperProps> = ({
       modifiers.push(sameWidth);
     }
 
-    modifiers.push(...customModifiers);
+    if (customModifiers) {
+      modifiers.push(...customModifiers);
+    }
     return modifiers;
   }, [
     arrow,

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 =
@@ -100,3 +99,5 @@ const RadioComponent: React.FC<RadioProps> = (props: RadioProps) => {
 export const Radio = withAdaptivity(RadioComponent, {
   sizeY: true,
 });
+
+Radio.displayName = "Radio";

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({
@@ -157,3 +157,5 @@ const UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({
 export const UniversalSlider = withAdaptivity(UniversalSliderDumb, {
   sizeY: true,
 });
+
+UniversalSlider.displayName = "UniversalSlider";

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}