@vkontakte/vkui 4.22.0 → 4.24.0

package/src/components/Removable/Removable.tsx

@@ -1,18 +1,18 @@
-import * as React from 'react';
-import { HasRootRef } from '../../types';
-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 { Icon24Cancel } from '@vkontakte/icons';
-import IconButton from '../IconButton/IconButton';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
-import Tappable from '../Tappable/Tappable';
-import './Removable.css';
+import * as React from "react";
+import { HasRootRef } from "../../types";
+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 { Icon24Cancel } from "@vkontakte/icons";
+import IconButton from "../IconButton/IconButton";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import Tappable from "../Tappable/Tappable";
+import "./Removable.css";
 
 export interface RemovableProps {
   /**
@@ -25,7 +25,8 @@ export interface RemovableProps {
   onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
 }
 
-interface RemovableIosOwnProps extends Pick<RemovableProps, 'removePlaceholder'> {
+interface RemovableIosOwnProps
+  extends Pick<RemovableProps, "removePlaceholder"> {
   onRemoveClick?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
   removePlaceholderString?: string;
 }
@@ -36,14 +37,16 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
   removePlaceholderString,
   children,
 }) => {
-  const { document } = useDOM();
+  const { window } = useDOM();
 
   const removeButtonRef = React.useRef(null);
   const [removeOffset, updateRemoveOffset] = React.useState(0);
 
-  useGlobalEventListener(document, 'click', removeOffset > 0 && (() => {
-    updateRemoveOffset(0);
-  }));
+  useGlobalEventListener(window, "click", () => {
+    if (removeOffset > 0) {
+      updateRemoveOffset(0);
+    }
+  });
 
   const onRemoveTransitionEnd = () => {
     if (removeOffset > 0) {
@@ -51,7 +54,9 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
     }
   };
 
-  const onRemoveActivateClick = () => {
+  const onRemoveActivateClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+
     const { offsetWidth = 0 } = removeButtonRef?.current;
     updateRemoveOffset(offsetWidth);
   };
@@ -84,7 +89,6 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
         getRootRef={removeButtonRef}
         vkuiClass="Removable__remove"
         onClick={onRemoveClick}
-        onTransitionEnd={onRemoveTransitionEnd}
       >
         <span vkuiClass="Removable__remove-in">{removePlaceholder}</span>
       </Tappable>
@@ -92,19 +96,22 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
   );
 };
 
-interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps, HasRootRef<HTMLDivElement> {
+interface RemovableOwnProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    RemovableProps,
+    HasRootRef<HTMLDivElement> {
   /**
    * Расположение кнопки удаления.
    */
-  align?: 'start' | 'center';
+  align?: "start" | "center";
 }
 
 export const Removable: React.FC<RemovableOwnProps> = ({
   getRootRef,
   children,
   onRemove = noop,
-  removePlaceholder = 'Удалить',
-  align = 'center',
+  removePlaceholder = "Удалить",
+  align = "center",
   ...restProps
 }: RemovableOwnProps) => {
   const platform = usePlatform();
@@ -117,16 +124,17 @@ export const Removable: React.FC<RemovableOwnProps> = ({
     onRemove(e);
   };
 
-  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);
+  const removePlaceholderString: string =
+    getTitleFromChildren(removePlaceholder);
 
   return (
     <div
       {...restProps}
       ref={ref}
       vkuiClass={classNames(
-        getClassName('Removable', platform),
+        getClassName("Removable", platform),
         `Removable--${align}`,
-        `Removable--sizeY-${sizeY}`,
+        `Removable--sizeY-${sizeY}`
       )}
     >
       {(platform === ANDROID || platform === VKCOM) && (

package/src/components/RichCell/Readme.md

@@ -1,14 +1,12 @@
 ```jsx
 <View activePanel="list">
   <Panel id="list">
-    <PanelHeader>
-      RichCell
-    </PanelHeader>
+    <PanelHeader>RichCell</PanelHeader>
     <Group>
       <RichCell
         disabled
         multiline
-        before={<Avatar size={72} src={getAvatarUrl('user_ti')} />}
+        before={<Avatar size={72} src={getAvatarUrl("user_ti")} />}
         text="Держи за обед в EZO"
         caption="Вчера в 20:30"
         after="+ 1 500 ₽"
@@ -24,16 +22,18 @@
       <RichCell
         disabled
         after={<Icon28UserAddOutline />}
-        before={<Avatar size={72} src={getAvatarUrl('user_ilyagrshn')} />}
+        before={<Avatar size={72} src={getAvatarUrl("user_ilyagrshn")} />}
         caption="Команда ВКонтакте, Санкт-Петербург"
         bottom={
           <UsersStack
             photos={[
-              getAvatarUrl('user_ox'),
-              getAvatarUrl('user_vitalyavolyn'),
-              getAvatarUrl('user_eee'),
+              getAvatarUrl("user_ox"),
+              getAvatarUrl("user_vitalyavolyn"),
+              getAvatarUrl("user_eee"),
             ]}
-          >73 общих друга</UsersStack>
+          >
+            73 общих друга
+          </UsersStack>
         }
         actions={
           <React.Fragment>
@@ -45,7 +45,7 @@
         Илья Гришин
       </RichCell>
       <RichCell
-        before={<Avatar size={48} src={getAvatarUrl('user_lihachyov')} />}
+        before={<Avatar size={48} src={getAvatarUrl("user_lihachyov")} />}
         text="Поездка в Лиссабон"
         caption="Вчера в 20:30"
         after="+ 1 500 ₽"
@@ -53,7 +53,7 @@
         Михаил Лихачев
       </RichCell>
       <RichCell
-        before={<Avatar size={48} src={getAvatarUrl('user_tc')} />}
+        before={<Avatar size={48} src={getAvatarUrl("user_tc")} />}
         caption="Вчера в 20:30"
         after="- 700 ₽"
       >

package/src/components/RichCell/RichCell.tsx

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import { usePlatform } from '../../hooks/usePlatform';
-import { getClassName } from '../../helpers/getClassName';
-import Tappable, { TappableProps } from '../Tappable/Tappable';
-import { hasReactNode } from '../../lib/utils';
-import Text from '../Typography/Text/Text';
-import Subhead from '../Typography/Subhead/Subhead';
-import { withAdaptivity } from '../../hoc/withAdaptivity';
-import './RichCell.css';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getClassName } from "../../helpers/getClassName";
+import Tappable, { TappableProps } from "../Tappable/Tappable";
+import { hasReactNode } from "../../lib/utils";
+import Text from "../Typography/Text/Text";
+import Subhead from "../Typography/Subhead/Subhead";
+import { withAdaptivity } from "../../hoc/withAdaptivity";
+import "./RichCell.css";
 
 export interface RichCellProps extends TappableProps {
   /**
@@ -58,15 +58,13 @@ const RichCell: React.FC<RichCellProps> = ({
   return (
     <Tappable
       {...restProps}
-      vkuiClass={
-        classNames(
-          getClassName('RichCell', platform),
-          {
-            'RichCell--mult': multiline,
-          },
-          `RichCell--sizeY-${sizeY}`,
-        )
-      }
+      vkuiClass={classNames(
+        getClassName("RichCell", platform),
+        {
+          "RichCell--mult": multiline,
+        },
+        `RichCell--sizeY-${sizeY}`
+      )}
     >
       {before}
       <div vkuiClass="RichCell__in">
@@ -74,14 +72,30 @@ const RichCell: React.FC<RichCellProps> = ({
         {after}
         <Text weight="medium" vkuiClass="RichCell__content">
           <div vkuiClass="RichCell__children">{children}</div>
-          {hasReactNode(after) && <div vkuiClass="RichCell__after">{after}</div>}
+          {hasReactNode(after) && (
+            <div vkuiClass="RichCell__after">{after}</div>
+          )}
         </Text>
-        {hasReactNode(text) && <Text weight="regular" vkuiClass="RichCell__text">{text}</Text>}
-        {hasReactNode(caption) && <Subhead Component="span" weight="regular" vkuiClass="RichCell__caption">{caption}</Subhead>}
+        {hasReactNode(text) && (
+          <Text weight="regular" vkuiClass="RichCell__text">
+            {text}
+          </Text>
+        )}
+        {hasReactNode(caption) && (
+          <Subhead
+            Component="span"
+            weight="regular"
+            vkuiClass="RichCell__caption"
+          >
+            {caption}
+          </Subhead>
+        )}
         {(hasReactNode(bottom) || hasReactNode(actions)) && (
           <div vkuiClass="RichCell__bottom">
             {bottom}
-            {hasReactNode(actions) && <div vkuiClass="RichCell__actions">{actions}</div>}
+            {hasReactNode(actions) && (
+              <div vkuiClass="RichCell__actions">{actions}</div>
+            )}
           </div>
         )}
       </div>

package/src/components/RichTooltip/Readme.md

@@ -0,0 +1,59 @@
+> **Важно**
+>
+> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
+
+Тултип, открывающийся при наведеннии мыши на `children`. В отличие от [TextTooltip](#/TextTooltip), имеет меньше ограничений
+по содержимому. Компонент всё ещё предназначен для информирования пользователей, но внутри допускаются кнопки, ссылки, картинки.
+
+```jsx { "props": { "layout": false, "iframe": true } }
+<Checkbox>
+  Специальные возможности
+  <RichTooltip style={{maxWidth: 320}} content={
+    <Subhead weight="regular" style={{padding: '8px 12px', color: 'var(--text_primary)'}}>
+      Если включить эту настройку, элементы управления на сайте будут определены и озвучены синтезатором речи.
+      <br/><br/>
+      Настройка повышает доступность сайта и подходит для пользователей с ограниченными возможностями.
+    </Subhead>
+  }>
+    <Icon16HelpOutline style={{
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      position: 'relative',
+      top: -1,
+      color: 'var(--icon_secondary)'
+    }}/>
+  </RichTooltip>
+</Checkbox>
+
+<RichTooltip style={{maxWidth: 320}} content={
+  <RichCell
+    disabled
+    after={
+      <TextTooltip text="Добавить">
+        <Icon28UserAddOutline/>
+      </TextTooltip>
+    }
+    before={<Avatar size={72} src={getAvatarUrl('user_ilyagrshn')}/>}
+    caption="Команда ВКонтакте, Санкт-Петербург"
+    bottom={
+      <UsersStack
+        photos={[
+          getAvatarUrl('user_ox'),
+          getAvatarUrl('user_vitalyavolyn'),
+          getAvatarUrl('user_eee'),
+        ]}
+      >73 общих друга</UsersStack>
+    }
+    actions={
+      <React.Fragment>
+        <Button>Добавить</Button>
+        <Button mode="secondary">Скрыть</Button>
+      </React.Fragment>
+    }
+  >
+    Илья Гришин
+  </RichCell>
+}>
+  <Link style={{display: 'inline-block', margin: 20}}>Илья Гришин</Link>
+</RichTooltip>
+```

package/src/components/RichTooltip/RichTooltip.css

@@ -0,0 +1,10 @@
+.RichTooltip {
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 0 4px 32px rgba(0, 0, 0, 0.16);
+  border-radius: 8px;
+  background: var(--background_content);
+  animation: vkui-popper-fadein 0.2s ease;
+}
+
+.RichTooltip__arrow {
+  color: var(--background_content);
+}

package/src/components/RichTooltip/RichTooltip.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { HoverPopper } from "../HoverPopper/HoverPopper";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useAppearance } from "../../hooks/useAppearance";
+import { classNames } from "../../lib/classNames";
+import { prefixClass } from "../../lib/prefixClass";
+import { Placement } from "../Popper/Popper";
+import "./RichTooltip.css";
+
+// Приходится избегать экстендов от HoverPopperProps и PopperProps, потому что react-docgen не умеет в Omit.
+// Ждём либо фикса react-docgen (что вряд ли), либо переезда на react-docgen-typescript, где такой проблемы нет.
+export interface RichTooltipProps {
+  /**
+   * Содержимое тултипа
+   */
+  content?: React.ReactNode;
+  /**
+   * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства
+   */
+  shown?: boolean;
+  /**
+   * Вызывается при каждом изменении видимости тултипа
+   */
+  onShownChange?: (shown: boolean) => void;
+  /**
+   * Количество миллисекунд, после которых произойдет показ дропдауна
+   */
+  showDelay?: number;
+  /**
+   * Количество миллисекунд, после которых произойдет скрытие дропдауна
+   */
+  hideDelay?: number;
+  /**
+   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента
+   */
+  children?: React.ReactElement;
+  /**
+   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
+   */
+  placement?: Placement;
+  /**
+   * Отступ по вспомогательной оси
+   */
+  offsetSkidding?: number;
+  /**
+   * Отступ по главной оси
+   */
+  offsetDistance?: number;
+  onPlacementChange?: (data: { placement?: Placement }) => void;
+  arrow?: boolean;
+}
+
+export const RichTooltip: React.FC<RichTooltipProps> = ({
+  children,
+  arrow = true,
+  ...popperProps
+}: RichTooltipProps) => {
+  const platform = usePlatform();
+  const appearance = useAppearance();
+
+  return (
+    <HoverPopper
+      vkuiClass={classNames(getClassName("RichTooltip", platform), {
+        [`RichTooltip--${appearance}`]: !!appearance,
+      })}
+      arrow={arrow}
+      arrowClassName={prefixClass("RichTooltip__arrow")}
+      {...popperProps}
+    >
+      {children}
+    </HoverPopper>
+  );
+};

package/src/components/Root/Readme.md

@@ -5,7 +5,7 @@
 Как только он заканчивается, вызывается свойство-функция `onTransition`.
 
 ```jsx
-const [activeView, setActiveView] = useState('view1');
+const [activeView, setActiveView] = useState("view1");
 
 <Root activeView={activeView}>
   <View activePanel="panel1.1" id="view1">
@@ -13,7 +13,7 @@ const [activeView, setActiveView] = useState('view1');
       <PanelHeader>View 1</PanelHeader>
       <Group>
         <div style={{ height: 200 }} />
-        <CellButton onClick={ () => setActiveView('view2') }>
+        <CellButton onClick={() => setActiveView("view2")}>
           Open View 2
         </CellButton>
         <div style={{ height: 600 }} />
@@ -25,12 +25,12 @@ const [activeView, setActiveView] = useState('view1');
       <PanelHeader>View 2</PanelHeader>
       <Group>
         <div style={{ height: 200 }} />
-        <CellButton onClick={ () => setActiveView('view1') }>
+        <CellButton onClick={() => setActiveView("view1")}>
           Back to View 1
         </CellButton>
         <div style={{ height: 600 }} />
       </Group>
     </Panel>
   </View>
-</Root>
+</Root>;
 ```

package/src/components/Root/Root.css

@@ -73,30 +73,30 @@
   left: 0;
   top: 0;
   display: block;
-  content: '';
+  content: "";
   background-color: #000;
   z-index: 6;
 }
 
 .Root--ios .Root__view--show-back::after {
-  animation: vkui-root-ios-animation-show-back .6s var(--ios-easing);
+  animation: vkui-root-ios-animation-show-back 0.6s var(--ios-easing);
 }
 
 .Root--ios .Root__view--hide-forward::after {
-  animation: vkui-root-ios-animation-hide-forward .6s var(--ios-easing);
+  animation: vkui-root-ios-animation-hide-forward 0.6s var(--ios-easing);
 }
 
 .Root--ios .Root__view--show-forward {
-  animation: vkui-root-ios-animation-show-forward .6s var(--ios-easing);
+  animation: vkui-root-ios-animation-show-forward 0.6s var(--ios-easing);
 }
 
 .Root--ios .Root__view--hide-back {
-  animation: vkui-root-ios-animation-hide-back .6s var(--ios-easing);
+  animation: vkui-root-ios-animation-hide-back 0.6s var(--ios-easing);
 }
 
 @keyframes vkui-root-ios-animation-show-back {
   from {
-    opacity: .3;
+    opacity: 0.3;
   }
 
   to {
@@ -110,7 +110,7 @@
   }
 
   to {
-    opacity: .3;
+    opacity: 0.3;
   }
 }
 
@@ -143,12 +143,12 @@
 
 .Root--android .Root__view--show-forward,
 .Root--vkcom .Root__view--show-forward {
-  animation: vkui-root-android-animation-show-forward .3s var(--android-easing);
+  animation: vkui-root-android-animation-show-forward 0.3s var(--android-easing);
 }
 
 .Root--android .Root__view--hide-back,
 .Root--vkcom .Root__view--hide-back {
-  animation: vkui-root-android-animation-hide-back .3s var(--android-easing);
+  animation: vkui-root-android-animation-hide-back 0.3s var(--android-easing);
 }
 
 @keyframes vkui-root-android-animation-hide-back {